From caa04aad8bd69e76abc914b8270bb15cc20fbe8c Mon Sep 17 00:00:00 2001 From: shubham-mermaid Date: Fri, 27 Jun 2025 13:48:44 +0530 Subject: [PATCH] Updated code as per suggestions --- cypress/integration/rendering/treemap.spec.ts | 60 +++++++++++++++---- docs/syntax/treemap.md | 4 +- packages/mermaid/src/diagrams/treemap/db.ts | 15 +++-- packages/mermaid/src/docs/syntax/treemap.md | 4 +- 4 files changed, 63 insertions(+), 20 deletions(-) diff --git a/cypress/integration/rendering/treemap.spec.ts b/cypress/integration/rendering/treemap.spec.ts index 6dbe84bd5..92fcb5808 100644 --- a/cypress/integration/rendering/treemap.spec.ts +++ b/cypress/integration/rendering/treemap.spec.ts @@ -66,7 +66,10 @@ classDef class1 fill:red,color:blue,stroke:#FFD600; it('5: should render with a forest theme', () => { imgSnapshotTest( - `%%{init: {'theme': 'forest'}}%% + `--- +config: + theme: forest +--- treemap-beta "Category A" "Item A1": 10 @@ -115,7 +118,11 @@ classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5; it('8: should handle dollar value formatting with thousands separator', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '$0,0'}}}%% + `--- +config: + treemap: + valueFormat: "$0,0" +--- treemap "Budget" "Operations" @@ -132,7 +139,11 @@ treemap it('8a: should handle percentage formatting', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '.1%'}}}%% + `--- +config: + treemap: + valueFormat: ".1%" +--- treemap-beta "Market Share" "Company A": 0.35 @@ -146,7 +157,11 @@ treemap-beta it('8b: should handle decimal formatting', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '.2f'}}}%% + `--- +config: + treemap: + valueFormat: ".2f" +--- treemap-beta "Metrics" "Conversion Rate": 0.0567 @@ -160,7 +175,11 @@ treemap-beta it('8c: should handle dollar sign with decimal places', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '$.2f'}}}%% + `--- +config: + treemap: + valueFormat: "$.2f" +--- treemap-beta "Product Prices" "Basic": 19.99 @@ -174,7 +193,11 @@ treemap-beta it('8d: should handle dollar sign with thousands separator and decimal places', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '$,.2f'}}}%% + `--- +config: + treemap: + valueFormat: "$,.2f" +--- treemap-beta "Revenue" "Q1": 1250345.75 @@ -188,7 +211,11 @@ treemap-beta it('8e: should handle simple thousands separator', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': ','}}}%% + `--- +config: + treemap: + valueFormat: "," +--- treemap-beta "User Counts" "Active Users": 1250345 @@ -202,7 +229,11 @@ treemap-beta it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '$,.0f'}}}%% + `--- +config: + treemap: + valueFormat: "$,.0f" +--- treemap-beta "Sales by Region" "North": 1234567 @@ -216,7 +247,11 @@ treemap-beta it('8g: should handle scientific notation format', () => { imgSnapshotTest( - `%%{init: {'treemap': {'valueFormat': '.2e'}}}%% + `--- +config: + treemap: + valueFormat: ".2e" +--- treemap-beta "Scientific Values" "Value 1": 1234567 @@ -229,7 +264,12 @@ treemap-beta it('9: should handle a complex example with multiple features', () => { imgSnapshotTest( - `%%{init: {'theme': 'dark', 'treemap': {'valueFormat': '$0,0'}}}%% + `--- +config: + theme: dark + treemap: + valueFormat: "$0,0" +--- treemap-beta "Company Budget" "Engineering":::engineering diff --git a/docs/syntax/treemap.md b/docs/syntax/treemap.md index aa579e60b..1ee916ff9 100644 --- a/docs/syntax/treemap.md +++ b/docs/syntax/treemap.md @@ -344,9 +344,9 @@ Treemap diagrams are commonly used for: If treemap diagrams don't suit your needs, consider these alternatives: -- **Pie Charts**: For simple proportion comparisons without hierarchy +- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy - **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid). -- **Sankey Diagrams**: For flow-based hierarchical data +- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data ## Notes diff --git a/packages/mermaid/src/diagrams/treemap/db.ts b/packages/mermaid/src/diagrams/treemap/db.ts index 49ffa8469..15cb0cbdc 100644 --- a/packages/mermaid/src/diagrams/treemap/db.ts +++ b/packages/mermaid/src/diagrams/treemap/db.ts @@ -4,6 +4,7 @@ import type { DiagramStyleClassDef } from '../../diagram-api/types.js'; import { isLabelStyle } from '../../rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import { cleanAndMerge } from '../../utils.js'; +import { ImperativeState } from '../../utils/imperativeState.js'; import { clear as commonClear, getAccDescription, @@ -19,8 +20,9 @@ const defaultTreemapData: TreemapData = { nodes: [], levels: new Map(), }; + +const state = new ImperativeState(() => structuredClone(defaultTreemapData)); let outerNodes: TreemapNode[] = []; -let data: TreemapData = structuredClone(defaultTreemapData); const getConfig = (): Required => { // Use type assertion with unknown as intermediate step @@ -33,9 +35,10 @@ const getConfig = (): Required => { }) as Required; }; -const getNodes = (): TreemapNode[] => data.nodes; +const getNodes = (): TreemapNode[] => state.records.nodes; const addNode = (node: TreemapNode, level: number) => { + const data = state.records; data.nodes.push(node); data.levels.set(node, level); @@ -57,10 +60,10 @@ const addClass = (id: string, _style: string) => { const styleClass = classes.get(id) ?? { id, styles: [], textStyles: [] }; classes.set(id, styleClass); - const style = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';'); + const styles = _style.replace(/\\,/g, '§§§').replace(/,/g, ';').replace(/§§§/g, ',').split(';'); - if (style) { - style.forEach((s) => { + if (styles) { + styles.forEach((s) => { if (isLabelStyle(s)) { if (styleClass?.textStyles) { styleClass.textStyles.push(s); @@ -88,7 +91,7 @@ const getStylesForClass = (classSelector: string): string[] => { const clear = () => { commonClear(); - data = structuredClone(defaultTreemapData); + state.reset(); outerNodes = []; classes = new Map(); }; diff --git a/packages/mermaid/src/docs/syntax/treemap.md b/packages/mermaid/src/docs/syntax/treemap.md index a82825a91..92406d3a9 100644 --- a/packages/mermaid/src/docs/syntax/treemap.md +++ b/packages/mermaid/src/docs/syntax/treemap.md @@ -236,9 +236,9 @@ Treemap diagrams are commonly used for: If treemap diagrams don't suit your needs, consider these alternatives: -- **Pie Charts**: For simple proportion comparisons without hierarchy +- [**Pie Charts**](./pie.md): For simple proportion comparisons without hierarchy - **Sunburst Diagrams**: For hierarchical data with a radial layout (yet to be released in Mermaid). -- **Sankey Diagrams**: For flow-based hierarchical data +- [**Sankey Diagrams**](./sankey.md): For flow-based hierarchical data ## Notes