mermaid/cypress/integration/rendering/treemap.spec.ts

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
      `,
      {}
    );
  });
  */
});