fix: prevent pie chart crash on zero or negative values

This commit is contained in:
darshanr0107
2025-06-12 18:13:11 +05:30
parent 8a703bd09f
commit 83b9a17277
6 changed files with 76 additions and 2 deletions

View File

@@ -0,0 +1,35 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Mermaid Quick Test Page</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=" />
<style>
div.mermaid {
font-family: 'Courier New', Courier, monospace !important;
}
</style>
</head>
<body>
<h1>Pie chart demos</h1>
<pre class="mermaid">
pie title Default text position: Animal adoption
accTitle: simple pie char demo
accDescr: pie chart with 3 sections: dogs, cats, rats. Most are dogs.
"dogs" : -60.67
"rats" : 40.12
</pre>
<hr />
<script type="module">
import mermaid from '/mermaid.esm.mjs';
mermaid.initialize({
theme: 'forest',
logLevel: 3,
securityLevel: 'loose',
});
</script>
</body>
</html>

View File

@@ -37,6 +37,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
**Note:**
> Pie chart values must be **positive numbers greater than zero**.\
> **Zero and negative values are not allowed** and will result in an error.
\[pie] \[showData] (OPTIONAL)
\[title] \[titlevalue] (OPTIONAL)
"\[datakey1]" : \[dataValue1]

View File

@@ -139,6 +139,24 @@ describe('pie', () => {
}).rejects.toThrowError();
});
it('should handle simple pie with zero slice value', async () => {
await expect(async () => {
await parser.parse(`pie
"ash" : 0
"bat" : 40.12
`);
}).rejects.toThrowError();
});
it('should handle simple pie with negative slice value', async () => {
await expect(async () => {
await parser.parse(`pie
"ash" : -60
"bat" : 40.12
`);
}).rejects.toThrowError();
});
it('should handle unsafe properties', async () => {
await expect(
parser.parse(`pie title Unsafe props test

View File

@@ -34,6 +34,17 @@ const clear = (): void => {
};
const addSection = ({ label, value }: D3Section): void => {
if (value <= 0) {
const error: any = new Error(
`Section "${label}" has invalid value: ${value}. Zero and negative values are not allowed in pie charts. All slice values must be > 0`
);
error.hash = {
text: `pie "${label}": ${value}`,
token: `${value}`,
expected: ['a positive number (> 0)'],
};
throw error;
}
if (!sections.has(label)) {
sections.set(label, value);
log.debug(`added new section: ${label}, with value: ${value}`);

View File

@@ -24,6 +24,11 @@ Drawing a pie chart is really simple in mermaid.
- Followed by `:` colon as separator
- Followed by `positive numeric value` (supported up to two decimal places)
**Note:**
> Pie chart values must be **positive numbers greater than zero**.
> **Zero and negative values are not allowed** and will result in an error.
[pie] [showData] (OPTIONAL)
[title] [titlevalue] (OPTIONAL)
"[datakey1]" : [dataValue1]

View File

@@ -17,8 +17,8 @@ terminal ACC_DESCR: /[\t ]*accDescr(?:[\t ]*:([^\n\r]*?(?=%%)|[^\n\r]*)|\s*{([^}
terminal ACC_TITLE: /[\t ]*accTitle[\t ]*:(?:[^\n\r]*?(?=%%)|[^\n\r]*)/;
terminal TITLE: /[\t ]*title(?:[\t ][^\n\r]*?(?=%%)|[\t ][^\n\r]*|)/;
terminal FLOAT returns number: /[0-9]+\.[0-9]+(?!\.)/;
terminal INT returns number: /0|[1-9][0-9]*(?!\.)/;
terminal FLOAT returns number: /-?[0-9]+\.[0-9]+(?!\.)/;
terminal INT returns number: /-?(0|[1-9][0-9]*)(?!\.)/;
terminal NUMBER returns number: FLOAT | INT;
terminal STRING returns string: /"([^"\\]|\\.)*"|'([^'\\]|\\.)*'/;