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 27010ae0c5..a441e3dc8a 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 e105256e71..7332e49b73 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 5443730fd8..f9158eefc5 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 0000000000..e85a8b75f3 --- /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 313af3570e..869f22fc62 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 ab4ab36d8c..00986628c7 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 7db19020e2..22a4000724 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 0000000000..f3f57b6008 --- /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 7fe8718bd0..036b797686 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 94047d372f..fb477073bc 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 e3d247e3b9..76e592d303 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 a441e3dc8a..243f16bea8 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 7332e49b73..234aaf38a1 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 f9158eefc5..2ec3a236b0 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 1442ea9953..0c70032d4d 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 00986628c7..08d50d1cc8 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 4d6e31e7ec..518aa6617a 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 2ec3a236b0..14b4226686 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 bbacc09956..b574db7d22 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 ae000e6f7f..ec832ac036 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 ba9ebbebc6..7ace3ab69e 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 a75b6a8c22..a352b59fd3 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 08d50d1cc8..cd2ccf9ad0 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 22a4000724..8d14109163 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 f3f57b6008..a1bf4bc561 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 f2fd90ed17..e31151adf4 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 346a48260f..55b3dc9af7 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 0c70032d4d..827a510b5d 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 43fdfc045e..bb632f98c0 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 51ccd46da3..9c93f08904 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 c7d350bfc3..6884b038be 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 43bd48e037..5618ba0b68 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 cd2ccf9ad0..6c683acdab 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 8d14109163..88de4d4d7c 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 036b797686..45b15f4949 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 fb477073bc..baa5424d73 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 21dea46f3b..852de74c3c 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 5618ba0b68..b15388b57c 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 949828a761..bedfd861fe 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 44d2631b83..55537d21c8 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 9a095b585a..bfa20dc577 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 904910a354..a509a89f4b 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 6c683acdab..37d9733d92 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 88de4d4d7c..d287b8852f 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 a1bf4bc561..aa06d5f999 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 518aa6617a..1b25ece390 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 ec832ac036..78ae01da40 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 c171e6b950..3094985797 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 681d119e6a..e4f7538e6c 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 4acfb77f89..4bed912d94 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 16b3679a18..d9435ebf2d 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 37d9733d92..3528e3dcdd 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 d287b8852f..7542c6df37 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 aa06d5f999..25349c5b9c 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 45b15f4949..1c654f637a 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 baa5424d73..530df70cd1 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 1b25ece390..24589cf1b4 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 4bed912d94..a25b6b7511 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 d9435ebf2d..4290709de6 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 0000000000..cf1b60c2ba --- /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 a509a89f4b..f3d15b7ec0 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 4290709de6..01ec003d73 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 b55346bdd2..f2b3e237ce 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 8819fb2fb0..6339c07d8a 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 1825bc6ee4..b3a815a67d 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 8eb9f86290..d75e69a4fb 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 3528e3dcdd..5d81b4fe00 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 7542c6df37..f58adf6f80 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 b3a815a67d..b96d6afb6c 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 d75e69a4fb..c9e624db71 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 5d81b4fe00..946d9d19d2 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 f58adf6f80..4b710f6fe8 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 c9e624db71..76ccc23978 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 4b710f6fe8..2b02b2cc69 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 a5714c8ac3..b3b9ffaa9f 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 a26e08c2ce..8efb793099 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 9b2ff99b00..442b31da61 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 dda543eaa7..5ee63e3d25 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 946d9d19d2..244dc58602 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 2b02b2cc69..d9be4a9d75 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 62804d637e..a982ec80a6 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 3429065163..c87ff561c5 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 35490fcb1b..45fe693601 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 e0b375bec4..13242a3dfa 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 244dc58602..1ddb508992 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 d9be4a9d75..6dd1d7b6c4 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 648ba9f588..09515afdc3 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 92697cb799..006d8dc142 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 a4fc43e02b..2abce3257c 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 a323e28031..0147bc5a86 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 1ddb508992..24a719a2bb 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 6dd1d7b6c4..408e50bf51 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 bcb1c7aa4b..763457e3a9 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 8d8811daf3..2348ea6c54 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 cfda76b142..f623938cdc 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 8bb44e0416..435a1ead10 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 f93ae0f505..29cd823494 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 71962fd532..6003ae1704 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 7bc6cf4880..ed82cdcc21 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 d71dd7f561..aa042be7a7 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 f623938cdc..ff4297385f 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 ed82cdcc21..d3b3cdd2a5 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 2348ea6c54..aa8deb31bf 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 ff4297385f..405fecff28 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 14b4226686..98f2080636 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 6003ae1704..7678e9d50d 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 d3b3cdd2a5..4bc6212735 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 869f22fc62..d838eeb80c 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 01ec003d73..df98dca5d1 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 24a719a2bb..bd9d406e14 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: "", pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy