@geo2france/api-dashboard 1.14.0 → 1.15.0

package/dist/components/Charts/Pie.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useDataset } from "../Dataset/hooks";
-import { usePalette } from "../Palette/Palette";
+import { usePalette, usePaletteLabels } from "../Palette/Palette";
 import { from, op } from "arquero";
 import { ChartEcharts } from "./ChartEcharts";
 import { merge_others } from "../..";
@@ -23,13 +23,19 @@ export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, d
         }))
         : [];
     const chart_data = merge_others({ dataset: chart_data1 || [], min: other || -1 });
+    const colors = usePalette({ nColors: chart_data?.length });
+    const colors_labels = usePaletteLabels();
     const option = {
-        color: usePalette({ nColors: chart_data?.length }),
         xAxis: { show: false }, yAxis: { show: false },
         series: [{
                 type: 'pie',
+                color: usePalette({ nColors: chart_data?.length }),
+                itemStyle: {
+                    /* Use label's color if any, otherwise fallback to Echarts calculated color */
+                    color: (p) => { console.log(p.color, p); return colors_labels.find(i => i.label.toLowerCase() === p.name.toLowerCase())?.color ?? colors?.[p.dataIndex] ?? '#000'; }
+                },
                 data: chart_data,
-                radius: donut ? ['40%', '75%'] : [0, '75%']
+                radius: donut ? ['40%', '75%'] : [0, '75%'],
             }],
         tooltip: {
             show: true,

package/dist/components/Charts/YearSerie.js

@@ -4,7 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import { from, op } from "arquero";
 import { useDataset } from "../Dataset/hooks";
-import { usePalette } from "../Palette/Palette";
+import { usePalette, usePaletteLabels } from "../Palette/Palette";
 import { ChartEcharts } from "./ChartEcharts";
 import { useBlockConfig } from "../DashboardPage/Block";
 export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, title, type: chart_type = 'bar' }) => {
@@ -31,13 +31,14 @@ export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yea
         chart_data = full.join_left(grouped_data).objects();
     }
     const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
