@geo2france/api-dashboard 1.6.1 → 1.7.0

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

@@ -5,6 +5,7 @@ interface IChartPieProps {
     unit?: string;
     title?: string;
     donut?: boolean;
+    other?: number | null;
 }
 export declare const ChartPie: React.FC<IChartPieProps>;
 export {};

package/dist/components/Charts/Pie.js

@@ -5,7 +5,8 @@ import { ChartBlockContext } from "../DashboardPage/Block";
 import { usePalette } from "../Palette/Palette";
 import { from, op } from "arquero";
 import { ChartEcharts } from "./ChartEcharts";
-export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false }) => {
+import { merge_others } from "../..";
+export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, donut = false, other = 5 }) => {
     const dataset = useDataset(dataset_id);
     const blockConfig = useContext(ChartBlockContext);
     const data = dataset?.data;
@@ -14,10 +15,17 @@ export const ChartPie = ({ dataset: dataset_id, nameKey, dataKey, unit, title, d
         dataExport: data
     };
     useEffect(() => blockConfig?.setConfig(block_config), [data]);
-    const chart_data = data && from(data).groupby(nameKey).rollup({ value: op.sum(dataKey) }).objects().map((d) => ({
-        name: d[nameKey],
-        value: d.value,
-    }));
+    const chart_data1 = data && data.length > 0
+        ? from(data)
+            .groupby(nameKey)
+            .rollup({ value: op.sum(dataKey) })
+            .objects()
+            .map((d) => ({
+            name: d[nameKey],
+            value: d.value,
+        }))
+        : [];
+    const chart_data = merge_others({ dataset: chart_data1 || [], min: other || -1 });
     const option = {
         color: usePalette({ nColors: chart_data?.length }),
         xAxis: { show: false }, yAxis: { show: false },

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

@@ -4,7 +4,6 @@
 interface IYearSerieProps {
     dataset: string;
     title?: string;
-    yearControl?: string;
     yearKey: string;
     valueKey: string;
     categoryKey?: string;

package/dist/components/Charts/YearSerie.js

@@ -6,27 +6,31 @@ import { from, op } from "arquero";
 import { useDataset } from "../Dataset/hooks";
 import { usePalette } from "../Palette/Palette";
 import { ChartEcharts } from "./ChartEcharts";
-export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, type: chart_type = 'bar', yearControl = 'year' }) => {
+export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yearKey, yearMark, stack: stack_input, type: chart_type = 'bar' }) => {
     const stack = stack_input || chart_type == 'line' ? false : true; // Pas de stack par défaut pour le type line
     const dataset = useDataset(dataset_id);
     const data = dataset?.data;
-    const chart_data = categoryKey ? data && from(data).groupby(yearKey, categoryKey) //Somme par année et categorykey
-        .rollup({ [valueKey]: op.sum(valueKey) })
-        .groupby(yearKey).orderby(yearKey).objects()
-        :
-            data && from(data).groupby(yearKey) //Somme par année seulement
-                .rollup({ [valueKey]: op.sum(valueKey) }).orderby(yearKey)
-                .objects();
-    const distinct_cat = categoryKey ?
-        data && from(data).rollup({ cat: op.array_agg_distinct(categoryKey) }).object().cat
-        :
-            [valueKey];
+    let chart_data = [];
+    let distinct_cat = [];
+    if (data && data.length > 0) {
+        const grouped_data = categoryKey ? from(data).groupby(yearKey, categoryKey) //Somme par année et categorykey
+            .rollup({ [valueKey]: op.sum(valueKey) })
+            .groupby(yearKey).orderby(yearKey)
+            :
+                from(data).groupby(yearKey) //Somme par année seulement
+                    .rollup({ [valueKey]: op.sum(valueKey) }).orderby(yearKey);
+        const all_years = from(data).groupby(yearKey).rollup({ [yearKey]: op.any(yearKey) });
+        const all_cats = categoryKey ? (from(data).groupby(categoryKey).rollup({ [categoryKey]: op.any(categoryKey) })) : from([{ 'cat': valueKey }]);
+        const full = all_years.cross(all_cats); // Contient chaque annee x catégorie (pour éviter les trous)
+        distinct_cat = all_cats.array(categoryKey || 'cat'); // Pour générer chaque serie
+        chart_data = full.join_left(grouped_data).objects();
+    }
     const COLORS = usePalette({ nColors: distinct_cat?.length }) || [];
-    const series = distinct_cat ? distinct_cat.map((cat, idx) => ({
+    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]]))
-            : chart_data?.map((row) => ([String(row[yearKey]), row[valueKey]])),
+        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],
         },
@@ -38,7 +42,7 @@ export const ChartYearSerie = ({ dataset: dataset_id, categoryKey, valueKey, yea
                 { xAxis: String(yearMark) }
             ]
         } : undefined
