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

Fixed directive related issue

Browse Source
This commit is contained in:
Subhash Halder
2023-09-02 21:15:21 +05:30
parent fc9ff6c6f3
commit 060d961f39
4 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
demos/xychart.html
View File

@@ -66,7 +66,7 @@
<h1>XY Charts demos</h1> <h1>XY Charts demos</h1>
<pre class="mermaid"> <pre class="mermaid">
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 600, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Basic xychart with many categories" title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7] x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]

8
docs/syntax/xyChart.md
View File

@@ -131,8 +131,8 @@ Every grammer are optional other than the chart name and one data set, so you wi
## Chart Theme Variables ## Chart Theme Variables
> **Note** > **Note**
> theames 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 |
| ---------------- | ------------------------------------------------------ | | ---------------- | ------------------------------------------------------ |
@@ -150,7 +150,7 @@ Every grammer are optional other than the chart name and one data set, so you wi
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
@@ -160,7 +160,7 @@ xychart-beta
``` ```
```mermaid ```mermaid
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]

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

@@ -27,10 +27,6 @@ import { getThemeVariables } from '../../themes/theme-default.js';
export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>; export type SVGGType = Selection<SVGGElement, unknown, Element | null, unknown>;
const defaultThemeVariables = getThemeVariables();
const config = configApi.getConfig();
let plotIndex = 0; let plotIndex = 0;
let tmpSVGGElem: SVGGType; let tmpSVGGElem: SVGGType;
@@ -48,12 +44,15 @@ interface NormalTextType {
} }
function getChartDefaultThemeConfig(): XYChartThemeConfig { function getChartDefaultThemeConfig(): XYChartThemeConfig {
const defaultThemeVariables = getThemeVariables();
const config = configApi.getConfig();
return { return {
...defaultThemeVariables.xyChart, ...defaultThemeVariables.xyChart,
...config.themeVariables?.xyChart, ...config.themeVariables?.xyChart,
}; };
} }
function getChartDefaultConfig(): XYChartConfig { function getChartDefaultConfig(): XYChartConfig {
const config = configApi.getConfig();
return { return {
...(defaultConfig.xyChart as XYChartConfig), ...(defaultConfig.xyChart as XYChartConfig),
...config.xyChart, ...config.xyChart,
@@ -87,6 +86,7 @@ function getChartDefalutData(): XYChartData {
} }
function textSanitizer(text: string) { function textSanitizer(text: string) {
const config = configApi.getConfig();
return sanitizeText(text.trim(), config); return sanitizeText(text.trim(), config);
} }

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

@@ -125,8 +125,8 @@ xychart-beta
## Chart Theme Variables ## Chart Theme Variables
```note ```note
theames 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 |
@@ -145,7 +145,7 @@ theames for xychart resides inside xychart attribute so to set the variables use
## Example on config and theme ## Example on config and theme
```mermaid-example ```mermaid-example
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%% %%{init: {"xyChart": {"width": 500, "height": 400}, "themeVariables": {"xyChart": {"titleColor": "#ff0000"} } }}%%
xychart-beta xychart-beta
title "Sales Revenue" title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]