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

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

@@ -15,7 +15,7 @@ describe('XY Chart', () => {
imgSnapshotTest(
`
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -89,7 +89,7 @@ describe('XY Chart', () => {
);
cy.get('svg');
});
it('Decimals and -ve no are supported', () => {
it('Decimals and negative numbers are supported', () => {
imgSnapshotTest(
`
xychart-beta
@@ -103,14 +103,14 @@ describe('XY Chart', () => {
it('Render spark line with "plotReservedSpacePercent"', () => {
imgSnapshotTest(
`
---
config:
---
config:
theme: dark
xyChart:
width: 200
height: 20
plotReservedSpacePercent: 100
---
---
xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
@@ -121,8 +121,8 @@ config:
it('Render spark bar without displaying other property', () => {
imgSnapshotTest(
`
---
config:
---
config:
theme: dark
xyChart:
width: 200
@@ -137,7 +137,7 @@ config:
showTitle: false
showTick: false
showAxisLine: false
---
---
xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
`,
@@ -150,7 +150,7 @@ config:
`
%%{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 Revene"
title "Sales Revenue"
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]
@@ -163,8 +163,8 @@ config:
it('Should use all the config from yaml', () => {
imgSnapshotTest(
`
---
config:
---
config:
theme: forest
xyChart:
width: 1000
@@ -189,9 +189,9 @@ config:
axisLineWidth: 5
chartOrientation: horizontal
plotReservedSpacePercent: 60
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -204,16 +204,16 @@ config:
it('Render with show axis title false', () => {
imgSnapshotTest(
`
---
config:
---
config:
xyChart:
xAxis:
showTitle: false
yAxis:
showTitle: false
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -226,16 +226,16 @@ config:
it('Render with show axis label false', () => {
imgSnapshotTest(
`
---
config:
---
config:
xyChart:
xAxis:
showLabel: false
yAxis:
showLabel: false
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -248,16 +248,16 @@ config:
it('Render with show axis tick false', () => {
imgSnapshotTest(
`
---
config:
---
config:
xyChart:
xAxis:
showTick: false
yAxis:
showTick: false
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -270,16 +270,16 @@ config:
it('Render with show axis line false', () => {
imgSnapshotTest(
`
---
config:
---
config:
xyChart:
xAxis:
showAxisLine: false
yAxis:
showAxisLine: false
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]
@@ -292,8 +292,8 @@ config:
it('Render all the theme color', () => {
imgSnapshotTest(
`
---
config:
---
config:
themeVariables:
xyChart:
titleColor: "#ff0000"
@@ -307,9 +307,9 @@ config:
xAxisTickColor: "#ff6347"
xAxisLineColor: "#87ceeb"
plotColorPalette: "#008000, #faba63"
---
---
xychart-beta
title "Sales Revene"
title "Sales Revenue"
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]

4
docs/syntax/xyChart.md
View File

@@ -33,7 +33,7 @@ xychart-beta
## Syntax
> **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
@@ -49,7 +49,7 @@ The title is a short description of the chart and it will always render on top o
#### Example
xychart-beta
title "This is a sample example"
title "This is a simple example"
...
> **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 {
this.axisPosition = axisPosition;
this.setRange(this.range);
}
abstract getScaleValue(value: number | string): number;
@@ -174,7 +175,7 @@ export abstract class BaseAxis implements Axis {
this.boundingRect.y = point.y;
}
private getDrawaableElementsForLeftAxis(): DrawableElem[] {
private getDrawableElementsForLeftAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const x = this.boundingRect.x + this.boundingRect.width - this.axisConfig.axisLineWidth / 2;
@@ -250,7 +251,7 @@ export abstract class BaseAxis implements Axis {
}
return drawableElement;
}
private getDrawaableElementsForBottomAxis(): DrawableElem[] {
private getDrawableElementsForBottomAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.axisConfig.axisLineWidth / 2;
@@ -326,7 +327,7 @@ export abstract class BaseAxis implements Axis {
}
return drawableElement;
}
private getDrawaableElementsForTopAxis(): DrawableElem[] {
private getDrawableElementsForTopAxis(): DrawableElem[] {
const drawableElement: DrawableElem[] = [];
if (this.showAxisLine) {
const y = this.boundingRect.y + this.boundingRect.height - this.axisConfig.axisLineWidth / 2;
@@ -405,16 +406,16 @@ export abstract class BaseAxis implements Axis {
getDrawableElements(): DrawableElem[] {
if (this.axisPosition === 'left') {
return this.getDrawaableElementsForLeftAxis();
return this.getDrawableElementsForLeftAxis();
}
if (this.axisPosition === 'right') {
throw Error('Drawing of right axis is not implemented');
}
if (this.axisPosition === 'bottom') {
return this.getDrawaableElementsForBottomAxis();
return this.getDrawableElementsForBottomAxis();
}
if (this.axisPosition === 'top') {
return this.getDrawaableElementsForTopAxis();
return this.getDrawableElementsForTopAxis();
}
return [];
}

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

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

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

@@ -18,7 +18,7 @@ xychart-beta
## Syntax
```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
@@ -38,7 +38,7 @@ The title is a short description of the chart and it will always render on top o
```
xychart-beta
title "This is a sample example"
title "This is a simple example"
...
```