Fixed all review comment

cypress/integration/rendering/xyChart.spec.js

@@ -103,7 +103,14 @@ describe('XY Chart', () => {
   it('Render spark line with "plotReservedSpacePercent"', () => {
     imgSnapshotTest(
       `
-    %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
+---
+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]
       `,
@@ -114,7 +121,23 @@ describe('XY Chart', () => {
   it('Render spark bar without displaying other property', () => {
     imgSnapshotTest(
       `
-    %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20,  "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false},  "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    xAxis:
+      showLabel: false
+      showTitle: false
+      showTick: false
+      showAxisLine: false
+    yAxis:
+      showLabel: false
+      showTitle: false
+      showTick: false
+      showAxisLine: false
+---
     xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
       `,
@@ -137,10 +160,36 @@ describe('XY Chart', () => {
     );
     cy.get('svg');
   });
-  it('Render with showTitle false', () => {
+  it('Should use all the config from yaml', () => {
     imgSnapshotTest(
       `
-    %%{init: {"xyChart": {"showTitle": false}}}%%
+---
+config:
+  theme: forest
+  xyChart:
+    width: 1000
+    height: 600
+    titlePadding: 5
+    titleFontSize: 10
+    xAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    yAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    chartOrientation: horizontal
+    plotReservedSpacePercent: 60
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -155,7 +204,17 @@ describe('XY Chart', () => {
   it('Render with show axis title false', () => {
     imgSnapshotTest(
       `
-    %%{init: {"xyChart": {"yAxis": {"showTitle": false}, "xAxis": {"showTitle": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    xAxis:
+      showTitle: false
+    yAxis:
+      showTitle: false
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -170,7 +229,17 @@ describe('XY Chart', () => {
   it('Render with show axis label false', () => {
     imgSnapshotTest(
       `
-    %%{init: {"xyChart": {"yAxis": {"showLabel": false}, "xAxis": {"showLabel": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    xAxis:
+      showLabel: false
+    yAxis:
+      showLabel: false
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -185,7 +254,17 @@ describe('XY Chart', () => {
   it('Render with show axis tick false', () => {
     imgSnapshotTest(
       `
-    %%{init: {"xyChart": {"xAxis": {"showTick": false}, "yAxis": {"showTick": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    xAxis:
+      showTick: false
+    yAxis:
+      showTick: false
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -200,7 +279,17 @@ describe('XY Chart', () => {
   it('Render with show axis line false', () => {
     imgSnapshotTest(
       `
-    %%{init: {"xyChart": {"xAxis": {"showAxisLine": false}, "yAxis": {"showAxisLine": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    xAxis:
+      showAxisLine: false
+    yAxis:
+      showAxisLine: false
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -215,7 +304,22 @@ describe('XY Chart', () => {
   it('Render all the theme color', () => {
     imgSnapshotTest(
       `
-    %%{init: {"themeVariables": {"xyChart": {"titleColor": "#ff0000", "backgroundColor": "#f0f8ff", "yAxisLabelColor": "#ee82ee", "yAxisTitleColor": "#7fffd4", "yAxisTickColor": "#87ceeb", "yAxisLineColor": "#ff6347", "xAxisLabelColor": "#7fffd4", "xAxisTitleColor": "#ee82ee", "xAxisTickColor": "#ff6347", "xAxisLineColor": "#87ceeb", "plotColorPalette": "#008000, #faba63"}}}}%%
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: #ff0000
+      backgroundColor: #f0f8ff
+      yAxisLabelColor: #ee82ee
+      yAxisTitleColor: #7fffd4
+      yAxisTickColor: #87ceeb
+      yAxisLineColor: #ff6347
+      xAxisLabelColor: #7fffd4
+      xAxisTitleColor: #ee82ee
+      xAxisTickColor: #ff6347
+      xAxisLineColor: #87ceeb
+      plotColorPalette: #008000, #faba63
+--
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

demos/xychart.html

@@ -23,9 +23,8 @@
     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 />
-
+    <h1>XY Charts horizontal</h1>
     <pre class="mermaid">
     xychart-beta horizontal
     title "Basic xychart"
@@ -34,19 +33,8 @@
     bar "sample bat" [52, 96, 35, 10]
     line [23, 46, 75, 43]
     </pre>
-
-    <h1>XY Charts demos</h1>
-    <pre class="mermaid">
-    xychart-beta
-    title "Basic xychart"
-    x-axis "this is x axis" [category1, "category 2", category3, category4]
-    y-axis yaxisText 10 --> 150
-    bar "sample bat" [52, 96, 35, 10]
-    line [23, 46, 75, 43]
-    </pre>
-
     <hr />
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts only lines and bar</h1>
     <pre class="mermaid">
     xychart-beta
     line [23, 46, 77, 34]
@@ -54,19 +42,18 @@
     line [87, 54, 99, 85]
     line [78, 88, 22, 4]
     line [22, 29, 75, 33]
-    bar "sample bat" [52, 96, 35, 10]
+    bar [52, 96, 35, 10]
     </pre>
 
     <hr />
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts with +ve and -ve numbers</h1>
     <pre class="mermaid">
     xychart-beta
     line [+1.3, .6, 2.4, -.34]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts Bar with multiple category</h1>
     <pre class="mermaid">
-    %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
     xychart-beta
     title "Basic xychart with many categories"
     x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
@@ -74,7 +61,7 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts line with multiple category</h1>
     <pre class="mermaid">
     xychart-beta
     title "Line chart with many category"
@@ -83,7 +70,7 @@
     line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts category with large text</h1>
     <pre class="mermaid">
     xychart-beta
     title "Basic xychart with many categories with category overlap"
@@ -92,23 +79,89 @@
     bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
     </pre>
 
-    <h1>sparkline demos</h1>
+    <h1>sparkline demo</h1>
     <pre class="mermaid">
-      %%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
+---
+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]
     </pre>
 
-    <h1>sparkBar demos</h1>
+    <h1>sparkBar demo</h1>
     <pre class="mermaid">
-    %%{init: {"theme":"dark", "xyChart": {"width": 200, "height": 20,  "xAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false},  "yAxis": {"showLabel": false, "showTitle": false, "showTick":false, "showAxisLine": false}}}}%%
+---
+config:
+  theme: dark
+  xyChart:
+    width: 200
+    height: 20
+    plotReservedSpacePercent: 100
+---
     xychart-beta
       bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
     </pre>
 
-    <h1>XY Charts demos</h1>
+    <h1>XY Charts demos with all configs</h1>
     <pre class="mermaid">
-    %%{init: {"theme": "dark", "xyChart": {"width": 1000, "height": 600, "titlePadding": 5, "titleFontSize": 10, "xAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5},  "yAxis": {"labelFontSize": "20", "labelPadding": 10, "titleFontSize": 30, "titlePadding": 20, "tickLength": 10, "tickWidth": 5, "axisLineWidth": 5}, "chartOrientation": "horizontal", "plotReservedSpacePercent": 60  }}}%%
+---
+config:
+  theme: forest
+  xyChart:
+    width: 1000
+    height: 600
+    titlePadding: 5
+    titleFontSize: 10
+    xAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    yAxis:
+      labelFontSize: 20
+      labelPadding: 10
+      titleFontSize: 30
+      titlePadding: 20
+      tickLength: 10
+      tickWidth: 5
+      axisLineWidth: 5
+    chartOrientation: horizontal
+    plotReservedSpacePercent: 60
+---
+    xychart-beta
+      title "Sales Revene"
+      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]
+      line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
+
+    </pre>
+    <h1>XY Charts demos with all theme config</h1>
+    <pre class="mermaid">
+---
+config:
+  themeVariables:
+    xyChart:
+      titleColor: #ff0000
+      backgroundColor: #f0f8ff
+      yAxisLabelColor: #ee82ee
+      yAxisTitleColor: #7fffd4
+      yAxisTickColor: #87ceeb
+      yAxisLineColor: #ff6347
+      xAxisLabelColor: #7fffd4
+      xAxisTitleColor: #ee82ee
+      xAxisTickColor: #ff6347
+      xAxisLineColor: #87ceeb
+      plotColorPalette: #008000, #faba63
+---
     xychart-beta
       title "Sales Revene"
       x-axis Months [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts

@@ -1,13 +1,17 @@
-import { log } from '../../../logger.js';
+import type { SVGGType } from '../xychartDb.js';
-import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js';
+import type {
-import { isBarPlot } from './Interfaces.js';
+  ChartComponent,
-import { getChartTitleComponent } from './components/ChartTitle.js';
+  DrawableElem,
-import type { ChartComponent } from './Interfaces.js';
+  XYChartConfig,
+  XYChartData,
+  XYChartThemeConfig,
+} from './interfaces.js';
+import { isBarPlot } from './interfaces.js';
 import type { Axis } from './components/axis/index.js';
 import { getAxis } from './components/axis/index.js';
+import { getChartTitleComponent } from './components/chartTitle.js';
 import type { Plot } from './components/plot/index.js';
 import { getPlotComponent } from './components/plot/index.js';
-import type { SVGGType } from '../xychartDb.js';
 
 export class Orchestrator {
   private componentStore: {
@@ -70,7 +74,6 @@ export class Orchestrator {
       width: this.chartConfig.width,
       height: availableHeight,
     });
-    log.trace('space used by title: ', spaceUsed);
     plotY = spaceUsed.height;
     availableHeight -= spaceUsed.height;
     this.componentStore.xAxis.setAxisPosition('bottom');
@@ -78,14 +81,12 @@ export class Orchestrator {
       width: availableWidth,
       height: availableHeight,
     });
-    log.trace('space used by xaxis: ', spaceUsed);
     availableHeight -= spaceUsed.height;
     this.componentStore.yAxis.setAxisPosition('left');
     spaceUsed = this.componentStore.yAxis.calculateSpace({
       width: availableWidth,
       height: availableHeight,
     });
-    log.trace('space used by yaxis: ', spaceUsed);
     plotX = spaceUsed.width;
     availableWidth -= spaceUsed.width;
     if (availableWidth > 0) {
@@ -101,10 +102,6 @@ export class Orchestrator {
       height: chartHeight,
     });
 
-    log.trace(
-      `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}`
-    );
-
     this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY });
     this.componentStore.xAxis.setRange([plotX, plotX + chartWidth]);
     this.componentStore.xAxis.setBoundingBoxXY({ x: plotX, y: plotY + chartHeight });
@@ -136,7 +133,6 @@ export class Orchestrator {
       width: this.chartConfig.width,
       height: availableHeight,
     });
-    log.trace('space used by title: ', spaceUsed);
     titleYEnd = spaceUsed.height;
     availableHeight -= spaceUsed.height;
     this.componentStore.xAxis.setAxisPosition('left');
@@ -146,13 +142,11 @@ export class Orchestrator {
     });
     availableWidth -= spaceUsed.width;
     plotX = spaceUsed.width;
-    log.trace('space used by xaxis: ', spaceUsed);
     this.componentStore.yAxis.setAxisPosition('top');
     spaceUsed = this.componentStore.yAxis.calculateSpace({
       width: availableWidth,
       height: availableHeight,
     });
-    log.trace('space used by yaxis: ', spaceUsed);
     availableHeight -= spaceUsed.height;
     plotY = titleYEnd + spaceUsed.height;
     if (availableWidth > 0) {
@@ -168,10 +162,6 @@ export class Orchestrator {
       height: chartHeight,
     });
 
-    log.trace(
-      `Final chart dimansion: x = ${plotX}, y = ${plotY}, width = ${chartWidth}, height = ${chartHeight}`
-    );
-
     this.componentStore.plot.setBoundingBoxXY({ x: plotX, y: plotY });
     this.componentStore.yAxis.setRange([plotX, plotX + chartWidth]);
     this.componentStore.yAxis.setBoundingBoxXY({ x: plotX, y: titleYEnd });

packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts

@@ -1,4 +1,4 @@
-import type { Dimension } from './Interfaces.js';
+import type { Dimension } from './interfaces.js';
 import { computeDimensionOfText } from '../../../rendering-util/createText.js';
 import type { SVGGType } from '../xychartDb.js';
 

packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts

@@ -8,9 +8,9 @@ import type {
   XYChartData,
   XYChartThemeConfig,
   XYChartConfig,
-} from '../Interfaces.js';
+} from '../interfaces.js';
-import type { TextDimensionCalculator } from '../TextDimensionCalculator.js';
+import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
-import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js';
+import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
 
 export class ChartTitle implements ChartComponent {
   private boundingRect: BoundingRect;

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

@@ -1,9 +1,9 @@
 import type { ScaleBand } from 'd3';
 import { scaleBand } from 'd3';
 import { log } from '../../../../../logger.js';
-import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
+import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
-import { BaseAxis } from './BaseAxis.js';
+import { BaseAxis } from './baseAxis.js';
-import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
+import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
 
 export class BandAxis extends BaseAxis {
   private scale: ScaleBand<string>;

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

@@ -1,14 +1,13 @@
-import { log } from '../../../../../logger.js';
 import type {
   BoundingRect,
   Dimension,
   DrawableElem,
   Point,
-  XYChartAxisThemeConfig,
   XYChartAxisConfig,
-} from '../../Interfaces.js';
+  XYChartAxisThemeConfig,
-import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
+} from '../../interfaces.js';
-import type { AxisPosition, Axis } from './index.js';
+import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
+import type { Axis, AxisPosition } from './index.js';
 
 const BAR_WIDTH_TO_TICK_WIDTH_RATIO = 0.7;
 const MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL = 0.2;
@@ -96,7 +95,6 @@ export abstract class BaseAxis implements Axis {
 
       const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
       this.labelTextHeight = spaceRequired.height;
-      log.trace('height required for axis label: ', heightRequired);
       if (heightRequired <= availableHeight) {
         availableHeight -= heightRequired;
         this.showLabel = true;
@@ -113,7 +111,6 @@ export abstract class BaseAxis implements Axis {
       );
       const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
       this.titleTextHeight = spaceRequired.height;
-      log.trace('height required for axis title: ', heightRequired);
       if (heightRequired <= availableHeight) {
         availableHeight -= heightRequired;
         this.showTitle = true;
@@ -134,7 +131,6 @@ export abstract class BaseAxis implements Axis {
       const maxPadding = MAX_OUTER_PADDING_PERCENT_FOR_WRT_LABEL * availableSpace.height;
       this.outerPadding = Math.min(spaceRequired.height / 2, maxPadding);
       const widthRequired = spaceRequired.width + this.axisConfig.labelPadding * 2;
-      log.trace('width required for axis label: ', widthRequired);
       if (widthRequired <= availableWidth) {
         availableWidth -= widthRequired;
         this.showLabel = true;
@@ -151,7 +147,6 @@ export abstract class BaseAxis implements Axis {
       );
       const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
       this.titleTextHeight = spaceRequired.height;
-      log.trace('width required for axis title: ', widthRequired);
       if (widthRequired <= availableWidth) {
         availableWidth -= widthRequired;
         this.showTitle = true;

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

@@ -1,9 +1,8 @@
 import type { ScaleLinear } from 'd3';
 import { scaleLinear } from 'd3';
-import { log } from '../../../../../logger.js';
+import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
-import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
+import { BaseAxis } from './baseAxis.js';
-import { BaseAxis } from './BaseAxis.js';
+import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
-import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
 
 export class LinearAxis extends BaseAxis {
   private scale: ScaleLinear<number, number>;
@@ -31,7 +30,6 @@ export class LinearAxis extends BaseAxis {
       domain.reverse(); // since y-axis in svg start from top
     }
     this.scale = scaleLinear().domain(domain).range(this.getRange());
-    log.trace('Linear axis final domain, range: ', this.domain, this.getRange());
   }
 
   getScaleValue(value: number): number {

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

@@ -2,13 +2,13 @@ import type { SVGGType } from '../../../xychartDb.js';
 import type {
   AxisDataType,
   ChartComponent,
-  XYChartAxisThemeConfig,
   XYChartAxisConfig,
-} from '../../Interfaces.js';
+  XYChartAxisThemeConfig,
-import { isBandAxisData } from '../../Interfaces.js';
+} from '../../interfaces.js';
-import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js';
+import { isBandAxisData } from '../../interfaces.js';
-import { BandAxis } from './BandAxis.js';
+import { TextDimensionCalculatorWithFont } from '../../textDimensionCalculator.js';
-import { LinearAxis } from './LinearAxis.js';
+import { BandAxis } from './bandAxis.js';
+import { LinearAxis } from './linearAxis.js';
 
 export type AxisPosition = 'left' | 'right' | 'top' | 'bottom';
 

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts

@@ -1,4 +1,4 @@
-import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../Interfaces.js';
+import type { BarPlotData, BoundingRect, DrawableElem, XYChartConfig } from '../../interfaces.js';
 import type { Axis } from '../axis/index.js';
 
 export class BarPlot {
@@ -40,22 +40,21 @@ export class BarPlot {
           })),
         },
       ];
-    } else {
-      return [
-        {
-          groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
-          type: 'rect',
-          data: finalData.map((data) => ({
-            x: data[0] - barWidthHalf,
-            y: data[1],
-            width: barWidth,
-            height: this.boundingRect.y + this.boundingRect.height - data[1],
-            fill: this.barData.fill,
-            strokeWidth: 0,
-            strokeFill: this.barData.fill,
-          })),
-        },
-      ];
     }
+    return [
+      {
+        groupTexts: ['plot', `bar-plot-${this.plotIndex}`],
+        type: 'rect',
+        data: finalData.map((data) => ({
+          x: data[0] - barWidthHalf,
+          y: data[1],
+          width: barWidth,
+          height: this.boundingRect.y + this.boundingRect.height - data[1],
+          fill: this.barData.fill,
+          strokeWidth: 0,
+          strokeFill: this.barData.fill,
+        })),
+      },
+    ];
   }
 }

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts

@@ -1,5 +1,5 @@
 import { line } from 'd3';
-import type { DrawableElem, LinePlotData, XYChartConfig } from '../../Interfaces.js';
+import type { DrawableElem, LinePlotData, XYChartConfig } from '../../interfaces.js';
 import type { Axis } from '../axis/index.js';
 
 export class LinePlot {

packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts

@@ -6,11 +6,11 @@ import type {
   Point,
   XYChartThemeConfig,
   XYChartConfig,
-} from '../../Interfaces.js';
+} from '../../interfaces.js';
 import type { Axis } from '../axis/index.js';
-import type { ChartComponent } from '../../Interfaces.js';
+import type { ChartComponent } from '../../interfaces.js';
-import { LinePlot } from './LinePlot.js';
+import { LinePlot } from './linePlot.js';
-import { BarPlot } from './BarPlot.js';
+import { BarPlot } from './barPlot.js';
 
 export interface Plot extends ChartComponent {
   setAxes(xAxis: Axis, yAxis: Axis): void;

packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts

@@ -1,7 +1,6 @@
-import { log } from '../../../logger.js';
 import type { SVGGType } from '../xychartDb.js';
-import type { DrawableElem, XYChartData, XYChartConfig, XYChartThemeConfig } from './Interfaces.js';
+import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.js';
-import { Orchestrator } from './Orchestrator.js';
+import { Orchestrator } from './orchestrator.js';
 
 export class XYChartBuilder {
   static build(
@@ -10,9 +9,6 @@ export class XYChartBuilder {
     chartThemeConfig: XYChartThemeConfig,
     tmpSVGGElem: SVGGType
   ): DrawableElem[] {
-    log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`);
-    log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`);
-    log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`);
     const orchestrator = new Orchestrator(config, chartData, chartThemeConfig, tmpSVGGElem);
     return orchestrator.getDrawableElement();
   }

packages/mermaid/src/diagrams/xychart/parser/xychart.jison

@@ -104,6 +104,9 @@ statement
   | LINE text plotData                                          { yy.setLineData($text, $plotData); }
   | BAR plotData                                                { yy.setBarData({text: '', type: 'text'}, $plotData); }
   | BAR text plotData                                           { yy.setBarData($text, $plotData); }
+  | acc_title acc_title_value                                   { $$=$acc_title_value.trim();yy.setAccTitle($$); }
+  | acc_descr acc_descr_value                                   { $$=$acc_descr_value.trim();yy.setAccDescription($$); }
+  | acc_descr_multiline_value                                   { $$=$acc_descr_multiline_value.trim();yy.setAccDescription($$); }
   ;
 
 plotData

packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts

@@ -1,4 +1,4 @@
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: Jison doesn't  support type.
 import { parser } from './xychart.jison';
 import type { Mock } from 'vitest';
 import { vi } from 'vitest';

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

@@ -1,29 +1,28 @@
 // @ts-ignore: TODO Fix ts errors
-import { adjust, channel } from 'khroma';
 import type { Selection } from 'd3-selection';
-import mermaidAPI from '../../mermaidAPI.js';
+import {
+  clear as commonClear,
+  getAccDescription,
+  getAccTitle,
+  getDiagramTitle,
+  setAccDescription,
+  setAccTitle,
+  setDiagramTitle,
+} from '../../commonDb.js';
 import * as configApi from '../../config.js';
 import defaultConfig from '../../defaultConfig.js';
+import { getThemeVariables } from '../../themes/theme-default.js';
+import { cleanAndMerge } from '../../utils.js';
 import { sanitizeText } from '../common/common.js';
-import {
-  setAccTitle,
-  getAccTitle,
-  setDiagramTitle,
-  getDiagramTitle,
-  getAccDescription,
-  setAccDescription,
-  clear as commonClear,
-} from '../../commonDb.js';
 import { XYChartBuilder } from './chartBuilder/index.js';
 import type {
   DrawableElem,
   SimplePlotDataType,
+  XYChartConfig,
   XYChartData,
   XYChartThemeConfig,
-  XYChartConfig,
+} from './chartBuilder/interfaces.js';
-} from './chartBuilder/Interfaces.js';
+import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
-import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js';
-import { getThemeVariables } from '../../themes/theme-default.js';
 
 export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
 
@@ -46,25 +45,14 @@ interface NormalTextType {
 function getChartDefaultThemeConfig(): XYChartThemeConfig {
   const defaultThemeVariables = getThemeVariables();
   const config = configApi.getConfig();
-  return {
+  return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart);
-    ...defaultThemeVariables.xyChart,
-    ...config.themeVariables?.xyChart,
-  };
 }
 function getChartDefaultConfig(): XYChartConfig {
   const config = configApi.getConfig();
-  return {
+  return cleanAndMerge<XYChartConfig>(
-    ...(defaultConfig.xyChart as XYChartConfig),
+    defaultConfig.xyChart as XYChartConfig,
-    ...config.xyChart,
+    config.xyChart as XYChartConfig
-    yAxis: {
+  );
-      ...(defaultConfig.xyChart as XYChartConfig).yAxis,
-      ...config.xyChart?.yAxis,
-    },
-    xAxis: {
-      ...(defaultConfig.xyChart as XYChartConfig).xAxis,
-      ...config.xyChart?.xAxis,
-    },
-  };
 }
 
 function getChartDefalutData(): XYChartData {
@@ -90,11 +78,6 @@ function textSanitizer(text: string) {
   return sanitizeText(text.trim(), config);
 }
 
-function parseDirective(statement: string, context: string, type: string) {
-  // @ts-ignore: TODO Fix ts errors
-  mermaidAPI.parseDirective(this, statement, context, type);
-}
-
 function setTmpSVGG(SVGG: SVGGType) {
   tmpSVGGElem = SVGG;
 }
@@ -228,7 +211,6 @@ const clear = function () {
 
 export default {
   getDrawableElem,
-  parseDirective,
   clear,
   setAccTitle,
   getAccTitle,

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

@@ -1,5 +1,5 @@
 import type { DiagramDefinition } from '../../diagram-api/types.js';
-// @ts-ignore: TODO Fix ts errors
+// @ts-ignore: Jison doesn't support types.
 import parser from './parser/xychart.jison';
 import db from './xychartDb.js';
 import renderer from './xychartRenderer.js';

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

@@ -1,14 +1,14 @@
 import type { Diagram } from '../../Diagram.js';
 import { log } from '../../logger.js';
+import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 import { configureSvgSize } from '../../setupGraphViewbox.js';
 import type {
   DrawableElem,
   TextElem,
   TextHorizontalPos,
   TextVerticalPos,
-} from './chartBuilder/Interfaces.js';
+} from './chartBuilder/interfaces.js';
 import type XYChartDB from './xychartDb.js';
-import { selectSvgElement } from '../../rendering-util/selectSvgElement.js';
 
 export const draw = (txt: string, id: string, _version: string, diagObj: Diagram) => {
   const db = diagObj.db as typeof XYChartDB;
@@ -68,18 +68,8 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
 
   for (const shape of shapes) {
     if (shape.data.length === 0) {
-      log.trace(
-        `Skipped drawing of shape of type: ${shape.type} with data: ${JSON.stringify(
-          shape.data,
-          null,
-          2
-        )}`
-      );
       continue;
     }
-    log.trace(
-      `Drawing shape of type: ${shape.type} with data: ${JSON.stringify(shape.data, null, 2)}`
-    );
 
     const shapeGroup = getGroup(shape.groupTexts);