Merge pull request #181 from CivicDataLab/assam_map

Integrate district maps in charts

Author: Deepthi-Chand

app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
+import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts/core';
 import {
   Button,
   Carousel,
@@ -14,12 +16,12 @@ import {
   Spinner,
   Text,
 } from 'opub-ui';
-import { BarChart } from 'opub-ui/viz';
 
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
+import assam_geojson from '@/geo_json/assam_geojson';
 
-const charts: any = graphql(`
+const charts = graphql(`
   query chartsData($datasetId: UUID!) {
     chartsDetails(datasetId: $datasetId) {
       aggregateType
@@ -37,6 +39,7 @@ const charts: any = graphql(`
 
 const Details = () => {
   const params = useParams();
+  const chartRef = useRef<ReactECharts>(null);
 
   const {
     data,
@@ -56,6 +59,15 @@ const Details = () => {
       )
   );
 
+  const renderChart = (item: any) => {
+    if (item.chartType === 'ASSAM_DISTRICT') {
+      // Register the map
+      echarts.registerMap(item.chartType.toLowerCase(), assam_geojson);
+    }
+
+    return <ReactECharts option={item.chart} ref={chartRef} />;
+  };
+
   return (
     <div className="mb-8 flex w-full flex-col gap-4 p-2">
       {isLoading ? (
@@ -75,7 +87,8 @@ const Details = () => {
                     <CarouselItem key={index} className="m-auto">
                       <div className="w-full border-2 border-solid border-baseGraySlateSolid4 bg-surfaceDefault p-6 text-center shadow-basicLg max-sm:p-2">
                         <div className="lg:p-10">
-                          <BarChart options={item.chart} height={'450px'} />
+                          {renderChart(item)}{' '}
+                          {/* Call the renderChart function */}
                         </div>
                         <div className="flex items-center justify-between gap-2 max-sm:flex-wrap">
                           <div className="flex flex-col gap-1 py-2 text-start">

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
+import * as echarts from 'echarts/core';
 import {
   Button,
   Checkbox,
@@ -23,7 +24,7 @@ import {
 
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
-import { vizdata } from './data';
+import assam_geojson from '../../../../../../../../../../geo_json/assam_geojson';
 
 interface VisualizationProps {
   setType: any;
@@ -224,6 +225,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
   }, [chartId, chartDetails]);
 
   const updateChartData = (resourceChart: any) => {
+    echarts.registerMap(resourceChart.chartType.toLowerCase(), assam_geojson);
     const updatedData = {
       aggregateType: resourceChart.aggregateType as AggregateType,
       chartType: resourceChart.chartType as ChartTypes,
@@ -538,7 +540,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
           </div>
           <div className="mb-6 flex flex-col gap-6 p-8 text-center">
             <Text>Preview</Text>
-            {Object.keys(chartData.chart).length > 0 && (
+            {Object?.keys(chartData.chart).length > 0 && (
               <ReactECharts option={chartData.chart} ref={chartRef} />
             )}
           </div>