Merge pull request #1546 from lowcoder-org/fix/chart_column_name

Fixed line/bar chart issue with column name

Author: FalkWolsky

client/packages/lowcoder-cli/actions/build.js

@@ -3,6 +3,7 @@ import fsExtra from "fs-extra";
 import { build } from "vite";
 import { writeFileSync, existsSync, readFileSync, readdirSync } from "fs";
 import { resolve } from "path";
+import { pathToFileURL } from "url";
 import paths from "../config/paths.js";
 import "../util/log.js";
 import chalk from "chalk";
@@ -80,7 +81,9 @@ export default async function buildAction(options) {
   console.log("");
   console.cyan("Building...");
 
-  const viteConfig = await import(paths.appViteConfigJs).default;
+  const viteConfigURL = pathToFileURL(paths.appViteConfigJs);
+  const viteConfig = await import(viteConfigURL).default;
+  console.log(paths.appViteConfigJs);
   await build(viteConfig);
 
   // write package.json

client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts

@@ -109,6 +109,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
       }
       return {
         name: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().seriesName,
+        columnName: props.chartConfig.subtype === "waterfall" && index === 0?" ":s.getView().columnName,
         selectedMode: "single",
         select: {
           itemStyle: {
@@ -128,10 +129,10 @@ export function getSeriesConfig(props: EchartsConfigProps) {
         },
       };
     } else {
-      // pie
       const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
       return {
         ...props.chartConfig,
+        columnName: s.getView().columnName,
         radius: radiusAndCenter.radius,
         center: radiusAndCenter.center,
         name: s.getView().seriesName,
@@ -227,7 +228,7 @@ export function getEchartsConfig(
       d[` `] = sum - d[seriesColumnNames[0]];
       sum = d[` `];
     })
-    transformedData = [{[seriesColumnNames[0] + "_placeholder"]: 0, [seriesColumnNames[0]]: total, [props.xAxisKey]: "Total"}, ...transformedData]
+    transformedData = [{[" "]: 0, [seriesColumnNames[0]]: total, [props.xAxisKey]: "Total"}, ...transformedData]
   }
 
   if(props.chartConfig.subtype === "polar") {
@@ -272,7 +273,7 @@ export function getEchartsConfig(
       lineStyle: {
         ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       },
-      data: transformedData.map((i: any) => i[series.name])
+      data: transformedData.map((i: any) => i[series.columnName])
     })),
   };
   if (axisChart) {
@@ -334,7 +335,7 @@ export function getEchartsConfig(
       }
     }
   }
-  // log.log("Echarts transformedData and config", transformedData, config);
+  // console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 

client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/lineChartConfig.tsx

@@ -116,13 +116,9 @@ export const LineChartConfig = (function () {
         symbolSize: props.symbolSize,
         itemStyle: {
           color: (params) => {
-            if (!params.encode || !params.dimensionNames) {
-              return params.color;
-            }
-            const dataKey = params.dimensionNames[params.encode[props.polar?"radius":"y"][0]];
             const color = (props.itemColor as any)({
               seriesName: params.seriesName,
-              value: (params.data as any)[dataKey],
+              value: params.data,
             });
             if (color === "true") {
               return "red";

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartUtils.ts

@@ -97,6 +97,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
       }}, {[horizontalX?"xAxis":"yAxis"]: area.getView().to}]));
       return {
         name: s.getView().seriesName,
+        columnName: s.getView().columnName,
         selectedMode: "single",
         select: {
           itemStyle: {
@@ -126,10 +127,10 @@ export function getSeriesConfig(props: EchartsConfigProps) {
         },
       };
     } else {
-      // pie
       const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig);
       return {
         ...props.chartConfig,
+        columnName: s.getView().columnName,
         radius: radiusAndCenter.radius,
         center: radiusAndCenter.center,
         name: s.getView().seriesName,
@@ -264,7 +265,7 @@ export function getEchartsConfig(
       ...series,
       encode: {
         ...series.encode,
-        y: series.name,
+        y: series.columnName,
       },
       itemStyle: {
         ...series.itemStyle,
@@ -273,7 +274,7 @@ export function getEchartsConfig(
       lineStyle: {
         ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
       },
-      data: transformedData.map((i: any) => i[series.name])
+      data: transformedData.map((i: any) => i[series.columnName])
     })),
   };
   if (axisChart) {
@@ -336,7 +337,7 @@ export function getEchartsConfig(
     }
   }
 
-  // log.log("Echarts transformedData and config", transformedData, config);
+  // console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }
 

client/packages/lowcoder-comps/src/comps/pieChartComp/pieChartUtils.ts

@@ -128,7 +128,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
           }
         }
       }
-      if(props.chartConfig.subtype !== "doughnutPie") config.radius = s.radius;
+      if(props.chartConfig.subtype !== 'doughnutPie') config.radius = s.radius;
       if(s.left!="" && s.top!="") {
         config.center = [s.left, s.top];
       }
@@ -280,7 +280,7 @@ export function getEchartsConfig(
     ]
   }
 
-  // console.log("Echarts transformedData and config", transformedData, config);
+  console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }