marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-24 17:59:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix some space management issue

Browse Source
This commit is contained in:
Subhash Halder
2023-09-03 13:38:47 +05:30
parent 060d961f39
commit cc5190c1ba
16 changed files with 232 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
demos/xychart.html
View File

@@ -92,6 +92,17 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre> </pre>
<h1>XY Charts demos</h1>
<pre class="mermaid">
%%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr /> <hr />
<script type="module"> <script type="module">

31
docs/syntax/xyChart.md
View File

@@ -110,23 +110,24 @@ Every grammer are optional other than the chart name and one data set, so you wi
| showTitle | Title to be shown or not | true | | showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig | | xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig ### AxisConfig
| Parameter | Description | Default value | | Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: | | ------------- | ------------------------------------ | :-----------: |
| showLabel | Show axis labels or tick values | true | | showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 | | labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 | | labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true | | showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 | | titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 | | titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true | | showTick | Tick to be shown or not | true |
| tickLength | How long the tick will be | 5 | | tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 | | tickWidth | How width the tick will be | 2 |
| showAxisLine | Axis line to be shown or not | true |
| axisLineWidth | Thickness of the axis line | 2 |
## Chart Theme Variables ## Chart Theme Variables
@@ -142,15 +143,17 @@ Every grammer are optional other than the chart name and one data set, so you wi
| xAxisLableColor | Color of the x-axis labels | | xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title | | xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick | | xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels | | yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title | | yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick | | yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] | | plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] |
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -160,7 +163,7 @@ xychart-beta
``` ```
```mermaid ```mermaid
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

28
packages/mermaid/src/config.type.ts
View File

