Added control fields and style fields on CandleStick charts.

lowcoder-org · FalkWolsky · Jan 11, 2025 · Jan 3, 2025 · Jan 3, 2025 · Jan 3, 2025
commit c75bbe7ba6b530f4c76d415335f3694b4047d4cc
diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx
@@ -23,7 +23,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"
 import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
 import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig";
 import { LegendConfig } from "../chartComp/chartConfigs/legendConfig";
-import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig";
+import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
 import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig";
 import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig";
 import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig";
@@ -252,7 +252,7 @@ export const chartUiModeChildren = {
 let chartJsonModeChildren: any = {
   echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption),
   echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")),
-  echartsLegendConfig: EchartsLegendConfig,
+  echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
   echartsLabelConfig: EchartsLabelConfig,
   echartsTitleConfig:EchartsTitleConfig,
   echartsConfig: EchartsOptionComp,
@@ -263,8 +263,8 @@ let chartJsonModeChildren: any = {
   dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')),
   dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')),
   tooltip: withDefault(BoolControl, true),
-  legendVisibility: withDefault(BoolControl, true),
   dataZoomVisibility: withDefault(BoolControl, true),
+  axisFlag: withDefault(BoolControl, true),
 }
 if (EchartDefaultChartStyle && EchartDefaultTextStyle) {
   chartJsonModeChildren = {

diff --git a/...t/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/...t/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx
@@ -32,24 +32,20 @@ export function candleStickChartPropertyView(
           ),
         })}
         {children.echartsTitleConfig.getPropertyView()}
+        {children.echartsTitleVerticalConfig.getPropertyView()}
         {children.left.propertyView({ label: trans("candleStickChart.left") })}
         {children.right.propertyView({ label: trans("candleStickChart.right") })}
         {children.top.propertyView({ label: trans("candleStickChart.top") })}
         {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })}
-        {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()}
         {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })}
         {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })}
         {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })}
-        {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})}
-        {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})}
+        {children.axisFlag.propertyView({label: trans("candleStickChart.axisFlag")})}
         {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
       </Section>
       <Section name={sectionNames.interaction}>
         {children.onEvent.propertyView()}
       </Section>
-      <Section name={sectionNames.style}>
-        {children.style?.getPropertyView()}
-      </Section>
       <Section name={sectionNames.layout}>{hiddenPropertyView(children)}
       </Section>
 
@@ -59,15 +55,12 @@ export function candleStickChartPropertyView(
       <Section name={sectionNames.titleStyle}>
         {children.titleStyle?.getPropertyView()}
       </Section>
-      <Section name={sectionNames.labelStyle}>
+      <Section name={sectionNames.xAxisStyle}>
         {children.labelStyle?.getPropertyView()}
       </Section>
-      {
-        children.legendVisibility.getView() ?
-          <Section name={sectionNames.legendStyle}>
-            {children.legendStyle?.getPropertyView()}
-          </Section> : <></>
-      }
+      <Section name={sectionNames.yAxisStyle}>
+        {children.legendStyle?.getPropertyView()}
+      </Section>
     </>
   );
 

diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts
@@ -14,6 +14,7 @@ import Big from "big.js";
 import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
 import { useContext } from "react";
 import parseBackground from "../../util/gradientBackgroundColor";
+import {styleWrapper} from "../../util/styleWrapper";
 
 export function transformData(
   originData: JSONObject[],
@@ -138,73 +139,91 @@ export function getEchartsConfig(
 
 
   if (props.mode === "json") {
-    let opt={
-      "title": {
-        "text": props.echartsTitle,
-        'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
-        "left":props.echartsTitleConfig.top,
-        "textStyle": {
-          "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily,
-          "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18',
-          "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight,
-          "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000",
-          "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle,
-          "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor,
-          "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0],
-          "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1],
-          "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2]
-        }
+    let opt= {
+      title: {
+        text: props.echartsTitle,
+        top: props.echartsTitleVerticalConfig.top,
+        left:props.echartsTitleConfig.top,
       },
-      "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
-      "color": props?.echartsOption.data?.map(data => data.color),
-      "tooltip": props?.tooltip&&{
-        "trigger": "axis",
-        "axisPointer": {
-          "type": "cross"
+      backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"),
+      color: props?.echartsOption.data?.map(data => data.color),
+      tooltip: props?.tooltip && {
+        trigger: "axis",
+        axisPointer: {
+          type: "cross"
         }
       },
-      "grid": {
-        "left": `${props?.left}%`,
-        "right": `${props?.right}%`,
-        "bottom": `${props?.bottom}%`,
-        "top": `${props?.top}%`,
+      grid: {
+        left: `${props?.left}%`,
+        right: `${props?.right}%`,
+        bottom: `${props?.bottom}%`,
+        top: `${props?.top}%`,
       },
-      "dataZoom": [
+      dataZoom: [
         {
-          "show": props?.dataZoomVisibility,
-          "type": 'slider',
-          "start": 0,
-          "end": 100,
-          "bottom": props?.dataZoomBottom,
-          'height': props?.dataZoomHeight
+          show: props?.dataZoomVisibility,
+          type: 'slider',
+          start: 0,
+          end: 100,
+          bottom: props?.dataZoomBottom,
+          height: props?.dataZoomHeight
         }
       ],
-      "xAxis": {
-        "type": "category",
-        "data": props?.echartsOption.xAxis.data
+      yAxis: {
+        type: "value",
+        scale: true,
+        splitArea: props?.axisFlag && {
+          show: true,
+          areaStyle: {
+            color: props?.echartsOption?.axisColor
+          }
+        },
+        axisLabel: {
+          ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13),
+        }
       },
-      "yAxis": {
-        "type": "value",
-        "scale": true
+      xAxis: props?.echartsOption && {
+        type: 'category',
+        data: props?.echartsOption.xAxis.data,
+        splitArea: !props?.axisFlag && {
+          show: true,
+          areaStyle: {
+            // Provide multiple colors to alternate through
+            color: props?.echartsOption?.axisColor
+          },
+        },
+        axisLabel: {
+          ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13),
+        },
+        boundaryGap: true,
+        // Turn off x-axis split lines if desired, so you only see colored areas
+        splitLine: {
+          show: false
+        },
+        // Show split areas, each day with a different background color
       },
-      "series": [
+      series:  props?.echartsOption && [
         {
-          "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
+          name: props?.echartsConfig.type,
+          type: props?.echartsConfig.type,
+          label: {
+            show: true,
+            position: props?.echartsLabelConfig.top
           },
-          "data": props?.echartsOption.data,
-        }
-      ]
+          data: props?.echartsOption.data,
+          itemStyle: {
+            ...props?.echartsOption.itemStyle,
+            borderColor: props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor,
+            borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth,
+            borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType,
+            borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius),
+            shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor,
+            shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0],
+            shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1],
+            shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2]
+          }
+        },
+      ],
     }
     return props.echartsOption ? opt : {};
 

diff --git a/...t/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx b/...t/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx
@@ -0,0 +1,45 @@
+import {
+  AlignBottom,
+  AlignTop,
+  dropdownControl,
+  MultiCompBuilder,
+} from "lowcoder-sdk";
+import { LegendComponentOption } from "echarts";
+import { trans } from "i18n/comps";
+
+const LegendPositionOptions = [
+  {
+    label: <AlignTop />,
+    value: "top",
+  },
+  {
+    label: <AlignBottom />,
+    value: "bottom",
+  }
+] as const;
+
+export const EchartsTitleVerticalConfig = (function () {
+  return new MultiCompBuilder(
+    {
+      position: dropdownControl(LegendPositionOptions, "top"),
+    },
+    (props): LegendComponentOption => {
+      const config: LegendComponentOption = {
+        top: "top",
+        type: "scroll",
+      };
+      config.top = props.position
+      return config;
+    }
+  )
+    .setPropertyViewFn((children) => (
+      <>
+        {children.position.propertyView({
+          label: trans("echarts.titlePositionVertical"),
+          radioButton: true,
+          tooltip: trans("echarts.changingLegend_x_Tooltip")
+        })}
+      </>
+    ))
+    .build();
+})();
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts
@@ -15,6 +15,7 @@ import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
 import opacityToHex from "../../util/opacityToHex";
 import parseBackground from "../../util/gradientBackgroundColor";
 import {ba} from "@fullcalendar/core/internal-common";
+import {styleWrapper} from "../../util/styleWrapper";
 
 export function transformData(
   originData: JSONObject[],
@@ -137,28 +138,7 @@ export function getEchartsConfig(
   theme?: any,
 ): EChartsOptionWithMap {
 
-  const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => {
 
-    return {
-      "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif',
-      "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize,
-      "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight,
-      "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor,
-      "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle,
-      "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor,
-      "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0],
-      "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1],
-      "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2],
-      "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit',
-      "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth,
-      "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
-      "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
-      "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
-      "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
-      "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
-    }
-
-  }
 
   if (props.mode === "json") {
 

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts
@@ -54,6 +54,7 @@ export const en = {
     tooltip: 'Tooltip',
     legendVisibility: 'Legend Visibility',
     dataZoomVisibility: 'Data Zoom Visibility',
+    axisFlag: 'Axis Flag',
     left: 'Left',
     defaultLeft:'10',
     right: 'Right',
@@ -185,6 +186,7 @@ export const en = {
     funnelAlign: "Funnel Align",
     sort: "Sort",
     changingTitle_x_Tooltip: "Change the Horizontal position of the Title.",
+    changingTitle_y_Tooltip: "Change the Vertical position of the Title.",
     changingLegend_x_Tooltip: "Change the Vertical position of the Legend.",
     changingLegend_y_Tooltip: "Change the Horizontal position of the Legend.",
     changingLegend_orient_Tooltip: "Change the Orientation of the Legend.",

diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx
@@ -307,15 +307,22 @@ export const enObj: I18nObjects = {
   },
   defaultCandleStickChartOption: {
     xAxis: {
-    data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"]
-  },
+      data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"],
+    },
+    axisColor: ['#f0f0f0', '#ffffff'],
     data:[
-        [100, 200, 50, 150],
-        [120, 220, 80, 180],
-        [80, 150, 60, 130],
-        [130, 230, 110, 190],
-        [90, 180, 70, 160]
-      ]
+      [22, 25, 18, 26],
+      [25, 23, 22, 27],
+      [23, 24, 21, 25],
+      [24, 26, 23, 27],
+      [23, 21, 20, 25]
+      ],
+    itemStyle: {
+      color: '#ec0000',       // Body color (rising)
+      color0: '#00da3c',      // Body color (falling)
+      borderColor: '#ec0000', // Border color (rising)
+      borderColor0: '#00da3c', // Border color (falling)
+    }
   },
   defaultRadarChartOption: {
     indicator: [

diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx
@@ -0,0 +1,21 @@
+export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => {
+
+  return {
+    "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif',
+    "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize,
+    "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight,
+    "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor,
+    "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle,
+    "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor,
+    "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0],
+    "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1],
+    "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2],
+    "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit',
+    "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth,
+    "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType,
+    "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius),
+    "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor,
+    "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24,
+    "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12,
+  }
+}
diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx
@@ -192,5 +192,7 @@ export const sectionNames = {
   legendStyle:trans("prop.legendStyle"),
   detailStyle:trans("prop.detailStyle"),
   axisLabelStyle:trans("prop.axisLabelStyle"),
-  axisLabelStyleOutline:trans("prop.axisLabelStyleOutline")
+  axisLabelStyleOutline:trans("prop.axisLabelStyleOutline"),
+  xAxisStyle:trans("prop.xAxisStyle"),
+  yAxisStyle:trans("prop.yAxisStyle"),
 };