From 3eafcd50611b099ff463177509cba9fb61691988 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 20 Dec 2024 10:19:18 -0500 Subject: [PATCH 01/17] Fixed background Color and built type structure of gauge chart. --- .../candleStickChartUtils.ts | 48 +- .../gaugeChartComp/gaugeChartConstants.tsx | 36 ++ .../gaugeChartComp/gaugeChartPropertyView.tsx | 463 +++++++++++++++++- .../comps/gaugeChartComp/gaugeChartUtils.ts | 72 ++- .../src/i18n/comps/locales/en.ts | 12 +- 5 files changed, 615 insertions(+), 16 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index b4b5d6f71..5443730fd 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -135,29 +135,53 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + + if (props.mode === "json") { let opt={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" + "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] + } }, - "backgroundColor": parseBackground( props?.style?.background || theme?.style?.background || "#FFFFFF"), - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ + "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": "10%", - "right": "10%", - "bottom": "10%", + "left": `${props?.left}%`, + "right": `${props?.right}%`, + "bottom": `${props?.bottom}%`, + "top": `${props?.top}%`, }, + "dataZoom": [ + { + "show": props?.dataZoomVisibility, + "type": 'slider', + "start": 0, + "end": 100, + "bottom": props?.dataZoomBottom, + 'height': props?.dataZoomHeight + } + ], "xAxis": { "type": "category", - "data": props.echartsOption.xAxis.data + "data": props?.echartsOption.xAxis.data }, "yAxis": { "type": "value", @@ -165,8 +189,8 @@ export function getEchartsConfig( }, "series": [ { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, + "name": props?.echartsConfig.type, + "type": props?.echartsConfig.type, "left": "10%", "top": 60, "bottom": 60, @@ -176,9 +200,9 @@ export function getEchartsConfig( "gap": 2, "label": { "show": true, - "position": props.echartsLabelConfig.top + "position": props?.echartsLabelConfig.top }, - "data": props.echartsOption.data, + "data": props?.echartsOption.data, } ] } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 44e4f748b..3d3d73fdb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -232,6 +232,41 @@ const EchartsOptionMap = { gauge: GaugeChartConfig, }; +const ChartTypeOptions = [ + { + label: trans("chart.default"), + value: "default", + }, + { + label: trans("chart.stageGauge"), + value: "stageGauge", + }, + { + label: trans("chart.gradeGauge"), + value: "gradeGauge", + }, + { + label: trans("chart.temperatureGauge"), + value: "temperatureGauge", + }, + { + label: trans("chart.multiGauge"), + value: "multiGauge", + }, + { + label: trans("chart.ringGauge"), + value: "ringGauge", + }, + { + label: trans("chart.barometerGauge"), + value: "barometerGauge", + }, + { + label: trans("chart.clockGauge"), + value: "clockGauge", + }, +] as const; + const ChartOptionComp = withType(ChartOptionMap, "bar"); const EchartsOptionComp = withType(EchartsOptionMap, "gauge"); export type CharOptionCompType = keyof typeof ChartOptionMap; @@ -251,6 +286,7 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), + chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index cb25183bd..b980d9d13 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -31,6 +31,448 @@ export function gaugeChartPropertyView( ), })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} + +
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const stageGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const gradeGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const temperatureGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const multiGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const ringGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const barometerGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} + {children.top.propertyView({ label: trans("gaugeChart.top") })} + {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} + {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} + {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} + {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} + {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const clockGaugePropertyView = ( + <> +
+ {children.echartsOption.propertyView({ + label: trans("chart.echartsOptionLabel"), + styleName: "higher", + tooltip: ( +
+ + {trans("chart.echartsOptionTooltip")} + +
+ + {trans("chart.echartsOptionExamples")} + +
+ ), + })} + {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} @@ -78,7 +520,26 @@ export function gaugeChartPropertyView( const getChatConfigByMode = (mode: string) => { switch(mode) { case "json": - return jsonModePropertyView; + switch(children.chartType.getView()) { + case "default": + return jsonModePropertyView; + case "stageGauge": + return stageGaugePropertyView; + case "gradeGauge": + return gradeGaugePropertyView; + case "temperatureGauge": + return temperatureGaugePropertyView; + case "multiGauge": + return multiGaugePropertyView; + case "ringGauge": + return ringGaugePropertyView; + case "barometerGauge": + return barometerGaugePropertyView; + case "clockGauge": + return clockGaugePropertyView; + default: + return jsonModePropertyView; + } } } return getChatConfigByMode(children.mode.getView()) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index e2c5fa310..aac65188f 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -137,7 +137,7 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { - let opt={ + let basic={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', @@ -247,7 +247,75 @@ export function getEchartsConfig( } ] } - return props.echartsOption ? opt : {}; + + let stageGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "stageGaugeOpt", + } + } + + let gradeGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "gradeGaugeOpt", + } + } + + let temperatureGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "temperatureGaugeOpt", + } + } + + let multiGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "multiGaugeOpt", + } + } + + let ringGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "ringGaugeOpt", + } + } + + let barometerGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "barometerGaugeOpt", + } + } + + let clockGaugeOpt = { + ...basic, + "title": { + ...basic.title, + "text": "clockGaugeOpt", + } + } + + const typeMap = { + default: basic, + stageGauge: stageGaugeOpt, + gradeGauge: gradeGaugeOpt, + temperatureGauge: temperatureGaugeOpt, + multiGauge: multiGaugeOpt, + ringGauge: ringGaugeOpt, + barometerGauge: barometerGaugeOpt, + clockGauge: clockGaugeOpt, + }; + + return typeMap[props.chartType] || basic; } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 957ddcab8..f054575a1 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -137,7 +137,9 @@ export const en = { progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', progressBar: 'Progress Bar', - roundCap: "Round Cap" + roundCap: "Round Cap", + chartType: "Chart Type", + chartTypeTooltip: "Select the types of Charts." }, echarts: { defaultTitle: "Data Display", @@ -269,6 +271,14 @@ export const en = { centerPositionChange: "Center Position Change", centerPositionChangeDesc: "Triggers when the map center position changes", chartEventHandlers: "Chart Event Handlers", + stageGauge: "Stage Speed Gauge", + gradeGauge: "Grade Gauge", + temperatureGauge: "Temperature Gauge chart", + multiGauge: "Multi Title Gauge", + ringGauge: "Ring Gauge", + barometerGauge: "Gauge Barometer chart", + clockGauge: "Clock", + default: "Default" }, imageEditor: { defaultSrc: "", From bb1d2b52e401bc8342ceaadefa928a5182c93415 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 20 Dec 2024 14:40:04 -0500 Subject: [PATCH 02/17] Added Stage Speed Gauge, Grade Gauge, Temperature Gauge chart, Multi Title Gauge, Ring Gauge, Gauge Barometer chart to gauge chart(not editing). --- .../gaugeChartComp/gaugeChartConstants.tsx | 19 - .../comps/gaugeChartComp/gaugeChartUtils.ts | 589 +++++++++++++++++- 2 files changed, 557 insertions(+), 51 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 3d3d73fdb..14ea99190 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -34,25 +34,6 @@ import { i18nObjs, trans } from "i18n/comps"; import { GaugeChartConfig } from "../chartComp/chartConfigs/gaugeChartConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; -export const ChartTypeOptions = [ - { - label: trans("chart.bar"), - value: "bar", - }, - { - label: trans("chart.line"), - value: "line", - }, - { - label: trans("chart.scatter"), - value: "scatter", - }, - { - label: trans("chart.pie"), - value: "pie", - }, -] as const; - export const UIEventOptions = [ { label: trans("chart.select"), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index aac65188f..8461449ac 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -14,6 +14,7 @@ import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; import parseBackground from "../../util/gradientBackgroundColor"; +import {ba} from "@fullcalendar/core/internal-common"; export function transformData( originData: JSONObject[], @@ -137,7 +138,8 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { - let basic={ + + const basic={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', @@ -248,52 +250,575 @@ export function getEchartsConfig( ] } + const { progress, ...basicSeries } = basic.series[0]; + const { color, ...basicStyle } = basic; + let stageGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "stageGaugeOpt", + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + axisLine: { + lineStyle: { + width: 15, + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] + ] + } + }, + pointer: { + itemStyle: { + color: 'auto', + } + }, + axisTick: { + distance: -15, + length: 7, + lineStyle: { + color: '#fff', + width: 1.5 + } + }, + splitLine: { + distance: -15, + length: 15, + lineStyle: { + color: '#fff', + width: 3 + } + }, + axisLabel: { + color: 'inherit', + distance: 20, + fontSize: 13 + }, + detail: { + valueAnimation: true, + formatter: '{value} km/h', + color: 'inherit', + fontSize: 20 + }, + data: [ + { + value: 80 + } + ] + } + ] } - } let gradeGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "gradeGaugeOpt", - } + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + startAngle: 180, + endAngle: 0, + center: ['50%', '75%'], // Keeps the gauge lower on the canvas + radius: '110%', // Reduced from '90%' to make the gauge smaller + min: 0, + max: 1, + splitNumber: 8, + axisLine: { + lineStyle: { + width: 4, // slightly thinner line for smaller gauge + color: [ + [0.25, '#FF6E76'], + [0.5, '#FDDD60'], + [0.75, '#58D9F9'], + [1, '#7CFFB2'] + ] + } + }, + pointer: { + icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: '10%', // slightly shorter pointer + width: 14, // slightly narrower pointer + offsetCenter: [0, '-60%'], + itemStyle: { + color: 'auto' + } + }, + axisTick: { + length: 8, // shorter ticks + lineStyle: { + color: 'auto', + width: 2 + } + }, + splitLine: { + length: 15, // shorter split lines + lineStyle: { + color: 'auto', + width: 4 + } + }, + axisLabel: { + color: '#464646', + fontSize: 12, // smaller font size for labels + distance: -40, // adjust distance to keep labels readable + rotate: 'tangential', + formatter: function (value) { + if (value === 0.875) { + return 'Grade A'; + } else if (value === 0.625) { + return 'Grade B'; + } else if (value === 0.375) { + return 'Grade C'; + } else if (value === 0.125) { + return 'Grade D'; + } + return ''; + } + }, + title: { + offsetCenter: [0, '-10%'], + fontSize: 14 // smaller font for title + }, + detail: { + fontSize: 20, // smaller detail number font + offsetCenter: [0, '-35%'], + valueAnimation: true, + formatter: function (value) { + return Math.round(value * 100) + ''; + }, + color: 'inherit' + }, + data: [ + { + value: 0.3, + name: 'Grade Rating' + } + ] + } + ] } - let temperatureGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "temperatureGaugeOpt", - } + let multiGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + // Reduce the overall size of the gauge + radius: '85%', + center: ['50%', '55%'], // Adjust center if needed + + anchor: { + show: true, + showAbove: true, + size: 14, // Decrease anchor size + itemStyle: { + color: '#FAC858' + } + }, + pointer: { + width: 6, // Narrow the pointer + length: '70%', // Shorten the pointer length + offsetCenter: [0, '10%'], + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z' + }, + + progress: { + show: true, + overlap: true, + roundCap: true + }, + axisLine: { + roundCap: true + }, + + data: [ + { + value: 20, + name: 'Good', + title: { + fontSize: 12, + offsetCenter: ['-60%', '75%'] + }, + detail: { + fontSize: 12, + offsetCenter: ['-60%', '90%'] + } + }, + { + value: 40, + name: 'Better', + title: { + fontSize: 12, + offsetCenter: ['0%', '75%'] + }, + detail: { + fontSize: 12, + offsetCenter: ['0%', '90%'] + } + }, + { + value: 60, + name: 'Perfect', + title: { + fontSize: 12, + offsetCenter: ['60%', '75%'] + }, + detail: { + fontSize: 12, + offsetCenter: ['60%', '90%'] + } + } + ], + + title: { + fontSize: 12 + }, + detail: { + width: 30, + height: 12, + fontSize: 12, + color: '#fff', + backgroundColor: 'inherit', + borderRadius: 3, + formatter: '{value}%' + } + } + ] } - let multiGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "multiGaugeOpt", - } + let temperatureGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + center: ['50%', '70%'], + radius: '80%', // Shrink the gauge radius + startAngle: 200, + endAngle: -20, + min: 0, + max: 60, + splitNumber: 12, + itemStyle: { + color: '#FFAB91' + }, + progress: { + show: true, + width: 20 // Reduced from 30 + }, + pointer: { + show: false + }, + axisLine: { + lineStyle: { + width: 20 // Reduced from 30 + } + }, + axisTick: { + distance: -30, // Reduced from -45 + splitNumber: 5, + lineStyle: { + width: 2, + color: '#999' + } + }, + splitLine: { + distance: -36, // Reduced from -52 + length: 10, // Reduced from 14 + lineStyle: { + width: 2, // Reduced from 3 + color: '#999' + } + }, + axisLabel: { + distance: -14, // Reduced from -20 + color: '#999', + fontSize: 14 // Reduced from 20 + }, + anchor: { + show: false + }, + title: { + show: false + }, + detail: { + valueAnimation: true, + width: '60%', + lineHeight: 30, // Reduced from 40 + borderRadius: 8, + offsetCenter: [0, '-15%'], + fontSize: 40, // Reduced from 60 + fontWeight: 'bolder', + formatter: '{value} °C', + color: 'inherit' + }, + data: [ + { + value: 20 + } + ] + }, + { + type: 'gauge', + center: ['50%', '70%'], + radius: '80%', // Match the same radius + startAngle: 200, + endAngle: -20, + min: 0, + max: 60, + itemStyle: { + color: '#FD7347' + }, + progress: { + show: true, + width: 6 // Reduced from 8 + }, + pointer: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + show: false + }, + data: [ + { + value: 20 + } + ] + } + ] } let ringGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "ringGaugeOpt", - } + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + center: ['50%', '55%'], + radius: '80%', // Shrink the gauge + startAngle: 90, + endAngle: -270, + pointer: { + show: false + }, + progress: { + show: true, + overlap: false, + roundCap: true, + clip: false, + itemStyle: { + borderWidth: 1, + borderColor: '#464646' + } + }, + axisLine: { + lineStyle: { + width: 20 // Reduced from 40 + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + data: [ + { + value: 20, + name: 'Perfect', + title: { + fontSize: 12, // Smaller font + offsetCenter: ['0%', '-40%'] // Adjust if needed + }, + detail: { + valueAnimation: true, + fontSize: 12, // Smaller font + width: 40, // Slightly smaller + height: 12, // Slightly smaller + offsetCenter: ['0%', '-20%'] + } + }, + { + value: 40, + name: 'Good', + title: { + fontSize: 12, + offsetCenter: ['0%', '0%'] + }, + detail: { + valueAnimation: true, + fontSize: 12, + width: 40, + height: 12, + offsetCenter: ['0%', '20%'] + } + }, + { + value: 60, + name: 'Commonly', + title: { + fontSize: 12, + offsetCenter: ['0%', '40%'] + }, + detail: { + valueAnimation: true, + fontSize: 12, + width: 40, + height: 12, + offsetCenter: ['0%', '60%'] + } + } + ], + title: { + fontSize: 12 // Smaller title font size + }, + detail: { + fontSize: 12, + width: 40, + height: 12, + borderRadius: 20, + borderWidth: 1, + formatter: '{value}%' + } + } + ] } let barometerGaugeOpt = { ...basic, - "title": { - ...basic.title, - "text": "barometerGaugeOpt", - } + series: [ + { + type: 'gauge', + min: 0, + max: 100, + center: ['50%', '60%'], + splitNumber: 10, + radius: '70%', // Reduced from 80% to fit a smaller canvas + axisLine: { + lineStyle: { + color: [[1, '#f00']], + width: 2 // Reduced line width + } + }, + splitLine: { + distance: -12, // Reduced from -18 + length: 10, // Reduced from 18 + lineStyle: { + color: '#f00', + width: 2 // Thinner line + } + }, + axisTick: { + distance: -8, // Reduced from -12 + length: 6, // Reduced from 10 + lineStyle: { + color: '#f00', + width: 1 + } + }, + axisLabel: { + distance: -30, // Reduced from -50 to bring labels closer + color: '#f00', + fontSize: 14 // Reduced from 25 + }, + anchor: { + show: true, + size: 14, // Reduced from 20 + itemStyle: { + borderColor: '#000', + borderWidth: 1 // Reduced border width + } + }, + pointer: { + offsetCenter: [0, '10%'], + length: '80%', // Reduced pointer length (from 115%) for proportionality + icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + itemStyle: { + color: '#000' + } + }, + detail: { + valueAnimation: true, + precision: 2, // Increase precision or keep as is + fontSize: 16, // Reduced from default larger size + offsetCenter: [0, '40%'] // Adjust to fit within the smaller radius + }, + title: { + offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart + fontSize: 14 // Smaller font + }, + data: [ + { + value: 58.46, + name: 'PLP' + } + ] + }, + { + type: 'gauge', + min: 0, + max: 60, + center: ['50%', '60%'], + splitNumber: 6, + radius: '60%', // Match the radius + axisLine: { + lineStyle: { + color: [[1, '#000']], + width: 2 + } + }, + splitLine: { + distance: -2, // Adjust spacing + length: 10, // Reduced length + lineStyle: { + color: '#000', + width: 2 + } + }, + axisTick: { + distance: 0, + length: 6, // Reduced + lineStyle: { + color: '#000', + width: 1 + } + }, + axisLabel: { + distance: 6, // Reduced label distance + fontSize: 14, // Smaller font + color: '#000' + }, + pointer: { + show: false + }, + title: { + show: false + }, + anchor: { + show: true, + size: 10, // Smaller anchor + itemStyle: { + color: '#000' + } + } + } + ] } let clockGaugeOpt = { From 4c790a79940ab4ef3bea71ae62394d6515398d08 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 20 Dec 2024 15:05:28 -0500 Subject: [PATCH 03/17] Fixed Conditional statements. --- .../comps/candleStickChartComp/candleStickChartConstants.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 35852214d..c35cebfaa 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -257,7 +257,7 @@ let chartJsonModeChildren: any = { tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, style: styleControl(EchartsStyle, 'style'), From bbdcfe7cdd5469b821223d804f58e1f075841e59 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 20 Dec 2024 16:02:23 -0500 Subject: [PATCH 04/17] Added Stage clock to gauge chart(not editing). --- .../comps/gaugeChartComp/gaugeChartUtils.ts | 186 +++++++++++++++++- 1 file changed, 181 insertions(+), 5 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 8461449ac..99aef280b 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -822,11 +822,187 @@ export function getEchartsConfig( } let clockGaugeOpt = { - ...basic, - "title": { - ...basic.title, - "text": "clockGaugeOpt", - } + ...basicStyle, + series: [ + { + ...basicSeries, + name: 'hour', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 12, + center: ['50%', '50%'], + splitNumber: 12, + clockwise: true, + axisLine: { + lineStyle: { + width: 15, + color: [[1, 'rgba(0,0,0,0.7)']], + shadowColor: 'rgba(0, 0, 0, 0.5)', + shadowBlur: 15 + } + }, + splitLine: { + lineStyle: { + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 3, + shadowOffsetX: 1, + shadowOffsetY: 2 + } + }, + axisLabel: { + fontSize: 15, + distance: 20, + formatter: function (value) { + if (value === 0) { + return ''; + } + return value + ''; + } + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 6, + length: '55%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: [0, '30%'] + }, + data: [ + { + value: 0 + } + ] + }, + { + name: 'minute', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 4, + length: '70%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: true, + size: 10, + showAbove: false, + itemStyle: { + borderWidth: 15, + borderColor: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 20 + } + ] + }, + { + name: 'second', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 60, + animationEasingUpdate: 'bounceOut', + clockwise: true, + axisLine: { + show: false + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + pointer: { + icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + width: 2, + length: '85%', + offsetCenter: [0, '8%'], + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + anchor: { + show: true, + size: 15, + showAbove: true, + itemStyle: { + color: '#C0911F', + shadowColor: 'rgba(0, 0, 0, 0.3)', + shadowBlur: 8, + shadowOffsetX: 2, + shadowOffsetY: 4 + } + }, + detail: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: 40 + } + ] + } + ] } const typeMap = { From da4216ea2615958b9d0c8ff1c3246f6405950f36 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 20 Dec 2024 16:45:50 -0500 Subject: [PATCH 05/17] Added dataZoom, grid to candleStick chart. --- .../candleStickChartConstants.tsx | 18 ++++++++++-- .../candleStickChartPropertyView.tsx | 29 ++++++++++++++++++- 2 files changed, 43 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index c35cebfaa..27010ae0c 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -16,7 +16,8 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultChartStyle, + EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -24,6 +25,7 @@ import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxi import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; +import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; @@ -252,15 +254,25 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), + right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), + top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), + bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')), + dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), + dataZoomVisibility: withDefault(BoolControl, true), } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index b3c545d4a..e105256e7 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -31,8 +31,18 @@ export function candleStickChartPropertyView( ), })} + {children.echartsTitleConfig.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.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
{children.onEvent.propertyView()} @@ -40,7 +50,24 @@ export function candleStickChartPropertyView(
{children.style?.getPropertyView()}
-
{hiddenPropertyView(children)}
+
{hiddenPropertyView(children)} +
+ +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+ { + children.legendVisibility.getView() ? +
+ {children.legendStyle?.getPropertyView()} +
: <> + } ); From a06f57a66d66e6d7e905ad5feee08351a22a353d Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 23 Dec 2024 13:42:17 -0500 Subject: [PATCH 06/17] Added an editing ability on Stage Gauge chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 16 +++++- .../gaugeChartComp/gaugeChartPropertyView.tsx | 33 +++++++---- .../comps/gaugeChartComp/gaugeChartUtils.ts | 56 +++++++++++++------ .../src/i18n/comps/locales/en.ts | 27 ++++++++- .../src/i18n/comps/locales/enObj.tsx | 5 ++ .../src/i18n/comps/locales/types.tsx | 1 + 6 files changed, 108 insertions(+), 30 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 14ea99190..8aec12d13 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -17,7 +17,8 @@ import { clickEvent, styleControl, EchartDefaultChartStyle, - EchartDefaultTextStyle + EchartDefaultTextStyle, + ColorControl } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -267,6 +268,7 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), + stageGaugeOption: jsonControl(toObject, i18nObjs.stageGaugeChartOption), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, @@ -295,7 +297,17 @@ let chartJsonModeChildren: any = { pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), - + progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')), + stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')), + stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')), + stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')), + stageGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval1')), + stageGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval2')), + stageGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval3')), + axisTickWidth: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickWidth')), + axisTickLength: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickLength')), + axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')), + axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')), } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index b980d9d13..4981347bb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -49,6 +49,9 @@ export function gaugeChartPropertyView( {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} + {children.axisTickColor.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} @@ -79,7 +82,7 @@ export function gaugeChartPropertyView( const stageGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.stageGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -97,6 +100,13 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} + + {children.stageGaugeProgressBarInterval1.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.stageGaugeProgressBarColor1.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.stageGaugeProgressBarInterval2.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.stageGaugeProgressBarColor2.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.stageGaugeProgressBarInterval3.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.stageGaugeProgressBarColor3.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} {children.top.propertyView({ label: trans("gaugeChart.top") })} {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} @@ -111,11 +121,14 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBarWidthStage.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} + {children.axisTickColorStage.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} + {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/} + {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
{children.onEvent.propertyView()} @@ -126,15 +139,15 @@ export function gaugeChartPropertyView(
{children.titleStyle?.getPropertyView()}
-
- {children.labelStyle?.getPropertyView()} -
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/}
{children.legendStyle?.getPropertyView()}
-
- {children.axisLabelStyle?.getPropertyView()} -
+ {/*
*/} + {/* {children.axisLabelStyle?.getPropertyView()}*/} + {/*
*/}
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 99aef280b..c2b950b77 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -182,6 +182,20 @@ export function getEchartsConfig( "length": `${props?.pointerLength}%`, "width": props?.pointerWidth, }, + "axisTick": { + "length": props.axisTickLength, + "lineStyle": { + "color": props.axisTickColor, + "width": props.axisTickWidth + } + }, + "splitLine": { + "length": Number(props.axisTickLength) * 1.5, + "lineStyle": { + "color": props.axisTickColor, + "width": Number(props.axisTickWidth) * 1.5 + } + }, "itemStyle": { "opacity": props?.opacity, "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, @@ -261,49 +275,57 @@ export function getEchartsConfig( type: 'gauge', axisLine: { lineStyle: { - width: 15, + width: props.progressBarWidthStage, color: [ - [0.3, '#67e0e3'], - [0.7, '#37a2da'], - [1, '#fd666d'] + props.stageGaugeProgressBarColor1 && props.stageGaugeProgressBarInterval1 ? [props.stageGaugeProgressBarInterval1 || 0.3, props.stageGaugeProgressBarColor1 || "#67e0e3"] : [], + props.stageGaugeProgressBarColor2 && props.stageGaugeProgressBarInterval2 ? [props.stageGaugeProgressBarInterval2 || 0.7, props.stageGaugeProgressBarColor2 || "#37a2da"] : [], + props.stageGaugeProgressBarColor3 && props.stageGaugeProgressBarInterval3 ? [props.stageGaugeProgressBarInterval3 || 1, props.stageGaugeProgressBarColor3 || "#fd666d"] : [], ] } }, pointer: { + ...basicSeries.pointer, itemStyle: { color: 'auto', } }, axisTick: { - distance: -15, - length: 7, + distance: -Number(props.progressBarWidthStage), + length: props.axisTickLength, lineStyle: { - color: '#fff', - width: 1.5 + color: props.axisTickColorStage, + width: props.axisTickWidth } }, splitLine: { - distance: -15, - length: 15, + distance: -Number(props.progressBarWidthStage), + length: props.progressBarWidthStage, lineStyle: { - color: '#fff', - width: 3 + color: props.axisTickColorStage, + width: Number(props.axisTickWidth) * 1.5 } }, axisLabel: { color: 'inherit', - distance: 20, + distance: Number(props.progressBarWidthStage) + 10, fontSize: 13 }, detail: { valueAnimation: true, - formatter: '{value} km/h', - color: 'inherit', - fontSize: 20 + formatter: props?.stageGaugeOption?.data?.map(data => data.formatter)[0], + fontFamily: props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, + fontSize: props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 20, + fontWeight: props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, + color: props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || 'inherit', + fontStyle: props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, + textShadowColor: props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, + textShadowBlur: props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], + textShadowOffsetX: props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], + textShadowOffsetY: props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] }, data: [ { - value: 80 + value: props?.stageGaugeOption?.data?.map(data => data.value) } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index f054575a1..01af5e03f 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -136,10 +136,35 @@ export const en = { defaultPosition_Y: '60', progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', + defaultProgressBarWidthStage: '15', progressBar: 'Progress Bar', roundCap: "Round Cap", chartType: "Chart Type", - chartTypeTooltip: "Select the types of Charts." + chartTypeTooltip: "Select the types of Charts.", + stageGauge: { + defaultProgressBarColor1: "#67e0e3", + defaultProgressBarColor2: "#37a2da", + defaultProgressBarColor3: "#fd666d", + defaultProgressBarColor4: "", + defaultProgressBarInterval1: "0.3", + defaultProgressBarInterval2: "0.7", + defaultProgressBarInterval3: "1", + defaultProgressBarInterval4: "", + progressBarInterval: "Interval", + progressBarColor: "Progress Bar Color", + defaultToolTip: "Default ToolTip", + defaultAxisTickLength: "7", + defaultAxisTickWidth: "2", + defaultAxisTickColor: "#444444", + defaultAxisTickColorStage: "#ffffff", + axisTickLength: "axisTick Length", + axisTickWidth: "axisTick Width", + axisTickWidthStage: "axisTick Width", + axisTickColor: "axisTick Color", + axisTickLengthTooltip: "axisTickLengthTooltip", + axisTickWidthTooltip: "axisTickLengthTooltip", + axisTickColorTooltip: "axisTickLengthTooltip", + } }, echarts: { defaultTitle: "Data Display", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 2e1b9b874..15e8f0f5e 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -176,6 +176,11 @@ export const enObj: I18nObjects = { { value: 60, name: "Completed",color:'#fc8452' } ] }, + stageGaugeChartOption: { + data: [ + { value: 80, formatter: "Speed: {value} Km/h" } + ] + }, defaultSankeyChartOption: { data: [ {name: "Show"}, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index 4f227e3bc..6569ae1ef 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -5,6 +5,7 @@ export type I18nObjects = { defaultDataSource: JSONObject[]; defaultEchartsJsonOption: Record; defaultGaugeChartOption: Record; + stageGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From 67c0472e9abdd17b8b3d9c9131b4b8abd86eda36 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 24 Dec 2024 12:19:49 -0500 Subject: [PATCH 07/17] Added an editing ability on Grade Gauge chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 18 ++- .../gaugeChartComp/gaugeChartPropertyView.tsx | 39 ++++-- .../comps/gaugeChartComp/gaugeChartUtils.ts | 122 ++++++++++-------- .../src/i18n/comps/locales/en.ts | 20 ++- .../src/i18n/comps/locales/enObj.tsx | 9 +- .../src/i18n/comps/locales/types.tsx | 3 +- 6 files changed, 142 insertions(+), 69 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 8aec12d13..a8e4203c3 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -268,7 +268,8 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), - stageGaugeOption: jsonControl(toObject, i18nObjs.stageGaugeChartOption), + stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption), + gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, @@ -296,18 +297,33 @@ let chartJsonModeChildren: any = { splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), + pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')), + gradeGaugePointerLength:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerLength')), + gradeGaugePointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerWidth')), + gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')), + pointerIcon:withDefault(StringControl), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')), stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')), stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')), stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')), + stageGaugeProgressBarColor4: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor4')), stageGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval1')), stageGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval2')), stageGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval3')), + gradeGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval1')), + gradeGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval2')), + gradeGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval3')), + gradeGaugeProgressBarInterval4: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval4')), + gradeGaugeProgressBarString1: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString1')), + gradeGaugeProgressBarString2: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString2')), + gradeGaugeProgressBarString3: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString3')), + gradeGaugeProgressBarString4: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString4')), axisTickWidth: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickWidth')), axisTickLength: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickLength')), axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')), axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')), + axisTickColorGrade: withDefault(ColorControl), } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 4981347bb..53abc456e 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -45,10 +45,12 @@ export function gaugeChartPropertyView( {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} {children.axisTickColor.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} @@ -155,7 +157,7 @@ export function gaugeChartPropertyView( const gradeGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.gradeGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -177,6 +179,20 @@ export function gaugeChartPropertyView( {children.top.propertyView({ label: trans("gaugeChart.top") })} {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} {children.width.propertyView({ label: trans("gaugeChart.width") })} */} + + {children.gradeGaugeProgressBarInterval1.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {/*{children.gradeGaugeProgressBarString1.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} + {children.stageGaugeProgressBarColor1.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.gradeGaugeProgressBarInterval2.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {/*{children.gradeGaugeProgressBarString2.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} + {children.stageGaugeProgressBarColor2.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.gradeGaugeProgressBarInterval3.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {/*{children.gradeGaugeProgressBarString3.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} + {children.stageGaugeProgressBarColor3.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.gradeGaugeProgressBarInterval4.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {/*{children.gradeGaugeProgressBarString4.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} + {children.stageGaugeProgressBarColor4.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} + {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} @@ -185,13 +201,18 @@ export function gaugeChartPropertyView( {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.gradeGaugePointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.gradeGaugePointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.gradeGaugePointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} + {children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} + {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/} + {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
{children.onEvent.propertyView()} @@ -208,9 +229,9 @@ export function gaugeChartPropertyView(
{children.legendStyle?.getPropertyView()}
-
- {children.axisLabelStyle?.getPropertyView()} -
+ {/*
*/} + {/* {children.axisLabelStyle?.getPropertyView()}*/} + {/*
*/}
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index c2b950b77..08c088a07 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -137,6 +137,22 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { + const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000') => { + + 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] + } + + } + if (props.mode === "json") { const basic={ @@ -145,16 +161,19 @@ export function getEchartsConfig( '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] - }, + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + // "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] + // }, }, "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ @@ -181,6 +200,8 @@ export function getEchartsConfig( "pointer": { "length": `${props?.pointerLength}%`, "width": props?.pointerWidth, + "icon": props?.pointerIcon, + "offsetCenter": [0, `-${props.pointer_Y}%`], }, "axisTick": { "length": props.axisTickLength, @@ -338,82 +359,75 @@ export function getEchartsConfig( { ...basicSeries, type: 'gauge', - startAngle: 180, - endAngle: 0, - center: ['50%', '75%'], // Keeps the gauge lower on the canvas - radius: '110%', // Reduced from '90%' to make the gauge smaller - min: 0, - max: 1, - splitNumber: 8, axisLine: { lineStyle: { - width: 4, // slightly thinner line for smaller gauge + width: props.progressBarWidth, // slightly thinner line for smaller gauge color: [ - [0.25, '#FF6E76'], - [0.5, '#FDDD60'], - [0.75, '#58D9F9'], - [1, '#7CFFB2'] + [props.gradeGaugeProgressBarInterval1, props.stageGaugeProgressBarColor1], + [props.gradeGaugeProgressBarInterval2, props.stageGaugeProgressBarColor2], + [props.gradeGaugeProgressBarInterval3, props.stageGaugeProgressBarColor3], + [props.gradeGaugeProgressBarInterval4, props.stageGaugeProgressBarColor4] ] } }, pointer: { - icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', - length: '10%', // slightly shorter pointer - width: 14, // slightly narrower pointer - offsetCenter: [0, '-60%'], + icon: props.pointerIcon || 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + length: props.gradeGaugePointerLength, // slightly shorter pointer + width: props.gradeGaugePointerWidth, // slightly narrower pointer + offsetCenter: [0, `-${props.gradeGaugePointer_Y}%`], itemStyle: { color: 'auto' } }, axisTick: { - length: 8, // shorter ticks + length: props.axisTickLength, lineStyle: { - color: 'auto', - width: 2 + color: props.axisTickColorGrade || 'auto', + width: props.axisTickWidth } }, splitLine: { - length: 15, // shorter split lines + length: Number(props.axisTickLength) * 2, lineStyle: { - color: 'auto', - width: 4 + color: props.axisTickColorGrade || 'auto', + width: Number(props.axisTickWidth) * 1.5 } }, + // axisTick: { + // distance: -Number(props.progressBarWidthStage), + // length: props.axisTickLength, + // lineStyle: { + // color: props.axisTickColorStage, + // width: props.axisTickWidth + // } + // }, + // splitLine: { + // distance: -Number(props.progressBarWidthStage), + // length: props.progressBarWidthStage, + // lineStyle: { + // color: props.axisTickColorStage, + // width: Number(props.axisTickWidth) * 1.5 + // } + // }, axisLabel: { - color: '#464646', - fontSize: 12, // smaller font size for labels - distance: -40, // adjust distance to keep labels readable - rotate: 'tangential', - formatter: function (value) { - if (value === 0.875) { - return 'Grade A'; - } else if (value === 0.625) { - return 'Grade B'; - } else if (value === 0.375) { - return 'Grade C'; - } else if (value === 0.125) { - return 'Grade D'; - } - return ''; - } + show: false }, title: { offsetCenter: [0, '-10%'], - fontSize: 14 // smaller font for title + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { - fontSize: 20, // smaller detail number font offsetCenter: [0, '-35%'], valueAnimation: true, formatter: function (value) { - return Math.round(value * 100) + ''; + return value; }, - color: 'inherit' + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, 'inherit'), }, data: [ { - value: 0.3, - name: 'Grade Rating' + value: props?.gradeGaugeOption?.data?.map(data => data.value), + name: props?.gradeGaugeOption?.data?.map(data => data.name)[0], } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 01af5e03f..20e56f1a3 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -141,17 +141,33 @@ export const en = { roundCap: "Round Cap", chartType: "Chart Type", chartTypeTooltip: "Select the types of Charts.", + defaultPointer_Y: "0", + pointer_Y: "Pointer-Y", + pointer_Y_Tooltip: "select vertical of pointer", + pointerIcon: "Pointer Icon", + pointerIconTooltip: "Select Pointer Icon", + defaultGradeGaugePointerLength: "25", + defaultGradeGaugePointerWidth: "10", + defaultGradeGaugePointer_Y: "45", stageGauge: { defaultProgressBarColor1: "#67e0e3", defaultProgressBarColor2: "#37a2da", defaultProgressBarColor3: "#fd666d", - defaultProgressBarColor4: "", + defaultProgressBarColor4: "#FDDD60", defaultProgressBarInterval1: "0.3", defaultProgressBarInterval2: "0.7", defaultProgressBarInterval3: "1", - defaultProgressBarInterval4: "", + defaultGradeProgressBarInterval1: "0.25", + defaultGradeProgressBarInterval2: "0.5", + defaultGradeProgressBarInterval3: "0.75", + defaultGradeProgressBarInterval4: "1", + defaultGradeGaugeProgressBarString1: "Grade 1", + defaultGradeGaugeProgressBarString2: "Grade 2", + defaultGradeGaugeProgressBarString3: "Grade 3", + defaultGradeGaugeProgressBarString4: "Grade 4", progressBarInterval: "Interval", progressBarColor: "Progress Bar Color", + gradeProgressBarString: "Progress Bar String", defaultToolTip: "Default ToolTip", defaultAxisTickLength: "7", defaultAxisTickWidth: "2", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 15e8f0f5e..801c553ac 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -176,9 +176,14 @@ export const enObj: I18nObjects = { { value: 60, name: "Completed",color:'#fc8452' } ] }, - stageGaugeChartOption: { + defaultStageGaugeChartOption: { data: [ - { value: 80, formatter: "Speed: {value} Km/h" } + { value: 80, formatter: "{value} Km/h" } + ] + }, + defaultGradeGaugeChartOption: { + data: [ + { value: 80, name: "Grade Rating" } ] }, defaultSankeyChartOption: { diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index 6569ae1ef..bd3fc5703 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -5,7 +5,8 @@ export type I18nObjects = { defaultDataSource: JSONObject[]; defaultEchartsJsonOption: Record; defaultGaugeChartOption: Record; - stageGaugeChartOption: Record; + defaultStageGaugeChartOption: Record; + defaultGradeGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From 7209f93017e7283569e1b362b8dce88bb0e1dfb0 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 25 Dec 2024 14:51:38 -0500 Subject: [PATCH 08/17] Added an editing ability on Temperature Gauge chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 1 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 11 ++- .../comps/gaugeChartComp/gaugeChartUtils.ts | 90 +++++++------------ .../src/i18n/comps/locales/enObj.tsx | 5 ++ .../src/i18n/comps/locales/types.tsx | 1 + 5 files changed, 45 insertions(+), 63 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index a8e4203c3..4e27af9cb 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -270,6 +270,7 @@ let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption), gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption), + temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 53abc456e..693b025c4 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -239,7 +239,7 @@ export function gaugeChartPropertyView( const temperatureGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.temperatureGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -272,6 +272,9 @@ export function gaugeChartPropertyView( {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} + {children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} @@ -286,9 +289,9 @@ export function gaugeChartPropertyView(
{children.titleStyle?.getPropertyView()}
-
- {children.labelStyle?.getPropertyView()} -
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/}
{children.legendStyle?.getPropertyView()}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 08c088a07..5a3cb3bf7 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -393,22 +393,6 @@ export function getEchartsConfig( width: Number(props.axisTickWidth) * 1.5 } }, - // axisTick: { - // distance: -Number(props.progressBarWidthStage), - // length: props.axisTickLength, - // lineStyle: { - // color: props.axisTickColorStage, - // width: props.axisTickWidth - // } - // }, - // splitLine: { - // distance: -Number(props.progressBarWidthStage), - // length: props.progressBarWidthStage, - // lineStyle: { - // color: props.axisTickColorStage, - // width: Number(props.axisTickWidth) * 1.5 - // } - // }, axisLabel: { show: false }, @@ -528,83 +512,71 @@ export function getEchartsConfig( series: [ { ...basicSeries, - type: 'gauge', - center: ['50%', '70%'], - radius: '80%', // Shrink the gauge radius - startAngle: 200, - endAngle: -20, - min: 0, - max: 60, - splitNumber: 12, itemStyle: { - color: '#FFAB91' + color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0] }, progress: { show: true, - width: 20 // Reduced from 30 + width: props.progressBarWidth }, pointer: { show: false }, axisLine: { lineStyle: { - width: 20 // Reduced from 30 + width: props.progressBarWidth } }, axisTick: { - distance: -30, // Reduced from -45 - splitNumber: 5, + length: props.axisTickLength, + distance: -Number(props.progressBarWidth) - 10, lineStyle: { - width: 2, - color: '#999' + color: props.axisTickColorGrade || 'auto', + width: props.axisTickWidth } }, splitLine: { - distance: -36, // Reduced from -52 - length: 10, // Reduced from 14 + distance: -Number(props.progressBarWidth) - 10 - Number(props.axisTickLength), + length: Number(props.axisTickLength) * 2, lineStyle: { - width: 2, // Reduced from 3 - color: '#999' + color: props.axisTickColorGrade || 'auto', + width: Number(props.axisTickWidth) * 1.5 } }, axisLabel: { - distance: -14, // Reduced from -20 - color: '#999', - fontSize: 14 // Reduced from 20 - }, - anchor: { - show: false - }, - title: { - show: false + distance: -20, // Reduced from -20 + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"), }, detail: { valueAnimation: true, - width: '60%', lineHeight: 30, // Reduced from 40 - borderRadius: 8, offsetCenter: [0, '-15%'], - fontSize: 40, // Reduced from 60 - fontWeight: 'bolder', - formatter: '{value} °C', - color: 'inherit' + formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 40, 'inherit'), }, data: [ { - value: 20 + value: props?.temperatureGaugeOption?.data?.map(data => data.value) } ] }, { type: 'gauge', - center: ['50%', '70%'], - radius: '80%', // Match the same radius - startAngle: 200, - endAngle: -20, - min: 0, - max: 60, + // center: ['50%', '70%'], + // radius: '80%', // Match the same radius + // startAngle: 200, + // endAngle: -20, + // min: 0, + // max: 60, + center: [`${props?.position_x}%`, `${props?.position_y}%`], + startAngle: props?.startAngle, + endAngle: props?.endAngle, + splitNumber: props?.splitNumber, + min: props?.min, + max: props?.max, + radius: `${props.radius}%`, itemStyle: { - color: '#FD7347' + color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] }, progress: { show: true, @@ -630,7 +602,7 @@ export function getEchartsConfig( }, data: [ { - value: 20 + value: props?.temperatureGaugeOption?.data?.map(data => data.value) } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 801c553ac..01f2826b6 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -186,6 +186,11 @@ export const enObj: I18nObjects = { { value: 80, name: "Grade Rating" } ] }, + defaultTemperatureGaugeChartOption: { + data: [ + {value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" } + ] + }, defaultSankeyChartOption: { data: [ {name: "Show"}, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index bd3fc5703..4e8f9ba54 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -7,6 +7,7 @@ export type I18nObjects = { defaultGaugeChartOption: Record; defaultStageGaugeChartOption: Record; defaultGradeGaugeChartOption: Record; + defaultTemperatureGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From 8c2350688a75728c59d70c5f9574fd7d7abf65ac Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 26 Dec 2024 10:00:53 -0500 Subject: [PATCH 09/17] Fixed an editing ability on Temperature Gauge chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 3 ++ .../gaugeChartComp/gaugeChartPropertyView.tsx | 5 ++- .../comps/gaugeChartComp/gaugeChartUtils.ts | 38 +++++++------------ .../src/i18n/comps/locales/en.ts | 5 +++ 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 4e27af9cb..015a953a8 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -288,6 +288,7 @@ let chartJsonModeChildren: any = { bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')), radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')), + radiusTemperature:withDefault(NumberControl,trans('gaugeChart.defaultRadiusTemperature')), min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), @@ -305,6 +306,7 @@ let chartJsonModeChildren: any = { pointerIcon:withDefault(StringControl), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')), + progressBarWidthTemperature:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthTemperature')), stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')), stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')), stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')), @@ -325,6 +327,7 @@ let chartJsonModeChildren: any = { axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')), axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')), axisTickColorGrade: withDefault(ColorControl), + axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')), } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 693b025c4..d03a3265d 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -261,7 +261,7 @@ export function gaugeChartPropertyView( {children.top.propertyView({ label: trans("gaugeChart.top") })} {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} {children.width.propertyView({ label: trans("gaugeChart.width") })} */} - {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.radiusTemperature.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} @@ -271,7 +271,8 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })} {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} {children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 5a3cb3bf7..c5927ba34 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -424,18 +424,6 @@ export function getEchartsConfig( { ...basicSeries, type: 'gauge', - // Reduce the overall size of the gauge - radius: '85%', - center: ['50%', '55%'], // Adjust center if needed - - anchor: { - show: true, - showAbove: true, - size: 14, // Decrease anchor size - itemStyle: { - color: '#FAC858' - } - }, pointer: { width: 6, // Narrow the pointer length: '70%', // Shorten the pointer length @@ -458,11 +446,11 @@ export function getEchartsConfig( name: 'Good', title: { fontSize: 12, - offsetCenter: ['-60%', '75%'] + offsetCenter: ['-60%', '60%'] }, detail: { fontSize: 12, - offsetCenter: ['-60%', '90%'] + offsetCenter: ['-60%', '80%'] } }, { @@ -470,11 +458,11 @@ export function getEchartsConfig( name: 'Better', title: { fontSize: 12, - offsetCenter: ['0%', '75%'] + offsetCenter: ['0%', '60%'] }, detail: { fontSize: 12, - offsetCenter: ['0%', '90%'] + offsetCenter: ['0%', '80%'] } }, { @@ -482,11 +470,11 @@ export function getEchartsConfig( name: 'Perfect', title: { fontSize: 12, - offsetCenter: ['60%', '75%'] + offsetCenter: ['60%', '60%'] }, detail: { fontSize: 12, - offsetCenter: ['60%', '90%'] + offsetCenter: ['60%', '80%'] } } ], @@ -512,31 +500,32 @@ export function getEchartsConfig( series: [ { ...basicSeries, + radius: `${props.radiusTemperature}%`, itemStyle: { color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0] }, progress: { show: true, - width: props.progressBarWidth + width: props.progressBarWidthTemperature }, pointer: { show: false }, axisLine: { lineStyle: { - width: props.progressBarWidth + width: props.progressBarWidthTemperature } }, axisTick: { length: props.axisTickLength, - distance: -Number(props.progressBarWidth) - 10, + distance: -Number(props.progressBarWidthTemperature) - 10, lineStyle: { color: props.axisTickColorGrade || 'auto', width: props.axisTickWidth } }, splitLine: { - distance: -Number(props.progressBarWidth) - 10 - Number(props.axisTickLength), + distance: -Number(props.progressBarWidthTemperature) - 10 - Number(props.axisTickLength), length: Number(props.axisTickLength) * 2, lineStyle: { color: props.axisTickColorGrade || 'auto', @@ -544,12 +533,11 @@ export function getEchartsConfig( } }, axisLabel: { - distance: -20, // Reduced from -20 + distance: -Number(props.axisLabelDistance), ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"), }, detail: { valueAnimation: true, - lineHeight: 30, // Reduced from 40 offsetCenter: [0, '-15%'], formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 40, 'inherit'), @@ -574,7 +562,7 @@ export function getEchartsConfig( splitNumber: props?.splitNumber, min: props?.min, max: props?.max, - radius: `${props.radius}%`, + radius: `${props.radiusTemperature}%`, itemStyle: { color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] }, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 20e56f1a3..5bd4cae73 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -125,6 +125,7 @@ export const en = { splitNumber: 'Split Number', radius: 'Radius', defaultRadius: '80', + defaultRadiusTemperature: '70', defaultPointerLength: '50', pointerLength: 'Pointer Length', pointerWidth: 'Pointer Width', @@ -137,6 +138,7 @@ export const en = { progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', defaultProgressBarWidthStage: '15', + defaultProgressBarWidthTemperature: '35', progressBar: 'Progress Bar', roundCap: "Round Cap", chartType: "Chart Type", @@ -149,6 +151,9 @@ export const en = { defaultGradeGaugePointerLength: "25", defaultGradeGaugePointerWidth: "10", defaultGradeGaugePointer_Y: "45", + defaultAxisLabelDistance: "10", + axisLabelDistance: "Axis Label Distance", + axisLabelDistanceTooltip: "Axis Label Distance", stageGauge: { defaultProgressBarColor1: "#67e0e3", defaultProgressBarColor2: "#37a2da", From 5d7020c4709a432f6afdb44dc944f78a7384d85e Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 26 Dec 2024 13:39:59 -0500 Subject: [PATCH 10/17] Fixed an editing ability on Multi Title and Ring chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 3 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 7 +- .../comps/gaugeChartComp/gaugeChartUtils.ts | 136 ++++++------------ .../src/i18n/comps/locales/enObj.tsx | 24 ++++ .../src/i18n/comps/locales/types.tsx | 2 + 5 files changed, 75 insertions(+), 97 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 015a953a8..e4b681c3d 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -271,6 +271,8 @@ let chartJsonModeChildren: any = { stageGaugeOption: jsonControl(toObject, i18nObjs.defaultStageGaugeChartOption), gradeGaugeOption: jsonControl(toObject, i18nObjs.defaultGradeGaugeChartOption), temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption), + multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption), + ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, @@ -329,6 +331,7 @@ let chartJsonModeChildren: any = { axisTickColorGrade: withDefault(ColorControl), axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')), } + if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index d03a3265d..7742289e6 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -271,6 +271,7 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })} {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} @@ -306,7 +307,7 @@ export function gaugeChartPropertyView( const multiGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.multiTitleGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -338,6 +339,8 @@ export function gaugeChartPropertyView( {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} @@ -369,7 +372,7 @@ export function gaugeChartPropertyView( const ringGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.ringGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index c5927ba34..749c81b3c 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -425,12 +425,10 @@ export function getEchartsConfig( ...basicSeries, type: 'gauge', pointer: { - width: 6, // Narrow the pointer - length: '70%', // Shorten the pointer length - offsetCenter: [0, '10%'], - icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z' + ...basicSeries.pointer, + icon: props.pointerIcon || 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + offsetCenter: [0, '8%'] }, - progress: { show: true, overlap: true, @@ -440,56 +438,34 @@ export function getEchartsConfig( roundCap: true }, - data: [ - { - value: 20, - name: 'Good', - title: { - fontSize: 12, - offsetCenter: ['-60%', '60%'] - }, - detail: { - fontSize: 12, - offsetCenter: ['-60%', '80%'] - } + data: props.multiTitleGaugeOption.data[0].value.map(item => ({ + value: item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition }, - { - value: 40, - name: 'Better', - title: { - fontSize: 12, - offsetCenter: ['0%', '60%'] - }, - detail: { - fontSize: 12, - offsetCenter: ['0%', '80%'] - } + detail: { + offsetCenter: item.valuePosition }, - { - value: 60, - name: 'Perfect', - title: { - fontSize: 12, - offsetCenter: ['60%', '60%'] - }, - detail: { - fontSize: 12, - offsetCenter: ['60%', '80%'] + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color } } - ], + })), title: { - fontSize: 12 + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { width: 30, height: 12, - fontSize: 12, - color: '#fff', + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff'), backgroundColor: 'inherit', - borderRadius: 3, - formatter: '{value}%' + formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } ] @@ -602,11 +578,9 @@ export function getEchartsConfig( series: [ { ...basicSeries, - type: 'gauge', - center: ['50%', '55%'], - radius: '80%', // Shrink the gauge startAngle: 90, - endAngle: -270, + endAngle: 450, + type: 'gauge', pointer: { show: false }, @@ -617,7 +591,7 @@ export function getEchartsConfig( clip: false, itemStyle: { borderWidth: 1, - borderColor: '#464646' + borderColor: 'inherit' } }, axisLine: { @@ -634,63 +608,35 @@ export function getEchartsConfig( axisLabel: { show: false }, - data: [ - { - value: 20, - name: 'Perfect', - title: { - fontSize: 12, // Smaller font - offsetCenter: ['0%', '-40%'] // Adjust if needed - }, - detail: { - valueAnimation: true, - fontSize: 12, // Smaller font - width: 40, // Slightly smaller - height: 12, // Slightly smaller - offsetCenter: ['0%', '-20%'] - } + data: props.ringGaugeOption.data[0].value.map(item => ({ + value: item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition }, - { - value: 40, - name: 'Good', - title: { - fontSize: 12, - offsetCenter: ['0%', '0%'] - }, - detail: { - valueAnimation: true, - fontSize: 12, - width: 40, - height: 12, - offsetCenter: ['0%', '20%'] - } + detail: { + offsetCenter: item.valuePosition }, - { - value: 60, - name: 'Commonly', - title: { - fontSize: 12, - offsetCenter: ['0%', '40%'] - }, - detail: { - valueAnimation: true, - fontSize: 12, - width: 40, - height: 12, - offsetCenter: ['0%', '60%'] + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color } } - ], + })), title: { - fontSize: 12 // Smaller title font size + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { - fontSize: 12, width: 40, height: 12, borderRadius: 20, borderWidth: 1, - formatter: '{value}%' + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#000000'), + // backgroundColor: 'inherit', + formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } ] diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 01f2826b6..ae8bbd488 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -191,6 +191,30 @@ export const enObj: I18nObjects = { {value: 20, color: "#fc8452", borderColor: "#cd7c1d", formatter: "{value} °C" } ] }, + defaultMultiTitleGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: [ + {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['-60%', '60%'], valuePosition: ['-60%', '80%']}, + {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '60%'], valuePosition: ['0%', '80%']}, + {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['60%', '60%'], valuePosition: ['60%', '80%']}, + ] + } + ] + }, + defaultRingGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: [ + {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']}, + {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']}, + {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']}, + ] + } + ] + }, defaultSankeyChartOption: { data: [ {name: "Show"}, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index 4e8f9ba54..c76571c16 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -8,6 +8,8 @@ export type I18nObjects = { defaultStageGaugeChartOption: Record; defaultGradeGaugeChartOption: Record; defaultTemperatureGaugeChartOption: Record; + defaultMultiTitleGaugeChartOption: Record; + defaultRingGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From ab040d889dde72d9fa3cb3257627549a481ec328 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 27 Dec 2024 13:36:11 -0500 Subject: [PATCH 11/17] Converted repetitive control fields to JSON option, optimize and clear code --- .../gaugeChartComp/gaugeChartConstants.tsx | 41 ++---- .../gaugeChartComp/gaugeChartPropertyView.tsx | 103 +++++--------- .../comps/gaugeChartComp/gaugeChartUtils.ts | 133 +++++------------- .../src/i18n/comps/locales/en.ts | 58 +++----- .../src/i18n/comps/locales/enObj.tsx | 36 ++++- .../src/i18n/comps/locales/types.tsx | 1 + 6 files changed, 143 insertions(+), 229 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index e4b681c3d..6ac7b3554 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -290,7 +290,7 @@ let chartJsonModeChildren: any = { bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')), radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')), - radiusTemperature:withDefault(NumberControl,trans('gaugeChart.defaultRadiusTemperature')), + temperatureRadius:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureRadius')), min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), @@ -302,34 +302,23 @@ let chartJsonModeChildren: any = { pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')), - gradeGaugePointerLength:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerLength')), - gradeGaugePointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerWidth')), - gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')), pointerIcon:withDefault(StringControl), + gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), - progressBarWidthStage:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthStage')), - progressBarWidthTemperature:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidthTemperature')), - stageGaugeProgressBarColor1: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor1')), - stageGaugeProgressBarColor2: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor2')), - stageGaugeProgressBarColor3: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor3')), - stageGaugeProgressBarColor4: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultProgressBarColor4')), - stageGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval1')), - stageGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval2')), - stageGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultProgressBarInterval3')), - gradeGaugeProgressBarInterval1: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval1')), - gradeGaugeProgressBarInterval2: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval2')), - gradeGaugeProgressBarInterval3: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval3')), - gradeGaugeProgressBarInterval4: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultGradeProgressBarInterval4')), - gradeGaugeProgressBarString1: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString1')), - gradeGaugeProgressBarString2: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString2')), - gradeGaugeProgressBarString3: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString3')), - gradeGaugeProgressBarString4: withDefault(StringControl, trans('gaugeChart.stageGauge.defaultGradeGaugeProgressBarString4')), - axisTickWidth: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickWidth')), - axisTickLength: withDefault(NumberControl, trans('gaugeChart.stageGauge.defaultAxisTickLength')), - axisTickColor: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColor')), - axisTickColorStage: withDefault(ColorControl, trans('gaugeChart.stageGauge.defaultAxisTickColorStage')), - axisTickColorGrade: withDefault(ColorControl), + axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')), + axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')), axisLabelDistance: withDefault(NumberControl, trans('gaugeChart.defaultAxisLabelDistance')), + axisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultAxisTickColor')), + + gradeGaugePointerLength:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerLength')), + gradeGaugePointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointerWidth')), + gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')), + stageProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultStageProgressBarWidth')), + temperatureProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureProgressBarWidth')), + temperatureAxisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureAxisLabelDistance')), + stageAxisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultStageAxisTickColor')), + gradeAxisTickColor: withDefault(ColorControl), + } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 7742289e6..60ebd505c 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -34,10 +34,6 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} @@ -51,10 +47,10 @@ export function gaugeChartPropertyView( {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} - {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} - {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} - {children.axisTickColor.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })} + {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} @@ -102,17 +98,6 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - - {children.stageGaugeProgressBarInterval1.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.stageGaugeProgressBarColor1.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.stageGaugeProgressBarInterval2.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.stageGaugeProgressBarColor2.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.stageGaugeProgressBarInterval3.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.stageGaugeProgressBarColor3.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} @@ -120,14 +105,16 @@ export function gaugeChartPropertyView( {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBarWidthStage.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} - {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} - {children.axisTickColorStage.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} + {children.stageProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })} + {children.stageAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/} {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/} @@ -147,9 +134,9 @@ export function gaugeChartPropertyView(
{children.legendStyle?.getPropertyView()}
- {/*
*/} - {/* {children.axisLabelStyle?.getPropertyView()}*/} - {/*
*/} +
+ {children.axisLabelStyle?.getPropertyView()} +
{hiddenPropertyView(children)}
); @@ -175,24 +162,6 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} - - {children.gradeGaugeProgressBarInterval1.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {/*{children.gradeGaugeProgressBarString1.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} - {children.stageGaugeProgressBarColor1.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.gradeGaugeProgressBarInterval2.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {/*{children.gradeGaugeProgressBarString2.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} - {children.stageGaugeProgressBarColor2.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.gradeGaugeProgressBarInterval3.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {/*{children.gradeGaugeProgressBarString3.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} - {children.stageGaugeProgressBarColor3.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.gradeGaugeProgressBarInterval4.propertyView({label: trans("gaugeChart.stageGauge.progressBarInterval"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {/*{children.gradeGaugeProgressBarString4.propertyView({label: trans("gaugeChart.stageGauge.gradeProgressBarString"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })}*/} - {children.stageGaugeProgressBarColor4.propertyView({label: trans("gaugeChart.stageGauge.progressBarColor"), tooltip: trans("gaugeChart.stageGauge.defaultToolTip") })} - {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} @@ -200,16 +169,16 @@ export function gaugeChartPropertyView( {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.gradeGaugePointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.gradeGaugePointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.gradeGaugePointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} - {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} - {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} - {children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.gradePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} + {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {/*{children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })}*/} + {children.gradeAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/} {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/} @@ -257,30 +226,26 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} - {children.radiusTemperature.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.temperatureRadius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} + {/*{children.gradeGaugePointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })}*/} + {/*{children.gradeGaugePointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })}*/} + {/*{children.gradeGaugePointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })}*/} + {/*{children.gradePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })}*/} + {children.temperatureProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} - {children.progressBar.getView() && children.progressBarWidthTemperature.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("gaugeChart.axisLabelDistanceTooltip") })} - {children.axisTickLength.propertyView({ label: trans("gaugeChart.stageGauge.axisTickLength"), tooltip: trans("gaugeChart.stageGauge.axisTickLengthTooltip") })} - {children.axisTickWidth.propertyView({ label: trans("gaugeChart.stageGauge.axisTickWidth"), tooltip: trans("gaugeChart.stageGauge.axisTickWidthTooltip") })} - {children.axisTickColorGrade.propertyView({ label: trans("gaugeChart.stageGauge.axisTickColor"), tooltip: trans("gaugeChart.stageGauge.axisTickColorTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {children.temperatureAxisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })} + {children.gradeAxisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} + {/*{children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })}*/} + {/*{children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}*/}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 749c81b3c..d4ff45946 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -163,17 +163,6 @@ export function getEchartsConfig( "textStyle": { ...styleWrapper(props?.titleStyle, theme?.titleStyle) } - // "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] - // }, }, "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ @@ -201,7 +190,7 @@ export function getEchartsConfig( "length": `${props?.pointerLength}%`, "width": props?.pointerWidth, "icon": props?.pointerIcon, - "offsetCenter": [0, `-${props.pointer_Y}%`], + "offsetCenter": [0, `${-Number(props.pointer_Y)}%`] }, "axisTick": { "length": props.axisTickLength, @@ -240,27 +229,11 @@ export function getEchartsConfig( } }, "axisLabel": { - "distance": Number(props?.progressBarWidth) + 10, - "fontFamily": props?.axisLabelStyle?.chartFontFamily || theme?.axisLabelStyle?.fontFamily, - "fontSize": props?.axisLabelStyle?.chartTextSize || theme?.axisLabelStyle?.fontSize || 12, - "fontWeight": props?.axisLabelStyle?.chartTextWeight || theme?.axisLabelStyle?.fontWeight, - "color": props?.axisLabelStyle?.chartTextColor || theme?.axisLabelStyle?.fontColor || "#000000", - "fontStyle": props?.axisLabelStyle?.chartFontStyle || theme?.axisLabelStyle?.fontStyle, - "textShadowColor": props?.axisLabelStyle?.chartShadowColor || theme?.axisLabelStyle?.shadowColor, - "textShadowBlur": props?.axisLabelStyle?.chartBoxShadow?.split('px')[0] || theme?.axisLabelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.axisLabelStyle?.chartBoxShadow?.split('px')[1] || theme?.axisLabelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.axisLabelStyle?.chartBoxShadow?.split('px')[2] || theme?.axisLabelStyle?.boxShadow?.split('px')[2] + "distance": Number(props?.progressBarWidth) + Number(props.axisLabelDistance), + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 12, "#000000"), }, 'detail': { - "fontFamily": props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, - "fontSize": props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 16, - "fontWeight": props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - "color": props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || "#000000", - "fontStyle": props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - "textShadowColor": props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, - "textShadowBlur": props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, "#000000"), }, "label": { "show": props.label, @@ -270,15 +243,7 @@ export function getEchartsConfig( "value": item.value, "name": item.name, title: { - "fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily, - "fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize, - "fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight, - "color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000", - "fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle, - "textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor, - "textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 18, "#000000"), } })) } @@ -293,15 +258,10 @@ export function getEchartsConfig( series: [ { ...basicSeries, - type: 'gauge', axisLine: { lineStyle: { - width: props.progressBarWidthStage, - color: [ - props.stageGaugeProgressBarColor1 && props.stageGaugeProgressBarInterval1 ? [props.stageGaugeProgressBarInterval1 || 0.3, props.stageGaugeProgressBarColor1 || "#67e0e3"] : [], - props.stageGaugeProgressBarColor2 && props.stageGaugeProgressBarInterval2 ? [props.stageGaugeProgressBarInterval2 || 0.7, props.stageGaugeProgressBarColor2 || "#37a2da"] : [], - props.stageGaugeProgressBarColor3 && props.stageGaugeProgressBarInterval3 ? [props.stageGaugeProgressBarInterval3 || 1, props.stageGaugeProgressBarColor3 || "#fd666d"] : [], - ] + width: props.stageProgressBarWidth, + color:props?.stageGaugeOption?.data?.map(data => data.color)[0] } }, pointer: { @@ -311,38 +271,29 @@ export function getEchartsConfig( } }, axisTick: { - distance: -Number(props.progressBarWidthStage), + distance: -Number(props.stageProgressBarWidth), length: props.axisTickLength, lineStyle: { - color: props.axisTickColorStage, + color: props.stageAxisTickColor, width: props.axisTickWidth } }, splitLine: { - distance: -Number(props.progressBarWidthStage), - length: props.progressBarWidthStage, + distance: -Number(props.stageProgressBarWidth), + length: props.stageProgressBarWidth, lineStyle: { - color: props.axisTickColorStage, + color: props.stageAxisTickColor, width: Number(props.axisTickWidth) * 1.5 } }, axisLabel: { - color: 'inherit', - distance: Number(props.progressBarWidthStage) + 10, - fontSize: 13 + distance: Number(props?.stageProgressBarWidth) + Number(props.axisLabelDistance), + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, "inherit"), }, detail: { valueAnimation: true, formatter: props?.stageGaugeOption?.data?.map(data => data.formatter)[0], - fontFamily: props?.legendStyle?.chartFontFamily || theme?.legendStyle?.fontFamily, - fontSize: props?.legendStyle?.chartTextSize || theme?.legendStyle?.fontSize || 20, - fontWeight: props?.legendStyle?.chartTextWeight || theme?.legendStyle?.fontWeight, - color: props?.legendStyle?.chartTextColor || theme?.legendStyle?.fontColor || 'inherit', - fontStyle: props?.legendStyle?.chartFontStyle || theme?.legendStyle?.fontStyle, - textShadowColor: props?.legendStyle?.chartShadowColor || theme?.legendStyle?.shadowColor, - textShadowBlur: props?.legendStyle?.chartBoxShadow?.split('px')[0] || theme?.legendStyle?.boxShadow?.split('px')[0], - textShadowOffsetX: props?.legendStyle?.chartBoxShadow?.split('px')[1] || theme?.legendStyle?.boxShadow?.split('px')[1], - textShadowOffsetY: props?.legendStyle?.chartBoxShadow?.split('px')[2] || theme?.legendStyle?.boxShadow?.split('px')[2] + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, "inherit"), }, data: [ { @@ -361,17 +312,15 @@ export function getEchartsConfig( type: 'gauge', axisLine: { lineStyle: { - width: props.progressBarWidth, // slightly thinner line for smaller gauge - color: [ - [props.gradeGaugeProgressBarInterval1, props.stageGaugeProgressBarColor1], - [props.gradeGaugeProgressBarInterval2, props.stageGaugeProgressBarColor2], - [props.gradeGaugeProgressBarInterval3, props.stageGaugeProgressBarColor3], - [props.gradeGaugeProgressBarInterval4, props.stageGaugeProgressBarColor4] - ] + width: props.progressBarWidth, + color:props?.gradeGaugeOption?.data?.map(data => data.color)[0] } }, + progress: { + width: props?.stageProgressBarWidth, + }, pointer: { - icon: props.pointerIcon || 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', + icon: props.gradePointerIcon || 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', length: props.gradeGaugePointerLength, // slightly shorter pointer width: props.gradeGaugePointerWidth, // slightly narrower pointer offsetCenter: [0, `-${props.gradeGaugePointer_Y}%`], @@ -382,14 +331,14 @@ export function getEchartsConfig( axisTick: { length: props.axisTickLength, lineStyle: { - color: props.axisTickColorGrade || 'auto', + color: props.gradeAxisTickColor || 'auto', width: props.axisTickWidth } }, splitLine: { length: Number(props.axisTickLength) * 2, lineStyle: { - color: props.axisTickColorGrade || 'auto', + color: props.gradeAxisTickColor || 'auto', width: Number(props.axisTickWidth) * 1.5 } }, @@ -397,11 +346,11 @@ export function getEchartsConfig( show: false }, title: { - offsetCenter: [0, '-10%'], + offsetCenter: [0, '0%'], ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { - offsetCenter: [0, '-35%'], + offsetCenter: [0, '25%'], valueAnimation: true, formatter: function (value) { return value; @@ -476,47 +425,47 @@ export function getEchartsConfig( series: [ { ...basicSeries, - radius: `${props.radiusTemperature}%`, + radius: `${props.temperatureRadius}%`, itemStyle: { color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0] }, progress: { show: true, - width: props.progressBarWidthTemperature + width: props.temperatureProgressBarWidth }, pointer: { show: false }, axisLine: { lineStyle: { - width: props.progressBarWidthTemperature + width: props.temperatureProgressBarWidth } }, axisTick: { - length: props.axisTickLength, - distance: -Number(props.progressBarWidthTemperature) - 10, + distance: -Number(props.temperatureProgressBarWidth) - 15, + length: -Number(props.axisTickLength), lineStyle: { - color: props.axisTickColorGrade || 'auto', + color: props.gradeAxisTickColor || '#999', width: props.axisTickWidth } }, splitLine: { - distance: -Number(props.progressBarWidthTemperature) - 10 - Number(props.axisTickLength), - length: Number(props.axisTickLength) * 2, + distance: -Number(props.temperatureProgressBarWidth) -15, + length: -Number(props.axisTickLength) * 2, lineStyle: { - color: props.axisTickColorGrade || 'auto', + color: props.gradeAxisTickColor || '#999', width: Number(props.axisTickWidth) * 1.5 } }, axisLabel: { - distance: -Number(props.axisLabelDistance), + distance: Number(props?.temperatureProgressBarWidth) - Number(props.temperatureAxisLabelDistance) + Number(props.axisTickLength) * 2, ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"), }, detail: { valueAnimation: true, offsetCenter: [0, '-15%'], formatter: props?.temperatureGaugeOption?.data?.map(data => data.formatter)[0], - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 40, 'inherit'), + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 30, 'inherit'), }, data: [ { @@ -526,25 +475,19 @@ export function getEchartsConfig( }, { type: 'gauge', - // center: ['50%', '70%'], - // radius: '80%', // Match the same radius - // startAngle: 200, - // endAngle: -20, - // min: 0, - // max: 60, center: [`${props?.position_x}%`, `${props?.position_y}%`], startAngle: props?.startAngle, endAngle: props?.endAngle, splitNumber: props?.splitNumber, min: props?.min, max: props?.max, - radius: `${props.radiusTemperature}%`, + radius: `${props.temperatureRadius}%`, itemStyle: { color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] }, progress: { show: true, - width: 6 // Reduced from 8 + width: 6 }, pointer: { show: false diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 5bd4cae73..b5e0799de 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -125,7 +125,7 @@ export const en = { splitNumber: 'Split Number', radius: 'Radius', defaultRadius: '80', - defaultRadiusTemperature: '70', + defaultTemperatureRadius: '60', defaultPointerLength: '50', pointerLength: 'Pointer Length', pointerWidth: 'Pointer Width', @@ -137,13 +137,14 @@ export const en = { defaultPosition_Y: '60', progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', - defaultProgressBarWidthStage: '15', - defaultProgressBarWidthTemperature: '35', + defaultStageProgressBarWidth: '15', + defaultTemperatureProgressBarWidth: '35', progressBar: 'Progress Bar', roundCap: "Round Cap", chartType: "Chart Type", chartTypeTooltip: "Select the types of Charts.", defaultPointer_Y: "0", + gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", pointer_Y: "Pointer-Y", pointer_Y_Tooltip: "select vertical of pointer", pointerIcon: "Pointer Icon", @@ -152,40 +153,20 @@ export const en = { defaultGradeGaugePointerWidth: "10", defaultGradeGaugePointer_Y: "45", defaultAxisLabelDistance: "10", + defaultTemperatureAxisLabelDistance: "40", axisLabelDistance: "Axis Label Distance", - axisLabelDistanceTooltip: "Axis Label Distance", - stageGauge: { - defaultProgressBarColor1: "#67e0e3", - defaultProgressBarColor2: "#37a2da", - defaultProgressBarColor3: "#fd666d", - defaultProgressBarColor4: "#FDDD60", - defaultProgressBarInterval1: "0.3", - defaultProgressBarInterval2: "0.7", - defaultProgressBarInterval3: "1", - defaultGradeProgressBarInterval1: "0.25", - defaultGradeProgressBarInterval2: "0.5", - defaultGradeProgressBarInterval3: "0.75", - defaultGradeProgressBarInterval4: "1", - defaultGradeGaugeProgressBarString1: "Grade 1", - defaultGradeGaugeProgressBarString2: "Grade 2", - defaultGradeGaugeProgressBarString3: "Grade 3", - defaultGradeGaugeProgressBarString4: "Grade 4", - progressBarInterval: "Interval", - progressBarColor: "Progress Bar Color", - gradeProgressBarString: "Progress Bar String", - defaultToolTip: "Default ToolTip", - defaultAxisTickLength: "7", - defaultAxisTickWidth: "2", - defaultAxisTickColor: "#444444", - defaultAxisTickColorStage: "#ffffff", - axisTickLength: "axisTick Length", - axisTickWidth: "axisTick Width", - axisTickWidthStage: "axisTick Width", - axisTickColor: "axisTick Color", - axisTickLengthTooltip: "axisTickLengthTooltip", - axisTickWidthTooltip: "axisTickLengthTooltip", - axisTickColorTooltip: "axisTickLengthTooltip", - } + progressBarColor: "Progress Bar Color", + gradeProgressBarString: "Progress Bar String", + defaultToolTip: "Default ToolTip", + defaultAxisTickLength: "7", + defaultAxisTickWidth: "2", + defaultAxisTickColor: "#444444", + defaultStageAxisTickColor: "#ffffff", + axisTickLength: "axisTick Length", + axisTickWidth: "axisTick Width", + axisTickWidthStage: "axisTick Width", + axisTickColor: "AxisTick Color", + }, echarts: { defaultTitle: "Data Display", @@ -230,6 +211,11 @@ export const en = { legendVisibilityTooltip: "Show or hide the Legend of the Chart.", progressBarVisibilityTooltip: "Show or hide the Progress Bar of the Chart.", roundCapVisibilityTooltip: "Show or hide the Round Cap of the Chart.", + axisTickLengthTooltip: "Select the Length of Axis Tick", + axisTickWidthTooltip: "Select the Width of Axis Tick", + axisTickColorTooltip: "Select the Color of Axis Tick", + axisLabelDistanceTooltip: "Select the Distance between the Axis labels and the Split line", + }, chart: { delete: "Delete", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index ae8bbd488..00c935ebc 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -173,17 +173,35 @@ export const enObj: I18nObjects = { }, defaultGaugeChartOption: { data: [ - { value: 60, name: "Completed",color:'#fc8452' } + { value: 60, name: "Completed",color:'#fc8452', formatter: "{value} %" } ] }, defaultStageGaugeChartOption: { data: [ - { value: 80, formatter: "{value} Km/h" } + { + value: 80, + formatter: "{value} Km/h", + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] + ] + } ] }, defaultGradeGaugeChartOption: { data: [ - { value: 80, name: "Grade Rating" } + { + value: 80, + name: "Grade Rating", + formatter: "{value} %", + color: [ + [0.25, '#FF6E76'], + [0.5, '#FDDD60'], + [0.75, '#58D9F9'], + [1, '#7CFFB2'] + ] + } ] }, defaultTemperatureGaugeChartOption: { @@ -215,6 +233,18 @@ export const enObj: I18nObjects = { } ] }, + defaultBarometerGaugeChartOption: { + data: [ + { + formatter: "{value}%", + value: [ + {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']}, + {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']}, + {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']}, + ] + } + ] + }, defaultSankeyChartOption: { data: [ {name: "Show"}, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index c76571c16..80b9bc19f 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -10,6 +10,7 @@ export type I18nObjects = { defaultTemperatureGaugeChartOption: Record; defaultMultiTitleGaugeChartOption: Record; defaultRingGaugeChartOption: Record; + defaultBarometerGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From c87b7b3b2f1cade54360d096c6137fa832914fb8 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 27 Dec 2024 19:40:07 -0500 Subject: [PATCH 12/17] Fixed an editing ability on Clock chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 2 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 38 ++---- .../comps/gaugeChartComp/gaugeChartUtils.ts | 125 ++++++++---------- .../src/i18n/comps/locales/enObj.tsx | 35 ++++- .../src/i18n/comps/locales/types.tsx | 1 + 5 files changed, 104 insertions(+), 97 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 6ac7b3554..497d6a4ec 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -273,6 +273,8 @@ let chartJsonModeChildren: any = { temperatureGaugeOption: jsonControl(toObject, i18nObjs.defaultTemperatureGaugeChartOption), multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption), ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption), + clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption), + chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 60ebd505c..f4b2bf431 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -463,7 +463,7 @@ export function gaugeChartPropertyView( const clockGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.clockGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -481,25 +481,13 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} - {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} - {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} - {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} - {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} - {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} - {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} - {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} + {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} + {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {children.axisLabelDistance.propertyView({ label: trans("gaugeChart.axisLabelDistance"), tooltip: trans("echarts.axisLabelDistanceTooltip") })} + {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })}
{children.onEvent.propertyView()} @@ -510,12 +498,12 @@ export function gaugeChartPropertyView(
{children.titleStyle?.getPropertyView()}
-
- {children.labelStyle?.getPropertyView()} -
-
- {children.legendStyle?.getPropertyView()} -
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/} + {/*
*/} + {/* {children.legendStyle?.getPropertyView()}*/} + {/*
*/}
{children.axisLabelStyle?.getPropertyView()}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index d4ff45946..a80b0fd01 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -622,14 +622,6 @@ export function getEchartsConfig( color: '#f00', fontSize: 14 // Reduced from 25 }, - anchor: { - show: true, - size: 14, // Reduced from 20 - itemStyle: { - borderColor: '#000', - borderWidth: 1 // Reduced border width - } - }, pointer: { offsetCenter: [0, '10%'], length: '80%', // Reduced pointer length (from 115%) for proportionality @@ -695,16 +687,10 @@ export function getEchartsConfig( title: { show: false }, - anchor: { - show: true, - size: 10, // Smaller anchor - itemStyle: { - color: '#000' - } - } } ] } + console.log(props?.clockGaugeOption?.data?.map(data => data.hour)[0]) let clockGaugeOpt = { ...basicStyle, @@ -722,23 +708,39 @@ export function getEchartsConfig( clockwise: true, axisLine: { lineStyle: { - width: 15, - color: [[1, 'rgba(0,0,0,0.7)']], - shadowColor: 'rgba(0, 0, 0, 0.5)', - shadowBlur: 15 + width: props.progressBarWidth, + color: [[1, props?.clockGaugeOption?.data?.map(data => data.outlineColor)[0]]], + 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] + } + }, + axisTick: { + length: props.axisTickLength, + lineStyle: { + width: props.axisTickWidth, + color: props.axisTickColor, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, splitLine: { + length: Number(props.axisTickLength) * 2, lineStyle: { - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 3, - shadowOffsetX: 1, - shadowOffsetY: 2 + width: Number(props.axisTickWidth) * 1.5, + color: props.axisTickColor, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, axisLabel: { - fontSize: 15, - distance: 20, + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 16, "#000000"), + distance: Number(props?.progressBarWidth) + Number(props.axisLabelDistance), formatter: function (value) { if (value === 0) { return ''; @@ -748,15 +750,15 @@ export function getEchartsConfig( }, pointer: { icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', - width: 6, - length: '55%', + width: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width, + length: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 + color: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, detail: { @@ -767,7 +769,7 @@ export function getEchartsConfig( }, data: [ { - value: 0 + value: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value } ] }, @@ -793,28 +795,15 @@ export function getEchartsConfig( }, pointer: { icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', - width: 4, - length: '70%', + width: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width, + length: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 - } - }, - anchor: { - show: true, - size: 10, - showAbove: false, - itemStyle: { - borderWidth: 15, - borderColor: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 + color: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, detail: { @@ -825,7 +814,7 @@ export function getEchartsConfig( }, data: [ { - value: 20 + value: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value } ] }, @@ -852,27 +841,27 @@ export function getEchartsConfig( }, pointer: { icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', - width: 2, - length: '85%', + width: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width, + length: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length, offsetCenter: [0, '8%'], itemStyle: { - color: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 + color: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, anchor: { show: true, - size: 15, + size: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size, showAbove: true, itemStyle: { - color: '#C0911F', - shadowColor: 'rgba(0, 0, 0, 0.3)', - shadowBlur: 8, - shadowOffsetX: 2, - shadowOffsetY: 4 + color: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.color, + shadowColor: props?.chartStyle?.chartShadowColor + "55" || theme?.chartStyle?.shadowColor + "55", + 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] } }, detail: { @@ -883,7 +872,7 @@ export function getEchartsConfig( }, data: [ { - value: 40 + value: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value } ] } diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 00c935ebc..ed07c9d87 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -236,15 +236,42 @@ export const enObj: I18nObjects = { defaultBarometerGaugeChartOption: { data: [ { - formatter: "{value}%", value: [ - {color: "#19b1e6", title: "Perfect", value: 20, titlePosition: ['0%', '-40%'], valuePosition: ['0%', '-20%']}, - {color: "#fac858", title: "Good", value: 40, titlePosition: ['0%', '0%'], valuePosition: ['0%', '20%']}, - {color: "#09f64d", title: "Commonly", value: 60, titlePosition: ['0%', '40%'], valuePosition: ['0%', '60%']}, + {color: "#19b1e6", }, ] } ] }, + defaultClockGaugeChartOption: { + data: [ + { + outlineColor: "#aa2a2a", + anchor:{ + color: "#cfae09", + size: 10, + }, + hour: { + color: "#cfae09", + width: 4, + length: 50, + value: 4 + }, + minute: { + color: "#cfae09", + width: 2.5, + length: 65, + value: 30 + }, + second: { + color: "#cfae09", + width: 1, + length: 90, + value: 45, + + } + }, + ] + }, defaultSankeyChartOption: { data: [ {name: "Show"}, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx index 80b9bc19f..674e7fc8a 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/types.tsx @@ -11,6 +11,7 @@ export type I18nObjects = { defaultMultiTitleGaugeChartOption: Record; defaultRingGaugeChartOption: Record; defaultBarometerGaugeChartOption: Record; + defaultClockGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; From 186aa15a6ae636b3ebcee9c83a8922e98fe86f13 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 28 Dec 2024 11:04:58 -0500 Subject: [PATCH 13/17] Fixed Clock Pointer Icons on Clock Chart. --- .../src/comps/gaugeChartComp/gaugeChartConstants.tsx | 1 + .../src/comps/gaugeChartComp/gaugeChartPropertyView.tsx | 2 +- .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 6 +++--- client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts | 1 + 4 files changed, 6 insertions(+), 4 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 497d6a4ec..21a9ddf94 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -306,6 +306,7 @@ let chartJsonModeChildren: any = { pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')), pointerIcon:withDefault(StringControl), gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')), + clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')), axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index f4b2bf431..f5b23c223 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -482,7 +482,7 @@ export function gaugeChartPropertyView( {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} - {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} + {children.clockPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index a80b0fd01..87e2693ca 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -749,7 +749,7 @@ export function getEchartsConfig( } }, pointer: { - icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + icon: props?.clockPointerIcon, width: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.width, length: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.length, offsetCenter: [0, '8%'], @@ -794,7 +794,7 @@ export function getEchartsConfig( show: false }, pointer: { - icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + icon: props?.clockPointerIcon, width: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.width, length: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.length, offsetCenter: [0, '8%'], @@ -840,7 +840,7 @@ export function getEchartsConfig( show: false }, pointer: { - icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', + icon: props?.clockPointerIcon, width: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.width, length: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.length, offsetCenter: [0, '8%'], diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index b5e0799de..e862e23de 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -145,6 +145,7 @@ export const en = { chartTypeTooltip: "Select the types of Charts.", defaultPointer_Y: "0", gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", + clockDefaultPointerIcon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z", pointer_Y: "Pointer-Y", pointer_Y_Tooltip: "select vertical of pointer", pointerIcon: "Pointer Icon", From d7e5a2df0ea9d812bd3d76323f4c1743b5aa6668 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 28 Dec 2024 13:54:27 -0500 Subject: [PATCH 14/17] Fixed an editing ability on Barometer chart. --- .../gaugeChartComp/gaugeChartConstants.tsx | 3 + .../gaugeChartComp/gaugeChartPropertyView.tsx | 19 ++-- .../comps/gaugeChartComp/gaugeChartUtils.ts | 86 ++++++++++--------- .../src/i18n/comps/locales/en.ts | 1 + .../src/i18n/comps/locales/enObj.tsx | 24 +++++- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 3 +- 7 files changed, 78 insertions(+), 59 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 21a9ddf94..4beed852f 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -274,6 +274,7 @@ let chartJsonModeChildren: any = { multiTitleGaugeOption: jsonControl(toObject, i18nObjs.defaultMultiTitleGaugeChartOption), ringGaugeOption: jsonControl(toObject, i18nObjs.defaultRingGaugeChartOption), clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption), + barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption), chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), @@ -307,6 +308,7 @@ let chartJsonModeChildren: any = { pointerIcon:withDefault(StringControl), gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')), clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')), + barometerPointerIcon:withDefault(StringControl, trans('gaugeChart.defaultBarometerPointerIcon')), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')), axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')), @@ -332,6 +334,7 @@ if (EchartDefaultChartStyle && EchartDefaultTextStyle) { labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'), + axisLabelStyleOutline: styleControl(EchartDefaultTextStyle, 'axisLabelStyleOutline'), } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index f5b23c223..08657edbd 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -400,7 +400,7 @@ export function gaugeChartPropertyView( const barometerGaugePropertyView = ( <>
- {children.echartsOption.propertyView({ + {children.barometerGaugeOption.propertyView({ label: trans("chart.echartsOptionLabel"), styleName: "higher", tooltip: ( @@ -418,25 +418,15 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} - {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} - {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} - {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.barometerPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} - {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
{children.onEvent.propertyView()} @@ -456,6 +446,9 @@ export function gaugeChartPropertyView(
{children.axisLabelStyle?.getPropertyView()}
+
+ {children.axisLabelStyleOutline?.getPropertyView()} +
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 87e2693ca..db58acb8e 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -577,8 +577,8 @@ export function getEchartsConfig( height: 12, borderRadius: 20, borderWidth: 1, - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#000000'), - // backgroundColor: 'inherit', + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit'), + borderColor: 'inherit', formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } @@ -589,97 +589,96 @@ export function getEchartsConfig( ...basic, series: [ { + ...basicSeries, type: 'gauge', - min: 0, - max: 100, - center: ['50%', '60%'], - splitNumber: 10, - radius: '70%', // Reduced from 80% to fit a smaller canvas + min: props?.barometerGaugeOption?.data[0]?.outline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.outline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.outline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.outline?.radius, axisLine: { lineStyle: { - color: [[1, '#f00']], - width: 2 // Reduced line width + color: [[1, props?.barometerGaugeOption?.data[0]?.outline?.color]], + width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth } }, splitLine: { distance: -12, // Reduced from -18 - length: 10, // Reduced from 18 + length: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, lineStyle: { - color: '#f00', - width: 2 // Thinner line + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5 } }, axisTick: { distance: -8, // Reduced from -12 - length: 6, // Reduced from 10 + length: props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength, lineStyle: { - color: '#f00', - width: 1 + color: props?.barometerGaugeOption?.data[0]?.outline?.color, + width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth } }, axisLabel: { distance: -30, // Reduced from -50 to bring labels closer - color: '#f00', - fontSize: 14 // Reduced from 25 + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 14, '#f00') }, pointer: { - offsetCenter: [0, '10%'], - length: '80%', // Reduced pointer length (from 115%) for proportionality - icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + ...basicSeries.pointer, + icon: props?.barometerPointerIcon, itemStyle: { - color: '#000' + color: props?.barometerGaugeOption?.data[0]?.inline?.color } }, detail: { valueAnimation: true, precision: 2, // Increase precision or keep as is - fontSize: 16, // Reduced from default larger size + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), offsetCenter: [0, '40%'] // Adjust to fit within the smaller radius }, title: { offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart - fontSize: 14 // Smaller font + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 14) }, data: [ { - value: 58.46, - name: 'PLP' + value: props?.barometerGaugeOption?.data[0]?.value, + name: props?.barometerGaugeOption?.data[0]?.name, } ] }, { + ...basicSeries, type: 'gauge', - min: 0, - max: 60, - center: ['50%', '60%'], - splitNumber: 6, - radius: '60%', // Match the radius + min: props?.barometerGaugeOption?.data[0]?.inline?.period[0], + max: props?.barometerGaugeOption?.data[0]?.inline?.period[1], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber, + radius: props?.barometerGaugeOption?.data[0]?.inline?.radius, axisLine: { lineStyle: { - color: [[1, '#000']], - width: 2 + color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], + width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth } }, splitLine: { distance: -2, // Adjust spacing - length: 10, // Reduced length + length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2, lineStyle: { - color: '#000', - width: 2 + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5 } }, axisTick: { distance: 0, - length: 6, // Reduced + length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength, lineStyle: { - color: '#000', - width: 1 + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth } }, axisLabel: { - distance: 6, // Reduced label distance - fontSize: 14, // Smaller font - color: '#000' + distance: 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 14, '#000'), }, pointer: { show: false @@ -687,13 +686,16 @@ export function getEchartsConfig( title: { show: false }, + detail: { + show: false + } } ] } - console.log(props?.clockGaugeOption?.data?.map(data => data.hour)[0]) let clockGaugeOpt = { ...basicStyle, + tooltip: false, series: [ { ...basicSeries, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index e862e23de..3595d8cfb 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -146,6 +146,7 @@ export const en = { defaultPointer_Y: "0", gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", clockDefaultPointerIcon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z", + defaultBarometerPointerIcon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', pointer_Y: "Pointer-Y", pointer_Y_Tooltip: "select vertical of pointer", pointerIcon: "Pointer Icon", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index ed07c9d87..7db19020e 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -236,9 +236,27 @@ export const enObj: I18nObjects = { defaultBarometerGaugeChartOption: { data: [ { - value: [ - {color: "#19b1e6", }, - ] + formatter: "{value}%", + value: 58.46, + name: "PLP", + outline: { + color: "#c80707", + period: [0,100], + splitNumber: 10, + progressBarWidth: 2, + axisTickLength: 6, + axisTickWidth: 2, + radius: "70%", + }, + inline: { + color: "#000000", + period: [0,60], + progressBarWidth: 2, + splitNumber: 6, + axisTickLength: 6, + axisTickWidth: 2, + radius: "60%" + }, } ] }, diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index a476395d2..7fe8718bd 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -192,4 +192,5 @@ export const sectionNames = { legendStyle:trans("prop.legendStyle"), detailStyle:trans("prop.detailStyle"), axisLabelStyle:trans("prop.axisLabelStyle"), + axisLabelStyleOutline:trans("prop.axisLabelStyleOutline") }; diff --git a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts index c3f38d07d..94047d372 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -44,7 +44,8 @@ export const en = { titleStyle: "Title Style", legendStyle: "Legend Style", detailStyle: "Detail Style", - axisLabelStyle: "Axis Label Style" + axisLabelStyle: "Axis Label Style", + axisLabelStyleOutline: "Outline Axis Label Style" }, passwordInput: { label: "Password:", From 60562071d3889fe49e976de1bd6f6ebebbea6ec2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 30 Dec 2024 03:01:56 -0500 Subject: [PATCH 15/17] Fixed some issues and added border and detailSize to Detail Style. --- .../gaugeChartComp/gaugeChartConstants.tsx | 10 +- .../gaugeChartComp/gaugeChartPropertyView.tsx | 30 ++--- .../comps/gaugeChartComp/gaugeChartUtils.ts | 107 ++++++++++-------- .../src/i18n/comps/locales/en.ts | 5 +- .../components/ThemeSettingsCompStyles.tsx | 9 ++ .../src/comps/controls/styleControl.tsx | 27 +++++ .../comps/controls/styleControlConstants.tsx | 27 +++++ .../packages/lowcoder/src/i18n/locales/en.ts | 3 +- 8 files changed, 146 insertions(+), 72 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 4beed852f..3dbf915a9 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -18,7 +18,8 @@ import { styleControl, EchartDefaultChartStyle, EchartDefaultTextStyle, - ColorControl + ColorControl, + EchartDefaultDetailStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -303,8 +304,11 @@ let chartJsonModeChildren: any = { endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')), splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')), pointerLength:withDefault(NumberControl,trans('gaugeChart.defaultPointerLength')), + barometerPointerLength:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerLength')), pointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultPointerWidth')), + barometerPointerWidth:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointerWidth')), pointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultPointer_Y')), + barometerPointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultBarometerPointer_Y')), pointerIcon:withDefault(StringControl), gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')), clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')), @@ -326,13 +330,13 @@ let chartJsonModeChildren: any = { } -if (EchartDefaultChartStyle && EchartDefaultTextStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle && EchartDefaultDetailStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), - legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + legendStyle: styleControl(EchartDefaultDetailStyle, 'legendStyle'), axisLabelStyle: styleControl(EchartDefaultTextStyle, 'axisLabelStyle'), axisLabelStyleOutline: styleControl(EchartDefaultTextStyle, 'axisLabelStyleOutline'), } diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 08657edbd..6991e3a4b 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -290,10 +290,6 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} @@ -302,14 +298,15 @@ export function gaugeChartPropertyView( {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.axisTickLength.propertyView({ label: trans("gaugeChart.axisTickLength"), tooltip: trans("echarts.axisTickLengthTooltip") })} + {children.axisTickWidth.propertyView({ label: trans("gaugeChart.axisTickWidth"), tooltip: trans("echarts.axisTickWidthTooltip") })} + {children.axisTickColor.propertyView({ label: trans("gaugeChart.axisTickColor"), tooltip: trans("echarts.axisTickColorTooltip") })} {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
@@ -355,24 +352,13 @@ export function gaugeChartPropertyView( {children.chartType.propertyView({label: trans("gaugeChart.chartType"), tooltip: trans("gaugeChart.chartTypeTooltip") })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("gaugeChart.title"), tooltip: trans("echarts.titleTooltip") })} - {/* {children.left.propertyView({ label: trans("gaugeChart.left") })} - {children.top.propertyView({ label: trans("gaugeChart.top") })} - {children.bottom.propertyView({ label: trans("gaugeChart.bottom") })} - {children.width.propertyView({ label: trans("gaugeChart.width") })} */} {children.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} {children.min.propertyView({ label: trans("gaugeChart.min"), tooltip: trans("echarts.minTooltip") })} {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} - {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} - {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.progressBar.getView() && children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */} + {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} - {children.progressBar.propertyView({ label: trans("gaugeChart.progressBar"), tooltip: trans("echarts.progressBarVisibilityTooltip") })} {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
@@ -422,9 +408,9 @@ export function gaugeChartPropertyView( {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.startAngle.propertyView({ label: trans("gaugeChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} {children.endAngle.propertyView({ label: trans("gaugeChart.endAngle"), tooltip: trans("echarts.endAngleTooltip") })} - {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} - {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} - {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} + {children.barometerPointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} + {children.barometerPointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.barometerPointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} {children.barometerPointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index db58acb8e..642d7d395 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -137,7 +137,7 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { - const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000') => { + const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => { return { "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif', @@ -148,7 +148,14 @@ export function getEchartsConfig( "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] + "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": 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, } } @@ -304,6 +311,7 @@ export function getEchartsConfig( ] } + console.log(props?.legendStyle) let gradeGaugeOpt = { ...basicStyle, series: [ @@ -367,34 +375,36 @@ export function getEchartsConfig( ] } + console.log(props?.barometerGaugeOption?.data) + let multiGaugeOpt = { ...basicStyle, series: [ { ...basicSeries, type: 'gauge', - pointer: { - ...basicSeries.pointer, - icon: props.pointerIcon || 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', - offsetCenter: [0, '8%'] + anchor: { + show: true, + showAbove: true, + size: 10, + itemStyle: { + color: props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] + } }, progress: { - show: true, overlap: true, - roundCap: true - }, - axisLine: { - roundCap: true + ...progress }, - data: props.multiTitleGaugeOption.data[0].value.map(item => ({ + data: props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]?.value?.map(item => ({ value: item.value, name: item.title, title: { offsetCenter: item.titlePosition }, detail: { - offsetCenter: item.valuePosition + offsetCenter: item.valuePosition, + }, itemStyle: { color: item.color @@ -410,10 +420,7 @@ export function getEchartsConfig( ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { - width: 30, - height: 12, - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff'), - backgroundColor: 'inherit', + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } @@ -458,7 +465,7 @@ export function getEchartsConfig( } }, axisLabel: { - distance: Number(props?.temperatureProgressBarWidth) - Number(props.temperatureAxisLabelDistance) + Number(props.axisTickLength) * 2, + distance: Number(props?.temperatureProgressBarWidth) - Number(props.temperatureAxisLabelDistance), ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 20, "#999"), }, detail: { @@ -528,20 +535,17 @@ export function getEchartsConfig( show: false }, progress: { + "roundCap": props.roundCap, show: true, + width: props?.progressBarWidth, overlap: false, - roundCap: true, clip: false, - itemStyle: { - borderWidth: 1, - borderColor: 'inherit' - } - }, - axisLine: { - lineStyle: { - width: 20 // Reduced from 40 - } }, + // axisLine: { + // lineStyle: { + // width: 20 // Reduced from 40 + // } + // }, splitLine: { show: false }, @@ -551,7 +555,7 @@ export function getEchartsConfig( axisLabel: { show: false }, - data: props.ringGaugeOption.data[0].value.map(item => ({ + data: props?.ringGaugeOption?.data && props?.ringGaugeOption?.data[0]?.value.map(item => ({ value: item.value, name: item.title, title: { @@ -573,12 +577,7 @@ export function getEchartsConfig( ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, detail: { - width: 40, - height: 12, - borderRadius: 20, - borderWidth: 1, - ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit'), - borderColor: 'inherit', + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } @@ -587,7 +586,7 @@ export function getEchartsConfig( let barometerGaugeOpt = { ...basic, - series: [ + series: props?.barometerGaugeOption?.data && [ { ...basicSeries, type: 'gauge', @@ -603,32 +602,43 @@ export function getEchartsConfig( } }, splitLine: { - distance: -12, // Reduced from -18 - length: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength) * 2, lineStyle: { color: props?.barometerGaugeOption?.data[0]?.outline?.color, width: Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth) * 1.5 } }, axisTick: { - distance: -8, // Reduced from -12 - length: props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength, + distance: -Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth), + length: -Number(props?.barometerGaugeOption?.data[0]?.outline?.axisTickLength), lineStyle: { color: props?.barometerGaugeOption?.data[0]?.outline?.color, width: props?.barometerGaugeOption?.data[0]?.outline?.axisTickWidth } }, axisLabel: { - distance: -30, // Reduced from -50 to bring labels closer - ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 14, '#f00') + distance: Number(props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth) - 20, + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 13, '#c80707') }, pointer: { ...basicSeries.pointer, icon: props?.barometerPointerIcon, + length: `${props?.barometerPointerLength}%`, + width: props?.barometerPointerWidth, + offsetCenter: [0, `${-Number(props.barometerPointer_Y)}%`], itemStyle: { color: props?.barometerGaugeOption?.data[0]?.inline?.color } }, + anchor: { + show: true, + size: 10, + itemStyle: { + borderColor: '#000', + borderWidth: 1 + } + }, detail: { valueAnimation: true, precision: 2, // Increase precision or keep as is @@ -637,7 +647,7 @@ export function getEchartsConfig( }, title: { offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart - ...styleWrapper(props?.labelStyle, theme?.labelStyle, 14) + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) }, data: [ { @@ -654,6 +664,13 @@ export function getEchartsConfig( center: [`${props?.position_x}%`, `${props?.position_y}%`], splitNumber: props?.barometerGaugeOption?.data[0]?.inline?.splitNumber, radius: props?.barometerGaugeOption?.data[0]?.inline?.radius, + anchor: { + show: true, + size: 6, + itemStyle: { + color: '#000' + } + }, axisLine: { lineStyle: { color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], @@ -677,8 +694,8 @@ export function getEchartsConfig( } }, axisLabel: { - distance: 6, - ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 14, '#000'), + distance: Number(props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth) + 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), }, pointer: { show: false diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 3595d8cfb..9892b50ab 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -155,7 +155,7 @@ export const en = { defaultGradeGaugePointerWidth: "10", defaultGradeGaugePointer_Y: "45", defaultAxisLabelDistance: "10", - defaultTemperatureAxisLabelDistance: "40", + defaultTemperatureAxisLabelDistance: "30", axisLabelDistance: "Axis Label Distance", progressBarColor: "Progress Bar Color", gradeProgressBarString: "Progress Bar String", @@ -168,6 +168,9 @@ export const en = { axisTickWidth: "axisTick Width", axisTickWidthStage: "axisTick Width", axisTickColor: "AxisTick Color", + defaultBarometerPointerWidth: "3", + defaultBarometerPointerLength: "125", + defaultBarometerPointer_Y: "-10", }, echarts: { diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index 2b90440d5..cb3e748f2 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -103,6 +103,7 @@ const isColorStyle = (styleKey: string) => { styleKey !== 'containerFooterPadding' && styleKey !== 'containerBodyPadding' && styleKey !== 'direction' && + styleKey !== 'detailSize' && styleKey !== 'chartOpacity' && styleKey !== 'chartBoxShadow' && styleKey !== 'chartBorderStyle' && @@ -309,6 +310,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { placeholder = '0 0 1 1'; break; } + case 'direction': { + placeholder = '24px 12px'; + break; + } case 'chartOpacity': { placeholder = '1'; break; @@ -475,6 +480,10 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { icon = ; break; } + case 'detailSize': { + icon = ; + break; + } case 'chartOpacity': { icon = ; break; diff --git a/client/packages/lowcoder/src/comps/controls/styleControl.tsx b/client/packages/lowcoder/src/comps/controls/styleControl.tsx index c4eb8546f..1b419a7cf 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControl.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControl.tsx @@ -44,6 +44,7 @@ import { SingleColorConfig, MarginConfig, DirectionConfig, + DetailSizeConfig, ChartOpacityConfig, ChartBoxShadowConfig, ChartBorderStyleConfig, @@ -209,6 +210,10 @@ function isDirectionConfig(config: SingleColorConfig): config is DirectionConfig return config.hasOwnProperty("direction"); } +function isDetailSizeConfig(config: SingleColorConfig): config is DetailSizeConfig { + return config.hasOwnProperty("detailSize"); +} + function isChartOpacityConfig(config: SingleColorConfig): config is ChartOpacityConfig { return config.hasOwnProperty("chartOpacity"); } @@ -410,6 +415,9 @@ function isEmptyMargin(margin: string) { function isEmptyDirection(direction: string) { return _.isEmpty(direction); } +function isEmptyDetailSize(detailSize: string) { + return _.isEmpty(detailSize); +} function isEmptyChartOpacity(chartOpacity: string) { return _.isEmpty(chartOpacity); } @@ -624,6 +632,10 @@ function calcColors>( res[name] = props[name]; return; } + if (!isEmptyDetailSize(props[name]) && isDetailSizeConfig(config)) { + res[name] = props[name]; + return; + } if (!isEmptyChartOpacity(props[name]) && isChartOpacityConfig(config)) { res[name] = props[name]; return; @@ -812,6 +824,9 @@ function calcColors>( if (isDirectionConfig(config)) { res[name] = themeWithDefault[config.direction] || '0 0 1 1'; } + if (isDetailSizeConfig(config)) { + res[name] = themeWithDefault[config.detailSize] || '24px 12px'; + } if (isChartOpacityConfig(config)) { res[name] = themeWithDefault[config.chartOpacity] || '1'; } @@ -1174,6 +1189,7 @@ export function styleControl( name === 'footerBackgroundImageOrigin' || name === 'margin' || name === 'direction' || + name === 'detailSize' || name === 'chartOpacity' || name === 'chartBoxShadow' || name === 'chartBorderStyle' || @@ -1255,6 +1271,7 @@ export function styleControl( name === 'radius' || name === 'margin' || name === 'direction' || + name === 'detailSize' || name === 'chartOpacity' || name === 'chartBoxShadow' || name === 'chartBorderStyle' || @@ -1391,6 +1408,16 @@ export function styleControl( preInputNode: , placeholder: props[name], }) + : name === 'detailSize' + ? ( + children[name] as InstanceType< + typeof StringControl + > + ).propertyView({ + label: config.label, + preInputNode: , + placeholder: props[name], + }) : name === 'chartOpacity' ? ( children[name] as InstanceType< diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 6de547836..8deb1489d 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -185,6 +185,10 @@ export type DirectionConfig = CommonColorConfig & { readonly direction: string; }; +export type DetailSizeConfig = CommonColorConfig & { + readonly detailSize: string; +}; + export type ChartOpacityConfig = CommonColorConfig & { readonly chartOpacity: string; }; @@ -260,6 +264,7 @@ export type SingleColorConfig = | FontStyleConfig | MarginConfig | DirectionConfig + | DetailSizeConfig | ChartOpacityConfig | ChartBoxShadowConfig | ChartBorderStyleConfig @@ -655,6 +660,12 @@ const DIRECTION = { direction: "direction", } as const; +const DETAILSIZE = { + name: "detailSize", + label: trans("style.detailSize"), + detailSize: "detailSize", +} as const; + const CHARTOPACITY = { name: "chartOpacity", label: trans("style.opacity"), @@ -1988,6 +1999,22 @@ export const EchartDefaultChartStyle = [ CHARTBORDERWIDTH, ] as const; +export const EchartDefaultDetailStyle = [ + CHARTBACKGROUNDCOLOR, + DETAILSIZE, + CHARTTEXTCOLOR, + CHARTTEXTSIZE, + CHARTTEXTWEIGHT, + CHARTFONTFAMILY, + CHARTFONTSTYLE, + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + export const CalendarStyle = [ getBackground("primarySurface"), { diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts index 4754da7c9..03153cbd5 100644 --- a/client/packages/lowcoder/src/i18n/locales/en.ts +++ b/client/packages/lowcoder/src/i18n/locales/en.ts @@ -583,7 +583,8 @@ export const en = { "chartGradientColor": "Gradient Color", "chartShadowColor": "Shadow Color", "chartBorderColor": "Border Color", - "chartTextColor": "Text Color" + "chartTextColor": "Text Color", + "detailSize": "Detail Size" }, "export": { "hiddenDesc": "If true, the component is hidden", From 3d30bade948c2cf3ec5b51d8e7daa72b34656c37 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 30 Dec 2024 03:54:33 -0500 Subject: [PATCH 16/17] Fixed a border Radius on styleWrapper. --- .../gaugeChartComp/gaugeChartConstants.tsx | 2 ++ .../gaugeChartComp/gaugeChartPropertyView.tsx | 4 +-- .../comps/gaugeChartComp/gaugeChartUtils.ts | 25 +++++++++++-------- .../src/i18n/comps/locales/en.ts | 2 ++ 4 files changed, 21 insertions(+), 12 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx index 3dbf915a9..792262ac9 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -313,6 +313,7 @@ let chartJsonModeChildren: any = { gradePointerIcon:withDefault(StringControl, trans('gaugeChart.gradeDefaultPointerIcon')), clockPointerIcon:withDefault(StringControl, trans('gaugeChart.clockDefaultPointerIcon')), barometerPointerIcon:withDefault(StringControl, trans('gaugeChart.defaultBarometerPointerIcon')), + multiTitlePointerIcon:withDefault(StringControl, trans('gaugeChart.defaultMultiTitlePointerIcon')), progressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultProgressBarWidth')), axisTickWidth: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickWidth')), axisTickLength: withDefault(NumberControl, trans('gaugeChart.defaultAxisTickLength')), @@ -324,6 +325,7 @@ let chartJsonModeChildren: any = { gradeGaugePointer_Y:withDefault(NumberControl,trans('gaugeChart.defaultGradeGaugePointer_Y')), stageProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultStageProgressBarWidth')), temperatureProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureProgressBarWidth')), + ringProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultRingProgressBarWidth')), temperatureAxisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureAxisLabelDistance')), stageAxisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultStageAxisTickColor')), gradeAxisTickColor: withDefault(ColorControl), diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx index 6991e3a4b..52348520b 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -304,7 +304,7 @@ export function gaugeChartPropertyView( {children.pointerLength.propertyView({ label: trans("gaugeChart.pointerLength"), tooltip: trans("echarts.pointerLengthTooltip") })} {children.pointerWidth.propertyView({ label: trans("gaugeChart.pointerWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.pointer_Y.propertyView({ label: trans("gaugeChart.pointer_Y"), tooltip: trans("gaugeChart.pointer_Y_Tooltip") })} - {children.pointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} + {children.multiTitlePointerIcon.propertyView({ label: trans("gaugeChart.pointerIcon"), tooltip: trans("gaugeChart.pointerIconTooltip") })} {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })} @@ -357,7 +357,7 @@ export function gaugeChartPropertyView( {children.max.propertyView({ label: trans("gaugeChart.max"), tooltip: trans("echarts.maxTooltip") })} {children.position_x.propertyView({ label: trans("gaugeChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} {children.position_y.propertyView({ label: trans("gaugeChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} - {children.progressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} + {children.ringProgressBarWidth.propertyView({ label: trans("gaugeChart.progressBarWidth"), tooltip: trans("echarts.pointerWidthTooltip") })} {children.tooltip.propertyView({ label: trans("gaugeChart.tooltip"), tooltip: trans("echarts.tooltipVisibilityTooltip") })} {children.roundCap.propertyView({ label: trans("gaugeChart.roundCap"), tooltip: trans("echarts.roundCapVisibilityTooltip") })}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 642d7d395..9cf15e531 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -152,7 +152,7 @@ export function getEchartsConfig( "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, - "borderRadius": styleContainer?.chartBorderRadius || themeContainer?.borderRadius, + "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, @@ -218,7 +218,7 @@ export function getEchartsConfig( "borderColor": props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, "borderWidth": props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, "borderType": props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, - "borderRadius": props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius, + "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], @@ -386,7 +386,7 @@ export function getEchartsConfig( anchor: { show: true, showAbove: true, - size: 10, + size: Number(props?.pointerWidth) * 1.5, itemStyle: { color: props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] } @@ -419,6 +419,10 @@ export function getEchartsConfig( title: { ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), }, + pointer: { + ...basicSeries.pointer, + icon: props?.multiTitlePointerIcon, + }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], @@ -535,17 +539,18 @@ export function getEchartsConfig( show: false }, progress: { - "roundCap": props.roundCap, + roundCap: props?.roundCap, show: true, - width: props?.progressBarWidth, + width: props?.ringProgressBarWidth, overlap: false, clip: false, }, - // axisLine: { - // lineStyle: { - // width: 20 // Reduced from 40 - // } - // }, + axisLine: { + roundCap: props?.roundCap, + lineStyle: { + width: props?.ringProgressBarWidth + } + }, splitLine: { show: false }, diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 9892b50ab..3cf81b7b8 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -139,6 +139,7 @@ export const en = { defaultProgressBarWidth: '10', defaultStageProgressBarWidth: '15', defaultTemperatureProgressBarWidth: '35', + defaultRingProgressBarWidth: '20', progressBar: 'Progress Bar', roundCap: "Round Cap", chartType: "Chart Type", @@ -147,6 +148,7 @@ export const en = { gradeDefaultPointerIcon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z", clockDefaultPointerIcon: "path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z", defaultBarometerPointerIcon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', + defaultMultiTitlePointerIcon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', pointer_Y: "Pointer-Y", pointer_Y_Tooltip: "select vertical of pointer", pointerIcon: "Pointer Icon", From 053119013b9d3c8f43a99c9c2f76c37db4d04128 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 30 Dec 2024 09:31:58 -0500 Subject: [PATCH 17/17] Fixed tooltip and formatters on all gauge chart --- .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 13 +++++-------- .../lowcoder-comps/src/i18n/comps/locales/en.ts | 5 ++--- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 9cf15e531..313af3570 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -240,6 +240,7 @@ export function getEchartsConfig( ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 12, "#000000"), }, 'detail': { + formatter: props?.echartsOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, "#000000"), }, "label": { @@ -311,7 +312,6 @@ export function getEchartsConfig( ] } - console.log(props?.legendStyle) let gradeGaugeOpt = { ...basicStyle, series: [ @@ -360,9 +360,7 @@ export function getEchartsConfig( detail: { offsetCenter: [0, '25%'], valueAnimation: true, - formatter: function (value) { - return value; - }, + formatter: props?.gradeGaugeOption?.data?.map(data => data.formatter)[0], ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, 'inherit'), }, data: [ @@ -375,8 +373,6 @@ export function getEchartsConfig( ] } - console.log(props?.barometerGaugeOption?.data) - let multiGaugeOpt = { ...basicStyle, series: [ @@ -583,7 +579,7 @@ export function getEchartsConfig( }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), - formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], + formatter: props?.ringGaugeOption?.data?.map(data => data.formatter)[0], } } ] @@ -648,7 +644,8 @@ export function getEchartsConfig( valueAnimation: true, precision: 2, // Increase precision or keep as is ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), - offsetCenter: [0, '40%'] // Adjust to fit within the smaller radius + offsetCenter: [0, '40%'], + formatter: props?.barometerGaugeOption?.data?.map(data => data.formatter)[0], }, title: { offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index 3cf81b7b8..0b701ae1d 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -150,9 +150,9 @@ export const en = { defaultBarometerPointerIcon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z', defaultMultiTitlePointerIcon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z', pointer_Y: "Pointer-Y", - pointer_Y_Tooltip: "select vertical of pointer", + pointer_Y_Tooltip: "Select the Y-value of the pointer.", pointerIcon: "Pointer Icon", - pointerIconTooltip: "Select Pointer Icon", + pointerIconTooltip: "Select the Pointer Icon", defaultGradeGaugePointerLength: "25", defaultGradeGaugePointerWidth: "10", defaultGradeGaugePointer_Y: "45", @@ -161,7 +161,6 @@ export const en = { axisLabelDistance: "Axis Label Distance", progressBarColor: "Progress Bar Color", gradeProgressBarString: "Progress Bar String", - defaultToolTip: "Default ToolTip", defaultAxisTickLength: "7", defaultAxisTickWidth: "2", defaultAxisTickColor: "#444444",