Added themes config to all the themes

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

@@ -5,6 +5,7 @@ export interface XYChartAxisThemeConfig {
 }
 
 export interface XYChartThemeConfig {
+  backgroundColor: string;
   titleColor: string;
   axisLineColor: string;
   xAxisLableColor: string;
@@ -13,7 +14,7 @@ export interface XYChartThemeConfig {
   yAxisLableColor: string;
   yAxisTitleColor: string;
   yAxisTickColor: string;
-  plotBaseColor: string;
+  plotColorPalette: string;
 }
 
 export interface ChartComponent {

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

@@ -39,9 +39,7 @@ let tmpSVGGElem: SVGGType;
 let xyChartConfig: XYChartConfig = getChartDefaultConfig();
 let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
 let xyChartData: XYChartData = getChartDefalutData();
-let plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
+let plotColorPalette = xyChartThemeConfig.plotColorPalette;
-  ? xyChartThemeConfig.plotBaseColor
-  : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
 let hasSetXAxis = false;
 let hasSetYAxis = false;
 
@@ -50,26 +48,11 @@ interface NormalTextType {
   text: string;
 }
 
-function plotColorPaletteGenerator(baseColor: string, noOfColorNeeded = 15): string[] {
-  const colors = [];
-  const MAX_HUE_VALUE = 360;
-  const baseHue = channel(baseColor, 'h');
-  if (baseHue > MAX_HUE_VALUE / 2) {
-    const decr = Math.floor(baseHue / noOfColorNeeded);
-    for (let i = 0; i <= baseHue; i += decr) {
-      colors.push(adjust(baseColor, { h: -i }));
-    }
-  } else {
-    const incr = Math.floor((MAX_HUE_VALUE - baseHue) / noOfColorNeeded);
-    for (let i = 0; i <= baseHue; i += incr) {
-      colors.push(adjust(baseColor, { h: i }));
-    }
-  }
-  return colors;
-}
-
 function getChartDefaultThemeConfig(): XYChartThemeConfig {
   return {
+    backgroundColor:
+      config.themeVariables?.xyChart?.backgroundColor ||
+      defaultThemeVariables.xyChart.backgroundColor,
     titleColor:
       config.themeVariables?.xyChart?.titleColor || defaultThemeVariables.xyChart.titleColor,
     axisLineColor:
@@ -92,8 +75,9 @@ function getChartDefaultThemeConfig(): XYChartThemeConfig {
     yAxisTickColor:
       config.themeVariables?.xyChart?.yAxisTickColor ||
       defaultThemeVariables.xyChart.yAxisTickColor,
-    plotBaseColor:
+    plotColorPalette:
-      config.themeVariables?.xyChart?.plotBaseColor || defaultThemeVariables.xyChart.plotBaseColor,
+      config.themeVariables?.xyChart?.plotColorPalette ||
+      defaultThemeVariables.xyChart.plotColorPalette,
   };
 }
 function getChartDefaultConfig(): XYChartConfig {
@@ -250,12 +234,12 @@ function getDrawableElem(): DrawableElem[] {
   return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig, tmpSVGGElem);
 }
 
-function setHeight(height: number) {
+function getChartThemeConfig() {
-  xyChartConfig.height = height;
+  return xyChartThemeConfig;
 }
 
-function setWidth(width: number) {
+function getChartConfig() {
-  xyChartConfig.width = width;
+  return xyChartConfig;
 }
 
 const clear = function () {
@@ -264,16 +248,12 @@ const clear = function () {
   xyChartConfig = getChartDefaultConfig();
   xyChartData = getChartDefalutData();
   xyChartThemeConfig = getChartDefaultThemeConfig();
-  plotColorPalette = Array.isArray(xyChartThemeConfig.plotBaseColor)
+  plotColorPalette = xyChartThemeConfig.plotColorPalette;
-    ? xyChartThemeConfig.plotBaseColor
-    : plotColorPaletteGenerator(xyChartThemeConfig.plotBaseColor);
   hasSetXAxis = false;
   hasSetYAxis = false;
 };
 
 export default {
-  setWidth,
-  setHeight,
   getDrawableElem,
   parseDirective,
   clear,
@@ -292,4 +272,6 @@ export default {
   setLineData,
   setBarData,
   setTmpSVGG,
+  getChartThemeConfig,
+  getChartConfig,
 };

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

@@ -13,6 +13,9 @@ import 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;
+  const themeConfig = db.getChartThemeConfig();
+  const chartConfig = db.getChartConfig();
   function getDominantBaseLine(horizontalPos: TextHorizontalPos) {
     return horizontalPos === 'top' ? 'hanging' : 'middle';
   }
@@ -29,19 +32,19 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
 
   const svg = selectSvgElement(id);
   const group = svg.append('g').attr('class', 'main');
-
+  const background = group
-  const width = 700;
+    .append('rect')
-  const height = 500;
+    .attr('width', chartConfig.width)
+    .attr('height', chartConfig.height)
+    .attr('class', 'background');
 
   // @ts-ignore: TODO Fix ts errors
-  configureSvgSize(svg, height, width, true);
+  configureSvgSize(svg, chartConfig.height, chartConfig.width, true);
 
-  svg.attr('viewBox', '0 0 ' + width + ' ' + height);
+  svg.attr('viewBox', '0 0 ' + chartConfig.width + ' ' + chartConfig.height);
 
-  const db = diagObj.db as typeof XYChartDB;
+  background.attr('fill', themeConfig.backgroundColor);
 
-  db.setHeight(height);
-  db.setWidth(width);
   db.setTmpSVGG(svg.append('g').attr('class', 'mermaid-tmp-group'));
 
   const shapes: DrawableElem[] = db.getDrawableElem();

packages/mermaid/src/themes/theme-base.js

@@ -245,6 +245,31 @@ class Theme {
       this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
+    /* xychart */
+    this.xyChart = {
+      backgroundColor: this.xyChart?.backgroundColor || this.background,
+      titleColor: this.xyChart?.titleColor || this.primaryTextColor,
+      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
+      xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+      xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
+      yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
+      yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      plotColorPalette: this.xyChart?.plotColorPalette || [
+        '#FFF4DD',
+        '#FFD8B1',
+        '#FFA07A',
+        '#ECEFF1',
+        '#D6DBDF',
+        '#C3E0A8',
+        '#FFB6A4',
+        '#FFD74D',
+        '#738FA7',
+        '#FFFFF0',
+      ],
+    };
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

packages/mermaid/src/themes/theme-dark.js

@@ -251,6 +251,31 @@ class Theme {
       this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
+    /* xychart */
+    this.xyChart = {
+      backgroundColor: this.xyChart?.backgroundColor || this.background,
+      titleColor: this.xyChart?.titleColor || this.primaryTextColor,
+      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
+      xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+      xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
+      yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
+      yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      plotColorPalette: this.xyChart?.plotColorPalette || [
+        '#3498db',
+        '#2ecc71',
+        '#e74c3c',
+        '#f1c40f',
+        '#bdc3c7',
+        '#ffffff',
+        '#34495e',
+        '#9b59b6',
+        '#1abc9c',
+        '#e67e22',
+      ],
+    };
+
     /* class */
     this.classText = this.primaryTextColor;
 

packages/mermaid/src/themes/theme-default.js

@@ -283,7 +283,18 @@ class Theme {
       yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
       yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
       yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
-      plotBaseColor: this.xyChart?.plotBaseColor || darken(this.primaryColor, 25),
+      plotColorPalette: this.xyChart?.plotColorPalette || [
+        '#ECECFF',
+        '#8493A6',
+        '#FFC3A0',
+        '#DCDDE1',
+        '#B8E994',
+        '#D1A36F',
+        '#C3CDE6',
+        '#FFB6C1',
+        '#496078',
+        '#F8F3E3',
+      ],
     };
 
     /* requirement-diagram */

packages/mermaid/src/themes/theme-forest.js

@@ -240,6 +240,31 @@ class Theme {
       this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
+    /* xychart */
+    this.xyChart = {
+      backgroundColor: this.xyChart?.backgroundColor || this.background,
+      titleColor: this.xyChart?.titleColor || this.primaryTextColor,
+      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
+      xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+      xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
+      yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
+      yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      plotColorPalette: this.xyChart?.plotColorPalette || [
+        '#CDE498',
+        '#FF6B6B',
+        '#A0D2DB',
+        '#D7BDE2',
+        '#F0F0F0',
+        '#FFC3A0',
+        '#7FD8BE',
+        '#FF9A8B',
+        '#FAF3E0',
+        '#FFF176',
+      ],
+    };
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;

packages/mermaid/src/themes/theme-neutral.js

@@ -271,6 +271,31 @@ class Theme {
       this.quadrantExternalBorderStrokeFill || this.primaryBorderColor;
     this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor;
 
+    /* xychart */
+    this.xyChart = {
+      backgroundColor: this.xyChart?.backgroundColor || this.background,
+      titleColor: this.xyChart?.titleColor || this.primaryTextColor,
+      axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
+      xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
+      xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
+      xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
+      yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
+      yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor,
+      yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
+      plotColorPalette: this.xyChart?.plotColorPalette || [
+        '#EEE',
+        '#6BB8E4',
+        '#8ACB88',
+        '#C7ACD6',
+        '#E8DCC2',
+        '#FFB2A8',
+        '#FFF380',
+        '#7E8D91',
+        '#FFD8B1',
+        '#FAF3E0',
+      ],
+    };
+
     /* requirement-diagram */
     this.requirementBackground = this.requirementBackground || this.primaryColor;
     this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor;