@datosgeo-atdt/geo-ui 0.11.2 → 0.11.4

package/README.md

@@ -761,6 +761,7 @@ function App() {
 | `className` | `string` | `""` | Clases CSS adicionales |
 | `showIndex` | `boolean` | `false` | Mostrar columna con índice numérico |
 | `indexLabel` | `string` | `"#"` | Etiqueta para la columna de índice |
+| `onRowClick` | `(row: Record<string, any>, index: number) => void` | `undefined` | Callback que se ejecuta al hacer click en una fila. Recibe los datos de la fila y su índice |
 
 #### Tipo DataTableColumn
 
@@ -863,6 +864,91 @@ function App() {
 }
 ```
 
+#### Ejemplo con interactividad bidireccional (Tabla ↔ Mapa)
+
+Crea interacción completa entre la tabla y el mapa usando `onRowClick` y `onFeatureClick`:
+
+```tsx
+import { MapaPMTiles, DataTable } from '@atdt/geo-ui';
+import { useState } from 'react';
+import '@atdt/geo-ui/style.css';
+
+function App() {
+  const [nivel, setNivel] = useState<'entidad' | 'municipio'>('entidad');
+  const [selectedEnt, setSelectedEnt] = useState<string | null>(null);
+
+  return (
+    <div style={{ display: 'flex', width: '100%', height: '100vh' }}>
+      {/* Mapa con click handler */}
+      <MapaPMTiles
+        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
+        fitToIds={selectedEnt ? [selectedEnt] : undefined}
+        mode="jenks"
+        showMunicipios={nivel === 'municipio'}
+        enablePopup={true}
+        onFeatureClick={(featureId, properties) => {
+          // Click en mapa → cambia tabla a municipios de esa entidad
+          if (nivel === 'entidad') {
+            setSelectedEnt(featureId);
+            setNivel('municipio');
+          }
+        }}
+      />
+
+      {/* Tabla con click handler */}
+      <DataTable
+        csvPath={nivel === 'entidad' ? '/prueba_entidad.csv' : `/cdmx_prueba.csv`}
+        columns={
+          nivel === 'entidad'
+            ? [
+                { key: 'entidad', label: 'Entidad' },
+                { key: 'total', label: 'Total' }
+              ]
+            : [
+                { key: 'municipio', label: 'Municipio' },
+                { key: 'valor', label: 'Valor' }
+              ]
+        }
+        onRowClick={(row) => {
+          // Click en tabla → hace zoom en mapa a esa entidad
+          if (nivel === 'entidad') {
+            setSelectedEnt(row.cvegeo);
+            setNivel('municipio');
+          }
+        }}
+      />
+
+      {/* Botón para regresar */}
+      {nivel === 'municipio' && (
+        <button
+          style={{
+            position: 'absolute',
+            top: 20,
+            left: 20,
+            zIndex: 1000,
+            padding: '10px 20px'
+          }}
+          onClick={() => {
+            setNivel('entidad');
+            setSelectedEnt(null);
+          }}
+        >
+          ← Regresar a entidades
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+**Flujo de interacción bidireccional:**
+1. **Vista inicial**: Muestra tabla con entidades (`prueba_entidad.csv`) y mapa de México
+2. **Click en MAPA**: Hace zoom a la entidad y cambia tabla a municipios
+3. **Click en TABLA**: Hace zoom en el mapa y cambia tabla a municipios
+4. **Mapa hace zoom**: Automáticamente hacia la entidad seleccionada
+5. **Tabla cambia**: Muestra datos municipales (`cdmx_prueba.csv`)
+6. **Botón "Regresar"**: Vuelve a la vista de entidades
+
 ### Formato de Números
 
 Los números se formatean automáticamente con separadores de miles usando el formato mexicano:
@@ -958,6 +1044,7 @@ Puedes sobrescribir los estilos usando la clase `className`:
 | `joinCsvKeyMunicipios` | `string` | `"cvegeo"` | Campo del CSV municipal para hacer el join (por defecto usa cvegeo de 5 dígitos) |
 | `fieldMunicipios` | `string` | `field` | Campo del CSV municipal con los valores a visualizar (por defecto usa el mismo `field` de entidades) |
 | `modeMunicipios` | `"boolean" \| "jenks"` | `mode` | Modo de estilo para municipios (permite usar diferente clasificación que entidades) |
+| `onFeatureClick` | `(featureId: string, properties: any) => void` | `undefined` | Callback que se ejecuta al hacer click en una feature del mapa. Recibe el ID de la feature y sus propiedades. Solo funciona cuando hay 2 o más entidades en `fitToIds` |
 
 ## Modos de Estilo
 

package/dist/components/DataTable.d.ts

@@ -13,6 +13,7 @@ export interface DataTableProps {
     className?: string;
     showIndex?: boolean;
     indexLabel?: string;
+    onRowClick?: (row: Record<string, any>, index: number) => void;
 }
 declare const DataTable: React.FC<DataTableProps>;
 export default DataTable;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,eAAe;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAqKvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../src/components/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,eAAe;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,cAAc;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAClE;AAED,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAuKvC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/MapaPMTiles.d.ts

@@ -26,6 +26,7 @@ export interface MapaPMTilesProps {
     joinCsvKeyMunicipios?: string;
     fieldMunicipios?: string;
     modeMunicipios?: 'boolean' | 'jenks';
+    onFeatureClick?: (featureId: string, properties: any) => void;
 }
 export declare const MapaPMTiles: React.FC<MapaPMTilesProps>;
 //# sourceMappingURL=MapaPMTiles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MapaPMTiles.d.ts","sourceRoot":"","sources":["../../src/components/MapaPMTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CACtC;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqqBlD,CAAC"}
+{"version":3,"file":"MapaPMTiles.d.ts","sourceRoot":"","sources":["../../src/components/MapaPMTiles.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAM3D,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAgB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,IAAI,CAAC;IACzB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAErC,cAAc,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,IAAI,CAAC;CAC/D;AAmDD,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA2qBlD,CAAC"}