Skip to content

Commit ca9bbcf

Browse files
Imiss-U1025Imiss-U1025
committed
Updated guage chart.
1 parent dad3997 commit ca9bbcf

File tree

7 files changed

+55
-17
lines changed

7 files changed

+55
-17
lines changed

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartComp.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
147147
chartSize,
148148
themeConfig,
149149
);
150-
}, [chartSize, ...Object.values(echartsConfigChildren), theme, childrenToProps(echartsConfigChildren)]);
150+
}, [chartSize, ...Object.values(echartsConfigChildren)]);
151151

152152
useEffect(() => {
153153
comp.children.mapInstance.dispatch(changeValueAction(null, false))
@@ -175,7 +175,6 @@ FunnelChartTmpComp = withViewFn(FunnelChartTmpComp, (comp) => {
175175
lazyUpdate
176176
opts={{ locale: getEchartsLocale() }}
177177
option={option}
178-
theme={themeConfig}
179178
mode={mode}
180179
/>
181180
</ReactResizeDetector>

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartConstants.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import {
1717
clickEvent,
1818
styleControl,
1919
EchartsStyle,
20-
FunnelTextStyle,
21-
FunnelChartStyle
20+
EchartDefaultChartStyle,
21+
EchartDefaultTextStyle
2222
} from "lowcoder-sdk";
2323
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2424
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -278,10 +278,10 @@ let chartJsonModeChildren: any = {
278278
if (EchartsStyle) {
279279
chartJsonModeChildren = {
280280
...chartJsonModeChildren,
281-
chartStyle: styleControl(FunnelChartStyle, 'chartStyle'),
282-
titleStyle: styleControl(FunnelTextStyle, 'titleStyle'),
283-
labelStyle: styleControl(FunnelTextStyle, 'labelStyle'),
284-
legendStyle: styleControl(FunnelTextStyle, 'legendStyle'),
281+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
282+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
283+
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
284+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
285285
}
286286
}
287287

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartConstants.tsx

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@ import {
1616
uiChildren,
1717
clickEvent,
1818
styleControl,
19-
EchartsStyle
19+
EchartsStyle,
20+
EchartDefaultChartStyle,
21+
EchartDefaultTextStyle
2022
} from "lowcoder-sdk";
2123
import { RecordConstructorToComp, RecordConstructorToView } from "lowcoder-core";
2224
import { BarChartConfig } from "../chartComp/chartConfigs/barChartConfig";
@@ -265,12 +267,18 @@ let chartJsonModeChildren: any = {
265267
width:withDefault(NumberControl,trans('gaugeChart.defaultWidth')),
266268
min:withDefault(NumberControl,trans('gaugeChart.defaultMin')),
267269
max:withDefault(NumberControl,trans('gaugeChart.defaultMax')),
268-
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap'))
270+
gap:withDefault(NumberControl,trans('gaugeChart.defaultGap')),
271+
startAngle:withDefault(NumberControl,trans('gaugeChart.defaultStartAngle')),
272+
endAngle:withDefault(NumberControl,trans('gaugeChart.defaultEndAngle')),
273+
splitNumber:withDefault(NumberControl,trans('gaugeChart.defaultSplitNumber')),
269274
}
270275
if (EchartsStyle) {
271276
chartJsonModeChildren = {
272277
...chartJsonModeChildren,
273-
style: styleControl(EchartsStyle, 'style'),
278+
chartStyle: styleControl(EchartDefaultChartStyle, 'chartStyle'),
279+
titleStyle: styleControl(EchartDefaultTextStyle, 'titleStyle'),
280+
labelStyle: styleControl(EchartDefaultTextStyle, 'labelStyle'),
281+
legendStyle: styleControl(EchartDefaultTextStyle, 'legendStyle'),
274282
}
275283
}
276284
const chartMapModeChildren = {

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartPropertyView.tsx

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,26 @@ export function gaugeChartPropertyView(
3939
{children.width.propertyView({ label: trans("gaugeChart.width") })} */}
4040
{children.min.propertyView({ label: trans("gaugeChart.min") })}
4141
{children.max.propertyView({ label: trans("gaugeChart.max") })}
42+
{children.startAngle.propertyView({ label: trans("gaugeChart.startAngle") })}
43+
{children.endAngle.propertyView({ label: trans("gaugeChart.endAngle") })}
44+
{children.splitNumber.propertyView({ label: trans("gaugeChart.splitNumber") })}
4245
{/* {children.gap.propertyView({ label: trans("gaugeChart.gap") })} */}
4346
{children.tooltip.propertyView({ label: trans("gaugeChart.tooltip") })}
4447
</Section>
4548
<Section name={sectionNames.interaction}>
4649
{children.onEvent.propertyView()}
4750
</Section>
48-
<Section name={sectionNames.style}>
49-
{children.style?.getPropertyView()}
51+
<Section name={sectionNames.chartStyle}>
52+
{children.chartStyle?.getPropertyView()}
53+
</Section>
54+
<Section name={sectionNames.titleStyle}>
55+
{children.titleStyle?.getPropertyView()}
56+
</Section>
57+
<Section name={sectionNames.labelStyle}>
58+
{children.labelStyle?.getPropertyView()}
59+
</Section>
60+
<Section name={sectionNames.legendStyle}>
61+
{children.legendStyle?.getPropertyView()}
5062
</Section>
5163
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
5264
</>

‎client/packages/lowcoder-comps/src/comps/gaugeChartComp/gaugeChartUtils.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,13 +157,25 @@ export function getEchartsConfig(
157157
"min": props.min,
158158
"max": props.max,
159159
"gap": props.gap,
160+
"startAngle": props.startAngle,
161+
"endAngle": props.endAngle,
162+
"splitNumber": props.splitNumber,
160163
'detail': {
161164
"backgroundColor": props?.style?.background, "formatter": "{value}%"
162165
},
163166
"label": {
164167
"show": props.label,
165-
"position": props.echartsLabelConfig.top
166-
},
168+
"position": props.echartsLabelConfig.top,
169+
"fontFamily": props?.labelStyle?.chartFontFamily || theme?.labelStyle?.fontFamily,
170+
"fontSize": props?.labelStyle?.chartTextSize || theme?.labelStyle?.fontSize,
171+
"fontWeight": props?.labelStyle?.chartTextWeight || theme?.labelStyle?.fontWeight,
172+
"color": props?.labelStyle?.chartTextColor || theme?.labelStyle?.fontColor || "#000000",
173+
"fontStyle": props?.labelStyle?.chartFontStyle || theme?.labelStyle?.fontStyle,
174+
"textShadowColor": props?.labelStyle?.chartShadowColor || theme?.labelStyle?.shadowColor,
175+
"textShadowBlur": props?.labelStyle?.chartBoxShadow?.split('px')[0] || theme?.labelStyle?.boxShadow?.split('px')[0],
176+
"textShadowOffsetX": props?.labelStyle?.chartBoxShadow?.split('px')[1] || theme?.labelStyle?.boxShadow?.split('px')[1],
177+
"textShadowOffsetY": props?.labelStyle?.chartBoxShadow?.split('px')[2] || theme?.labelStyle?.boxShadow?.split('px')[2]
178+
},
167179
/*"detail": {
168180
"formatter": "{value}%"
169181
}, */

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,14 @@ export const en = {
103103
defaultMax:'100',
104104
gap: 'Gap',
105105
defaultGap: '2',
106+
defaultStartAngle: '180',
107+
startAngle: 'Start Angle',
108+
defaultEndAngle: '0',
109+
endAngle: 'End Angle',
110+
defaultSplitNumber: '10',
111+
splitNumber: 'Split Number',
106112
label:'Label',
113+
107114
},
108115
echarts: {
109116
defaultTitle: "Data Display",

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1964,7 +1964,7 @@ export const JsonEditorStyle = [LABEL] as const;
19641964

19651965
export const EchartsStyle = [getBackground("primarySurface")] as const;
19661966

1967-
export const FunnelTextStyle = [
1967+
export const EchartDefaultTextStyle = [
19681968
CHARTTEXTCOLOR,
19691969
CHARTTEXTSIZE,
19701970
CHARTTEXTWEIGHT,
@@ -1974,7 +1974,7 @@ export const FunnelTextStyle = [
19741974
CHARTBOXSHADOW,
19751975
] as const;
19761976

1977-
export const FunnelChartStyle = [
1977+
export const EchartDefaultChartStyle = [
19781978
CHARTBACKGROUNDCOLOR,
19791979
CHARTGRADIENTCOLOR,
19801980
DIRECTION,

0 commit comments

Comments
 (0)