marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-18 06:49:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Small minor changes

Browse Source
This commit is contained in:
Subhash Halder
2023-09-02 15:45:30 +05:30
parent 7bdf4c3dbb
commit f9a91730aa
3 changed files with 33 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
View File

@@ -22,8 +22,8 @@ export class Orchestrator {
constructor( constructor(
private chartConfig: XYChartConfig, private chartConfig: XYChartConfig,
private chartData: XYChartData, private chartData: XYChartData,
private chartThemeConfig: XYChartThemeConfig, chartThemeConfig: XYChartThemeConfig,
private tmpSVGGElem: SVGGType tmpSVGGElem: SVGGType
) { ) {
this.componentStore = { this.componentStore = {
title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem), title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig, tmpSVGGElem),
@@ -54,8 +54,8 @@ export class Orchestrator {
private calculateVerticalSpace() { private calculateVerticalSpace() {
let availableWidth = this.chartConfig.width; let availableWidth = this.chartConfig.width;
let availableHeight = this.chartConfig.height; let availableHeight = this.chartConfig.height;
let chartX = 0; let plotX = 0;
let chartY = 0; let plotY = 0;
let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100);
let chartHeight = Math.floor( let chartHeight = Math.floor(
(availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100
@@ -72,7 +72,7 @@ export class Orchestrator {
height: availableHeight, height: availableHeight,
}); });
log.trace('space used by title: ', spaceUsed); log.trace('space used by title: ', spaceUsed);
chartY = spaceUsed.height; plotY = spaceUsed.height;
availableHeight -= spaceUsed.height; availableHeight -= spaceUsed.height;
this.componentStore.xAxis.setAxisPosition('bottom'); this.componentStore.xAxis.setAxisPosition('bottom');
spaceUsed = this.componentStore.xAxis.calculateSpace({ spaceUsed = this.componentStore.xAxis.calculateSpace({
@@ -87,7 +87,7 @@ export class Orchestrator {
height: availableHeight, height: availableHeight,
}); });
log.trace('space used by yaxis: ', spaceUsed); log.trace('space used by yaxis: ', spaceUsed);
chartX = spaceUsed.width; plotX = spaceUsed.width;
availableWidth -= spaceUsed.width; availableWidth -= spaceUsed.width;
if (availableWidth > 0) { if (availableWidth > 0) {
chartWidth += availableWidth; chartWidth += availableWidth;
@@ -98,8 +98,8 @@ export class Orchestrator {
availableHeight = 0; availableHeight = 0;
} }
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
chartX += plotBorderWidthHalf; plotX += plotBorderWidthHalf;
chartY += plotBorderWidthHalf; plotY += plotBorderWidthHalf;
chartWidth -= this.chartConfig.plotBorderWidth; chartWidth -= this.chartConfig.plotBorderWidth;
chartHeight -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({ this.componentStore.plot.calculateSpace({
@@ -108,14 +108,14 @@ export class Orchestrator {
}); });
log.trace( 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.plot.setBoundingBoxXY({ x: plotX, y: plotY });
this.componentStore.xAxis.setRange([chartX, chartX + chartWidth]); this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]);
this.componentStore.xAxis.setBoundingBoxXY({ x: chartX, y: chartY + chartHeight }); this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight });
this.componentStore.yAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.yAxis.setRange([plotY, plotY + chartHeight]);
this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: chartY }); this.componentStore.yAxis.setBoundingBoxXY({ x: 0, y: plotY });
if (this.chartData.plots.some((p) => isBarPlot(p))) { if (this.chartData.plots.some((p) => isBarPlot(p))) {
this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); this.componentStore.xAxis.recalculateOuterPaddingToDrawBar();
} }
@@ -125,8 +125,8 @@ export class Orchestrator {
let availableWidth = this.chartConfig.width; let availableWidth = this.chartConfig.width;
let availableHeight = this.chartConfig.height; let availableHeight = this.chartConfig.height;
let titleYEnd = 0; let titleYEnd = 0;
let chartX = 0; let plotX = 0;
let chartY = 0; let plotY = 0;
let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100); let chartWidth = Math.floor((availableWidth * this.chartConfig.plotReservedSpacePercent) / 100);
let chartHeight = Math.floor( let chartHeight = Math.floor(
(availableHeight * this.chartConfig.plotReservedSpacePercent) / 100 (availableHeight * this.chartConfig.plotReservedSpacePercent) / 100
@@ -151,7 +151,7 @@ export class Orchestrator {
height: availableHeight, height: availableHeight,
}); });
availableWidth -= spaceUsed.width; availableWidth -= spaceUsed.width;
chartX = spaceUsed.width; plotX = spaceUsed.width;
log.trace('space used by xaxis: ', spaceUsed); log.trace('space used by xaxis: ', spaceUsed);
this.componentStore.yAxis.setAxisPosition('top'); this.componentStore.yAxis.setAxisPosition('top');
spaceUsed = this.componentStore.yAxis.calculateSpace({ spaceUsed = this.componentStore.yAxis.calculateSpace({
@@ -160,7 +160,7 @@ export class Orchestrator {
}); });
log.trace('space used by yaxis: ', spaceUsed); log.trace('space used by yaxis: ', spaceUsed);
availableHeight -= spaceUsed.height; availableHeight -= spaceUsed.height;
chartY = titleYEnd + spaceUsed.height; plotY = titleYEnd + spaceUsed.height;
if (availableWidth > 0) { if (availableWidth > 0) {
chartWidth += availableWidth; chartWidth += availableWidth;
availableWidth = 0; availableWidth = 0;
@@ -170,8 +170,8 @@ export class Orchestrator {
availableHeight = 0; availableHeight = 0;
} }
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
chartX += plotBorderWidthHalf; plotX += plotBorderWidthHalf;
chartY += plotBorderWidthHalf; plotY += plotBorderWidthHalf;
chartWidth -= this.chartConfig.plotBorderWidth; chartWidth -= this.chartConfig.plotBorderWidth;
chartHeight -= this.chartConfig.plotBorderWidth; chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({ this.componentStore.plot.calculateSpace({
@@ -180,14 +180,14 @@ export class Orchestrator {
}); });
log.trace( 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.plot.setBoundingBoxXY({ x: plotX, y: plotY });
this.componentStore.yAxis.setRange([chartX, chartX + chartWidth]); this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]);
this.componentStore.yAxis.setBoundingBoxXY({ x: chartX, y: titleYEnd }); this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd });
this.componentStore.xAxis.setRange([chartY, chartY + chartHeight]); this.componentStore.xAxis.setRange([plotY, plotY + chartHeight]);
this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: chartY }); this.componentStore.xAxis.setBoundingBoxXY({ x: 0, y: plotY });
if (this.chartData.plots.some((p) => isBarPlot(p))) { if (this.chartData.plots.some((p) => isBarPlot(p))) {
this.componentStore.xAxis.recalculateOuterPaddingToDrawBar(); this.componentStore.xAxis.recalculateOuterPaddingToDrawBar();
} }

