heatmap

Author: Imiss-U1025

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

@@ -2,6 +2,7 @@ import {
   MultiCompBuilder,
   dropdownControl,
   BoolControl,
+  StringControl,
   NumberControl,
   ColorControl,
   withDefault,
@@ -52,6 +53,8 @@ export const ScatterChartConfig = (function () {
       visualMapColorMin: ColorControl,
       visualMapColorMax: ColorControl,
       polar: BoolControl,
+      heatmap: BoolControl,
+      heatmapMonth: withDefault(StringControl, "2021-09"),
     },
     (props): ScatterSeriesOption => {
       return {
@@ -88,6 +91,8 @@ export const ScatterChartConfig = (function () {
           visualMapColorMax: props.visualMapColorMax,
         },
         polar: props.polar,
+        heatmap: props.heatmap,
+        heatmapMonth: props.heatmapMonth,
       };
     }
   )
@@ -124,6 +129,12 @@ export const ScatterChartConfig = (function () {
         {children.visualMap.getView() && children.visualMapColorMax.propertyView({
           label: trans("scatterChart.visualMapColorMax"),
         })}
+        {children.visualMap.getView() && children.heatmap.propertyView({
+          label: trans("scatterChart.heatmap"),
+        })}
+        {children.visualMap.getView() && children.heatmapMonth.propertyView({
+          label: trans("scatterChart.heatmapMonth"),
+        })}
         {children.polar.propertyView({
           label: trans("scatterChart.polar"),
         })}

client/packages/lowcoder-comps/src/comps/scatterChartComp/scatterChartUtils.ts

@@ -122,6 +122,10 @@ export function getSeriesConfig(props: EchartsConfigProps) {
     if(props.chartConfig.polar) {
       config.coordinateSystem = 'polar';
     }
+    if(props.chartConfig.heatmap) {
+      config.coordinateSystem = 'calendar';
+      config.type = 'heatmap';
+    }
     if(s.effect) config.type = "effectScatter";
     if(s.symbolSize) config.symbolSize = s.symbolSize;
     if(s.dynamicSize) config.symbolSize = function(dataItem) {
@@ -262,6 +266,27 @@ export function getEchartsConfig(
     delete config.yAxis;
   }
 
+  if(props.chartConfig.heatmap) {
+    config.calendar = {
+      orient: 'vertical',
+      yearLabel: {
+        margin: 40
+      },
+      monthLabel: {
+        nameMap: 'cn',
+        margin: 20
+      },
+      dayLabel: {
+        firstDay: 1,
+        nameMap: 'cn'
+      },
+      cellSize: 40,
+      range: props.chartConfig.heatmapMonth,
+    }
+    delete config.xAxis;
+    delete config.yAxis;
+  }
+
   console.log("Echarts transformedData and config", transformedData, config);
   return config;
 }

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

@@ -379,6 +379,8 @@ export const en = {
     labelLineLength2: "Label Line Length2",
   },
   scatterChart: {
+    heatmap: "Heat Map",
+    heatmapMonth: "Heat Map Month",
     polar: "Polar Chart",
     visualMap: "Visual Map",
     visualMapMin: "Visual Map Min",