marcel/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-09-12 20:09:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fixed more edge cases

Browse Source
This commit is contained in:
Subhash Halder
2023-09-03 20:48:10 +05:30
parent cc5190c1ba
commit c3a9bb9a23
16 changed files with 100 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demos/xychart.html
View File

@@ -92,6 +92,20 @@
bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99] bar "sample bar" [52, 96, 35, 10, 87, 34, 67, 99]
</pre> </pre>
<h1>sparkline demos</h1>
<pre class="mermaid">
%%{init: {"theme":"dark", "xyChart": { "width":200, "height": 20, "plotReservedSpacePercent": 100}}}%%
xychart-beta
line [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<h1>sparkBar demos</h1>
<pre class="mermaid">
%%{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}}}}%%
xychart-beta
bar [5000, 9000, 7500, 6200, 9500, 5500, 11000, 8200, 9200, 9500, 7000, 8800]
</pre>
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid"> <pre class="mermaid">
%%{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 }}}%% %%{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 }}}%%

27
docs/syntax/xyChart.md
View File

@@ -135,20 +135,19 @@ Every grammer are optional other than the chart name and one data set, so you wi
> Themes for xychart resides inside xychart attribute so to set the variables use this syntax > Themes for xychart resides inside xychart attribute so to set the variables use this syntax
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% > %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| Parameter | Description | | Parameter | Description |
| ---------------- | ------------------------------------------------------ | | ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart | | backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text | | titleColor | Color of the Title text |
| plotBorderColor | Color of the plot border | | xAxisLableColor | Color of the x-axis labels |
| xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title |
| xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick |
| xAxisTickColor | Color of the x-axis tick | | xAxisLineColor | Color of the x-axis line |
| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels |
| yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title |
| yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick |
| yAxisTickColor | Color of the y-axis tick | | yAxisLineColor | Color of the y-axis line |
| yAxisLineColor | Color of the y-axis line | | plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] |
## Example on config and theme ## Example on config and theme

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

