mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-01-28 07:03:17 +08:00
Small minor changes
This commit is contained in:
parent
7bdf4c3dbb
commit
f9a91730aa
@ -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();
|
||||
}
|
||||
|
@ -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') {
|
||||
|
@ -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,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user