Skip to content

Commit ef80346

Browse files
committed
Added control fields and style fields to sunburst charts.
1 parent 56f6afd commit ef80346

File tree

6 files changed

+112
-33
lines changed

6 files changed

+112
-33
lines changed

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartComp.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -145,7 +145,7 @@ SunburstChartTmpComp = withViewFn(SunburstChartTmpComp, (comp) => {
145145
return getEchartsConfig(
146146
childrenToProps(echartsConfigChildren) as ToViewReturn<typeof echartsConfigChildren>,
147147
chartSize,
148-
theme?.theme?.components?.candleStickChart || {},
148+
themeConfig
149149
);
150150
}, [chartSize, ...Object.values(echartsConfigChildren)]);
151151

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartConstants.tsx

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartDefaultChartStyle,
20+
EchartDefaultTextStyle,
21+
RadarLabelStyle
2022
} from "lowcoder-sdk";
2123
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2224
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -31,6 +33,8 @@ import { SeriesListComp } from "../chartComp/seriesComp";
3133
import { EChartsOption } from "echarts";
3234
import { i18nObjs, trans } from "i18n/comps";
3335
import { SunburstChartConfig } from "comps/chartComp/chartConfigs/sunburstChartConfig";
36+
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
37+
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
3438

3539
export const ChartTypeOptions = [
3640
{
@@ -253,14 +257,22 @@ let chartJsonModeChildren: any = {
253257
echartsLegendConfig: EchartsLegendConfig,
254258
echartsLabelConfig: EchartsLabelConfig,
255259
echartsConfig: EchartsOptionComp,
256-
// style: styleControl(EchartsStyle, 'style'),
260+
echartsTitleVerticalConfig: EchartsTitleVerticalConfig,
261+
echartsTitleConfig:EchartsTitleConfig,
262+
263+
radiusInline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusInline')),
264+
radiusOutline:withDefault(NumberControl,trans('sunburstChart.defaultRadiusOutline')),
265+
position_x:withDefault(StringControl,trans('sunburstChart.defaultPosition_X')),
266+
position_y:withDefault(StringControl,trans('sunburstChart.defaultPosition_Y')),
257267
tooltip: withDefault(BoolControl, true),
258-
legendVisibility: withDefault(BoolControl, true),
268+
labelVisibility: withDefault(BoolControl, true),
259269
}
260-
if (EchartsStyle) {
270+
if (RadarLabelStyle && EchartDefaultChartStyle && EchartDefaultTextStyle) {
261271
chartJsonModeChildren = {
262272
...chartJsonModeChildren,
263-
style: styleControl(EchartsStyle, 'style'),
273+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
274+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
275+
detailStyle: styleControl(RadarLabelStyle, 'detailStyle'),
264276
}
265277
}
266278

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartPropertyView.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,35 @@ export function sunburstChartPropertyView(
3131
</div>
3232
),
3333
})}
34-
{children.echartsTitle.propertyView({ label: trans("sunburstChart.title") })}
35-
{children.tooltip.propertyView({label: trans("sunburstChart.tooltip")})}
34+
{children.echartsTitleConfig.getPropertyView()}
35+
{children.echartsTitleVerticalConfig.getPropertyView()}
36+
37+
{children.echartsTitle.propertyView({ label: trans("sunburstChart.title"), tooltip: trans("echarts.titleTooltip") })}
38+
{children.radiusInline.propertyView({ label: trans("sunburstChart.radiusInline"), tooltip: trans("sunburstChart.radiusInlineTooltip") })}
39+
{children.radiusOutline.propertyView({ label: trans("sunburstChart.radiusOutline"), tooltip: trans("sunburstChart.radiusOutlineTooltip") })}
40+
{children.position_x.propertyView({ label: trans("sunburstChart.position_x"), tooltip: trans("echarts.positionChart_x_Tooltip") })}
41+
{children.position_y.propertyView({ label: trans("sunburstChart.position_Y"), tooltip: trans("echarts.positionChart_y_Tooltip") })}
42+
43+
{children.tooltip.propertyView({label: trans("sunburstChart.tooltip"), tooltip: trans("echarts.tooltipTooltip")})}
44+
{children.labelVisibility.propertyView({label: trans("sunburstChart.labelVisibility"), tooltip: trans("echarts.labelVisibilityTooltip")})}
3645
</Section>
3746
<Section name={sectionNames.interaction}>
3847
{children.onEvent.propertyView()}
3948
</Section>
40-
<Section name={sectionNames.style}>
41-
{children.style?.getPropertyView()}
49+
50+
<Section name={sectionNames.chartStyle}>
51+
{children.chartStyle?.getPropertyView()}
4252
</Section>
53+
<Section name={sectionNames.titleStyle}>
54+
{children.titleStyle?.getPropertyView()}
55+
</Section>
56+
{
57+
children.labelVisibility.getView() &&
58+
<Section name={sectionNames.detailStyle}>
59+
{children.detailStyle?.getPropertyView()}
60+
</Section>
61+
}
62+
4363
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
4464
</>
4565
);

