From 7c7d5881b793902af8ff8f2e904158f2704bbba1 Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Thu, 7 Sep 2023 12:45:22 +0530 Subject: [PATCH] Fixed all review comment --- cypress/integration/rendering/xyChart.spec.js | 122 ++++++++++++++++-- demos/xychart.html | 105 +++++++++++---- .../xychart/chartBuilder/Orchestrator.ts | 30 ++--- .../chartBuilder/TextDimensionCalculator.ts | 2 +- .../chartBuilder/components/ChartTitle.ts | 6 +- .../chartBuilder/components/axis/BandAxis.ts | 6 +- .../chartBuilder/components/axis/BaseAxis.ts | 13 +- .../components/axis/LinearAxis.ts | 8 +- .../chartBuilder/components/axis/index.ts | 12 +- .../chartBuilder/components/plot/BarPlot.ts | 33 +++-- .../chartBuilder/components/plot/LinePlot.ts | 2 +- .../chartBuilder/components/plot/index.ts | 8 +- .../diagrams/xychart/chartBuilder/index.ts | 8 +- .../src/diagrams/xychart/parser/xychart.jison | 3 + .../xychart/parser/xychart.jison.spec.ts | 2 +- .../mermaid/src/diagrams/xychart/xychartDb.ts | 56 +++----- .../src/diagrams/xychart/xychartDiagram.ts | 2 +- .../src/diagrams/xychart/xychartRenderer.ts | 14 +- 18 files changed, 271 insertions(+), 161 deletions(-) diff --git a/cypress/integration/rendering/xyChart.spec.js b/cypress/integration/rendering/xyChart.spec.js index d9b7f159c..4199b02d8 100644 --- a/cypress/integration/rendering/xyChart.spec.js +++ b/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] diff --git a/demos/xychart.html b/demos/xychart.html index 927047129..8c74d0847 100644 --- a/demos/xychart.html +++ b/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] -
- +

XY Charts horizontal

     xychart-beta horizontal
     title "Basic xychart"
@@ -34,19 +33,8 @@
     bar "sample bat" [52, 96, 35, 10]
     line [23, 46, 75, 43]
- -

XY Charts demos

- 
-    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]
-
-
-

XY Charts demos

+

XY Charts only lines and bar

     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]
-

XY Charts demos

+

XY Charts with +ve and -ve numbers

     xychart-beta
     line [+1.3, .6, 2.4, -.34]
-

XY Charts demos

+

XY Charts Bar with multiple category

-    %%{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]
-

XY Charts demos

+

XY Charts line with multiple category

     xychart-beta
     title "Line chart with many category"
@@ -83,7 +70,7 @@
     line "sample line" [52, 96, 35, 10, 87, 34, 67, 99]
-

XY Charts demos

+

XY Charts category with large text

     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]
-

sparkline demos

+

sparkline demo

-      %%{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]
-

sparkBar demos

+

sparkBar demo

-    %%{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]
-

XY Charts demos

+

XY Charts demos with all configs

-    %%{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]
+
+
+

XY Charts demos with all theme config

