Skip to content

Commit 5da87e0

Browse files
Imiss-U1025Imiss-U1025
committed
Polar end angle
1 parent ec054bb commit 5da87e0

File tree

4 files changed

+50
-36
lines changed

4 files changed

+50
-36
lines changed

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartConstants.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { i18nObjs, trans } from "i18n/comps";
3535
import { GaugeChartConfig } from "../basicChartComp/chartConfigs/gaugeChartConfig";
3636
import { FunnelChartConfig } from "../basicChartComp/chartConfigs/funnelChartConfig";
3737
import {EchartsTitleVerticalConfig} from "../chartComp/chartConfigs/echartsTitleVerticalConfig";
38-
import {EchartsTitleConfig} from "../chartComp/chartConfigs/echartsTitleConfig";
38+
import {EchartsTitleConfig} from "../basicChartComp/chartConfigs/echartsTitleConfig";
3939

4040
export const ChartTypeOptions = [
4141
{

‎client/packages/lowcoder-comps/src/comps/barChartComp/barChartUtils.ts

Lines changed: 26 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
ChartSize,
55
noDataAxisConfig,
66
noDataPieChartConfig,
7-
} from "comps/basicChartComp/chartConstants";
7+
} from "comps/barChartComp/barChartConstants";
88
import { getPieRadiusAndCenter } from "comps/basicChartComp/chartConfigs/pieChartConfig";
99
import { EChartsOptionWithMap } from "../basicChartComp/reactEcharts/types";
1010
import _ from "lodash";
@@ -56,6 +56,7 @@ export function transformData(
5656
}
5757

