mirrors
/
mermaid
mirror of https://github.com/mermaid-js/mermaid.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Introduced theme config to configure cosmetics

This commit is contained in:
Subhash Halder 2023-07-19 22:41:41 +05:30
parent 5fd4ca2d41
commit c38cdcf2b2
16 changed files with 230 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
packages/mermaid/src/config.type.ts
View File

@ -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<FontConfig>;
* 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 <https://github.com/d3/d3-sankey#alignments>.
*
*/
nodeAlignment?: "left" | "right" | "center" | "justify";
nodeAlignment?: 'left' | 'right' | 'center' | 'justify';
useMaxWidth?: boolean;
}
/**

19
packages/mermaid/src/diagrams/xychart/chartBuilder/Interfaces.ts
View File

@ -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;

34
packages/mermaid/src/diagrams/xychart/chartBuilder/Orchestrator.ts
View File

@ -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
),
};
}

11
packages/mermaid/src/diagrams/xychart/chartBuilder/components/ChartTitle.ts
View File

@ -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);
}

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

@ -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<string>;
@ -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());
}

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

@ -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',

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

@ -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<number, number>;
@ -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());
}

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

@ -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
);
}

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

@ -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[] {

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

@ -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[] {

9
packages/mermaid/src/diagrams/xychart/chartBuilder/components/plot/PlotBorder.ts
View File

@ -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,
},
],

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

@ -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);
}

11
packages/mermaid/src/diagrams/xychart/chartBuilder/index.ts
View File

@ -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();
}
}

49
packages/mermaid/src/diagrams/xychart/xychartDb.ts
View File

@ -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;
};

15
packages/mermaid/src/themes/theme-default.js
View File

@ -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;

6
pnpm-lock.yaml
View File

@ -1,4 +1,8 @@
lockfileVersion: '6.0'
lockfileVersion: '6.1'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
importers: