Mondrian Treemap

A standalone React component for visualizing SNBC (Stratégie Nationale Bas-Carbone) trajectory data using interactive treemaps.

Features

• Interactive Treemap Visualization: Hierarchical display of sectors and levers with proportional sizing
• 4 Calculation Methods: Implements all SNBC calculation methodologies
• Responsive Design: Adapts to different screen sizes
• Interactive Features: Click events, tooltips, and external selection support
• Custom Breadcrumb Navigation: Proper navigation with selected lever display
• TypeScript Support: Full type safety with comprehensive interfaces
• Standalone Package: Can be installed as an NPM package
• CSS Modularity: Separated styles for easy customization

Installation

npm install mondrian-treemap

Quick Start

import React from "react";
import { MondrianTreemap, InputData } from "mondrian-treemap";

const App = () => {
    const inputData: InputData = {
        secteurs: [
            {
                nom: "Transports",
                resultat2019: 500, // more precise value
                objectif2019: 500, // in case more precise value is not available
                objectif2030: 200,
                couleur: "#c6dbef",
                leviers: [
                    {
                        name: "Réduction des déplacements",
                        pourcentageRegional: 20,
                        objectifReduction: -12,
                    },
                    // ... more levers
                ],
            },
            // ... more sectors
        ],
    };

    const handleSelected = (
        sector: string,
        lever: string
    ) => {
        console.log(`Selected: ${sector} - ${lever}`);
    };

    return (
        <MondrianTreemap
            inputData={inputData}
            onSelected={handleSelected}
        />
    );
};

Data Structure

EPCI Data (InputData)

interface InputData {
    secteurs: {
        nom: string; // Correspond à "Secteur Territorialisation SNBC" du CSV
        resultat2019: number; // ktCO₂e (valeur des observatoires régionaux)
        objectif2019: number; // ktCO₂e (valeur de territorialisation de la SNBC)
        objectif2030: number; // ktCO₂e
        sousSecteurs?: string[];
        couleur?: string; // Optionnel pour personnalisation
        leviers: {
            nom: string; // Correspond à "Leviers SGPE"
            pourcentageRegional: number;
            objectifReduction: number; // objectif permettant de remplir les carrés
            couleur?: string;
        }[];
    }[];
}

Calculation Methods

Uses the difference between 2030 goal in objectif2030 and 2019 data (either "real" data, resultat2019 or estimated data, objectif2019). Apply lever parameter (pourcentageRegional). If sousSecteurs are available, it means that it should take individual data in sousSecteurs that matches lever name if available.

Any empty data or invalid lever (that produces an impact in the wrong direction) will be ignored.

Component Props

interface MondrianProps {
    inputData: InputData;
    selectedSecteur?: string;
    selectedLevier?: string;
    onSelected?: (sector: string, lever: string) => void;
    resetZoom?: () => void;
    className?: string;
    style?: React.CSSProperties;
    titleOptions?: echarts.TitleComponentOption;
    toolboxOptions?: echarts.ToolboxComponentOption;
    treemapOptions?: echarts.TreemapSeriesOption;
}

API Reference

Props

| Prop | Type | Required | Description | | ----------------- | ------------------------ | -------- | --------------------------------------------- | | inputData | InputData | Yes | EPCI data with sectors, objectives and levers | | selectedSecteur | string | No | Externally selected sector | | selectedLevier | string | No | Externally selected lever | | onSelected | function | No | Callback when lever or sector is clicked | | resetZoom | function | No | Callback to reset zoom level | | title | string | No | Additional title to use in the breadcrumb | | className | string | No | Additional CSS classes | | style | CSSProperties | No | Additional inline styles on treemap | | titleOptions | TitleComponentOption | No | Additional title options | | toolboxOptions | ToolboxComponentOption | No | Additional toolbox options | | treemapOptions | TreemapSeriesOption | No | Additional treemap options |

Events

• Click on Lever: Triggers onSelected with sector (can be empty), lever name (can be empty)
• Hover: Shows tooltip with sector, lever, and objective information
• Breadcrumb Navigation: Custom navigation for zoom levels with proper lever display

Demo

To run the demo:

npm run dev

Then open http://localhost:3000 in your browser.

Development

Project Structure

src/
├── components/
│   └── MondrianTreemap.tsx      # Main component
│   └── ReactECharts.tsx         # Echarts Wrapper
├── types/
│   └── index.ts                 # TypeScript interfaces
├── utils/
│   └── dataProcessor.ts         # Data calculation logic
├── styles/
│   ├── index.css               # Main styles
│   ├── breadcrumb.css          # Breadcrumb styles
│   └── treemap.css             # Treemap styles
├── demo/
│   ├── App.tsx                 # Demo application
│   ├── index.tsx               # Demo entry point
│   └── demo.css                # Demo styles
└── index.ts                    # Main exports

Building

npm run build

Testing

npm test

Styling

The component uses modular CSS with the following classes:

Main Component

• .mondrian-treemap - Main container
• .mondrian-treemap-container - Component wrapper
• .mondrian-treemap-chart - Chart container

Breadcrumb

• .mondrian-breadcrumb - Breadcrumb container
• .mondrian-breadcrumb-item - Breadcrumb item
• .mondrian-breadcrumb-item.clickable - Clickable breadcrumb item
• .mondrian-breadcrumb-separator - Separator between items

Legend

• .mondrian-legend - Legend container
• .mondrian-legend-block - Legend item
• .mondrian-legend-block-square - Legend color square

Error States

• .mondrian-error - Error container
• .mondrian-error-hint - Error hint text

Dependencies

• React: ^18.0.0 || ^19.0.0
• eCharts: ^5.6.0
• TypeScript: ^5.9.2

License

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

Support

For issues and questions, please open an issue on the Gitlab repository.