+ 
+---
+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]
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
index 256a103eb..75c0319bf 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -1,13 +1,17 @@
-import { log } from '../../../logger.js';
-import type { DrawableElem, XYChartData, XYChartThemeConfig, XYChartConfig } from './Interfaces.js';
-import { isBarPlot } from './Interfaces.js';
-import { getChartTitleComponent } from './components/ChartTitle.js';
-import type { ChartComponent } from './Interfaces.js';
+import type { SVGGType } from '../xychartDb.js';
+import type {
+  ChartComponent,
+  DrawableElem,
+  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 });
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts
index 2fd2d770e..e9e98c9e3 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/TextDimensionCalculator.ts
+++ b/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';
 
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
index 18dd38b71..19dacc3ae 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
+++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -8,9 +8,9 @@ import type {
   XYChartData,
   XYChartThemeConfig,
   XYChartConfig,
-} from '../Interfaces.js';
-import type { TextDimensionCalculator } from '../TextDimensionCalculator.js';
-import { TextDimensionCalculatorWithFont } from '../TextDimensionCalculator.js';
+} from '../interfaces.js';
+import type { TextDimensionCalculator } from '../textDimensionCalculator.js';
+import { TextDimensionCalculatorWithFont } from '../textDimensionCalculator.js';
 
 export class ChartTitle implements ChartComponent {
   private boundingRect: BoundingRect;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts
index 8c785cf72..864ef1316 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts
+++ b/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 { BaseAxis } from './BaseAxis.js';
-import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
+import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
+import { BaseAxis } from './baseAxis.js';
+import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
 
 export class BandAxis extends BaseAxis {
   private scale: ScaleBand;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
index 1f1699028..18e48f54c 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts
+++ b/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';
-import type { TextDimensionCalculator } from '../../TextDimensionCalculator.js';
-import type { AxisPosition, Axis } from './index.js';
+  XYChartAxisThemeConfig,
+} from '../../interfaces.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;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts
index 6f0e2bdbb..8107732d9 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts
+++ b/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 { BaseAxis } from './BaseAxis.js';
-import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
+import type { TextDimensionCalculator } from '../../textDimensionCalculator.js';
+import { BaseAxis } from './baseAxis.js';
+import type { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../interfaces.js';
 
 export class LinearAxis extends BaseAxis {
   private scale: ScaleLinear;
@@ -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 {
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
index a563ad686..e4b42029d 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts
+++ b/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';
-import { isBandAxisData } from '../../Interfaces.js';
-import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js';
-import { BandAxis } from './BandAxis.js';
-import { LinearAxis } from './LinearAxis.js';
+  XYChartAxisThemeConfig,
+} from '../../interfaces.js';
+import { isBandAxisData } from '../../interfaces.js';
+import { TextDimensionCalculatorWithFont } from '../../textDimensionCalculator.js';
+import { BandAxis } from './bandAxis.js';
+import { LinearAxis } from './linearAxis.js';
 
 export type AxisPosition = 'left' | 'right' | 'top' | 'bottom';
 
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
index e6b2e66e9..cf7d4e516 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts
+++ b/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,
+        })),
+      },
+    ];
   }
 }
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
index e4ab886ea..d8d0666de 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/LinePlot.ts
+++ b/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 {
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
index 370792379..94ab0127a 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts
+++ b/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 { LinePlot } from './LinePlot.js';
-import { BarPlot } from './BarPlot.js';
+import type { ChartComponent } from '../../interfaces.js';
+import { LinePlot } from './linePlot.js';
+import { BarPlot } from './barPlot.js';
 
 export interface Plot extends ChartComponent {
   setAxes(xAxis: Axis, yAxis: Axis): void;
diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
index 356f0b452..2dba84c2c 100644
--- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
+++ b/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 { Orchestrator } from './Orchestrator.js';
+import type { DrawableElem, XYChartConfig, XYChartData, XYChartThemeConfig } from './interfaces.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();
   }
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
index 8666dda3b..987132d17 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison
+++ b/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
diff --git a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts b/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
index 6ccc06c58..23fdb8ae8 100644
--- a/packages/mermaid/src/diagrams/xychart/parser/xychart.jison.spec.ts
+++ b/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';
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts
index b585b3ba0..72550ed55 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts
+++ b/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';
-import { isBandAxisData, isLinearAxisData } from './chartBuilder/Interfaces.js';
-import { getThemeVariables } from '../../themes/theme-default.js';
+} from './chartBuilder/interfaces.js';
+import { isBandAxisData, isLinearAxisData } from './chartBuilder/interfaces.js';
 
 export type SVGGType = Selection;
 
@@ -46,25 +45,14 @@ interface NormalTextType {
 function getChartDefaultThemeConfig(): XYChartThemeConfig {
   const defaultThemeVariables = getThemeVariables();
   const config = configApi.getConfig();
-  return {
-    ...defaultThemeVariables.xyChart,
-    ...config.themeVariables?.xyChart,
-  };
+  return cleanAndMerge(defaultThemeVariables.xyChart, config.themeVariables.xyChart);
 }
 function getChartDefaultConfig(): XYChartConfig {
   const config = configApi.getConfig();
-  return {
-    ...(defaultConfig.xyChart as XYChartConfig),
-    ...config.xyChart,
-    yAxis: {
-      ...(defaultConfig.xyChart as XYChartConfig).yAxis,
-      ...config.xyChart?.yAxis,
-    },
-    xAxis: {
-      ...(defaultConfig.xyChart as XYChartConfig).xAxis,
-      ...config.xyChart?.xAxis,
-    },
-  };
+  return cleanAndMerge(
+    defaultConfig.xyChart as XYChartConfig,
+    config.xyChart as XYChartConfig
+  );
 }
 
 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,
diff --git a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts b/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts
index c4e913adc..2f09c10a2 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartDiagram.ts
+++ b/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';
diff --git a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts b/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
index 8f8451d3f..90760008b 100644
--- a/packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
+++ b/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);