@@ -747,6 +747,14 @@ export interface XYChartAxisConfig {
* width of the axis tick lines * width of the axis tick lines
*/ */
tickWidth?: number; tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
} }
/** /**
* This object contains configuration specific to XYCharts * This object contains configuration specific to XYCharts
@@ -777,10 +785,6 @@ export interface XYChartConfig extends BaseDiagramConfig {
showTitle?: boolean; showTitle?: boolean;
xAxis?: XYChartAxisConfig1; xAxis?: XYChartAxisConfig1;
yAxis?: XYChartAxisConfig2; yAxis?: XYChartAxisConfig2;
/**
* width of the line around the plot of the chart
*/
plotBorderWidth?: number;
/** /**
* How to plot will be drawn horizontal or vertical * How to plot will be drawn horizontal or vertical
*/ */
@@ -830,6 +834,14 @@ export interface XYChartAxisConfig1 {
* width of the axis tick lines * width of the axis tick lines
*/ */
tickWidth?: number; tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
} }
/** /**
* This object contains configuration for XYChart axis config * This object contains configuration for XYChart axis config
@@ -871,6 +883,14 @@ export interface XYChartAxisConfig2 {
* width of the axis tick lines * width of the axis tick lines
*/ */
tickWidth?: number; tickWidth?: number;
/**
* Show line across the axis
*/
showAxisLine?: boolean;
/**
* Width of the axis line
*/
axisLineWidth?: number;
} }
/** /**
* The object containing configurations specific for entity relationship diagrams * The object containing configurations specific for entity relationship diagrams

10
packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
View File

@@ -2,6 +2,7 @@ export interface XYChartAxisThemeConfig {
titleColor: string; titleColor: string;
labelColor: string; labelColor: string;
tickColor: string; tickColor: string;
axisLineColor: string;
} }
export interface XYChartThemeConfig { export interface XYChartThemeConfig {
@@ -11,9 +12,11 @@ export interface XYChartThemeConfig {
xAxisLableColor: string; xAxisLableColor: string;
xAxisTitleColor: string; xAxisTitleColor: string;
xAxisTickColor: string; xAxisTickColor: string;
xAxisLineColor: string;
yAxisLableColor: string; yAxisLableColor: string;
yAxisTitleColor: string; yAxisTitleColor: string;
yAxisTickColor: string; yAxisTickColor: string;
yAxisLineColor: string;
plotColorPalette: string; plotColorPalette: string;
} }
@@ -81,6 +84,8 @@ export interface XYChartAxisConfig {
showTick: boolean; showTick: boolean;
tickLength: number; tickLength: number;
tickWidth: number; tickWidth: number;
showAxisLine: boolean;
axisLineWidth: number;
} }
export interface XYChartConfig { export interface XYChartConfig {
@@ -91,7 +96,6 @@ export interface XYChartConfig {
showTitle: boolean; showTitle: boolean;
xAxis: XYChartAxisConfig; xAxis: XYChartAxisConfig;
yAxis: XYChartAxisConfig; yAxis: XYChartAxisConfig;
plotBorderWidth: number;
chartOrientation: 'vertical' | 'horizontal'; chartOrientation: 'vertical' | 'horizontal';
plotReservedSpacePercent: number; plotReservedSpacePercent: number;
} }
@@ -115,8 +119,8 @@ export interface Point {
y: number; y: number;
} }
export type TextVerticalPos = 'left' | 'center' | 'right'; export type TextHorizontalPos = 'left' | 'center' | 'right';
export type TextHorizontalPos = 'top' | 'middle' | 'bottom'; export type TextVerticalPos = 'top' | 'middle' | 'bottom';
export interface RectElem extends Point { export interface RectElem extends Point {
width: number; width: number;

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

@@ -32,6 +32,7 @@ export class Orchestrator {
titleColor: chartThemeConfig.xAxisTitleColor, titleColor: chartThemeConfig.xAxisTitleColor,
labelColor: chartThemeConfig.xAxisLableColor, labelColor: chartThemeConfig.xAxisLableColor,
tickColor: chartThemeConfig.xAxisTickColor, tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor,
}, },
tmpSVGGElem tmpSVGGElem
), ),
@@ -42,6 +43,7 @@ export class Orchestrator {
titleColor: chartThemeConfig.yAxisTitleColor, titleColor: chartThemeConfig.yAxisTitleColor,
labelColor: chartThemeConfig.yAxisLableColor, labelColor: chartThemeConfig.yAxisLableColor,
tickColor: chartThemeConfig.yAxisTickColor, tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor,
}, },
tmpSVGGElem tmpSVGGElem
), ),
@@ -94,11 +96,11 @@ export class Orchestrator {
chartHeight += availableHeight; chartHeight += availableHeight;
availableHeight = 0; availableHeight = 0;
} }
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
plotX += plotBorderWidthHalf; // plotX += plotBorderWidthHalf;
plotY += 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({
width: chartWidth, width: chartWidth,
height: chartHeight, height: chartHeight,
@@ -166,11 +168,11 @@ export class Orchestrator {
chartHeight += availableHeight; chartHeight += availableHeight;
availableHeight = 0; availableHeight = 0;
} }
const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2; // const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
plotX += plotBorderWidthHalf; // plotX += plotBorderWidthHalf;
plotY += 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({
width: chartWidth, width: chartWidth,
height: chartHeight, height: chartHeight,

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

@@ -64,8 +64,8 @@ export class ChartTitle implements ChartComponent {
{ {
fontSize: this.chartConfig.titleFontSize, fontSize: this.chartConfig.titleFontSize,
text: this.chartData.title, text: this.chartData.title,
verticalPos: 'center', verticalPos: 'middle',
horizontalPos: 'middle', horizontalPos: 'center',
x: this.boundingRect.x + this.boundingRect.width / 2, x: this.boundingRect.x + this.boundingRect.width / 2,
y: this.boundingRect.y + this.boundingRect.height / 2, y: this.boundingRect.y + this.boundingRect.height / 2,
fill: this.chartThemeConfig.titleColor, fill: this.chartThemeConfig.titleColor,

135
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
View File

@@ -20,6 +20,7 @@ export abstract class BaseAxis implements Axis {
protected showTitle = false; protected showTitle = false;
protected showLabel = false; protected showLabel = false;
protected showTick = false; protected showTick = false;
protected showAxisLine = false;
protected outerPadding = 0; protected outerPadding = 0;
constructor( constructor(
@@ -35,6 +36,11 @@ export abstract class BaseAxis implements Axis {
setRange(range: [number, number]): void { setRange(range: [number, number]): void {
this.range = range; this.range = range;
if (this.axisPosition === 'left' || this.axisPosition === 'right') {
this.boundingRect.height = range[1] - range[0];
} else {
this.boundingRect.width = range[1] - range[0];
}
this.recalculateScale(); this.recalculateScale();
} }
@@ -77,6 +83,10 @@ export abstract class BaseAxis implements Axis {
private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) { private calculateSpaceIfDrawnHorizontally(availableSpace: Dimension) {
let availableHeight = availableSpace.height; let availableHeight = availableSpace.height;
if (this.axisConfig.showAxisLine && availableHeight > this.axisConfig.axisLineWidth) {
availableHeight -= this.axisConfig.axisLineWidth;
this.showAxisLine = true;
}
if (this.axisConfig.showLabel) { if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension(); const spaceRequired = this.getLabelDimension();
const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width; const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.width;
@@ -96,7 +106,7 @@ export abstract class BaseAxis implements Axis {
if (this.axisConfig.showTitle && this.title) { if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension( const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title], [this.title],
this.axisConfig.labelFontSize this.axisConfig.titleFontSize
); );
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
log.trace('height required for axis title: ', heightRequired); log.trace('height required for axis title: ', heightRequired);
@@ -111,6 +121,10 @@ export abstract class BaseAxis implements Axis {
private calculateSpaceIfDrawnVertical(availableSpace: Dimension) { private calculateSpaceIfDrawnVertical(availableSpace: Dimension) {
let availableWidth = availableSpace.width; let availableWidth = availableSpace.width;
if (this.axisConfig.showAxisLine && availableWidth > this.axisConfig.axisLineWidth) {
availableWidth -= this.axisConfig.axisLineWidth;
this.showAxisLine = true;
}
if (this.axisConfig.showLabel) { if (this.axisConfig.showLabel) {
const spaceRequired = this.getLabelDimension(); const spaceRequired = this.getLabelDimension();
const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height; const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
@@ -129,9 +143,9 @@ export abstract class BaseAxis implements Axis {
if (this.axisConfig.showTitle && this.title) { if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension( const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title], [this.title],
this.axisConfig.labelFontSize this.axisConfig.titleFontSize
); );
const widthRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
log.trace('width required for axis title: ', widthRequired); log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) { if (widthRequired <= availableWidth) {
availableWidth -= widthRequired; availableWidth -= widthRequired;
@@ -166,6 +180,22 @@ export abstract class BaseAxis implements Axis {
private getDrawaableElementsForLeftAxis(): DrawableElem[] { private getDrawaableElementsForLeftAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['left-axis', 'axisl-line'],
data: [
{
path: `M ${x},${this.boundingRect.y} L ${x},${
this.boundingRect.y + this.boundingRect.height
} `,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) { if (this.showLabel) {
drawableElement.push({ drawableElement.push({
type: 'text', type: 'text',
@@ -175,19 +205,23 @@ export abstract class BaseAxis implements Axis {
x: x:
this.boundingRect.x + this.boundingRect.x +
this.boundingRect.width - this.boundingRect.width -
this.axisConfig.labelPadding - (this.showLabel ? this.axisConfig.labelPadding : 0) -
this.axisConfig.tickLength, (this.showTick ? this.axisConfig.tickLength : 0) -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
y: this.getScaleValue(tick), y: this.getScaleValue(tick),
fill: this.axisThemeConfig.labelColor, fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize, fontSize: this.axisConfig.labelFontSize,
rotation: 0, rotation: 0,
verticalPos: 'right', verticalPos: 'middle',
horizontalPos: 'middle', horizontalPos: 'right',
})), })),
}); });
} }
if (this.showTick) { if (this.showTick) {
const x = this.boundingRect.x + this.boundingRect.width; const x =
this.boundingRect.x +
this.boundingRect.width -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
drawableElement.push({ drawableElement.push({
type: 'path', type: 'path',
groupTexts: ['left-axis', 'ticks'], groupTexts: ['left-axis', 'ticks'],
@@ -208,12 +242,12 @@ export abstract class BaseAxis implements Axis {
{ {
text: this.title, text: this.title,
x: this.boundingRect.x + this.axisConfig.titlePadding, x: this.boundingRect.x + this.axisConfig.titlePadding,
y: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.boundingRect.height / 2,
fill: this.axisThemeConfig.titleColor, fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize, fontSize: this.axisConfig.titleFontSize,
rotation: 270, rotation: 270,
verticalPos: 'center', verticalPos: 'top',
horizontalPos: 'top', horizontalPos: 'center',
}, },
], ],
}); });
@@ -222,6 +256,22 @@ export abstract class BaseAxis implements Axis {
} }
private getDrawaableElementsForBottomAxis(): DrawableElem[] { private getDrawaableElementsForBottomAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['bottom-axis', 'axis-line'],
data: [
{
path: `M ${this.boundingRect.x},${y} L ${
this.boundingRect.x + this.boundingRect.width
},${y}`,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) { if (this.showLabel) {
drawableElement.push({ drawableElement.push({
type: 'text', type: 'text',
@@ -229,12 +279,16 @@ export abstract class BaseAxis implements Axis {
data: this.getTickValues().map((tick) => ({ data: this.getTickValues().map((tick) => ({
text: tick.toString(), text: tick.toString(),
x: this.getScaleValue(tick), x: this.getScaleValue(tick),
y: this.boundingRect.y + this.axisConfig.labelPadding + this.axisConfig.tickLength, y:
this.boundingRect.y +
(this.showLabel ? this.axisConfig.labelPadding : 0) +
(this.showTitle ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
fill: this.axisThemeConfig.labelColor, fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize, fontSize: this.axisConfig.labelFontSize,
rotation: 0, rotation: 0,
verticalPos: 'center', verticalPos: 'top',
horizontalPos: 'top', horizontalPos: 'center',
})), })),
}); });
} }
@@ -244,8 +298,12 @@ export abstract class BaseAxis implements Axis {
type: 'path', type: 'path',
groupTexts: ['bottom-axis', 'ticks'], groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({ data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ path: `M ${this.getScaleValue(tick)},${
y + this.axisConfig.tickLength y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
} L ${this.getScaleValue(tick)},${
y +
(this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
}`, }`,
strokeFill: this.axisThemeConfig.tickColor, strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth, strokeWidth: this.axisConfig.tickWidth,
@@ -264,8 +322,8 @@ export abstract class BaseAxis implements Axis {
fill: this.axisThemeConfig.titleColor, fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize, fontSize: this.axisConfig.titleFontSize,
rotation: 0, rotation: 0,
verticalPos: 'center', verticalPos: 'bottom',
horizontalPos: 'bottom', horizontalPos: 'center',
}, },
], ],
}); });
@@ -274,6 +332,22 @@ export abstract class BaseAxis implements Axis {
} }
private getDrawaableElementsForTopAxis(): DrawableElem[] { private getDrawaableElementsForTopAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2;
drawableElement.push({
type: 'path',
groupTexts: ['top-axis', 'axis-line'],
data: [
{
path: `M ${this.boundingRect.x},${y} L ${
this.boundingRect.x + this.boundingRect.width
},${y}`,
strokeFill: this.axisThemeConfig.axisLineColor,
strokeWidth: this.axisConfig.axisLineWidth,
},
],
});
}
if (this.showLabel) { if (this.showLabel) {
drawableElement.push({ drawableElement.push({
type: 'text', type: 'text',
@@ -283,14 +357,16 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick), x: this.getScaleValue(tick),
y: y:
this.boundingRect.y + this.boundingRect.y +
this.boundingRect.height - (this.showTitle
this.axisConfig.labelPadding - ? this.axisConfig.titleFontSize +
this.axisConfig.tickLength, this.axisConfig.labelPadding +
this.axisConfig.titlePadding * 2
: 0),
fill: this.axisThemeConfig.labelColor, fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize, fontSize: this.axisConfig.labelFontSize,
rotation: 0, rotation: 0,
verticalPos: 'center', verticalPos: 'top',
horizontalPos: 'bottom', horizontalPos: 'center',
})), })),
}); });
} }
@@ -301,9 +377,12 @@ export abstract class BaseAxis implements Axis {
groupTexts: ['bottom-axis', 'ticks'], groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({ data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${ path: `M ${this.getScaleValue(tick)},${
y + this.boundingRect.height y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
} L ${this.getScaleValue(tick)},${ } L ${this.getScaleValue(tick)},${
y + this.boundingRect.height - this.axisConfig.tickLength y +
this.boundingRect.height -
this.axisConfig.tickLength -
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
}`, }`,
strokeFill: this.axisThemeConfig.tickColor, strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth, strokeWidth: this.axisConfig.tickWidth,
@@ -317,13 +396,13 @@ export abstract class BaseAxis implements Axis {
data: [ data: [
{ {
text: this.title, text: this.title,
x: this.range[0] + (this.range[1] - this.range[0]) / 2, x: this.boundingRect.x + this.boundingRect.width / 2,
y: this.boundingRect.y + this.axisConfig.titlePadding, y: this.boundingRect.y + this.axisConfig.titlePadding,
fill: this.axisThemeConfig.titleColor, fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize, fontSize: this.axisConfig.titleFontSize,
rotation: 0, rotation: 0,
verticalPos: 'center', verticalPos: 'top',
horizontalPos: 'top', horizontalPos: 'center',
}, },
], ],
}); });

10
packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
View File

@@ -56,11 +56,11 @@ export class Plot implements Plot {
throw Error('Axes must be passed to render Plots'); throw Error('Axes must be passed to render Plots');
} }
const drawableElem: DrawableElem[] = [ const drawableElem: DrawableElem[] = [
...new PlotBorder( // ...new PlotBorder(
this.boundingRect, // this.boundingRect,
this.chartConfig.chartOrientation, // this.chartConfig.chartOrientation,
this.chartThemeConfig // this.chartThemeConfig
).getDrawableElement(), // ).getDrawableElement(),
]; ];
for (const [i, plot] of this.chartData.plots.entries()) { for (const [i, plot] of this.chartData.plots.entries()) {
switch (plot.type) { switch (plot.type) {

14
packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
View File

@@ -14,11 +14,15 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
const db = diagObj.db as typeof XYChartDB; const db = diagObj.db as typeof XYChartDB;
const themeConfig = db.getChartThemeConfig(); const themeConfig = db.getChartThemeConfig();
const chartConfig = db.getChartConfig(); const chartConfig = db.getChartConfig();
function getDominantBaseLine(horizontalPos: TextHorizontalPos) { function getDominantBaseLine(horizontalPos: TextVerticalPos) {
return horizontalPos === 'top' ? 'hanging' : 'middle'; return horizontalPos === 'top'
? 'text-before-edge'
: horizontalPos === 'bottom'
? 'text-after-edge'
: 'middle';
} }
function getTextAnchor(verticalPos: TextVerticalPos) { function getTextAnchor(verticalPos: TextHorizontalPos) {
return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle'; return verticalPos === 'left' ? 'start' : verticalPos === 'right' ? 'end' : 'middle';
} }
@@ -108,8 +112,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
.attr('y', 0) .attr('y', 0)
.attr('fill', (data) => data.fill) .attr('fill', (data) => data.fill)
.attr('font-size', (data) => data.fontSize) .attr('font-size', (data) => data.fontSize)
.attr('dominant-baseline', (data) => getDominantBaseLine(data.horizontalPos)) .attr('dominant-baseline', (data) => getDominantBaseLine(data.verticalPos))
.attr('text-anchor', (data) => getTextAnchor(data.verticalPos)) .attr('text-anchor', (data) => getTextAnchor(data.horizontalPos))
.attr('transform', (data) => getTextTransformation(data)) .attr('transform', (data) => getTextTransformation(data))
.text((data) => data.text); .text((data) => data.text);
break; break;

29
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -104,23 +104,24 @@ xychart-beta
| showTitle | Title to be shown or not | true | | showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig | | xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig | | yAxis | yAxis configuration | AxisConfig |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' | | chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 | | plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig ### AxisConfig
| Parameter | Description | Default value | | Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: | | ------------- | ------------------------------------ | :-----------: |
| showLabel | Show axis labels or tick values | true | | showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 | | labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 | | labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true | | showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 | | titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 | | titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true | | showTick | Tick to be shown or not | true |
| tickLength | How long the tick will be | 5 | | tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 | | tickWidth | How width the tick will be | 2 |
| showAxisLine | Axis line to be shown or not | true |
| axisLineWidth | Thickness of the axis line | 2 |
## Chart Theme Variables ## Chart Theme Variables
@@ -137,15 +138,17 @@ Themes for xychart resides inside xychart attribute so to set the variables use
| xAxisLableColor | Color of the x-axis labels | | xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title | | xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick | | xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels | | yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title | | yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick | | yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] | | plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] |
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 900, "height": 600}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

18
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -1000,6 +1000,8 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
- showTick - showTick
- tickLength - tickLength
- tickWidth - tickWidth
- showAxisLine
- axisLineWidth
properties: properties:
showLabel: showLabel:
description: Should show the axis labels (tick text) description: Should show the axis labels (tick text)
@@ -1043,6 +1045,16 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
type: integer type: integer
default: 2 default: 2
minimum: 1 minimum: 1
showAxisLine:
description: Show line across the axis
type: boolean
default: true
axisLineWidth:
description: Width of the axis line
type: integer
default: 2
minimum: 1
XYChartConfig: XYChartConfig:
title: XYChart Config title: XYChart Config
allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }] allOf: [{ $ref: '#/$defs/BaseDiagramConfig' }]
@@ -1057,7 +1069,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
- xAxis - xAxis
- yAxis - yAxis
- showTitle - showTitle
- plotBorderWidth
- chartOrientation - chartOrientation
- plotReservedSpacePercent - plotReservedSpacePercent
properties: properties:
@@ -1091,11 +1102,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
yAxis: yAxis:
$ref: '#/$defs/XYChartAxisConfig' $ref: '#/$defs/XYChartAxisConfig'
default: { '$ref': '#/$defs/XYChartAxisConfig' } default: { '$ref': '#/$defs/XYChartAxisConfig' }
plotBorderWidth:
description: width of the line around the plot of the chart
type: integer
default: 2
minimum: 0
chartOrientation: chartOrientation:
description: How to plot will be drawn horizontal or vertical description: How to plot will be drawn horizontal or vertical
tsType: '"vertical" | "horizontal"' tsType: '"vertical" | "horizontal"'

2
packages/mermaid/src/themes/theme-base.js
View File

@@ -253,9 +253,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette: this.xyChart?.plotColorPalette || [
'#FFF4DD', '#FFF4DD',
'#FFD8B1', '#FFD8B1',

2
packages/mermaid/src/themes/theme-dark.js
View File

@@ -259,9 +259,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette: this.xyChart?.plotColorPalette || [
'#3498db', '#3498db',
'#2ecc71', '#2ecc71',

2
packages/mermaid/src/themes/theme-default.js
View File

@@ -280,9 +280,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette: this.xyChart?.plotColorPalette || [
'#ECECFF', '#ECECFF',
'#8493A6', '#8493A6',

2
packages/mermaid/src/themes/theme-forest.js
View File

@@ -248,9 +248,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette: this.xyChart?.plotColorPalette || [
'#CDE498', '#CDE498',
'#FF6B6B', '#FF6B6B',

2
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -279,9 +279,11 @@ class Theme {
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette: this.xyChart?.plotColorPalette || [
'#EEE', '#EEE',
'#6BB8E4', '#6BB8E4',