echarts configurations updated

MenaamAfzal · MenaamAfzal · commit 5fdd5f18dca4 · 2024-05-01T19:41:44.000+05:00
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx
@@ -13,20 +13,25 @@ import {
   eventHandlerControl,
   valueComp,
   withType,
-  ValueFromOption,
   uiChildren,
   clickEvent,
+  styleControl,
+  EchartsStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "./chartConfigs/barChartConfig";
 import { XAxisConfig, YAxisConfig } from "./chartConfigs/cartesianAxisConfig";
 import { LegendConfig } from "./chartConfigs/legendConfig";
+import { EchartsLegendConfig } from "./chartConfigs/echartsLegendConfig";
+import { EchartsLabelConfig } from "./chartConfigs/echartsLabelConfig";
 import { LineChartConfig } from "./chartConfigs/lineChartConfig";
 import { PieChartConfig } from "./chartConfigs/pieChartConfig";
 import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig";
 import { SeriesListComp } from "./seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
+import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig";
+import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig";
 
 export const ChartTypeOptions = [
   {
@@ -47,32 +52,14 @@ export const ChartTypeOptions = [
   },
 ] as const;
 
-const chartModeOptions = [
+export const EchartsTypeOptions = [
   {
-    label: trans("chart.UIMode"),
-    value: "ui",
+    label: trans("chart.funnel"),
+    value: "funnel",
   },
   {
-    label: "ECharts JSON",
-    value: "json",
-  },
-  {
-    label: "Map",
-    value: "map",
-  },
-] as const;
-
-const mapModeOptions = [
-  {
-    label: "Map",
-    value: "map",
-  },
-] as const;
-
-const eChartModeOptions = [
-  {
-    label: "ECharts JSON",
-    value: "json",
+    label: trans("chart.gauge"),
+    value: "gauge",
   },
 ] as const;
 
@@ -251,7 +238,13 @@ const ChartOptionMap = {
   scatter: ScatterChartConfig,
 };
 
+const EchartsOptionMap = {
+  funnel: FunnelChartConfig,
+  gauge: GaugeChartConfig,
+};
+
 const ChartOptionComp = withType(ChartOptionMap, "bar");
+const EchartsOptionComp = withType(EchartsOptionMap, "funnel");
 export type CharOptionCompType = keyof typeof ChartOptionMap;
 
 export const chartUiModeChildren = {
@@ -269,6 +262,11 @@ export const chartUiModeChildren = {
 
 const chartJsonModeChildren = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption),
+  echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")),
+  echartsLegendConfig: EchartsLegendConfig,
+  echartsLabelConfig: EchartsLabelConfig,
+  echartsConfig: EchartsOptionComp,
+  style: styleControl(EchartsStyle),
 }
 
 const chartMapModeChildren = {
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx
@@ -1,5 +1,5 @@
 import { changeChildAction, CompAction } from "lowcoder-core";
-import { ChartCompChildrenType, ChartTypeOptions, getDataKeys } from "./chartConstants";
+import { ChartCompChildrenType, ChartTypeOptions, EchartsTypeOptions,getDataKeys } from "./chartConstants";
 import { newSeries } from "./seriesComp";
 import {
   CustomModal,
@@ -150,10 +150,41 @@ export function chartPropertyView(
             </div>
           ),
         })}
+        <Dropdown
+          value={children.echartsConfig.children.compType.getView()}
+          options={EchartsTypeOptions}
+          label={trans("chart.chartType")}
+          onChange={(value) => {
+            // keep the previous value
+            if (children.echartsConfig.children.comp.children.hasOwnProperty("showLabel")) {
+              children.echartsConfig.dispatchChangeValueAction({
+                compType: value as any,
+                comp: {
+                  showLabel: (
+                    children.echartsConfig.children.comp.children as any
+                  ).showLabel.toJsonValue(),
+                },
+              });
+            } else {
+              children.echartsConfig.dispatchChangeValueAction({
+                compType: value,
+              });
+            }
+          }}
+        />
+        {children.echartsConfig.children.compType.getView() === "funnel" &&
+          <>
+          {children.echartsLegendConfig.getPropertyView()}
+          {children.echartsLabelConfig.getPropertyView()}
+          </>}
+        {children.echartsTitle.propertyView({ label: trans("echarts.title") })}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
+      <Section name={sectionNames.style}>
+         {children.style.getPropertyView()}
+      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>
   );
diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts
@@ -130,8 +130,50 @@ export function getSeriesConfig(props: EchartsConfigProps) {
 // https://echarts.apache.org/en/option.html
 export function getEchartsConfig(props: EchartsConfigProps, chartSize?: ChartSize): EChartsOptionWithMap {
   if (props.mode === "json") {
-    return props.echartsOption ? props.echartsOption : {};
+    let opt={
+  "title": {
+    "text": props.echartsTitle,
+    "left": "center"
+  },
+  "backgroundColor": props?.style?.background,
+  "color":props?.style?.color,
+  "tooltip": {
+    "trigger": "item",
+    "formatter": "{a} <br/>{b} : {c}%"
+  },
+  "legend": {
+    "data": [
+      "Show",
+      "Click",
+      "Visit",
+      "Query",
+      "Buy"
+    ],
+    "top": props.echartsLegendConfig.top,
+  },
+  "series": [
+    {
+      "name": props.echartsConfig.type,
+      "type": props.echartsConfig.type,
+      "left": "10%",
+      "top": 60,
+      "bottom": 60,
+      "width": "80%",
+      "min": 0,
+      "max": 100,
+      "gap": 2,
+      "label": {
+        "show": true,
+        "position": props.echartsLabelConfig.top
+      },
+      "data": props.echartsOption.series[0].data
+    }
+  ]
+}
+    return props.echartsOption ? opt : {};
+    
   }
+  
   if(props.mode === "map") {
     const {
       mapZoomLevel,