@@ -8,12 +8,11 @@ export interface XYChartAxisThemeConfig {
export interface XYChartThemeConfig { export interface XYChartThemeConfig {
backgroundColor: string; backgroundColor: string;
titleColor: string; titleColor: string;
plotBorderColor: string; xAxisLabelColor: string;
xAxisLableColor: string;
xAxisTitleColor: string; xAxisTitleColor: string;
xAxisTickColor: string; xAxisTickColor: string;
xAxisLineColor: string; xAxisLineColor: string;
yAxisLableColor: string; yAxisLabelColor: string;
yAxisTitleColor: string; yAxisTitleColor: string;
yAxisTickColor: string; yAxisTickColor: string;
yAxisLineColor: string; yAxisLineColor: string;
@@ -120,7 +119,7 @@ export interface Point {
} }
export type TextHorizontalPos = 'left' | 'center' | 'right'; export type TextHorizontalPos = 'left' | 'center' | 'right';
export type TextVerticalPos = 'top' | 'middle' | 'bottom'; export type TextVerticalPos = 'top' | 'middle';
export interface RectElem extends Point { export interface RectElem extends Point {
width: number; width: number;

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

@@ -30,7 +30,7 @@ export class Orchestrator {
chartConfig.xAxis, chartConfig.xAxis,
{ {
titleColor: chartThemeConfig.xAxisTitleColor, titleColor: chartThemeConfig.xAxisTitleColor,
labelColor: chartThemeConfig.xAxisLableColor, labelColor: chartThemeConfig.xAxisLabelColor,
tickColor: chartThemeConfig.xAxisTickColor, tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor, axisLineColor: chartThemeConfig.xAxisLineColor,
}, },
@@ -41,7 +41,7 @@ export class Orchestrator {
chartConfig.yAxis, chartConfig.yAxis,
{ {
titleColor: chartThemeConfig.yAxisTitleColor, titleColor: chartThemeConfig.yAxisTitleColor,
labelColor: chartThemeConfig.yAxisLableColor, labelColor: chartThemeConfig.yAxisLabelColor,
tickColor: chartThemeConfig.yAxisTickColor, tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor, axisLineColor: chartThemeConfig.yAxisLineColor,
}, },
@@ -96,11 +96,6 @@ export class Orchestrator {
chartHeight += availableHeight; chartHeight += availableHeight;
availableHeight = 0; availableHeight = 0;
} }
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({ this.componentStore.plot.calculateSpace({
width: chartWidth, width: chartWidth,
height: chartHeight, height: chartHeight,
@@ -168,11 +163,6 @@ export class Orchestrator {
chartHeight += availableHeight; chartHeight += availableHeight;
availableHeight = 0; availableHeight = 0;
} }
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({ this.componentStore.plot.calculateSpace({
width: chartWidth, width: chartWidth,
height: chartHeight, height: chartHeight,

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

@@ -27,7 +27,7 @@ export class ChartTitle implements ChartComponent {
width: 0, width: 0,
height: 0, height: 0,
}; };
this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle); this.showChartTitle = false;
} }
setBoundingBoxXY(point: Point): void { setBoundingBoxXY(point: Point): void {
this.boundingRect.x = point.x; this.boundingRect.x = point.x;
@@ -43,10 +43,12 @@ export class ChartTitle implements ChartComponent {
if ( if (
titleDimension.width <= widthRequired && titleDimension.width <= widthRequired &&
titleDimension.height <= heightRequired && titleDimension.height <= heightRequired &&
this.showChartTitle this.chartConfig.showTitle &&
this.chartData.title
) { ) {
this.boundingRect.width = widthRequired; this.boundingRect.width = widthRequired;
this.boundingRect.height = heightRequired; this.boundingRect.height = heightRequired;
this.showChartTitle = true;
} }
return { return {
@@ -56,7 +58,7 @@ export class ChartTitle implements ChartComponent {
} }
getDrawableElements(): DrawableElem[] { getDrawableElements(): DrawableElem[] {
const drawableElem: DrawableElem[] = []; const drawableElem: DrawableElem[] = [];
if (this.boundingRect.height > 0 && this.boundingRect.width > 0) { if (this.showChartTitle) {
drawableElem.push({ drawableElem.push({
groupTexts: ['chart-title'], groupTexts: ['chart-title'],
type: 'text', type: 'text',

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

@@ -22,6 +22,8 @@ export abstract class BaseAxis implements Axis {
protected showTick = false; protected showTick = false;
protected showAxisLine = false; protected showAxisLine = false;
protected outerPadding = 0; protected outerPadding = 0;
protected titleTextHeight = 0;
protected labelTextHeight = 0;
constructor( constructor(
protected axisConfig: XYChartAxisConfig, protected axisConfig: XYChartAxisConfig,
@@ -93,6 +95,7 @@ export abstract class BaseAxis implements Axis {
this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding); this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding);
const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2; const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
this.labelTextHeight = spaceRequired.height;
log.trace('height required for axis label: ', heightRequired); log.trace('height required for axis label: ', heightRequired);
if (heightRequired <= availableHeight) { if (heightRequired <= availableHeight) {
availableHeight -= heightRequired; availableHeight -= heightRequired;
@@ -109,6 +112,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize this.axisConfig.titleFontSize
); );
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('height required for axis title: ', heightRequired); log.trace('height required for axis title: ', heightRequired);
if (heightRequired <= availableHeight) { if (heightRequired <= availableHeight) {
availableHeight -= heightRequired; availableHeight -= heightRequired;
@@ -146,6 +150,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize this.axisConfig.titleFontSize
); );
const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2; const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('width required for axis title: ', widthRequired); log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) { if (widthRequired <= availableWidth) {
availableWidth -= widthRequired; availableWidth -= widthRequired;
@@ -157,10 +162,6 @@ export abstract class BaseAxis implements Axis {
} }
calculateSpace(availableSpace: Dimension): Dimension { calculateSpace(availableSpace: Dimension): Dimension {
if (!(this.axisConfig.showLabel || this.axisConfig.showTitle)) {
this.recalculateScale();
return { width: 0, height: 0 };
}
if (this.axisPosition === 'left' || this.axisPosition === 'right') { if (this.axisPosition === 'left' || this.axisPosition === 'right') {
this.calculateSpaceIfDrawnVertical(availableSpace); this.calculateSpaceIfDrawnVertical(availableSpace);
} else { } else {
@@ -281,8 +282,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick), x: this.getScaleValue(tick),
y: y:
this.boundingRect.y + this.boundingRect.y +
(this.showLabel ? this.axisConfig.labelPadding : 0) + this.axisConfig.labelPadding +
(this.showTitle ? this.axisConfig.tickLength : 0) + (this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0), (this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
fill: this.axisThemeConfig.labelColor, fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize, fontSize: this.axisConfig.labelFontSize,
@@ -293,17 +294,13 @@ export abstract class BaseAxis implements Axis {
}); });
} }
if (this.showTick) { if (this.showTick) {
const y = this.boundingRect.y; const y = this.boundingRect.y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
drawableElement.push({ drawableElement.push({
type: 'path', type: 'path',
groupTexts: ['bottom-axis', 'ticks'], groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({ data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${ path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${
y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) y + this.axisConfig.tickLength
} L ${this.getScaleValue(tick)},${
y +
(this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
}`, }`,
strokeFill: this.axisThemeConfig.tickColor, strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth, strokeWidth: this.axisConfig.tickWidth,
@@ -318,11 +315,15 @@ export abstract class BaseAxis implements Axis {
{ {
text: this.title, text: this.title,
x: this.range[0] + (this.range[1] - this.range[0]) / 2, x: this.range[0] + (this.range[1] - this.range[0]) / 2,
y: this.boundingRect.y + this.boundingRect.height - this.axisConfig.titlePadding, y:
this.boundingRect.y +
this.boundingRect.height -
this.axisConfig.titlePadding -
this.titleTextHeight,
fill: this.axisThemeConfig.titleColor, fill: this.axisThemeConfig.titleColor,
fontSize: this.axisConfig.titleFontSize, fontSize: this.axisConfig.titleFontSize,
rotation: 0, rotation: 0,
verticalPos: 'bottom', verticalPos: 'top',
horizontalPos: 'center', horizontalPos: 'center',
}, },
], ],
@@ -357,11 +358,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick), x: this.getScaleValue(tick),
y: y:
this.boundingRect.y + this.boundingRect.y +
(this.showTitle (this.showTitle ? this.titleTextHeight + this.axisConfig.titlePadding * 2 : 0) +
? this.axisConfig.titleFontSize + this.axisConfig.labelPadding,
this.axisConfig.labelPadding +
this.axisConfig.titlePadding * 2
: 0),
fill: this.axisThemeConfig.labelColor, fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize, fontSize: this.axisConfig.labelFontSize,
rotation: 0, rotation: 0,
@@ -374,7 +372,7 @@ export abstract class BaseAxis implements Axis {
const y = this.boundingRect.y; const y = this.boundingRect.y;
drawableElement.push({ drawableElement.push({
type: 'path', type: 'path',
groupTexts: ['bottom-axis', 'ticks'], groupTexts: ['top-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({ data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${ path: `M ${this.getScaleValue(tick)},${
y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0) y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
@@ -392,7 +390,7 @@ export abstract class BaseAxis implements Axis {
if (this.showTitle) { if (this.showTitle) {
drawableElement.push({ drawableElement.push({
type: 'text', type: 'text',
groupTexts: ['bottom-axis', 'title'], groupTexts: ['top-axis', 'title'],
data: [ data: [
{ {
text: this.title, text: this.title,

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

@@ -1,49 +0,0 @@
import type {
BoundingRect,
DrawableElem,
XYChartConfig,
XYChartThemeConfig,
} from '../../Interfaces.js';
export class PlotBorder {
constructor(
private boundingRect: BoundingRect,
private orientation: XYChartConfig['chartOrientation'],
private chartThemeConfig: XYChartThemeConfig
) {}
getDrawableElement(): DrawableElem[] {
const { x, y, width, height } = this.boundingRect;
if (this.orientation === 'horizontal') {
return [
{
groupTexts: ['plot', 'chart-border'],
type: 'path',
data: [
{
path: `M ${x},${y} L ${x + width},${y} M ${x + width},${y + height} M ${x},${
y + height
} L ${x},${y}`,
strokeFill: this.chartThemeConfig.plotBorderColor,
strokeWidth: 1,
},
],
},
];
}
return [
{
groupTexts: ['plot', 'chart-border'],
type: 'path',
data: [
{
path: `M ${x},${y} M ${x + width},${y} M ${x + width},${y + height} L ${x},${
y + height
} L ${x},${y}`,
strokeFill: this.chartThemeConfig.plotBorderColor,
strokeWidth: 1,
},
],
},
];
}
}

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

@@ -10,7 +10,6 @@ import type {
import type { Axis } from '../axis/index.js'; import type { Axis } from '../axis/index.js';
import type { ChartComponent } from '../../Interfaces.js'; import type { ChartComponent } from '../../Interfaces.js';
import { LinePlot } from './LinePlot.js'; import { LinePlot } from './LinePlot.js';
import { PlotBorder } from './PlotBorder.js';
import { BarPlot } from './BarPlot.js'; import { BarPlot } from './BarPlot.js';
export interface Plot extends ChartComponent { export interface Plot extends ChartComponent {
@@ -55,13 +54,7 @@ export class Plot implements Plot {
if (!(this.xAxis && this.yAxis)) { if (!(this.xAxis && this.yAxis)) {
throw Error('Axes must be passed to render Plots'); throw Error('Axes must be passed to render Plots');
} }
const drawableElem: DrawableElem[] = [ const drawableElem: DrawableElem[] = [];
// ...new PlotBorder(
// this.boundingRect,
// this.chartConfig.chartOrientation,
// this.chartThemeConfig
// ).getDrawableElement(),
];
for (const [i, plot] of this.chartData.plots.entries()) { for (const [i, plot] of this.chartData.plots.entries()) {
switch (plot.type) { switch (plot.type) {
case 'line': case 'line':

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

@@ -34,7 +34,7 @@ let tmpSVGGElem: SVGGType;
let xyChartConfig: XYChartConfig = getChartDefaultConfig(); let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig(); let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
let xyChartData: XYChartData = getChartDefalutData(); let xyChartData: XYChartData = getChartDefalutData();
let plotColorPalette = xyChartThemeConfig.plotColorPalette; let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
let hasSetXAxis = false; let hasSetXAxis = false;
let hasSetYAxis = false; let hasSetYAxis = false;
@@ -175,7 +175,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
} }
function getPlotColorFromPalette(plotIndex: number): string { function getPlotColorFromPalette(plotIndex: number): string {
return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % (plotColorPalette.length - 1)]; return plotColorPalette[plotIndex === 0 ? 0 : plotIndex % plotColorPalette.length];
} }
function setLineData(title: NormalTextType, data: number[]) { function setLineData(title: NormalTextType, data: number[]) {
@@ -221,7 +221,7 @@ const clear = function () {
xyChartConfig = getChartDefaultConfig(); xyChartConfig = getChartDefaultConfig();
xyChartData = getChartDefalutData(); xyChartData = getChartDefalutData();
xyChartThemeConfig = getChartDefaultThemeConfig(); xyChartThemeConfig = getChartDefaultThemeConfig();
plotColorPalette = xyChartThemeConfig.plotColorPalette; plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
hasSetXAxis = false; hasSetXAxis = false;
hasSetYAxis = false; hasSetYAxis = false;
}; };

6
packages/mermaid/src/diagrams/xychart/xychartRenderer.ts
View File

@@ -15,11 +15,7 @@ export const draw = (txt: string, id: string, _version: string, diagObj: Diagram
const themeConfig = db.getChartThemeConfig(); const themeConfig = db.getChartThemeConfig();
const chartConfig = db.getChartConfig(); const chartConfig = db.getChartConfig();
function getDominantBaseLine(horizontalPos: TextVerticalPos) { function getDominantBaseLine(horizontalPos: TextVerticalPos) {
return horizontalPos === 'top' return horizontalPos === 'top' ? 'text-before-edge' : 'middle';
? 'text-before-edge'
: horizontalPos === 'bottom'
? 'text-after-edge'
: 'middle';
} }
function getTextAnchor(verticalPos: TextHorizontalPos) { function getTextAnchor(verticalPos: TextHorizontalPos) {

27
packages/mermaid/src/docs/syntax/xyChart.md
View File

@@ -130,20 +130,19 @@ Themes for xychart resides inside xychart attribute so to set the variables use
%%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%% %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
``` ```
| Parameter | Description | | Parameter | Description |
| ---------------- | ----------------------------------------------------- | | ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart | | backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text | | titleColor | Color of the Title text |
| plotBorderColor | Color of the plot border | | xAxisLableColor | Color of the x-axis labels |
| xAxisLableColor | Color of the x-axis labels | | xAxisTitleColor | Color of the x-axis title |
| xAxisTitleColor | Color of the x-axis title | | xAxisTickColor | Color of the x-axis tick |
| xAxisTickColor | Color of the x-axis tick | | xAxisLineColor | Color of the x-axis line |
| xAxisLineColor | Color of the x-axis line | | yAxisLableColor | Color of the y-axis labels |
| yAxisLableColor | Color of the y-axis labels | | yAxisTitleColor | Color of the y-axis title |
| yAxisTitleColor | Color of the y-axis title | | yAxisTickColor | Color of the y-axis tick |
| yAxisTickColor | Color of the y-axis tick | | yAxisLineColor | Color of the y-axis line |
| yAxisLineColor | Color of the y-axis line | | plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] |
## Example on config and theme ## Example on config and theme

20
packages/mermaid/src/themes/theme-base.js
View File

@@ -249,27 +249,17 @@ class Theme {
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor, titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette:
'#FFF4DD', this.xyChart?.plotColorPalette ||
'#FFD8B1', '#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
'#FFA07A',
'#ECEFF1',
'#D6DBDF',
'#C3E0A8',
'#FFB6A4',
'#FFD74D',
'#738FA7',
'#FFFFF0',
],
}; };
/* requirement-diagram */ /* requirement-diagram */

20
packages/mermaid/src/themes/theme-dark.js
View File

@@ -255,27 +255,17 @@ class Theme {
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor, titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette:
'#3498db', this.xyChart?.plotColorPalette ||
'#2ecc71', '#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22',
'#e74c3c',
'#f1c40f',
'#bdc3c7',
'#ffffff',
'#34495e',
'#9b59b6',
'#1abc9c',
'#e67e22',
],
}; };
/* class */ /* class */

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

@@ -276,27 +276,17 @@ class Theme {
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor, titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette:
'#ECECFF', this.xyChart?.plotColorPalette ||
'#8493A6', '#ECECFF,#8493A6,#FFC3A0,#DCDDE1,#B8E994,#D1A36F,#C3CDE6,#FFB6C1,#496078,#F8F3E3',
'#FFC3A0',
'#DCDDE1',
'#B8E994',
'#D1A36F',
'#C3CDE6',
'#FFB6C1',
'#496078',
'#F8F3E3',
],
}; };
/* requirement-diagram */ /* requirement-diagram */

20
packages/mermaid/src/themes/theme-forest.js
View File

@@ -244,27 +244,17 @@ class Theme {
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor, titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette:
'#CDE498', this.xyChart?.plotColorPalette ||
'#FF6B6B', '#CDE498,#FF6B6B,#A0D2DB,#D7BDE2,#F0F0F0,#FFC3A0,#7FD8BE,#FF9A8B,#FAF3E0,#FFF176',
'#A0D2DB',
'#D7BDE2',
'#F0F0F0',
'#FFC3A0',
'#7FD8BE',
'#FF9A8B',
'#FAF3E0',
'#FFF176',
],
}; };
/* requirement-diagram */ /* requirement-diagram */

20
packages/mermaid/src/themes/theme-neutral.js
View File

@@ -275,27 +275,17 @@ class Theme {
this.xyChart = { this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background, backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor, titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor, xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor, xAxisLabelColor: this.xyChart?.xAxisLabelColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor, xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,
xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor, xAxisLineColor: this.xyChart?.xAxisLineColor || this.primaryTextColor,
yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor, yAxisTitleColor: this.xyChart?.yAxisTitleColor || this.primaryTextColor,
yAxisLableColor: this.xyChart?.yAxisLableColor || this.primaryTextColor, yAxisLabelColor: this.xyChart?.yAxisLabelColor || this.primaryTextColor,
yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor, yAxisTickColor: this.xyChart?.yAxisTickColor || this.primaryTextColor,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor, yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [ plotColorPalette:
'#EEE', this.xyChart?.plotColorPalette ||
'#6BB8E4', '#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0',
'#8ACB88',
'#C7ACD6',
'#E8DCC2',
'#FFB2A8',
'#FFF380',
'#7E8D91',
'#FFD8B1',
'#FAF3E0',
],
}; };
/* requirement-diagram */ /* requirement-diagram */