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

Added review changes

Browse Source
This commit is contained in:
Subhash Halder
2023-09-19 21:09:31 +05:30
parent adb3cd16df
commit e061489b84
5 changed files with 198 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,8 +4,8 @@ describe('XY Chart', () => {
it('should render the simplest possible chart', () => { it('should render the simplest possible chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
line [10, 30, 20] line [10, 30, 20]
`, `,
{} {}
); );
@@ -14,12 +14,12 @@ describe('XY Chart', () => {
it('Should render a complete chart', () => { it('Should render a complete chart', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -27,11 +27,11 @@ describe('XY Chart', () => {
it('Should render a chart without title', () => { it('Should render a chart without title', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -40,11 +40,11 @@ describe('XY Chart', () => {
it('y-axis title not required', () => { it('y-axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis 4000 --> 11000 y-axis 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -53,10 +53,10 @@ describe('XY Chart', () => {
it('Should render a chart without y-axis with different range', () => { it('Should render a chart without y-axis with different range', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] 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] 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] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`, `,
{} {}
); );
@@ -65,10 +65,10 @@ describe('XY Chart', () => {
it('x axis title not required', () => { it('x axis title not required', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] 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] 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] line [2000, 7000, 6500, 9200, 9500, 7500, 11000, 10200, 3200, 8500, 7000, 8800]
`, `,
{} {}
); );
@@ -77,24 +77,24 @@ describe('XY Chart', () => {
it('Multiple plots can be rendered', () => { it('Multiple plots can be rendered', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
line [23, 46, 77, 34] line [23, 46, 77, 34]
line [45, 32, 33, 12] line [45, 32, 33, 12]
bar [87, 54, 99, 85] bar [87, 54, 99, 85]
line [78, 88, 22, 4] line [78, 88, 22, 4]
line [22, 29, 75, 33] line [22, 29, 75, 33]
bar [52, 96, 35, 10] bar [52, 96, 35, 10]
`, `,
{} {}
); );
cy.get('svg'); cy.get('svg');
}); });
it('Decimals and -ve no are supported', () => { it('Decimals and negative numbers are supported', () => {
imgSnapshotTest( imgSnapshotTest(
` `
xychart-beta xychart-beta
y-axis -2.4 --> 3.5 y-axis -2.4 --> 3.5
line [+1.3, .6, 2.4, -.34] line [+1.3, .6, 2.4, -.34]
`, `,
{} {}
); );
@@ -103,16 +103,16 @@ describe('XY Chart', () => {
it('Render spark line with "plotReservedSpacePercent"', () => { it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: dark theme: dark
xyChart: xyChart:
width: 200 width: 200
height: 20 height: 20
plotReservedSpacePercent: 100 plotReservedSpacePercent: 100
--- ---
xychart-beta xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
); );
@@ -121,25 +121,25 @@ config:
it('Render spark bar without displaying other property', () => { it('Render spark bar without displaying other property', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: dark theme: dark
xyChart: xyChart:
width: 200 width: 200
height: 20 height: 20
xAxis: xAxis:
showLabel: false showLabel: false
showTitle: false showTitle: false
showTick: false showTick: false
showAxisLine: false showAxisLine: false
yAxis: yAxis:
showLabel: false showLabel: false
showTitle: false showTitle: false
showTick: false showTick: false
showAxisLine: false showAxisLine: false
--- ---
xychart-beta xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800] bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`, `,
{} {}
); );
@@ -148,13 +148,13 @@ config:
it('Should use all the config from directive', () => { it('Should use all the config from directive', () => {
imgSnapshotTest( 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 }}}%% %%{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 xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -163,39 +163,39 @@ config:
it('Should use all the config from yaml', () => { it('Should use all the config from yaml', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
theme: forest theme: forest
xyChart: xyChart:
width: 1000 width: 1000
height: 600 height: 600
titlePadding: 5 titlePadding: 5
titleFontSize: 10 titleFontSize: 10
xAxis: xAxis:
labelFontSize: 20 labelFontSize: 20
labelPadding: 10 labelPadding: 10
titleFontSize: 30 titleFontSize: 30
titlePadding: 20 titlePadding: 20
tickLength: 10 tickLength: 10
tickWidth: 5 tickWidth: 5
axisLineWidth: 5 axisLineWidth: 5
yAxis: yAxis:
labelFontSize: 20 labelFontSize: 20
labelPadding: 10 labelPadding: 10
titleFontSize: 30 titleFontSize: 30
titlePadding: 20 titlePadding: 20
tickLength: 10 tickLength: 10
tickWidth: 5 tickWidth: 5
axisLineWidth: 5 axisLineWidth: 5
chartOrientation: horizontal chartOrientation: horizontal
plotReservedSpacePercent: 60 plotReservedSpacePercent: 60
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -204,20 +204,20 @@ config:
it('Render with show axis title false', () => { it('Render with show axis title false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
xAxis: xAxis:
showTitle: false showTitle: false
yAxis: yAxis:
showTitle: false showTitle: false
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -226,20 +226,20 @@ config:
it('Render with show axis label false', () => { it('Render with show axis label false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
xAxis: xAxis:
showLabel: false showLabel: false
yAxis: yAxis:
showLabel: false showLabel: false
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -248,20 +248,20 @@ config:
it('Render with show axis tick false', () => { it('Render with show axis tick false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
xAxis: xAxis:
showTick: false showTick: false
yAxis: yAxis:
showTick: false showTick: false
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -270,20 +270,20 @@ config:
it('Render with show axis line false', () => { it('Render with show axis line false', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
xyChart: xyChart:
xAxis: xAxis:
showAxisLine: false showAxisLine: false
yAxis: yAxis:
showAxisLine: false showAxisLine: false
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );
@@ -292,28 +292,28 @@ config:
it('Render all the theme color', () => { it('Render all the theme color', () => {
imgSnapshotTest( imgSnapshotTest(
` `
--- ---
config: config:
themeVariables: themeVariables:
xyChart: xyChart:
titleColor: "#ff0000" titleColor: "#ff0000"
backgroundColor: "#f0f8ff" backgroundColor: "#f0f8ff"
yAxisLabelColor: "#ee82ee" yAxisLabelColor: "#ee82ee"
yAxisTitleColor: "#7fffd4" yAxisTitleColor: "#7fffd4"
yAxisTickColor: "#87ceeb" yAxisTickColor: "#87ceeb"
yAxisLineColor: "#ff6347" yAxisLineColor: "#ff6347"
xAxisLabelColor: "#7fffd4" xAxisLabelColor: "#7fffd4"
xAxisTitleColor: "#ee82ee" xAxisTitleColor: "#ee82ee"
xAxisTickColor: "#ff6347" xAxisTickColor: "#ff6347"
xAxisLineColor: "#87ceeb" xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63" plotColorPalette: "#008000, #faba63"
--- ---
xychart-beta xychart-beta
title "Sales Revene" title "Sales Revenue"
x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000 y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] 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] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
`, `,
{} {}
); );

4
docs/syntax/xyChart.md
View File

@@ -33,7 +33,7 @@ xychart-beta
## Syntax ## Syntax
> **Note** > **Note**
> all text values can be single word without ", if multiple line required we have to use ". > All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`
### Orientations ### Orientations
@@ -49,7 +49,7 @@ The title is a short description of the chart and it will always render on top o
#### Example #### Example
xychart-beta xychart-beta
title "This is a sample example" title "This is a simple example"
... ...
> **Note** > **Note**

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

@@ -51,6 +51,7 @@ export abstract class BaseAxis implements Axis {
setAxisPosition(axisPosition: AxisPosition): void { setAxisPosition(axisPosition: AxisPosition): void {
this.axisPosition = axisPosition; this.axisPosition = axisPosition;
this.setRange(this.range);
} }
abstract getScaleValue(value: number | string): number; abstract getScaleValue(value: number | string): number;
@@ -174,7 +175,7 @@ export abstract class BaseAxis implements Axis {
this.boundingRect.y = point.y; this.boundingRect.y = point.y;
} }
private getDrawaableElementsForLeftAxis(): DrawableElem[] { private getDrawableElementsForLeftAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) { if (this.showAxisLine) {
const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2; const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2;
@@ -250,7 +251,7 @@ export abstract class BaseAxis implements Axis {
} }
return drawableElement; return drawableElement;
} }
private getDrawaableElementsForBottomAxis(): DrawableElem[] { private getDrawableElementsForBottomAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) { if (this.showAxisLine) {
const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2; const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2;
@@ -326,7 +327,7 @@ export abstract class BaseAxis implements Axis {
} }
return drawableElement; return drawableElement;
} }
private getDrawaableElementsForTopAxis(): DrawableElem[] { private getDrawableElementsForTopAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = []; const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) { if (this.showAxisLine) {
const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2; const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2;
@@ -405,16 +406,16 @@ export abstract class BaseAxis implements Axis {
getDrawableElements(): DrawableElem[] { getDrawableElements(): DrawableElem[] {
if (this.axisPosition === 'left') { if (this.axisPosition === 'left') {
return this.getDrawaableElementsForLeftAxis(); return this.getDrawableElementsForLeftAxis();
} }
if (this.axisPosition === 'right') { if (this.axisPosition === 'right') {
throw Error('Drawing of right axis is not implemented'); throw Error('Drawing of right axis is not implemented');
} }
if (this.axisPosition === 'bottom') { if (this.axisPosition === 'bottom') {
return this.getDrawaableElementsForBottomAxis(); return this.getDrawableElementsForBottomAxis();
} }
if (this.axisPosition === 'top') { if (this.axisPosition === 'top') {
return this.getDrawaableElementsForTopAxis(); return this.getDrawableElementsForTopAxis();
} }
return []; return [];
} }

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

@@ -31,7 +31,7 @@ let tmpSVGGElem: SVGGType;
let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
let xyChartData: XYChartData = getChartDefalutData(); let xyChartData: XYChartData = getChartDefaultData();
let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
let hasSetXAxis = false; let hasSetXAxis = false;
let hasSetYAxis = false; let hasSetYAxis = false;
@@ -54,7 +54,7 @@ function getChartDefaultConfig(): XYChartConfig {
); );
} }
function getChartDefalutData(): XYChartData { function getChartDefaultData(): XYChartData {
return { return {
yAxis: { yAxis: {
type: 'linear', type: 'linear',
@@ -201,7 +201,7 @@ const clear = function () {
commonClear(); commonClear();
plotIndex = 0; plotIndex = 0;
xyChartConfig = getChartDefaultConfig(); xyChartConfig = getChartDefaultConfig();
xyChartData = getChartDefalutData(); xyChartData = getChartDefaultData();
xyChartThemeConfig = getChartDefaultThemeConfig(); xyChartThemeConfig = getChartDefaultThemeConfig();
plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim()); plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
hasSetXAxis = false; hasSetXAxis = false;

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

@@ -18,7 +18,7 @@ xychart-beta
## Syntax ## Syntax
```note ```note
all text values can be single word without ", if multiple line required we have to use ". All text values that contain only one word can be written without `"`. If a text value has many words in it, specifically if it contains spaces, enclose the value in `"`
``` ```
### Orientations ### Orientations
@@ -38,7 +38,7 @@ The title is a short description of the chart and it will always render on top o
``` ```
xychart-beta xychart-beta
title "This is a sample example" title "This is a simple example"
... ...
``` ```