Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix/pie chart layout (#27023)

Browse Source 
Fixes #27035
This commit is contained in:
Rajat Agrawal 2023-09-13 15:01:55 +05:30 committed by GitHub
parent 2cda8202eb
commit d49dc286c6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.test.ts
View File

@ -245,14 +245,14 @@ describe("EChartsConfigurationBuilder", () => {
},
},
{
top: 265,
left: "33.333333333333336%",
top: 80,
left: 495,
textAlign: "center",
text: "series1",
},
{
top: 265,
left: "66.66666666666667%",
top: 80,
left: 495,
textAlign: "center",
text: "series2",
},
@ -484,8 +484,8 @@ describe("EChartsConfigurationBuilder", () => {
expectedConfig.series = [
{
type: "pie",
radius: "60%",
center: ["50%", "60%"],
top: 100,
bottom: 30,
name: "series1",
encode: {
itemName: "Category",

26
app/client/src/widgets/ChartWidget/component/EChartsConfigurationBuilder.ts
View File

@ -17,6 +17,7 @@ export class EChartsConfigurationBuilder {
seriesID: string,
seriesData: ChartData,
showDataPointLabel: boolean,
layoutConfig: Record<string, Record<string, unknown>>,
) {
let seriesName = messages.Undefined;
if (seriesData.seriesName && seriesData.seriesName.length > 0) {
@ -25,8 +26,8 @@ export class EChartsConfigurationBuilder {
const config = {
type: "pie",
radius: "60%",
center: ["50%", "60%"],
top: layoutConfig.grid.top,
bottom: layoutConfig.grid.bottom,
name: seriesName,
label: {
show: showDataPointLabel,
@ -46,6 +47,7 @@ export class EChartsConfigurationBuilder {
#seriesConfigForChart(
props: ChartComponentProps,
allSeriesData: AllChartData,
layoutConfig: Record<string, Record<string, unknown>>,
) {
/**
* {
@ -98,6 +100,7 @@ export class EChartsConfigurationBuilder {
seriesID,
seriesData,
props.showDataPointLabel,
layoutConfig,
);
break;
}
@ -118,16 +121,13 @@ export class EChartsConfigurationBuilder {
#titleConfigForPiechart(
props: ChartComponentProps,
allSeriesData: AllChartData,
layoutConfig: Record<string, Record<string, unknown>>,
) {
const config: Record<string, unknown>[] = [];
const numSeries = Object.keys(allSeriesData).length;
const interval = 100 / (numSeries + 1);
Object.values(allSeriesData).forEach((seriesData, index) => {
const offset = `${(index + 1) * interval}%`;
Object.values(allSeriesData).forEach((seriesData) => {
config.push({
top: this.seriesTitleOffsetForPieChart(props),
left: offset,
top: (layoutConfig.grid.top as number) - 20,
left: props.dimensions.componentWidth / 2 - 5,
textAlign: "center",
text: seriesData.seriesName ?? "",
});
@ -172,7 +172,7 @@ export class EChartsConfigurationBuilder {
if (props.chartType == "PIE_CHART") {
return [
defaultTitleConfig,
...this.#titleConfigForPiechart(props, allSeriesData),
...this.#titleConfigForPiechart(props, allSeriesData, layoutConfig),
];
} else {
return defaultTitleConfig;
@ -350,7 +350,11 @@ export class EChartsConfigurationBuilder {
chartConfig.yAxis = this.#yAxisConfig(props, layoutConfig);
chartConfig.dataZoom = this.#scrollConfig(props, layoutConfig);
chartConfig.series = this.#seriesConfigForChart(props, allSeriesData);
chartConfig.series = this.#seriesConfigForChart(
props,
allSeriesData,
layoutConfig,
);
return chartConfig;
}
}