lowcoder-map-component 0.1.1

package/src/comps/mapComponent/comp.tsx

@@ -0,0 +1,338 @@
+import { ChartPropertyView } from '@/components/ChartPropertyView';
+import { EchartsAxisType } from '@/configs/cartesianAxisConfig';
+import { ItemColorComp } from '@/configs/lineChartConfig';
+import { AxisFormatterComp } from '@/controls';
+import { trans } from '@/i18n/comps';
+import { formatAllStyles } from '@/utils/chartStyle.util';
+import { deepEqual } from '@/utils/deepEqual.util';
+import { ChartSize, echartProps, getEChartConfig } from '@/utils/echarts.util';
+import { getDataKeys } from '@/utils/getDataKey.util';
+import {
+  changeChildAction,
+  changeValueAction,
+  chartColorPalette,
+  childrenToProps,
+  CompAction,
+  CompActionTypes,
+  depsConfig,
+  genRandomKey,
+  getPromiseAfterDispatch,
+  JSONObject,
+  NameConfig,
+  Theme,
+  ThemeContext,
+  UICompBuilder,
+  valueComp,
+  withDefault,
+  withExposingConfigs,
+  withViewFn,
+  wrapChildAction,
+} from 'lowcoder-sdk';
+import { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { chartUiProps } from './constants';
+
+let clickEventCallback = () => {};
+
+let MapComponentTmpComp = (function () {
+  return new UICompBuilder(
+    {
+      ...echartProps,
+      ...chartUiProps,
+    },
+    () => null
+  )
+    .setPropertyViewFn(ChartPropertyView)
+    .build();
+})();
+
+MapComponentTmpComp = withViewFn(MapComponentTmpComp, (comp) => {
+  const data = comp.children.data?.getView?.() || [];
+  const districts = comp.children.defaultProvinceData?.getView?.() || [];
+  const mapStyle = comp.children.defaultMapStyle?.getView?.() || [];
+  const theme: Theme = useContext(ThemeContext);
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapLoaded = useRef(false);
+  const [map, setMap] = useState<any>(null);
+  const selectedPolygonId = useRef(null);
+  const defaultChartTheme = {
+    color: chartColorPalette,
+    backgroundColor: '#fff',
+  };
+  const activeFeatureIdsRef = useRef<Set<number>>(new Set());
+
+  let filter_color = [
+    'case',
+    ['boolean', ['feature-state', 'isHidden'], true],
+    'white',
+    ['boolean', ['feature-state', 'selected'], false],
+    '#faf25f',
+    [
+      'step',
+      ['feature-state', 'process_value'],
+      '#FBE9D5',
+      1,
+      '#ED5050', // 24–33
+      50,
+      '#F7942F', // = 34
+      70,
+      '#EAC344',
+      80,
+      '#5CC488',
+      90,
+      '#219653',
+    ],
+  ];
+  const opacity_color = [
+    'case',
+    ['boolean', ['feature-state', 'hover'], false],
+    1,
+    0.4,
+  ];
+
+  let themeConfig = defaultChartTheme;
+  try {
+    themeConfig = theme?.theme?.chart
+      ? JSON.parse(theme.theme.chart)
+      : defaultChartTheme;
+  } catch (error) {
+    console.error('theme chart error: ', error);
+  }
+
+  useEffect(() => {
+    if (!mapRef.current) return; // tránh undefined
+    const newmap = new window.vtmapgl.Map({
+      accessToken: 'acfda3fa21ccc80fc6946681c4d6729f',
+      container: mapRef.current,
+      style:
+        'https://ioc-rs.danang.gov.vn/documents/v5-style-admin_custom_nq57.json',
+      center: [107.96214000803525, 15.606049590212066],
+      zoom: 8,
+    });
+    setMap(newmap);
+  }, []);
+
+  const resetFeatureStates = () => {
+    activeFeatureIdsRef.current.forEach((id) => {
+      map.setFeatureState(
+        {
+          source: 'VTMap_Admin',
+          sourceLayer: 'tbl_communes_2025',
+          id,
+        },
+        {
+          process_value: 0,
+          isHidden: true,
+        }
+      );
+    });
+
+    activeFeatureIdsRef.current.clear();
+  };
+  const initMap = (dataDistrict: any[], districtsNew: any[]) => {
+    if (!map) return;
+    resetFeatureStates();
+    map.setFilter('view_communes_text_2025', [
+      'match',
+      ['slice', ['get', 'obj_id'], 0, 6],
+      ['HAC_48'],
+      true,
+      false,
+    ]);
+
+    map.setFilter('tbl_communes_boundary', [
+      'match',
+      ['slice', ['get', 'obj_id'], 0, 6],
+      ['HAC_48'],
+      true,
+      false,
+    ]);
+
+    map.setLayerZoomRange('view_communes_text_2025', 7, 21);
+    map.setLayerZoomRange('tbl_communes_boundary', 7, 21);
+
+    if (!Array.isArray(dataDistrict) || !Array.isArray(districtsNew)) return;
+
+    // 3️⃣ Apply state mới
+    districtsNew.forEach((district) => {
+      const cleanName = district?.name
+        ?.toLowerCase()
+        ?.replace(/^xã\s+|^phường\s+|^thị trấn\s+/i, '')
+        ?.trim();
+
+      if (!cleanName || !district.id) return;
+
+      const matched = dataDistrict.find((i) => {
+        const name = String(i?.name || '')
+          .toLowerCase()
+          .trim()
+          .replace(/^(ubnd\s+)?(xã\s+|phường\s+|thị trấn\s+)/i, '');
+
+        return name === cleanName;
+      });
+
+      const normalizedScore = Number(matched?.score || 0);
+      console.log('matched', matched);
+
+      map.setFeatureState(
+        {
+          source: 'VTMap_Admin',
+          sourceLayer: 'tbl_communes_2025',
+          id: district.id,
+        },
+        {
+          process_value: normalizedScore,
+          dataFeature: matched || null,
+          isHidden: false,
+        }
+      );
+
+      // 🔥 lưu lại ID đã set
+      activeFeatureIdsRef.current.add(district.id);
+    });
+
+    // 4️⃣ Style chỉ set 1 lần
+    map.setPaintProperty('tbl_communes_2025', 'fill-color', filter_color);
+    map.setPaintProperty('tbl_communes_boundary', 'line-width', 1);
+  };
+
+  useEffect(() => {
+    if (!map) return;
+    if (mapLoaded.current) initMap(data, districts);
+    else
+      map?.on('load', () => {
+        mapLoaded.current = true;
+        initMap(data, districts);
+      });
+
+    const onLayerClick = (e) => {
+      const popup = new window.vtmapgl.Popup();
+      clearSelection();
+      const feature = e.features?.[0];
+      if (!feature) return;
+      if (feature.properties?.province_area_code !== '48') return;
+      const value = Number(feature?.state?.process_value || 0);
+      const dataFeature = feature?.state?.dataFeature || {};
+      const formatted = new Intl.NumberFormat('vi-VN').format(value);
+      selectedPolygonId.current = feature.id;
+      map.setFeatureState(
+        {
+          source: 'VTMap_Admin',
+          sourceLayer: 'tbl_communes_2025',
+          id: selectedPolygonId.current,
+        },
+        { selected: true }
+      );
+
+      popup
+        .setLngLat(e.lngLat)
+        .setHTML(
+          `<div style="font-size: 14px; font-style: normal; min-width:200px;">
+              <svg viewBox="64 64 896 896" focusable="false" data-icon="environment" width="1em" height="1em" fill="green" aria-hidden="true"><path d="M512 327c-29.9 0-58 11.6-79.2 32.8A111.6 111.6 0 00400 439c0 29.9 11.7 58 32.8 79.2A111.6 111.6 0 00512 551c29.9 0 58-11.7 79.2-32.8C612.4 497 624 468.9 624 439c0-29.9-11.6-58-32.8-79.2S541.9 327 512 327zm342.6-37.9a362.49 362.49 0 00-79.9-115.7 370.83 370.83 0 00-118.2-77.8C610.7 76.6 562.1 67 512 67c-50.1 0-98.7 9.6-144.5 28.5-44.3 18.3-84 44.5-118.2 77.8A363.6 363.6 0 00169.4 289c-19.5 45-29.4 92.8-29.4 142 0 70.6 16.9 140.9 50.1 208.7 26.7 54.5 64 107.6 111 158.1 80.3 86.2 164.5 138.9 188.4 153a43.9 43.9 0 0022.4 6.1c7.8 0 15.5-2 22.4-6.1 23.9-14.1 108.1-66.8 188.4-153 47-50.4 84.3-103.6 111-158.1C867.1 572 884 501.8 884 431.1c0-49.2-9.9-97-29.4-142zM512 615c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176z"></path></svg>
+              <b>${e.features[0].properties.name}</b><br/>
+              <div>${dataFeature?.title || ''}: <span style="font-weight:600">${dataFeature?.score || 0}</span>${dataFeature?.unit || '%'}</div>
+              ${
+                dataFeature?.subData && dataFeature.subData.length > 0
+                  ? `
+                      <ul style="margin: 0px;">
+                        ${dataFeature.subData
+                          .map(
+                            (item: any) => `
+                            <li>
+                              ${item.title}: 
+                              <span style="font-weight:600">${item.score}</span>
+                              ${dataFeature?.unit || ''}
+                            </li>
+                          `
+                          )
+                          .join('')}
+                      </ul>
+                    `
+                  : ''
+              }
+            </div>`
+        )
+        .addTo(map);
+    };
+
+    map.on('click', 'tbl_communes_2025', onLayerClick);
+
+    return () => {
+      map.off('click', 'tbl_communes_2025', onLayerClick);
+    };
+  }, [map, data, districts]);
+  const clearSelection = () => {
+    if (selectedPolygonId.current !== null) {
+      map.setFeatureState(
+        {
+          source: 'VTMap_Admin',
+          sourceLayer: 'tbl_communes_2025',
+          id: selectedPolygonId.current,
+        },
+        { selected: false }
+      );
+    }
+    selectedPolygonId.current = null;
+  };
+
+  return (
+    <div>
+      <div style={{ width: '100%', height: '100vh' }} ref={mapRef}></div>
+    </div>
+  );
+});
+
+MapComponentTmpComp = class extends MapComponentTmpComp {
+  updateContext(comp: any) {
+    // the context value of axis format
+    let resultComp = comp;
+    const data = comp.children.data.getView();
+    const sampleSeries = comp.children.series
+      .getView()
+      .find((s: any) => !s.getView().hide);
+
+    // item color context
+    return resultComp;
+  }
+
+  reduce(action: CompAction): this {
+    const comp = super.reduce(action);
+    if (action.type === CompActionTypes.UPDATE_NODES_V2) {
+      // const newData = comp.children.data.getView();
+      // // data changes
+      // if (comp.children.data !== this.children.data) {
+      //   setTimeout(() => {
+      //     // update x-axis value
+      //     const keys = getDataKeys({ data: newData, dataType: 'string' });
+      //     if (
+      //       keys.length > 0 &&
+      //       !keys.includes(comp.children.xAxisKey.getView())
+      //     ) {
+      //       comp.children.xAxisKey.dispatch(changeValueAction(keys[0] || ''));
+      //     }
+      //     // pass to child series comp
+      //     comp.children.series.dispatchDataChanged(newData);
+      //   }, 0);
+      // }
+      // return this.updateContext(comp);
+      return comp;
+    }
+    return comp;
+  }
+
+  autoHeight(): boolean {
+    return false;
+  }
+};
+
+let MapComponentComp = withExposingConfigs(MapComponentTmpComp, []);
+
+export const MapComponentCompWithDefault = withDefault(MapComponentComp, {
+  series: [
+    {
+      dataIndex: genRandomKey(),
+      name: 'Name',
+      chartType: 'mapComponent',
+    },
+  ],
+});