mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Small minor changes

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
Show Stats 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(
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();
}

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]),
]);
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') {

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

@ -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,
},
};
}