marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-08-15 06:19:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed all review comment

Browse Source
This commit is contained in:
Subhash Halder
2023-09-07 12:45:22 +05:30
parent a344eb48f4
commit 7c7d5881b7
18 changed files with 271 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
cypress/integration/rendering/xyChart.spec.js
View File

@@ -103,7 +103,14 @@ describe('XY Chart', () => {
it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest(
`
%%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
plotReservedSpacePercent: 100
---
xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
@@ -114,7 +121,23 @@ describe('XY Chart', () => {
it('Render spark bar without displaying other property', () => {
imgSnapshotTest(
`
%%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
xAxis:
showLabel: false
showTitle: false
showTick: false
showAxisLine: false
yAxis:
showLabel: false
showTitle: false
showTick: false
showAxisLine: false
---
xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
@@ -137,10 +160,36 @@ describe('XY Chart', () => {
);
cy.get('svg');
});
it('Render with showTitle false', () => {
it('Should use all the config from yaml', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"showTitle": false}}}%%
---
config:
theme: forest
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]
@@ -155,7 +204,17 @@ describe('XY Chart', () => {
it('Render with show axis title false', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
xAxis:
showTitle: false
yAxis:
showTitle: false
---
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -170,7 +229,17 @@ describe('XY Chart', () => {
it('Render with show axis label false', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
xAxis:
showLabel: false
yAxis:
showLabel: false
---
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -185,7 +254,17 @@ describe('XY Chart', () => {
it('Render with show axis tick false', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
xAxis:
showTick: false
yAxis:
showTick: false
---
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -200,7 +279,17 @@ describe('XY Chart', () => {
it('Render with show axis line false', () => {
imgSnapshotTest(
`
%%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
xAxis:
showAxisLine: false
yAxis:
showAxisLine: false
---
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -215,7 +304,22 @@ describe('XY Chart', () => {
it('Render all the theme color', () => {
imgSnapshotTest(
`
%%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%%
---
config:
themeVariables:
xyChart:
titleColor: #ff0000
backgroundColor: #f0f8ff
yAxisLabelColor: #ee82ee
yAxisTitleColor: #7fffd4
yAxisTickColor: #87ceeb
yAxisLineColor: #ff6347
xAxisLabelColor: #7fffd4
xAxisTitleColor: #ee82ee
xAxisTickColor: #ff6347
xAxisLineColor: #87ceeb
plotColorPalette: #008000, #faba63
--
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

105
demos/xychart.html
View File

@@ -23,9 +23,8 @@
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 />
<h1>XY Charts horizontal</h1>
<pre class="mermaid">
xychart-beta horizontal
title "Basic xychart"
@@ -34,19 +33,8 @@
bar "sample bat" [52, 96, 35, 10]
line [23, 46, 75, 43]
</pre>
<h1>XY Charts demos</h1>
<pre class="mermaid">
xychart-beta
title "Basic xychart"
x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150
bar "sample bat" [52, 96, 35, 10]
line [23, 46, 75, 43]
</pre>
<hr />
<h1>XY Charts demos</h1>
<h1>XY Charts only lines and bar</h1>
<pre class="mermaid">
xychart-beta
line [23, 46, 77, 34]
@@ -54,19 +42,18 @@
line [87, 54, 99, 85]
line [78, 88, 22, 4]
line [22, 29, 75, 33]
bar "sample bat" [52, 96, 35, 10]
bar [52, 96, 35, 10]
</pre>
<hr />
<h1>XY Charts demos</h1>
<h1>XY Charts with +ve and -ve numbers</h1>
<pre class="mermaid">
xychart-beta
line [+1.3, .6, 2.4, -.34]
</pre>
<h1>XY Charts demos</h1>
<h1>XY Charts Bar with multiple category</h1>
<pre class="mermaid">
%%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
@@ -74,7 +61,7 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<h1>XY Charts demos</h1>
<h1>XY Charts line with multiple category</h1>
<pre class="mermaid">
xychart-beta
title "Line chart with many category"
@@ -83,7 +70,7 @@
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<h1>XY Charts demos</h1>
<h1>XY Charts category with large text</h1>
<pre class="mermaid">
xychart-beta
title "Basic xychart with many categories with category overlap"
@@ -92,23 +79,89 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre>
<h1>sparkline demos</h1>
<h1>sparkline demo</h1>
<pre class="mermaid">
%%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
plotReservedSpacePercent: 100
---
xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<h1>sparkBar demos</h1>
<h1>sparkBar demo</h1>
<pre class="mermaid">
%%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20, "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}, "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
---
config:
theme: dark
xyChart:
width: 200
height: 20
plotReservedSpacePercent: 100
---
xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<h1>XY Charts demos</h1>
<h1>XY Charts demos with all configs</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 }}}%%
---
config:
theme: forest
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>
<h1>XY Charts demos with all theme config</h1>
<pre class="mermaid">
---
config:
themeVariables:
xyChart:
titleColor: #ff0000
backgroundColor: #f0f8ff
yAxisLabelColor: #ee82ee
yAxisTitleColor: #7fffd4
yAxisTickColor: #87ceeb
yAxisLineColor: #ff6347
xAxisLabelColor: #7fffd4
xAxisTitleColor: #ee82ee
xAxisTickColor: #ff6347
xAxisLineColor: #87ceeb
plotColorPalette: #008000, #faba63
---
xychart-beta
title "Sales Revene"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

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

@@ -1,13 +1,17 @@
import { log } from '../../../logger.js';
import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js';
import { isBarPlot } from './Interfaces.js';
import { getChartTitleComponent } from './components/ChartTitle.js';
import type { ChartComponent } from './Interfaces.js';
import type { SVGGType } from '../xychartDb.js';
import type {
ChartComponent,
DrawableElem,
XYChartConfig,
XYChartData,
XYChartThemeConfig,
} from './interfaces.js';
import { isBarPlot } from './interfaces.js';
import type { Axis } from './components/axis/index.js';
import { getAxis } from './components/axis/index.js';
import { getChartTitleComponent } from './components/chartTitle.js';
import type { Plot } from './components/plot/index.js';
import { getPlotComponent } from './components/plot/index.js';
import type { SVGGType } from '../xychartDb.js';
export class Orchestrator {
private componentStore: {
@@ -70,7 +74,6 @@ export class Orchestrator {
width: this.chartConfig.width,
height: availableHeight,
});
log.trace('space used by title: ', spaceUsed);
plotY = spaceUsed.height;
availableHeight -= spaceUsed.height;
this.componentStore.xAxis.setAxisPosition('bottom');
@@ -78,14 +81,12 @@ export class Orchestrator {
width: availableWidth,
height: availableHeight,
});
log.trace('space used by xaxis: ', spaceUsed);
availableHeight -= spaceUsed.height;
this.componentStore.yAxis.setAxisPosition('left');
spaceUsed = this.componentStore.yAxis.calculateSpace({
width: availableWidth,
height: availableHeight,
});
log.trace('space used by yaxis: ', spaceUsed);
plotX = spaceUsed.width;
availableWidth -= spaceUsed.width;
if (availableWidth > 0) {
@@ -101,10 +102,6 @@ export class Orchestrator {
height: chartHeight,
});
log.trace(
`Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}`
);
this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY });
this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]);
this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight });
@@ -136,7 +133,6 @@ export class Orchestrator {
width: this.chartConfig.width,
height: availableHeight,
});
log.trace('space used by title: ', spaceUsed);
titleYEnd = spaceUsed.height;
availableHeight -= spaceUsed.height;
this.componentStore.xAxis.setAxisPosition('left');
@@ -146,13 +142,11 @@ export class Orchestrator {
});
availableWidth -= spaceUsed.width;
plotX = spaceUsed.width;
log.trace('space used by xaxis: ', spaceUsed);
this.componentStore.yAxis.setAxisPosition('top');
spaceUsed = this.componentStore.yAxis.calculateSpace({
width: availableWidth,
height: availableHeight,
});
log.trace('space used by yaxis: ', spaceUsed);
availableHeight -= spaceUsed.height;
plotY = titleYEnd + spaceUsed.height;
if (availableWidth > 0) {
@@ -168,10 +162,6 @@ export class Orchestrator {
height: chartHeight,
});
log.trace(
`Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}`
);
this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY });
this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]);
this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd });

2
packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts
View File

@@ -1,4 +1,4 @@
import type { Dimension } from './Interfaces.js';
import type { Dimension } from './interfaces.js';
import { computeDimensionOfText } from '../../../rendering-util/createText.js';
import type { SVGGType } from '../xychartDb.js';

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

@@ -8,9 +8,9 @@ import type {
XYChartData,
XYChartThemeConfig,
XYChartConfig,
} from '../Interfaces.js';
import type { TextDimensionCalculator } from '../TextDimensionCalculator.js';
import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js';
} from '../interfaces.js';
import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
export class ChartTitle implements ChartComponent {
private boundingRect: BoundingRect;

6
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts
View File

@@ -1,9 +1,9 @@
import type { ScaleBand } from 'd3';
import { scaleBand } from 'd3';
import { log } from '../../../../../logger.js';
import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
import { BaseAxis } from './BaseAxis.js';
import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
import { BaseAxis } from './baseAxis.js';
import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
export class BandAxis extends BaseAxis {
private scale: ScaleBand<string>;

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

@@ -1,14 +1,13 @@
import { log } from '../../../../../logger.js';
import type {
BoundingRect,
Dimension,
DrawableElem,
Point,
XYChartAxisThemeConfig,
XYChartAxisConfig,
} from '../../Interfaces.js';
import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
import type { AxisPosition, Axis } from './index.js';
XYChartAxisThemeConfig,
} from '../../interfaces.js';
import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
import type { Axis, AxisPosition } from './index.js';
const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7;
const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2;
@@ -96,7 +95,6 @@ export abstract class BaseAxis implements Axis {
const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
this.labelTextHeight = spaceRequired.height;
log.trace('height required for axis label: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
this.showLabel = true;
@@ -113,7 +111,6 @@ export abstract class BaseAxis implements Axis {
);
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('height required for axis title: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
this.showTitle = true;
@@ -134,7 +131,6 @@ export abstract class BaseAxis implements Axis {
const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding);
const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2;
log.trace('width required for axis label: ', widthRequired);
if (widthRequired <= availableWidth) {
availableWidth -= widthRequired;
this.showLabel = true;
@@ -151,7 +147,6 @@ export abstract class BaseAxis implements Axis {
);
const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) {
availableWidth -= widthRequired;
this.showTitle = true;

8
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts
View File

@@ -1,9 +1,8 @@
import type { ScaleLinear } from 'd3';
import { scaleLinear } from 'd3';
import { log } from '../../../../../logger.js';
import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
import { BaseAxis } from './BaseAxis.js';
import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
import { BaseAxis } from './baseAxis.js';
import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
export class LinearAxis extends BaseAxis {
private scale: ScaleLinear<number, number>;
@@ -31,7 +30,6 @@ export class LinearAxis extends BaseAxis {
domain.reverse(); // since y-axis in svg start from top
}
this.scale = scaleLinear().domain(domain).range(this.getRange());
log.trace('Linear axis final domain, range: ', this.domain, this.getRange());
}
getScaleValue(value: number): number {

12
packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
View File

@@ -2,13 +2,13 @@ import type { SVGGType } from '../../../xychartDb.js';
import type {
AxisDataType,
ChartComponent,
XYChartAxisThemeConfig,
XYChartAxisConfig,
} from '../../Interfaces.js';
import { isBandAxisData } from '../../Interfaces.js';
import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js';
import { BandAxis } from './BandAxis.js';
import { LinearAxis } from './LinearAxis.js';
XYChartAxisThemeConfig,
} from '../../interfaces.js';
import { isBandAxisData } from '../../interfaces.js';
import { TextDimensionCalculatorWithFont } from '../../textDimensionCalculator.js';
import { BandAxis } from './bandAxis.js';
import { LinearAxis } from './linearAxis.js';
export type AxisPosition = 'left' | 'right' | 'top' | 'bottom';

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

@@ -1,4 +1,4 @@
import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js';
import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../interfaces.js';
import type { Axis } from '../axis/index.js';
export class BarPlot {
@@ -40,22 +40,21 @@ export class BarPlot {
})),
},
];
} else {
return [
{
groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
type: 'rect',
data: finalData.map((data) => ({
x: data[0] - barWidthHalf,
y: data[1],
width: barWidth,
height: this.boundingRect.y + this.boundingRect.height - data[1],
fill: this.barData.fill,
strokeWidth: 0,
strokeFill: this.barData.fill,
})),
},
];
}
return [
{
groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
type: 'rect',
data: finalData.map((data) => ({
x: data[0] - barWidthHalf,
y: data[1],
width: barWidth,
height: this.boundingRect.y + this.boundingRect.height - data[1],
fill: this.barData.fill,
strokeWidth: 0,
strokeFill: this.barData.fill,
})),
},
];
}
}