-    })) : [];
+    }));
     function tooltipFormatter(params) {
         if (!params || params.length === 0)
             return '';

package/dist/components/DashboardPage/Page.d.ts

@@ -39,5 +39,6 @@ interface IDSLDashboardPageProps {
     children: React.ReactNode;
     name?: string;
     columns?: number;
+    debug?: boolean;
 }
 export declare const DSL_DashboardPage: React.FC<IDSLDashboardPageProps>;

package/dist/components/DashboardPage/Page.js

@@ -40,7 +40,7 @@ export default DashboardPage;
 export const DatasetContext = createContext({});
 export const DatasetRegistryContext = createContext(() => { }); // A modifier, utiliser un seul context
 export const ControlContext = createContext(undefined);
-export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children }) => {
+export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, children, debug = false }) => {
     const [datasets, setdatasets] = useState({});
     const [palette, setPalette] = useState(DEFAULT_PALETTE);
     //const allDatasetLoaded = Object.values(datasets).every(d => !d.isFetching);
@@ -68,6 +68,9 @@ export const DSL_DashboardPage = ({ name = 'Tableau de bord', columns = 2, child
     const visible_components = childrenArray.filter((c) => c && getComponentKind(c) == 'other');
     const logic_components = childrenArray.filter((c) => getComponentKind(c) == 'logical');
     const control_components = childrenArray.filter((c) => getComponentKind(c) == 'control');
+    if (debug && !logic_components.some((c) => typeof c.type !== "string" && c.type.name === Debug.name)) {
+        logic_components.push(_jsx(Debug, {}, "debug_property"));
+    }
     return (_jsxs(_Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: name }) }), _jsx(DatasetRegistryContext.Provider, { value: pushDataset, children: _jsx(DatasetContext.Provider, { value: datasets, children: _jsxs(PaletteContext.Provider, { value: { palette, setPalette }, children: [control_components.length > 0 && _jsx(Header, { style: {
                                     padding: 12,
                                     position: "sticky",

package/dist/components/Dataset/Dataset.js

@@ -62,7 +62,7 @@ export const DSL_Dataset = ({ children, id, provider: provider_input, type: prov
     React.Children.toArray(children)
         .filter((c) => React.isValidElement(c))
         .filter((c) => typeof c.type != 'string' && c.type.name == Filter.name).forEach((c) => {
-        const value = String(c.props.children).trim() || controls?.[c.props.control];
+        const value = (typeof c.props.children === "string" ? c.props.children.trim() : c.props.children) || controls?.[c.props.control];
         filters.push({
             operator: c.props.operator || 'eq',
             value: value,

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

@@ -1,7 +1,7 @@
 import { CrudOperators } from "../../data_providers/types";
 interface IFilterProps {
     field: string;
-    children?: string;
+    children?: string | string[];
     control?: string;
     operator?: Exclude<CrudOperators, "or" | "and">;
 }

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { useChartData, useDashboardElement, useNoData } from "./components/Dashb
 export { useMapControl } from "./utils/useMapControl";
 export { BaseRecordToGeojsonPoint } from "./utils/baserecordtogeojsonpoint";
 export { cardStyles } from "./utils/cardStyles";
+export { merge_others } from "./utils/merge_others";
 import KeyFigure from "./components/KeyFigure/KeyFigure";
 import LoadingContainer from "./components/LoadingContainer/LoadingContainer";
 import FlipCard from "./components/FlipCard/FlipCard";

package/dist/index.js

@@ -8,6 +8,7 @@ export { useMapControl } from "./utils/useMapControl";
 // Helpers
 export { BaseRecordToGeojsonPoint } from "./utils/baserecordtogeojsonpoint";
 export { cardStyles } from "./utils/cardStyles";
+export { merge_others } from "./utils/merge_others";
 // Components
 import KeyFigure from "./components/KeyFigure/KeyFigure";
 import LoadingContainer from "./components/LoadingContainer/LoadingContainer";

package/dist/utils/merge_others.d.ts

@@ -0,0 +1,8 @@
+import { SimpleRecord } from "../types";
+interface MergeOthersOpts {
+    dataset: SimpleRecord[];
+    min: number;
+    other_cat_name?: string;
+}
+export declare const merge_others: ({ dataset, min, other_cat_name }: MergeOthersOpts) => SimpleRecord[];
+export {};

package/dist/utils/merge_others.js

@@ -0,0 +1,14 @@
+import { from, op } from "arquero";
+export const merge_others = ({ dataset, min, other_cat_name = 'Autres' }) => {
+    const total = dataset.reduce((acc, d) => acc + d.value, 0);
+    const small = dataset.filter(d => (d.value / total) * 100 < min);
+    const large = dataset.filter(d => (d.value / total) * 100 >= min);
+    if (small.length > 1) {
+        const others_row = from(small).rollup({ value: op.sum('value') }).objects().map((d) => ({
+            name: other_cat_name,
+            value: d.value
+        }));
+        return [...large, ...others_row];
+    }
+    return dataset;
+};

package/package.json

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