From c38cdcf2b2660f9f4559b1ed87d1c0aaaac1a767 Mon Sep 17 00:00:00 2001 From: Subhash Halder Date: Wed, 19 Jul 2023 22:41:41 +0530 Subject: [PATCH] Introduced theme config to configure cosmetics --- packages/mermaid/src/config.type.ts | 54 +++++++++---------- .../xychart/chartBuilder/Interfaces.ts | 19 +++++++ .../xychart/chartBuilder/Orchestrator.ts | 34 +++++++++--- .../chartBuilder/components/ChartTitle.ts | 11 ++-- .../chartBuilder/components/axis/BandAxis.ts | 4 +- .../chartBuilder/components/axis/BaseAxis.ts | 29 ++++++---- .../components/axis/LinearAxis.ts | 4 +- .../chartBuilder/components/axis/index.ts | 24 +++++++-- .../chartBuilder/components/plot/BarPlot.ts | 5 +- .../chartBuilder/components/plot/LinePlot.ts | 5 +- .../components/plot/PlotBorder.ts | 9 ++-- .../chartBuilder/components/plot/index.ts | 35 +++++++++--- .../diagrams/xychart/chartBuilder/index.ts | 11 ++-- .../mermaid/src/diagrams/xychart/xychartDb.ts | 49 +++++++++++++---- packages/mermaid/src/themes/theme-default.js | 15 ++++++ pnpm-lock.yaml | 6 ++- 16 files changed, 230 insertions(+), 84 deletions(-) diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index aa9f2b81e..4a392673d 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -8,7 +8,7 @@ /** * Configuration options to pass to the `dompurify` library. */ -export type DOMPurifyConfiguration = import("dompurify").Config; +export type DOMPurifyConfiguration = import('dompurify').Config; /** * JavaScript function that returns a `FontConfig`. * @@ -39,7 +39,7 @@ export type FontCalculator = () => Partial; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyLinkColor". */ -export type SankeyLinkColor = "source" | "target" | "gradient"; +export type SankeyLinkColor = 'source' | 'target' | 'gradient'; /** * Controls the alignment of the Sankey diagrams. * @@ -49,7 +49,7 @@ export type SankeyLinkColor = "source" | "target" | "gradient"; * This interface was referenced by `MermaidConfig`'s JSON-Schema * via the `definition` "SankeyNodeAlignment". */ -export type SankeyNodeAlignment = "left" | "right" | "center" | "justify"; +export type SankeyNodeAlignment = 'left' | 'right' | 'center' | 'justify'; /** * The font size to use */ @@ -61,7 +61,7 @@ export interface MermaidConfig { * You may also use `themeCSS` to override this value. * */ - theme?: string | "default" | "forest" | "dark" | "neutral" | "null"; + theme?: string | 'default' | 'forest' | 'dark' | 'neutral' | 'null'; themeVariables?: any; themeCSS?: string; /** @@ -88,12 +88,12 @@ export interface MermaidConfig { | 0 | 2 | 1 - | "trace" - | "debug" - | "info" - | "warn" - | "error" - | "fatal" + | 'trace' + | 'debug' + | 'info' + | 'warn' + | 'error' + | 'fatal' | 3 | 4 | 5 @@ -101,7 +101,7 @@ export interface MermaidConfig { /** * Level of trust for parsed diagram */ - securityLevel?: string | "strict" | "loose" | "antiscript" | "sandbox" | undefined; + securityLevel?: string | 'strict' | 'loose' | 'antiscript' | 'sandbox' | undefined; /** * Dictates whether mermaid starts on Page load */ @@ -690,11 +690,11 @@ export interface QuadrantChartConfig extends BaseDiagramConfig { /** * position of x-axis labels */ - xAxisPosition?: "top" | "bottom"; + xAxisPosition?: 'top' | 'bottom'; /** * position of y-axis labels */ - yAxisPosition?: "left" | "right"; + yAxisPosition?: 'left' | 'right'; /** * stroke width of edges of the box that are inside the quadrant */ @@ -709,15 +709,12 @@ export interface XYChartAxisConfig { showLabel: boolean; labelFontSize: number; lablePadding: number; - labelFill: string; showTitle: boolean; titleFontSize: number; titlePadding: number; - titleFill: string; showTick: boolean; tickLength: number; tickWidth: number; - tickFill: string; } export interface XYChartConfig extends BaseDiagramConfig { @@ -725,7 +722,6 @@ export interface XYChartConfig extends BaseDiagramConfig { height: number; fontFamily: string; titleFontSize: number; - titleFill: string; titlePadding: number; showtitle: boolean; xAxis: XYChartAxisConfig; @@ -755,7 +751,7 @@ export interface ErDiagramConfig extends BaseDiagramConfig { /** * Directional bias for layout of entities */ - layoutDirection?: string | "TB" | "BT" | "LR" | "RL"; + layoutDirection?: string | 'TB' | 'BT' | 'LR' | 'RL'; /** * The minimum width of an entity box. Expressed in pixels. */ @@ -820,7 +816,7 @@ export interface StateDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; } /** * This interface was referenced by `MermaidConfig`'s JSON-Schema @@ -844,7 +840,7 @@ export interface ClassDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; nodeSpacing?: number; rankSpacing?: number; /** @@ -904,7 +900,7 @@ export interface JourneyDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -983,7 +979,7 @@ export interface TimelineDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Prolongs the edge of the diagram downwards. * @@ -1094,12 +1090,12 @@ export interface GanttDiagramConfig extends BaseDiagramConfig { * Controls the display mode. * */ - displayMode?: string | "compact"; + displayMode?: string | 'compact'; /** * On which day a week-based interval should start * */ - weekday?: "monday" | "tuesday" | "wednesday" | "thursday" | "friday" | "saturday" | "sunday"; + weekday?: 'monday' | 'tuesday' | 'wednesday' | 'thursday' | 'friday' | 'saturday' | 'sunday'; } /** * The object containing configurations specific for sequence diagrams @@ -1153,7 +1149,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * Multiline message alignment */ - messageAlign?: string | "left" | "center" | "right"; + messageAlign?: string | 'left' | 'center' | 'right'; /** * Mirror actors under diagram * @@ -1210,7 +1206,7 @@ export interface SequenceDiagramConfig extends BaseDiagramConfig { /** * This sets the text alignment of actor-attached notes */ - noteAlign?: string | "left" | "center" | "right"; + noteAlign?: string | 'left' | 'center' | 'right'; /** * This sets the font size of actor messages */ @@ -1286,7 +1282,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Defines how mermaid renders curves for flowcharts. * */ - curve?: string | "basis" | "linear" | "cardinal"; + curve?: string | 'basis' | 'linear' | 'cardinal'; /** * Represents the padding between the labels and the shape * @@ -1298,7 +1294,7 @@ export interface FlowchartDiagramConfig extends BaseDiagramConfig { * Decides which rendering engine that is to be used for the rendering. * */ - defaultRenderer?: string | "dagre-d3" | "dagre-wrapper" | "elk"; + defaultRenderer?: string | 'dagre-d3' | 'dagre-wrapper' | 'elk'; /** * Width of nodes where text is wrapped. * @@ -1328,7 +1324,7 @@ export interface SankeyDiagramConfig extends BaseDiagramConfig { * See . * */ - nodeAlignment?: "left" | "right" | "center" | "justify"; + nodeAlignment?: 'left' | 'right' | 'center' | 'justify'; useMaxWidth?: boolean; } /** diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts index 54b7bc004..6968dee48 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts @@ -1,3 +1,22 @@ +export interface XYChartAxisThemeConfig { + titleColor: string; + labelColor: string; + tickColor: string; +} + +export interface XYChartThemeConfig { + xychartTitleColor: string; + xychartAxisLineColor: string; + xychartXAxisLableColor: string; + xychartXAxisTitleColor: string; + xychartXAxisTickColor: string; + xychartYAxisLableColor: string; + xychartYAxisTitleColor: string; + xychartYAxisTickColor: string; + xychartBarPlotPalette: string[]; + xychartLinePlotPalette: string[]; +} + export interface ChartComponent { calculateSpace(availableSpace: Dimension): Dimension; setBoundingBoxXY(point: Point): void; diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts index 5f187267c..d4c80b559 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts @@ -1,5 +1,5 @@ import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData, isBarPlot } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartThemeConfig, isBarPlot } from './Interfaces.js'; import { getChartTitleComponent } from './components/ChartTitle.js'; import { ChartComponent } from './Interfaces.js'; import { IAxis, getAxis } from './components/axis/index.js'; @@ -13,12 +13,34 @@ export class Orchestrator { xAxis: IAxis; yAxis: IAxis; }; - constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig + ) { this.componentStore = { - title: getChartTitleComponent(chartConfig, chartData), - plot: getPlotComponent(chartConfig, chartData), - xAxis: getAxis(chartData.xAxis, chartConfig.xAxis, chartConfig.fontFamily), - yAxis: getAxis(chartData.yAxis, chartConfig.yAxis, chartConfig.fontFamily), + title: getChartTitleComponent(chartConfig, chartData, chartThemeConfig), + plot: getPlotComponent(chartConfig, chartData, chartThemeConfig), + xAxis: getAxis( + chartData.xAxis, + chartConfig.xAxis, + { + titleColor: chartThemeConfig.xychartXAxisTitleColor, + labelColor: chartThemeConfig.xychartXAxisLableColor, + tickColor: chartThemeConfig.xychartXAxisTickColor, + }, + chartConfig.fontFamily + ), + yAxis: getAxis( + chartData.yAxis, + chartConfig.yAxis, + { + titleColor: chartThemeConfig.xychartYAxisTitleColor, + labelColor: chartThemeConfig.xychartYAxisLableColor, + tickColor: chartThemeConfig.xychartYAxisTickColor, + }, + chartConfig.fontFamily + ), }; } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts index a9225e57d..0de677f25 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts @@ -6,6 +6,7 @@ import { DrawableElem, Point, XYChartData, + XYChartThemeConfig, } from '../Interfaces.js'; import { ITextDimensionCalculator, @@ -18,7 +19,8 @@ export class ChartTitle implements ChartComponent { constructor( private textDimensionCalculator: ITextDimensionCalculator, private chartConfig: XYChartConfig, - private chartData: XYChartData + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig ) { this.boundingRect = { x: 0, @@ -67,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.chartConfig.titleFill, + fill: this.chartThemeConfig.xychartTitleColor, rotation: 0, }, ], @@ -79,8 +81,9 @@ export class ChartTitle implements ChartComponent { export function getChartTitleComponent( chartConfig: XYChartConfig, - chartData: XYChartData + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig ): ChartComponent { const textDimensionCalculator = new TextDimensionCalculatorWithFont(chartConfig.fontFamily); - return new ChartTitle(textDimensionCalculator, chartConfig, chartData); + return new ChartTitle(textDimensionCalculator, chartConfig, chartData, chartThemeConfig); } 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 9a5334097..6c354cd51 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BandAxis.ts @@ -3,6 +3,7 @@ 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'; export class BandAxis extends BaseAxis { private scale: ScaleBand; @@ -10,11 +11,12 @@ export class BandAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, categories: string[], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.categories = categories; this.scale = scaleBand().domain(this.categories).range(this.getRange()); } 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 f8245270b..a9e551626 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/BaseAxis.ts @@ -1,6 +1,12 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; import { log } from '../../../../../logger.js'; -import { BoundingRect, Dimension, DrawableElem, Point } from '../../Interfaces.js'; +import { + BoundingRect, + Dimension, + DrawableElem, + Point, + XYChartAxisThemeConfig, +} from '../../Interfaces.js'; import { ITextDimensionCalculator } from '../../TextDimensionCalculator.js'; import { AxisPosition, IAxis } from './index.js'; @@ -16,7 +22,8 @@ export abstract class BaseAxis implements IAxis { constructor( protected axisConfig: XYChartAxisConfig, protected title: string, - protected textDimensionCalculator: ITextDimensionCalculator + protected textDimensionCalculator: ITextDimensionCalculator, + protected axisThemeConfig: XYChartAxisThemeConfig ) { this.range = [0, 10]; this.boundingRect = { x: 0, y: 0, width: 0, height: 0 }; @@ -164,7 +171,7 @@ export abstract class BaseAxis implements IAxis { this.axisConfig.lablePadding - this.axisConfig.tickLength, y: this.getScaleValue(tick), - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'right', @@ -181,7 +188,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${x},${this.getScaleValue(tick)} L ${ x - this.axisConfig.tickLength },${this.getScaleValue(tick)}`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -195,7 +202,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.boundingRect.x + this.axisConfig.titlePadding, y: this.range[0] + (this.range[1] - this.range[0]) / 2, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 270, verticalPos: 'center', @@ -216,7 +223,7 @@ export abstract class BaseAxis implements IAxis { text: tick.toString(), x: this.getScaleValue(tick), y: this.boundingRect.y + this.axisConfig.lablePadding + this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -233,7 +240,7 @@ export abstract class BaseAxis implements IAxis { path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${ y + this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -247,7 +254,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', @@ -272,7 +279,7 @@ export abstract class BaseAxis implements IAxis { this.boundingRect.height - this.axisConfig.lablePadding - this.axisConfig.tickLength, - fill: this.axisConfig.labelFill, + fill: this.axisThemeConfig.labelColor, fontSize: this.axisConfig.labelFontSize, rotation: 0, verticalPos: 'center', @@ -291,7 +298,7 @@ export abstract class BaseAxis implements IAxis { } L ${this.getScaleValue(tick)},${ y + this.boundingRect.height - this.axisConfig.tickLength }`, - strokeFill: this.axisConfig.tickFill, + strokeFill: this.axisThemeConfig.tickColor, strokeWidth: this.axisConfig.tickWidth, })), }); @@ -305,7 +312,7 @@ export abstract class BaseAxis implements IAxis { text: this.title, x: this.range[0] + (this.range[1] - this.range[0]) / 2, y: this.boundingRect.y + this.axisConfig.titlePadding, - fill: this.axisConfig.titleFill, + fill: this.axisThemeConfig.titleColor, fontSize: this.axisConfig.titleFontSize, rotation: 0, verticalPos: 'center', 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 a9b5d3bcb..23acf3f2a 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/LinearAxis.ts @@ -3,6 +3,7 @@ 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'; export class LinearAxis extends BaseAxis { private scale: ScaleLinear; @@ -10,11 +11,12 @@ export class LinearAxis extends BaseAxis { constructor( axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, domain: [number, number], title: string, textDimensionCalculator: ITextDimensionCalculator ) { - super(axisConfig, title, textDimensionCalculator); + super(axisConfig, title, textDimensionCalculator, axisThemeConfig); this.domain = domain; this.scale = scaleLinear().domain(this.domain).range(this.getRange()); } 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 23df3cdba..f1a3df093 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/axis/index.ts @@ -1,5 +1,10 @@ import { XYChartAxisConfig } from '../../../../../config.type.js'; -import { AxisDataType, ChartComponent, isBandAxisData } from '../../Interfaces.js'; +import { + AxisDataType, + ChartComponent, + XYChartAxisThemeConfig, + isBandAxisData, +} from '../../Interfaces.js'; import { TextDimensionCalculatorWithFont } from '../../TextDimensionCalculator.js'; import { BandAxis } from './BandAxis.js'; import { LinearAxis } from './LinearAxis.js'; @@ -18,11 +23,24 @@ export interface IAxis extends ChartComponent { export function getAxis( data: AxisDataType, axisConfig: XYChartAxisConfig, + axisThemeConfig: XYChartAxisThemeConfig, fontFamily?: string ): IAxis { const textDimansionCalculator = new TextDimensionCalculatorWithFont(fontFamily); if (isBandAxisData(data)) { - return new BandAxis(axisConfig, data.categories, data.title, textDimansionCalculator); + return new BandAxis( + axisConfig, + axisThemeConfig, + data.categories, + data.title, + textDimansionCalculator + ); } - return new LinearAxis(axisConfig, [data.min, data.max], data.title, textDimansionCalculator); + return new LinearAxis( + axisConfig, + axisThemeConfig, + [data.min, data.max], + data.title, + textDimansionCalculator + ); } 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 dbb333b7b..b11a6630b 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/BarPlot.ts @@ -1,5 +1,5 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BarPlotData, BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BarPlotData, BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; export class BarPlot { @@ -8,7 +8,8 @@ export class BarPlot { private boundingRect: BoundingRect, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { 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 e342352b8..c10b431a7 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 { DrawableElem, LinePlotData } from '../../Interfaces.js'; +import { DrawableElem, LinePlotData, XYChartThemeConfig } from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { XYChartConfig } from '../../../../../config.type.js'; @@ -8,7 +8,8 @@ export class LinePlot { private plotData: LinePlotData, private xAxis: IAxis, private yAxis: IAxis, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts index ab4668999..5796ae8da 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts @@ -1,9 +1,10 @@ import { XYChartConfig } from '../../../../../config.type.js'; -import { BoundingRect, DrawableElem } from '../../Interfaces.js'; +import { BoundingRect, DrawableElem, XYChartThemeConfig } from '../../Interfaces.js'; export class PlotBorder { constructor( private boundingRect: BoundingRect, - private orientation: XYChartConfig['chartOrientation'] + private orientation: XYChartConfig['chartOrientation'], + private chartThemeConfig: XYChartThemeConfig ) {} getDrawableElement(): DrawableElem[] { @@ -18,7 +19,7 @@ export class PlotBorder { path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], @@ -34,7 +35,7 @@ export class PlotBorder { path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${ y + height } L ${x},${y}`, - strokeFill: '#000000', + strokeFill: this.chartThemeConfig.xychartAxisLineColor, strokeWidth: 1, }, ], 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 61016c021..9e0f3cbb0 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/index.ts @@ -1,4 +1,11 @@ -import { XYChartData, Dimension, BoundingRect, DrawableElem, Point } from '../../Interfaces.js'; +import { + XYChartData, + Dimension, + BoundingRect, + DrawableElem, + Point, + XYChartThemeConfig, +} from '../../Interfaces.js'; import { IAxis } from '../axis/index.js'; import { ChartComponent } from '../../Interfaces.js'; import { LinePlot } from './LinePlot.js'; @@ -15,7 +22,11 @@ export class Plot implements IPlot { private xAxis?: IAxis; private yAxis?: IAxis; - constructor(private chartConfig: XYChartConfig, private chartData: XYChartData) { + constructor( + private chartConfig: XYChartConfig, + private chartData: XYChartData, + private chartThemeConfig: XYChartThemeConfig + ) { this.boundingRect = { x: 0, y: 0, @@ -45,7 +56,11 @@ export class Plot implements IPlot { throw Error('Axes must be passed to render Plots'); } const drawableElem: DrawableElem[] = [ - ...new PlotBorder(this.boundingRect, this.chartConfig.chartOrientation).getDrawableElement(), + ...new PlotBorder( + this.boundingRect, + this.chartConfig.chartOrientation, + this.chartThemeConfig + ).getDrawableElement(), ]; for (const plot of this.chartData.plots) { switch (plot.type) { @@ -55,7 +70,8 @@ export class Plot implements IPlot { plot, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...linePlot.getDrawableElement()); } @@ -67,7 +83,8 @@ export class Plot implements IPlot { this.boundingRect, this.xAxis, this.yAxis, - this.chartConfig.chartOrientation + this.chartConfig.chartOrientation, + this.chartThemeConfig ); drawableElem.push(...barPlot.getDrawableElement()); } @@ -78,6 +95,10 @@ export class Plot implements IPlot { } } -export function getPlotComponent(chartConfig: XYChartConfig, chartData: XYChartData): IPlot { - return new Plot(chartConfig, chartData); +export function getPlotComponent( + chartConfig: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig +): IPlot { + return new Plot(chartConfig, chartData, chartThemeConfig); } diff --git a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts index badadf2aa..80f3b364e 100644 --- a/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts +++ b/packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts @@ -1,14 +1,19 @@ // @ts-ignore: TODO Fix ts errors import { XYChartConfig } from '../../../config.type.js'; import { log } from '../../../logger.js'; -import { DrawableElem, XYChartData } from './Interfaces.js'; +import { DrawableElem, XYChartData, XYChartThemeConfig } from './Interfaces.js'; import { Orchestrator } from './Orchestrator.js'; export class XYChartBuilder { - static build(config: XYChartConfig, chartData: XYChartData): DrawableElem[] { + static build( + config: XYChartConfig, + chartData: XYChartData, + chartThemeConfig: XYChartThemeConfig + ): DrawableElem[] { log.trace(`Build start with Config: ${JSON.stringify(config, null, 2)}`); log.trace(`Build start with ChartData: ${JSON.stringify(chartData, null, 2)}`); - const orchestrator = new Orchestrator(config, chartData); + log.trace(`Build start with ChartThemeConfig: ${JSON.stringify(chartThemeConfig, null, 2)}`); + const orchestrator = new Orchestrator(config, chartData, chartThemeConfig); return orchestrator.getDrawableElement(); } } diff --git a/packages/mermaid/src/diagrams/xychart/xychartDb.ts b/packages/mermaid/src/diagrams/xychart/xychartDb.ts index a8d6971c8..d70039f3a 100644 --- a/packages/mermaid/src/diagrams/xychart/xychartDb.ts +++ b/packages/mermaid/src/diagrams/xychart/xychartDb.ts @@ -16,12 +16,41 @@ import { DrawableElem, SimplePlotDataType, XYChartData, + XYChartThemeConfig, isBandAxisData, isLinearAxisData, } from './chartBuilder/Interfaces.js'; import { XYChartConfig } from '../../config.type.js'; +import { getThemeVariables } from '../../themes/theme-default.js'; + +const defaultThemeVariables = getThemeVariables(); const config = configApi.getConfig(); + +function getChartDefaultThemeConfig(): XYChartThemeConfig { + return { + xychartTitleColor: + config.themeVariables?.xychartTitleColor || defaultThemeVariables.xychartTitleColor, + xychartAxisLineColor: + config.themeVariables?.xychartAxisLineColor || defaultThemeVariables.xychartAxisLineColor, + xychartXAxisLableColor: + config.themeVariables?.xychartXAxisLableColor || defaultThemeVariables.xychartXAxisLableColor, + xychartXAxisTitleColor: + config.themeVariables?.xychartXAxisTitleColor || defaultThemeVariables.xychartXAxisTitleColor, + xychartXAxisTickColor: + config.themeVariables?.xychartXAxisTickColor || defaultThemeVariables.xychartXAxisTickColor, + xychartYAxisLableColor: + config.themeVariables?.xychartYAxisLableColor || defaultThemeVariables.xychartYAxisLableColor, + xychartYAxisTitleColor: + config.themeVariables?.xychartYAxisTitleColor || defaultThemeVariables.xychartYAxisTitleColor, + xychartYAxisTickColor: + config.themeVariables?.xychartYAxisTickColor || defaultThemeVariables.xychartYAxisTickColor, + xychartBarPlotPalette: + config.themeVariables?.xychartBarPlotPalette || defaultThemeVariables.xychartBarPlotPalette, + xychartLinePlotPalette: + config.themeVariables?.xychartLinePlotPalette || defaultThemeVariables.xychartLinePlotPalette, + }; +} function getChartDefaultConfig(): XYChartConfig { return config.xyChart ? { ...config.xyChart, yAxis: { ...config.xyChart.yAxis }, xAxis: { ...config.xyChart.xAxis } } @@ -30,7 +59,6 @@ function getChartDefaultConfig(): XYChartConfig { height: 500, fontFamily: config.fontFamily || 'Sans', titleFontSize: 16, - titleFill: '#000000', titlePadding: 5, showtitle: true, plotBorderWidth: 2, @@ -38,29 +66,23 @@ function getChartDefaultConfig(): XYChartConfig { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, xAxis: { showLabel: true, labelFontSize: 14, lablePadding: 5, - labelFill: '#000000', showTitle: true, titleFontSize: 16, titlePadding: 5, - titleFill: '#000000', showTick: true, tickLength: 5, tickWidth: 2, - tickFill: '#000000', }, chartOrientation: 'vertical', plotReservedSpacePercent: 50, @@ -86,6 +108,7 @@ function getChartDefalutData(): XYChartData { } let xyChartConfig: XYChartConfig = getChartDefaultConfig(); +let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartData: XYChartData = getChartDefalutData(); let hasSetXAxis = false; let hasSetYAxis = false; @@ -178,7 +201,10 @@ function setLineData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'line', - strokeFill: '#00ff00', + strokeFill: + xyChartThemeConfig.xychartLinePlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartLinePlotPalette.length - 1)) + ], strokeWidth: 2, data: plotData, }); @@ -187,7 +213,9 @@ function setBarData(title: string, data: number[]) { const plotData = transformDataWithOutCategory(data); xyChartData.plots.push({ type: 'bar', - fill: '#0000bb', + fill: xyChartThemeConfig.xychartBarPlotPalette[ + Math.floor(Math.random() * (xyChartThemeConfig.xychartBarPlotPalette.length - 1)) + ], data: plotData, }); } @@ -197,7 +225,7 @@ function getDrawableElem(): DrawableElem[] { throw Error('No Plot to render, please provide a plot with some data'); } xyChartData.title = getDiagramTitle(); - return XYChartBuilder.build(xyChartConfig, xyChartData); + return XYChartBuilder.build(xyChartConfig, xyChartData, xyChartThemeConfig); } function setHeight(height: number) { @@ -212,6 +240,7 @@ const clear = function () { commonClear(); xyChartConfig = getChartDefaultConfig(); xyChartData = getChartDefalutData(); + xyChartThemeConfig = getChartDefaultThemeConfig(); hasSetXAxis = false; hasSetYAxis = false; }; diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js index 3cd6bca4f..59362a54e 100644 --- a/packages/mermaid/src/themes/theme-default.js +++ b/packages/mermaid/src/themes/theme-default.js @@ -272,6 +272,21 @@ class Theme { this.quadrantExternalBorderStrokeFill || this.primaryBorderColor; this.quadrantTitleFill = this.quadrantTitleFill || this.primaryTextColor; + /* xychart */ + this.xychartBackgroundColor = this.xychartBackgroundColor || this.background; + this.xychartTitleColor = this.xychartTitleColor || this.primaryTextColor; + this.xychartAxisLineColor = this.xychartAxisLineColor || this.primaryTextColor; + this.xychartXAxisTitleColor = this.xychartXAxisTitleColor || this.primaryTextColor; + this.xychartXAxisLableColor = this.xychartXAxisLableColor || this.primaryTextColor; + this.xychartXAxisTickColor = this.xychartXAxisTickColor || this.primaryTextColor; + this.xychartYAxisTitleColor = this.xychartYAxisTitleColor || this.primaryTextColor; + this.xychartYAxisLableColor = this.xychartYAxisLableColor || this.primaryTextColor; + this.xychartYAxisTickColor = this.xychartYAxisTickColor || this.primaryTextColor; + this.xychartBarPlotPalette = this.xychartBarPlotPalette || [this.primaryColor]; + this.xychartLinePlotPalette = this.xychartLinePlotPalette || [ + adjust(this.primaryColor, { r: -100, g: -100, b: -100 }), + ]; + /* requirement-diagram */ this.requirementBackground = this.requirementBackground || this.primaryColor; this.requirementBorderColor = this.requirementBorderColor || this.primaryBorderColor; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53d735b02..2ab5d09a7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,8 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false importers: