Added review changes

cypress/integration/rendering/xyChart.spec.js

@@ -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
@@ -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]
@@ -191,7 +191,7 @@ config:
           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]
@@ -213,7 +213,7 @@ config:
             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]
@@ -235,7 +235,7 @@ config:
             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]
@@ -257,7 +257,7 @@ config:
             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]
@@ -279,7 +279,7 @@ config:
             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]
@@ -309,7 +309,7 @@ config:
             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]

docs/syntax/xyChart.md

@@ -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**

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

@@ -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 [];
   }

packages/mermaid/src/diagrams/xychart/xychartDb.ts

@@ -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;

packages/mermaid/src/docs/syntax/xyChart.md

@@ -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"
     ...
 ```