Skip to content

Commit 4f9b411

Browse files
Imiss-U1025Imiss-U1025
committed
Added label, Chart style.
1 parent ee0161b commit 4f9b411

File tree

7 files changed

+49
-8
lines changed

7 files changed

+49
-8
lines changed

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -280,11 +280,12 @@ if (EchartsStyle) {
280280
chartJsonModeChildren = {
281281
...chartJsonModeChildren,
282282
style: styleControl(FunnelStyle, 'style'),
283-
chartStyle: styleControl(FunnelChartStyle, 'style')
283+
titleStyle: styleControl(FunnelStyle, 'titleStyle'),
284+
chartStyle: styleControl(FunnelChartStyle, 'chartStyle')
284285
}
285286
}
286287

287-
console.log(FunnelStyle)
288+
console.log(FunnelChartStyle)
288289

289290
const chartMapModeChildren = {
290291
mapInstance: stateComp(),

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,14 @@ export function funnelChartPropertyView(
5252
<Section name={sectionNames.interaction}>
5353
{children.onEvent.propertyView()}
5454
</Section>
55-
<Section name={sectionNames.style}>
56-
{children.style?.getPropertyView()}
55+
<Section name={sectionNames.chartStyle}>
56+
{children.chartStyle?.getPropertyView()}
57+
</Section>
58+
<Section name={sectionNames.titleStyle}>
59+
{children.titleStyle?.getPropertyView()}
60+
</Section>
61+
<Section name={sectionNames.labelStyle}>
62+
{children.style?.getPropertyView()}
5763
</Section>
5864
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
5965
</>

‎client/packages/lowcoder-comps/src/comps/funnelChartComp/funnelChartUtils.ts

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ 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 opacityToHex from "../../util/opacityToHex";
1516

1617
export function transformData(
1718
originData: JSONObject[],
@@ -133,14 +134,27 @@ export function getEchartsConfig(
133134
chartSize?: ChartSize,
134135
theme?: any,
135136
): EChartsOptionWithMap {
137+
138+
console.log("props?.titleStyle",props.echartsOption.data?.map(data=>data.color));
136139
if (props.mode === "json") {
137140
let opt={
138141
"title": {
139142
"text": props.echartsTitle,
140143
'top': props.echartsLegendConfig.top === 'bottom' ?'top':'bottom',
141-
"left":props.echartsTitleConfig.top
144+
"left":props.echartsTitleConfig.top,
145+
"textStyle": {
146+
"fontFamily": props?.titleStyle?.fontFamily || theme?.style?.fontFamily,
147+
"fontSize": props?.titleStyle?.textSize || theme?.style?.textSize,
148+
"fontWeight": props?.titleStyle?.textWeight || theme?.style?.textWeight,
149+
"color": props?.titleStyle?.text || theme?.style?.text,
150+
"fontStyle": props?.titleStyle?.fontStyle || theme?.style?.fontStyle,
151+
"textShadowColor": props?.titleStyle?.boxShadowColor || theme?.style?.boxShadowColor,
152+
"textShadowBlur": props?.titleStyle?.boxShadow?.split(' ')[0],
153+
"textShadowOffsetX": props?.titleStyle?.boxShadow?.split(' ')[1],
154+
"textShadowOffsetY": props?.titleStyle?.boxShadow?.split(' ')[2]
155+
}
142156
},
143-
"backgroundColor": props?.style?.background || theme?.style?.background,
157+
"backgroundColor": props?.chartStyle?.opacity ? props?.chartStyle?.background + opacityToHex(props?.chartStyle?.opacity) || theme?.style?.background : props?.chartStyle?.background || theme?.style?.background,
144158
"color": props.echartsOption.data?.map(data => data.color),
145159
"tooltip": props.tooltip&&{
146160
"trigger": "item",
@@ -164,7 +178,15 @@ export function getEchartsConfig(
164178
"funnelAlign": props.echartsFunnelAlignConfig.funnelAlign,
165179
"sort": props.echartsSortingConfig.sort,
166180
"itemStyle": {
167-
"opacity": props.opacity
181+
"opacity": props.opacity,
182+
"borderColor": props?.chartStyle?.border || theme?.style?.border,
183+
"borderWidth": props?.chartStyle?.borderWidth,
184+
"borderType": props?.chartStyle?.borderStyle,
185+
"borderRadius": props?.chartStyle?.radius,
186+
"shadowColor": props?.chartStyle?.boxShadowColor || theme?.style?.boxShadowColor,
187+
"shadowBlur": props?.chartStyle?.boxShadow?.split(' ')[0],
188+
"shadowOffsetX": props?.chartStyle?.boxShadow?.split(' ')[0],
189+
"shadowOffsetY": props?.chartStyle?.boxShadow?.split(' ')[0]
168190
},
169191
"label": {
170192
"show": props.label,

‎client/packages/lowcoder-comps/src/util/opacityToHex.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default function opacityToHex(opacity) {
2+
opacity = Math.max(0, Math.min(1, opacity));
3+
const decimalValue = Math.round(opacity * 255);
4+
const hexValue = decimalValue.toString(16).toUpperCase();
5+
return hexValue.padStart(2, '0');
6+
}

‎client/packages/lowcoder-design/src/components/Section.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,4 +187,6 @@ export const sectionNames = {
187187
badgeStyle:trans("prop.badgeStyle"),
188188
columnStyle:trans("prop.columnStyle"),
189189
modalStyle:trans("prop.modalStyle"),
190+
chartStyle:trans("prop.chartStyle"),
191+
titleStyle:trans("prop.titleStyle"),
190192
};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,8 @@ export const en = {
4040
badgeStyle: 'Badge Style',
4141
columnStyle: 'Column Style',
4242
modalStyle: 'Modal Style',
43+
chartStyle: "Chart Style",
44+
titleStyle: "Title Style"
4345
},
4446
passwordInput: {
4547
label: "Password:",

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1794,7 +1794,6 @@ export const JsonEditorStyle = [LABEL] as const;
17941794
export const EchartsStyle = [getBackground("primarySurface")] as const;
17951795

17961796
export const FunnelStyle = [
1797-
getBackground("primarySurface"),
17981797
TEXT,
17991798
TEXT_SIZE,
18001799
TEXT_WEIGHT,
@@ -1805,7 +1804,10 @@ export const FunnelStyle = [
18051804
] as const;
18061805

18071806
export const FunnelChartStyle = [
1807+
getBackground("primarySurface"),
18081808
OPACITY,
1809+
BOXSHADOWCOLOR,
1810+
BOXSHADOW,
18091811
BORDER,
18101812
BORDER_STYLE,
18111813
RADIUS,

0 commit comments

Comments
 (0)