Improve Line Chart

lowcoder-org · FalkWolsky · May 22, 2025 · Apr 24, 2025 · Apr 24, 2025 · Apr 24, 2025
commit ffcef3c07f79c9dafe0558f41ad4e6abc4fd346e
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartComp.tsx
@@ -302,13 +302,13 @@ export const LineChartCompWithDefault = withDefault(LineChartComp, {
   series: [
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.spending"),
-      columnName: "spending",
+      seriesName: "Sales",
+      columnName: "sales",
     },
     {
       dataIndex: genRandomKey(),
-      seriesName: trans("chart.budget"),
-      columnName: "budget",
+      seriesName: "Growth",
+      columnName: "growth",
     },
   ],
 });
diff --git a/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx
@@ -83,11 +83,19 @@ export const XAxisDirectionOptions = [
 
 export type XAxisDirectionType = ValueFromOption<typeof XAxisDirectionOptions>;
 
+export const defaultChartData = [
+  { date: "Jan", sales: 320, growth: 250 },
+  { date: "Feb", sales: 450, growth: 300 },
+  { date: "Mar", sales: 380, growth: 340 },
+  { date: "Apr", sales: 520, growth: 400 },
+  { date: "May", sales: 480, growth: 450 },
+  { date: "Jun", sales: 600, growth: 500 }
+];
 export const noDataAxisConfig = {
   animation: false,
   xAxis: {
     type: "category",
-    name: trans("chart.noData"),
+    name: "No Data Available",
     nameLocation: "middle",
     data: [],
     axisLine: {
@@ -243,8 +251,8 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
-  title: withDefault(StringControl, trans("echarts.defaultTitle")),
-  data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource),
+  title: withDefault(StringControl, trans("lineChart.defaultTitle")),
+  data: jsonControl(toJSONObjectArray, defaultChartData),
   xAxisKey: valueComp<string>(""), // x-axis, key from data
   xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"),
   xAxisData: jsonControl(toArray, []),

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -317,6 +317,8 @@ export const en = {
 
   },
   lineChart: {
+    title: 'Title',
+    defaultTitle: 'Line Chart',
     cellSize: "Cell Size",
     range: "Range",
     markLines: "Mark Lines",