From f9a91730aa7df78986b1194a5e286de65e1279b8 Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Sat, 2 Sep 2023 15:45:30 +0530 Subject: [PATCH] Small minor changes --- .../xychart/chartBuilder/Orchestrator.ts | 52 +++++++++---------- .../chartBuilder/components/plot/BarPlot.ts | 4 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 36 ++----------- 3 files changed, 33 insertions(+), 59 deletions(-) diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index e18eb92a3..278869786 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -22,8 +22,8 @@ export class Orchestrator { constructor( private chartConfig: XYChartConfig, private chartData: XYChartData, - private chartThemeConfig: XYChartThemeConfig, - private tmpSVGGElem: SVGGType + chartThemeConfig: XYChartThemeConfig, + tmpSVGGElem: SVGGType ) { this.componentStore = { title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), @@ -54,8 +54,8 @@ export class Orchestrator { private calculateVerticalSpace() { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -72,7 +72,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by title: ', spaceUsed); - chartY = spaceUsed.height; + plotY = spaceUsed.height; availableHeight -= spaceUsed.height; this.componentStore.xAxis.setAxisPosition('bottom'); spaceUsed = this.componentStore.xAxis.calculateSpace({ @@ -87,7 +87,7 @@ export class Orchestrator { height: availableHeight, }); log.trace('space used by yaxis: ', spaceUsed); - chartX = spaceUsed.width; + plotX = spaceUsed.width; availableWidth -= spaceUsed.width; if (availableWidth > 0) { chartWidth += availableWidth; @@ -98,8 +98,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -108,14 +108,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); - this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight }); + this.componentStore.yAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } @@ -125,8 +125,8 @@ export class Orchestrator { let availableWidth = this.chartConfig.width; let availableHeight = this.chartConfig.height; let titleYEnd = 0; - let chartX = 0; - let chartY = 0; + let plotX = 0; + let plotY = 0; let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartHeight = Math.floor( (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 @@ -151,7 +151,7 @@ export class Orchestrator { height: availableHeight, }); availableWidth -= spaceUsed.width; - chartX = spaceUsed.width; + plotX = spaceUsed.width; log.trace('space used by xaxis: ', spaceUsed); this.componentStore.yAxis.setAxisPosition('top'); spaceUsed = this.componentStore.yAxis.calculateSpace({ @@ -160,7 +160,7 @@ export class Orchestrator { }); log.trace('space used by yaxis: ', spaceUsed); availableHeight -= spaceUsed.height; - chartY = titleYEnd + spaceUsed.height; + plotY = titleYEnd + spaceUsed.height; if (availableWidth > 0) { chartWidth += availableWidth; availableWidth = 0; @@ -170,8 +170,8 @@ export class Orchestrator { availableHeight = 0; } const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; - chartX += plotBorderWidthHalf; - chartY += plotBorderWidthHalf; + plotX += plotBorderWidthHalf; + plotY += plotBorderWidthHalf; chartWidth -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth; this.componentStore.plot.calculateSpace({ @@ -180,14 +180,14 @@ export class Orchestrator { }); log.trace( - `Final chart dimansion: x = ${chartX}, y = ${chartY}, width = ${chartWidth}, height = ${chartHeight}` + `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}` ); - this.componentStore.plot.setBoundingBoxXY({ x: chartX, y: chartY }); - this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); - this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); - this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); - this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); + this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY }); + this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]); + this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd }); + this.componentStore.xAxis.setRange([plotY, plotY + chartHeight]); + this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: plotY }); if (this.chartData.plots.some((p) => isBarPlot(p))) { this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts index 20d1af311..b0a62df1f 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -17,11 +17,11 @@ export class BarPlot { this.yAxis.getScaleValue(d[1]), ]); - const barPaddingPercent = 5; + const barPaddingPercent = 0.05; const barWidth = Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * - (1 - barPaddingPercent / 100); + (1 - barPaddingPercent); const barWidthHalf = barWidth / 2; if (this.orientation === 'horizontal') { diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index 455376266..80d6ae635 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -50,47 +50,21 @@ interface NormalTextType { function getChartDefaultThemeConfig(): XYChartThemeConfig { return { - backgroundColor: - config.themeVariables?.xyChart?.backgroundColor || - defaultThemeVariables.xyChart.backgroundColor, - titleColor: - config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor, - axisLineColor: - config.themeVariables?.xyChart?.axisLineColor || defaultThemeVariables.xyChart.axisLineColor, - xAxisLableColor: - config.themeVariables?.xyChart?.xAxisLableColor || - defaultThemeVariables.xyChart.xAxisLableColor, - xAxisTitleColor: - config.themeVariables?.xyChart?.xAxisTitleColor || - defaultThemeVariables.xyChart.xAxisTitleColor, - xAxisTickColor: - config.themeVariables?.xyChart?.xAxisTickColor || - defaultThemeVariables.xyChart.xAxisTickColor, - yAxisLableColor: - config.themeVariables?.xyChart?.yAxisLableColor || - defaultThemeVariables.xyChart.yAxisLableColor, - yAxisTitleColor: - config.themeVariables?.xyChart?.yAxisTitleColor || - defaultThemeVariables.xyChart.yAxisTitleColor, - yAxisTickColor: - config.themeVariables?.xyChart?.yAxisTickColor || - defaultThemeVariables.xyChart.yAxisTickColor, - plotColorPalette: - config.themeVariables?.xyChart?.plotColorPalette || - defaultThemeVariables.xyChart.plotColorPalette, + ...defaultThemeVariables.xyChart, + ...config.themeVariables?.xyChart, }; } function getChartDefaultConfig(): XYChartConfig { return { ...(defaultConfig.xyChart as XYChartConfig), - ...(config.xyChart ? config.xyChart : {}), + ...config.xyChart, yAxis: { ...(defaultConfig.xyChart as XYChartConfig).yAxis, - ...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), + ...config.xyChart?.yAxis, }, xAxis: { ...(defaultConfig.xyChart as XYChartConfig).xAxis, - ...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), + ...config.xyChart?.xAxis, }, }; }