collab/mermaid/cypress/integration/rendering/treemap.spec.tsblame
View source
6dd74de1import { imgSnapshotTest } from '../../helpers/util.ts';
6dd74de2
6dd74de3describe('Treemap Diagram', () => {
6dd74de4 it('1: should render a basic treemap', () => {
6dd74de5 imgSnapshotTest(
6dd74de6 `treemap-beta
6dd74de7"Category A"
6dd74de8 "Item A1": 10
6dd74de9 "Item A2": 20
6dd74de10"Category B"
6dd74de11 "Item B1": 15
6dd74de12 "Item B2": 25
6dd74de13 `,
6dd74de14 {}
6dd74de15 );
6dd74de16 });
6dd74de17
6dd74de18 it('2: should render a hierarchical treemap', () => {
6dd74de19 imgSnapshotTest(
6dd74de20 `treemap-beta
6dd74de21"Products"
6dd74de22 "Electronics"
6dd74de23 "Phones": 50
6dd74de24 "Computers": 30
6dd74de25 "Accessories": 20
6dd74de26 "Clothing"
6dd74de27 "Men's"
6dd74de28 "Shirts": 10
6dd74de29 "Pants": 15
6dd74de30 "Women's"
6dd74de31 "Dresses": 20
6dd74de32 "Skirts": 10
6dd74de33 `,
6dd74de34 {}
6dd74de35 );
6dd74de36 });
6dd74de37
6dd74de38 it('3: should render a treemap with styling using classDef', () => {
6dd74de39 imgSnapshotTest(
6dd74de40 `treemap-beta
6dd74de41"Section 1"
6dd74de42 "Leaf 1.1": 12
6dd74de43 "Section 1.2":::class1
6dd74de44 "Leaf 1.2.1": 12
6dd74de45"Section 2"
6dd74de46 "Leaf 2.1": 20:::class1
6dd74de47 "Leaf 2.2": 25
6dd74de48 "Leaf 2.3": 12
6dd74de49
6dd74de50classDef class1 fill:red,color:blue,stroke:#FFD600;
6dd74de51 `,
6dd74de52 {}
6dd74de53 );
6dd74de54 });
6dd74de55
6dd74de56 it('4: should handle long text that wraps', () => {
6dd74de57 imgSnapshotTest(
6dd74de58 `treemap-beta
6dd74de59"Main Category"
6dd74de60 "This is a very long item name that should wrap to the next line when rendered in the treemap diagram": 50
6dd74de61 "Short item": 20
6dd74de62 `,
6dd74de63 {}
6dd74de64 );
6dd74de65 });
6dd74de66
6dd74de67 it('5: should render with a forest theme', () => {
6dd74de68 imgSnapshotTest(
6dd74de69 `---
6dd74de70config:
6dd74de71 theme: forest
6dd74de72---
6dd74de73treemap-beta
6dd74de74"Category A"
6dd74de75 "Item A1": 10
6dd74de76 "Item A2": 20
6dd74de77"Category B"
6dd74de78 "Item B1": 15
6dd74de79 "Item B2": 25
6dd74de80 `,
6dd74de81 {}
6dd74de82 );
6dd74de83 });
6dd74de84
6dd74de85 it('6: should handle multiple levels of nesting', () => {
6dd74de86 imgSnapshotTest(
6dd74de87 `treemap-beta
6dd74de88"Level 1"
6dd74de89 "Level 2A"
6dd74de90 "Level 3A": 10
6dd74de91 "Level 3B": 15
6dd74de92 "Level 2B"
6dd74de93 "Level 3C": 20
6dd74de94 "Level 3D"
6dd74de95 "Level 4A": 5
6dd74de96 "Level 4B": 5
6dd74de97 `,
6dd74de98 {}
6dd74de99 );
6dd74de100 });
6dd74de101
6dd74de102 it('7: should handle classDef with multiple styles', () => {
6dd74de103 imgSnapshotTest(
6dd74de104 `treemap-beta
6dd74de105"Main"
6dd74de106 "A": 20
6dd74de107 "B":::important
6dd74de108 "B1": 10
6dd74de109 "B2": 15
6dd74de110 "C": 5:::secondary
6dd74de111
6dd74de112classDef important fill:#f96,stroke:#333,stroke-width:2px;
6dd74de113classDef secondary fill:#6cf,stroke:#333,stroke-dasharray:5 5;
6dd74de114 `,
6dd74de115 {}
6dd74de116 );
6dd74de117 });
6dd74de118
6dd74de119 it('8: should handle dollar value formatting with thousands separator', () => {
6dd74de120 imgSnapshotTest(
6dd74de121 `---
6dd74de122config:
6dd74de123 treemap:
6dd74de124 valueFormat: "$0,0"
6dd74de125---
6dd74de126treemap
6dd74de127"Budget"
6dd74de128 "Operations"
6dd74de129 "Salaries": 700000
6dd74de130 "Equipment": 200000
6dd74de131 "Supplies": 100000
6dd74de132 "Marketing"
6dd74de133 "Advertising": 400000
6dd74de134 "Events": 100000
6dd74de135 `,
6dd74de136 {}
6dd74de137 );
6dd74de138 });
6dd74de139
6dd74de140 it('8a: should handle percentage formatting', () => {
6dd74de141 imgSnapshotTest(
6dd74de142 `---
6dd74de143config:
6dd74de144 treemap:
6dd74de145 valueFormat: ".1%"
6dd74de146---
6dd74de147treemap-beta
6dd74de148"Market Share"
6dd74de149 "Company A": 0.35
6dd74de150 "Company B": 0.25
6dd74de151 "Company C": 0.15
6dd74de152 "Others": 0.25
6dd74de153 `,
6dd74de154 {}
6dd74de155 );
6dd74de156 });
6dd74de157
6dd74de158 it('8b: should handle decimal formatting', () => {
6dd74de159 imgSnapshotTest(
6dd74de160 `---
6dd74de161config:
6dd74de162 treemap:
6dd74de163 valueFormat: ".2f"
6dd74de164---
6dd74de165treemap-beta
6dd74de166"Metrics"
6dd74de167 "Conversion Rate": 0.0567
6dd74de168 "Bounce Rate": 0.6723
6dd74de169 "Click-through Rate": 0.1289
6dd74de170 "Engagement": 0.4521
6dd74de171 `,
6dd74de172 {}
6dd74de173 );
6dd74de174 });
6dd74de175
6dd74de176 it('8c: should handle dollar sign with decimal places', () => {
6dd74de177 imgSnapshotTest(
6dd74de178 `---
6dd74de179config:
6dd74de180 treemap:
6dd74de181 valueFormat: "$.2f"
6dd74de182---
6dd74de183treemap-beta
6dd74de184"Product Prices"
6dd74de185 "Basic": 19.99
6dd74de186 "Standard": 49.99
6dd74de187 "Premium": 99.99
6dd74de188 "Enterprise": 199.99
6dd74de189 `,
6dd74de190 {}
6dd74de191 );
6dd74de192 });
6dd74de193
6dd74de194 it('8d: should handle dollar sign with thousands separator and decimal places', () => {
6dd74de195 imgSnapshotTest(
6dd74de196 `---
6dd74de197config:
6dd74de198 treemap:
6dd74de199 valueFormat: "$,.2f"
6dd74de200---
6dd74de201treemap-beta
6dd74de202"Revenue"
6dd74de203 "Q1": 1250345.75
6dd74de204 "Q2": 1645789.25
6dd74de205 "Q3": 1845123.50
6dd74de206 "Q4": 2145678.75
6dd74de207 `,
6dd74de208 {}
6dd74de209 );
6dd74de210 });
6dd74de211
6dd74de212 it('8e: should handle simple thousands separator', () => {
6dd74de213 imgSnapshotTest(
6dd74de214 `---
6dd74de215config:
6dd74de216 treemap:
6dd74de217 valueFormat: ","
6dd74de218---
6dd74de219treemap-beta
6dd74de220"User Counts"
6dd74de221 "Active Users": 1250345
6dd74de222 "New Signups": 45789
6dd74de223 "Churned": 12350
6dd74de224 "Converted": 78975
6dd74de225 `,
6dd74de226 {}
6dd74de227 );
6dd74de228 });
6dd74de229
6dd74de230 it('8f: should handle valueFormat set via directive with dollar and thousands separator', () => {
6dd74de231 imgSnapshotTest(
6dd74de232 `---
6dd74de233config:
6dd74de234 treemap:
6dd74de235 valueFormat: "$,.0f"
6dd74de236---
6dd74de237treemap-beta
6dd74de238"Sales by Region"
6dd74de239 "North": 1234567
6dd74de240 "South": 7654321
6dd74de241 "East": 4567890
6dd74de242 "West": 9876543
6dd74de243 `,
6dd74de244 {}
6dd74de245 );
6dd74de246 });
6dd74de247
6dd74de248 it('8g: should handle scientific notation format', () => {
6dd74de249 imgSnapshotTest(
6dd74de250 `---
6dd74de251config:
6dd74de252 treemap:
6dd74de253 valueFormat: ".2e"
6dd74de254---
6dd74de255treemap-beta
6dd74de256"Scientific Values"
6dd74de257 "Value 1": 1234567
6dd74de258 "Value 2": 0.0000123
6dd74de259 "Value 3": 1000000000
6dd74de260 `,
6dd74de261 {}
6dd74de262 );
6dd74de263 });
6dd74de264
6dd74de265 it('9: should handle a complex example with multiple features', () => {
6dd74de266 imgSnapshotTest(
6dd74de267 `---
6dd74de268config:
6dd74de269 theme: dark
6dd74de270 treemap:
6dd74de271 valueFormat: "$0,0"
6dd74de272---
6dd74de273treemap-beta
6dd74de274"Company Budget"
6dd74de275 "Engineering":::engineering
6dd74de276 "Frontend": 300000
6dd74de277 "Backend": 400000
6dd74de278 "DevOps": 200000
6dd74de279 "Marketing":::marketing
6dd74de280 "Digital": 250000
6dd74de281 "Print": 100000
6dd74de282 "Events": 150000
6dd74de283 "Sales":::sales
6dd74de284 "Direct": 500000
6dd74de285 "Channel": 300000
6dd74de286
6dd74de287classDef engineering fill:#6b9bc3,stroke:#333;
6dd74de288classDef marketing fill:#c36b9b,stroke:#333;
6dd74de289classDef sales fill:#c3a66b,stroke:#333;
6dd74de290 `,
6dd74de291 {}
6dd74de292 );
6dd74de293 });
6dd74de294
6dd74de295 it('10: should render the example from documentation', () => {
6dd74de296 imgSnapshotTest(
6dd74de297 `
6dd74de298 treemap-beta
6dd74de299 "Section 1"
6dd74de300 "Leaf 1.1": 12
6dd74de301 "Section 1.2":::class1
6dd74de302 "Leaf 1.2.1": 12
6dd74de303 "Section 2"
6dd74de304 "Leaf 2.1": 20:::class1
6dd74de305 "Leaf 2.2": 25
6dd74de306 "Leaf 2.3": 12
6dd74de307
6dd74de308 classDef class1 fill:red,color:blue,stroke:#FFD600;
6dd74de309 `,
6dd74de310 {}
6dd74de311 );
6dd74de312 });
6dd74de313
6dd74de314 it('11: should handle comments', () => {
6dd74de315 imgSnapshotTest(
6dd74de316 `
6dd74de317 treemap-beta
6dd74de318 %% This is a comment
6dd74de319 "Category A"
6dd74de320 "Item A1": 10
6dd74de321 "Item A2": 20
6dd74de322 %% Another comment
6dd74de323 "Category B"
6dd74de324 "Item B1": 15
6dd74de325 "Item B2": 25
6dd74de326 `,
6dd74de327 {}
6dd74de328 );
6dd74de329 });
6dd74de330
6dd74de331 it('12: should apply classDef fill color to leaf nodes', () => {
6dd74de332 imgSnapshotTest(
6dd74de333 `treemap-beta
6dd74de334"Root"
6dd74de335 "Item A": 30:::redClass
6dd74de336 "Item B": 20
6dd74de337 "Item C": 25:::blueClass
6dd74de338
6dd74de339classDef redClass fill:#ff0000;
6dd74de340classDef blueClass fill:#0000ff;
6dd74de341 `,
6dd74de342 {}
6dd74de343 );
6dd74de344 });
6dd74de345
6dd74de346 it('13: should apply classDef stroke styles to sections', () => {
6dd74de347 imgSnapshotTest(
6dd74de348 `treemap-beta
6dd74de349 %% This is a comment
6dd74de350 "Category A":::thickBorder
6dd74de351 "Item A1": 10
6dd74de352 "Item A2": 20
6dd74de353 %% Another comment
6dd74de354 "Category B":::dashedBorder
6dd74de355 "Item B1": 15
6dd74de356 "Item B2": 25
6dd74de357
6dd74de358classDef thickBorder stroke:red,stroke-width:8px;
6dd74de359classDef dashedBorder stroke:black,stroke-dasharray:5,stroke-width:8px;
6dd74de360 `,
6dd74de361 {}
6dd74de362 );
6dd74de363 });
6dd74de364
6dd74de365 it('14: should apply classDef color to text labels', () => {
6dd74de366 imgSnapshotTest(
6dd74de367 `treemap-beta
6dd74de368"Products"
6dd74de369 "Electronics":::whiteText
6dd74de370 "Phones": 40
6dd74de371 "Laptops": 30
6dd74de372 "Furniture":::darkText
6dd74de373 "Chairs": 25
6dd74de374 "Tables": 20
6dd74de375
6dd74de376classDef whiteText fill:#2c3e50,color:#ffffff;
6dd74de377classDef darkText fill:#ecf0f1,color:#000000;
6dd74de378 `,
6dd74de379 {}
6dd74de380 );
6dd74de381 });
6dd74de382
6dd74de383 it('15: should apply multiple classDef properties simultaneously', () => {
6dd74de384 imgSnapshotTest(
6dd74de385 `treemap-beta
6dd74de386"Budget"
6dd74de387 "Critical":::critical
6dd74de388 "Server Costs": 50000
6dd74de389 "Salaries": 80000
6dd74de390 "Normal":::normal
6dd74de391 "Office Supplies": 5000
6dd74de392 "Marketing": 15000
6dd74de393classDef critical fill:#e74c3c,color:#fff,stroke:#c0392b,stroke-width:3px;
6dd74de394classDef normal fill:#3498db,color:#fff,stroke:#2980b9,stroke-width:1px;
6dd74de395 `,
6dd74de396 {}
6dd74de397 );
6dd74de398 });
6dd74de399
6dd74de400 it('16: should handle classDef on nested sections and leaves', () => {
6dd74de401 imgSnapshotTest(
6dd74de402 `treemap-beta
6dd74de403"Company"
6dd74de404 "Engineering":::engSection
6dd74de405 "Frontend": 30:::highlight
6dd74de406 "Backend": 40
6dd74de407 "DevOps": 20:::highlight
6dd74de408 "Sales"
6dd74de409 "Direct": 35
6dd74de410 "Channel": 25:::highlight
6dd74de411
6dd74de412classDef engSection fill:#9b59b6,stroke:#8e44ad,stroke-width:2px;
6dd74de413classDef highlight fill:#f39c12,color:#000,stroke:#e67e22,stroke-width:2px;
6dd74de414 `,
6dd74de415 {}
6dd74de416 );
6dd74de417 });
6dd74de418
6dd74de419 /*
6dd74de420 it.skip('17: should render a treemap with title', () => {
6dd74de421 imgSnapshotTest(
6dd74de422 `
6dd74de423 treemap-beta
6dd74de424 title Treemap with Title
6dd74de425 "Category A"
6dd74de426 "Item A1": 10
6dd74de427 "Item A2": 20
6dd74de428 "Category B"
6dd74de429 "Item B1": 15
6dd74de430 "Item B2": 25
6dd74de431 `,
6dd74de432 {}
6dd74de433 );
6dd74de434 });
6dd74de435
6dd74de436 it.skip('13: should render a treemap with accessibility attributes', () => {
6dd74de437 imgSnapshotTest(
6dd74de438 `
6dd74de439 treemap-beta
6dd74de440 accTitle: Accessible Treemap Title
6dd74de441 accDescr: This is a description of the treemap for accessibility purposes
6dd74de442 "Category A"
6dd74de443 "Item A1": 10
6dd74de444 "Item A2": 20
6dd74de445 "Category B"
6dd74de446 "Item B1": 15
6dd74de447 "Item B2": 25
6dd74de448 `,
6dd74de449 {}
6dd74de450 );
6dd74de451 });
6dd74de452
6dd74de453 it.skip('14: should render a treemap with title and accessibility attributes', () => {
6dd74de454 imgSnapshotTest(
6dd74de455 `
6dd74de456 treemap
6dd74de457 title Treemap with Title and Accessibility
6dd74de458 accTitle: Accessible Treemap Title
6dd74de459 accDescr: This is a description of the treemap for accessibility purposes
6dd74de460 "Category A"
6dd74de461 "Item A1": 10
6dd74de462 "Item A2": 20
6dd74de463 "Category B"
6dd74de464 "Item B1": 15
6dd74de465 "Item B2": 25
6dd74de466 `,
6dd74de467 {}
6dd74de468 );
6dd74de469 });
6dd74de470 */
6dd74de471});