client/packages/lowcoder-comps/src/comps/sunburstChartComp/sunburstChartUtils.ts

Lines changed: 37 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ import { chartColorPalette, isNumeric, JSONObject, loadScript } from "lowcoder-s
1212
import { calcXYConfig } from "comps/chartComp/chartConfigs/cartesianAxisConfig";
1313
import Big from "big.js";
1414
import { googleMapsApiUrl } from "../chartComp/chartConfigs/chartUrls";
15+
import {chartStyleWrapper, styleWrapper} from "../../util/styleWrapper";
16+
import parseBackground from "../../util/gradientBackgroundColor";
1517

1618
export function transformData(
1719
originData: JSONObject[],
@@ -133,32 +135,44 @@ export function getEchartsConfig(
133135
chartSize?: ChartSize,
134136
theme?: any,
135137
): EChartsOptionWithMap {
138+
136139
if (props.mode === "json") {
137140
let opt={
138-
"title": {
139-
"text": props.echartsTitle,
140-
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
141-
"left":"center"
142-
},
143-
"backgroundColor": props?.style?.background || theme?.style?.background,
144-
"color": props.echartsOption.data?.map(data => data.color),
145-
"tooltip": props.tooltip&&{
146-
"trigger": "item",
147-
"formatter": "{b}: {c}"
148-
},
149-
"series": [
150-
{
151-
"name": props.echartsConfig.type,
152-
"type": props.echartsConfig.type,
153-
"top": "10%",
154-
"left": "10%",
155-
"bottom": "10%",
156-
"right": "10%",
157-
"symbolSize": 7,
158-
'data': props.echartsOption.data,
141+
title: {
142+
text: props?.echartsTitle,
143+
top: props?.echartsTitleVerticalConfig.top,
144+
left: props?.echartsTitleConfig.top,
145+
textStyle: {
146+
...styleWrapper(props?.titleStyle, theme?.titleStyle)
147+
}
148+
},
149+
backgroundColor: parseBackground(
150+
props?.chartStyle?.background || theme?.chartStyle?.backgroundColor || "#FFFFFF"
151+
),
152+
color: props.echartsOption.data?.map(data => data.color),
153+
tooltip: props.tooltip&&{
154+
trigger: "item",
155+
formatter: "{b}: {c}"
156+
},
157+
series: [
158+
{
159+
type: props.echartsConfig.type,
160+
radius: [`${props?.radiusInline}%`, `${props?.radiusOutline}%`],
161+
center: [`${props?.position_x}%`, `${props?.position_y}%`],
162+
symbolSize: 7,
163+
data: props.echartsOption.data,
164+
levels: props.echartsOption.levels,
165+
itemStyle: {
166+
...chartStyleWrapper(props?.chartStyle, theme?.chartStyle)
167+
},
168+
label: {
169+
show: props?.labelVisibility,
170+
rotate: 'tangential',
171+
...styleWrapper(props?.detailStyle, theme?.detailStyle,11)
172+
},
173+
}
174+
],
159175
}
160-
]
161-
}
162176
return props.echartsOption ? opt : {};
163177

164178
}

client/packages/lowcoder-comps/src/i18n/comps/locales/en.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,17 @@ export const en = {
2626
title: 'Title',
2727
defaultTitle: 'Sunburst Chart',
2828
tooltip: 'Tooltip',
29+
defaultRadiusInline: "20",
30+
defaultRadiusOutline: "80",
31+
defaultPosition_X: "50",
32+
defaultPosition_Y: "50",
33+
radiusInline: "Inline Radius",
34+
radiusOutline: "Outline Radius",
35+
position_x: "Position-X",
36+
position_Y: "Position-Y",
37+
radiusInlineTooltip: "Set the Inline radius value of the Chart.",
38+
radiusOutlineTooltip: "Set the Outline radius value of the Chart.",
39+
labelVisibility: "Label"
2940
},
3041
treemapChart: {
3142
treemapType: 'Treemap Chart Type',

client/packages/lowcoder-comps/src/i18n/comps/locales/enObj.tsx

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -474,6 +474,28 @@ export const enObj: I18nObjects = {
474474
}
475475
]
476476
}
477+
],
478+
levels: [
479+
{
480+
itemStyle: {
481+
color: '#f6e58d'
482+
},
483+
},
484+
{
485+
itemStyle: {
486+
color: '#12e192'
487+
},
488+
},
489+
{
490+
itemStyle: {
491+
color: '#ffbe76'
492+
},
493+
},
494+
{
495+
itemStyle: {
496+
color: '#007979'
497+
},
498+
}
477499
]
478500
},
479501
defaultCalendarChartOption: {

0 commit comments

Comments
 (0)