Added control fields and style fields to heatmap charts.

Author: Imiss-U1025

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

@@ -37,6 +37,7 @@ import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleCon
 import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig";
 import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig";
 import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 
 export const ChartTypeOptions = [
   {
@@ -256,10 +257,11 @@ export const chartUiModeChildren = {
 let chartJsonModeChildren: any = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption),
   echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")),
-  echartsLegendConfig: EchartsLegendConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
   echartsSortingConfig: EchartsSortingConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsFunnelAlignConfig: EchartsFunnelAlignConfig,
+  echartsLegendConfig: EchartsLegendConfig,
   echartsLegendOrientConfig: EchartsLegendOrientConfig,
   echartsLegendAlignConfig: EchartsLegendAlignConfig,
   echartsConfig: EchartsOptionComp,

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx

@@ -32,8 +32,9 @@ export function funnelChartPropertyView(
           ),
         })}
         {children.echartsTitleConfig.getPropertyView()}
-        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()}
+        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
         {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()}
         {children.echartsSortingConfig.getPropertyView()}
         {children.label.getView()&& children.echartsLabelConfig.getPropertyView()}

client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts

@@ -140,7 +140,7 @@ export function getEchartsConfig(
     let opt={
       "title": {
         "text": props.echartsTitle,
-        'top': "top",
+        "top": props.echartsTitleVerticalConfig.top,
         "left":props.echartsTitleConfig.top,
         "textStyle": {
           "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,

client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx

@@ -145,7 +145,7 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => {
     return getEchartsConfig(
       childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
       chartSize,
-      theme?.theme?.components?.candleStickChart || {},
+      themeConfig
     );
   }, [chartSize, ...Object.values(echartsConfigChildren)]);
 

client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx

@@ -16,7 +16,8 @@ import {
   uiChildren,
   clickEvent,
   styleControl,
-  EchartsStyle
+  EchartDefaultTextStyle,
+  EchartDefaultChartStyle
 } from "lowcoder-sdk";
 import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -25,12 +26,16 @@ import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
 import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
 import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
+import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig";
 import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig";
 import { SeriesListComp } from "../chartComp/seriesComp";
 import { EChartsOption } from "echarts";
 import { i18nObjs, trans } from "i18n/comps";
 import { HeatmapChartConfig } from "comps/chartComp/chartConfigs/heatmapChartConfig";
+import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig";
+import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig";
 
 export const ChartTypeOptions = [
   {
@@ -252,15 +257,34 @@ let chartJsonModeChildren: any = {
   echartsTitle: withDefault(StringControl, trans("heatmapChart.defaultTitle")),
   echartsLegendConfig: EchartsLegendConfig,
   echartsLabelConfig: EchartsLabelConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
+  echartsTitleConfig:EchartsTitleConfig,
+  echartsLegendOrientConfig: EchartsLegendOrientConfig,
+  echartsLegendAlignConfig: EchartsLegendAlignConfig,
   echartsConfig: EchartsOptionComp,
   // style: styleControl(EchartsStyle, 'style'),
+
+  left:withDefault(NumberControl,trans('heatmapChart.defaultLeft')),
+  right:withDefault(NumberControl,trans('heatmapChart.defaultRight')),
+  top:withDefault(NumberControl,trans('heatmapChart.defaultTop')),
+  bottom:withDefault(NumberControl,trans('heatmapChart.defaultBottom')),
+  min:withDefault(NumberControl,trans('heatmapChart.defaultMin')),
+  max:withDefault(NumberControl,trans('heatmapChart.defaultMax')),
+
   tooltip: withDefault(BoolControl, true),
-  legendVisibility: withDefault(BoolControl, true),
+  xAxisVisibility: withDefault(BoolControl, true),
+  yAxisVisibility: withDefault(BoolControl, true),
+  labelVisibility: withDefault(BoolControl, true),
 }
-if (EchartsStyle) {
+if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {
     ...chartJsonModeChildren,
-    style: styleControl(EchartsStyle, 'style'),
+    chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
+    titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
+    labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
+    xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'),
+    yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'),
+    visualMapStyle: styleControl(EchartDefaultTextStyle, 'visualMapStyle'),
   }
 }
 

client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx

@@ -31,14 +31,44 @@ export function heatmapChartPropertyView(
             </div>
           ),
         })}
-        {children.echartsTitle.propertyView({ label: trans("heatmapChart.title") })}
-        {children.tooltip.propertyView({label: trans("heatmapChart.tooltip")})}
+        {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
+        {children.echartsLegendAlignConfig.getPropertyView()}
+        {children.echartsLegendConfig.getPropertyView()}
+        {children.echartsLegendOrientConfig.getPropertyView()}
+        {children.echartsTitle.propertyView({ label: trans("heatmapChart.title"), tooltip: trans("echarts.titleTooltip") })}
+        {children.left.propertyView({ label: trans("heatmapChart.left"), tooltip: trans("echarts.leftTooltip") })}
+        {children.right.propertyView({ label: trans("heatmapChart.right"), tooltip: trans("echarts.rightTooltip") })}
+        {children.top.propertyView({ label: trans("heatmapChart.top"), tooltip: trans("echarts.topTooltip") })}
+        {children.bottom.propertyView({ label: trans("heatmapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })}
+        {children.min.propertyView({ label: trans("heatmapChart.min"), tooltip: trans("echarts.minTooltip") })}
+        {children.max.propertyView({ label: trans("heatmapChart.max"), tooltip: trans("echarts.maxTooltip") })}
+
+        {children.xAxisVisibility.propertyView({label: trans("heatmapChart.xAxisVisibility"), tooltip: trans("heatmapChart.xAxisVisibilityTooltip")})}
+        {children.yAxisVisibility.propertyView({label: trans("heatmapChart.yAxisVisibility"), tooltip: trans("heatmapChart.yAxisVisibilityTooltip")})}
+        {children.labelVisibility.propertyView({label: trans("heatmapChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
+        {children.tooltip.propertyView({label: trans("heatmapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-         {children.style?.getPropertyView()}
+      <Section name={sectionNames.chartStyle}>
+        {children.chartStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.titleStyle}>
+        {children.titleStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.labelStyle}>
+        {children.labelStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.xAxisStyle}>
+        {children.xAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.yAxisStyle}>
+        {children.yAxisStyle?.getPropertyView()}
+      </Section>
+      <Section name={sectionNames.visualMapStyle}>
+        {children.visualMapStyle?.getPropertyView()}
       </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
     </>