area pieces

Author: Imiss-U1025

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

@@ -334,27 +334,6 @@ export function getEchartsConfig(
       }
     }
   }
-
-  //Waterfall x-label initialization
-  if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
-    //default labels
-    // config.xAxis.data = undefined;
-    // config.xAxis.data = ["Total"];
-    // for(let i=1; i<transformedData.length; i++)
-    //   config.xAxis.data.push(`Column${i}`);
-  }
-
-  //Polar x-label initialization
-  if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
-    //default labels
-    // config.radiusAxis.data = undefined;
-    // config.angleAxis.data = undefined;
-    // let labelData = [];
-    // for(let i=0; i<transformedData.length; i++)
-    //   labelData.push(`C${i+1}`);
-    // if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
-    // if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
-  }
   // log.log("Echarts transformedData and config", transformedData, config);
   return config;
 }

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartConstants.tsx

@@ -4,10 +4,12 @@ import {
   toJSONObjectArray,
   toObject,
   BoolControl,
+  ColorControl,
   withDefault,
   StringControl,
   NumberControl,
   dropdownControl,
+  list,
   eventHandlerControl,
   valueComp,
   withType,
@@ -17,6 +19,7 @@ import {
   styleControl,
   EchartDefaultTextStyle,
   EchartDefaultChartStyle,
+  MultiCompBuilder,
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../basicChartComp/chartConfigs/barChartConfig";
@@ -187,6 +190,25 @@ export const noDataPieChartConfig = {
   ],
 } as EChartsOption;
 
+const areaPiecesChildrenMap = {
+  color: ColorControl,
+  from: StringControl,
+  to: StringControl,
+  // unique key, for sort
+  dataIndex: valueComp<string>(""),
+};
+const AreaPiecesTmpComp = new MultiCompBuilder(areaPiecesChildrenMap, (props) => {
+  return props;
+})
+  .setPropertyViewFn((children: any) => 
+    (<>
+      {children.color.propertyView({label: trans("lineChart.color")})}
+      {children.from.propertyView({label: trans("lineChart.from")})}
+      {children.to.propertyView({label: trans("lineChart.to")})}
+    </>)
+  )
+  .build();
+
 export type ChartSize = { w: number; h: number };
 
 export const getDataKeys = (data: Array<JSONObject>) => {
@@ -231,6 +253,7 @@ export const chartUiModeChildren = {
   yConfig: YAxisConfig,
   legendConfig: LegendConfig,
   chartConfig: ChartOptionComp,
+  areaPieces: list(AreaPiecesTmpComp),
   onUIEvent: eventHandlerControl(UIEventOptions),
 };
 

client/packages/lowcoder-comps/src/comps/lineChartComp/lineChartPropertyView.tsx

@@ -82,6 +82,42 @@ export function lineChartPropertyView(
           onHide={(s, hide) => s.children.hide.dispatchChangeValueAction(hide)}
           dataIndex={(s) => s.getView().dataIndex}
         />
+        <Option
+          items={children.areaPieces.getView()}
+          title={trans("lineChart.areaPieces")}
+          itemTitle={(s) => `[${s.getView().from}-${s.getView().to}] ${s.getView().color}`}
+          popoverTitle={(s) => trans("lineChart.areaPiece")}
+          content={(s, index) => (
+            <>
+              {s.getPropertyView({label: "Type"})}
+              {
+                <RedButton
+                  onClick={() => {
+                    children.areaPieces.dispatch(children.areaPieces.deleteAction(index));
+                  }}
+                >
+                  {trans("chart.delete")}
+                </RedButton>
+              }
+            </>
+          )}
+          onAdd={() => {
+            children.areaPieces.dispatch(
+              children.areaPieces.pushAction(
+                {}
+              )
+            );
+          }}
+          onMove={(fromIndex, toIndex) => {
+            const action = children.areaPieces.arrayMoveAction(fromIndex, toIndex);
+            children.areaPieces.dispatch(action);
+          }}
+          hide={(s) => true}
+          onHide={(s, hide) => console.log("onHide")}
+          dataIndex={(s) => {
+            return s.getView().dataIndex;
+          }}
+        />
       </Section>
       <Section name={sectionNames.interaction}>
         <div style={{display: 'flex', flexDirection: 'column', gap: '8px'}}>

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

@@ -203,7 +203,21 @@ export function getEchartsConfig(
       ...gridPos,
       containLabel: true,
     },
+    visualMap: {
+      type: 'piecewise',
+      show: false,
+      dimension: 0,
+      seriesIndex: 0,
+      pieces: props.areaPieces?.filter(p => p.getView().from && p.getView().to && p.getView().color)?.map(p => (
+        {
+          ...(p.getView().from?{min: parseInt(p.getView().from)}:{}),
+          ...(p.getView().to?{max: parseInt(p.getView().to)}:{}),
+          ...(p.getView().color?{color: p.getView().color}:{}),
+        }
+      ))
+    },
   };
+  console.log("config", config)
   if(props.chartConfig.race) {
     config = {
       ...config,
@@ -264,8 +278,6 @@ export function getEchartsConfig(
     }
   }
 
-  console.log("TransformedData", transformedData);
-
   config = {
     ...config,
     dataset: [
@@ -350,27 +362,6 @@ export function getEchartsConfig(
     }
   }
 
-  //Waterfall x-label initialization
-  if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
-    //default labels
-    config.xAxis.data = undefined;
-    // config.xAxis.data = ["Total"];
-    // for(let i=1; i<transformedData.length; i++)
-    //   config.xAxis.data.push(`Column${i}`);
-  }
-
-  //Polar x-label initialization
-  if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
-    //default labels
-    // config.radiusAxis.data = undefined;
-    // config.angleAxis.data = undefined;
-    let labelData = [];
-    for(let i=0; i<transformedData.length; i++)
-      labelData.push(`C${i+1}`);
-    if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
-    if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0)  config.angleAxis.data = labelData;
-  }
-  console.log("Config", config);
   // log.log("Echarts transformedData and config", transformedData, config);
   return config;
 }

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

@@ -325,6 +325,9 @@ export const en = {
     name: "Name",
     from: "From",
     to: "To",
+    color: "Color",
+    areaPieces: "Area Pieces",
+    areaPiece: "Area Piece",
   },
   barChart: {
     title: 'Title',