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

Added documentations

Browse Source
This commit is contained in:
Subhash Halder
2023-09-02 20:48:11 +05:30
parent e0418eb661
commit fc9ff6c6f3
15 changed files with 375 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/xychart.html
View File

@@ -57,9 +57,17 @@
bar "sample bat" [52, 96, 35, 10]
</pre>
<hr />
<h1>XY Charts demos</h1>
<pre class="mermaid">
xychart-beta
line [+1.3, .6, 2.4, -.34]
</pre>
<h1>XY Charts demos</h1>
<pre class="mermaid">
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Basic xychart with many categories"
x-axis "this is x axis" [category1, "category 2", category3, category4, category5, category6, category7]
y-axis yaxisText 10 --> 150

20
docs/intro/index.md
View File

@@ -282,6 +282,26 @@ quadrantChart
Campaign F: [0.35, 0.78]
```
### [XY Chart](../syntax/xyChart.md)
```mermaid-example
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
## Installation
**In depth guides and examples can be found at [Getting Started](./getting-started.md) and [Usage](../config/usage.md).**

170
docs/syntax/xyChart.md Normal file
View File

@@ -0,0 +1,170 @@
> **Warning**
>
> ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT.
>
> ## Please edit the corresponding file in [/packages/mermaid/src/docs/syntax/xyChart.md](../../packages/mermaid/src/docs/syntax/xyChart.md).
# XY Chart
> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
## Example
```mermaid-example
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
```mermaid
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
## Syntax
> **Note**
> all text values can be single word without ", if multiple line required we have to use ".
### Orientations
The chart can be drawn horizontal or vertical, default value is vertical
xychart-beta horizontal
...
### Title
The title is a short description of the chart and it will always render on top of the chart.
#### Example
xychart-beta
title "This is a sample example"
...
> **Note**
> if the title single word no need to use ", but if it has space " is needed
### x-axis
The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
#### Example
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
### y-axis
The y-axis is employed to represent numerical range values, it can't have categorical values.
#### Example
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
> **Note**
> Both x and y axis are optional if not provided we will try to create the range
### Line chart
A line chart offers the capability to graphically depict lines.
#### Example
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
### Bar chart
A bar chart offers the capability to graphically depict bars.
#### Example
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
#### Simplest example
Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like
xychart-beta
line [+1.3, .6, 2.4, -.34]
## Chart Configurations
| Parameter | Description | Default value |
| ------------------------ | ---------------------------------------------- | :-----------: |
| width | Width of the chart | 700 |
| height | Height of the chart | 500 |
| titlePadding | Top and Bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig
| Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
## Chart Theme Variables
> **Note**
> theames 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 |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| plotColorPalette | Array of colors for the plots eg \["#f3456", "#43445"] |
## Example on config and theme
```mermaid-example
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
```mermaid
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

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

@@ -763,10 +763,6 @@ export interface XYChartConfig extends BaseDiagramConfig {
* height of the chart
*/
height?: number;
/**
* Font family of texts in the xyChart
*/
fontFamily?: string;
/**
* Font size of the chart title
*/

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

@@ -7,7 +7,7 @@ export interface XYChartAxisThemeConfig {
export interface XYChartThemeConfig {
backgroundColor: string;
titleColor: string;
axisLineColor: string;
plotBorderColor: string;
xAxisLableColor: string;
xAxisTitleColor: string;
xAxisTickColor: string;
@@ -86,7 +86,6 @@ export interface XYChartAxisConfig {
export interface XYChartConfig {
width: number;
height: number;
fontFamily: string;
titleFontSize: number;
titlePadding: number;
showTitle: boolean;

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

@@ -23,7 +23,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: this.chartThemeConfig.axisLineColor,
strokeFill: this.chartThemeConfig.plotBorderColor,
strokeWidth: 1,
},
],
@@ -39,7 +39,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: this.chartThemeConfig.axisLineColor,
strokeFill: this.chartThemeConfig.plotBorderColor,
strokeWidth: 1,
},
],

1
packages/mermaid/src/docs/.vitepress/config.ts
View File

@@ -146,6 +146,7 @@ function sidebarSyntax() {
{ text: 'Timeline 🔥', link: '/syntax/timeline' },
{ text: 'Zenuml 🔥', link: '/syntax/zenuml' },
{ text: 'Sankey 🔥', link: '/syntax/sankey' },
{ text: 'XYChart 🔥', link: '/syntax/xychart' },
{ text: 'Other Examples', link: '/syntax/examples' },
],
},

11
packages/mermaid/src/docs/intro/examples.md
View File

@@ -117,3 +117,14 @@ quadrantChart
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
```
### [XY Chart](../syntax/xyChart.md)
```mermaid-example
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

155
packages/mermaid/src/docs/syntax/xyChart.md Normal file
View File

