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

Rendering the chart with all the property from chart config

Browse Source
This commit is contained in:
Subhash Halder
2023-07-03 21:44:56 +05:30
parent ebd329149b
commit 597f7a8e87
4 changed files with 69 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/xychart.html
View File

@@ -18,8 +18,10 @@
<pre class="mermaid">
xychart-beta horizontal
title Basic xychart
x-axis "this is x axis" [category1, "category 2", category3]
x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150
line [23, 46, 75, 43]
bar "sample bat" [52, 96, 35, 10]
</pre>
<hr />
@@ -28,8 +30,10 @@
<pre class="mermaid">
xychart-beta
title Basic xychart
x-axis "this is x axis" [category1, "category 2", category3]
x-axis "this is x axis" [category1, "category 2", category3, category4]
y-axis yaxisText 10 --> 150
line [23, 46, 75, 43]
bar "sample bat" [52, 96, 35, 10]
</pre>
<hr />

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

@@ -24,6 +24,8 @@
%x line_title
%x line_data
%x line_data_entries
%x line_data_without_label
%x bar_data_without_label
%x bar
%x bar_title
%x bar_data
@@ -77,18 +79,22 @@ accDescr\s*"{"\s* { this.begin("acc_descr_multiline");}
<line_title>[^"]+ {return 'LINE_TITLE';}
<line_title>["]" "* {this.popState(); this.begin("line_data");}
<line_data>"["" "* {this.begin('line_data_entries');}
<line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'}
<line_data_without_label,line_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'LINE_DATA'}
<line_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()}
<line>[^\s]+" "* {this.begin("line_data"); return 'LINE_TITLE';}
<line_data_without_label>"]"" "* {this.popState(); this.popState()}
<line>[^\s\[]+" "* {this.begin("line_data"); return 'LINE_TITLE';}
<line>"["" "* {this.begin('line_data_without_label');}
"bar"" "* {this.begin("bar"); return 'BAR';}
<bar>["] {this.begin("bar_title");}
<bar_title>[^"]+ {return 'BAR_TITLE';}
<bar_title>["]" "* {this.popState(); this.begin("bar_data");}
<bar_data>"["" "* {this.begin('bar_data_entries');}
<bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'}
<bar_data_without_label,bar_data_entries>(?:[+-]?\d+(?:\.\d+)?)+(?:" "*[,]" "*(?:[+-]?\d+(?:\.\d+)?)+)*" "* {return 'BAR_DATA'}
<bar_data_entries>"]"" "* {this.popState(); this.popState(); this.popState()}
<bar>[^\s]+" "* {this.begin("bar_data"); return 'BAR_TITLE';}
<bar_data_without_label>"]"" "* {this.popState(); this.popState()}
<bar>[^\s\[]+" "* {this.begin("bar_data"); return 'BAR_TITLE';}
<bar>"["" "* {this.begin('bar_data_without_label');}
@@ -157,11 +163,13 @@ statement
;
parseLine
: LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
: LINE LINE_DATA {yy.setLineData('', $2.split(',').map(d => Number(d.trim())));}
| LINE LINE_TITLE LINE_DATA {yy.setLineData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
;
parseBar
: BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
: BAR BAR_DATA {yy.setBarData('', $2.split(',').map(d => Number(d.trim())));}
| BAR BAR_TITLE BAR_DATA {yy.setBarData($2.trim(), $3.split(',').map(d => Number(d.trim())));}
;
parseXAxis

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

@@ -175,6 +175,14 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
expect(mockDB.setLineData).toHaveBeenCalledWith('lineTitle with space', [23, -45, 56.6]);
// set line data without title
str =
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
expect(mockDB.setLineData).toHaveBeenCalledWith('', [23, -45, 56.6]);
clearMocks();
str =
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n line "lineTitle with space" [ +23 , -4aa5 , 56.6 ] ';
@@ -197,6 +205,15 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setBarData).toHaveBeenCalledWith('barTitle with space', [23, -45, 56.6]);
clearMocks();
// set bar data without title
str =
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar [ +23 , -45 , 56.6 ] ';
expect(parserFnConstructor(str)).not.toThrow();
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith('yAxisName');
expect(mockDB.setXAxisTitle).toHaveBeenCalledWith('xAxisName');
expect(mockDB.setBarData).toHaveBeenCalledWith('', [23, -45, 56.6]);
clearMocks();
str =
'xychart-beta\nx-axis xAxisName\ny-axis yAxisName\n bar "barTitle with space" [ +23 , -4aa5 , 56.6 ] ';
expect(parserFnConstructor(str)).toThrow();

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

@@ -12,7 +12,12 @@ import {
clear as commonClear,
} from '../../commonDb.js';
import { XYChartBuilder } from './chartBuilder/index.js';
import { ChartPlotEnum, DrawableElem, XYChartData, isBandAxisData } from './chartBuilder/Interfaces.js';
import {
ChartPlotEnum,
DrawableElem,
XYChartData,
isBandAxisData,
} from './chartBuilder/Interfaces.js';
import { XYChartConfig } from '../../config.type.js';
const config = configApi.getConfig();
@@ -76,27 +81,7 @@ function getChartDefalutData(): XYChartData {
categories: [],
},
title: '',
plots: [
{
type: ChartPlotEnum.BAR,
fill: '#0000bb',
data: [
['category1', 23],
['category 2', 56],
['category3', 34],
],
},
{
type: ChartPlotEnum.LINE,
strokeFill: '#bb0000',
strokeWidth: 2,
data: [
['category1', 33],
['category 2', 45],
['category3', 65],
],
},
],
plots: [],
};
}
@@ -112,7 +97,6 @@ function parseDirective(statement: string, context: string, type: string) {
mermaidAPI.parseDirective(this, statement, context, type);
}
function setOrientation(oriantation: string) {
if (oriantation === 'horizontal') {
xyChartConfig.chartOrientation = 'horizontal';
@@ -127,7 +111,10 @@ function setXAxisRangeData(min: number, max: number) {
xyChartData.xAxis = { title: xyChartData.xAxis.title, min, max };
}
function setXAxisBand(categories: string[]) {
xyChartData.xAxis = {title: xyChartData.xAxis.title, categories: categories.map(c => textSanitizer(c))};
xyChartData.xAxis = {
title: xyChartData.xAxis.title,
categories: categories.map((c) => textSanitizer(c)),
};
}
function setYAxisTitle(title: string) {
xyChartData.yAxis.title = textSanitizer(title);
@@ -135,8 +122,25 @@ function setYAxisTitle(title: string) {
function setYAxisRangeData(min: number, max: number) {
xyChartData.yAxis = { title: xyChartData.yAxis.title, min, max };
}
function setLineData(title: string, data: number[]) {}
function setBarData(title: string, data: number[]) {}
function setLineData(title: string, data: number[]) {
if (isBandAxisData(xyChartData.xAxis)) {
xyChartData.plots.push({
type: ChartPlotEnum.BAR,
fill: '#0000bb',
data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]),
});
}
}
function setBarData(title: string, data: number[]) {
if (isBandAxisData(xyChartData.xAxis)) {
xyChartData.plots.push({
type: ChartPlotEnum.LINE,
strokeFill: '#00ff00',
strokeWidth: 2,
data: xyChartData.xAxis.categories.map((c, i) => [c, data[i]]),
});
}
}
function getDrawableElem(): DrawableElem[] {
xyChartData.title = getDiagramTitle();