From c75bbe7ba6b530f4c76d415335f3694b4047d4cc Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 3 Jan 2025 04:50:37 -0500 Subject: [PATCH 01/16] Added control fields and style fields on CandleStick charts. --- .../candleStickChartConstants.tsx | 6 +- .../candleStickChartPropertyView.tsx | 19 +-- .../candleStickChartUtils.ts | 131 ++++++++++-------- .../echartsTitleVerticalConfig.tsx | 45 ++++++ .../comps/gaugeChartComp/gaugeChartUtils.ts | 22 +-- .../src/i18n/comps/locales/en.ts | 2 + .../src/i18n/comps/locales/enObj.tsx | 23 +-- .../lowcoder-comps/src/util/styleWrapper.tsx | 21 +++ .../src/components/Section.tsx | 4 +- .../src/i18n/design/locales/en.ts | 4 +- .../components/ThemeSettingsCompStyles.tsx | 6 +- 11 files changed, 179 insertions(+), 104 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx create mode 100644 client/packages/lowcoder-comps/src/util/styleWrapper.tsx diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index 27010ae0c..a441e3dc8 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -23,7 +23,7 @@ import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core" import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig"; import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; -import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; +import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; @@ -252,7 +252,7 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultCandleStickChartOption), echartsTitle: withDefault(StringControl, trans("candleStickChart.defaultTitle")), - echartsLegendConfig: EchartsLegendConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, echartsLabelConfig: EchartsLabelConfig, echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, @@ -263,8 +263,8 @@ let chartJsonModeChildren: any = { dataZoomBottom:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomBottom')), dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')), tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), dataZoomVisibility: withDefault(BoolControl, true), + axisFlag: withDefault(BoolControl, true), } if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx index e105256e7..7332e49b7 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -32,24 +32,20 @@ export function candleStickChartPropertyView( ), })} {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.left.propertyView({ label: trans("candleStickChart.left") })} {children.right.propertyView({ label: trans("candleStickChart.right") })} {children.top.propertyView({ label: trans("candleStickChart.top") })} {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })} - {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("candleStickChart.title") })} {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight") })} {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom") })} - {children.tooltip.propertyView({label: trans("candleStickChart.tooltip")})} - {children.legendVisibility.propertyView({label: trans("candleStickChart.legendVisibility")})} + {children.axisFlag.propertyView({label: trans("candleStickChart.axisFlag")})} {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} -
{hiddenPropertyView(children)}
@@ -59,15 +55,12 @@ export function candleStickChartPropertyView(
{children.titleStyle?.getPropertyView()}
-
+
{children.labelStyle?.getPropertyView()}
- { - children.legendVisibility.getView() ? -
- {children.legendStyle?.getPropertyView()} -
: <> - } +
+ {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 5443730fd..f9158eefc 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -14,6 +14,7 @@ import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import { useContext } from "react"; import parseBackground from "../../util/gradientBackgroundColor"; +import {styleWrapper} from "../../util/styleWrapper"; export function transformData( originData: JSONObject[], @@ -138,73 +139,91 @@ export function getEchartsConfig( if (props.mode === "json") { - let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":props.echartsTitleConfig.top, - "textStyle": { - "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, - "fontSize": props?.titleStyle?.chartTextSize || theme?.titleStyle?.fontSize || '18', - "fontWeight": props?.titleStyle?.chartTextWeight || theme?.titleStyle?.fontWeight, - "color": props?.titleStyle?.chartTextColor || theme?.titleStyle?.fontColor || "#000000", - "fontStyle": props?.titleStyle?.chartFontStyle || theme?.titleStyle?.fontStyle, - "textShadowColor": props?.titleStyle?.chartShadowColor || theme?.titleStyle?.shadowColor, - "textShadowBlur": props?.titleStyle?.chartBoxShadow?.split('px')[0] || theme?.titleStyle?.boxShadow?.split('px')[0], - "textShadowOffsetX": props?.titleStyle?.chartBoxShadow?.split('px')[1] || theme?.titleStyle?.boxShadow?.split('px')[1], - "textShadowOffsetY": props?.titleStyle?.chartBoxShadow?.split('px')[2] || theme?.titleStyle?.boxShadow?.split('px')[2] - } + let opt= { + title: { + text: props.echartsTitle, + top: props.echartsTitleVerticalConfig.top, + left:props.echartsTitleConfig.top, }, - "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - "color": props?.echartsOption.data?.map(data => data.color), - "tooltip": props?.tooltip&&{ - "trigger": "axis", - "axisPointer": { - "type": "cross" + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + color: props?.echartsOption.data?.map(data => data.color), + tooltip: props?.tooltip && { + trigger: "axis", + axisPointer: { + type: "cross" } }, - "grid": { - "left": `${props?.left}%`, - "right": `${props?.right}%`, - "bottom": `${props?.bottom}%`, - "top": `${props?.top}%`, + grid: { + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, }, - "dataZoom": [ + dataZoom: [ { - "show": props?.dataZoomVisibility, - "type": 'slider', - "start": 0, - "end": 100, - "bottom": props?.dataZoomBottom, - 'height': props?.dataZoomHeight + show: props?.dataZoomVisibility, + type: 'slider', + start: 0, + end: 100, + bottom: props?.dataZoomBottom, + height: props?.dataZoomHeight } ], - "xAxis": { - "type": "category", - "data": props?.echartsOption.xAxis.data + yAxis: { + type: "value", + scale: true, + splitArea: props?.axisFlag && { + show: true, + areaStyle: { + color: props?.echartsOption?.axisColor + } + }, + axisLabel: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13), + } }, - "yAxis": { - "type": "value", - "scale": true + xAxis: props?.echartsOption && { + type: 'category', + data: props?.echartsOption.xAxis.data, + splitArea: !props?.axisFlag && { + show: true, + areaStyle: { + // Provide multiple colors to alternate through + color: props?.echartsOption?.axisColor + }, + }, + axisLabel: { + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 13), + }, + boundaryGap: true, + // Turn off x-axis split lines if desired, so you only see colored areas + splitLine: { + show: false + }, + // Show split areas, each day with a different background color }, - "series": [ + series: props?.echartsOption && [ { - "name": props?.echartsConfig.type, - "type": props?.echartsConfig.type, - "left": "10%", - "top": 60, - "bottom": 60, - "width": "80%", - "min": 0, - "max": 100, - "gap": 2, - "label": { - "show": true, - "position": props?.echartsLabelConfig.top + name: props?.echartsConfig.type, + type: props?.echartsConfig.type, + label: { + show: true, + position: props?.echartsLabelConfig.top }, - "data": props?.echartsOption.data, - } - ] + data: props?.echartsOption.data, + itemStyle: { + ...props?.echartsOption.itemStyle, + borderColor: props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, + borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, + borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, + borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius), + shadowColor: props?.chartStyle?.chartShadowColor || theme?.chartStyle?.shadowColor, + shadowBlur: props?.chartStyle?.chartBoxShadow?.split('px')[0] || theme?.chartStyle?.boxShadow?.split('px')[0], + shadowOffsetX: props?.chartStyle?.chartBoxShadow?.split('px')[1] || theme?.chartStyle?.boxShadow?.split('px')[1], + shadowOffsetY: props?.chartStyle?.chartBoxShadow?.split('px')[2] || theme?.chartStyle?.boxShadow?.split('px')[2] + } + }, + ], } return props.echartsOption ? opt : {}; diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx new file mode 100644 index 000000000..e85a8b75f --- /dev/null +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsTitleVerticalConfig.tsx @@ -0,0 +1,45 @@ +import { + AlignBottom, + AlignTop, + dropdownControl, + MultiCompBuilder, +} from "lowcoder-sdk"; +import { LegendComponentOption } from "echarts"; +import { trans } from "i18n/comps"; + +const LegendPositionOptions = [ + { + label: , + value: "top", + }, + { + label: , + value: "bottom", + } +] as const; + +export const EchartsTitleVerticalConfig = (function () { + return new MultiCompBuilder( + { + position: dropdownControl(LegendPositionOptions, "top"), + }, + (props): LegendComponentOption => { + const config: LegendComponentOption = { + top: "top", + type: "scroll", + }; + config.top = props.position + return config; + } + ) + .setPropertyViewFn((children) => ( + <> + {children.position.propertyView({ + label: trans("echarts.titlePositionVertical"), + radioButton: true, + tooltip: trans("echarts.changingLegend_x_Tooltip") + })} + + )) + .build(); +})(); diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 313af3570..869f22fc6 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -15,6 +15,7 @@ import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import opacityToHex from "../../util/opacityToHex"; import parseBackground from "../../util/gradientBackgroundColor"; import {ba} from "@fullcalendar/core/internal-common"; +import {styleWrapper} from "../../util/styleWrapper"; export function transformData( originData: JSONObject[], @@ -137,28 +138,7 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { - const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => { - return { - "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif', - "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize, - "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight, - "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor, - "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle, - "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, - "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], - "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], - "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2], - "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', - "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, - "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, - "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), - "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor, - "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24, - "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12, - } - - } if (props.mode === "json") { diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts index ab4ab36d8..00986628c 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -54,6 +54,7 @@ export const en = { tooltip: 'Tooltip', legendVisibility: 'Legend Visibility', dataZoomVisibility: 'Data Zoom Visibility', + axisFlag: 'Axis Flag', left: 'Left', defaultLeft:'10', right: 'Right', @@ -185,6 +186,7 @@ export const en = { funnelAlign: "Funnel Align", sort: "Sort", changingTitle_x_Tooltip: "Change the Horizontal position of the Title.", + changingTitle_y_Tooltip: "Change the Vertical position of the Title.", changingLegend_x_Tooltip: "Change the Vertical position of the Legend.", changingLegend_y_Tooltip: "Change the Horizontal position of the Legend.", changingLegend_orient_Tooltip: "Change the Orientation of the Legend.", diff --git a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx index 7db19020e..22a400072 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -307,15 +307,22 @@ export const enObj: I18nObjects = { }, defaultCandleStickChartOption: { xAxis: { - data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"] - }, + data: ["Day 1", "Day 2", "Day 3", "Day 4", "Day 5"], + }, + axisColor: ['#f0f0f0', '#ffffff'], data:[ - [100, 200, 50, 150], - [120, 220, 80, 180], - [80, 150, 60, 130], - [130, 230, 110, 190], - [90, 180, 70, 160] - ] + [22, 25, 18, 26], + [25, 23, 22, 27], + [23, 24, 21, 25], + [24, 26, 23, 27], + [23, 21, 20, 25] + ], + itemStyle: { + color: '#ec0000', // Body color (rising) + color0: '#00da3c', // Body color (falling) + borderColor: '#ec0000', // Border color (rising) + borderColor0: '#00da3c', // Border color (falling) + } }, defaultRadarChartOption: { indicator: [ diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx new file mode 100644 index 000000000..f3f57b600 --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -0,0 +1,21 @@ +export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFontSize=18, defaultFontColor='#000000', detailBorderWidth = 0, defaultBackgroundColor = "" ) => { + + return { + "fontFamily": styleContainer?.chartFontFamily || themeContainer?.fontFamily || 'Arial, sans-serif', + "fontSize": styleContainer?.chartTextSize || themeContainer?.fontSize || defaultFontSize, + "fontWeight": styleContainer?.chartTextWeight || themeContainer?.fontWeight, + "color": styleContainer?.chartTextColor || themeContainer?.fontColor || defaultFontColor, + "fontStyle": styleContainer?.chartFontStyle || themeContainer?.fontStyle, + "textShadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, + "textShadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], + "textShadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], + "textShadowOffsetY": styleContainer?.chartBoxShadow?.split('px')[2] || themeContainer?.boxShadow?.split('px')[2], + "borderColor": styleContainer?.chartBorderColor || themeContainer?.borderColor || 'inherit', + "borderWidth": styleContainer?.chartBorderWidth || themeContainer?.borderWidth || detailBorderWidth, + "borderType": styleContainer?.chartBorderStyle || themeContainer?.borderType, + "borderRadius": Number(styleContainer?.chartBorderRadius || themeContainer?.borderRadius), + "backgroundColor": styleContainer?.chartBackgroundColor || themeContainer?.backgroundColor || defaultBackgroundColor, + "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24, + "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12, + } +} \ No newline at end of file diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 7fe8718bd..036b79768 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -192,5 +192,7 @@ export const sectionNames = { legendStyle:trans("prop.legendStyle"), detailStyle:trans("prop.detailStyle"), axisLabelStyle:trans("prop.axisLabelStyle"), - axisLabelStyleOutline:trans("prop.axisLabelStyleOutline") + axisLabelStyleOutline:trans("prop.axisLabelStyleOutline"), + xAxisStyle:trans("prop.xAxisStyle"), + yAxisStyle:trans("prop.yAxisStyle"), }; 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 94047d372..fb477073b 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -45,7 +45,9 @@ export const en = { legendStyle: "Legend Style", detailStyle: "Detail Style", axisLabelStyle: "Axis Label Style", - axisLabelStyleOutline: "Outline Axis Label Style" + axisLabelStyleOutline: "Outline Axis Label Style", + xAxisStyle: "X-Axis Style", + yAxisStyle: "Y-Axis Style" }, passwordInput: { label: "Password:", diff --git a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx index e3d247e3b..76e592d30 100644 --- a/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx +++ b/client/packages/lowcoder/src/components/ThemeSettingsCompStyles.tsx @@ -307,7 +307,11 @@ export default function ThemeSettingsCompStyles(props: CompStyleProps) { break; } case 'direction': { - placeholder = '0 0 1px 1px'; + placeholder = '0 0 1 1'; + break; + } + case 'detailSize': { + placeholder = '24px 12px'; break; } case 'chartOpacity': { From 5fb1fc08a48209be29e9cccda20bf5e1cf419355 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 3 Jan 2025 06:23:59 -0500 Subject: [PATCH 02/16] Added Tooltip to CandleStick chart. --- .../candleStickChartConstants.tsx | 8 ++++---- .../candleStickChartPropertyView.tsx | 18 +++++++++--------- .../candleStickChartUtils.ts | 5 ++--- .../comps/funnelChartComp/funnelChartUtils.ts | 2 +- .../src/i18n/comps/locales/en.ts | 11 +++++++++-- .../comps/controls/styleControlConstants.tsx | 9 +++++++++ 6 files changed, 34 insertions(+), 19 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx index a441e3dc8..243f16bea 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartConstants.tsx @@ -16,7 +16,7 @@ import { uiChildren, clickEvent, styleControl, - EchartDefaultChartStyle, + EchartCandleStickChartStyle, EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; @@ -264,12 +264,12 @@ let chartJsonModeChildren: any = { dataZoomHeight:withDefault(NumberControl,trans('candleStickChart.defaultDataZoomHeight')), tooltip: withDefault(BoolControl, true), dataZoomVisibility: withDefault(BoolControl, true), - axisFlag: withDefault(BoolControl, true), + axisFlagVisibility: withDefault(BoolControl, true), } -if (EchartDefaultChartStyle && EchartDefaultTextStyle) { +if (EchartCandleStickChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + chartStyle: styleControl(EchartCandleStickChartStyle, '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 7332e49b7..234aaf38a 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartPropertyView.tsx @@ -33,15 +33,15 @@ export function candleStickChartPropertyView( })} {children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} - {children.left.propertyView({ label: trans("candleStickChart.left") })} - {children.right.propertyView({ label: trans("candleStickChart.right") })} - {children.top.propertyView({ label: trans("candleStickChart.top") })} - {children.bottom.propertyView({ label: trans("candleStickChart.bottom") })} - {children.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.axisFlag.propertyView({label: trans("candleStickChart.axisFlag")})} - {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility")})} + {children.echartsTitle.propertyView({ label: trans("candleStickChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.dataZoomVisibility.getView() && children.dataZoomHeight.propertyView({ label: trans("candleStickChart.dataZoomHeight"), tooltip: trans("candleStickChart.dataZoomHeightTooltip") })} + {children.dataZoomVisibility.getView() && children.dataZoomBottom.propertyView({ label: trans("candleStickChart.dataZoomBottom"), tooltip: trans("candleStickChart.dataZoomBottomTooltip") })} + {children.axisFlagVisibility.propertyView({label: trans("candleStickChart.axisFlagVisibility"), tooltip: trans("candleStickChart.axisFlagVisibilityTooltip") })} + {children.dataZoomVisibility.propertyView({label: trans("candleStickChart.dataZoomVisibility"), tooltip: trans("candleStickChart.dataZoomVisibilityTooltip") })}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index f9158eefc..2ec3a236b 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -172,7 +172,7 @@ export function getEchartsConfig( yAxis: { type: "value", scale: true, - splitArea: props?.axisFlag && { + splitArea: props?.axisFlagVisibility && { show: true, areaStyle: { color: props?.echartsOption?.axisColor @@ -185,7 +185,7 @@ export function getEchartsConfig( xAxis: props?.echartsOption && { type: 'category', data: props?.echartsOption.xAxis.data, - splitArea: !props?.axisFlag && { + splitArea: !props?.axisFlagVisibility && { show: true, areaStyle: { // Provide multiple colors to alternate through @@ -213,7 +213,6 @@ export function getEchartsConfig( data: props?.echartsOption.data, itemStyle: { ...props?.echartsOption.itemStyle, - borderColor: props?.chartStyle?.chartBorderColor || theme?.chartStyle?.borderColor, borderWidth: props?.chartStyle?.chartBorderWidth || theme?.chartStyle?.borderWidth, borderType: props?.chartStyle?.chartBorderStyle || theme?.chartStyle?.borderType, borderRadius: Number(props?.chartStyle?.chartBorderRadius || theme?.chartStyle?.borderRadius), diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 1442ea995..0c70032d4 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -195,7 +195,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], 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 00986628c..08d50d1cc 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -54,7 +54,7 @@ export const en = { tooltip: 'Tooltip', legendVisibility: 'Legend Visibility', dataZoomVisibility: 'Data Zoom Visibility', - axisFlag: 'Axis Flag', + axisFlagVisibility: 'Axis Flag', left: 'Left', defaultLeft:'10', right: 'Right', @@ -66,7 +66,12 @@ export const en = { defaultDataZoomBottom: '20', dataZoomBottom: 'Data Zoom Bottom', defaultDataZoomHeight: '15', - dataZoomHeight: 'Data Zoom Height' + dataZoomHeight: 'Data Zoom Height', + axisFlagVisibilityTooltip: "Divide the area Vertically/horizontally.", + dataZoomVisibilityTooltip: "Show or hide the DataZoom of the Chart.", + dataZoomHeightTooltip: "Select the Height length of DataZoom.", + dataZoomBottomTooltip: "Select the Bottom length of DataZoom." + }, sankeyChart: { sankeyType: 'Sankey Chart Type', @@ -196,6 +201,8 @@ export const en = { positionChart_x_Tooltip: "Change the Horizontal position of the Chart.", positionChart_y_Tooltip: "Change the Vertical position of the Chart.", topTooltip: "Change the top length of the Chart.", + rightTooltip: "Change the right length of the Chart.", + leftTooltip: "Change the left length of the Chart.", bottomTooltip: "Change the bottom length of the Chart.", widthTooltip: "Change the width of the Chart.", radiusTooltip: "Set the Radius value of the Chart.", diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 4d6e31e7e..518aa6617 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -2004,6 +2004,15 @@ export const EchartDefaultChartStyle = [ CHARTBORDERWIDTH, ] as const; +export const EchartCandleStickChartStyle = [ + getBackground("primarySurface"), + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + export const EchartDefaultDetailStyle = [ CHARTBACKGROUNDCOLOR, DETAILSIZE, From 31ddc527e67d8408e8ee14ec804d4e543e6897fc Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 3 Jan 2025 15:17:46 -0500 Subject: [PATCH 03/16] Added control fields and style fields on Graph charts. --- .../candleStickChartUtils.ts | 3 + .../comps/graphChartComp/graphChartComp.tsx | 3 +- .../graphChartComp/graphChartConstants.tsx | 21 +++++- .../graphChartComp/graphChartPropertyView.tsx | 23 +++++-- .../comps/graphChartComp/graphChartUtils.ts | 68 ++++++++++++------- .../src/i18n/comps/locales/en.ts | 25 +++++++ .../src/i18n/comps/locales/enObj.tsx | 4 ++ .../lowcoder-comps/src/util/styleWrapper.tsx | 14 ++++ 8 files changed, 127 insertions(+), 34 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 2ec3a236b..14b422668 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -144,6 +144,9 @@ export function getEchartsConfig( text: props.echartsTitle, top: props.echartsTitleVerticalConfig.top, left:props.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } }, backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), color: props?.echartsOption.data?.map(data => data.color), diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx index bbacc0995..b574db7d2 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartComp.tsx @@ -146,7 +146,7 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); @@ -176,7 +176,6 @@ GraphChartTmpComp = withViewFn(GraphChartTmpComp, (comp) => { lazyUpdate opts={{ locale: getEchartsLocale() }} option={option} - theme={mode !== 'map' ? themeConfig : undefined} mode={mode} /> diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx index ae000e6f7..ec832ac03 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx @@ -16,8 +16,11 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle, } from "lowcoder-sdk"; + import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; import { XAxisConfig, YAxisConfig } from "../chartComp/chartConfigs/cartesianAxisConfig"; @@ -27,6 +30,8 @@ import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; +import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; @@ -252,15 +257,25 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("graphChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + arrowSize:withDefault(NumberControl,trans('graphChart.defaultArrowSize')), + pointSize:withDefault(NumberControl,trans('graphChart.defaultPointSize')), + repulsion:withDefault(NumberControl,trans('graphChart.defaultRepulsion')), + gravity:withDefault(NumberControl,trans('graphChart.defaultGravity')), + lineLength:withDefault(NumberControl,trans('graphChart.defaultLineLength')), + lineWidth:withDefault(NumberControl,trans('graphChart.defaultLineWidth')), + curveness:withDefault(NumberControl,trans('graphChart.defaultCurveness')), tooltip: withDefault(BoolControl, true), + arrowFlag: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } if (EchartsStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx index ba9ebbebc..7ace3ab69 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartPropertyView.tsx @@ -31,14 +31,29 @@ export function graphChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("graphChart.title") })} - {children.tooltip.propertyView({label: trans("graphChart.tooltip")})} + {children.echartsTitle.propertyView({ label: trans("graphChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + + {children.arrowFlag.getView() && children.arrowSize.propertyView({ label: trans("graphChart.arrowSize"), tooltip: trans("graphChart.arrowSizeTooltip") })} + {children.pointSize.propertyView({ label: trans("graphChart.pointSize"), tooltip: trans("graphChart.pointSizeTooltip") })} + {children.repulsion.propertyView({ label: trans("graphChart.repulsion"), tooltip: trans("graphChart.repulsionTooltip") })} + {children.gravity.propertyView({ label: trans("graphChart.gravity"), tooltip: trans("graphChart.gravityTooltip") })} + {children.lineLength.propertyView({ label: trans("graphChart.lineLength"), tooltip: trans("graphChart.lineLengthTooltip") })} + {children.lineWidth.propertyView({ label: trans("graphChart.lineWidth"), tooltip: trans("graphChart.lineWidthTooltip") })} + {children.curveness.propertyView({ label: trans("graphChart.curveness"), tooltip: trans("graphChart.curvenessTooltip") })} + + {children.arrowFlag.propertyView({label: trans("graphChart.arrowFlag"), tooltip: trans("graphChart.arrowFlagTooltip") })} + {children.tooltip.propertyView({label: trans("graphChart.tooltip"), tooltip: trans("graphChart.tooltipTooltip") })}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts index a75b6a8c2..a352b59fd 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import parseBackground from "../../util/gradientBackgroundColor"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; export function transformData( originData: JSONObject[], @@ -134,32 +136,48 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&& { - "trigger": "item" - }, - 'series': [ - { - "type": "graph", - "layout": "force", - "force": { - "repulsion": 100, - "gravity": 0.1, - "edgeLength": 100 - }, - 'categories': props.echartsOption.categories, - 'links': props.echartsOption.links, - 'nodes': props.echartsOption.nodes, + let opt= props?.echartsOption && { + title: { + text: props.echartsTitle, + top: props.echartsTitleVerticalConfig.top, + left:props.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) } - ] -} + }, + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + "tooltip": props.tooltip&& { + "trigger": "item" + }, + 'series': [ + { + + "type": "graph", + "layout": "force", + 'categories': props.echartsOption.categories, + 'links': props.echartsOption.links, + "force": { + "repulsion": props.repulsion, + "gravity": props?.gravity, + "edgeLength": props?.lineLength + }, + edgeSymbol: ['', props?.arrowFlag ? 'arrow' : ''], + edgeSymbolSize: [0, props?.arrowSize], + symbolSize: props?.pointSize, + lineStyle: { + color: props.echartsOption?.color?.lineColor || "#00000033", + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), + width: props?.lineWidth || 1, + curveness: props?.curveness + }, + 'nodes': props.echartsOption.nodes, + itemStyle: { + "color": props.echartsOption?.color?.pointColor || "#0000ff", + ...chartStyleWrapper(props?.chartStyle,theme?.chartStyle), + }, + } + ], + } return props.echartsOption ? opt : {}; } 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 08d50d1cc..cd2ccf9ad 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -34,6 +34,31 @@ export const en = { title: 'Title', defaultTitle: 'Graph Chart', tooltip: 'Tooltip', + arrowSize: "Arrow Size", + pointSize: "Point Size", + repulsion: "Repulsion", + gravity: "Gravity", + lineLength: "Line Length", + curveness: "Curveness", + lineWidth: "Line Width", + arrowFlag: "Arrow Flag", + arrowSizeTooltip: "Select the Arrow Size of the Chart.", + pointSizeTooltip: "Select the Point Size of the Chart.", + repulsionTooltip: "Select the Repulsion of the Chart.", + gravityTooltip: "Select the Gravity of the Chart.", + lineLengthTooltip: "Select the Line length of the Chart.", + lineWidthTooltip: "Select the Line width of the Chart.", + arrowFlagTooltip: "Show or hide the Arrow of the Chart.", + tooltipTooltip: "Show or hide the Tooltip of the Chart.", + curvenessTooltip: "defaultCurveness", + defaultArrowSize: "10", + defaultPointSize: "15", + defaultRepulsion: "100", + defaultGravity: "0.1", + defaultLineLength: "100", + defaultLineWidth: "2", + defaultCurveness: "0", + }, heatmapChart: { heatmapType: 'Heatmap Chart Type', 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 22a400072..8d1410916 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -385,6 +385,10 @@ export const enObj: I18nObjects = { ] }, defaultGraphChartOption: { + color:{ + pointColor: "#0000ff", + lineColor: "#00000033" + }, categories: [ {name: "Nodes"}, {name: "Edges"} diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx index f3f57b600..a1bf4bc56 100644 --- a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -18,4 +18,18 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0] || 24, "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1] || 12, } +} + +export const chartStyleWrapper = (styleContainer: any, themeContainer: any, detailBorderWidth = 0) => { + + return { + "shadowColor": styleContainer?.chartShadowColor || themeContainer?.shadowColor, + "shadowBlur": styleContainer?.chartBoxShadow?.split('px')[0] || themeContainer?.boxShadow?.split('px')[0], + "shadowOffsetX": styleContainer?.chartBoxShadow?.split('px')[1] || themeContainer?.boxShadow?.split('px')[1], + "shadowOffsetY": 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), + } } \ No newline at end of file From 319a002b1d9a6a0f2a71a4e4d40dd12c622a16d2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Mon, 6 Jan 2025 13:33:19 -0500 Subject: [PATCH 04/16] Added control fields and style fields to heatmap charts. --- .../funnelChartComp/funnelChartConstants.tsx | 4 +- .../funnelChartPropertyView.tsx | 3 +- .../comps/funnelChartComp/funnelChartUtils.ts | 2 +- .../heatmapChartComp/heatmapChartComp.tsx | 2 +- .../heatmapChartConstants.tsx | 32 +++- .../heatmapChartPropertyView.tsx | 38 +++- .../heatmapChartComp/heatmapChartUtils.ts | 167 ++++++++++-------- .../src/i18n/comps/locales/en.ts | 27 ++- .../src/i18n/comps/locales/enObj.tsx | 55 +++--- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 3 +- 11 files changed, 217 insertions(+), 117 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx index f2fd90ed1..e31151adf 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx @@ -37,6 +37,7 @@ import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleCon import { EchartsSortingConfig } from "../chartComp/chartConfigs/echartsSortingConfig"; import { EchartsLegendAlignConfig } from "../chartComp/chartConfigs/echartsLegendAlignConfig"; import { EchartsLegendOrientConfig } from "../chartComp/chartConfigs/echartsLegendOrientConfig"; +import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; export const ChartTypeOptions = [ { @@ -256,10 +257,11 @@ export const chartUiModeChildren = { let chartJsonModeChildren: any = { echartsOption: jsonControl(toObject, i18nObjs.defaultFunnelChartOption), echartsTitle: withDefault(StringControl, trans("funnelChart.defaultTitle")), - echartsLegendConfig: EchartsLegendConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, echartsSortingConfig: EchartsSortingConfig, echartsLabelConfig: EchartsLabelConfig, echartsFunnelAlignConfig: EchartsFunnelAlignConfig, + echartsLegendConfig: EchartsLegendConfig, echartsLegendOrientConfig: EchartsLegendOrientConfig, echartsLegendAlignConfig: EchartsLegendAlignConfig, echartsConfig: EchartsOptionComp, diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx index 346a48260..55b3dc9af 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartPropertyView.tsx @@ -32,8 +32,9 @@ export function funnelChartPropertyView( ), })} {children.echartsTitleConfig.getPropertyView()} - {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} {children.echartsSortingConfig.getPropertyView()} {children.label.getView()&& children.echartsLabelConfig.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts index 0c70032d4..827a510b5 100644 --- a/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts @@ -140,7 +140,7 @@ export function getEchartsConfig( let opt={ "title": { "text": props.echartsTitle, - 'top': "top", + "top": props.echartsTitleVerticalConfig.top, "left":props.echartsTitleConfig.top, "textStyle": { "fontFamily": props?.titleStyle?.chartFontFamily || theme?.titleStyle?.fontFamily, diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx index 43fdfc045..bb632f98c 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartComp.tsx @@ -145,7 +145,7 @@ HeatmapChartTmpComp = withViewFn(HeatmapChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx index 51ccd46da..9c93f0890 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartConstants.tsx @@ -16,7 +16,8 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultTextStyle, + EchartDefaultChartStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -25,12 +26,16 @@ import { LegendConfig } from "../chartComp/chartConfigs/legendConfig"; import { EchartsLegendConfig } from "../chartComp/chartConfigs/echartsLegendConfig"; import { EchartsLabelConfig } from "../chartComp/chartConfigs/echartsLabelConfig"; import { LineChartConfig } from "../chartComp/chartConfigs/lineChartConfig"; +import { EchartsTitleVerticalConfig } from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import { EchartsTitleConfig } from "comps/chartComp/chartConfigs/echartsTitleConfig"; import { PieChartConfig } from "../chartComp/chartConfigs/pieChartConfig"; import { ScatterChartConfig } from "../chartComp/chartConfigs/scatterChartConfig"; import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { HeatmapChartConfig } from "comps/chartComp/chartConfigs/heatmapChartConfig"; +import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig"; +import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig"; export const ChartTypeOptions = [ { @@ -252,15 +257,34 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("heatmapChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, echartsConfig: EchartsOptionComp, // style: styleControl(EchartsStyle, 'style'), + + left:withDefault(NumberControl,trans('heatmapChart.defaultLeft')), + right:withDefault(NumberControl,trans('heatmapChart.defaultRight')), + top:withDefault(NumberControl,trans('heatmapChart.defaultTop')), + bottom:withDefault(NumberControl,trans('heatmapChart.defaultBottom')), + min:withDefault(NumberControl,trans('heatmapChart.defaultMin')), + max:withDefault(NumberControl,trans('heatmapChart.defaultMax')), + tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), + xAxisVisibility: withDefault(BoolControl, true), + yAxisVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'), + xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxisStyle'), + yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'), + visualMapStyle: styleControl(EchartDefaultTextStyle, 'visualMapStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx index c7d350bfc..6884b038b 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartPropertyView.tsx @@ -31,14 +31,44 @@ export function heatmapChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("heatmapChart.title") })} - {children.tooltip.propertyView({label: trans("heatmapChart.tooltip")})} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.echartsLegendAlignConfig.getPropertyView()} + {children.echartsLegendConfig.getPropertyView()} + {children.echartsLegendOrientConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("heatmapChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.left.propertyView({ label: trans("heatmapChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("heatmapChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("heatmapChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("heatmapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.min.propertyView({ label: trans("heatmapChart.min"), tooltip: trans("echarts.minTooltip") })} + {children.max.propertyView({ label: trans("heatmapChart.max"), tooltip: trans("echarts.maxTooltip") })} + + {children.xAxisVisibility.propertyView({label: trans("heatmapChart.xAxisVisibility"), tooltip: trans("heatmapChart.xAxisVisibilityTooltip")})} + {children.yAxisVisibility.propertyView({label: trans("heatmapChart.yAxisVisibility"), tooltip: trans("heatmapChart.yAxisVisibilityTooltip")})} + {children.labelVisibility.propertyView({label: trans("heatmapChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})} + {children.tooltip.propertyView({label: trans("heatmapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.labelStyle?.getPropertyView()} +
+
+ {children.xAxisStyle?.getPropertyView()} +
+
+ {children.yAxisStyle?.getPropertyView()} +
+
+ {children.visualMapStyle?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts index 43bd48e03..5618ba0b6 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -65,29 +67,29 @@ export function isAxisChart(type: CharOptionCompType) { } export function getSeriesConfig(props: EchartsConfigProps) { - const visibleSeries = props.series.filter((s) => !s.getView().hide); + const visibleSeries = props?.series.filter((s) => !s.getView().hide); const seriesLength = visibleSeries.length; return visibleSeries.map((s, index) => { - if (isAxisChart(props.chartConfig.type)) { + if (isAxisChart(props?.chartConfig.type)) { let encodeX: string, encodeY: string; - const horizontalX = props.xAxisDirection === "horizontal"; - let itemStyle = props.chartConfig.itemStyle; + const horizontalX = props?.xAxisDirection === "horizontal"; + let itemStyle = props?.chartConfig.itemStyle; // FIXME: need refactor... chartConfig returns a function with paramters - if (props.chartConfig.type === "bar") { + if (props?.chartConfig.type === "bar") { // barChart's border radius, depend on x-axis direction and stack state const borderRadius = horizontalX ? [2, 2, 0, 0] : [0, 2, 2, 0]; - if (props.chartConfig.stack && index === visibleSeries.length - 1) { + if (props?.chartConfig.stack && index === visibleSeries.length - 1) { itemStyle = { ...itemStyle, borderRadius: borderRadius }; - } else if (!props.chartConfig.stack) { + } else if (!props?.chartConfig.stack) { itemStyle = { ...itemStyle, borderRadius: borderRadius }; } } if (horizontalX) { - encodeX = props.xAxisKey; + encodeX = props?.xAxisKey; encodeY = s.getView().columnName; } else { encodeX = s.getView().columnName; - encodeY = props.xAxisKey; + encodeY = props?.xAxisKey; } return { name: s.getView().seriesName, @@ -102,24 +104,24 @@ export function getSeriesConfig(props: EchartsConfigProps) { y: encodeY, }, // each type of chart's config - ...props.chartConfig, + ...props?.chartConfig, itemStyle: itemStyle, label: { - ...props.chartConfig.label, + ...props?.chartConfig.label, ...(!horizontalX && { position: "outside" }), }, }; } else { // pie - const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props.chartConfig); + const radiusAndCenter = getPieRadiusAndCenter(seriesLength, index, props?.chartConfig); return { - ...props.chartConfig, + ...props?.chartConfig, radius: radiusAndCenter.radius, center: radiusAndCenter.center, name: s.getView().seriesName, selectedMode: "single", encode: { - itemName: props.xAxisKey, + itemName: props?.xAxisKey, value: s.getView().columnName, }, }; @@ -127,61 +129,86 @@ export function getSeriesConfig(props: EchartsConfigProps) { }); } -// https://echarts.apache.org/en/option.html export function getEchartsConfig( props: EchartsConfigProps, chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - if (props.mode === "json") { - let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "position": "top" - }, - "grid": { - "height": "50%", - "top": "10%" - }, - "visualMap": { - "min": 0, - "max": 100, - "calculable": true, - "orient": "horizontal", - "left": "center", - "bottom": "15%" - }, - "legend": { - "data": ["Heatmap"], - "left": "left" - }, - 'xAxis': { - "type": "category", - 'data':props.echartsOption.xAxis.data + if (props?.mode === "json") { + let opt= { + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + tooltip: props?.tooltip && { + position: "top" + }, + grid: { + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + }, + visualMap: { + min: props?.min, + max: props?.max, + calculable: true, + top: props?.echartsLegendConfig.top, + left: props?.echartsLegendAlignConfig.left, + orient: props?.echartsLegendOrientConfig.orient, + bottom: "5%", + inRange: { + color: props?.echartsOption?.color || ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8'] + }, + textStyle: { + ...styleWrapper(props?.visualMapStyle, theme?.visualMapStyle, 13), + } + }, + xAxis: { + type: "category", + data: props?.echartsOption && props?.echartsOption.xAxis, + axisLabel: { + ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 13), + }, + splitArea: { + show: props?.xAxisVisibility + } }, - 'yAxis': { - "type": "category", - data: props.echartsOption.yAxis.data + yAxis: { + type: "category", + data: props?.echartsOption && props?.echartsOption.yAxis, + axisLabel: { + ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 13), + }, + splitArea: { + show: props?.yAxisVisibility + } }, - 'series': [ + series: [ { - 'name': 'Heatmap', - 'type': 'heatmap', - 'data':props.echartsOption.data - } - ] -} - return props.echartsOption ? opt : {}; + name: 'Heatmap', + type: 'heatmap', + data: props?.echartsOption && props?.echartsOption.data, + label: { + show: props?.labelVisibility, + ...styleWrapper(props?.labelStyle, theme?.labelStyle, 12), + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + } + } + ] + } + return props?.echartsOption ? opt : {}; } - if(props.mode === "map") { + if(props?.mode === "map") { const { mapZoomLevel, mapCenterLat, @@ -203,41 +230,41 @@ export function getEchartsConfig( } } // axisChart - const axisChart = isAxisChart(props.chartConfig.type); + const axisChart = isAxisChart(props?.chartConfig.type); const gridPos = { left: 20, - right: props.legendConfig.left === "right" ? "10%" : 20, + right: props?.legendConfig.left === "right" ? "10%" : 20, top: 50, bottom: 35, }; let config: EChartsOptionWithMap = { - title: { text: props.title, left: "center" }, + title: { text: props?.title, left: "center" }, tooltip: { confine: true, trigger: axisChart ? "axis" : "item", }, - legend: props.legendConfig, + legend: props?.legendConfig, grid: { ...gridPos, containLabel: true, }, }; - if (props.data.length <= 0) { + if (props?.data.length <= 0) { // no data return { ...config, ...(axisChart ? noDataAxisConfig : noDataPieChartConfig), }; } - const yAxisConfig = props.yConfig(); - const seriesColumnNames = props.series + const yAxisConfig = props?.yConfig(); + const seriesColumnNames = props?.series .filter((s) => !s.getView().hide) .map((s) => s.getView().columnName); // y-axis is category and time, data doesn't need to aggregate const transformedData = yAxisConfig.type === "category" || yAxisConfig.type === "time" - ? props.data - : transformData(props.data, props.xAxisKey, seriesColumnNames); + ? props?.data + : transformData(props?.data, props?.xAxisKey, seriesColumnNames); config = { ...config, dataset: [ @@ -265,10 +292,10 @@ export function getEchartsConfig( }; } const finalXyConfig = calcXYConfig( - props.xConfig, + props?.xConfig, yAxisConfig, - props.xAxisDirection, - transformedData.map((d) => d[props.xAxisKey]), + props?.xAxisDirection, + transformedData.map((d) => d[props?.xAxisKey]), chartRealSize ); config = { 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 cd2ccf9ad..6c683acda 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -41,7 +41,7 @@ export const en = { lineLength: "Line Length", curveness: "Curveness", lineWidth: "Line Width", - arrowFlag: "Arrow Flag", + arrowFlag: "Arrow", arrowSizeTooltip: "Select the Arrow Size of the Chart.", pointSizeTooltip: "Select the Point Size of the Chart.", repulsionTooltip: "Select the Repulsion of the Chart.", @@ -63,8 +63,25 @@ export const en = { heatmapChart: { heatmapType: 'Heatmap Chart Type', title: 'Title', + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'30', defaultTitle: 'Heatmap Chart', tooltip: 'Tooltip', + min: 'Min', + defaultMin:'0', + max: 'Max', + defaultMax:'100', + xAxisVisibility: 'X-Axis', + yAxisVisibility: 'Y-Axis', + labelVisibility: "Label", + xAxisVisibilityTooltip: 'Divide the area Horizontally.', + yAxisVisibilityTooltip: 'Divide the area Vertically.' }, radarChart: { radarType: 'Radar Chart Type', @@ -77,9 +94,9 @@ export const en = { title: 'Title', defaultTitle: 'CandleStick Chart', tooltip: 'Tooltip', - legendVisibility: 'Legend Visibility', - dataZoomVisibility: 'Data Zoom Visibility', - axisFlagVisibility: 'Axis Flag', + legendVisibility: 'Legend', + dataZoomVisibility: 'Data Zoom', + axisFlagVisibility: 'Axis', left: 'Left', defaultLeft:'10', right: 'Right', @@ -255,7 +272,7 @@ export const en = { 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", - + tooltipTooltip: "Show or hide the Tooltip of the Chart.", }, 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 8d1410916..88de4d4d7 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -354,35 +354,32 @@ export const enObj: I18nObjects = { ] }, defaultHeatmapChartOption: { - xAxis: { - "data": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"] - }, - yAxis: { - "data": ["Morning", "Afternoon", "Evening"] - }, - data: [ - [0, 0, 10], - [0, 1, 20], - [0, 2, 30], - [1, 0, 40], - [1, 1, 50], - [1, 2, 60], - [2, 0, 70], - [2, 1, 80], - [2, 2, 90], - [3, 0, 100], - [3, 1, 90], - [3, 2, 80], - [4, 0, 70], - [4, 1, 60], - [4, 2, 50], - [5, 0, 40], - [5, 1, 30], - [5, 2, 20], - [6, 0, 10], - [6, 1, 0], - [6, 2, 10] - ] + xAxis: ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"], + yAxis: ["Morning", "Afternoon", "Evening"], + color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8'], + data: [ + [0, 0, 10], + [0, 1, 20], + [0, 2, 30], + [1, 0, 40], + [1, 1, 50], + [1, 2, 60], + [2, 0, 70], + [2, 1, 80], + [2, 2, 90], + [3, 0, 100], + [3, 1, 90], + [3, 2, 80], + [4, 0, 70], + [4, 1, 60], + [4, 2, 50], + [5, 0, 40], + [5, 1, 30], + [5, 2, 20], + [6, 0, 10], + [6, 1, 0], + [6, 2, 10] + ] }, defaultGraphChartOption: { color:{ diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 036b79768..45b15f494 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -195,4 +195,5 @@ export const sectionNames = { axisLabelStyleOutline:trans("prop.axisLabelStyleOutline"), xAxisStyle:trans("prop.xAxisStyle"), yAxisStyle:trans("prop.yAxisStyle"), + visualMapStyle:trans("prop.visualMapStyle") }; 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 fb477073b..baa5424d7 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -47,7 +47,8 @@ export const en = { axisLabelStyle: "Axis Label Style", axisLabelStyleOutline: "Outline Axis Label Style", xAxisStyle: "X-Axis Style", - yAxisStyle: "Y-Axis Style" + yAxisStyle: "Y-Axis Style", + visualMapStyle: "Visual Map Style" }, passwordInput: { label: "Password:", From 5e37980ff1f42597ab0de35ae2ff9bbee9caf4ba Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 7 Jan 2025 03:46:21 -0500 Subject: [PATCH 05/16] Added control fields and style fields to radar charts --- .../chartConfigs/echartsLegendConfig.tsx | 5 + .../heatmapChartComp/heatmapChartUtils.ts | 2 +- .../comps/radarChartComp/radarChartComp.tsx | 2 +- .../radarChartComp/radarChartConstants.tsx | 28 ++++- .../radarChartComp/radarChartPropertyView.tsx | 37 ++++++- .../comps/radarChartComp/radarChartUtils.ts | 101 +++++++++++++----- .../src/i18n/comps/locales/en.ts | 15 +++ .../src/i18n/comps/locales/enObj.tsx | 39 ++++--- .../lowcoder-comps/src/util/styleWrapper.tsx | 1 + .../comps/controls/styleControlConstants.tsx | 16 +++ 10 files changed, 191 insertions(+), 55 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx index 21dea46f3..852de74c3 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConfigs/echartsLegendConfig.tsx @@ -1,6 +1,7 @@ import { AlignBottom, AlignTop, + AlignClose, dropdownControl, MultiCompBuilder, } from "lowcoder-sdk"; @@ -12,6 +13,10 @@ const LegendPositionOptions = [ label: , value: "bottom", }, + { + label: , + value: "center", + }, { label: , value: "top", diff --git a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts index 5618ba0b6..b15388b57 100644 --- a/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/heatmapChartComp/heatmapChartUtils.ts @@ -144,7 +144,7 @@ export function getEchartsConfig( ...styleWrapper(props?.titleStyle, theme?.titleStyle) } }, - "backgroundColor": parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), tooltip: props?.tooltip && { position: "top" }, diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx index 949828a76..bedfd861f 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartComp.tsx @@ -145,7 +145,7 @@ RadarChartTmpComp = withViewFn(RadarChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx index 44d2631b8..55537d21c 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultChartStyle, + EchartDefaultTextStyle, + RadarLabelStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +33,10 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { RadarChartConfig } from "comps/chartComp/chartConfigs/radarChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; +import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig"; +import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig"; export const ChartTypeOptions = [ { @@ -252,15 +258,31 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("radarChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, + + position_x:withDefault(NumberControl,trans('radarChart.defaultPosition_X')), + position_y:withDefault(NumberControl,trans('radarChart.defaultPosition_Y')), + radius:withDefault(NumberControl,trans('radarChart.defaultRadius')), + splitNumber:withDefault(NumberControl,trans('radarChart.defaultSplitNumber')), + startAngle:withDefault(NumberControl,trans('radarChart.defaultStartAngle')), // style: styleControl(EchartsStyle, 'style'), + areaFlag:withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), + indicatorVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx index 9a095b585..bfa20dc57 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartPropertyView.tsx @@ -31,15 +31,44 @@ export function radarChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("radarChart.title") })} - {children.tooltip.propertyView({label: trans("radarChart.tooltip")})} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("radarChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.radius.propertyView({ label: trans("radarChart.radius"), tooltip: trans("echarts.radiusTooltip") })} + {children.startAngle.propertyView({ label: trans("radarChart.startAngle"), tooltip: trans("echarts.startAngleTooltip") })} + {children.splitNumber.propertyView({ label: trans("radarChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.position_x.propertyView({ label: trans("radarChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("radarChart.position_y"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + + {children.areaFlag.propertyView({label: trans("radarChart.areaFlag"), tooltip: trans("radarChart.areaFlagTooltip")})} + {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})} + {children.indicatorVisibility.propertyView({label: trans("radarChart.indicatorVisibility"), tooltip: trans("radarChart.indicatorVisibilityTooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()}
+ { + children.indicatorVisibility.getView() ? +
+ {children.detailStyle?.getPropertyView()} +
: <> + } + { + children.legendVisibility.getView() ? +
+ {children.legendStyle?.getPropertyView()} +
: <> + }
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index 904910a35..a509a89f4 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -134,33 +136,82 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { + console.log(props?.detailStyle?.detailSize?.split('px')[0] || theme?.detailStyle?.detailSize.split('px')[0] || 3, + props?.detailStyle?.detailSize?.split('px')[1] || theme?.detailStyle?.detailSize.split('px')[1] || 3) let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": { - "trigger": "axis", - "formatter": function(params) { - let tooltipText = params[0].name + '
'; - params.forEach(function(item) { - tooltipText += item.seriesName + ': ' + item.value + '
'; - }); - return tooltipText; - } - }, - "radar": [ - { - "indicator": props.echartsOption.indicator, - "center": ["50%", "50%"], - "radius": "60%" - } + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + legend: props.legendVisibility && { + top: props.echartsLegendConfig.top, + left: props.echartsLegendAlignConfig.left, + orient: props.echartsLegendOrientConfig.orient, + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15), + } + }, + backgroundColor: parseBackground( + props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" + ), + color: props.echartsOption.data?.map(data => data.color), + tooltip: { + trigger: "axis", + formatter: function (params) { + let tooltipText = params[0].name + '
'; + params.forEach(function (item) { + tooltipText += item.seriesName + ': ' + item.value + '
'; + }); + return tooltipText; + } + }, + radar: [ + { + indicator: props.echartsOption.indicator, + center: [`${props?.position_x}%`, `${props?.position_y}%`], + startAngle: props?.startAngle, + endAngle: props?.endAngle, + splitNumber: props?.splitNumber, + radius: `${props.radius}%`, + shape: props?.areaFlag ? 'circle' : 'line', + axisName: { + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 13), + show: props?.indicatorVisibility, + }, + splitArea: { + areaStyle: { + color: props?.echartsOption?.color, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + } + }, + } + ], + series: props?.echartsOption && { + data: props?.echartsOption?.series && [ + ...props?.echartsOption?.series.map(item => ({ + ...item, + areaStyle: item.areaColor && { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.areaColor + }, + lineStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: item.lineColor, + width: item.lineWidth, + }, + symbolSize: item.pointSize, + itemStyle: { + color: item.pointColor + } + })) ], - "series": props.echartsOption.series.map(option=>{return {...option,type:'radar'}}) -} + type: "radar" + } + } return props.echartsOption ? opt : {}; } 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 6c683acda..37d9733d9 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -87,7 +87,21 @@ export const en = { radarType: 'Radar Chart Type', title: 'Title', defaultTitle: 'Radar Chart', + radius: 'Radius', + defaultRadius: '60', + defaultStartAngle: '90', + startAngle: 'Start Angle', + defaultSplitNumber: '5', + position_x: 'Position-X', + defaultPosition_X: '50', + position_y: 'Position-Y', + defaultPosition_Y: '50', + splitNumber: 'Split Number', tooltip: 'Tooltip', + areaFlag: 'Area Flag', + areaFlagTooltip: "Divide the area into a Line or a Circle.", + indicatorVisibility: "Indicator", + indicatorVisibilityTooltip: "Show or hide the Indicator of the Chart.", }, candleStickChart: { candleStickType: 'CandleStick Chart Type', @@ -223,6 +237,7 @@ export const en = { }, echarts: { + legendVisibility: 'Legend', defaultTitle: "Data Display", legendPosition: "Legend-Y", legendOrient: "Legend Orient", 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 88de4d4d7..d287b8852 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -325,32 +325,29 @@ export const enObj: I18nObjects = { } }, defaultRadarChartOption: { + color: ['#6ee1d5', '#a7dd85'], indicator: [ - { name: "Indicator 1", max: 100 }, - { name: "Indicator 2", max: 100 }, - { name: "Indicator 3", max: 100 }, - { name: "Indicator 4", max: 100 }, - { name: "Indicator 5", max: 100 } + { name: "Indicator 1", max: 100 }, + { name: "Indicator 2", max: 100 }, + { name: "Indicator 3", max: 100 }, + { name: "Indicator 4", max: 100 }, + { name: "Indicator 5", max: 100 }, + { name: "Indicator 6", max: 100 } ], series: [ - { - "name": "Data 1", - "data": [ - { - "value": [90, 80, 70, 60, 50], - "name": "Data 1" - } - ] + { + "name": "Data A", + "value": [90, 80, 70, 70, 80, 70], }, { - "name": "Data 2", - "data": [ - { - "value": [70, 60, 50, 40, 30], - "name": "Data 2" - } - ] - } + name: "Data B", + value: [60, 60, 40, 50, 50, 40], + areaColor: '#ff00ff77', + lineColor: '#ff00ff77', + lineWidth: 2, + pointSize: 8, + pointColor: "#ff00ff77", + } ] }, defaultHeatmapChartOption: { diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx index a1bf4bc56..aa06d5f99 100644 --- a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -17,6 +17,7 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo "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, + "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) } } diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 518aa6617..1b25ece39 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -2029,6 +2029,22 @@ export const EchartDefaultDetailStyle = [ CHARTBORDERWIDTH, ] as const; +export const RadarLabelStyle = [ + CHARTBACKGROUNDCOLOR, + PADDING, + CHARTTEXTCOLOR, + CHARTTEXTSIZE, + CHARTTEXTWEIGHT, + CHARTFONTFAMILY, + CHARTFONTSTYLE, + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + export const CalendarStyle = [ getBackground("primarySurface"), { From a1a817a16f50e28a4d02851ca2254a5f2f5852f7 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 7 Jan 2025 13:06:11 -0500 Subject: [PATCH 06/16] Added control fields and style fields to sankey charts --- .../graphChartComp/graphChartConstants.tsx | 2 +- .../comps/sankeyChartComp/sankeyChartComp.tsx | 2 +- .../sankeyChartComp/sankeyChartConstants.tsx | 30 +++++++++-- .../sankeyChartPropertyView.tsx | 36 +++++++++++-- .../comps/sankeyChartComp/sankeyChartUtils.ts | 53 +++++++++++++------ .../src/i18n/comps/locales/en.ts | 38 ++++++++++--- .../src/i18n/comps/locales/enObj.tsx | 19 +++---- .../lowcoder-comps/src/util/styleWrapper.tsx | 6 +-- .../src/components/Section.tsx | 1 + .../src/i18n/design/locales/en.ts | 1 + .../comps/controls/styleControlConstants.tsx | 10 ++++ 11 files changed, 152 insertions(+), 46 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx index ec832ac03..78ae01da4 100644 --- a/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/graphChartComp/graphChartConstants.tsx @@ -271,7 +271,7 @@ let chartJsonModeChildren: any = { arrowFlag: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx index c171e6b95..309498579 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartComp.tsx @@ -145,7 +145,7 @@ SankeyChartTmpComp = withViewFn(SankeyChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx index 681d119e6..e4f7538e6 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartConstants.tsx @@ -16,7 +16,10 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + SankeyLineStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle, + RadarLabelStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +34,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { SankeyChartConfig } from "../chartComp/chartConfigs/sankeyChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -252,15 +257,32 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("sankeyChart.defaultTitle")), echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + + left:withDefault(NumberControl,trans('sankeyChart.defaultLeft')), + right:withDefault(NumberControl,trans('sankeyChart.defaultRight')), + top:withDefault(NumberControl,trans('sankeyChart.defaultTop')), + bottom:withDefault(NumberControl,trans('sankeyChart.defaultBottom')), + curveness:withDefault(NumberControl,trans('sankeyChart.defaultCurveness')), + opacity:withDefault(NumberControl,trans('sankeyChart.defaultOpacity')), + nodeWidth:withDefault(NumberControl,trans('sankeyChart.defaultNodeWidth')), + nodeGap:withDefault(NumberControl,trans('sankeyChart.defaultNodeGap')), + + draggable: withDefault(BoolControl, true), + focus: withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (EchartDefaultChartStyle && EchartDefaultTextStyle && RadarLabelStyle && SankeyLineStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + lineStyle: styleControl(SankeyLineStyle, 'lineStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx index 4acfb77f8..4bed912d9 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx @@ -31,16 +31,44 @@ export function sankeyChartPropertyView( ), })} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsLabelConfig.getPropertyView()} - {children.echartsTitle.propertyView({ label: trans("sankeyChart.title") })} - {children.tooltip.propertyView({label: trans("sankeyChart.tooltip")})} + + {children.echartsTitle.propertyView({ label: trans("sankeyChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.left.propertyView({ label: trans("sankeyChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("sankeyChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("sankeyChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("sankeyChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.curveness.propertyView({ label: trans("sankeyChart.curveness"), tooltip: trans("sankeyChart.curvenessTooltip") })} + {children.opacity.propertyView({ label: trans("sankeyChart.opacity"), tooltip: trans("sankeyChart.opacityTooltip") })} + {children.nodeWidth.propertyView({ label: trans("sankeyChart.nodeWidth"), tooltip: trans("sankeyChart.nodeWidthTooltip") })} + {children.nodeGap.propertyView({ label: trans("sankeyChart.nodeGap"), tooltip: trans("sankeyChart.nodeGapTooltip") })} + + + {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})} + {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})} + {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} +
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.lineStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()}
+
+ {children.detailStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index 16b3679a1..d9435ebf2 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -135,13 +137,17 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground( + props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" + ), "tooltip": props.tooltip&&{ "trigger": "item", "formatter": "{a}
{b} : {c}%" @@ -150,19 +156,32 @@ export function getEchartsConfig( { "name": props.echartsConfig.type, "type": props.echartsConfig.type, - "left": "10%", - "top": 60, - "bottom": 60, - "width": "80%", - "min": 0, - "max": 100, - "gap": 2, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, "label": { "show": true, - "position": props.echartsLabelConfig.top + "position": props.echartsLabelConfig.top, + ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) + }, + "data": props.echartsOption?.data?.map(item => ({name: item.name, itemStyle: {color: item.color}})), + "links":props.echartsOption.links, + emphasis: { + focus: props?.focus ? 'adjacency' : undefined, + }, + lineStyle: { + ...chartStyleWrapper(props?.lineStyle, theme?.lineStyle), + color: 'gradient', + curveness: props?.curveness, + opacity: props?.opacity, + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), }, - "data": props.echartsOption.data, - "links":props.echartsOption.links + nodeWidth: props?.nodeWidth, + nodeGap: props?.nodeGap, + draggable: props?.draggable, } ] } 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 37d9733d9..3528e3dcd 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -42,15 +42,15 @@ export const en = { curveness: "Curveness", lineWidth: "Line Width", arrowFlag: "Arrow", - arrowSizeTooltip: "Select the Arrow Size of the Chart.", - pointSizeTooltip: "Select the Point Size of the Chart.", - repulsionTooltip: "Select the Repulsion of the Chart.", - gravityTooltip: "Select the Gravity of the Chart.", - lineLengthTooltip: "Select the Line length of the Chart.", - lineWidthTooltip: "Select the Line width of the Chart.", + arrowSizeTooltip: "Set the Arrow Size of the Chart.", + pointSizeTooltip: "Set the Point Size of the Chart.", + repulsionTooltip: "Set the Repulsion of the Chart.", + gravityTooltip: "Set the Gravity of the Chart.", + lineLengthTooltip: "Set the Line length of the Chart.", + lineWidthTooltip: "Set the Line width of the Chart.", arrowFlagTooltip: "Show or hide the Arrow of the Chart.", tooltipTooltip: "Show or hide the Tooltip of the Chart.", - curvenessTooltip: "defaultCurveness", + curvenessTooltip: "Set the Curveness of the Chart.", defaultArrowSize: "10", defaultPointSize: "15", defaultRepulsion: "100", @@ -134,6 +134,30 @@ export const en = { title: 'Title', defaultTitle: 'Sankey Chart', tooltip: 'Tooltip', + curveness: "Curveness", + defaultCurveness: "0.5", + curvenessTooltip: "Select the Curveness of the Chart.", + opacity: "Opacity", + defaultOpacity: "0.5", + opacityTooltip: "Set the opacity of the Chart.", + nodeWidth: "Node Width", + defaultNodeWidth: "20", + nodeWidthTooltip: "Change the width of the Node", + nodeGap: "Node Gap", + defaultNodeGap: "10", + nodeGapTooltip: "Set the gap value between the Lines.", + draggable: "Draggable", + draggableTooltip: "Set whether the node is draggable or not.", + focus: "Focus", + focusTooltip: "Set whether to enable or disable adjacency when an item is focused.", + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'10', }, funnelChart: { title: 'Title', 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 d287b8852..7542c6df3 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -292,17 +292,18 @@ export const enObj: I18nObjects = { }, defaultSankeyChartOption: { data: [ - {name: "Show"}, - {name: "Click"}, - {name: "Visit"}, - {name: "Query"}, - {name: "Buy"} + {name: "Category A", color: '#67F9D8'}, + {name: "Category B", color: '#FFE434'}, + {name: "Category C", color: '#56A3F1'}, + {name: "Category D", color: '#FF917C'}, + {name: "Category E", color: '#FF6347'} ], links: [ - {source: "Show", target: "Click", value: 80}, - {source: "Click", target: "Visit", value: 60}, - {source: "Visit", target: "Query", value: 40}, - {source: "Query", target: "Buy", value: 20} + { source: 'Category A', target: 'Category B', value: 10 }, + { source: 'Category A', target: 'Category C', value: 15 }, + { source: 'Category B', target: 'Category D', value: 25 }, + { source: 'Category C', target: 'Category D', value: 20 }, + { source: 'Category D', target: 'Category E', value: 30 } ] }, defaultCandleStickChartOption: { diff --git a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx index aa06d5f99..25349c5b9 100644 --- a/client/packages/lowcoder-comps/src/util/styleWrapper.tsx +++ b/client/packages/lowcoder-comps/src/util/styleWrapper.tsx @@ -15,9 +15,9 @@ export const styleWrapper = (styleContainer: any, themeContainer: any, defaultFo "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, - "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) + "width": styleContainer?.detailSize?.split('px')[0] || themeContainer?.detailSize.split('px')[0], + "height": styleContainer?.detailSize?.split('px')[1] || themeContainer?.detailSize.split('px')[1], + "padding": styleContainer?.padding?.split('px').filter(Boolean).map(Number) || themeContainer?.padding?.split('px').filter(Boolean).map(Number) || [0,0,0,0] } } diff --git a/client/packages/lowcoder-design/src/components/Section.tsx b/client/packages/lowcoder-design/src/components/Section.tsx index 45b15f494..1c654f637 100644 --- a/client/packages/lowcoder-design/src/components/Section.tsx +++ b/client/packages/lowcoder-design/src/components/Section.tsx @@ -188,6 +188,7 @@ export const sectionNames = { columnStyle:trans("prop.columnStyle"), modalStyle:trans("prop.modalStyle"), chartStyle:trans("prop.chartStyle"), + lineStyle:trans("prop.lineStyle"), titleStyle:trans("prop.titleStyle"), legendStyle:trans("prop.legendStyle"), detailStyle:trans("prop.detailStyle"), 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 baa5424d7..530df70cd 100644 --- a/client/packages/lowcoder-design/src/i18n/design/locales/en.ts +++ b/client/packages/lowcoder-design/src/i18n/design/locales/en.ts @@ -41,6 +41,7 @@ export const en = { columnStyle: 'Column Style', modalStyle: 'Modal Style', chartStyle: "Chart Style", + lineStyle: "Line Style", titleStyle: "Title Style", legendStyle: "Legend Style", detailStyle: "Detail Style", diff --git a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx index 1b25ece39..24589cf1b 100644 --- a/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx +++ b/client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx @@ -2013,9 +2013,19 @@ export const EchartCandleStickChartStyle = [ CHARTBORDERWIDTH, ] as const; +export const SankeyLineStyle = [ + CHARTSHADOWCOLOR, + CHARTBOXSHADOW, + CHARTBORDERCOLOR, + CHARTBORDERSTYLE, + CHARTBORDERRADIUS, + CHARTBORDERWIDTH, +] as const; + export const EchartDefaultDetailStyle = [ CHARTBACKGROUNDCOLOR, DETAILSIZE, + PADDING, CHARTTEXTCOLOR, CHARTTEXTSIZE, CHARTTEXTWEIGHT, From 113bd65f4dd51feb38c7cf1d6ec9983a3c3d36bf Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 7 Jan 2025 14:01:21 -0500 Subject: [PATCH 07/16] Added isColorString.ts, and fixed an issue that put incorrect color. --- .../sankeyChartPropertyView.tsx | 1 - .../comps/sankeyChartComp/sankeyChartUtils.ts | 78 ++++++++++--------- .../lowcoder-comps/src/util/isColorString.ts | 5 ++ 3 files changed, 48 insertions(+), 36 deletions(-) create mode 100644 client/packages/lowcoder-comps/src/util/isColorString.ts diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx index 4bed912d9..a25b6b751 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartPropertyView.tsx @@ -46,7 +46,6 @@ export function sankeyChartPropertyView( {children.nodeWidth.propertyView({ label: trans("sankeyChart.nodeWidth"), tooltip: trans("sankeyChart.nodeWidthTooltip") })} {children.nodeGap.propertyView({ label: trans("sankeyChart.nodeGap"), tooltip: trans("sankeyChart.nodeGapTooltip") })} - {children.draggable.propertyView({label: trans("sankeyChart.draggable"), tooltip: trans("sankeyChart.draggableTooltip")})} {children.focus.propertyView({label: trans("sankeyChart.focus"), tooltip: trans("sankeyChart.focusTooltip")})} {children.tooltip.propertyView({label: trans("sankeyChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index d9435ebf2..4290709de 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -14,6 +14,7 @@ import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; import parseBackground from "../../util/gradientBackgroundColor"; +import isColorString from "../../util/isColorString"; export function transformData( originData: JSONObject[], @@ -135,6 +136,10 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { + console.log(props.echartsOption && props?.echartsOption?.data?.map(item => ({ + name: item.name, + itemStyle: item.color && {color: item.color} + }))) if (props.mode === "json") { let opt={ title: { @@ -148,43 +153,46 @@ export function getEchartsConfig( backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" ), - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{a}
{b} : {c}%" - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - left: `${props?.left}%`, - right: `${props?.right}%`, - bottom: `${props?.bottom}%`, - top: `${props?.top}%`, - "label": { - "show": true, - "position": props.echartsLabelConfig.top, - ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) + tooltip: props.tooltip&&{ + trigger: "item", + formatter: "{a}
{b} : {c}%" }, - "data": props.echartsOption?.data?.map(item => ({name: item.name, itemStyle: {color: item.color}})), - "links":props.echartsOption.links, - emphasis: { - focus: props?.focus ? 'adjacency' : undefined, - }, - lineStyle: { - ...chartStyleWrapper(props?.lineStyle, theme?.lineStyle), - color: 'gradient', - curveness: props?.curveness, - opacity: props?.opacity, - }, - itemStyle: { - ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), - }, - nodeWidth: props?.nodeWidth, - nodeGap: props?.nodeGap, - draggable: props?.draggable, + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + label: { + show: true, + position: props.echartsLabelConfig.top, + ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) + }, + data: props.echartsOption && props?.echartsOption?.data?.map(item => ({ + name: item.name, + itemStyle: isColorString(item.color) && {color: item.color} + })), + links:props.echartsOption.links, + emphasis: { + focus: props?.focus ? 'adjacency' : undefined, + }, + lineStyle: { + ...chartStyleWrapper(props?.lineStyle, theme?.lineStyle), + color: 'gradient', + curveness: props?.curveness, + opacity: props?.opacity, + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + }, + nodeWidth: props?.nodeWidth, + nodeGap: props?.nodeGap, + draggable: props?.draggable, + } + ] } - ] -} return props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/util/isColorString.ts b/client/packages/lowcoder-comps/src/util/isColorString.ts new file mode 100644 index 000000000..cf1b60c2b --- /dev/null +++ b/client/packages/lowcoder-comps/src/util/isColorString.ts @@ -0,0 +1,5 @@ +export default function isColorString(color: string) { + const element = document.createElement("isColorString"); + element.style.backgroundColor = color; + return element.style.backgroundColor !== ''; +} \ No newline at end of file From 537ca0bc55ce9571141c14d9f667311c1717d063 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Tue, 7 Jan 2025 16:44:09 -0500 Subject: [PATCH 08/16] Added control fields and style fields to themeriver charts --- .../comps/radarChartComp/radarChartUtils.ts | 2 - .../comps/sankeyChartComp/sankeyChartUtils.ts | 4 -- .../themeriverChartComp.tsx | 2 +- .../themeriverChartConstants.tsx | 26 ++++++++++-- .../themeriverChartPropertyView.tsx | 34 +++++++++++++-- .../themeriverChartUtils.ts | 40 ++++++++++++++---- .../src/i18n/comps/locales/en.ts | 10 +++++ .../src/i18n/comps/locales/enObj.tsx | 42 +++++++++---------- 8 files changed, 116 insertions(+), 44 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts index a509a89f4..f3d15b7ec 100644 --- a/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/radarChartComp/radarChartUtils.ts @@ -136,8 +136,6 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - console.log(props?.detailStyle?.detailSize?.split('px')[0] || theme?.detailStyle?.detailSize.split('px')[0] || 3, - props?.detailStyle?.detailSize?.split('px')[1] || theme?.detailStyle?.detailSize.split('px')[1] || 3) let opt={ title: { text: props?.echartsTitle, diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index 4290709de..01ec003d7 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -136,10 +136,6 @@ export function getEchartsConfig( chartSize?: ChartSize, theme?: any, ): EChartsOptionWithMap { - console.log(props.echartsOption && props?.echartsOption?.data?.map(item => ({ - name: item.name, - itemStyle: item.color && {color: item.color} - }))) if (props.mode === "json") { let opt={ title: { diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx index b55346bdd..f2b3e237c 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartComp.tsx @@ -145,7 +145,7 @@ ThemeriverChartTmpComp = withViewFn(ThemeriverChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx index 8819fb2fb..6339c07d8 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartConstants.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"; @@ -31,6 +32,10 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { ThemeriverChartConfig } from "comps/chartComp/chartConfigs/themeriverChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; +import {EchartsLegendOrientConfig} from "../chartComp/chartConfigs/echartsLegendOrientConfig"; +import {EchartsLegendAlignConfig} from "../chartComp/chartConfigs/echartsLegendAlignConfig"; export const ChartTypeOptions = [ { @@ -253,14 +258,27 @@ let chartJsonModeChildren: any = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, + + splitNumber:withDefault(NumberControl,trans('themeriverChart.defaultSplitNumber')), + left:withDefault(NumberControl,trans('themeriverChart.defaultLeft')), + right:withDefault(NumberControl,trans('themeriverChart.defaultRight')), + top:withDefault(NumberControl,trans('themeriverChart.defaultTop')), + bottom:withDefault(NumberControl,trans('themeriverChart.defaultBottom')), + tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + axisStyle: styleControl(EchartDefaultTextStyle, 'axisStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx index 1825bc6ee..b3a815a67 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx @@ -31,15 +31,43 @@ export function themeriverChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("themeriverChart.title") })} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendAlignConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendConfig.getPropertyView()} + {children.legendVisibility.getView() && children.echartsLegendOrientConfig.getPropertyView()} + + {children.echartsTitle.propertyView({ label: trans("themeriverChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.splitNumber.propertyView({ label: trans("themeriverChart.splitNumber"), tooltip: trans("echarts.splitNumberTooltip") })} + {children.left.propertyView({ label: trans("themeriverChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("themeriverChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("themeriverChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("themeriverChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + + {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility")})} {children.tooltip.propertyView({label: trans("themeriverChart.tooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()}
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.axisStyle?.getPropertyView()} +
+ { + children.legendVisibility.getView() && +
+ {children.legendStyle?.getPropertyView()} +
+ } +
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index 8eb9f8629..d75e69a4f 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -135,12 +137,15 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), "tooltip": props.tooltip&&{ "trigger": "axis", "axisPointer": { @@ -152,11 +157,25 @@ export function getEchartsConfig( } } }, + legend: props.legendVisibility && { + "top": props.echartsLegendConfig.top, + "left": props.echartsLegendAlignConfig.left, + "orient": props.echartsLegendOrientConfig.orient, + data: Array.from(new Set(props.echartsOption.data.map(item => item[2]))), + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) + } + }, "singleAxis": { + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, "type": "time", - "bottom": 50, "axisTick": {}, - "axisLabel": {}, + "axisLabel": { + ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13) + }, "splitLine": {}, "axisPointer": { "animation": true, @@ -165,7 +184,7 @@ export function getEchartsConfig( "color": "#fff" } }, - "splitNumber": 30 + "splitNumber": props?.splitNumber }, "series": [ { @@ -176,6 +195,9 @@ export function getEchartsConfig( "position": "top", "fontSize": 12 }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + }, "emphasis": { "itemStyle": { "shadowBlur": 20, 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 3528e3dcd..5d81b4fe0 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -10,6 +10,16 @@ export const en = { title: 'Title', defaultTitle: 'Themeriver Chart', tooltip: 'Tooltip', + left: 'Left', + defaultLeft:'15', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'15', + bottom: 'Bottom', + defaultBottom:'20', + splitNumber: 'Split Number', + defaultSplitNumber: '3' }, sunburstChart: { sunburstType: 'Sunburst Chart Type', 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 7542c6df3..f58adf6f8 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -493,27 +493,27 @@ export const enObj: I18nObjects = { }, defaultThemeriverChartOption: { data: [ - ["2024-01-01", 10, "Category A"], - ["2024-01-02", 15, "Category A"], - ["2024-01-03", 20, "Category A"], - ["2024-01-04", 25, "Category A"], - ["2024-01-05", 30, "Category A"], - ["2024-01-06", 35, "Category A"], - ["2024-01-07", 40, "Category A"], - ["2024-01-08", 45, "Category A"], - ["2024-01-09", 50, "Category A"], - ["2024-01-10", 55, "Category A"], - ["2024-01-01", 15, "Category B"], - ["2024-01-02", 20, "Category B"], - ["2024-01-03", 25, "Category B"], - ["2024-01-04", 30, "Category B"], - ["2024-01-05", 35, "Category B"], - ["2024-01-06", 40, "Category B"], - ["2024-01-07", 45, "Category B"], - ["2024-01-08", 50, "Category B"], - ["2024-01-09", 55, "Category B"], - ["2024-01-10", 60, "Category B"] - ] + ['2025-01-01', 12, 'Product A'], + ['2025-01-01', 10, 'Product B'], + ['2025-01-01', 15, 'Product C'], + ['2025-01-01', 8, 'Product D'], + ['2025-01-02', 14, 'Product A'], + ['2025-01-02', 9, 'Product B'], + ['2025-01-02', 16, 'Product C'], + ['2025-01-02', 7, 'Product D'], + ['2025-01-03', 16, 'Product A'], + ['2025-01-03', 12, 'Product B'], + ['2025-01-03', 18, 'Product C'], + ['2025-01-03', 10, 'Product D'], + ['2025-01-04', 20, 'Product A'], + ['2025-01-04', 15, 'Product B'], + ['2025-01-04', 22, 'Product C'], + ['2025-01-04', 12, 'Product D'], + ['2025-01-05', 18, 'Product A'], + ['2025-01-05', 13, 'Product B'], + ['2025-01-05', 20, 'Product C'], + ['2025-01-05', 11, 'Product D'] + ] }, defaultMapJsonOption: defaultMapData, From dc5dc717d748811521423e6b02de92367df708e2 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 8 Jan 2025 04:18:12 -0500 Subject: [PATCH 09/16] Fixed an issue thant chart break when JSON data is invalid. --- .../themeriverChartPropertyView.tsx | 4 +- .../themeriverChartUtils.ts | 107 +++++++++--------- .../src/i18n/comps/locales/en.ts | 2 +- .../src/i18n/comps/locales/enObj.tsx | 3 +- 4 files changed, 60 insertions(+), 56 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx index b3a815a67..b96d6afb6 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartPropertyView.tsx @@ -45,8 +45,8 @@ export function themeriverChartPropertyView( {children.top.propertyView({ label: trans("themeriverChart.top"), tooltip: trans("echarts.topTooltip") })} {children.bottom.propertyView({ label: trans("themeriverChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} - {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility")})} - {children.tooltip.propertyView({label: trans("themeriverChart.tooltip")})} + {children.legendVisibility.propertyView({label: trans("echarts.legendVisibility"), tooltip: trans("echarts.legendVisibilityTooltip")})} + {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
{children.onEvent.propertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index d75e69a4f..c9e624db7 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts @@ -136,7 +136,9 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - let opt={ + + console.log(props.echartsOption) + let opt= props.echartsOption && { title: { text: props?.echartsTitle, top: props?.echartsTitleVerticalConfig.top, @@ -146,67 +148,68 @@ export function getEchartsConfig( } }, backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - "tooltip": props.tooltip&&{ - "trigger": "axis", - "axisPointer": { - "type": "line", - "lineStyle": { - "color": "rgba(0,0,0,0.2)", - "width": 2, - "type": "solid" - } - } - }, + "tooltip": props.tooltip&&{ + "trigger": "axis", + "axisPointer": { + "type": "line", + "lineStyle": { + "color": "rgba(0,0,0,0.2)", + "width": 2, + "type": "solid" + } + } + }, legend: props.legendVisibility && { "top": props.echartsLegendConfig.top, "left": props.echartsLegendAlignConfig.left, "orient": props.echartsLegendOrientConfig.orient, - data: Array.from(new Set(props.echartsOption.data.map(item => item[2]))), + data: props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))), textStyle: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) } }, - "singleAxis": { - left: `${props?.left}%`, - right: `${props?.right}%`, - bottom: `${props?.bottom}%`, - top: `${props?.top}%`, - "type": "time", - "axisTick": {}, - "axisLabel": { - ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13) - }, - "splitLine": {}, - "axisPointer": { - "animation": true, - "label": { - "show": true, - "color": "#fff" - } - }, - "splitNumber": props?.splitNumber - }, - "series": [ - { - "type": props.echartsConfig.type, - "data": props.echartsOption.data, - "label": { - "show": true, - "position": "top", - "fontSize": 12 - }, - itemStyle: { - ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + "singleAxis": { + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + "type": "time", + "axisTick": {}, + "axisLabel": { + ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13) + }, + "splitLine": {}, + "axisPointer": { + "animation": true, + "label": { + "show": true, + "color": "#fff" + } + }, + "splitNumber": props?.splitNumber }, - "emphasis": { - "itemStyle": { - "shadowBlur": 20, - "shadowColor": "rgba(0, 0, 0, 0.8)" - } - } + "series": [ + { + "type": props.echartsConfig.type, + "data": props.echartsOption.data, + "label": { + "show": true, + "position": "top", + "fontSize": 12 + }, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + }, + "emphasis": { + "itemStyle": { + "shadowBlur": 20, + "shadowColor": "rgba(0, 0, 0, 0.8)" + } + }, + color: props.echartsOption?.color && props.echartsOption.color + }, + ] } - ] -} return props.echartsOption ? opt : {}; 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 5d81b4fe0..946d9d19d 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -19,7 +19,7 @@ export const en = { bottom: 'Bottom', defaultBottom:'20', splitNumber: 'Split Number', - defaultSplitNumber: '3' + defaultSplitNumber: '4' }, sunburstChart: { sunburstType: 'Sunburst Chart Type', 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 f58adf6f8..4b710f6fe 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -492,6 +492,7 @@ export const enObj: I18nObjects = { ] }, defaultThemeriverChartOption: { + color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'], data: [ ['2025-01-01', 12, 'Product A'], ['2025-01-01', 10, 'Product B'], @@ -513,7 +514,7 @@ export const enObj: I18nObjects = { ['2025-01-05', 13, 'Product B'], ['2025-01-05', 20, 'Product C'], ['2025-01-05', 11, 'Product D'] - ] + ], }, defaultMapJsonOption: defaultMapData, From 86a66a105a2298e19d2006c0d4b5d6a65852b136 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 8 Jan 2025 09:36:36 -0500 Subject: [PATCH 10/16] Changed theme river's language file. --- .../themeriverChartUtils.ts | 68 +++++++++---------- .../src/i18n/comps/locales/enObj.tsx | 2 +- 2 files changed, 34 insertions(+), 36 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts index c9e624db7..76ccc2397 100644 --- a/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/themeriverChartComp/themeriverChartUtils.ts @@ -136,8 +136,6 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - - console.log(props.echartsOption) let opt= props.echartsOption && { title: { text: props?.echartsTitle, @@ -148,62 +146,62 @@ export function getEchartsConfig( } }, backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), - "tooltip": props.tooltip&&{ - "trigger": "axis", - "axisPointer": { - "type": "line", - "lineStyle": { - "color": "rgba(0,0,0,0.2)", - "width": 2, - "type": "solid" + tooltip: props.tooltip&&{ + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + color: "rgba(0,0,0,0.2)", + width: 2, + type: "solid" } } }, legend: props.legendVisibility && { - "top": props.echartsLegendConfig.top, - "left": props.echartsLegendAlignConfig.left, - "orient": props.echartsLegendOrientConfig.orient, + top: props.echartsLegendConfig.top, + left: props.echartsLegendAlignConfig.left, + orient: props.echartsLegendOrientConfig.orient, data: props?.echartsOption?.data && Array.from(new Set((props.echartsOption.data).map(item => item[2]))), textStyle: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 13) } }, - "singleAxis": { + singleAxis: { left: `${props?.left}%`, right: `${props?.right}%`, bottom: `${props?.bottom}%`, top: `${props?.top}%`, - "type": "time", - "axisTick": {}, - "axisLabel": { + type: "time", + axisTick: {}, + axisLabel: { ...styleWrapper(props?.axisStyle, theme?.axisStyle, 13) }, - "splitLine": {}, - "axisPointer": { - "animation": true, - "label": { - "show": true, - "color": "#fff" + splitLine: {}, + axisPointer: { + animation: true, + label: { + show: true, + color: "#fff" } }, - "splitNumber": props?.splitNumber + splitNumber: props?.splitNumber }, - "series": [ + series: [ { - "type": props.echartsConfig.type, - "data": props.echartsOption.data, - "label": { - "show": true, - "position": "top", - "fontSize": 12 + type: props.echartsConfig.type, + data: props.echartsOption.data, + label: { + show: true, + position: "top", + fontSize: 12 }, itemStyle: { ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), }, - "emphasis": { - "itemStyle": { - "shadowBlur": 20, - "shadowColor": "rgba(0, 0, 0, 0.8)" + emphasis: { + itemStyle: { + shadowBlur: 20, + shadowColor: "rgba(0, 0, 0, 0.8)" } }, color: props.echartsOption?.color && props.echartsOption.color 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 4b710f6fe..2b02b2cc6 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -492,7 +492,6 @@ export const enObj: I18nObjects = { ] }, defaultThemeriverChartOption: { - color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'], data: [ ['2025-01-01', 12, 'Product A'], ['2025-01-01', 10, 'Product B'], @@ -515,6 +514,7 @@ export const enObj: I18nObjects = { ['2025-01-05', 20, 'Product C'], ['2025-01-05', 11, 'Product D'] ], + color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] }, defaultMapJsonOption: defaultMapData, From 09f2c33ad2ed34063200e66c5053c796eb2f5c68 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Wed, 8 Jan 2025 12:23:12 -0500 Subject: [PATCH 11/16] Added control fields and style fields to sunburst charts. --- .../sunburstChartComp/sunburstChartComp.tsx | 2 +- .../sunburstChartConstants.tsx | 22 +++++-- .../sunburstChartPropertyView.tsx | 28 +++++++-- .../sunburstChartComp/sunburstChartUtils.ts | 60 ++++++++++++------- .../src/i18n/comps/locales/en.ts | 11 ++++ .../src/i18n/comps/locales/enObj.tsx | 22 +++++++ 6 files changed, 112 insertions(+), 33 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx index a5714c8ac..b3b9ffaa9 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx @@ -145,7 +145,7 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx index a26e08c2c..8efb79309 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultChartStyle, + EchartDefaultTextStyle, + RadarLabelStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +33,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { SunburstChartConfig } from "comps/chartComp/chartConfigs/sunburstChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -253,14 +257,22 @@ let chartJsonModeChildren: any = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + radiusInline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusInline')), + radiusOutline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusOutline')), + position_x:withDefault(StringControl,trans('sunburstChart.defaultPosition_X')), + position_y:withDefault(StringControl,trans('sunburstChart.defaultPosition_Y')), tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx index 9b2ff99b0..442b31da6 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx @@ -31,15 +31,35 @@ export function sunburstChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("sunburstChart.title") })} - {children.tooltip.propertyView({label: trans("sunburstChart.tooltip")})} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + + {children.echartsTitle.propertyView({ label: trans("sunburstChart.title"), tooltip: trans("echarts.titleTooltip") })} + {children.radiusInline.propertyView({ label: trans("sunburstChart.radiusInline"), tooltip: trans("sunburstChart.radiusInlineTooltip") })} + {children.radiusOutline.propertyView({ label: trans("sunburstChart.radiusOutline"), tooltip: trans("sunburstChart.radiusOutlineTooltip") })} + {children.position_x.propertyView({ label: trans("sunburstChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })} + {children.position_y.propertyView({ label: trans("sunburstChart.position_Y"), tooltip: trans("echarts.positionChart_y_Tooltip") })} + + {children.tooltip.propertyView({label: trans("sunburstChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} + {children.labelVisibility.propertyView({label: trans("sunburstChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()}
+
+ {children.titleStyle?.getPropertyView()} +
+ { + children.labelVisibility.getView() && +
+ {children.detailStyle?.getPropertyView()} +
+ } +
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts index dda543eaa..5ee63e3d2 100644 --- a/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -133,32 +135,44 @@ 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" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{b}: {c}" - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "top": "10%", - "left": "10%", - "bottom": "10%", - "right": "10%", - "symbolSize": 7, - 'data': props.echartsOption.data, + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground( + props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF" + ), + color: props.echartsOption.data?.map(data => data.color), + tooltip: props.tooltip&&{ + trigger: "item", + formatter: "{b}: {c}" + }, + series: [ + { + type: props.echartsConfig.type, + radius: [`${props?.radiusInline}%`, `${props?.radiusOutline}%`], + center: [`${props?.position_x}%`, `${props?.position_y}%`], + symbolSize: 7, + data: props.echartsOption.data, + levels: props.echartsOption.levels, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + label: { + show: props?.labelVisibility, + rotate: 'tangential', + ...styleWrapper(props?.detailStyle, theme?.detailStyle,11) + }, + } + ], } - ] -} return props.echartsOption ? opt : {}; } 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 946d9d19d..244dc5860 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -26,6 +26,17 @@ export const en = { title: 'Title', defaultTitle: 'Sunburst Chart', tooltip: 'Tooltip', + defaultRadiusInline: "20", + defaultRadiusOutline: "80", + defaultPosition_X: "50", + defaultPosition_Y: "50", + radiusInline: "Inline Radius", + radiusOutline: "Outline Radius", + position_x: "Position-X", + position_Y: "Position-Y", + radiusInlineTooltip: "Set the Inline radius value of the Chart.", + radiusOutlineTooltip: "Set the Outline radius value of the Chart.", + labelVisibility: "Label" }, treemapChart: { treemapType: 'Treemap Chart Type', 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 2b02b2cc6..d9be4a9d7 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -474,6 +474,28 @@ export const enObj: I18nObjects = { } ] } + ], + levels: [ + { + itemStyle: { + color: '#f6e58d' + }, + }, + { + itemStyle: { + color: '#12e192' + }, + }, + { + itemStyle: { + color: '#ffbe76' + }, + }, + { + itemStyle: { + color: '#007979' + }, + } ] }, defaultCalendarChartOption: { From 763d979d9324be05400fabf84f33815c1ada5ae6 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 9 Jan 2025 11:54:37 -0500 Subject: [PATCH 12/16] Added control fields and style fields to tree charts. --- .../treeChartComp/treeChartConstants.tsx | 23 +++++- .../treeChartComp/treeChartPropertyView.tsx | 23 +++++- .../src/comps/treeChartComp/treeChartUtils.ts | 82 +++++++++++-------- .../src/comps/treeChartComp/treechartComp.tsx | 2 +- .../src/i18n/comps/locales/en.ts | 14 ++++ .../src/i18n/comps/locales/enObj.tsx | 4 +- 6 files changed, 107 insertions(+), 41 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx index 62804d637..a982ec80a 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartConstants.tsx @@ -16,7 +16,7 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartsStyle, RadarLabelStyle, EchartDefaultChartStyle, EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +31,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { TreeChartConfig } from "comps/chartComp/chartConfigs/treeChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -253,14 +255,27 @@ let chartJsonModeChildren: any = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + left:withDefault(NumberControl,trans('treeChart.defaultLeft')), + right:withDefault(NumberControl,trans('treeChart.defaultRight')), + top:withDefault(NumberControl,trans('treeChart.defaultTop')), + bottom:withDefault(NumberControl,trans('treeChart.defaultBottom')), + pointSize:withDefault(NumberControl,trans('treeChart.defaultPointSize')), + lineWidth:withDefault(NumberControl,trans('treeChart.defaultlineWidth')), + + edgeShape: withDefault(BoolControl, true), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx index 342906516..c87ff561c 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartPropertyView.tsx @@ -31,15 +31,34 @@ export function treeChartPropertyView( ), })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("treeChart.title") })} + + {children.left.propertyView({ label: trans("treeChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("treeChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("treeChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("treeChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.pointSize.propertyView({ label: trans("treeChart.pointSize"), tooltip: trans("treeChart.pointSizeTooltip") })} + {children.lineWidth.propertyView({ label: trans("treeChart.lineWidth"), tooltip: trans("treeChart.lineWidthTooltip") })} + {children.tooltip.propertyView({label: trans("treeChart.tooltip")})} +
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()}
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.detailStyle?.getPropertyView()} +
+
{hiddenPropertyView(children)}
); diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts index 35490fcb1..45fe69360 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treeChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -135,42 +137,56 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip&&{ - "trigger": "item", - "triggerOn": "mousemove" - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "top": "10%", - "left": "10%", - "bottom": "10%", - "right": "10%", - "symbolSize": 7, - 'data': props.echartsOption.data, - "label": { - "position": "top", - "verticalAlign": "middle", - "align": "right" + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + color: props.echartsOption.data?.map(data => data.color), // Node colors from data + tooltip: props.tooltip && { + trigger: "item", + triggerOn: "mousemove" + }, + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + symbol: "circle", // Define the shape of the nodes (e.g., 'circle', 'rect', etc.) + symbolSize: props?.pointSize || 20, // Control the size of the nodes + data: props.echartsOption.data, + label: { + position: "top", + verticalAlign: "middle", + align: "right", + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 11), + }, + leaves: { + label: { + position: "bottom", + verticalAlign: "middle", + align: "left" + } }, - "leaves": { - "label": { - "position": "bottom", - "verticalAlign": "middle", - "align": "left" + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle), + color: props.echartsOption.pointColor, + }, + lineStyle: { + width: props?.lineWidth || 2, // Control the line thickness + color: props.echartsOption.lineColor, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + } } - } + ] } - ] -} return props.echartsOption ? opt : {}; } diff --git a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx index e0b375bec..13242a3df 100644 --- a/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treeChartComp/treechartComp.tsx @@ -145,7 +145,7 @@ TreeChartTmpComp = withViewFn(TreeChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); 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 244dc5860..1ddb50899 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -49,6 +49,20 @@ export const en = { title: 'Title', defaultTitle: 'Tree Chart', tooltip: 'Tooltip', + defaultLeft: "10", + left: "Left", + defaultRight: "10", + right: "Right", + defaultTop: "20", + top: "Top", + defaultBottom: "20", + bottom: "Bottom", + defaultPointSize: "10", + pointSize: "Point Size", + pointSizeTooltip: "Set the Point Size of the Chart.", + defaultlineWidth: '2', + lineWidth: "Line Width", + lineWidthTooltip: "Set the Line Width of the Chart." }, graphChart: { graphType: 'Graph Chart Type', 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 d9be4a9d7..6dd1d7b6c 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -417,7 +417,9 @@ export const enObj: I18nObjects = { ] } ] - }] + }], + pointColor: "#380e81", + lineColor: "#1a93b8", }, defaultTreemapChartOption: { data: [ From 8fae70f971919c305c4d31d515c22f0580b2e0f0 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Thu, 9 Jan 2025 14:05:33 -0500 Subject: [PATCH 13/16] Added control fields and style fields to treemap charts. --- .../treemapChartComp/treemapChartComp.tsx | 2 +- .../treemapChartConstants.tsx | 25 ++++++-- .../treemapChartPropertyView.tsx | 25 ++++++-- .../treemapChartComp/treemapChartUtils.ts | 64 ++++++++++++------- .../src/i18n/comps/locales/en.ts | 9 +++ .../src/i18n/comps/locales/enObj.tsx | 64 ++++++++++--------- 6 files changed, 124 insertions(+), 65 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx index 648ba9f58..09515afdc 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartComp.tsx @@ -145,7 +145,7 @@ TreemapChartTmpComp = withViewFn(TreemapChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx index 92697cb79..006d8dc14 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartConstants.tsx @@ -16,7 +16,9 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + RadarLabelStyle, + EchartDefaultChartStyle, + EchartDefaultTextStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig"; @@ -31,6 +33,8 @@ import { SeriesListComp } from "../chartComp/seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { TreemapChartConfig } from "comps/chartComp/chartConfigs/treemapChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -253,14 +257,25 @@ let chartJsonModeChildren: any = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + left:withDefault(NumberControl,trans('treemapChart.defaultLeft')), + right:withDefault(NumberControl,trans('treemapChart.defaultRight')), + top:withDefault(NumberControl,trans('treemapChart.defaultTop')), + bottom:withDefault(NumberControl,trans('treemapChart.defaultBottom')), + tooltip: withDefault(BoolControl, true), - legendVisibility: withDefault(BoolControl, true), + labelVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { + +if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + detailStyle: styleControl(RadarLabelStyle, 'detailStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx index a4fc43e02..2abce3257 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartPropertyView.tsx @@ -31,14 +31,31 @@ export function treeChartPropertyView( ), })} - {children.echartsTitle.propertyView({ label: trans("treemapChart.title") })} - {children.tooltip.propertyView({label: trans("treemapChart.tooltip")})} + + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("treeChart.title"), tooltip: trans("echarts.titleTooltip") })} + + {children.left.propertyView({ label: trans("treemapChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("treemapChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("treemapChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("treemapChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + + {children.tooltip.propertyView({label: trans("treemapChart.tooltip"), tooltip: trans("echarts.tooltipTooltip") })} + {children.labelVisibility.propertyView({label: trans("echarts.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip") })}
{children.onEvent.propertyView()}
-
- {children.style?.getPropertyView()} + +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.detailStyle?.getPropertyView()}
{hiddenPropertyView(children)}
diff --git a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts index a323e2803..0147bc5a8 100644 --- a/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/treemapChartComp/treemapChartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -135,30 +137,44 @@ export function getEchartsConfig( ): EChartsOptionWithMap { if (props.mode === "json") { let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": [], - "tooltip": props.tooltip&&{ - "trigger": "item", - "formatter": "{b}: {c}", - "axisPointer": { - "type": "shadow" - }, - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - 'data': props.echartsOption.data, - "breadcrumb": { - "show": true - } - } - ] + title: { + text: props?.echartsTitle, + top: props?.echartsTitleVerticalConfig.top, + left: props?.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground(props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + color: [], + tooltip: props.tooltip&&{ + trigger: "item", + formatter: "{b}: {c}", + axisPointer: { + type: "shadow" + }, + }, + series: [ + { + name: props.echartsConfig.type, + type: props.echartsConfig.type, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, + data: props.echartsOption.data, + breadcrumb: { + show: true + }, + color: props.echartsOption.color, + itemStyle: { + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + }, + label: { + ...styleWrapper(props?.detailStyle, theme?.detailStyle, 12), + } + } + ] } return props.echartsOption ? opt : {}; 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 1ddb50899..24a719a2b 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -43,6 +43,14 @@ export const en = { title: 'Title', defaultTitle: 'Treemap Chart', tooltip: 'Tooltip', + defaultLeft: "10", + left: "Left", + defaultRight: "10", + right: "Right", + defaultTop: "20", + top: "Top", + defaultBottom: "20", + bottom: "Bottom", }, treeChart: { treeType: 'Tree Chart Type', @@ -347,6 +355,7 @@ export const en = { axisTickColorTooltip: "Select the Color of Axis Tick", axisLabelDistanceTooltip: "Select the Distance between the Axis labels and the Split line", tooltipTooltip: "Show or hide the Tooltip of the Chart.", + labelVisibility: "Label", }, 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 6dd1d7b6c..408e50bf5 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx @@ -423,37 +423,39 @@ export const enObj: I18nObjects = { }, defaultTreemapChartOption: { data: [ - { - name: 'nodeA', - value: 10, - children: [ - { - name: 'nodeAa', - value: 4, - }, - { - name: 'nodeAb', - value: 6 - } - ] - }, - { - name: 'nodeB', - value: 20, - children: [ - { - name: 'nodeBa', - value: 20, - children: [ - { - name: 'nodeBa1', - value: 20 - } - ] - } - ] - } - ] + { + name: 'Category A', + value: 100, + children: [ + { + name: 'Subcategory A1', + value: 70, + children: [ + { name: 'Item A1-1', value: 10 }, + { name: 'Item A1-2', value: 20 }, + { name: 'Item A1-3', value: 10 }, + { name: 'Item A1-4', value: 30 } + ] + } + ] + }, + { + name: 'Category B', + value: 80, + children: [ + { + name: 'Subcategory B1', + value: 50, + children: [ + { name: 'Item B1-1', value: 20 }, + { name: 'Item B1-2', value: 15 }, + { name: 'Item B1-3', value: 15 } + ] + }, + ] + } + ], + color: ['#5470C6', '#91CC75', '#FAC858', '#6b51a1'] }, defaultSunburstChartOption: { data: [ From 5b121157e9b5f523e952bd4bc026867ca3c647c8 Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 10 Jan 2025 14:58:00 -0500 Subject: [PATCH 14/16] Added control fields and style fields to Basic and Legacy charts. --- .../src/comps/basicChartComp/chartComp.tsx | 4 +- .../comps/basicChartComp/chartConstants.tsx | 24 +++- .../basicChartComp/chartPropertyView.tsx | 24 +++- .../src/comps/basicChartComp/chartUtils.ts | 107 +++++++++--------- .../src/comps/chartComp/chartComp.tsx | 3 +- .../src/comps/chartComp/chartConstants.tsx | 37 +++++- .../src/comps/chartComp/chartPropertyView.tsx | 27 ++++- .../src/comps/chartComp/chartUtils.ts | 64 ++++++++--- 8 files changed, 210 insertions(+), 80 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx index bcb1c7aa4..763457e3a 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartComp.tsx @@ -33,7 +33,7 @@ import { echartsConfigOmitChildren, getEchartsConfig, getSelectedPoints, -} from "comps/chartComp/chartUtils"; +} from "./chartUtils"; import 'echarts-extension-gmap'; import log from "loglevel"; @@ -124,7 +124,7 @@ BasicChartTmpComp = withViewFn(BasicChartTmpComp, (comp) => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, chartSize, - theme?.theme?.components?.candleStickChart || {}, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index 8d8811daf..2348ea6c5 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx @@ -16,7 +16,8 @@ import { uiChildren, clickEvent, styleControl, - EchartsStyle + EchartDefaultTextStyle, + EchartDefaultChartStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "./chartConfigs/barChartConfig"; @@ -32,6 +33,8 @@ import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; import { GaugeChartConfig } from "./chartConfigs/gaugeChartConfig"; import { FunnelChartConfig } from "./chartConfigs/funnelChartConfig"; +import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig"; export const ChartTypeOptions = [ { @@ -237,7 +240,7 @@ const EchartsOptionComp = withType(EchartsOptionMap, "funnel"); export type CharOptionCompType = keyof typeof ChartOptionMap; export const chartUiModeChildren = { - title: StringControl, + title: withDefault(StringControl, trans("echarts.defaultTitle")), data: jsonControl(toJSONObjectArray, i18nObjs.defaultDataSource), xAxisKey: valueComp(""), // x-axis, key from data xAxisDirection: dropdownControl(XAxisDirectionOptions, "horizontal"), @@ -255,14 +258,25 @@ let chartJsonModeChildren: any = { echartsLegendConfig: EchartsLegendConfig, echartsLabelConfig: EchartsLabelConfig, echartsConfig: EchartsOptionComp, - // style: styleControl(EchartsStyle, 'style'), + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + + left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), + right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), + top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), + bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), } -if (EchartsStyle) { +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { chartJsonModeChildren = { ...chartJsonModeChildren, - style: styleControl(EchartsStyle, 'style'), + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'), + yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), } } diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx index cfda76b14..f623938cd 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx @@ -114,7 +114,13 @@ export function chartPropertyView(
+ {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} {children.title.propertyView({ label: trans("chart.title") })} + {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} {children.chartConfig.children.compType.getView() !== "pie" && ( <> {children.xAxisDirection.propertyView({ @@ -125,10 +131,24 @@ export function chartPropertyView( {children.yConfig.getPropertyView()} )} - {children.legendConfig.getPropertyView()} {hiddenPropertyView(children)} + {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} +
+
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.xAxisStyle?.getPropertyView()} +
+
+ {children.yAxisStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()}
-
{children.chartConfig.getPropertyView()}
); diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts index 8bb44e041..435a1ead1 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "./chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -134,52 +136,15 @@ export function getEchartsConfig( theme?: any, ): EChartsOptionWithMap { if (props.mode === "json") { - let opt={ - "title": { - "text": props.echartsTitle, - 'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom', - "left":"center" - }, - "backgroundColor": props?.style?.background || theme?.style?.background, - "color": props.echartsOption.data?.map(data => data.color), - "tooltip": props.tooltip && { - "trigger": "item", - "formatter": "{a}
{b} : {c}%" - }, - "legend":props.legendVisibility&& { - "data": props.echartsOption.data?.map(data=>data.name), - "top": props.echartsLegendConfig.top, - }, - "series": [ - { - "name": props.echartsConfig.type, - "type": props.echartsConfig.type, - "left": "10%", - "top": 60, - "bottom": 60, - "width": "80%", - "min": 0, - "max": 100, - "gap": 2, - "label": { - "show": true, - "position": props.echartsLabelConfig.top - }, - "data": props.echartsOption.data - } - ] -} - return props.echartsOption ? opt : {}; - + return props.echartsOption ? props.echartsOption : {}; } - if(props.mode === "map") { const { mapZoomLevel, mapCenterLat, mapCenterLng, - mapOptions, - showCharts, + mapOptions, + showCharts, } = props; const echartsOption = mapOptions && showCharts ? mapOptions : {}; @@ -197,18 +162,38 @@ export function getEchartsConfig( // axisChart const axisChart = isAxisChart(props.chartConfig.type); const gridPos = { - left: 20, - right: props.legendConfig.left === "right" ? "10%" : 20, - top: 50, - bottom: 35, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, }; - let config: EChartsOptionWithMap = { - title: { text: props.title, left: "center" }, - tooltip: { - confine: true, - trigger: axisChart ? "axis" : "item", + let config: any = { + title: { + text: props.title, + top: props.echartsTitleVerticalConfig.top, + left:props.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + legend: { + ...props.legendConfig, + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15) + } + }, + tooltip: props.tooltip && { + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + color: "rgba(0,0,0,0.2)", + width: 2, + type: "solid" + } + } }, - legend: props.legendConfig, grid: { ...gridPos, containLabel: true, @@ -238,7 +223,13 @@ export function getEchartsConfig( sourceHeader: false, }, ], - series: getSeriesConfig(props), + series: getSeriesConfig(props).map(series => ({ + ...series, + itemStyle: { + ...series.itemStyle, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + } + })), }; if (axisChart) { // pure chart's size except the margin around @@ -266,9 +257,19 @@ export function getEchartsConfig( config = { ...config, // @ts-ignore - xAxis: finalXyConfig.xConfig, + xAxis: { + ...finalXyConfig.xConfig, + axisLabel: { + ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11) + } + }, // @ts-ignore - yAxis: finalXyConfig.yConfig, + yAxis: { + ...finalXyConfig.yConfig, + axisLabel: { + ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11) + } + }, }; } // log.log("Echarts transformedData and config", transformedData, config); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx index f93ae0f50..29cd82349 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartComp.tsx @@ -159,7 +159,8 @@ ChartTmpComp = withViewFn(ChartTmpComp, (comp) => { const option = useMemo(() => { return getEchartsConfig( childrenToProps(echartsConfigChildren) as ToViewReturn, - chartSize + chartSize, + themeConfig ); }, [chartSize, ...Object.values(echartsConfigChildren)]); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 71962fd53..6003ae170 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -16,6 +16,9 @@ import { ValueFromOption, uiChildren, clickEvent, + EchartDefaultTextStyle, + styleControl, + EchartDefaultChartStyle } from "lowcoder-sdk"; import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core"; import { BarChartConfig } from "./chartConfigs/barChartConfig"; @@ -27,6 +30,11 @@ import { ScatterChartConfig } from "./chartConfigs/scatterChartConfig"; import { SeriesListComp } from "./seriesComp"; import { EChartsOption } from "echarts"; import { i18nObjs, trans } from "i18n/comps"; +import {EchartsTitleVerticalConfig} from "./chartConfigs/echartsTitleVerticalConfig"; +import {EchartsTitleConfig} from "./chartConfigs/echartsTitleConfig"; +import {EchartsLegendConfig} from "./chartConfigs/echartsLegendConfig"; +import {EchartsLegendOrientConfig} from "./chartConfigs/echartsLegendOrientConfig"; +import {EchartsLegendAlignConfig} from "./chartConfigs/echartsLegendAlignConfig"; export const ChartTypeOptions = [ { @@ -251,10 +259,37 @@ export const chartUiModeChildren = { legendConfig: LegendConfig, chartConfig: ChartOptionComp, onUIEvent: eventHandlerControl(UIEventOptions), + }; -const chartJsonModeChildren = { +let chartJsonModeChildren: any = { + echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), + + + left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), + right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), + top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), + bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + + echartsTitleVerticalConfig: EchartsTitleVerticalConfig, + echartsTitleConfig:EchartsTitleConfig, + echartsLegendConfig: EchartsLegendConfig, + echartsLegendOrientConfig: EchartsLegendOrientConfig, + echartsLegendAlignConfig: EchartsLegendAlignConfig, + legendVisibility: withDefault(BoolControl, true), + tooltip: withDefault(BoolControl, true), +} + +if (EchartDefaultChartStyle && EchartDefaultTextStyle) { + chartJsonModeChildren = { + ...chartJsonModeChildren, + chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'), + titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'), + xAxisStyle: styleControl(EchartDefaultTextStyle, 'xAxis'), + yAxisStyle: styleControl(EchartDefaultTextStyle, 'yAxisStyle'), + legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'), + } } const chartMapModeChildren = { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index 7bc6cf488..ed82cdcc2 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -114,7 +114,13 @@ export function chartPropertyView(
- {children.title.propertyView({ label: trans("chart.title") })} + {children.echartsTitleConfig.getPropertyView()} + {children.echartsTitleVerticalConfig.getPropertyView()} + {children.echartsTitle.propertyView({ label: trans("chart.title") })} + {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} {children.chartConfig.children.compType.getView() !== "pie" && ( <> {children.xAxisDirection.propertyView({ @@ -125,10 +131,25 @@ export function chartPropertyView( {children.yConfig.getPropertyView()} )} - {children.legendConfig.getPropertyView()} {hiddenPropertyView(children)} + {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} +
+ +
+ {children.chartStyle?.getPropertyView()} +
+
+ {children.titleStyle?.getPropertyView()} +
+
+ {children.xAxisStyle?.getPropertyView()} +
+
+ {children.yAxisStyle?.getPropertyView()} +
+
+ {children.legendStyle?.getPropertyView()}
-
{children.chartConfig.getPropertyView()}
); diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts index d71dd7f56..aa042be7a 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartUtils.ts @@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig"; import Big from "big.js"; import { googleMapsApiUrl } from "./chartConfigs/chartUrls"; +import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper"; +import parseBackground from "../../util/gradientBackgroundColor"; export function transformData( originData: JSONObject[], @@ -160,18 +162,38 @@ export function getEchartsConfig( // axisChart const axisChart = isAxisChart(props.chartConfig.type); const gridPos = { - left: 20, - right: props.legendConfig.left === "right" ? "10%" : 20, - top: 50, - bottom: 35, + left: `${props?.left}%`, + right: `${props?.right}%`, + bottom: `${props?.bottom}%`, + top: `${props?.top}%`, }; - let config: EChartsOptionWithMap = { - title: { text: props.title, left: "center" }, - tooltip: { - confine: true, - trigger: axisChart ? "axis" : "item", + let config: any = { + title: { + text: props.echartsTitle, + top: props.echartsTitleVerticalConfig.top, + left:props.echartsTitleConfig.top, + textStyle: { + ...styleWrapper(props?.titleStyle, theme?.titleStyle) + } + }, + backgroundColor: parseBackground( props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"), + legend: { + ...props.legendConfig, + textStyle: { + ...styleWrapper(props?.legendStyle, theme?.legendStyle, 15) + } + }, + tooltip: props.tooltip&&{ + trigger: "axis", + axisPointer: { + type: "line", + lineStyle: { + color: "rgba(0,0,0,0.2)", + width: 2, + type: "solid" + } + } }, - legend: props.legendConfig, grid: { ...gridPos, containLabel: true, @@ -201,7 +223,13 @@ export function getEchartsConfig( sourceHeader: false, }, ], - series: getSeriesConfig(props), + series: getSeriesConfig(props).map(series => ({ + ...series, + itemStyle: { + ...series.itemStyle, + ...chartStyleWrapper(props?.chartStyle, theme?.chartStyle) + } + })), }; if (axisChart) { // pure chart's size except the margin around @@ -229,9 +257,19 @@ export function getEchartsConfig( config = { ...config, // @ts-ignore - xAxis: finalXyConfig.xConfig, + xAxis: { + ...finalXyConfig.xConfig, + axisLabel: { + ...styleWrapper(props?.xAxisStyle, theme?.xAxisStyle, 11) + } + }, // @ts-ignore - yAxis: finalXyConfig.yConfig, + yAxis: { + ...finalXyConfig.yConfig, + axisLabel: { + ...styleWrapper(props?.yAxisStyle, theme?.yAxisStyle, 11) + } + }, }; } // log.log("Echarts transformedData and config", transformedData, config); From 2a1113670ec30ed27db3352914aa7df55ef9f8ff Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Fri, 10 Jan 2025 15:42:15 -0500 Subject: [PATCH 15/16] Added legendConfig to Basic and Legacy charts. --- .../src/comps/basicChartComp/chartPropertyView.tsx | 2 ++ .../lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx | 1 + 2 files changed, 3 insertions(+) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx index f623938cd..ff4297385 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx @@ -13,6 +13,7 @@ import { } from "lowcoder-sdk"; import { trans } from "i18n/comps"; import { examplesUrl, mapExamplesUrl, mapOptionUrl, optionUrl } from "./chartConfigs/chartUrls"; +import {LegendConfig} from "./chartConfigs/legendConfig"; export function chartPropertyView( children: ChartCompChildrenType, @@ -116,6 +117,7 @@ export function chartPropertyView(
{children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} + {children.legendConfig.getPropertyView()} {children.title.propertyView({ label: trans("chart.title") })} {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index ed82cdcc2..d3b3cdd2a 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -116,6 +116,7 @@ export function chartPropertyView(
{children.echartsTitleConfig.getPropertyView()} {children.echartsTitleVerticalConfig.getPropertyView()} + {children.legendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("chart.title") })} {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} From ab19a360cb8b008d7fdb1a817214bc0f67b5cdaa Mon Sep 17 00:00:00 2001 From: Imiss-U1025 Date: Sat, 11 Jan 2025 14:19:41 -0500 Subject: [PATCH 16/16] Tested to all charts and Fixed any issues I find. --- .../src/comps/basicChartComp/chartConstants.tsx | 8 ++++---- .../comps/basicChartComp/chartPropertyView.tsx | 10 +++++----- .../candleStickChartUtils.ts | 2 +- .../src/comps/chartComp/chartConstants.tsx | 9 ++++----- .../src/comps/chartComp/chartPropertyView.tsx | 10 +++++----- .../src/comps/gaugeChartComp/gaugeChartUtils.ts | 6 +++++- .../comps/sankeyChartComp/sankeyChartUtils.ts | 4 ++-- .../lowcoder-comps/src/i18n/comps/locales/en.ts | 16 +++++++++++++--- 8 files changed, 39 insertions(+), 26 deletions(-) diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx index 2348ea6c5..aa8deb31b 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartConstants.tsx @@ -261,10 +261,10 @@ let chartJsonModeChildren: any = { echartsTitleVerticalConfig: EchartsTitleVerticalConfig, echartsTitleConfig:EchartsTitleConfig, - left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), - right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), - top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), - bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + left:withDefault(NumberControl,trans('chart.defaultLeft')), + right:withDefault(NumberControl,trans('chart.defaultRight')), + top:withDefault(NumberControl,trans('chart.defaultTop')), + bottom:withDefault(NumberControl,trans('chart.defaultBottom')), tooltip: withDefault(BoolControl, true), legendVisibility: withDefault(BoolControl, true), diff --git a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx index ff4297385..405fecff2 100644 --- a/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/basicChartComp/chartPropertyView.tsx @@ -119,10 +119,10 @@ export function chartPropertyView( {children.echartsTitleVerticalConfig.getPropertyView()} {children.legendConfig.getPropertyView()} {children.title.propertyView({ label: trans("chart.title") })} - {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} - {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} - {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })} - {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })} {children.chartConfig.children.compType.getView() !== "pie" && ( <> {children.xAxisDirection.propertyView({ @@ -134,7 +134,7 @@ export function chartPropertyView( )} {hiddenPropertyView(children)} - {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} + {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
{children.chartStyle?.getPropertyView()} diff --git a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts index 14b422668..98f208063 100644 --- a/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/candleStickChartComp/candleStickChartUtils.ts @@ -187,7 +187,7 @@ export function getEchartsConfig( }, xAxis: props?.echartsOption && { type: 'category', - data: props?.echartsOption.xAxis.data, + data: props?.echartsOption.xAxis && props?.echartsOption.xAxis.data, splitArea: !props?.axisFlagVisibility && { show: true, areaStyle: { diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx index 6003ae170..7678e9d50 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartConstants.tsx @@ -266,11 +266,10 @@ let chartJsonModeChildren: any = { echartsTitle: withDefault(StringControl, trans("echarts.defaultTitle")), echartsOption: jsonControl(toObject, i18nObjs.defaultEchartsJsonOption), - - left:withDefault(NumberControl,trans('candleStickChart.defaultLeft')), - right:withDefault(NumberControl,trans('candleStickChart.defaultRight')), - top:withDefault(NumberControl,trans('candleStickChart.defaultTop')), - bottom:withDefault(NumberControl,trans('candleStickChart.defaultBottom')), + left:withDefault(NumberControl,trans('chart.defaultLeft')), + right:withDefault(NumberControl,trans('chart.defaultRight')), + top:withDefault(NumberControl,trans('chart.defaultTop')), + bottom:withDefault(NumberControl,trans('chart.defaultBottom')), echartsTitleVerticalConfig: EchartsTitleVerticalConfig, echartsTitleConfig:EchartsTitleConfig, diff --git a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx index d3b3cdd2a..4bc621273 100644 --- a/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx +++ b/client/packages/lowcoder-comps/src/comps/chartComp/chartPropertyView.tsx @@ -118,10 +118,10 @@ export function chartPropertyView( {children.echartsTitleVerticalConfig.getPropertyView()} {children.legendConfig.getPropertyView()} {children.echartsTitle.propertyView({ label: trans("chart.title") })} - {children.left.propertyView({ label: trans("candleStickChart.left"), tooltip: trans("echarts.leftTooltip") })} - {children.right.propertyView({ label: trans("candleStickChart.right"), tooltip: trans("echarts.rightTooltip") })} - {children.top.propertyView({ label: trans("candleStickChart.top"), tooltip: trans("echarts.topTooltip") })} - {children.bottom.propertyView({ label: trans("candleStickChart.bottom"), tooltip: trans("echarts.bottomTooltip") })} + {children.left.propertyView({ label: trans("chart.left"), tooltip: trans("echarts.leftTooltip") })} + {children.right.propertyView({ label: trans("chart.right"), tooltip: trans("echarts.rightTooltip") })} + {children.top.propertyView({ label: trans("chart.top"), tooltip: trans("echarts.topTooltip") })} + {children.bottom.propertyView({ label: trans("chart.bottom"), tooltip: trans("echarts.bottomTooltip") })} {children.chartConfig.children.compType.getView() !== "pie" && ( <> {children.xAxisDirection.propertyView({ @@ -133,7 +133,7 @@ export function chartPropertyView( )} {hiddenPropertyView(children)} - {children.tooltip.propertyView({label: trans("themeriverChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})} + {children.tooltip.propertyView({label: trans("echarts.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
diff --git a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts index 869f22fc6..d838eeb80 100644 --- a/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts @@ -364,7 +364,7 @@ export function getEchartsConfig( showAbove: true, size: Number(props?.pointerWidth) * 1.5, itemStyle: { - color: props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] + color: props?.multiTitleGaugeOption?.data && props?.multiTitleGaugeOption?.data[0]["value"].slice(-1)[0] } }, progress: { @@ -401,6 +401,8 @@ export function getEchartsConfig( }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, '#ffffff', 0, 'inherit'), + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize.split('px')[0] || 40, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize.split('px')[1] || 20, formatter: props?.multiTitleGaugeOption?.data?.map(data => data.formatter)[0], } } @@ -559,6 +561,8 @@ export function getEchartsConfig( }, detail: { ...styleWrapper(props?.legendStyle, theme?.legendStyle, 16, 'inherit', 1, ''), + "width": props?.legendStyle?.detailSize?.split('px')[0] || theme?.legendStyle?.detailSize.split('px')[0] || 50, + "height": props?.legendStyle?.detailSize?.split('px')[1] || theme?.legendStyle?.detailSize.split('px')[1] || 20, formatter: props?.ringGaugeOption?.data?.map(data => data.formatter)[0], } } diff --git a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts index 01ec003d7..df98dca5d 100644 --- a/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts +++ b/client/packages/lowcoder-comps/src/comps/sankeyChartComp/sankeyChartUtils.ts @@ -166,11 +166,11 @@ export function getEchartsConfig( position: props.echartsLabelConfig.top, ...styleWrapper(props?.detailStyle, theme?.detailStyle,15) }, - data: props.echartsOption && props?.echartsOption?.data?.map(item => ({ + data: props?.echartsOption?.data && props?.echartsOption?.data?.map(item => ({ name: item.name, itemStyle: isColorString(item.color) && {color: item.color} })), - links:props.echartsOption.links, + links: props.echartsOption.links, emphasis: { focus: props?.focus ? 'adjacency' : undefined, }, 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 24a719a2b..bd9d406e1 100644 --- a/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts +++ b/client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts @@ -300,12 +300,12 @@ export const en = { axisTickColor: "AxisTick Color", defaultBarometerPointerWidth: "3", defaultBarometerPointerLength: "125", - defaultBarometerPointer_Y: "-10", + defaultBarometerPointer_Y: "-10" }, echarts: { legendVisibility: 'Legend', - defaultTitle: "Data Display", + defaultTitle: "Chart", legendPosition: "Legend-Y", legendOrient: "Legend Orient", legendAlign: "Legend-X", @@ -314,6 +314,7 @@ export const en = { titlePositionVertical: "Title-Y", funnelAlign: "Funnel Align", sort: "Sort", + tooltip: "Tooltip", changingTitle_x_Tooltip: "Change the Horizontal position of the Title.", changingTitle_y_Tooltip: "Change the Vertical position of the Title.", changingLegend_x_Tooltip: "Change the Vertical position of the Legend.", @@ -450,7 +451,16 @@ export const en = { ringGauge: "Ring Gauge", barometerGauge: "Gauge Barometer chart", clockGauge: "Clock", - default: "Default" + default: "Default", + left: 'Left', + defaultLeft:'10', + right: 'Right', + defaultRight:'10', + top: 'Top', + defaultTop:'20', + bottom: 'Bottom', + defaultBottom:'20', + defaultDataZoomBottom: '20', }, imageEditor: { defaultSrc: "",