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

Made the axis title optional

Browse Source
This commit is contained in:
Subhash Halder
2023-09-02 18:08:59 +05:30
parent de2aa9d740
commit e0418eb661
4 changed files with 61 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
demos/xychart.html
View File

@@ -15,6 +15,17 @@
<body> <body>
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid">
xychart-beta
title "Sales Revenue (in $)"
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]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
</pre>
<hr />
<pre class="mermaid"> <pre class="mermaid">
xychart-beta horizontal xychart-beta horizontal
title "Basic xychart" title "Basic xychart"
@@ -24,8 +35,6 @@
line [23, 46, 75, 43] line [23, 46, 75, 43]
</pre> </pre>
<hr />
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid"> <pre class="mermaid">
xychart-beta xychart-beta

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

@@ -93,7 +93,7 @@ export abstract class BaseAxis implements Axis {
this.showTick = true; this.showTick = true;
availableHeight -= this.axisConfig.tickLength; availableHeight -= this.axisConfig.tickLength;
} }
if (this.axisConfig.showTitle) { if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension( const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title], [this.title],
this.axisConfig.labelFontSize this.axisConfig.labelFontSize
@@ -126,7 +126,7 @@ export abstract class BaseAxis implements Axis {
this.showTick = true; this.showTick = true;
availableWidth -= this.axisConfig.tickLength; availableWidth -= this.axisConfig.tickLength;
} }
if (this.axisConfig.showTitle) { if (this.axisConfig.showTitle && this.title) {
const spaceRequired = this.textDimensionCalculator.getMaxDimension( const spaceRequired = this.textDimensionCalculator.getMaxDimension(
[this.title], [this.title],
this.axisConfig.labelFontSize this.axisConfig.labelFontSize

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

@@ -55,8 +55,8 @@
<string>[^"]* return "STR"; <string>[^"]* return "STR";
"[" return 'SQUARE_BRACES_START' "[" return 'SQUARE_BRACES_START'
"]" return 'SQUARE_BRACES_END' "]" return 'SQUARE_BRACES_END'
[A-Za-z]+ return 'ALPHA'; [A-Za-z]+ return 'ALPHA';
":" return 'COLON'; ":" return 'COLON';
\+ return 'PLUS'; \+ return 'PLUS';
@@ -117,8 +117,13 @@ commaSeparatedNumbers
parseXAxis parseXAxis
: text {yy.setXAxisTitle($text);} : text {yy.setXAxisTitle($text);}
| text bandData {yy.setXAxisTitle($text); yy.setXAxisBand($bandData);} | text xAxisData {yy.setXAxisTitle($text);}
| text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisTitle($text); yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} | xAxisData {yy.setXAxisTitle({type: 'text', text: ''});}
;
xAxisData
: bandData {yy.setXAxisBand($bandData);}
| NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setXAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));}
; ;
bandData bandData
@@ -131,8 +136,13 @@ commaSeparatedTexts
; ;
parseYAxis parseYAxis
: text {yy.setYAxisTitle($text);} : text {yy.setYAxisTitle($text);}
| text NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisTitle($text); yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));} | text yAxisData {yy.setYAxisTitle($text);}
| yAxisData {yy.setYAxisTitle({type: "text", text: ""});}
;
yAxisData
: NUMBER_WITH_DECIMAL ARROW_DELIMITER NUMBER_WITH_DECIMAL {yy.setYAxisRangeData(Number($NUMBER_WITH_DECIMAL1), Number($NUMBER_WITH_DECIMAL2));}
; ;
eol eol

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

@@ -128,6 +128,16 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setXAxisRangeData).toHaveBeenCalledWith(45.5, 0.34); 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', () => { it('parse x-axis with axis name and category data', () => {
const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n '; const str = 'xychart-beta \nx-axis xAxisName [ "cat1" , cat2a ] \n ';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();
@@ -144,6 +154,22 @@ describe('Testing xychart jison file', () => {
]); ]);
}); });
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', () => { it('parse x-axis throw error if unbalanced bracket', () => {
let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n '; let str = 'xychart-beta \nx-axis xAxisName [ "cat1" [ cat2a ] \n ';
expect(parserFnConstructor(str)).toThrow(); expect(parserFnConstructor(str)).toThrow();
@@ -218,6 +244,12 @@ describe('Testing xychart jison file', () => {
expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' }); expect(mockDB.setYAxisTitle).toHaveBeenCalledWith({ text: 'yAxisName', type: 'text' });
expect(mockDB.setYAxisRangeData).toHaveBeenCalledWith(45.5, 33); 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', () => { 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'; const str = 'xychart-beta \ny-axis yAxisName 45.5 --> .33 \n';
expect(parserFnConstructor(str)).not.toThrow(); expect(parserFnConstructor(str)).not.toThrow();