diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 35852214d..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 (EchartsStyle) { +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()} +
: <> + } ); 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..792262ac9 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx @@ -17,7 +17,9 @@ import { clickEvent, styleControl, EchartDefaultChartStyle, - EchartDefaultTextStyle + EchartDefaultTextStyle, + ColorControl, + EchartDefaultDetailStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -34,25 +36,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"), @@ -232,6 +215,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 +269,15 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultGaugeChartOption), + 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), + clockGaugeOption: jsonControl(toObject, i18nObjs.defaultClockGaugeChartOption), + barometerGaugeOption: jsonControl(toObject, i18nObjs.defaultBarometerGaugeChartOption), + + chartType: dropdownControl(ChartTypeOptions, trans("chart.default")), echartsTitle: withDefault(StringControl, trans("gaugeChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, @@ -267,6 +294,7 @@ let chartJsonModeChildren: any = { bottom:withDefault(NumberControl,trans('gaugeChart.defaultBottom')), width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')), radius:withDefault(NumberControl,trans('gaugeChart.defaultRadius')), + temperatureRadius:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureRadius')), min:withDefault(NumberControl,trans('gaugeChart.defaultMin')), max:withDefault(NumberControl,trans('gaugeChart.defaultMax')), gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')), @@ -276,18 +304,43 @@ 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')), + 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')), + 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')), + ringProgressBarWidth:withDefault(NumberControl,trans('gaugeChart.defaultRingProgressBarWidth')), + temperatureAxisLabelDistance:withDefault(NumberControl,trans('gaugeChart.defaultTemperatureAxisLabelDistance')), + stageAxisTickColor: withDefault(ColorControl, trans('gaugeChart.defaultStageAxisTickColor')), + gradeAxisTickColor: withDefault(ColorControl), } -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'), } } 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 cb25183bd..52348520b 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx @@ -31,12 +31,9 @@ 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") })} @@ -44,11 +41,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.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.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.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") })} @@ -74,11 +76,443 @@ export function gaugeChartPropertyView(
{hiddenPropertyView(children)}
); + + const stageGaugePropertyView = ( + <> +
+ {children.stageGaugeOption.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.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.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.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") })}*/} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/} +
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const gradeGaugePropertyView = ( + <> +
+ {children.gradeGaugeOption.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.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.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.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") })}*/} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+ {/*
*/} + {/* {children.axisLabelStyle?.getPropertyView()}*/} + {/*
*/} +
{hiddenPropertyView(children)}
+ + ); + + const temperatureGaugePropertyView = ( + <> +
+ {children.temperatureGaugeOption.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.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.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.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/} +
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const multiGaugePropertyView = ( + <> +
+ {children.multiTitleGaugeOption.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.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.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.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") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const ringGaugePropertyView = ( + <> +
+ {children.ringGaugeOption.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.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.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") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const barometerGaugePropertyView = ( + <> +
+ {children.barometerGaugeOption.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.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.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") })} +
+
+ {children.onEvent.propertyView()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()} +
+
+ {children.axisLabelStyle?.getPropertyView()} +
+
+ {children.axisLabelStyleOutline?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); + + const clockGaugePropertyView = ( + <> +
+ {children.clockGaugeOption.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.radius.propertyView({ label: trans("gaugeChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {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") })} + {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()} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+ {/*
*/} + {/* {children.labelStyle?.getPropertyView()}*/} + {/*
*/} + {/*
*/} + {/* {children.legendStyle?.getPropertyView()}*/} + {/*
*/} +
+ {children.axisLabelStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
+ + ); 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..313af3570 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[], @@ -136,23 +137,39 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { + const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => { + + return { + "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif', + "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize, + "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight, + "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor, + "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle, + "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, + "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], + "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], + "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2], + "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', + "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, + "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, + "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), + "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor, + "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24, + "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12, + } + + } + if (props.mode === "json") { - let opt={ + + const basic={ "title": { "text": props.echartsTitle, 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', "left":props.echartsTitleConfig.top, "textStyle": { - "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || 18, - "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, - "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000", - "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle, - "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor, - "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] - }, + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } }, "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ @@ -179,13 +196,29 @@ export function getEchartsConfig( "pointer": { "length": `${props?.pointerLength}%`, "width": props?.pointerWidth, + "icon": props?.pointerIcon, + "offsetCenter": [0, `${-Number(props.pointer_Y)}%`] + }, + "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, "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], @@ -203,27 +236,12 @@ 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] + formatter: props?.echartsOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, "#000000"), }, "label": { "show": props.label, @@ -233,21 +251,667 @@ 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"), } })) } ] } - return props.echartsOption ? opt : {}; + + const { progress, ...basicSeries } = basic.series[0]; + const { color, ...basicStyle } = basic; + + let stageGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + axisLine: { + lineStyle: { + width: props.stageProgressBarWidth, + color:props?.stageGaugeOption?.data?.map(data => data.color)[0] + } + }, + pointer: { + ...basicSeries.pointer, + itemStyle: { + color: 'auto', + } + }, + axisTick: { + distance: -Number(props.stageProgressBarWidth), + length: props.axisTickLength, + lineStyle: { + color: props.stageAxisTickColor, + width: props.axisTickWidth + } + }, + splitLine: { + distance: -Number(props.stageProgressBarWidth), + length: props.stageProgressBarWidth, + lineStyle: { + color: props.stageAxisTickColor, + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + 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], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, "inherit"), + }, + data: [ + { + value: props?.stageGaugeOption?.data?.map(data => data.value) + } + ] + } + ] + } + + let gradeGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + axisLine: { + lineStyle: { + width: props.progressBarWidth, + color:props?.gradeGaugeOption?.data?.map(data => data.color)[0] + } + }, + progress: { + width: props?.stageProgressBarWidth, + }, + pointer: { + 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}%`], + itemStyle: { + color: 'auto' + } + }, + axisTick: { + length: props.axisTickLength, + lineStyle: { + color: props.gradeAxisTickColor || 'auto', + width: props.axisTickWidth + } + }, + splitLine: { + length: Number(props.axisTickLength) * 2, + lineStyle: { + color: props.gradeAxisTickColor || 'auto', + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + show: false + }, + title: { + offsetCenter: [0, '0%'], + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), + }, + detail: { + offsetCenter: [0, '25%'], + valueAnimation: true, + formatter: props?.gradeGaugeOption?.data?.map(data => data.formatter)[0], + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 20, 'inherit'), + }, + data: [ + { + value: props?.gradeGaugeOption?.data?.map(data => data.value), + name: props?.gradeGaugeOption?.data?.map(data => data.name)[0], + } + ] + } + ] + } + + let multiGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + type: 'gauge', + anchor: { + show: true, + showAbove: true, + size: Number(props?.pointerWidth) * 1.5, + itemStyle: { + color: props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] + } + }, + progress: { + overlap: true, + ...progress + }, + + 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, + + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), + + 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], + } + } + ] + } + + let temperatureGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + radius: `${props.temperatureRadius}%`, + itemStyle: { + color: props?.temperatureGaugeOption?.data?.map(data => data.color)[0] + }, + progress: { + show: true, + width: props.temperatureProgressBarWidth + }, + pointer: { + show: false + }, + axisLine: { + lineStyle: { + width: props.temperatureProgressBarWidth + } + }, + axisTick: { + distance: -Number(props.temperatureProgressBarWidth) - 15, + length: -Number(props.axisTickLength), + lineStyle: { + color: props.gradeAxisTickColor || '#999', + width: props.axisTickWidth + } + }, + splitLine: { + distance: -Number(props.temperatureProgressBarWidth) -15, + length: -Number(props.axisTickLength) * 2, + lineStyle: { + color: props.gradeAxisTickColor || '#999', + width: Number(props.axisTickWidth) * 1.5 + } + }, + axisLabel: { + distance: Number(props?.temperatureProgressBarWidth) - Number(props.temperatureAxisLabelDistance), + ...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, 30, 'inherit'), + }, + data: [ + { + value: props?.temperatureGaugeOption?.data?.map(data => data.value) + } + ] + }, + { + type: 'gauge', + center: [`${props?.position_x}%`, `${props?.position_y}%`], + startAngle: props?.startAngle, + endAngle: props?.endAngle, + splitNumber: props?.splitNumber, + min: props?.min, + max: props?.max, + radius: `${props.temperatureRadius}%`, + itemStyle: { + color: props?.temperatureGaugeOption?.data?.map(data => data.borderColor)[0] + }, + progress: { + show: true, + width: 6 + }, + pointer: { + show: false + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + show: false + }, + detail: { + show: false + }, + data: [ + { + value: props?.temperatureGaugeOption?.data?.map(data => data.value) + } + ] + } + ] + } + + let ringGaugeOpt = { + ...basicStyle, + series: [ + { + ...basicSeries, + startAngle: 90, + endAngle: 450, + type: 'gauge', + pointer: { + show: false + }, + progress: { + roundCap: props?.roundCap, + show: true, + width: props?.ringProgressBarWidth, + overlap: false, + clip: false, + }, + axisLine: { + roundCap: props?.roundCap, + lineStyle: { + width: props?.ringProgressBarWidth + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + show: false + }, + data: props?.ringGaugeOption?.data && props?.ringGaugeOption?.data[0]?.value.map(item => ({ + value: item.value, + name: item.title, + title: { + offsetCenter: item.titlePosition + }, + detail: { + offsetCenter: item.valuePosition + }, + itemStyle: { + color: item.color + }, + pointer: { + itemStyle: { + color: item.color + } + } + })), + title: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 16), + }, + detail: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), + formatter: props?.ringGaugeOption?.data?.map(data => data.formatter)[0], + } + } + ] + } + + let barometerGaugeOpt = { + ...basic, + series: props?.barometerGaugeOption?.data && [ + { + ...basicSeries, + type: 'gauge', + 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, props?.barometerGaugeOption?.data[0]?.outline?.color]], + width: props?.barometerGaugeOption?.data[0]?.outline?.progressBarWidth + } + }, + splitLine: { + 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: -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: 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 + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16), + offsetCenter: [0, '40%'], + formatter: props?.barometerGaugeOption?.data?.map(data => data.formatter)[0], + }, + title: { + offsetCenter: [0, '-40%'], // Adjust title placement for smaller chart + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13) + }, + data: [ + { + value: props?.barometerGaugeOption?.data[0]?.value, + name: props?.barometerGaugeOption?.data[0]?.name, + } + ] + }, + { + ...basicSeries, + type: 'gauge', + 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, + anchor: { + show: true, + size: 6, + itemStyle: { + color: '#000' + } + }, + axisLine: { + lineStyle: { + color: [[1, props?.barometerGaugeOption?.data[0]?.inline?.color]], + width: props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth + } + }, + splitLine: { + distance: -2, // Adjust spacing + length: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength) * 2, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: Number(props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth) * 1.5 + } + }, + axisTick: { + distance: 0, + length: props?.barometerGaugeOption?.data[0]?.inline?.axisTickLength, + lineStyle: { + color: props?.barometerGaugeOption?.data[0]?.inline?.color, + width: props?.barometerGaugeOption?.data[0]?.inline?.axisTickWidth + } + }, + axisLabel: { + distance: Number(props?.barometerGaugeOption?.data[0]?.inline?.progressBarWidth) + 6, + ...styleWrapper(props?.axisLabelStyleOutline, theme?.axisLabelStyleOutline, 13, '#000'), + }, + pointer: { + show: false + }, + title: { + show: false + }, + detail: { + show: false + } + } + ] + } + + let clockGaugeOpt = { + ...basicStyle, + tooltip: false, + series: [ + { + ...basicSeries, + name: 'hour', + type: 'gauge', + startAngle: 90, + endAngle: -270, + min: 0, + max: 12, + center: ['50%', '50%'], + splitNumber: 12, + clockwise: true, + axisLine: { + lineStyle: { + 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: { + 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: { + ...styleWrapper(props?.axisLabelStyle, theme?.axisLabelStyle, 16, "#000000"), + distance: Number(props?.progressBarWidth) + Number(props.axisLabelDistance), + formatter: function (value) { + if (value === 0) { + return ''; + } + return value + ''; + } + }, + pointer: { + 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%'], + itemStyle: { + 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: { + show: false + }, + title: { + offsetCenter: [0, '30%'] + }, + data: [ + { + value: props?.clockGaugeOption?.data?.map(data => data.hour)[0]?.value + } + ] + }, + { + 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: 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%'], + itemStyle: { + 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: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: props?.clockGaugeOption?.data?.map(data => data.minute)[0]?.value + } + ] + }, + { + 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: 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%'], + itemStyle: { + 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: props?.clockGaugeOption?.data?.map(data => data.anchor)[0]?.size, + showAbove: true, + itemStyle: { + 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: { + show: false + }, + title: { + offsetCenter: ['0%', '-40%'] + }, + data: [ + { + value: props?.clockGaugeOption?.data?.map(data => data.second)[0]?.value + } + ] + } + ] + } + + 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..0b701ae1d 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', + defaultTemperatureRadius: '60', defaultPointerLength: '50', pointerLength: 'Pointer Length', pointerWidth: 'Pointer Width', @@ -136,8 +137,42 @@ export const en = { defaultPosition_Y: '60', progressBarWidth: 'Progress Bar Width', defaultProgressBarWidth: '10', + defaultStageProgressBarWidth: '15', + defaultTemperatureProgressBarWidth: '35', + defaultRingProgressBarWidth: '20', progressBar: 'Progress Bar', - roundCap: "Round Cap" + 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", + 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 the Y-value of the pointer.", + pointerIcon: "Pointer Icon", + pointerIconTooltip: "Select the Pointer Icon", + defaultGradeGaugePointerLength: "25", + defaultGradeGaugePointerWidth: "10", + defaultGradeGaugePointer_Y: "45", + defaultAxisLabelDistance: "10", + defaultTemperatureAxisLabelDistance: "30", + axisLabelDistance: "Axis Label Distance", + progressBarColor: "Progress Bar Color", + gradeProgressBarString: "Progress Bar String", + defaultAxisTickLength: "7", + defaultAxisTickWidth: "2", + defaultAxisTickColor: "#444444", + defaultStageAxisTickColor: "#ffffff", + axisTickLength: "axisTick Length", + axisTickWidth: "axisTick Width", + axisTickWidthStage: "axisTick Width", + axisTickColor: "AxisTick Color", + defaultBarometerPointerWidth: "3", + defaultBarometerPointerLength: "125", + defaultBarometerPointer_Y: "-10", + }, echarts: { defaultTitle: "Data Display", @@ -182,6 +217,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", @@ -269,6 +309,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: "", 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..7db19020e 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -173,7 +173,121 @@ 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", + color: [ + [0.3, '#67e0e3'], + [0.7, '#37a2da'], + [1, '#fd666d'] + ] + } + ] + }, + defaultGradeGaugeChartOption: { + data: [ + { + value: 80, + name: "Grade Rating", + formatter: "{value} %", + color: [ + [0.25, '#FF6E76'], + [0.5, '#FDDD60'], + [0.75, '#58D9F9'], + [1, '#7CFFB2'] + ] + } + ] + }, + defaultTemperatureGaugeChartOption: { + data: [ + {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%']}, + ] + } + ] + }, + defaultBarometerGaugeChartOption: { + data: [ + { + 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%" + }, + } + ] + }, + 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: { 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..674e7fc8a 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,13 @@ export type I18nObjects = { defaultDataSource: JSONObject[]; defaultEchartsJsonOption: Record; defaultGaugeChartOption: Record; + defaultStageGaugeChartOption: Record; + defaultGradeGaugeChartOption: Record; + defaultTemperatureGaugeChartOption: Record; + defaultMultiTitleGaugeChartOption: Record; + defaultRingGaugeChartOption: Record; + defaultBarometerGaugeChartOption: Record; + defaultClockGaugeChartOption: Record; defaultFunnelChartOption: Record; defaultSankeyChartOption: Record; defaultCandleStickChartOption: Record; 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:", 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",