marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-15 13:29:40 +02:00
Code Issues Packages Projects Releases Wiki Activity

review findings

Browse Source
This commit is contained in:
Axel Müller
2024-01-13 07:39:58 +01:00
parent 25a9479acf
commit 506314598e
7 changed files with 83 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -330,7 +330,9 @@ describe('XY Chart', () => {
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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
bar "dogs" [40, 20, 40, 30]
bar "cats" [20, 40, 50, 30]
bar "birds" [30, 60, 50, 30]
`,
{}
);
@@ -344,7 +346,9 @@ describe('XY Chart', () => {
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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
bar "dogs" [40, 20, 40, 30]
bar "cats" [20, 40, 50, 30]
bar "birds" [30, 60, 50, 30]
`,
{}
);

8
demos/xychart.html
View File

@@ -67,7 +67,9 @@
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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
bar "dogs" [40, 20, 40, 30]
bar "cats" [20, 40, 50, 30]
bar "birds" [30, 60, 50, 30]
</pre>
<h1>XY Charts bar horizontal with multiple datasets</h1>
@@ -76,7 +78,9 @@
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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
bar "dogs" [40, 20, 40, 30]
bar "cats" [20, 40, 50, 30]
bar "birds" [30, 60, 50, 30]
</pre>
<h1>XY Charts line single dataset</h1>

8
docs/syntax/xyChart.md
View File

@@ -37,7 +37,9 @@ 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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
bar "dogs" [40, 20, 40, 30]
bar "cats" [20, 40, 50, 30]
bar "birds" [30, 60, 50, 30]
```
```mermaid
@@ -45,7 +47,9 @@ 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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
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

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

@@ -102,28 +102,13 @@ statement
| Y_AXIS parseYAxis
| LINE plotData { yy.setLineData({text: '', type: 'text'}, $plotData); }
| LINE text plotData { yy.setLineData($text, $plotData); }
| BAR datasets { yy.setBarData($datasets); }
| 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($$); }
;
datasets
: SQUARE_BRACES_START datasetBraced SQUARE_BRACES_END { $$ = [$datasetBraced] }
| datasetBraced { $$ = [$datasetBraced] }
| dataset { $$ = [$dataset] }
;
datasetBraced
: SQUARE_BRACES_START dataset SQUARE_BRACES_END COMMA datasetBraced { $$ = [$dataset, ...$datasetBraced] }
| SQUARE_BRACES_START dataset SQUARE_BRACES_END { $$ = [$dataset] }
;
dataset
: plotData { $$ = ['', $plotData] }
| text plotData { $$ = [$text, $plotData] }
;
plotData
: SQUARE_BRACES_START commaSeparatedNumbers SQUARE_BRACES_END { $$ = $commaSeparatedNumbers }
;

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

@@ -338,9 +338,10 @@ describe('Testing xychart jison file', () => {
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]],
]);
expect(mockDB.setBarData).toHaveBeenCalledWith(
{ text: 'barTitle', type: 'text' },
[23, 45, 56.6, 0.22]
);
});
it('parse bar Data spaces and +,- symbol', () => {
const str =
@@ -348,9 +349,10 @@ describe('Testing xychart jison file', () => {
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]],
]);
expect(mockDB.setBarData).toHaveBeenCalledWith(
{ text: 'barTitle with space', type: 'text' },
[23, -45, 56.6]
);
});
it('parse bar Data without plot title', () => {
const str =
@@ -358,7 +360,7 @@ describe('Testing xychart jison file', () => {
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([['', [23, -45, 56.6]]]);
expect(mockDB.setBarData).toHaveBeenCalledWith({ text: '', type: 'text' }, [23, -45, 56.6]);
});
it('parse bar should throw for unbalanced brackets', () => {
let str =
@@ -394,12 +396,14 @@ describe('Testing xychart jison file', () => {
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.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]
@@ -428,12 +432,14 @@ describe('Testing xychart jison file', () => {
{ 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.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]
@@ -448,31 +454,43 @@ describe('Testing xychart jison file', () => {
describe('multiple datasets', () => {
it('parse 2 datasets', () => {
const str =
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar [["barTitle1" [23, 45, 56.6]],["barTitle2" [13, 42, 56.89]]]';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar "barTitle1" [23, 45, 56.6]\nbar "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).toHaveBeenCalledWith([
[
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
[{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
],
]);
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\nx-axis xAxisName\ny-axis yAxisName\nbar [["barTitle1" [23, 45, 56.6]],["barTitle2" [13, 42, 56.89]],["barTitle3" [18, 37, 56.1]]]';
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\nbar "barTitle1" [23, 45, 56.6]\nbar "barTitle2" [13, 42, 56.89]\nbar "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).toHaveBeenCalledWith([
[
[{ text: 'barTitle1', type: 'text' }, [23, 45, 56.6]],
[{ text: 'barTitle2', type: 'text' }, [13, 42, 56.89]],
[{ text: 'barTitle3', type: 'text' }, [18, 37, 56.1]],
],
]);
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]
);
});
});
});

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

@@ -169,23 +169,14 @@ function setLineData(title: NormalTextType, data: number[]) {
plotIndex++;
}
type NamedDataset = [title: NormalTextType, data: number[]];
function setBarData(datasets: NamedDataset[]) {
datasets[0]
.filter((dataset) => Array.isArray(dataset))
.forEach((dataset) => {
const data = dataset as any as NamedDataset;
const plotData = transformDataWithoutCategory(
Array.isArray(data[1]) ? data[1] : (dataset as any as number[])
);
xyChartData.plots.push({
type: 'bar',
fill: getPlotColorFromPalette(plotIndex),
data: plotData,
});
plotIndex++;
});
function setBarData(title: NormalTextType, data: number[]) {
const plotData = transformDataWithoutCategory(data);
xyChartData.plots.push({
type: 'bar',
fill: getPlotColorFromPalette(plotIndex),
data: plotData,
});
plotIndex++;
}
function getDrawableElem(): DrawableElem[] {

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

@@ -23,7 +23,9 @@ 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]],["cats" [20, 40, 50, 30]],["birds" [30, 60, 50, 30]]]
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