4
packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
View File

@@ -17,11 +17,11 @@ export class BarPlot {
this.yAxis.getScaleValue(d[1]), this.yAxis.getScaleValue(d[1]),
]); ]);
const barPaddingPercent = 5; const barPaddingPercent = 0.05;
const barWidth = const barWidth =
Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) * Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
(1 - barPaddingPercent / 100); (1 - barPaddingPercent);
const barWidthHalf = barWidth / 2; const barWidthHalf = barWidth / 2;
if (this.orientation === 'horizontal') { if (this.orientation === 'horizontal') {

36
packages/mermaid/src/diagrams/xychart/xychartDb.ts
View File

@@ -50,47 +50,21 @@ interface NormalTextType {
function getChartDefaultThemeConfig(): XYChartThemeConfig { function getChartDefaultThemeConfig(): XYChartThemeConfig {
return { return {
backgroundColor: ...defaultThemeVariables.xyChart,
config.themeVariables?.xyChart?.backgroundColor || ...config.themeVariables?.xyChart,
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,
}; };
} }
function getChartDefaultConfig(): XYChartConfig { function getChartDefaultConfig(): XYChartConfig {
return { return {
...(defaultConfig.xyChart as XYChartConfig), ...(defaultConfig.xyChart as XYChartConfig),
...(config.xyChart ? config.xyChart : {}), ...config.xyChart,
yAxis: { yAxis: {
...(defaultConfig.xyChart as XYChartConfig).yAxis, ...(defaultConfig.xyChart as XYChartConfig).yAxis,
...(config.xyChart?.yAxis ? config.xyChart.yAxis : {}), ...config.xyChart?.yAxis,
}, },
xAxis: { xAxis: {
...(defaultConfig.xyChart as XYChartConfig).xAxis, ...(defaultConfig.xyChart as XYChartConfig).xAxis,
...(config.xyChart?.xAxis ? config.xyChart.xAxis : {}), ...config.xyChart?.xAxis,
}, },
}; };
} }