diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js
index 85d998c50..0b35b5ce6 100644
--- a/cypress/integration/rendering/xyChart.spec.js
+++ b/cypress/integration/rendering/xyChart.spec.js
@@ -1,19 +1,20 @@
import { imgSnapshotTest, renderGraph } from '../../helpers/util.ts';
describe('XY Chart', () => {
- it('should render the simplest possible chart', () => {
- imgSnapshotTest(
- `
+ describe('single dataset', () => {
+ it('should render the simplest possible chart', () => {
+ imgSnapshotTest(
+ `
xychart-beta
line [10, 30, 20]
`,
- {}
- );
- cy.get('svg');
- });
- it('Should render a complete chart', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Should render a complete chart', () => {
+ imgSnapshotTest(
+ `
xychart-beta
title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -21,88 +22,73 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- });
- it('Should render a chart without title', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ });
+ it('Should render a chart without title', () => {
+ imgSnapshotTest(
+ `
xychart-beta
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('y-axis title not required', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('y-axis title not required', () => {
+ imgSnapshotTest(
+ `
xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Should render a chart without y-axis with different range', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Should render a chart without y-axis with different range', () => {
+ imgSnapshotTest(
+ `
xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`,
- {}
- );
- cy.get('svg');
- });
- it('x axis title not required', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('x axis title not required', () => {
+ imgSnapshotTest(
+ `
xychart-beta
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
bar [5000, 6000, 7500, 8200, 9500, 10500, 14000, 3200, 9200, 9900, 3400, 6000]
line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`,
- {}
- );
- cy.get('svg');
- });
- it('Multiple plots can be rendered', () => {
- imgSnapshotTest(
- `
- xychart-beta
- line [23, 46, 77, 34]
- line [45, 32, 33, 12]
- bar [87, 54, 99, 85]
- line [78, 88, 22, 4]
- line [22, 29, 75, 33]
- bar [52, 96, 35, 10]
- `,
- {}
- );
- cy.get('svg');
- });
- it('Decimals and negative numbers are supported', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Decimals and negative numbers are supported', () => {
+ imgSnapshotTest(
+ `
xychart-beta
y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render spark line with "plotReservedSpacePercent"', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render spark line with "plotReservedSpacePercent"', () => {
+ imgSnapshotTest(
+ `
---
config:
theme: dark
@@ -114,13 +100,13 @@ describe('XY Chart', () => {
xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render spark bar without displaying other property', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render spark bar without displaying other property', () => {
+ imgSnapshotTest(
+ `
---
config:
theme: dark
@@ -141,13 +127,13 @@ describe('XY Chart', () => {
xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
- {}
- );
- cy.get('svg');
- });
- it('Should use all the config from directive', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Should use all the config from directive', () => {
+ imgSnapshotTest(
+ `
%%{init: {"xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5}, "plotBorderWidth": 5, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60 }}}%%
xychart-beta
title "Sales Revenue"
@@ -156,13 +142,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Should use all the config from yaml', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Should use all the config from yaml', () => {
+ imgSnapshotTest(
+ `
---
config:
theme: forest
@@ -197,13 +183,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render with show axis title false', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render with show axis title false', () => {
+ imgSnapshotTest(
+ `
---
config:
xyChart:
@@ -219,13 +205,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render with show axis label false', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render with show axis label false', () => {
+ imgSnapshotTest(
+ `
---
config:
xyChart:
@@ -241,13 +227,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render with show axis tick false', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render with show axis tick false', () => {
+ imgSnapshotTest(
+ `
---
config:
xyChart:
@@ -263,13 +249,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render with show axis line false', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render with show axis line false', () => {
+ imgSnapshotTest(
+ `
---
config:
xyChart:
@@ -285,13 +271,13 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
- });
- it('Render all the theme color', () => {
- imgSnapshotTest(
- `
+ {}
+ );
+ cy.get('svg');
+ });
+ it('Render all the theme color', () => {
+ imgSnapshotTest(
+ `
---
config:
themeVariables:
@@ -315,8 +301,111 @@ describe('XY Chart', () => {
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]
`,
- {}
- );
- cy.get('svg');
+ {}
+ );
+ cy.get('svg');
+ });
+ });
+
+ describe('multiple datasets', () => {
+ describe('vertical', () => {
+ it('should render bar diagram for 3 datasets', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [0, 20, 40, 30]
+ bar "cats" [20, 40, 0, 30]
+ bar "birds" [30, 60, 50, 30]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('should render line diagram for 3 datasets', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ line "dogs" [0, 20, 40, 30]
+ line "cats" [20, 40, 0, 30]
+ line "birds" [30, 60, 50, 30]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('should render a mix of multiple bar and line plots', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta
+ line [23, 46, 77, 34]
+ line [45, 32, 33, 12]
+ bar [87, 54, 99, 85]
+ line [78, 88, 22, 4]
+ line [22, 29, 75, 33]
+ bar [52, 96, 35, 10]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ });
+
+ describe('horizontal', () => {
+ it('should render bar diagram for 3 datasets', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta horizontal
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [0, 20, 40, 30]
+ bar "cats" [20, 40, 0, 30]
+ bar "birds" [30, 60, 50, 30]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('should render line diagram for 3 datasets', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta horizontal
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ line "dogs" [0, 20, 40, 30]
+ line "cats" [20, 40, 0, 30]
+ line "birds" [30, 60, 50, 30]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+
+ it('should render a mix of multiple bar and line plots', () => {
+ imgSnapshotTest(
+ `
+ xychart-beta horizontal
+ line [23, 46, 77, 34]
+ line [45, 32, 33, 12]
+ bar [87, 54, 99, 85]
+ line [78, 88, 22, 4]
+ line [22, 29, 75, 33]
+ bar [52, 96, 35, 10]
+ `,
+ {}
+ );
+ cy.get('svg');
+ });
+ });
});
});
diff --git a/demos/xychart.html b/demos/xychart.html
index 1d8bad78b..32298a52b 100644
--- a/demos/xychart.html
+++ b/demos/xychart.html
@@ -52,7 +52,7 @@
line [+1.3, .6, 2.4, -.34]
- XY Charts Bar with multiple category
+ XY Charts bar with single dataset
xychart-beta
title "Basic xychart with many categories"
@@ -61,7 +61,28 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
- XY Charts line with multiple category
+ XY Charts bar with multiple datasets
+
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ bar "dogs" [0, 60, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
+
+
+ XY Charts bar horizontal with multiple datasets
+
+ xychart-beta horizontal
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [0, 60, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
+
+
+ XY Charts line single dataset
xychart-beta
title "Line chart with many category"
@@ -70,7 +91,7 @@
line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
- XY Charts category with large text
+ XY Charts bar with large text
xychart-beta
title "Basic xychart with many categories with category overlap"
diff --git a/docs/syntax/xyChart.md b/docs/syntax/xyChart.md
index 7e91863f9..b6e904a27 100644
--- a/docs/syntax/xyChart.md
+++ b/docs/syntax/xyChart.md
@@ -6,12 +6,54 @@
# XY Chart
-> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to display one or more datasets containing categories of data.
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
## Example
+### bar chart displaying single dataset
+
+```mermaid-example
+xychart-beta
+ title "Sales Revenue"
+ x-axis [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]
+```
+
+```mermaid
+xychart-beta
+ title "Sales Revenue"
+ x-axis [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]
+```
+
+### bar chart displaying 3 datasets
+
+```mermaid-example
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
+```
+
+```mermaid
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
+```
+
+### combined bar/line chart displaying 2 datasets
+
```mermaid-example
xychart-beta
title "Sales Revenue"
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotType.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotType.ts
new file mode 100644
index 000000000..e4be8e58d
--- /dev/null
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotType.ts
@@ -0,0 +1,5 @@
+/*eslint-disable no-restricted-syntax */
+export enum PlotType {
+ BAR = 'bar',
+ LINE = 'line',
+}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
index cf7d4e516..95ffcf195 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/barPlot.ts
@@ -3,7 +3,7 @@ import type { Axis } from '../axis/index.js';
export class BarPlot {
constructor(
- private barData: BarPlotData,
+ private barData: BarPlotData[],
private boundingRect: BoundingRect,
private xAxis: Axis,
private yAxis: Axis,
@@ -12,49 +12,85 @@ export class BarPlot {
) {}
getDrawableElement(): DrawableElem[] {
- const finalData: [number, number][] = this.barData.data.map((d) => [
- this.xAxis.getScaleValue(d[0]),
- this.yAxis.getScaleValue(d[1]),
- ]);
+ const offset = new Array(this.barData[0].data.length).fill(0);
+ const enlarge = new Array(this.barData[0].data.length).fill(0);
+ return this.barData.map((barData, dataIndex) => {
+ const finalData: [number, number][] = barData.data.map((d) => [
+ this.xAxis.getScaleValue(d[0]),
+ this.yAxis.getScaleValue(d[1]),
+ ]);
- const barPaddingPercent = 0.05;
+ const barPaddingPercent = 0.05;
- const barWidth =
- Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
- (1 - barPaddingPercent);
- const barWidthHalf = barWidth / 2;
+ const barWidth =
+ Math.min(this.xAxis.getAxisOuterPadding() * 2, this.xAxis.getTickDistance()) *
+ (1 - barPaddingPercent);
+ const barWidthHalf = barWidth / 2;
- if (this.orientation === 'horizontal') {
- return [
- {
- groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
+ if (this.orientation === 'horizontal') {
+ return {
+ groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
type: 'rect',
- data: finalData.map((data) => ({
- x: this.boundingRect.x,
- y: data[0] - barWidthHalf,
- height: barWidth,
- width: data[1] - this.boundingRect.x,
- fill: this.barData.fill,
- strokeWidth: 0,
- strokeFill: this.barData.fill,
- })),
- },
- ];
- }
- return [
- {
- groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
+ data: finalData.map((data, index) => {
+ const adjustForAxisOuterPadding = dataIndex > 0 ? this.yAxis.getAxisOuterPadding() : 0;
+ let x = offset[index] + this.boundingRect.x;
+ let width = data[1] - this.boundingRect.x - adjustForAxisOuterPadding;
+ if (enlarge[index] > 0) {
+ x -= enlarge[index];
+ width += enlarge[index];
+ enlarge[index] = 0;
+ offset[index] -= adjustForAxisOuterPadding;
+ }
+ offset[index] += width;
+ if (barData.data[index][1] === 0 && enlarge[index] === 0) {
+ enlarge[index] = width;
+ }
+ if (barData.data[index][1] === 0) {
+ width = 0;
+ }
+ return {
+ x,
+ y: data[0] - barWidthHalf,
+ height: barWidth,
+ width,
+ fill: barData.fill,
+ strokeWidth: 0,
+ strokeFill: barData.fill,
+ };
+ }),
+ };
+ }
+ return {
+ groupTexts: ['plot', `bar-plot-${this.plotIndex}-${dataIndex}`],
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,
- })),
- },
- ];
+ data: finalData.map((data, index) => {
+ const adjustForAxisOuterPadding = dataIndex > 0 ? this.yAxis.getAxisOuterPadding() : 0;
+ const y = data[1] - offset[index] + adjustForAxisOuterPadding;
+ let height =
+ this.boundingRect.y + this.boundingRect.height - data[1] - adjustForAxisOuterPadding;
+ if (enlarge[index] > 0) {
+ height += enlarge[index];
+ enlarge[index] = 0;
+ offset[index] -= adjustForAxisOuterPadding;
+ }
+ offset[index] += height;
+ if (barData.data[index][1] === 0 && enlarge[index] === 0) {
+ enlarge[index] = height;
+ }
+ if (barData.data[index][1] === 0) {
+ height = 0;
+ }
+ return {
+ x: data[0] - barWidthHalf,
+ y,
+ width: barWidth,
+ height,
+ fill: barData.fill,
+ strokeWidth: 0,
+ strokeFill: barData.fill,
+ };
+ }),
+ };
+ });
}
}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
index 2a7b4a283..4f0e3d002 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
@@ -6,11 +6,14 @@ import type {
Point,
XYChartThemeConfig,
XYChartConfig,
+ BarPlotData,
+ LinePlotData,
} 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 { PlotType } from './PlotType.js';
export interface Plot extends ChartComponent {
setAxes(xAxis: Axis, yAxis: Axis): void;
@@ -55,34 +58,35 @@ export class BasePlot implements Plot {
throw Error('Axes must be passed to render Plots');
}
const drawableElem: DrawableElem[] = [];
- for (const [i, plot] of this.chartData.plots.entries()) {
- switch (plot.type) {
- case 'line':
- {
- const linePlot = new LinePlot(
- plot,
- this.xAxis,
- this.yAxis,
- this.chartConfig.chartOrientation,
- i
- );
- drawableElem.push(...linePlot.getDrawableElement());
- }
- break;
- case 'bar':
- {
- const barPlot = new BarPlot(
- plot,
- this.boundingRect,
- this.xAxis,
- this.yAxis,
- this.chartConfig.chartOrientation,
- i
- );
- drawableElem.push(...barPlot.getDrawableElement());
- }
- break;
- }
+ const linePlots = this.chartData.plots.filter(
+ (plot) => plot.type === PlotType.LINE
+ ) as LinePlotData[];
+ const barPlots = this.chartData.plots.filter(
+ (plot) => plot.type === PlotType.BAR
+ ) as BarPlotData[];
+
+ let plotIndex = 0;
+ if (linePlots.length) {
+ const linePlot = new LinePlot(
+ linePlots,
+ this.xAxis,
+ this.yAxis,
+ this.chartConfig.chartOrientation,
+ plotIndex
+ );
+ drawableElem.push(...linePlot.getDrawableElement());
+ }
+ if (barPlots.length) {
+ const barPlot = new BarPlot(
+ barPlots,
+ this.boundingRect,
+ this.xAxis,
+ this.yAxis,
+ this.chartConfig.chartOrientation,
+ plotIndex
+ );
+ drawableElem.push(...barPlot.getDrawableElement());
+ plotIndex++;
}
return drawableElem;
}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
index d8d0666de..066581f76 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/linePlot.ts
@@ -4,7 +4,7 @@ import type { Axis } from '../axis/index.js';
export class LinePlot {
constructor(
- private plotData: LinePlotData,
+ private plotData: LinePlotData[],
private xAxis: Axis,
private yAxis: Axis,
private orientation: XYChartConfig['chartOrientation'],
@@ -12,36 +12,40 @@ export class LinePlot {
) {}
getDrawableElement(): DrawableElem[] {
- const finalData: [number, number][] = this.plotData.data.map((d) => [
- this.xAxis.getScaleValue(d[0]),
- this.yAxis.getScaleValue(d[1]),
- ]);
-
- let path: string | null;
- if (this.orientation === 'horizontal') {
- path = line()
- .y((d) => d[0])
- .x((d) => d[1])(finalData);
- } else {
- path = line()
- .x((d) => d[0])
- .y((d) => d[1])(finalData);
- }
- if (!path) {
- return [];
- }
- return [
+ const drawables: DrawableElem[] = [];
+ this.plotData.forEach((plotData, dataIndex) => {
{
- groupTexts: ['plot', `line-plot-${this.plotIndex}`],
- type: 'path',
- data: [
- {
- path,
- strokeFill: this.plotData.strokeFill,
- strokeWidth: this.plotData.strokeWidth,
- },
- ],
- },
- ];
+ const finalData: [number, number][] = plotData.data.map((d) => [
+ this.xAxis.getScaleValue(d[0]),
+ this.yAxis.getScaleValue(d[1]),
+ ]);
+
+ let path: string | null;
+ if (this.orientation === 'horizontal') {
+ path = line()
+ .y((d) => d[0])
+ .x((d) => d[1])(finalData);
+ } else {
+ path = line()
+ .x((d) => d[0])
+ .y((d) => d[1])(finalData);
+ }
+ if (!path) {
+ return [];
+ }
+ drawables.push({
+ groupTexts: ['plot', `line-plot-${this.plotIndex}-${dataIndex}`],
+ type: 'path',
+ data: [
+ {
+ path,
+ strokeFill: plotData.strokeFill,
+ strokeWidth: plotData.strokeWidth,
+ },
+ ],
+ });
+ }
+ });
+ return drawables;
}
}
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
index 3d188895f..357d2fcc1 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/interfaces.ts
@@ -1,3 +1,5 @@
+import { PlotType } from './components/plot/PlotType.js';
+
export interface XYChartAxisThemeConfig {
titleColor: string;
labelColor: string;
@@ -28,14 +30,14 @@ export interface ChartComponent {
export type SimplePlotDataType = [string, number][];
export interface LinePlotData {
- type: 'line';
+ type: PlotType.LINE;
strokeFill: string;
strokeWidth: number;
data: SimplePlotDataType;
}
export interface BarPlotData {
- type: 'bar';
+ type: PlotType.BAR;
fill: string;
data: SimplePlotDataType;
}
@@ -43,7 +45,7 @@ export interface BarPlotData {
export type PlotData = LinePlotData | BarPlotData;
export function isBarPlot(data: PlotData): data is BarPlotData {
- return data.type === 'bar';
+ return data.type === PlotType.BAR;
}
export interface BandAxisDataType {
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index d113250aa..ff89c0fb1 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
@@ -33,384 +33,388 @@ describe('Testing xychart jison file', () => {
clearMocks();
});
- it('should throw error if xychart-beta text is not there', () => {
- const str = 'xychart-beta-1';
- expect(parserFnConstructor(str)).toThrow();
- });
-
- it('should not throw error if only xychart is there', () => {
- const str = 'xychart-beta';
- expect(parserFnConstructor(str)).not.toThrow();
- });
-
- it('parse title of the chart within "', () => {
- const str = 'xychart-beta \n title "This is a title"';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title');
- });
- it('parse title of the chart without "', () => {
- const str = 'xychart-beta \n title oneLinertitle';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle');
- });
-
- it('parse chart orientation', () => {
- const str = 'xychart-beta vertical';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical');
- });
-
- it('parse chart orientation with spaces', () => {
- let str = 'xychart-beta horizontal ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal');
-
- str = 'xychart-beta abc';
- expect(parserFnConstructor(str)).toThrow();
- });
-
- it('parse x-axis', () => {
- const str = 'xychart-beta \nx-axis xAxisName\n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName',
- type: 'text',
+ describe('single dataset', () => {
+ it('should throw error if xychart-beta text is not there', () => {
+ const str = 'xychart-beta-1';
+ expect(parserFnConstructor(str)).toThrow();
});
- });
- it('parse x-axis with axis name without "', () => {
- const str = 'xychart-beta \nx-axis xAxisName \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName',
- type: 'text',
+ it('should not throw error if only xychart is there', () => {
+ const str = 'xychart-beta';
+ expect(parserFnConstructor(str)).not.toThrow();
});
- });
- it('parse x-axis with axis name with "', () => {
- const str = 'xychart-beta \n x-axis "xAxisName has space"\n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName has space',
- type: 'text',
+ it('parse title of the chart within "', () => {
+ const str = 'xychart-beta \n title "This is a title"';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('This is a title');
+ });
+ it('parse title of the chart without "', () => {
+ const str = 'xychart-beta \n title oneLinertitle';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setDiagramTitle).toHaveBeenCalledWith('oneLinertitle');
});
- });
- it('parse x-axis with axis name with " with spaces', () => {
- const str = 'xychart-beta \n x-axis " xAxisName has space " \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: ' xAxisName has space ',
- type: 'text',
+ it('parse chart orientation', () => {
+ const str = 'xychart-beta vertical';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setOrientation).toHaveBeenCalledWith('vertical');
});
- });
- it('parse x-axis with axis name and range data', () => {
- const str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName',
- type: 'text',
- });
- expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33);
- });
- it('parse x-axis throw error for invalid range data', () => {
- const str = 'xychart-beta \nx-axis xAxisName aaa --> 33 \n';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse x-axis with axis name and range data with only decimal part', () => {
- const str = 'xychart-beta \nx-axis xAxisName 45.5 --> .34 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName',
- type: 'text',
- });
- expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34);
- });
+ it('parse chart orientation with spaces', () => {
+ let str = 'xychart-beta horizontal ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setOrientation).toHaveBeenCalledWith('horizontal');
- it('parse x-axis without axisname and range data', () => {
- const str = 'xychart-beta \nx-axis 45.5 --> 1.34 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: '',
- type: 'text',
+ str = 'xychart-beta abc';
+ expect(parserFnConstructor(str)).toThrow();
});
- expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 1.34);
- });
- it('parse x-axis with axis name and category data', () => {
- const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: 'xAxisName',
- type: 'text',
- });
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- {
- text: 'cat1',
+ it('parse x-axis', () => {
+ const str = 'xychart-beta \nx-axis xAxisName\n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName',
type: 'text',
- },
- { text: 'cat2a', type: 'text' },
- ]);
- });
-
- it('parse x-axis without axisname and category data', () => {
- const str = 'xychart-beta \nx-axis [ "cat1" , cat2a ] \n ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
- text: '',
- type: 'text',
+ });
});
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- {
- text: 'cat1',
+
+ it('parse x-axis with axis name without "', () => {
+ const str = 'xychart-beta \nx-axis xAxisName \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName',
type: 'text',
- },
- { text: 'cat2a', type: 'text' },
- ]);
- });
-
- it('parse x-axis throw error if unbalanced bracket', () => {
- let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n ';
- expect(parserFnConstructor(str)).toThrow();
- str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] ] \n ';
- expect(parserFnConstructor(str)).toThrow();
- });
-
- it('parse x-axis complete variant 1', () => {
- const str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`;
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- { text: 'category1', type: 'text' },
- { text: 'category 2', type: 'text' },
- { text: 'category3', type: 'text' },
- ]);
- });
-
- it('parse x-axis complete variant 2', () => {
- const str =
- 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- { text: 'cat1 with space', type: 'text' },
- { text: 'cat2', type: 'text' },
- { text: 'cat3', type: 'text' },
- ]);
- });
-
- it('parse x-axis complete variant 3', () => {
- const str =
- 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- { text: 'cat1 with space', type: 'text' },
- { text: 'cat2asdf', type: 'text' },
- { text: 'cat3', type: 'text' },
- ]);
- });
-
- it('parse y-axis with axis name', () => {
- const str = 'xychart-beta \ny-axis yAxisName\n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- });
- it('parse y-axis with axis name with spaces', () => {
- const str = 'xychart-beta \ny-axis yAxisName \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- });
- it('parse y-axis with axis name with "', () => {
- const str = 'xychart-beta \n y-axis "yAxisName has space"\n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
- text: 'yAxisName has space',
- type: 'text',
+ });
});
- });
- it('parse y-axis with axis name with " and spaces', () => {
- const str = 'xychart-beta \n y-axis " yAxisName has space " \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
- text: ' yAxisName has space ',
- type: 'text',
+
+ it('parse x-axis with axis name with "', () => {
+ const str = 'xychart-beta \n x-axis "xAxisName has space"\n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName has space',
+ type: 'text',
+ });
});
- });
- it('parse y-axis with axis name with range data', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
- });
- it('parse y-axis without axisname with range data', () => {
- const str = 'xychart-beta \ny-axis 45.5 --> 33 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' });
- expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
- });
- it('parse y-axis with axis name with range data with only decimal part', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33);
- });
- it('parse y-axis throw error for invalid number in range data', () => {
- const str = 'xychart-beta \ny-axis yAxisName 45.5 --> abc \n';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse y-axis throws error if range data is passed', () => {
- const str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse both axis at once', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- });
- it('parse line Data', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle', type: 'text' },
- [23, 45, 56.6]
- );
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- });
- it('parse line Data with spaces and +,- symbols', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle with space', type: 'text' },
- [23, -45, 56.6]
- );
- });
- it('parse line Data without title', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: '', type: 'text' },
- [23, -45, 56.6, 0.33]
- );
- });
- it('parse line Data throws error unbalanced brackets', () => {
- let str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse line Data throws error if data is not provided', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse line Data throws error if data is empty', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse line Data throws error if , is not in proper', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse line Data throws error if not number', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse bar Data', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle', type: 'text' },
- [23, 45, 56.6, 0.22]
- );
- });
- it('parse bar Data spaces and +,- symbol', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle with space', type: 'text' },
- [23, -45, 56.6]
- );
- });
- it('parse bar Data without plot title', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]);
- });
- it('parse bar should throw for unbalanced brackets', () => {
- let str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse bar should throw error if data is not provided', () => {
- const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse bar should throw error if data is empty', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse bar should throw error if comma is not proper', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse bar should throw error if number is not passed', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] ';
- expect(parserFnConstructor(str)).toThrow();
- });
- it('parse multiple bar and line variant 1', () => {
- const str =
- 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]';
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle1', type: 'text' },
- [23, 45, 56.6]
- );
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle2', type: 'text' },
- [13, 42, 56.89]
- );
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle1', type: 'text' },
- [11, 45.5, 67, 23]
- );
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle2', type: 'text' },
- [45, 99, 12]
- );
- });
- it('parse multiple bar and line variant 2', () => {
- const str = `
+
+ it('parse x-axis with axis name with " with spaces', () => {
+ const str = 'xychart-beta \n x-axis " xAxisName has space " \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: ' xAxisName has space ',
+ type: 'text',
+ });
+ });
+
+ it('parse x-axis with axis name and range data', () => {
+ const str = 'xychart-beta \nx-axis xAxisName 45.5 --> 33 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName',
+ type: 'text',
+ });
+ expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 33);
+ });
+ it('parse x-axis throw error for invalid range data', () => {
+ const str = 'xychart-beta \nx-axis xAxisName aaa --> 33 \n';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse x-axis with axis name and range data with only decimal part', () => {
+ const str = 'xychart-beta \nx-axis xAxisName 45.5 --> .34 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName',
+ type: 'text',
+ });
+ expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34);
+ });
+
+ it('parse x-axis without axisname and range data', () => {
+ const str = 'xychart-beta \nx-axis 45.5 --> 1.34 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: '',
+ type: 'text',
+ });
+ expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 1.34);
+ });
+
+ it('parse x-axis with axis name and category data', () => {
+ const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: 'xAxisName',
+ type: 'text',
+ });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ {
+ text: 'cat1',
+ type: 'text',
+ },
+ { text: 'cat2a', type: 'text' },
+ ]);
+ });
+
+ it('parse x-axis without axisname and category data', () => {
+ const str = 'xychart-beta \nx-axis [ "cat1" , cat2a ] \n ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({
+ text: '',
+ type: 'text',
+ });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ {
+ text: 'cat1',
+ type: 'text',
+ },
+ { text: 'cat2a', type: 'text' },
+ ]);
+ });
+
+ it('parse x-axis throw error if unbalanced bracket', () => {
+ let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n ';
+ expect(parserFnConstructor(str)).toThrow();
+ str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] ] \n ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+
+ it('parse x-axis complete variant 1', () => {
+ const str = `xychart-beta \n x-axis "this is x axis" [category1, "category 2", category3]\n`;
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ { text: 'category1', type: 'text' },
+ { text: 'category 2', type: 'text' },
+ { text: 'category3', type: 'text' },
+ ]);
+ });
+
+ it('parse x-axis complete variant 2', () => {
+ const str =
+ 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 , cat3] \n ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ { text: 'cat1 with space', type: 'text' },
+ { text: 'cat2', type: 'text' },
+ { text: 'cat3', type: 'text' },
+ ]);
+ });
+
+ it('parse x-axis complete variant 3', () => {
+ const str =
+ 'xychart-beta \nx-axis xAxisName [ "cat1 with space" , cat2 asdf , cat3] \n ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ { text: 'cat1 with space', type: 'text' },
+ { text: 'cat2asdf', type: 'text' },
+ { text: 'cat3', type: 'text' },
+ ]);
+ });
+
+ it('parse y-axis with axis name', () => {
+ const str = 'xychart-beta \ny-axis yAxisName\n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ });
+ it('parse y-axis with axis name with spaces', () => {
+ const str = 'xychart-beta \ny-axis yAxisName \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ });
+ it('parse y-axis with axis name with "', () => {
+ const str = 'xychart-beta \n y-axis "yAxisName has space"\n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
+ text: 'yAxisName has space',
+ type: 'text',
+ });
+ });
+ it('parse y-axis with axis name with " and spaces', () => {
+ const str = 'xychart-beta \n y-axis " yAxisName has space " \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({
+ text: ' yAxisName has space ',
+ type: 'text',
+ });
+ });
+ it('parse y-axis with axis name with range data', () => {
+ const str = 'xychart-beta \ny-axis yAxisName 45.5 --> 33 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
+ });
+ it('parse y-axis without axisname with range data', () => {
+ const str = 'xychart-beta \ny-axis 45.5 --> 33 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: '', type: 'text' });
+ expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33);
+ });
+ it('parse y-axis with axis name with range data with only decimal part', () => {
+ const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 0.33);
+ });
+ it('parse y-axis throw error for invalid number in range data', () => {
+ const str = 'xychart-beta \ny-axis yAxisName 45.5 --> abc \n';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse y-axis throws error if range data is passed', () => {
+ const str = 'xychart-beta \ny-axis yAxisName [ 45.3, 33 ] \n';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse both axis at once', () => {
+ const str = 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ });
+ it('parse line Data', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line lineTitle [23, 45, 56.6]';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ });
+ it('parse line Data with spaces and +,- symbols', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle with space', type: 'text' },
+ [23, -45, 56.6]
+ );
+ });
+ it('parse line Data without title', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 , .33] ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: '', type: 'text' },
+ [23, -45, 56.6, 0.33]
+ );
+ });
+ it('parse line Data throws error unbalanced brackets', () => {
+ let str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 [ -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -45 ] 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse line Data throws error if data is not provided', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse line Data throws error if data is empty', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse line Data throws error if , is not in proper', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , , -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse line Data throws error if not number', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse bar Data', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle [23, 45, 56.6, .22]';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle', type: 'text' },
+ [23, 45, 56.6, 0.22]
+ );
+ });
+ it('parse bar Data spaces and +,- symbol', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle with space', type: 'text' },
+ [23, -45, 56.6]
+ );
+ });
+ it('parse bar Data without plot title', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]);
+ });
+ it('parse bar should throw for unbalanced brackets', () => {
+ let str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 [ -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -45 ] 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse bar should throw error if data is not provided', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse bar should throw error if data is empty', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse bar should throw error if comma is not proper', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , , -45 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse bar should throw error if number is not passed', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] ';
+ expect(parserFnConstructor(str)).toThrow();
+ });
+ it('parse multiple bar and line variant 1', () => {
+ const str =
+ 'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar barTitle1 [23, 45, 56.6] \n line lineTitle1 [11, 45.5, 67, 23] \n bar barTitle2 [13, 42, 56.89] \n line lineTitle2 [45, 99, 012]';
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle1', type: 'text' },
+ [11, 45.5, 67, 23]
+ );
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle2', type: 'text' },
+ [45, 99, 12]
+ );
+ });
+ it('parse multiple bar and line variant 2', () => {
+ const str = `
xychart-beta horizontal
title Basic xychart
x-axis "this is x axis" [category1, "category 2", category3]
@@ -419,30 +423,81 @@ describe('Testing xychart jison file', () => {
line lineTitle1 [11, 45.5, 67, 23]
bar barTitle2 [13, 42, 56.89]
line lineTitle2 [45, 99, 012]`;
- expect(parserFnConstructor(str)).not.toThrow();
- expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yaxisText', type: 'text' });
- expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150);
- expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
- expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
- { text: 'category1', type: 'text' },
- { text: 'category 2', type: 'text' },
- { text: 'category3', type: 'text' },
- ]);
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle1', type: 'text' },
- [23, 45, 56.6]
- );
- expect(mockDB.setBarData).toHaveBeenCalledWith(
- { text: 'barTitle2', type: 'text' },
- [13, 42, 56.89]
- );
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle1', type: 'text' },
- [11, 45.5, 67, 23]
- );
- expect(mockDB.setLineData).toHaveBeenCalledWith(
- { text: 'lineTitle2', type: 'text' },
- [45, 99, 12]
- );
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yaxisText', type: 'text' });
+ expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(10, 150);
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'this is x axis', type: 'text' });
+ expect(mockDB.setXAxisBand).toHaveBeenCalledWith([
+ { text: 'category1', type: 'text' },
+ { text: 'category 2', type: 'text' },
+ { text: 'category3', type: 'text' },
+ ]);
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenCalledWith(
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle1', type: 'text' },
+ [11, 45.5, 67, 23]
+ );
+ expect(mockDB.setLineData).toHaveBeenCalledWith(
+ { text: 'lineTitle2', type: 'text' },
+ [45, 99, 12]
+ );
+ });
+ });
+
+ describe('multiple datasets', () => {
+ it('parse 2 datasets', () => {
+ const str = `xychart-beta
+ x-axis xAxisName
+ y-axis yAxisName
+ bar "barTitle1" [23, 45, 56.6]
+ bar "barTitle2" [13, 42, 56.89]`;
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 1,
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 2,
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
+ });
+
+ it('parse 3 datasets', () => {
+ const str = `xychart-beta
+ x-axis xAxisName
+ y-axis yAxisName
+ bar "barTitle1" [23, 45, 56.6]
+ bar "barTitle2" [13, 42, 56.89]
+ bar "barTitle3" [18, 37, 56.1]`;
+ expect(parserFnConstructor(str)).not.toThrow();
+ expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
+ expect(mockDB.setXAxisTitle).toHaveBeenCalledWith({ text: 'xAxisName', type: 'text' });
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 1,
+ { text: 'barTitle1', type: 'text' },
+ [23, 45, 56.6]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 2,
+ { text: 'barTitle2', type: 'text' },
+ [13, 42, 56.89]
+ );
+ expect(mockDB.setBarData).toHaveBeenNthCalledWith(
+ 3,
+ { text: 'barTitle3', type: 'text' },
+ [18, 37, 56.1]
+ );
+ });
});
});
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index 637477f28..bb829eebd 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
@@ -22,6 +22,7 @@ import type {
} from './chartBuilder/interfaces.js';
import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
import type { Group } from '../../diagram-api/types.js';
+import { PlotType } from './chartBuilder/components/plot/PlotType.js';
let plotIndex = 0;
@@ -34,6 +35,8 @@ let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color
let hasSetXAxis = false;
let hasSetYAxis = false;
+let dataSets: number[][] = [];
+
interface NormalTextType {
type: 'text';
text: string;
@@ -57,7 +60,7 @@ function getChartDefaultData(): XYChartData {
yAxis: {
type: 'linear',
title: '',
- min: Infinity,
+ min: 0,
max: -Infinity,
},
xAxis: {
@@ -109,20 +112,26 @@ function setYAxisRangeData(min: number, max: number) {
}
// this function does not set `hasSetYAxis` as there can be multiple data so we should calculate the range accordingly
-function setYAxisRangeFromPlotData(data: number[]) {
- const minValue = Math.min(...data);
- const maxValue = Math.max(...data);
- const prevMinValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.min : Infinity;
- const prevMaxValue = isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.max : -Infinity;
+function setYAxisRangeFromPlotData(data: number[], plotType: PlotType) {
+ const sum = new Array(data.length).fill(0);
+ if (plotType === PlotType.BAR) {
+ dataSets.push(data);
+ for (let i = 0; i < data.length; i++) {
+ for (const entry of dataSets) {
+ sum[i] += entry[i];
+ }
+ }
+ }
+
xyChartData.yAxis = {
type: 'linear',
title: xyChartData.yAxis.title,
- min: Math.min(prevMinValue, minValue),
- max: Math.max(prevMaxValue, maxValue),
+ min: isLinearAxisData(xyChartData.yAxis) ? xyChartData.yAxis.min : Math.min(...sum),
+ max: Math.max(...sum),
};
}
-function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
+function transformDataWithoutCategory(data: number[], plotType: PlotType): SimplePlotDataType {
let retData: SimplePlotDataType = [];
if (data.length === 0) {
return retData;
@@ -133,11 +142,11 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
setXAxisRangeData(Math.min(prevMinValue, 1), Math.max(prevMaxValue, data.length));
}
if (!hasSetYAxis) {
- setYAxisRangeFromPlotData(data);
+ setYAxisRangeFromPlotData(data, plotType);
}
if (isBandAxisData(xyChartData.xAxis)) {
- retData = xyChartData.xAxis.categories.map((c, i) => [c, data[i]]);
+ retData = xyChartData.xAxis.categories.map((c, i) => [c, data[i] ?? 0]);
}
if (isLinearAxisData(xyChartData.xAxis)) {
@@ -148,7 +157,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
for (let i = min; i <= max; i += step) {
categories.push(`${i}`);
}
- retData = categories.map((c, i) => [c, data[i]]);
+ retData = categories.map((c, i) => [c, data[i] ?? 0]);
}
return retData;
@@ -159,9 +168,9 @@ function getPlotColorFromPalette(plotIndex: number): string {
}
function setLineData(title: NormalTextType, data: number[]) {
- const plotData = transformDataWithoutCategory(data);
+ const plotData = transformDataWithoutCategory(data, PlotType.LINE);
xyChartData.plots.push({
- type: 'line',
+ type: PlotType.LINE,
strokeFill: getPlotColorFromPalette(plotIndex),
strokeWidth: 2,
data: plotData,
@@ -170,9 +179,9 @@ function setLineData(title: NormalTextType, data: number[]) {
}
function setBarData(title: NormalTextType, data: number[]) {
- const plotData = transformDataWithoutCategory(data);
+ const plotData = transformDataWithoutCategory(data, PlotType.BAR);
xyChartData.plots.push({
- type: 'bar',
+ type: PlotType.BAR,
fill: getPlotColorFromPalette(plotIndex),
data: plotData,
});
@@ -204,6 +213,7 @@ const clear = function () {
plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
hasSetXAxis = false;
hasSetYAxis = false;
+ dataSets = [];
};
export default {
diff --git a/packages/mermaid/src/docs/syntax/xyChart.md b/packages/mermaid/src/docs/syntax/xyChart.md
index 8edfecbea..91de2ba97 100644
--- a/packages/mermaid/src/docs/syntax/xyChart.md
+++ b/packages/mermaid/src/docs/syntax/xyChart.md
@@ -1,11 +1,35 @@
# XY Chart
-> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
+> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to display one or more datasets containing categories of data.
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
## Example
+### bar chart displaying single dataset
+
+```mermaid-example
+xychart-beta
+ title "Sales Revenue"
+ x-axis [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]
+```
+
+### bar chart displaying 3 datasets
+
+```mermaid-example
+ xychart-beta
+ title "Basic xychart with multiple datasets"
+ x-axis "Relevant categories" [category1, "category 2", category3, category4]
+ y-axis Animals 0 --> 160
+ bar "dogs" [40, 20, 40, 30]
+ bar "cats" [20, 40, 50, 30]
+ bar "birds" [30, 60, 50, 30]
+```
+
+### combined bar/line chart displaying 2 datasets
+
```mermaid-example
xychart-beta
title "Sales Revenue"