5858
const notAxisChartSet: Set<CharOptionCompType> = new Set(["pie"] as const);
59+
const notAxisChartSubtypeSet: Set<string> = new Set(["polar"] as const);
5960
export const echartsConfigOmitChildren = [
6061
"hidden",
6162
"selectedPoints",
@@ -65,8 +66,8 @@ export const echartsConfigOmitChildren = [
6566
type EchartsConfigProps = Omit<ChartCompPropsType, typeof echartsConfigOmitChildren[number]>;
6667

6768

68-
export function isAxisChart(type: CharOptionCompType) {
69-
return !notAxisChartSet.has(type);
69+
export function isAxisChart(type: CharOptionCompType, subtype: string) {
70+
return !notAxisChartSet.has(type) && !notAxisChartSubtypeSet.has(subtype);
7071
}
7172

7273
export function getSeriesConfig(props: EchartsConfigProps) {
@@ -78,7 +79,7 @@ export function getSeriesConfig(props: EchartsConfigProps) {
7879
}
7980
const seriesLength = visibleSeries.length;
8081
return visibleSeries.map((s, index) => {
81-
if (isAxisChart(props.chartConfig.type)) {
82+
if (isAxisChart(props.chartConfig.type, props.chartConfig.subtype)) {
8283
let encodeX: string, encodeY: string;
8384
const horizontalX = props.xAxisDirection === "horizontal";
8485
let itemStyle = props.chartConfig.itemStyle;
@@ -151,7 +152,7 @@ export function getEchartsConfig(
151152
theme?: any,
152153
): EChartsOptionWithMap {
153154
// axisChart
154-
const axisChart = isAxisChart(props.chartConfig.type);
155+
const axisChart = isAxisChart(props.chartConfig.type, props.chartConfig.subtype);
155156
const gridPos = {
156157
left: `${props?.left}%`,
157158
right: `${props?.right}%`,
@@ -222,7 +223,7 @@ export function getEchartsConfig(
222223
config = {
223224
...config,
224225
polar: {
225-
radius: [props.chartConfig.polarData.polarRadiusDeg, `${props.chartConfig.polarData.polarRadiusSize}%`],
226+
radius: [props.chartConfig.polarData.polarRadiusStart, props.chartConfig.polarData.polarRadiusEnd],
226227
},
227228
radiusAxis: {
228229
type: props.chartConfig.polarData.polarIsTangent?'category':undefined,
@@ -233,7 +234,8 @@ export function getEchartsConfig(
233234
type: props.chartConfig.polarData.polarIsTangent?undefined:'category',
234235
data: props.chartConfig.polarData.polarIsTangent?undefined:props.chartConfig.polarData.labelData,
235236
max: props.chartConfig.polarData.polarIsTangent?props.chartConfig.polarData.radiusAxisMax || undefined:undefined,
236-
startAngle: 75
237+
startAngle: props.chartConfig.polarData.polarStartAngle,
238+
endAngle: props.chartConfig.polarData.polarEndAngle,
237239
},
238240
}
239241
}
@@ -305,27 +307,26 @@ export function getEchartsConfig(
305307
}
306308
},
307309
};
310+
}
308311

309-
//Waterfall x-label initialization
310-
if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
311-
//default labels
312-
config.xAxis.data = ["Total"];
313-
for(let i=1; i<transformedData.length; i++)
314-
config.xAxis.data.push(`Column${i}`);
315-
}
312+
//Waterfall x-label initialization
313+
if(props.chartConfig?.subtype === "waterfall" && props.xAxisData.length === 0) {
314+
//default labels
315+
config.xAxis.data = ["Total"];
316+
for(let i=1; i<transformedData.length; i++)
317+
config.xAxis.data.push(`Column${i}`);
318+
}
316319

317-
//Polar x-label initialization
318-
if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
319-
//default labels
320-
let labelData = [];
321-
for(let i=0; i<transformedData.length; i++)
322-
labelData.push(`C${i+1}`);
323-
if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
324-
if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
325-
}
326-
console.log("Config", config);
327-
console.log("Props", props);
320+
//Polar x-label initialization
321+
if(props.chartConfig?.subtype === "polar" && props.chartConfig.polarData.labelData.length === 0) {
322+
//default labels
323+
let labelData = [];
324+
for(let i=0; i<transformedData.length; i++)
325+
labelData.push(`C${i+1}`);
326+
if(props.chartConfig.polarData.polarIsTangent && config.radiusAxis.data.length === 0) config.radiusAxis.data = labelData;
327+
if(!props.chartConfig.polarData.polarIsTangent && config.angleAxis.data.length === 0) config.angleAxis.data = labelData;
328328
}
329+
console.log("Config", config);
329330
// log.log("Echarts transformedData and config", transformedData, config);
330331
return config;
331332
}

‎client/packages/lowcoder-comps/src/comps/basicChartComp/chartConfigs/barChartConfig.tsx

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
BoolControl,
33
NumberControl,
4+
StringControl,
45
withDefault,
56
dropdownControl,
67
MultiCompBuilder,
@@ -42,8 +43,10 @@ export const BarChartConfig = (function () {
4243
showBackground: BoolControl,
4344
backgroundColor: withDefault(ColorControl, i18nObjs.defaultBarChartOption.barBg),
4445
radiusAxisMax: NumberControl,
45-
polarRadiusDeg: withDefault(NumberControl, 30),
46-
polarRadiusSize: withDefault(NumberControl, 80),
46+
polarRadiusStart: withDefault(StringControl, '30'),
47+
polarRadiusEnd: withDefault(StringControl, '80%'),
48+
polarStartAngle: withDefault(NumberControl, 90),
49+
polarEndAngle: withDefault(NumberControl, -180),
4750
polarIsTangent: withDefault(BoolControl, false),
4851
labelData: jsonControl(toArray, []),
4952
},
@@ -62,8 +65,10 @@ export const BarChartConfig = (function () {
6265
},
6366
polarData: {
6467
radiusAxisMax: props.radiusAxisMax,
65-
polarRadiusDeg: props.polarRadiusDeg,
66-
polarRadiusSize: props.polarRadiusSize,
68+
polarRadiusStart: props.polarRadiusStart,
69+
polarRadiusEnd: props.polarRadiusEnd,
70+
polarStartAngle: props.polarStartAngle,
71+
polarEndAngle: props.polarEndAngle,
6772
labelData: props.labelData,
6873
polarIsTangent: props.polarIsTangent,
6974
}
@@ -105,14 +110,20 @@ export const BarChartConfig = (function () {
105110
{children.type.getView() === "polar" && children.polarIsTangent.propertyView({
106111
label: trans("barChart.polarIsTangent"),
107112
})}
113+
{children.type.getView() === "polar" && children.polarStartAngle.propertyView({
114+
label: trans("barChart.polarStartAngle"),
115+
})}
116+
{children.type.getView() === "polar" && children.polarEndAngle.propertyView({
117+
label: trans("barChart.polarEndAngle"),
118+
})}
108119
{children.type.getView() === "polar" && children.radiusAxisMax.propertyView({
109120
label: trans("barChart.radiusAxisMax"),
110121
})}
111-
{children.type.getView() === "polar" && children.polarRadiusDeg.propertyView({
112-
label: trans("barChart.polarRadiusDeg"),
122+
{children.type.getView() === "polar" && children.polarRadiusStart.propertyView({
123+
label: trans("barChart.polarRadiusStart"),
113124
})}
114-
{children.type.getView() === "polar" && children.polarRadiusSize.propertyView({
115-
label: trans("barChart.polarRadiusSize"),
125+
{children.type.getView() === "polar" && children.polarRadiusEnd.propertyView({
126+
label: trans("barChart.polarRadiusEnd"),
116127
})}
117128
{children.type.getView() === "polar" && children.labelData.propertyView({
118129
label: trans("barChart.polarLabelData"),

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -319,9 +319,11 @@ export const en = {
319319
bgColor: 'Background Color',
320320
polarIsTangent: 'Tangential Chart',
321321
radiusAxisMax: 'Max',
322-
polarRadiusDeg: 'Degree',
323-
polarRadiusSize: 'Size (%)',
322+
polarRadiusStart: 'Start Radius',
323+
polarRadiusEnd: 'End Radius',
324324
polarLabelData: 'Label Data',
325+
polarStartAngle: 'Start Angle',
326+
polarEndAngle: 'End Angle',
325327
defaultTitle: 'Bar Chart',
326328
barType: 'Bar Chart Type',
327329
tooltip: 'Tooltip',

0 commit comments

Comments
 (0)