Add a simple tooltip, labels max length and overflow options for treemap

packages/visualizations-react/stories/Chart/AxisAssemblages/AxisAssemblages.stories.tsx

@@ -516,44 +516,3 @@ const ColumnChartPercentageArgs: Props<DataFrame, ChartOptions> = {
     },
 };
 ColumnChartPercentage.args = ColumnChartPercentageArgs;
-
-export const TreemapChart = ChartTemplate.bind({});
-const DATA = [
-    { category: 'a very very very very very very very very very very very very very very very long text', color: '#F1C40F', count: 10 },
-    { category: 'first category', color: '#27AE60', count: 20 },
-    { category: 'second category', color: '#1F618D', count: 10 },
-    { category: 'third category', color: '#CB4335', count: 20 },
-    { category: 'fourth category', color: '#27AE60', count: 10 },
-    { category: 'fifth category', color: '#1F618D', count: 20 },
-];
-const TreemapChartArgs: Props<DataFrame, ChartOptions> = {
-    data: {
-        loading: false,
-        value: DATA,
-    },
-    options: {
-        series: [
-            {
-                type: ChartSeriesType.Treemap,
-                keyColumn: 'count',
-                keyGroups: ['category'],
-                borderColor: 'white',
-                colorFormatter: (index: number) => DATA[index].color,
-                labels: {
-                    align: 'center',
-                    display: true,
-                    labelsFormatter: (index: number ) => [DATA[index].category],
-                    color: ['white'],
-                    font: [{ size: 20 }],
-                    hoverColor: ['white', 'whiteSmoke'],
-                    hoverFont: [{ size: 21, weight: 'bold' }],
-                    position: 'middle',
-                }
-            },
-        ],
-        tooltip: {
-            display: false,
-        }
-    },
-};
-TreemapChart.args = TreemapChartArgs;

packages/visualizations-react/stories/Chart/Treemap/Treemap.stories.tsx

@@ -0,0 +1,52 @@
+import type { ChartOptions, DataFrame } from '@opendatasoft/visualizations';
+import { ChartSeriesType } from '@opendatasoft/visualizations';
+import { Meta } from '@storybook/react';
+import type { Props } from '../../../src';
+import ChartTemplate from '../ChartTemplate';
+
+const meta: Meta = {
+    title: 'Chart/Treemap',
+};
+
+export default meta;
+
+export const TreemapChart = ChartTemplate.bind({});
+const DATA = [
+    { category: 'a very very very very very very very very very very very very very very very long text', color: '#F1C40F', count: 100 },
+    { category: 'first category', color: '#27AE60', count: 50 },
+    { category: 'second category', color: '#1F618D', count: 20 },
+    { category: 'third category', color: '#CB4335', count: 20 },
+    { category: 'fourth category', color: '#27AE60', count: 10 },
+    { category: 'fifth category', color: '#1F618D', count: 10 },
+];
+const TreemapChartArgs: Props<DataFrame, ChartOptions> = {
+    data: {
+        loading: false,
+        value: DATA,
+    },
+    options: {
+        aspectRatio: 2,
+        series: [
+            {
+                type: ChartSeriesType.Treemap,
+                keyColumn: 'count',
+                keyGroups: ['category'],
+                borderColor: 'white',
+                colorFormatter: (index: number) => DATA[index].color,
+                labels: {
+                    align: 'center',
+                    display: true,
+                    maxLength: 10,
+                    labelsFormatter: (index: number ) => [DATA[index].category],
+                    color: ['white'],
+                    font: [{ size: 20 }],
+                    hoverColor: ['white', 'whiteSmoke'],
+                    hoverFont: [{ size: 21, weight: 'bold' }],
+                    position: 'middle',
+                    overflow: 'fit',
+                }
+            },
+        ],
+    },
+};
+TreemapChart.args = TreemapChartArgs;

packages/visualizations/src/components/Chart/Chart.svelte

@@ -103,9 +103,9 @@
                         const { type: seriesType } = options.series[0];
                         const format = options?.tooltip?.numberFormatter || defaultNumberFormat;
 
-                        // In this special chart type keyColumn is the data key to group values
+                        // Treemap tooltips only display the category count
                         if (seriesType === ChartSeriesType.Treemap) {
-                            return raw._data[options.series[0].keyColumn];
+                            return dataFrame[dataIndex][options.series[0].keyColumn];
                         }
 
                         // If the value has a label, we need to add it to the tooltip
@@ -148,7 +148,18 @@
 
                         return prefix + formattedValue + suffix;
                     },
+                    // Treemap tooltips only display the category count
+                    ...(options.series[0].type === ChartSeriesType.Treemap && {
+                        title() {
+                            return '';
+                        },
+                        beforeLabel() {
+                            return '';
+                        },
+                    }),
                 },
+                // Treemap tooltips only display the category count
+                ...(options.series[0].type === ChartSeriesType.Treemap && { displayColors: false }),
             },
             subtitle: {
                 display: false,
@@ -173,7 +184,7 @@
     }
 
     $: {
-        const labels = dataFrame.map((entry) => entry[labelColumn]);
+        const labels = dataFrame.map((entry) => (labelColumn ? entry[labelColumn] : ''));
         chartConfig = update(chartConfig, { data: { labels: { $set: labels } } });
     }
 

packages/visualizations/src/components/Chart/datasets.ts

@@ -2,7 +2,7 @@ import type { ChartDataset } from 'chart.js';
 import type { Options as DataLabelsOptions } from 'chartjs-plugin-datalabels/types/options';
 import type { ChartSeries, DataLabelsConfiguration, FillConfiguration } from './types';
 import type { DataFrame } from '../types';
-import { defaultCompactNumberFormat } from '../utils/formatter';
+import { defaultCompactNumberFormat, assureMaxLength } from '../utils/formatter';
 import { defaultValue, singleChartJsColor, multipleChartJsColors } from './utils';
 
 function chartJsFill(fill: FillConfiguration | undefined) {
@@ -124,12 +124,23 @@ export default function toDataset(df: DataFrame, s: ChartSeries): ChartDataset {
                       // eslint-disable-next-line @typescript-eslint/no-explicit-any
                       formatter(context: any) {
                           if (s.labels && s.labels.labelsFormatter) {
+                              const { maxLength } = s.labels;
+                              if (maxLength) {
+                                  const formattedLabels = s.labels.labelsFormatter(context.index);
+                                  if (Array.isArray(formattedLabels)) {
+                                      return formattedLabels.map((l) =>
+                                          assureMaxLength(l, maxLength)
+                                      );
+                                  }
+                                  return assureMaxLength(formattedLabels, maxLength);
+                              }
                               return s.labels.labelsFormatter(context.index);
                           }
                           return '';
                       },
                       font: s.labels.font,
                       color: s.labels.color,
+                      overflow: defaultValue(s.labels.overflow, 'cut'),
                       hoverColor: s.labels.hoverColor,
                       hoverFont: s.labels.hoverFont,
                       position: s.labels.position,

packages/visualizations/src/components/Chart/types.ts

@@ -228,6 +228,8 @@ export interface Treemap {
         hoverColor?: Color[] | Color;
         hoverFont?: { [key: string]: number | string }[] | { [key: string]: number | string };
         position?: 'top' | 'middle' | 'bottom';
+        overflow?: 'cut' | 'hidden' | 'fit';
+        maxLength?: number;
     };
 }