feat(dashboard): add indicator widget type

apps/geolibre-desktop/src/components/panels/DashboardPanel.tsx

@@ -1,4 +1,4 @@
-import type { DashboardWidget } from "@geolibre/core";
+import type { DashboardWidget, IndicatorAggregation } from "@geolibre/core";
 import { MAX_DASHBOARD_COLUMNS, MIN_DASHBOARD_COLUMNS, useAppStore } from "@geolibre/core";
 import { Button, Select } from "@geolibre/ui";
 import {
@@ -27,6 +27,49 @@ const DEFAULT_DASHBOARD_HEIGHT = 360;
 // fills and resizes with the panel height (issue #728).
 const MIN_DASHBOARD_ROW_HEIGHT = 200;
 
+/** Compute the indicator value from layer data and an aggregation. Returns
+ * null when there is no numeric data to aggregate. Count works on any layer. */
+function computeIndicator(
+  rows: Record<string, unknown>[],
+  field: string | undefined,
+  aggregation: IndicatorAggregation,
+): number | null {
+  if (aggregation === "count") {
+    return rows.length;
+  }
+  if (!field) return null;
+  const values = rows
+    .map((r) => r[field])
+    .filter((v): v is number => typeof v === "number" && !Number.isNaN(v));
+  if (values.length === 0) return null;
+  switch (aggregation) {
+    case "sum":
+      return values.reduce((a, b) => a + b, 0);
+    case "mean":
+      return values.reduce((a, b) => a + b, 0) / values.length;
+    case "min":
+      return Math.min(...values);
+    case "max":
+      return Math.max(...values);
+    case "median": {
+      const sorted = [...values].sort((a, b) => a - b);
+      const mid = Math.floor(sorted.length / 2);
+      return sorted.length % 2 !== 0 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2;
+    }
+    default:
+      return null;
+  }
+}
+
+/** Format a number for display in the indicator tile. Large numbers get
+ * locale-aware grouping; small numbers keep up to 2 decimal places. */
+function formatIndicatorValue(value: number): string {
+  if (Number.isInteger(value)) {
+    return value.toLocaleString();
+  }
+  return value.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
 /** Turn a stored widget into the render-side {@link ChartSpec}. */
 function widgetToSpec(widget: DashboardWidget): ChartSpec {
   return {
@@ -351,6 +394,11 @@ function WidgetCard({
         return `${t("dashboard.chartType.box")} · ${widget.field ?? ""}`;
       case "pie":
         return `${t("dashboard.chartType.pie")} · ${widget.category ?? ""}`;
+      case "indicator": {
+        const agg = widget.indicatorAggregation ?? "count";
+        const aggLabel = t(`dashboard.indicatorAggregation.${agg}`);
+        return widget.field ? `${aggLabel} · ${widget.field}` : aggLabel;
+      }
     }
   };
   const title = widget.title?.trim() || defaultWidgetTitle();
@@ -412,19 +460,45 @@ function WidgetCard({
         </div>
       </div>
 
-      {/* [&>svg] targets ChartView's chart SVG, which is a direct DOM child
-          (React Fragments emit no nodes): it flexes to fill, min-h-0 lets it
-          shrink past its intrinsic aspect-ratio height, and preserveAspectRatio
-          letterboxes it. Update this if a chart ever wraps its SVG (issue #728). */}
-      <div className="flex min-h-0 flex-1 flex-col [&>svg]:min-h-0 [&>svg]:flex-1">
-        {data.hasData ? (
-          <ChartView result={result} color={widget.color} />
-        ) : (
-          <p className="flex flex-1 items-center justify-center py-4 text-center text-xs text-muted-foreground">
-            {t("dashboard.noData")}
-          </p>
-        )}
-      </div>
+      {/* Indicator widgets render a KPI tile instead of a chart. */}
+      {widget.type === "indicator" ? (
+        <div className="flex min-h-0 flex-1 flex-col items-center justify-center gap-1">
+          {(() => {
+            const agg = widget.indicatorAggregation ?? "count";
+            const value = computeIndicator(data.rows, widget.field, agg);
+            if (value === null) {
+              return (
+                <p className="text-center text-xs text-muted-foreground">{t("dashboard.noData")}</p>
+              );
+            }
+            const formatted = formatIndicatorValue(value);
+            const colorStyle = widget.color ? { color: widget.color } : undefined;
+            return (
+              <>
+                <span className="text-3xl font-bold leading-none tracking-tight" style={colorStyle}>
+                  {widget.prefix ?? ""}
+                  {formatted}
+                  {widget.suffix ?? ""}
+                </span>
+                <span className="text-xs text-muted-foreground">
+                  {t(`dashboard.indicatorAggregation.${agg}`)}
+                  {widget.field ? ` · ${widget.field}` : ""}
+                </span>
+              </>
+            );
+          })()}
+        </div>
+      ) : (
+        <div className="flex min-h-0 flex-1 flex-col [&>svg]:min-h-0 [&>svg]:flex-1">
+          {data.hasData ? (
+            <ChartView result={result} color={widget.color} />
+          ) : (
+            <p className="flex flex-1 items-center justify-center py-4 text-center text-xs text-muted-foreground">
+              {t("dashboard.noData")}
+            </p>
+          )}
+        </div>
+      )}
     </div>
   );
 }

apps/geolibre-desktop/src/components/panels/WidgetEditorDialog.tsx

@@ -1,4 +1,4 @@
-import type { DashboardWidget } from "@geolibre/core";
+import type { DashboardWidget, IndicatorAggregation } from "@geolibre/core";
 import {
   Button,
   ColorField,
@@ -65,6 +65,10 @@ export function WidgetEditorDialog({
   const [aggregation, setAggregation] = useState<BarAggregation>("count");
   const [valueField, setValueField] = useState("");
   const [title, setTitle] = useState("");
+  // "indicator" widget fields (issue #1381).
+  const [indicatorAggregation, setIndicatorAggregation] = useState<IndicatorAggregation>("count");
+  const [prefix, setPrefix] = useState("");
+  const [suffix, setSuffix] = useState("");
   // "" means no custom color: fall back to the theme primary / palette.
   const [color, setColor] = useState("");
 
@@ -82,6 +86,9 @@ export function WidgetEditorDialog({
     setValueField(widget?.valueField ?? "");
     setTitle(widget?.title ?? "");
     setColor(widget?.color ?? "");
+    setIndicatorAggregation(widget?.indicatorAggregation ?? "count");
+    setPrefix(widget?.prefix ?? "");
+    setSuffix(widget?.suffix ?? "");
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open, widget]);
 
@@ -97,13 +104,16 @@ export function WidgetEditorDialog({
   // sum/average rather than count); scatter needs two numeric fields so x and y
   // aren't forced to the same column; the rest need one numeric field.
   const isCategorical = type === "bar" || type === "pie";
+  const isIndicator = type === "indicator";
   const canSave =
     layerId !== "" &&
-    (isCategorical
-      ? hasCategory && (aggregation === "count" || hasNumeric)
-      : type === "scatter"
-        ? numericCols.length >= 2
-        : hasNumeric);
+    (isIndicator
+      ? indicatorAggregation === "count" || hasNumeric
+      : isCategorical
+        ? hasCategory && (aggregation === "count" || hasNumeric)
+        : type === "scatter"
+          ? numericCols.length >= 2
+          : hasNumeric);
 
   const save = () => {
     if (!canSave) return;
@@ -134,6 +144,16 @@ export function WidgetEditorDialog({
       next.aggregation = agg;
       if (agg !== "count") next.valueField = pick(valueField, numericCols);
     }
+    if (type === "indicator") {
+      next.indicatorAggregation = indicatorAggregation;
+      if (indicatorAggregation !== "count") {
+        next.field = pick(field, numericCols);
+      }
+      const trimmedPrefix = prefix.trim();
+      if (trimmedPrefix) next.prefix = trimmedPrefix;
+      const trimmedSuffix = suffix.trim();
+      if (trimmedSuffix) next.suffix = trimmedSuffix;
+    }
     onSave(next);
     onOpenChange(false);
   };
@@ -207,6 +227,7 @@ export function WidgetEditorDialog({
                     <option value="pie" disabled={!hasCategory}>
                       {t("dashboard.chartType.pie")}
                     </option>
+                    <option value="indicator">{t("dashboard.chartType.indicator")}</option>
                   </Select>
                 </div>
 
@@ -312,6 +333,72 @@ export function WidgetEditorDialog({
                     )}
                   </>
                 )}
+
+                {type === "indicator" && (
+                  <>
+                    <div className="grid gap-1.5">
+                      <Label htmlFor="widget-indicator-agg">
+                        {t("dashboard.editor.aggregate")}
+                      </Label>
+                      <Select
+                        id="widget-indicator-agg"
+                        className="w-32"
+                        value={indicatorAggregation}
+                        onChange={(event) =>
+                          setIndicatorAggregation(event.target.value as IndicatorAggregation)
+                        }
+                      >
+                        <option value="count">{t("dashboard.indicatorAggregation.count")}</option>
+                        <option value="sum" disabled={!hasNumeric}>
+                          {t("dashboard.indicatorAggregation.sum")}
+                        </option>
+                        <option value="mean" disabled={!hasNumeric}>
+                          {t("dashboard.indicatorAggregation.mean")}
+                        </option>
+                        <option value="min" disabled={!hasNumeric}>
+                          {t("dashboard.indicatorAggregation.min")}
+                        </option>
+                        <option value="max" disabled={!hasNumeric}>
+                          {t("dashboard.indicatorAggregation.max")}
+                        </option>
+                        <option value="median" disabled={!hasNumeric}>
+                          {t("dashboard.indicatorAggregation.median")}
+                        </option>
+                      </Select>
+                    </div>
+                    {indicatorAggregation !== "count" && (
+                      <FieldSelect
+                        id="widget-indicator-field"
+                        label={t("dashboard.editor.field")}
+                        value={pick(field, numericCols)}
+                        options={numericCols}
+                        onChange={setField}
+                      />
+                    )}
+                    <div className="flex gap-2">
+                      <div className="grid gap-1.5">
+                        <Label htmlFor="widget-prefix">{t("dashboard.editor.prefix")}</Label>
+                        <Input
+                          id="widget-prefix"
+                          className="w-20"
+                          value={prefix}
+                          placeholder="€"
+                          onChange={(event) => setPrefix(event.target.value)}
+                        />
+                      </div>
+                      <div className="grid gap-1.5">
+                        <Label htmlFor="widget-suffix">{t("dashboard.editor.suffix")}</Label>
+                        <Input
+                          id="widget-suffix"
+                          className="w-20"
+                          value={suffix}
+                          placeholder=" ha"
+                          onChange={(event) => setSuffix(event.target.value)}
+                        />
+                      </div>
+                    </div>
+                  </>
+                )}
               </div>
             )}
 

apps/geolibre-desktop/src/i18n/locales/en.json

@@ -2675,13 +2675,22 @@
       "bar": "Bar",
       "line": "Line",
       "box": "Box plot",
-      "pie": "Pie"
+      "pie": "Pie",
+      "indicator": "Indicator"
     },
     "aggregate": {
       "count": "Count",
       "sum": "Sum",
       "mean": "Average"
     },
+    "indicatorAggregation": {
+      "count": "Count",
+      "sum": "Sum",
+      "mean": "Average",
+      "min": "Minimum",
+      "max": "Maximum",
+      "median": "Median"
+    },
     "chart": {
       "emptyNumeric": "No numeric values to plot.",
       "emptyScatter": "No rows have both fields set to a number.",
@@ -2707,6 +2716,8 @@
       "category": "Category",
       "aggregate": "Aggregate",
       "value": "Value",
+      "prefix": "Prefix",
+      "suffix": "Suffix",
       "titleLabel": "Title",
       "titlePlaceholder": "Optional title",
       "color": "Color",

apps/geolibre-desktop/src/i18n/locales/es.json

@@ -2669,13 +2669,22 @@
       "bar": "Barras",
       "line": "Líneas",
       "box": "Diagrama de caja",
-      "pie": "Circular"
+      "pie": "Circular",
+      "indicator": "Indicador"
     },
     "aggregate": {
       "count": "Recuento",
       "sum": "Suma",
       "mean": "Promedio"
     },
+    "indicatorAggregation": {
+      "count": "Recuento",
+      "sum": "Suma",
+      "mean": "Promedio",
+      "min": "Mínimo",
+      "max": "Máximo",
+      "median": "Mediana"
+    },
     "chart": {
       "emptyNumeric": "No hay valores numéricos que graficar.",
       "emptyScatter": "Ninguna fila tiene ambos campos establecidos como número.",
@@ -2701,6 +2710,8 @@
       "category": "Categoría",
       "aggregate": "Agregado",
       "value": "Valor",
+      "prefix": "Prefijo",
+      "suffix": "Sufijo",
       "titleLabel": "Título",
       "titlePlaceholder": "Título opcional",
       "color": "Color",