Updated code to use latest config system

shaikshahid98 · Aug 13, 2023 · 526de36 · 526de36
1 parent 6c2faf0
commit 526de36
Show file tree

Hide file tree

Showing 20 changed files with 433 additions and 140 deletions.
diff --git a/.vite/jsonSchemaPlugin.ts b/.vite/jsonSchemaPlugin.ts
@@ -18,6 +18,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

diff --git a/docs/config/setup/modules/defaultConfig.md b/docs/config/setup/modules/defaultConfig.md
@@ -14,7 +14,7 @@
 
 #### Defined in
 
-[defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+[defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
 
 ---
 

diff --git a/packages/mermaid/scripts/create-types-from-json-schema.mts b/packages/mermaid/scripts/create-types-from-json-schema.mts
@@ -46,6 +46,7 @@ const MERMAID_CONFIG_DIAGRAM_KEYS = [
   'er',
   'pie',
   'quadrantChart',
+  'xyChart',
   'requirement',
   'mindmap',
   'timeline',

diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts
@@ -704,33 +704,178 @@ export interface QuadrantChartConfig extends BaseDiagramConfig {
    */
   quadrantExternalBorderStrokeWidth?: number;
 }
-
+/**
+ * This object contains configuration for XYChart axis config
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartAxisConfig".
+ */
 export interface XYChartAxisConfig {
-  showLabel: boolean;
-  labelFontSize: number;
-  lablePadding: number;
-  showTitle: boolean;
-  titleFontSize: number;
-  titlePadding: number;
-  showTick: boolean;
-  tickLength: number;
-  tickWidth: number;
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
 }
-
+/**
+ * This object contains configuration specific to XYCharts
+ *
+ * This interface was referenced by `MermaidConfig`'s JSON-Schema
+ * via the `definition` "XYChartConfig".
+ */
 export interface XYChartConfig extends BaseDiagramConfig {
-  width: number;
-  height: number;
-  fontFamily: string;
-  titleFontSize: number;
-  titlePadding: number;
-  showtitle: boolean;
-  xAxis: XYChartAxisConfig;
-  yAxis: XYChartAxisConfig;
-  plotBorderWidth: number;
-  chartOrientation: 'vertical' | 'horizontal';
-  plotReservedSpacePercent: number;
+  /**
+   * width of the chart
+   */
+  width?: number;
+  /**
+   * height of the chart
+   */
+  height?: number;
+  /**
+   * Font family of texts in the xyChart
+   */
+  fontFamily?: string;
+  /**
+   * Font size of the chart title
+   */
+  titleFontSize?: number;
+  /**
+   * Top and bottom space from the chart title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the chart title
+   */
+  showTitle?: boolean;
+  xAxis?: XYChartAxisConfig1;
+  yAxis?: XYChartAxisConfig2;
+  /**
+   * width of the line around the plot of the chart
+   */
+  plotBorderWidth?: number;
+  /**
+   * How to plot will be drawn horizontal or vertical
+   */
+  chartOrientation?: 'vertical' | 'horizontal';
+  /**
+   * Minimum percent of space plots of the chart will take
+   */
+  plotReservedSpacePercent?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig1 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
+}
+/**
+ * This object contains configuration for XYChart axis config
+ */
+export interface XYChartAxisConfig2 {
+  /**
+   * Should show the axis labels (tick text)
+   */
+  showLabel?: boolean;
+  /**
+   * font size of the axis labels (tick text)
+   */
+  labelFontSize?: number;
+  /**
+   * top and bottom space from axis label (tick text)
+   */
+  labelPadding?: number;
+  /**
+   * Should show the axis title
+   */
+  showTitle?: boolean;
+  /**
+   * font size of the axis title
+   */
+  titleFontSize?: number;
+  /**
+   * top and bottom space from axis title
+   */
+  titlePadding?: number;
+  /**
+   * Should show the axis tick lines
+   */
+  showTick?: boolean;
+  /**
+   * length of the axis tick lines
+   */
+  tickLength?: number;
+  /**
+   * width of the axis tick lines
+   */
+  tickWidth?: number;
 }
-
 /**
  * The object containing configurations specific for entity relationship diagrams
  *

diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts
@@ -234,6 +234,10 @@ const config: Partial<MermaidConfig> = {
     ...defaultConfigJson.pie,
     useWidth: undefined,
   },
+  xyChart: {
+    ...defaultConfigJson.xyChart,
+    useWidth: undefined,
+  },
   requirement: {
     ...defaultConfigJson.requirement,
     useWidth: undefined,

diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
@@ -5,15 +5,15 @@ export interface XYChartAxisThemeConfig {
 }
 
 export interface XYChartThemeConfig {
-  xychartTitleColor: string;
-  xychartAxisLineColor: string;
-  xychartXAxisLableColor: string;
-  xychartXAxisTitleColor: string;
-  xychartXAxisTickColor: string;
-  xychartYAxisLableColor: string;
-  xychartYAxisTitleColor: string;
-  xychartYAxisTickColor: string;
-  xychartPlotBaseColor: string;
+  titleColor: string;
+  axisLineColor: string;
+  xAxisLableColor: string;
+  xAxisTitleColor: string;
+  xAxisTickColor: string;
+  yAxisLableColor: string;
+  yAxisTitleColor: string;
+  yAxisTickColor: string;
+  plotBaseColor: string;
 }
 
 export interface ChartComponent {
@@ -66,6 +66,36 @@ export function isLinearAxisData(data: AxisDataType): data is LinearAxisDataType
   return data.type === 'linear';
 }
 
+/**
+ * For now we are keeping this configs as we are removing the required fields while generating the config.type.ts file
+ * we should remove `XYChartAxisConfig` and `XYChartConfig` after we started using required fields
+ */
+export interface XYChartAxisConfig {
+  showLabel: boolean;
+  labelFontSize: number;
+  labelPadding: number;
+  showTitle: boolean;
+  titleFontSize: number;
+  titlePadding: number;
+  showTick: boolean;
+  tickLength: number;
+  tickWidth: number;
+}
+
+export interface XYChartConfig {
+  width: number;
+  height: number;
+  fontFamily: string;
+  titleFontSize: number;
+  titlePadding: number;
+  showTitle: boolean;
+  xAxis: XYChartAxisConfig;
+  yAxis: XYChartAxisConfig;
+  plotBorderWidth: number;
+  chartOrientation: 'vertical' | 'horizontal';
+  plotReservedSpacePercent: number;
+}
+
 export interface XYChartData {
   xAxis: AxisDataType;
   yAxis: AxisDataType;

diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
@@ -1,10 +1,15 @@
 import { log } from '../../../logger.js';
-import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js';
+import {
+  DrawableElem,
+  XYChartData,
+  XYChartThemeConfig,
+  XYChartConfig,
+  isBarPlot,
+} from './Interfaces.js';
 import { getChartTitleComponent } from './components/ChartTitle.js';
 import { ChartComponent } from './Interfaces.js';
 import { IAxis, getAxis } from './components/axis/index.js';
 import { IPlot, getPlotComponent } from './components/plot/index.js';
-import { XYChartConfig } from '../../../config.type.js';
 
 export class Orchestrator {
   private componentStore: {
@@ -25,19 +30,19 @@ export class Orchestrator {
         chartData.xAxis,
         chartConfig.xAxis,
         {
-          titleColor: chartThemeConfig.xychartXAxisTitleColor,
-          labelColor: chartThemeConfig.xychartXAxisLableColor,
-          tickColor: chartThemeConfig.xychartXAxisTickColor,
+          titleColor: chartThemeConfig.xAxisTitleColor,
+          labelColor: chartThemeConfig.xAxisLableColor,
+          tickColor: chartThemeConfig.xAxisTickColor,
         },
         chartConfig.fontFamily
       ),
       yAxis: getAxis(
         chartData.yAxis,
         chartConfig.yAxis,
         {
-          titleColor: chartThemeConfig.xychartYAxisTitleColor,
-          labelColor: chartThemeConfig.xychartYAxisLableColor,
-          tickColor: chartThemeConfig.xychartYAxisTickColor,
+          titleColor: chartThemeConfig.yAxisTitleColor,
+          labelColor: chartThemeConfig.yAxisLableColor,
+          tickColor: chartThemeConfig.yAxisTickColor,
         },
         chartConfig.fontFamily
       ),

diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
@@ -1,4 +1,3 @@
-import { XYChartConfig } from '../../../../config.type.js';
 import {
   BoundingRect,
   ChartComponent,
@@ -7,6 +6,7 @@ import {
   Point,
   XYChartData,
   XYChartThemeConfig,
+  XYChartConfig,
 } from '../Interfaces.js';
 import {
   ITextDimensionCalculator,
@@ -28,7 +28,7 @@ export class ChartTitle implements ChartComponent {
       width: 0,
       height: 0,
     };
-    this.showChartTitle = !!(this.chartData.title && this.chartConfig.showtitle);
+    this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle);
   }
   setBoundingBoxXY(point: Point): void {
     this.boundingRect.x = point.x;
@@ -69,7 +69,7 @@ export class ChartTitle implements ChartComponent {
             horizontalPos: 'middle',
             x: this.boundingRect.x + this.boundingRect.width / 2,
             y: this.boundingRect.y + this.boundingRect.height / 2,
-            fill: this.chartThemeConfig.xychartTitleColor,
+            fill: this.chartThemeConfig.titleColor,
             rotation: 0,
           },
         ],

diff --git 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,8 @@
 import { ScaleBand, scaleBand } from 'd3';
-import { XYChartAxisConfig } from '../../../../../config.type.js';
 import { log } from '../../../../../logger.js';
 import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js';
 import { BaseAxis } from './BaseAxis.js';
-import { XYChartAxisThemeConfig } from '../../Interfaces.js';
+import { XYChartAxisThemeConfig, XYChartAxisConfig } from '../../Interfaces.js';
 
 export class BandAxis extends BaseAxis {
   private scale: ScaleBand<string>;
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ @@
     #### Defined in
-    [defaultConfig.ts:266](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L266)
+    [defaultConfig.ts:270](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/defaultConfig.ts#L270)
     ---
@@ Expand Down @@