mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-11-29 09:04:10 +01:00
472 lines
9.1 KiB
TypeScript
472 lines
9.1 KiB
TypeScript
import { imgSnapshotTest } from '../../helpers/util.ts';
|
|
|
|
describe('Treemap Diagram', () => {
|
|
it('1: should render a basic treemap', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('2: should render a hierarchical treemap', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Products"
|
|
"Electronics"
|
|
"Phones": 50
|
|
"Computers": 30
|
|
"Accessories": 20
|
|
"Clothing"
|
|
"Men's"
|
|
"Shirts": 10
|
|
"Pants": 15
|
|
"Women's"
|
|
"Dresses": 20
|
|
"Skirts": 10
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('3: should render a treemap with styling using classDef', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Section 1"
|
|
"Leaf 1.1": 12
|
|
"Section 1.2":::class1
|
|
"Leaf 1.2.1": 12
|
|
"Section 2"
|
|
"Leaf 2.1": 20:::class1
|
|
"Leaf 2.2": 25
|
|
"Leaf 2.3": 12
|
|
|
|
classDef class1 fill:red,color:blue,stroke:#FFD600;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('4: should handle long text that wraps', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Main Category"
|
|
"This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
|
|
"Short item": 20
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('5: should render with a forest theme', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
theme: forest
|
|
---
|
|
treemap-beta
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('6: should handle multiple levels of nesting', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Level 1"
|
|
"Level 2A"
|
|
"Level 3A": 10
|
|
"Level 3B": 15
|
|
"Level 2B"
|
|
"Level 3C": 20
|
|
"Level 3D"
|
|
"Level 4A": 5
|
|
"Level 4B": 5
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('7: should handle classDef with multiple styles', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Main"
|
|
"A": 20
|
|
"B":::important
|
|
"B1": 10
|
|
"B2": 15
|
|
"C": 5:::secondary
|
|
|
|
classDef important fill:#f96,stroke:#333,stroke-width:2px;
|
|
classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8: should handle dollar value formatting with thousands separator', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: "$0,0"
|
|
---
|
|
treemap
|
|
"Budget"
|
|
"Operations"
|
|
"Salaries": 700000
|
|
"Equipment": 200000
|
|
"Supplies": 100000
|
|
"Marketing"
|
|
"Advertising": 400000
|
|
"Events": 100000
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8a: should handle percentage formatting', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: ".1%"
|
|
---
|
|
treemap-beta
|
|
"Market Share"
|
|
"Company A": 0.35
|
|
"Company B": 0.25
|
|
"Company C": 0.15
|
|
"Others": 0.25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8b: should handle decimal formatting', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: ".2f"
|
|
---
|
|
treemap-beta
|
|
"Metrics"
|
|
"Conversion Rate": 0.0567
|
|
"Bounce Rate": 0.6723
|
|
"Click-through Rate": 0.1289
|
|
"Engagement": 0.4521
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8c: should handle dollar sign with decimal places', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: "$.2f"
|
|
---
|
|
treemap-beta
|
|
"Product Prices"
|
|
"Basic": 19.99
|
|
"Standard": 49.99
|
|
"Premium": 99.99
|
|
"Enterprise": 199.99
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8d: should handle dollar sign with thousands separator and decimal places', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: "$,.2f"
|
|
---
|
|
treemap-beta
|
|
"Revenue"
|
|
"Q1": 1250345.75
|
|
"Q2": 1645789.25
|
|
"Q3": 1845123.50
|
|
"Q4": 2145678.75
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8e: should handle simple thousands separator', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: ","
|
|
---
|
|
treemap-beta
|
|
"User Counts"
|
|
"Active Users": 1250345
|
|
"New Signups": 45789
|
|
"Churned": 12350
|
|
"Converted": 78975
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: "$,.0f"
|
|
---
|
|
treemap-beta
|
|
"Sales by Region"
|
|
"North": 1234567
|
|
"South": 7654321
|
|
"East": 4567890
|
|
"West": 9876543
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('8g: should handle scientific notation format', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
treemap:
|
|
valueFormat: ".2e"
|
|
---
|
|
treemap-beta
|
|
"Scientific Values"
|
|
"Value 1": 1234567
|
|
"Value 2": 0.0000123
|
|
"Value 3": 1000000000
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('9: should handle a complex example with multiple features', () => {
|
|
imgSnapshotTest(
|
|
`---
|
|
config:
|
|
theme: dark
|
|
treemap:
|
|
valueFormat: "$0,0"
|
|
---
|
|
treemap-beta
|
|
"Company Budget"
|
|
"Engineering":::engineering
|
|
"Frontend": 300000
|
|
"Backend": 400000
|
|
"DevOps": 200000
|
|
"Marketing":::marketing
|
|
"Digital": 250000
|
|
"Print": 100000
|
|
"Events": 150000
|
|
"Sales":::sales
|
|
"Direct": 500000
|
|
"Channel": 300000
|
|
|
|
classDef engineering fill:#6b9bc3,stroke:#333;
|
|
classDef marketing fill:#c36b9b,stroke:#333;
|
|
classDef sales fill:#c3a66b,stroke:#333;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('10: should render the example from documentation', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
treemap-beta
|
|
"Section 1"
|
|
"Leaf 1.1": 12
|
|
"Section 1.2":::class1
|
|
"Leaf 1.2.1": 12
|
|
"Section 2"
|
|
"Leaf 2.1": 20:::class1
|
|
"Leaf 2.2": 25
|
|
"Leaf 2.3": 12
|
|
|
|
classDef class1 fill:red,color:blue,stroke:#FFD600;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('11: should handle comments', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
treemap-beta
|
|
%% This is a comment
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
%% Another comment
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('12: should apply classDef fill color to leaf nodes', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Root"
|
|
"Item A": 30:::redClass
|
|
"Item B": 20
|
|
"Item C": 25:::blueClass
|
|
|
|
classDef redClass fill:#ff0000;
|
|
classDef blueClass fill:#0000ff;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('13: should apply classDef stroke styles to sections', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
%% This is a comment
|
|
"Category A":::thickBorder
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
%% Another comment
|
|
"Category B":::dashedBorder
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
|
|
classDef thickBorder stroke:red,stroke-width:8px;
|
|
classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('14: should apply classDef color to text labels', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Products"
|
|
"Electronics":::whiteText
|
|
"Phones": 40
|
|
"Laptops": 30
|
|
"Furniture":::darkText
|
|
"Chairs": 25
|
|
"Tables": 20
|
|
|
|
classDef whiteText fill:#2c3e50,color:#ffffff;
|
|
classDef darkText fill:#ecf0f1,color:#000000;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('15: should apply multiple classDef properties simultaneously', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Budget"
|
|
"Critical":::critical
|
|
"Server Costs": 50000
|
|
"Salaries": 80000
|
|
"Normal":::normal
|
|
"Office Supplies": 5000
|
|
"Marketing": 15000
|
|
classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
|
|
classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it('16: should handle classDef on nested sections and leaves', () => {
|
|
imgSnapshotTest(
|
|
`treemap-beta
|
|
"Company"
|
|
"Engineering":::engSection
|
|
"Frontend": 30:::highlight
|
|
"Backend": 40
|
|
"DevOps": 20:::highlight
|
|
"Sales"
|
|
"Direct": 35
|
|
"Channel": 25:::highlight
|
|
|
|
classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
|
|
classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
/*
|
|
it.skip('17: should render a treemap with title', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
treemap-beta
|
|
title Treemap with Title
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it.skip('13: should render a treemap with accessibility attributes', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
treemap-beta
|
|
accTitle: Accessible Treemap Title
|
|
accDescr: This is a description of the treemap for accessibility purposes
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
|
|
it.skip('14: should render a treemap with title and accessibility attributes', () => {
|
|
imgSnapshotTest(
|
|
`
|
|
treemap
|
|
title Treemap with Title and Accessibility
|
|
accTitle: Accessible Treemap Title
|
|
accDescr: This is a description of the treemap for accessibility purposes
|
|
"Category A"
|
|
"Item A1": 10
|
|
"Item A2": 20
|
|
"Category B"
|
|
"Item B1": 15
|
|
"Item B2": 25
|
|
`,
|
|
{}
|
|
);
|
|
});
|
|
*/
|
|
});
|