@@ -0,0 +1,155 @@
# XY Chart
> In the context of mermaid-js, the XY chart is a comprehensive charting module that encompasses various types of charts that utilize both x-axis and y-axis for data representation. Presently, it includes two fundamental chart types: the bar chart and the line chart. These charts are designed to visually display and analyze data that involve two numerical variables.
> It's important to note that while the current implementation of mermaid-js includes these two chart types, the framework is designed to be dynamic and adaptable. Therefore, it has the capacity for expansion and the inclusion of additional chart types in the future. This means that users can expect an evolving suite of charting options within the XY chart module, catering to various data visualization needs as new chart types are introduced over time.
## Example
```mermaid-example
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```
## Syntax
```note
all text values can be single word without ", if multiple line required we have to use ".
```
### Orientations
The chart can be drawn horizontal or vertical, default value is vertical
```
xychart-beta horizontal
...
```
### Title
The title is a short description of the chart and it will always render on top of the chart.
#### Example
```
xychart-beta
title "This is a sample example"
...
```
```note
if the title single word no need to use ", but if it has space " is needed
```
### x-axis
The x-axis primarily serves as a categorical value, although it can also function as a numeric range value when needed.
#### Example
1. `x-axis title min --> max` x-axis will function as numeric with the given range
2. `x-axis "title with space" [cat1, "cat2 with space", cat3]` x-axis if categorical, categories are text type
### y-axis
The y-axis is employed to represent numerical range values, it can't have categorical values.
#### Example
1. `y-axis title min --> max`
2. `y-axis title` it will only add the title, the range will be auto generated from data.
```note
Both x and y axis are optional if not provided we will try to create the range
```
### Line chart
A line chart offers the capability to graphically depict lines.
#### Example
1. `line [2.3, 45, .98, -3.4]` it can have all valid numeric values.
### Bar chart
A bar chart offers the capability to graphically depict bars.
#### Example
1. `bar [2.3, 45, .98, -3.4]` it can have all valid numeric values.
#### Simplest example
Every grammer are optional other than the chart name and one data set, so you will be able to draw a chart will a simple config like
```
xychart-beta
line [+1.3, .6, 2.4, -.34]
```
## Chart Configurations
| Parameter | Description | Default value |
| ------------------------ | ---------------------------------------------- | :-----------: |
| width | Width of the chart | 700 |
| height | Height of the chart | 500 |
| titlePadding | Top and Bottom padding of the title | 10 |
| titleFontSize | Title font size | 20 |
| showTitle | Title to be shown or not | true |
| xAxis | xAxis configuration | AxisConfig |
| yAxis | yAxis configuration | AxisConfig |
| plotBorderWidth | Width of the border around the plot | 2 |
| chartOrientation | ('vertical' or 'horizontal') | 'vertical' |
| plotReservedSpacePercent | Minimum space plots will take inside the chart | 50 |
### AxisConfig
| Parameter | Description | Default value |
| ------------- | -------------------------------------------- | :-----------: |
| showLabel | Show axis labels or tick values | true |
| labelFontSize | Font size of the label to be drawn | 14 |
| labelPadding | Top and Bottom padding of the label | 5 |
| showTitle | Axis title to be shown or not | true |
| titleFontSize | Axis title font size | 16 |
| titlePadding | Top and Bottom padding of Axis title | 5 |
| showTick | Tick along with the label to be shown or not | true |
| tickLength | How long the tick will be | 5 |
| tickWidth | How width the tick will be | 2 |
## Chart Theme Variables
```note
theames 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 |
| yAxisLableColor | Color of the y-axis labels |
| yAxisTitleColor | Color of the y-axis title |
| yAxisTickColor | Color of the y-axis tick |
| plotColorPalette | Array of colors for the plots eg ["#f3456", "#43445"] |
## Example on config and theme
```mermaid-example
%%{init: {"xychart": {"width": 500, "height": 400}, "themeVariables": {"xychart": {"titleColor": "#ff0000"} } }}%%
xychart-beta
title "Sales Revenue"
x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
y-axis "Revenue (in $)" 4000 --> 11000
bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
```

9
packages/mermaid/src/schemas/config.schema.yaml
View File

@@ -1052,7 +1052,6 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
required:
- width
- height
- fontFamily
- titleFontSize
- titlePadding
- xAxis
@@ -1072,19 +1071,15 @@ $defs: # JSON Schema definition (maybe we should move these to a seperate file)
type: integer
default: 500
minimum: 1
fontFamily:
description: Font family of texts in the xyChart
type: string
default: '"trebuchet ms", verdana, arial, sans-serif'
titleFontSize:
description: Font size of the chart title
type: integer
default: 16
default: 20
minimum: 1
titlePadding:
description: Top and bottom space from the chart title
type: integer
default: 5
default: 10
minimum: 0
showTitle:
description: Should show the chart title

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

@@ -249,7 +249,7 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,

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

@@ -255,7 +255,7 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,

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

@@ -276,7 +276,7 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,

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

@@ -244,7 +244,7 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,

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

@@ -275,7 +275,7 @@ class Theme {
this.xyChart = {
backgroundColor: this.xyChart?.backgroundColor || this.background,
titleColor: this.xyChart?.titleColor || this.primaryTextColor,
axisLineColor: this.xyChart?.axisLineColor || this.primaryTextColor,
plotBorderColor: this.xyChart?.plotBorderColor || this.primaryTextColor,
xAxisTitleColor: this.xyChart?.xAxisTitleColor || this.primaryTextColor,
xAxisLableColor: this.xyChart?.xAxisLableColor || this.primaryTextColor,
xAxisTickColor: this.xyChart?.xAxisTickColor || this.primaryTextColor,