@geo2france/api-dashboard 1.18.0 → 1.19.0

package/dist/components/Charts/ChartComparison.d.ts

@@ -0,0 +1,28 @@
+import { EChartsOption } from "echarts";
+import { useDatasetInput } from "../Dataset/hooks";
+type labelType = "percent" | "value" | "category" | "none";
+export interface ChartComparisonProps {
+    /** Identifiant du dataset */
+    dataset?: useDatasetInput;
+    /** Nom de la colonne qui contient les valeurs numériques */
+    valueKey: string;
+    /** Nom de la colonne qui contient les catégories */
+    nameKey: string;
+    /** Type de graphique */
+    chartType?: 'bar' | 'pie' | 'donut';
+    /** Unité à afficher */
+    unit?: string;
+    /** Titre du graphique */
+    title?: string;
+    /** Valeur à afficher en étiquette */
+    label?: labelType;
+    /** Couleur unique pour le graphique */
+    singleColor?: boolean;
+    /** Options suplémentaires passées à Echarts
+     * https://echarts.apache.org/en/option.html
+    */
+    option?: EChartsOption;
+}
+/** Composant de visualisation destiné à comparer des catégories au sein d’un dataset. */
+export declare const ChartComparison: React.FC<ChartComparisonProps>;
+export {};

package/dist/components/Charts/ChartComparison.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useDataset } from "../Dataset/hooks";
+import { ChartEcharts, useBlockConfig, usePalette, usePaletteLabels } from "../../dsl";
+import { from, op } from "arquero";
+import deepMerge from "../../utils/deepmerge";
+/** Composant de visualisation destiné à comparer des catégories au sein d’un dataset. */
+export const ChartComparison = ({ dataset: dataset_id, title, nameKey, valueKey, chartType = 'bar', unit, singleColor = false, label: label_in, option: custom_option = {} }) => {
+    const dataset = useDataset(dataset_id);
+    const data = dataset?.data;
+    useBlockConfig({
+        title: title,
+        dataExport: data
+    });
+    // Label par défaut selon le type de graphique
+    const label = label_in ?? ((chartType === 'pie' || chartType === 'donut') ? 'category' : 'none');
+    const chart_data1 = data && data.length > 0
+        ? from(data.filter(e => e[valueKey]))
+            .groupby(nameKey)
+            .rollup({ value: op.sum(valueKey) })
+            .orderby('value')
+            .objects()
+            .map((d) => ([
+            d[nameKey], //0
+            d.value, //1
+        ]))
+        : [];
+    const colors_libels = usePaletteLabels();
+    const colors_palette = usePalette({ nColors: chart_data1.length }) || ['#d4d4d4'];
+    // Total, utilisé pour les pourcentage
+    const total = chart_data1?.reduce((sum, item) => sum + item[1], 0);
+    const labelFormatter = (v) => {
+        if (!label || label == 'none')
+            return '';
+        const value = (chartType === 'pie' || chartType === 'donut') ?
+            v?.value
+            : v?.value?.[1];
+        const name = v?.name;
+        switch (label) {
+            case 'percent': {
+                return ((100 * value / total).toLocaleString(undefined, {
+                    maximumFractionDigits: 0,
+                }) + ' %');
+            }
+            case 'value':
+                return `${value.toLocaleString(undefined, {
+                    maximumFractionDigits: 0,
+                })}  ${unit || ''}`;
+            case 'category':
+                return name;
+            default:
+                return '';
+        }
+    };
+    const serie_common = {
+        itemStyle: {
+            color: (p) => singleColor ? colors_palette?.[0] :
+                colors_libels.find(c => c.label == p.data[0] || c.label == p.name)?.color || colors_palette?.[p.dataIndex]
+        },
+    };
+    const serie = chartType == 'bar' ?
+        {
+            type: 'bar',
+            data: chart_data1?.map(r => [r[0], r[1]]),
+            label: {
+                show: label && label !== 'none',
+                position: 'right',
+                formatter: labelFormatter
+            },
+            encode: {
+                x: 1,
+                y: 0
+            },
+            ...serie_common,
+        } :
+        {
+            type: 'pie',
+            radius: chartType == 'donut' ? ['40%', '75%'] : [0, '75%'],
+            data: chart_data1?.map(r => ({ name: r[0], value: r[1] })),
+            label: {
+                show: label && label !== 'none',
+                formatter: labelFormatter
+            },
+            ...serie_common,
+        };
+    const option = {
+        tooltip: {
+            show: true,
+            valueFormatter: (v) => `${v?.toLocaleString(undefined, { maximumFractionDigits: 0 })} t`
+        },
+        yAxis: { show: chartType == 'bar', type: 'category' },
+        xAxis: { show: chartType == 'bar', type: 'value', axisLabel: { formatter: (v) => `${(v).toLocaleString()} ${unit}` } },
+        series: [serie],
+    };
+    return _jsx(ChartEcharts, { option: deepMerge(option, custom_option) });
+};

package/dist/components/Charts/Pie.d.ts

