mirror of
https://github.com/mermaid-js/mermaid.git
synced 2025-09-19 23:39:50 +02:00
Merge branch 'develop' into 6637-add-new-participant-types-to-sequence-diagrams
This commit is contained in:
omkarht
382
cypress/integration/rendering/treemap.spec.ts
Normal file
382
cypress/integration/rendering/treemap.spec.ts
Normal file
@@ -0,0 +1,382 @@
|
||||
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.skip('12: 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
|
||||
`,
|
||||
{}
|
||||
);
|
||||
});
|
||||
*/
|
||||
});
|
||||
@@ -32,8 +32,26 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Rubik+Mono+One&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<style>
|
||||
.recursive-mermaid {
|
||||
font-family: 'Recursive', sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-variation-settings:
|
||||
'slnt' 0,
|
||||
'CASL' 0,
|
||||
'CRSV' 0.5,
|
||||
'MONO' 0;
|
||||
}
|
||||
|
||||
body {
|
||||
/* background: rgb(221, 208, 208); */
|
||||
/* background: #333; */
|
||||
@@ -45,7 +63,9 @@
|
||||
h1 {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
.mermaid {
|
||||
border: 1px solid red;
|
||||
}
|
||||
.mermaid2 {
|
||||
display: none;
|
||||
}
|
||||
@@ -83,6 +103,11 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.class2 {
|
||||
fill: red;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
/* tspan {
|
||||
font-size: 6px !important;
|
||||
} */
|
||||
@@ -106,19 +131,63 @@
|
||||
|
||||
<body>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
treemap
|
||||
"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;
|
||||
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
---
|
||||
config:
|
||||
treemap:
|
||||
valueFormat: '$0,0'
|
||||
---
|
||||
treemap
|
||||
"Budget"
|
||||
"Operations"
|
||||
"Salaries": 7000
|
||||
"Equipment": 2000
|
||||
"Supplies": 1000
|
||||
"Marketing"
|
||||
"Advertising": 4000
|
||||
"Events": 1000
|
||||
|
||||
</pre
|
||||
>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
treemap
|
||||
title Accessible Treemap Title
|
||||
"Category A"
|
||||
"Item A1": 10
|
||||
"Item A2": 20
|
||||
"Category B"
|
||||
"Item B1": 15
|
||||
"Item B2": 25
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
AB["apa@apa@"] --> B(("`apa@apa`"))
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart
|
||||
D(("for D"))
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
A e1@==> B
|
||||
e1@{ animate: true}
|
||||
</pre>
|
||||
<pre id="diagram4" class="mermaid">
|
||||
<pre id="diagram4" class="mermaid2">
|
||||
flowchart LR
|
||||
A e1@--> B
|
||||
classDef animate stroke-width:2,stroke-dasharray:10\,8,stroke-dashoffset:-180,animation: edge-animation-frame 6s linear infinite, stroke-linecap: round
|
||||
@@ -438,7 +507,7 @@ kanban
|
||||
alert('It worked');
|
||||
}
|
||||
await mermaid.initialize({
|
||||
// theme: 'base',
|
||||
// theme: 'forest',
|
||||
// theme: 'default',
|
||||
// theme: 'forest',
|
||||
// handDrawnSeed: 12,
|
||||
@@ -449,11 +518,7 @@ kanban
|
||||
// layout: 'fixed',
|
||||
// htmlLabels: false,
|
||||
flowchart: { titleTopMargin: 10 },
|
||||
|
||||
// fontFamily: 'Caveat',
|
||||
// fontFamily: 'Kalam',
|
||||
// fontFamily: 'courier',
|
||||
fontFamily: 'arial',
|
||||
fontFamily: "'Recursive', sans-serif",
|
||||
sequence: {
|
||||
actorFontFamily: 'courier',
|
||||
noteFontFamily: 'courier',
|
||||
|
||||
Reference in New Issue
Block a user