Merge pull request #183 from CivicDataLab/182-add-image-flow-in-dataset-creation

Update charts

Author: Deepthi-Chand

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

@@ -1,6 +1,8 @@
 import React, { useRef } from 'react';
 import Link from 'next/link';
 import { useParams } from 'next/navigation';
+import assam_geojson from '@/geo_json/assam_geojson';
+import { renderGeoJSON } from '@/geo_json/render_geojson';
 import { graphql } from '@/gql';
 import { useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
@@ -19,7 +21,6 @@ import {
 
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
-import assam_geojson from '@/geo_json/assam_geojson';
 
 const charts = graphql(`
   query chartsData($datasetId: UUID!) {
@@ -60,9 +61,12 @@ const Details = () => {
   );
 
   const renderChart = (item: any) => {
-    if (item.chartType === 'ASSAM_DISTRICT') {
+    if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') {
       // Register the map
-      echarts.registerMap(item.chartType.toLowerCase(), assam_geojson);
+      echarts.registerMap(
+        item.chartType.toLowerCase(),
+        renderGeoJSON(item.chartType.toLowerCase())
+      );
     }
 
     return <ReactECharts option={item.chart} ref={chartRef} />;

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

@@ -39,6 +39,10 @@ const deleteResourceChart: any = graphql(`
   }
 `);
 
+
+
+
+
 const ChartsList: React.FC<ChartsListProps> = ({
   setType,
   type,
@@ -106,7 +110,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
     return [
       {
         accessorKey: 'name',
-        header: 'Name of Access Type',
+        header: 'Name of Chart',
         cell: ({ row }: any) => (
           <div
             style={{ cursor: 'pointer', textDecoration: 'underline' }}
@@ -165,7 +169,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
       ) : (
         <>
           <div className=" my-6 flex flex-wrap items-center justify-between gap-3 px-3 py-4">
-            <Text>Showing Access Types</Text>
+            <Text>Showing Charts</Text>
             <SearchInput
               className="w-1/2 "
               placeholder="Search in charts"

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'next/navigation';
+import { renderGeoJSON } from '@/geo_json/render_geojson';
 import { graphql } from '@/gql';
 import {
   AggregateType,
@@ -24,7 +25,6 @@ import {
 
 import { GraphQL } from '@/lib/api';
 import { Icons } from '@/components/icons';
-import assam_geojson from '../../../../../../../../../../geo_json/assam_geojson';
 
 interface VisualizationProps {
   setType: any;
@@ -151,11 +151,15 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
         {
           [params.entityType]: params.entitySlug,
         },
-        { chartDetailsId: chartId }
+        {
+          chartDetailsId: chartId,
+
+          options: {
+            skip: chartId === '',
+          },
+        }
       ),
-    {
-      enabled: !!chartId, // Fetch only if chartId is available
-    }
+    {}
   );
   const {
     data: chartsList,
@@ -225,7 +229,15 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
   }, [chartId, chartDetails]);
 
   const updateChartData = (resourceChart: any) => {
-    echarts.registerMap(resourceChart.chartType.toLowerCase(), assam_geojson);
+    if (
+      resourceChart.chartType === 'ASSAM_DISTRICT' ||
+      resourceChart.chartType === 'ASSAM_RC'
+    ) {
+      echarts.registerMap(
+        resourceChart.chartType.toLowerCase(),
+        renderGeoJSON(resourceChart.chartType.toLowerCase())
+      );
+    }
     const updatedData = {
       aggregateType: resourceChart.aggregateType as AggregateType,
       chartType: resourceChart.chartType as ChartTypes,
@@ -417,7 +429,6 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
               options={[
                 { label: 'Bar Vertical', value: 'BAR_VERTICAL' },
                 { label: 'Bar Horizontal', value: 'BAR_HORIZONTAL' },
-                { label: 'Column', value: 'COLUMN' },
                 { label: 'Line', value: 'LINE' },
                 { label: 'Assam District', value: 'ASSAM_DISTRICT' },
                 { label: 'ASSAM RC', value: 'ASSAM_RC' },