GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-01-14 06:43:25 +08:00
Code Issues 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
Show Stats 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]
</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>
<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 }}}%%

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
> %%{init: { "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
| Parameter | Description |
| ---------------- | ------------------------------------------------------ |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| plotBorderColor | Color of the plot border |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] |
| Parameter | Description |
| ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
## 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 {
backgroundColor: string;
titleColor: string;
plotBorderColor: string;
xAxisLableColor: string;
xAxisLabelColor: string;
xAxisTitleColor: string;
xAxisTickColor: string;
xAxisLineColor: string;
yAxisLableColor: string;
yAxisLabelColor: string;
yAxisTitleColor: string;
yAxisTickColor: string;
yAxisLineColor: string;
@ -120,7 +119,7 @@ export interface Point {
}
export type TextHorizontalPos = 'left' | 'center' | 'right';
export type TextVerticalPos = 'top' | 'middle' | 'bottom';
export type TextVerticalPos = 'top' | 'middle';
export interface RectElem extends Point {
width: number;

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

@ -30,7 +30,7 @@ export class Orchestrator {
chartConfig.xAxis,
{
titleColor: chartThemeConfig.xAxisTitleColor,
labelColor: chartThemeConfig.xAxisLableColor,
labelColor: chartThemeConfig.xAxisLabelColor,
tickColor: chartThemeConfig.xAxisTickColor,
axisLineColor: chartThemeConfig.xAxisLineColor,
},
@ -41,7 +41,7 @@ export class Orchestrator {
chartConfig.yAxis,
{
titleColor: chartThemeConfig.yAxisTitleColor,
labelColor: chartThemeConfig.yAxisLableColor,
labelColor: chartThemeConfig.yAxisLabelColor,
tickColor: chartThemeConfig.yAxisTickColor,
axisLineColor: chartThemeConfig.yAxisLineColor,
},
@ -96,11 +96,6 @@ export class Orchestrator {
chartHeight += availableHeight;
availableHeight = 0;
}
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({
width: chartWidth,
height: chartHeight,
@ -168,11 +163,6 @@ export class Orchestrator {
chartHeight += availableHeight;
availableHeight = 0;
}
// const plotBorderWidthHalf = this.chartConfig.plotBorderWidth / 2;
// plotX += plotBorderWidthHalf;
// plotY += plotBorderWidthHalf;
// chartWidth -= this.chartConfig.plotBorderWidth;
// chartHeight -= this.chartConfig.plotBorderWidth;
this.componentStore.plot.calculateSpace({
width: chartWidth,
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,
height: 0,
};
this.showChartTitle = !!(this.chartData.title && this.chartConfig.showTitle);
this.showChartTitle = false;
}
setBoundingBoxXY(point: Point): void {
this.boundingRect.x = point.x;
@ -43,10 +43,12 @@ export class ChartTitle implements ChartComponent {
if (
titleDimension.width <= widthRequired &&
titleDimension.height <= heightRequired &&
this.showChartTitle
this.chartConfig.showTitle &&
this.chartData.title
) {
this.boundingRect.width = widthRequired;
this.boundingRect.height = heightRequired;
this.showChartTitle = true;
}
return {
@ -56,7 +58,7 @@ export class ChartTitle implements ChartComponent {
}
getDrawableElements(): DrawableElem[] {
const drawableElem: DrawableElem[] = [];
if (this.boundingRect.height > 0 && this.boundingRect.width > 0) {
if (this.showChartTitle) {
drawableElem.push({
groupTexts: ['chart-title'],
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 showAxisLine = false;
protected outerPadding = 0;
protected titleTextHeight = 0;
protected labelTextHeight = 0;
constructor(
protected axisConfig: XYChartAxisConfig,
@ -93,6 +95,7 @@ export abstract class BaseAxis implements Axis {
this.outerPadding = Math.min(spaceRequired.width / 2, maxPadding);
const heightRequired = spaceRequired.height + this.axisConfig.labelPadding * 2;
this.labelTextHeight = spaceRequired.height;
log.trace('height required for axis label: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
@ -109,6 +112,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize
);
const heightRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('height required for axis title: ', heightRequired);
if (heightRequired <= availableHeight) {
availableHeight -= heightRequired;
@ -146,6 +150,7 @@ export abstract class BaseAxis implements Axis {
this.axisConfig.titleFontSize
);
const widthRequired = spaceRequired.height + this.axisConfig.titlePadding * 2;
this.titleTextHeight = spaceRequired.height;
log.trace('width required for axis title: ', widthRequired);
if (widthRequired <= availableWidth) {
availableWidth -= widthRequired;
@ -157,10 +162,6 @@ export abstract class BaseAxis implements Axis {
}
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') {
this.calculateSpaceIfDrawnVertical(availableSpace);
} else {
@ -281,8 +282,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick),
y:
this.boundingRect.y +
(this.showLabel ? this.axisConfig.labelPadding : 0) +
(this.showTitle ? this.axisConfig.tickLength : 0) +
this.axisConfig.labelPadding +
(this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0),
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
@ -293,17 +294,13 @@ export abstract class BaseAxis implements Axis {
});
}
if (this.showTick) {
const y = this.boundingRect.y;
const y = this.boundingRect.y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0);
drawableElement.push({
type: 'path',
groupTexts: ['bottom-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${
y + (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
} L ${this.getScaleValue(tick)},${
y +
(this.showTick ? this.axisConfig.tickLength : 0) +
(this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
path: `M ${this.getScaleValue(tick)},${y} L ${this.getScaleValue(tick)},${
y + this.axisConfig.tickLength
}`,
strokeFill: this.axisThemeConfig.tickColor,
strokeWidth: this.axisConfig.tickWidth,
@ -318,11 +315,15 @@ export abstract class BaseAxis implements Axis {
{
text: this.title,
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,
fontSize: this.axisConfig.titleFontSize,
rotation: 0,
verticalPos: 'bottom',
verticalPos: 'top',
horizontalPos: 'center',
},
],
@ -357,11 +358,8 @@ export abstract class BaseAxis implements Axis {
x: this.getScaleValue(tick),
y:
this.boundingRect.y +
(this.showTitle
? this.axisConfig.titleFontSize +
this.axisConfig.labelPadding +
this.axisConfig.titlePadding * 2
: 0),
(this.showTitle ? this.titleTextHeight + this.axisConfig.titlePadding * 2 : 0) +
this.axisConfig.labelPadding,
fill: this.axisThemeConfig.labelColor,
fontSize: this.axisConfig.labelFontSize,
rotation: 0,
@ -374,7 +372,7 @@ export abstract class BaseAxis implements Axis {
const y = this.boundingRect.y;
drawableElement.push({
type: 'path',
groupTexts: ['bottom-axis', 'ticks'],
groupTexts: ['top-axis', 'ticks'],
data: this.getTickValues().map((tick) => ({
path: `M ${this.getScaleValue(tick)},${
y + this.boundingRect.height - (this.showAxisLine ? this.axisConfig.axisLineWidth : 0)
@ -392,7 +390,7 @@ export abstract class BaseAxis implements Axis {
if (this.showTitle) {
drawableElement.push({
type: 'text',
groupTexts: ['bottom-axis', 'title'],
groupTexts: ['top-axis', 'title'],
data: [
{
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 { ChartComponent } from '../../Interfaces.js';
import { LinePlot } from './LinePlot.js';
import { PlotBorder } from './PlotBorder.js';
import { BarPlot } from './BarPlot.js';
export interface Plot extends ChartComponent {
@ -55,13 +54,7 @@ export class Plot implements Plot {
if (!(this.xAxis && this.yAxis)) {
throw Error('Axes must be passed to render Plots');
}
const drawableElem: DrawableElem[] = [
// ...new PlotBorder(
// this.boundingRect,
// this.chartConfig.chartOrientation,
// this.chartThemeConfig
// ).getDrawableElement(),
];
const drawableElem: DrawableElem[] = [];
for (const [i, plot] of this.chartData.plots.entries()) {
switch (plot.type) {
case 'line':

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

@ -34,7 +34,7 @@ let tmpSVGGElem: SVGGType;
let xyChartConfig: XYChartConfig = getChartDefaultConfig();
let xyChartThemeConfig: XYChartThemeConfig = getChartDefaultThemeConfig();
let xyChartData: XYChartData = getChartDefalutData();
let plotColorPalette = xyChartThemeConfig.plotColorPalette;
let plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
let hasSetXAxis = false;
let hasSetYAxis = false;
@ -175,7 +175,7 @@ function transformDataWithoutCategory(data: number[]): SimplePlotDataType {
}
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[]) {
@ -221,7 +221,7 @@ const clear = function () {
xyChartConfig = getChartDefaultConfig();
xyChartData = getChartDefalutData();
xyChartThemeConfig = getChartDefaultThemeConfig();
plotColorPalette = xyChartThemeConfig.plotColorPalette;
plotColorPalette = xyChartThemeConfig.plotColorPalette.split(',').map((color) => color.trim());
hasSetXAxis = 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 chartConfig = db.getChartConfig();
function getDominantBaseLine(horizontalPos: TextVerticalPos) {
return horizontalPos === 'top'
? 'text-before-edge'
: horizontalPos === 'bottom'
? 'text-after-edge'
: 'middle';
return horizontalPos === 'top' ? 'text-before-edge' : 'middle';
}
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"} } }}%%
```
| Parameter | Description |
| ---------------- | ----------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| plotBorderColor | Color of the plot border |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] |
| Parameter | Description |
| ---------------- | ------------------------------------------------------- |
| backgroundColor | Background color of the whole chart |
| titleColor | Color of the Title text |
| xAxisLableColor | Color of the x-axis labels |
| xAxisTitleColor | Color of the x-axis title |
| xAxisTickColor | Color of the x-axis tick |
| xAxisLineColor | Color of the x-axis line |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| yAxisLineColor | Color of the y-axis line |
| plotColorPalette | String of colors seperated by comma eg "#f3456, #43445" |
## Example on config and theme

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

@ -249,27 +249,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || 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,
xAxisLineColor: this.xyChart?.xAxisLineColor || 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,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#FFF4DD',
'#FFD8B1',
'#FFA07A',
'#ECEFF1',
'#D6DBDF',
'#C3E0A8',
'#FFB6A4',
'#FFD74D',
'#738FA7',
'#FFFFF0',
],
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#FFF4DD,#FFD8B1,#FFA07A,#ECEFF1,#D6DBDF,#C3E0A8,#FFB6A4,#FFD74D,#738FA7,#FFFFF0',
};
/* requirement-diagram */

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

@ -255,27 +255,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || 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,
xAxisLineColor: this.xyChart?.xAxisLineColor || 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,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#3498db',
'#2ecc71',
'#e74c3c',
'#f1c40f',
'#bdc3c7',
'#ffffff',
'#34495e',
'#9b59b6',
'#1abc9c',
'#e67e22',
],
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#3498db,#2ecc71,#e74c3c,#f1c40f,#bdc3c7,#ffffff,#34495e,#9b59b6,#1abc9c,#e67e22',
};
/* class */

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

@ -276,27 +276,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || 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,
xAxisLineColor: this.xyChart?.xAxisLineColor || 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,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#ECECFF',
'#8493A6',
'#FFC3A0',
'#DCDDE1',
'#B8E994',
'#D1A36F',
'#C3CDE6',
'#FFB6C1',
'#496078',
'#F8F3E3',
],
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#ECECFF,#8493A6,#FFC3A0,#DCDDE1,#B8E994,#D1A36F,#C3CDE6,#FFB6C1,#496078,#F8F3E3',
};
/* requirement-diagram */

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

@ -244,27 +244,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || 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,
xAxisLineColor: this.xyChart?.xAxisLineColor || 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,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#CDE498',
'#FF6B6B',
'#A0D2DB',
'#D7BDE2',
'#F0F0F0',
'#FFC3A0',
'#7FD8BE',
'#FF9A8B',
'#FAF3E0',
'#FFF176',
],
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#CDE498,#FF6B6B,#A0D2DB,#D7BDE2,#F0F0F0,#FFC3A0,#7FD8BE,#FF9A8B,#FAF3E0,#FFF176',
};
/* requirement-diagram */

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

@ -275,27 +275,17 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || 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,
xAxisLineColor: this.xyChart?.xAxisLineColor || 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,
yAxisLineColor: this.xyChart?.yAxisLineColor || this.primaryTextColor,
plotColorPalette: this.xyChart?.plotColorPalette || [
'#EEE',
'#6BB8E4',
'#8ACB88',
'#C7ACD6',
'#E8DCC2',
'#FFB2A8',
'#FFF380',
'#7E8D91',
'#FFD8B1',
'#FAF3E0',
],
plotColorPalette:
this.xyChart?.plotColorPalette ||
'#EEE,#6BB8E4,#8ACB88,#C7ACD6,#E8DCC2,#FFB2A8,#FFF380,#7E8D91,#FFD8B1,#FAF3E0',
};
/* requirement-diagram */