+    const colors_labels = usePaletteLabels();
     const series = distinct_cat.map((cat, idx) => ({
         name: cat,
         type: chart_type === 'area' ? 'line' : chart_type,
         data: categoryKey ? chart_data?.filter((row) => row[categoryKey] === cat).map((row) => ([String(row[yearKey]), row[valueKey] || 0]))
             : chart_data?.map((row) => ([String(row[yearKey]), row[valueKey] || 0])),
         itemStyle: {
-            color: COLORS && COLORS[idx % COLORS.length],
+            color: colors_labels.find(i => i.label.toLowerCase() === cat.toLowerCase())?.color ?? (COLORS && COLORS[idx % COLORS.length]),
         },
         stack: stack ? 'total' : undefined,
         areaStyle: chart_type === 'area' ? {} : undefined,

package/dist/components/Map/Map.js

@@ -6,7 +6,7 @@ import { useDataset } from '../Dataset/hooks';
 import bbox from '@turf/bbox';
 import { getType } from '@turf/invariant';
 import { feature, featureCollection, point } from '@turf/helpers';
-import { usePalette } from '../Palette/Palette';
+import { usePalette, usePaletteLabels } from '../Palette/Palette';
 import { from, op } from 'arquero';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { LegendControl } from '../MapLegend/MapLegend';
@@ -86,9 +86,10 @@ export const MapLayer = ({ dataset, categoryKey, color = 'red', type = 'circle',
     const values = (type_value === 'string') && categoryKey && data?.data && from(data?.data).rollup({ a: op.array_agg_distinct(categoryKey) }).get('a', 0) || undefined;
     /** Couleurs de la palette */
     const colors = usePalette({ nColors: Array.isArray(values) ? values?.length : 1 });
+    const colors_labels = usePaletteLabels();
     const match = Array.isArray(values) ? values?.map((v, i) => ({
         val: v,
-        color: colors?.[i],
+        color: colors_labels.find(i => i.label.toLowerCase() == v.toLowerCase())?.color ?? colors?.[i],
     })) : undefined;
     /** Expression mapLibre qui permet de mapper les valeurs et les couleurs de la palette */
     const expression = match && categoryKey

package/dist/components/Palette/Palette.d.ts

@@ -3,6 +3,11 @@ type PaletteModeType = 'rgb' | 'hsl' | 'lab' | 'lrgb' | 'lch';
 export interface PaletteType {
     steps?: string[];
     mode?: PaletteModeType;
+    /**
+    * Mapping optionnel de libellés vers des couleurs.
+    * Exemple : `labels={{'oui':'#0f0', 'non':'#f00'}}
+    * */
+    labels?: Record<string, string>;
 }
 type PaletteContextType = {
     palette: PaletteType;
@@ -13,6 +18,14 @@ interface UsePaletteProps {
     nColors?: number;
 }
 export declare const usePalette: ({ nColors }: UsePaletteProps) => string[] | undefined;
+/**
+ * Normalise les labels de la palette en tableau `{ label, color }`.
+ * Retourne un tableau vide si aucun label n’est défini.
+ */
+export declare const usePaletteLabels: () => {
+    label: string;
+    color: string | undefined;
+}[];
 export declare const Palette: React.FC<PaletteType>;
 export declare const PalettePreview: React.FC;
 export {};

package/dist/components/Palette/Palette.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Tag } from "antd";
 import chroma from "chroma-js";
 import { createContext, useContext, useEffect } from "react";
@@ -12,11 +12,23 @@ export const usePalette = ({ nColors }) => {
     }
     return palette_info?.steps && chroma.scale(palette_info.steps).mode(palette_info.mode || 'hsl').colors(nColors);
 };
+/**
+ * Normalise les labels de la palette en tableau `{ label, color }`.
+ * Retourne un tableau vide si aucun label n’est défini.
+ */
+export const usePaletteLabels = () => {
+    const palette_context = useContext(PaletteContext);
+    const palette_info = palette_context?.palette;
+    return Object.keys(palette_info?.labels || {}).map(key => ({
+        label: key,
+        color: palette_info?.labels?.[key]
+    }));
+};
 /*
 * Composant permettant à l'utilisateur de définir une palette pour sa page
 */
-export const Palette = ({ steps, mode }) => {
-    const palette = { steps, mode };
+export const Palette = ({ steps, mode, labels }) => {
+    const palette = { steps, mode, labels };
     const palette_context = useContext(PaletteContext);
     useEffect(() => {
         palette_context?.setPalette(palette);
@@ -25,5 +37,6 @@ export const Palette = ({ steps, mode }) => {
 };
 export const PalettePreview = ({}) => {
     const colors = usePalette({ nColors: 10 }) || [];
-    return (_jsx(_Fragment, { children: colors.map((color) => (_jsx(Tag, { color: color, children: color }, color))) }));
+    const colors_labels = usePaletteLabels();
+    return (_jsxs(_Fragment, { children: [colors.map((color) => (_jsx(Tag, { color: color, children: color }, color))), _jsx("br", {}), "Labels : ", colors_labels.map(e => _jsx(Tag, { color: e.color, children: e.label }, e.label))] }));
 };

package/dist/dsl/index.d.ts

@@ -12,7 +12,7 @@ import { DSL_Control as Control, useAllControls, useControl } from "../component
 import { Radio } from "../components/Control/Radio";
 import { Select } from "../components/Control/Select";
 import { Input } from "antd";
-import { Palette, usePalette, PalettePreview } from "../components/Palette/Palette";
+import { Palette, usePalette, PalettePreview, usePaletteLabels } from "../components/Palette/Palette";
 import { Debug } from "../components/Debug/Debug";
 import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
@@ -20,4 +20,4 @@ import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
 import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer };

package/dist/dsl/index.js

@@ -12,7 +12,7 @@ import { DSL_Control as Control, useAllControls, useControl } from "../component
 import { Radio } from "../components/Control/Radio";
 import { Select } from "../components/Control/Select";
 import { Input } from "antd";
-import { Palette, usePalette, PalettePreview } from "../components/Palette/Palette";
+import { Palette, usePalette, PalettePreview, usePaletteLabels } from "../components/Palette/Palette";
 import { Debug } from "../components/Debug/Debug";
 import { Join } from "../components/Dataset/Join";
 import { ChartEcharts } from "../components/Charts/ChartEcharts";
@@ -20,4 +20,4 @@ import { useBlockConfig } from "../components/DashboardPage/Block";
 import { Statistics, StatisticsCollection } from "../components/Charts/Statistics";
 import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, PalettePreview, Debug, Map, MapLayer };
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geo2france/api-dashboard",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "private": false,
   "description": "Build dashboards with JSX/TSX",
   "main": "dist/index.js",