2
packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
View File

@@ -1,5 +1,5 @@
import { line } from 'd3';
import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js';
import type { DrawableElem, LinePlotData, XYChartConfig } from '../../interfaces.js';
import type { Axis } from '../axis/index.js';
export class LinePlot {

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

@@ -6,11 +6,11 @@ import type {
Point,
XYChartThemeConfig,
XYChartConfig,
} from '../../Interfaces.js';
} from '../../interfaces.js';
import type { Axis } from '../axis/index.js';
import type { ChartComponent } from '../../Interfaces.js';
import { LinePlot } from './LinePlot.js';
import { BarPlot } from './BarPlot.js';
import type { ChartComponent } from '../../interfaces.js';
import { LinePlot } from './linePlot.js';
import { BarPlot } from './barPlot.js';
export interface Plot extends ChartComponent {
setAxes(xAxis: Axis, yAxis: Axis): void;

8
packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
View File

@@ -1,7 +1,6 @@
import { log } from '../../../logger.js';
import type { SVGGType } from '../xychartDb.js';
import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js';
import { Orchestrator } from './Orchestrator.js';
import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
import { Orchestrator } from './orchestrator.js';
export class XYChartBuilder {
static build(
@@ -10,9 +9,6 @@ export class XYChartBuilder {
chartThemeConfig: XYChartThemeConfig,
tmpSVGGElem: SVGGType
): DrawableElem[] {
log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`);
log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`);
log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`);
const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem);
return orchestrator.getDrawableElement();
}

3
packages/mermaid/src/diagrams/xychart/parser/xychart.jison
View File

@@ -104,6 +104,9 @@ statement
| LINE text plotData { yy.setLineData($text, $plotData); }
| BAR plotData { yy.setBarData({text: '', type: 'text'}, $plotData); }
| BAR text plotData { yy.setBarData($text, $plotData); }
| acc_title acc_title_value { $$=$acc_title_value.trim();yy.setAccTitle($$); }
| acc_descr acc_descr_value { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
| acc_descr_multiline_value { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
;
plotData

2
packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
View File

@@ -1,4 +1,4 @@
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: Jison doesn't support type.
import { parser } from './xychart.jison';
import type { Mock } from 'vitest';
import { vi } from 'vitest';

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

@@ -1,29 +1,28 @@
// @ts-ignore: TODO Fix ts errors
import { adjust, channel } from 'khroma';
import type { Selection } from 'd3-selection';
import mermaidAPI from '../../mermaidAPI.js';
import {
clear as commonClear,
getAccDescription,
getAccTitle,
getDiagramTitle,
setAccDescription,
setAccTitle,
setDiagramTitle,
} from '../../commonDb.js';
import * as configApi from '../../config.js';
import defaultConfig from '../../defaultConfig.js';
import { getThemeVariables } from '../../themes/theme-default.js';
import { cleanAndMerge } from '../../utils.js';
import { sanitizeText } from '../common/common.js';
import {
setAccTitle,
getAccTitle,
setDiagramTitle,
getDiagramTitle,
getAccDescription,
setAccDescription,
clear as commonClear,
} from '../../commonDb.js';
import { XYChartBuilder } from './chartBuilder/index.js';
import type {
DrawableElem,
SimplePlotDataType,
XYChartConfig,
XYChartData,
XYChartThemeConfig,
XYChartConfig,
} from './chartBuilder/Interfaces.js';
import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js';
import { getThemeVariables } from '../../themes/theme-default.js';
} from './chartBuilder/interfaces.js';
import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
@@ -46,25 +45,14 @@ interface NormalTextType {
function getChartDefaultThemeConfig(): XYChartThemeConfig {
const defaultThemeVariables = getThemeVariables();
const config = configApi.getConfig();
return {
...defaultThemeVariables.xyChart,
...config.themeVariables?.xyChart,
};
return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart);
}
function getChartDefaultConfig(): XYChartConfig {
const config = configApi.getConfig();
return {
...(defaultConfig.xyChart as XYChartConfig),
...config.xyChart,
yAxis: {
...(defaultConfig.xyChart as XYChartConfig).yAxis,
...config.xyChart?.yAxis,
},
xAxis: {
...(defaultConfig.xyChart as XYChartConfig).xAxis,
...config.xyChart?.xAxis,
},
};
return cleanAndMerge<XYChartConfig>(
defaultConfig.xyChart as XYChartConfig,
config.xyChart as XYChartConfig
);
}
function getChartDefalutData(): XYChartData {
@@ -90,11 +78,6 @@ function textSanitizer(text: string) {
return sanitizeText(text.trim(), config);
}
function parseDirective(statement: string, context: string, type: string) {
// @ts-ignore: TODO Fix ts errors
mermaidAPI.parseDirective(this, statement, context, type);
}
function setTmpSVGG(SVGG: SVGGType) {
tmpSVGGElem = SVGG;
}
@@ -228,7 +211,6 @@ const clear = function () {
export default {
getDrawableElem,
parseDirective,
clear,
setAccTitle,
getAccTitle,

2
packages/mermaid/src/diagrams/xychart/xychartDiagram.ts
View File

@@ -1,5 +1,5 @@
import type { DiagramDefinition } from '../../diagram-api/types.js';
// @ts-ignore: TODO Fix ts errors
// @ts-ignore: Jison doesn't support types.
import parser from './parser/xychart.jison';
import db from './xychartDb.js';
import renderer from './xychartRenderer.js';

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

@@ -1,14 +1,14 @@
import type { Diagram } from '../../Diagram.js';
import { log } from '../../logger.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
import { configureSvgSize } from '../../setupGraphViewbox.js';
import type {
DrawableElem,
TextElem,
TextHorizontalPos,
TextVerticalPos,
} from './chartBuilder/Interfaces.js';
} from './chartBuilder/interfaces.js';
import type XYChartDB from './xychartDb.js';
import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => {
const db = diagObj.db as typeof XYChartDB;
@@ -68,18 +68,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
for (const shape of shapes) {
if (shape.data.length === 0) {
log.trace(
`Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify(
shape.data,
null,
2
)}`
);
continue;
}
log.trace(
`Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}`
);
const shapeGroup = getGroup(shape.groupTexts);