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

``bash
npm install mondrian-treemap
`

Quick Start

`tsx
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 (
inputData={inputData}
onSelected={handleSelected}
/>
);
};
`

Data Structure

$3

`typescript
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

`typescript
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

$3

| 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 |

$3

- 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:

`bash
npm run dev
`

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

Development

$3

`
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
`

$3

`bash
npm run build
`

$3

`bash
npm test
`

Styling

The component uses modular CSS with the following classes:

$3

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

$3

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

$3

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

$3

- .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.