@datosgeo-atdt/geo-ui 0.9.6 → 0.10.1

package/README.md

@@ -5,6 +5,7 @@ Librería de componentes reutilizables en React para aplicaciones geoespaciales.
 ## Características
 
 - **MapaPMTiles**: Componente para renderizar mapas vectoriales usando MapLibre GL y PMTiles
+- **TotalesDisplay**: Componente para mostrar totales y estadísticas con soporte responsive
 - **Join CSV**: Unión automática de datos tabulares con geometrías vectoriales
 - **Estilos temáticos**: Soporte para modo booleano y clasificación Jenks
 - **TypeScript**: Completamente tipado para mejor experiencia de desarrollo
@@ -335,7 +336,276 @@ Puedes usar **fuentes de datos separadas** para entidades y municipios. Cuando e
 - **Vista de entidades**: Solo muestra el nombre (ej: "Ciudad de México") sin datos adicionales
 - **Vista de municipios** (después del click): Muestra nombre del municipio + valor del CSV municipal (ej: "Azcapotzalco - Habitantes: 385,000")
 
-## Props
+---
+
+## TotalesDisplay
+
+Componente para mostrar totales y estadísticas de manera flexible y responsive. Soporta datos hardcodeados, desde CSV o una combinación de ambos.
+
+### Características
+
+- **Tres formas de uso**: Datos hardcodeados, CSV por URL o CSV desde archivo local
+- **Responsive**: Se adapta automáticamente a desktop, tablet y mobile
+- **Centrado por defecto**: Posicionamiento centrado configurable
+- **Personalizable**: Formateadores custom para labels y valores
+- **TypeScript**: Completamente tipado
+
+### Uso Básico
+
+#### Importar el componente
+
+```tsx
+import { TotalesDisplay } from '@atdt/geo-ui';
+import '@atdt/geo-ui/style.css';
+```
+
+#### Ejemplo 1: Datos hardcodeados (más simple)
+
+```tsx
+import { TotalesDisplay } from '@atdt/geo-ui';
+
+function App() {
+  return (
+    <TotalesDisplay
+      items={[
+        { label: "Total de caminos abiertos", value: 496 },
+        { label: "Total de caminos cerrados", value: 9 },
+      ]}
+    />
+  );
+}
+```
+
+#### Ejemplo 2: Datos desde CSV (URL)
+
+```tsx
+import { TotalesDisplay } from '@atdt/geo-ui';
+
+function App() {
+  return (
+    <TotalesDisplay
+      csvUrl="https://example.com/datos.csv"
+      joinCsvKey="tipo"
+      field="cantidad"
+      labelFormatter={(key) => `Total de ${key.toLowerCase()}`}
+      valueFormatter={(value) => value.toLocaleString('es-MX')}
+    />
+  );
+}
+```
+
+#### Ejemplo 3: Datos desde archivo local
+
+```tsx
+import { TotalesDisplay } from '@atdt/geo-ui';
+import { useState } from 'react';
+
+function App() {
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+
+  return (
+    <div>
+      <input
+        type="file"
+        accept=".csv"
+        onChange={(e) => setCsvFile(e.target.files?.[0] || null)}
+      />
+      {csvFile && (
+        <TotalesDisplay
+          csvFile={csvFile}
+          joinCsvKey="id"
+          field="total"
+          labelFormatter={(key) => `Categoría ${key}`}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+#### Ejemplo 4: Con filtro específico
+
+```tsx
+// Mostrar solo un elemento específico del CSV
+<TotalesDisplay
+  csvUrl="https://example.com/datos.csv"
+  joinCsvKey="region"
+  field="poblacion"
+  filterKey="CDMX"
+  labelFormatter={(key) => `Población de ${key}`}
+  valueFormatter={(value) => `${value.toLocaleString('es-MX')} habitantes`}
+/>
+```
+
+#### Ejemplo 5: Sin centrado
+
+```tsx
+<TotalesDisplay
+  items={[
+    { label: "Cobertura total", value: "98%" },
+    { label: "Usuarios activos", value: 15234 },
+  ]}
+  centered={false}
+/>
+```
+
+### Props de TotalesDisplay
+
+#### Props de Datos (una de estas opciones es requerida)
+
+| Prop | Tipo | Descripción |
+|------|------|-------------|
+| `items` | `TotalItem[]` | Array de objetos con `label` y `value` para mostrar datos hardcodeados |
+| `csvUrl` | `string` | URL del CSV remoto |
+| `csvFile` | `File` | Archivo File local |
+
+#### Props de Configuración CSV
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `joinCsvKey` | `string` | `"key"` | Campo del CSV para usar como identificador |
+| `field` | `string` | `"valor"` | Campo del CSV con los valores a visualizar |
+| `filterKey` | `string` | `undefined` | Si se especifica, solo muestra el elemento con este key |
+
+#### Props de Visualización
+
+| Prop | Tipo | Default | Descripción |
+|------|------|---------|-------------|
+| `centered` | `boolean` | `true` | Si el contenedor debe estar centrado |
+| `className` | `string` | `""` | Clases CSS adicionales para el contenedor |
+| `labelFormatter` | `(key: string, value: any) => string` | `undefined` | Función para formatear el label |
+| `valueFormatter` | `(value: any) => string \| number` | `undefined` | Función para formatear el valor |
+
+#### Tipo TotalItem
+
+```tsx
+interface TotalItem {
+  label: string;
+  value: number | string;
+}
+```
+
+### Ejemplos Completos
+
+#### Ejemplo con datos dinámicos según estado del mapa
+
+```tsx
+import { TotalesDisplay } from '@atdt/geo-ui';
+import { useState } from 'react';
+
+function App() {
+  const [selectedRegion, setSelectedRegion] = useState<string | null>(null);
+
+  const datosGlobales = [
+    { label: "Total nacional de escuelas", value: 12450 },
+    { label: "Total nacional de estudiantes", value: 850000 },
+  ];
+
+  return (
+    <div>
+      {!selectedRegion && (
+        <TotalesDisplay items={datosGlobales} />
+      )}
+
+      {selectedRegion && (
+        <TotalesDisplay
+          csvUrl="https://example.com/datos-regionales.csv"
+          filterKey={selectedRegion}
+          joinCsvKey="region"
+          field="total"
+          labelFormatter={(key, value) => `${key} - Total`}
+          valueFormatter={(value) => value.toLocaleString('es-MX')}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+#### Ejemplo integrando con MapaPMTiles
+
+```tsx
+import { MapaPMTiles, TotalesDisplay } from '@atdt/geo-ui';
+import '@atdt/geo-ui/style.css';
+
+function App() {
+  return (
+    <div>
+      <TotalesDisplay
+        items={[
+          { label: "Total de caminos abiertos", value: 496 },
+          { label: "Total de caminos cerrados", value: 9 },
+        ]}
+      />
+
+      <MapaPMTiles
+        csvUrl="https://example.com/datos.csv"
+        fitToIds={["09", "15", "14"]}
+        mode="jenks"
+        enablePopup={true}
+      />
+    </div>
+  );
+}
+```
+
+### Responsive
+
+El componente se adapta automáticamente:
+
+- **Desktop**: Layout horizontal con espaciado amplio (13.89vw entre items)
+- **Tablet** (601px - 1024px): Espaciado medio (8vw entre items)
+- **Mobile** (≤600px): Layout vertical, centrado, con espaciado vertical entre items
+
+### Personalización Avanzada
+
+```tsx
+<TotalesDisplay
+  csvUrl="https://example.com/estadisticas.csv"
+  joinCsvKey="categoria"
+  field="valor"
+  centered={true}
+  className="mis-totales-custom"
+  labelFormatter={(key, value) => {
+    // Lógica custom para el label
+    if (key === 'total') return `🏆 Total General`;
+    return `📊 ${key.charAt(0).toUpperCase() + key.slice(1)}`;
+  }}
+  valueFormatter={(value) => {
+    // Formatear números con separadores de miles
+    if (typeof value === 'number') {
+      return `${value.toLocaleString('es-MX')} unidades`;
+    }
+    return value;
+  }}
+/>
+```
+
+### Estilos CSS Personalizados
+
+Puedes sobrescribir los estilos usando tu propio CSS:
+
+```css
+.mis-totales-custom {
+  background-color: #f0f0f0;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+.mis-totales-custom .totales-item {
+  font-size: 1.2em;
+  color: #2c3e50;
+}
+
+.mis-totales-custom .totales-value {
+  color: #66827f;
+  font-weight: 900;
+}
+```
+
+---
+
+## Props de MapaPMTiles
 
 ### Props Obligatorias
 

package/dist/components/TotalesDisplay.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface TotalItem {
+    label: string;
+    value: number | string;
+}
+export interface TotalesDisplayProps {
+    items?: TotalItem[];
+    csvUrl?: string;
+    csvFile?: File;
+    joinCsvKey?: string;
+    field?: string;
+    filterKey?: string;
+    centered?: boolean;
+    className?: string;
+    labelFormatter?: (key: string, value: any) => string;
+    valueFormatter?: (value: any) => string | number;
+}
+export declare const TotalesDisplay: React.FC<TotalesDisplayProps>;
+//# sourceMappingURL=TotalesDisplay.d.ts.map

package/dist/components/TotalesDisplay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TotalesDisplay.d.ts","sourceRoot":"","sources":["../../src/components/TotalesDisplay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAElC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IAGf,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,MAAM,CAAC;IACrD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,MAAM,GAAG,MAAM,CAAC;CAClD;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmGxD,CAAC"}