fix saving issue(aggregate type, yaxiscolumns) and show only integer values in yaxis col dropdown

Author: sanjaypinna

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { ChartTypes } from '@/gql/generated/graphql';
 import { Button, Checkbox, Select, TextField } from 'opub-ui';
 
@@ -33,6 +33,16 @@ const ChartForm: React.FC<ChartFormProps> = ({
     chartData.type === ChartTypes.Line ||
     chartData.type === ChartTypes.Multiline;
 
+
+  useEffect(() => {
+    if (!chartData.options.yAxisColumn || chartData.options.yAxisColumn.length === 0) {
+      handleChange('options', {
+        ...chartData.options,
+        yAxisColumn: [{ fieldName: '', label: '', color: '' }],
+      });
+    }
+  }, [chartData.options.yAxisColumn]);
+
   const handleYAxisColumnChange = (
     index: number,
     field: string,
@@ -70,7 +80,31 @@ const ChartForm: React.FC<ChartFormProps> = ({
     });
   };
 
-console.log(chartData, "data");
+  const updateChartData = (field: string, value: any) => {
+    
+    if (field === 'type') {
+      const newData = {
+        ...chartData,
+        type: value,
+        options: {
+          ...chartData.options,
+          yAxisColumn: chartData.options.yAxisColumn.length > 0 
+            ? chartData.options.yAxisColumn 
+            : [{ fieldName: '', label: '', color: '' }],
+        },
+      };
+      handleChange(field, value);
+      handleSave(newData); // Pass the new data directly
+    } else {
+      const newData = {
+        ...chartData,
+        [field]: value,
+      };
+      handleChange(field, value);
+      handleSave(newData);
+    }
+  };
+
 
   return (
     <div className="flex flex-col gap-4">
@@ -99,7 +133,7 @@ console.log(chartData, "data");
         label="Chart Type"
         value={chartData.type}
         onBlur={() => handleSave(chartData)}
-        onChange={(e) => handleChange('type', e)}
+        onChange={(e) => updateChartData('type', e)}
         placeholder="Select"
       />
       <Select
@@ -128,7 +162,20 @@ console.log(chartData, "data");
       >
         Show Legend
       </Checkbox>
-
+      <Select
+        name="aggregateType"
+        options={[
+          { label: 'None', value: 'NONE' },
+          { label: 'Sum', value: 'SUM' },
+          { label: 'Average', value: 'AVERAGE' },
+          { label: 'Count', value: 'COUNT' },
+        ]}
+        label="Aggregate"
+        value={chartData.options.aggregateType}
+        defaultValue="SUM"
+        onBlur={() => handleSave(chartData)}
+        onChange={(e) => handleChange('options', { ...chartData.options, aggregateType: e })}
+      />
       {!isAssamChart && (
         <>
           <Select
@@ -181,10 +228,12 @@ console.log(chartData, "data");
                 <div key={index} className="flex items-end gap-4">
                   <Select
                     name={`yAxisColumn-${index}`}
-                    options={resourceSchema?.map((field) => ({
-                      label: field.fieldName,
-                      value: field.id,
-                    }))}
+                    options={resourceSchema
+                      ?.filter(field => field.format.toUpperCase() === 'INTEGER' )
+                      .map((field) => ({
+                        label: field.fieldName,
+                        value: field.id,
+                      }))}
                     label="Y-axis Column"
                     value={column.fieldName}
                     onChange={(e) =>
@@ -203,7 +252,7 @@ console.log(chartData, "data");
                   <input
                     name={`yAxisColor-${index}`}
                     type="Color"
-                    value={column.color}
+                    value={column.color || '#000000'}
                     onChange={(e: any) => {
                       handleYAxisColumnChange(index, 'color', e.target.value);
                     }}

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

@@ -2,6 +2,7 @@ import { UUID } from 'crypto';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { renderGeoJSON } from '@/geo_json/render_geojson';
+import { ChartTypes } from '@/gql/generated/graphql';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
 import * as echarts from 'echarts/core';
@@ -17,7 +18,6 @@ import {
   getResourceChartDetails,
 } from '../queries';
 import ChartForm from './ChartForm';
-import { ChartTypes } from '@/gql/generated/graphql';
 import ChartHeader from './ChartHeader';
 
 interface YAxisColumnItem {
@@ -177,17 +177,28 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
   const [resourceSchema, setResourceSchema] = useState<any[]>([]);
 
   useEffect(() => {
-    if (resourceData) {
-      if (chartData.resource) {
-        const resource = resourceData?.datasetResources.find(
-          (resource: any) => resource.id === chartData.resource
-        );
+    if (resourceData && chartData.resource) {
+      const resource = resourceData?.datasetResources.find(
+        (resource: any) => resource.id === chartData.resource
+      );
+      if (resource) {
+        setResourceSchema(resource.schema || []);
+      } else {
+        setResourceSchema([]); // Reset if not found
+      }
+    }
+  }, [resourceData, chartData.resource]);
+  useEffect(() => {
+    if (chartId && chartDetails?.resourceChart) {
+      const resource = resourceData?.datasetResources?.find(
+        (r: any) => r.id === chartDetails.resourceChart.resource?.id
+      );
 
-        setResourceSchema(resource?.schema || []);
-        handleChange('resource', chartData.resource);
+      if (resource) {
+        setResourceSchema(resource.schema || []);
       }
     }
-  }, [resourceData, chartId, chartData.resource]);
+  }, [chartId, chartDetails, resourceData]);
 
   useEffect(() => {
     if (chartId && chartDetails?.resourceChart) {
@@ -294,10 +305,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
     });
   }, []);
 
-  const {
-    mutate,
-    isLoading: editMutationLoading,
-  } = useMutation(
+  const { mutate, isLoading: editMutationLoading } = useMutation(
     (chartInput: { chartInput: ResourceChartInput }) =>
       GraphQL(
         createChart,
@@ -323,41 +331,52 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
 
   const handleSave = useCallback(
     (updatedData: ChartData) => {
+      
       if (JSON.stringify(previousChartData) !== JSON.stringify(updatedData)) {
-
+        // Filter out empty Y-axis columns
         const validYAxisColumns = updatedData.options.yAxisColumn.filter(
-          col => col.fieldName && col.fieldName.trim() !== ''
+          (col) => col.fieldName && col.fieldName.trim() !== ''
         );
-        
+
         const chartInput: ResourceChartInput = {
           chartId: updatedData.chartId,
           description: updatedData.description,
           filters: updatedData.filters,
           name: updatedData.name,
           options: {
             ...updatedData.options,
-            yAxisColumn: validYAxisColumns
+            yAxisColumn: validYAxisColumns,
           },
           resource: updatedData.resource,
-          type: updatedData.type as ChartTypes,
+          type: updatedData.type,
         };
 
-        mutate(
-          { chartInput },
-          {
-            onSuccess: (data) => {
-              setChartData((prev) => ({
-                ...prev,
-                chart: data.chart,
-              }));
-            },
-          }
-        );
+        // Store current type before mutation
+        const currentType = updatedData.type;
 
-        setPreviousChartData(updatedData);
+          mutate(
+            { chartInput },
+            {
+              onSuccess: (data) => {
+                setChartData((prev) => ({
+                  ...prev,
+                  chart: data.chart,
+                  type: currentType, // Preserve the type from before mutation
+                  options: {
+                    ...prev.options,
+                    yAxisColumn: validYAxisColumns,
+                  },
+                }));
+              },
+            }
+          );
+          setPreviousChartData({
+            ...updatedData,
+            type: currentType, // Ensure previousChartData also has correct type
+          });
       }
     },
-    [previousChartData]
+    [previousChartData, mutate]
   );
 
   const handleResourceChange = useCallback(
@@ -407,7 +426,7 @@ const ChartsVisualize: React.FC<VisualizationProps> = ({
           />
           <div className="mb-6 flex flex-col gap-6 p-8 text-center">
             <Text>Preview</Text>
-            {chartData.chart &&  Object.keys(chartData.chart).length > 0 && (
+            {chartData.chart && Object.keys(chartData.chart).length > 0 && (
               <ReactECharts option={chartData.chart} ref={chartRef} />
             )}
           </div>