@@ -1,8 +1,9 @@
+import { useDatasetInput } from "../Dataset/hooks";
 import { EChartsOption, LabelFormatterCallback } from "echarts";
 import type { CallbackDataParams } from 'echarts/types/dist/shared';
 export interface IChartPieProps {
     /** Identifiant du dataset */
-    dataset?: string;
+    dataset?: useDatasetInput;
     /** Nom de la colonne qui contient les valeurs numériques */
     dataKey: string;
     /** Nom de la colonne qui contient les catégories */

package/dist/components/Charts/Statistics.d.ts

@@ -1,4 +1,5 @@
 import { ReactElement } from "react";
+import { useDatasetInput } from "../Dataset/hooks";
 import { SimpleRecord } from "../../types";
 type comparwithType = "first" | "previous";
 type aggregateType = "last" | "first" | "sum" | "lastNotNull" | "min" | "max" | "count" | "mean" | "countDistinct" | "countMissing";
@@ -13,8 +14,8 @@ interface ICallbackParams {
     compareValue: number;
 }
 export interface StatisticsProps {
-    /** Identifiant du jeu de données */
-    dataset: string;
+    /** Identifiant du jeu de données ou tableau de valeurs */
+    dataset: useDatasetInput;
     /** Nom de la colonne qui contient les valeurs */
     dataKey: string;
     /** Texte à afficher après l'évolution */
@@ -29,7 +30,7 @@ export interface StatisticsProps {
     unit?: string;
     /** Inverser les couleurs (rouge/vert) de l'évolution */
     invertColor?: boolean;
-    /** Icône (composant ou nom de l'icône sur Iconify.js ) */
+    /** Icône. Composant ou nom de l'icône sur https://icon-sets.iconify.design/ */
     icon?: ReactElement | string;
     /** Texte à afficher dans le tooltip d'aide */
     help?: string;
@@ -37,7 +38,7 @@ export interface StatisticsProps {
     compareWith?: comparwithType;
     /** Texte d'annotation (remplace evolution si définie) */
     annotation?: React.ReactNode | ((param: ICallbackParams) => React.ReactNode);
-    /** Fonction a appliquer avant rendu */
+    /** Fonction de formattager a appliquer avant rendu */
     valueFormatter?: ((param: ICallbackParams) => string);
     /** Méthode d'aggrégation */
     aggregate?: aggregateType;
@@ -45,17 +46,7 @@ export interface StatisticsProps {
     animation?: boolean;
 }
 /**
- * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.
- *
- * Affiche :
- * - La dernière valeur du dataset
- * - Unité et picto
- * - Évolution par rapport à la première ou l'avant-dernière valeur
- * - Couleur selon évolution positive/négative
- * - Tooltip d'aide si fourni
- *
- * @param {StatisticsProps} props - Propriétés du composant
- * @returns {ReactElement} Carte statistique
+ * Composant `Statistics` affichant une valeur depuis un dataset.
  */
 export declare const Statistics: React.FC<StatisticsProps>;
 export interface StatisticsCollectionProps {
@@ -73,7 +64,7 @@ export interface StatisticsCollectionProps {
     title?: string;
 }
 /**
- * `StatisticsCollection` permet de regrouper plusieurs cartes statistiques
+ * `StatisticsCollection` permet de regrouper plusieurs cartes [`Statistics`](?path=/docs/dataviz-statistics--docs)
  * dans un bloc
  * ```
  */

package/dist/components/Charts/Statistics.js

@@ -10,19 +10,13 @@ import CountUp from "react-countup";
 const { Text, Paragraph } = Typography;
 // DEV : modele cf https://bootstrapbrain.com/component/bootstrap-statistics-card-example/
 /**
- * Composant `Statistics` affichant une valeur d'un dataset avec son évolution.
- *
- * Affiche :
- * - La dernière valeur du dataset
- * - Unité et picto
- * - Évolution par rapport à la première ou l'avant-dernière valeur
- * - Couleur selon évolution positive/négative
- * - Tooltip d'aide si fourni
- *
- * @param {StatisticsProps} props - Propriétés du composant
- * @returns {ReactElement} Carte statistique
+ * Composant `Statistics` affichant une valeur depuis un dataset.
  */
-export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix, title, icon: icon_input, color, invertColor = false, help, compareWith, relativeEvolution = false, valueFormatter = (param) => (param.value.toLocaleString()), annotation, aggregate = "last", animation = false }) => {
+export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix, // A supprimer
+title, icon: icon_input, color, invertColor = false, // A supprimer
+help, compareWith, // A supprimer
+relativeEvolution = false, // A supprimer
+valueFormatter = (param) => (param.value.toLocaleString()), annotation, aggregate = "last", animation = false }) => {
     const icon = typeof icon_input === "string" ? _jsx(Icon, { icon: icon_input }) : icon_input;
     const dataset = useDataset(dataset_id);
     const { row, value } = aggregator({ data: dataset?.data, dataKey, aggregate });
@@ -64,7 +58,7 @@ export const Statistics = ({ dataset: dataset_id, dataKey, unit, evolutionSuffix
 };
 ;
 /**
- * `StatisticsCollection` permet de regrouper plusieurs cartes statistiques
+ * `StatisticsCollection` permet de regrouper plusieurs cartes [`Statistics`](?path=/docs/dataviz-statistics--docs)
  * dans un bloc
  * ```
  */

package/dist/components/Charts/YearSerie.d.ts

@@ -1,9 +1,10 @@
 /**
  * Graphique standard pour afficher des données annuelles
  */
+import { useDatasetInput } from "../Dataset/hooks";
 import { EChartsOption, SeriesOption } from "echarts";
 export interface IYearSerieProps {
-    dataset: string;
+    dataset: useDatasetInput;
     title?: string;
     yearKey: string;
     valueKey: string;

package/dist/components/Dataset/hooks.d.ts

@@ -1,5 +1,7 @@
 import { dataset } from "./Dataset";
-export declare const useDataset: (dataset_id?: string) => dataset | undefined;
+import { SimpleRecord } from "../..";
+export type useDatasetInput = string | SimpleRecord[];
+export declare const useDataset: (dataset_id?: useDatasetInput) => dataset | undefined;
 export declare const useAllDatasets: () => dataset[];
 export declare const useDatasets: (dataset_ids?: string[]) => dataset[];
 /**

package/dist/components/Dataset/hooks.js

@@ -1,27 +1,9 @@
 import { useCallback, useContext, useState } from "react";
 import { DatasetRegistryContext } from "./context";
-const demo_dataset = {
-    id: 'demo_dataset',
-    isError: false,
-    isFetching: false,
-    resource: 'demo_dataset',
-    data: [
-        { name: 'Mercure', type: 'Planète', satellites: 0, diameter_km: 4879 },
-        { name: 'Vénus', type: 'Planète', satellites: 0, diameter_km: 12104 },
-        { name: 'Terre', type: 'Planète', satellites: 1, diameter_km: 12742 },
-        { name: 'Mars', type: 'Planète', satellites: 2, diameter_km: 6779 },
-        { name: 'Jupiter', type: 'Planète', satellites: 79, diameter_km: 139820 },
-        { name: 'Saturne', type: 'Planète', satellites: 83, diameter_km: 116460 },
-        { name: 'Uranus', type: 'Planète', satellites: 27, diameter_km: 50724 },
-        { name: 'Neptune', type: 'Planète', satellites: 14, diameter_km: 49244 },
-        { name: 'Pluton', type: 'Planète naine', satellites: 5, diameter_km: 2370 },
-        { name: 'Cérès', type: 'Astéroïde', satellites: 0, diameter_km: 946 },
-    ]
-};
 // 🔹 Hook pour récupérer un dataset unique
 export const useDataset = (dataset_id) => {
-    if (dataset_id == 'demo_dataset') {
-        return demo_dataset;
+    if (Array.isArray(dataset_id)) { //inline dataset
+        return { data: dataset_id, isFetching: false, isError: false, resource: '', id: '' };
     }
     const datasetRegistry = useContext(DatasetRegistryContext);
     if (dataset_id) {

package/dist/components/Palette/Palette.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Tag } from "antd";
 import chroma from "chroma-js";
 import { createContext, useContext, useEffect } from "react";
-export const DEFAULT_PALETTE = { steps: ['red', 'green', 'blue'], mode: 'hsl' };
+export const DEFAULT_PALETTE = { steps: ['#264653', '#2a9d8f', '#e9c46a', '#f4a261', '#e76f51'], mode: 'hsl' };
 export const PaletteContext = createContext({ palette: DEFAULT_PALETTE, setPalette: () => { } });
 export const usePalette = ({ nColors }) => {
     const palette_context = useContext(PaletteContext);

package/dist/dsl/index.d.ts

@@ -22,4 +22,5 @@ import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
 import { LegendControl } from "../components/MapLegend/MapLegend";
 import { Intro } from "../components/DashboardPage/Intro";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };
+import { ChartComparison } from "../components/Charts/ChartComparison";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, ChartComparison, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };

package/dist/dsl/index.js

@@ -22,4 +22,5 @@ import { MapLayer, Map } from "../components/Map/Map";
 import { Section } from "../components/DashboardPage/Section";
 import { LegendControl } from "../components/MapLegend/MapLegend";
 import { Intro } from "../components/DashboardPage/Intro";
-export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };
+import { ChartComparison } from "../components/Charts/ChartComparison";
+export { Dashboard, Dataset, Provider, Transform, Join, Filter, Section, Intro, DataPreview, ChartEcharts, ChartPie, ChartYearSerie, ChartComparison, Statistics, StatisticsCollection, useDataset, useDatasets, useAllDatasets, useBlockConfig, Producer, Control, useControl, useAllControls, Radio, Select, Input, Palette, usePalette, usePaletteLabels, PalettePreview, Debug, Map, MapLayer, LegendControl };

package/package.json

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