diff --git a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx index 14a09d75..5b327dcb 100644 --- a/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx +++ b/app/[locale]/(user)/datasets/[datasetIdentifier]/components/Details/index.tsx @@ -1,11 +1,12 @@ +import { useRef } from 'react'; +import Image from 'next/image'; +import Link from 'next/link'; +import { useParams } from 'next/navigation'; import { renderGeoJSON } from '@/geo_json/render_geojson'; import { graphql } from '@/gql'; import { useQuery } from '@tanstack/react-query'; import ReactECharts from 'echarts-for-react'; import * as echarts from 'echarts/core'; -import Image from 'next/image'; -import Link from 'next/link'; -import { useParams } from 'next/navigation'; import { Button, Carousel, @@ -17,24 +18,19 @@ import { Spinner, Text, } from 'opub-ui'; -import { useRef } from 'react'; -import { Icons } from '@/components/icons'; import { GraphQL } from '@/lib/api'; +import { Icons } from '@/components/icons'; const DetailsQuery: any = graphql(` query ChartDetailsQuery($datasetId: UUID!) { getChartData(datasetId: $datasetId) { __typename ... on TypeResourceChart { - aggregateType chartType description id name - showLegend - xAxisLabel - yAxisLabel chart } ... on TypeResourceChartImage { @@ -60,7 +56,6 @@ const Details = () => { () => GraphQL(DetailsQuery, {}, { datasetId: params.datasetIdentifier }) ); - const renderChart = (item: any) => { if (item.chartType === 'ASSAM_DISTRICT' || item.chartType === 'ASSAM_RC') { // Register the map diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx new file mode 100644 index 00000000..9dfb6f59 --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx @@ -0,0 +1,451 @@ +import React, { useEffect } from 'react'; +import { ChartTypes } from '@/gql/generated/graphql'; +import { Button, Checkbox, Select, Text, TextField } from 'opub-ui'; +import { ChartData, ResourceData, ResourceSchema } from '../types'; + +interface ChartFormProps { + chartData: ChartData; + resourceData: ResourceData; + resourceSchema: ResourceSchema[]; + handleChange: (field: string, value: any) => void; + handleResourceChange: (value: string) => void; + handleSave: (data: ChartData) => void; +} + +const ChartForm: React.FC = ({ + chartData, + resourceData, + resourceSchema, + handleChange, + handleResourceChange, + handleSave, +}) => { + const isAssamChart = + chartData.type === ChartTypes.AssamDistrict || + chartData.type === ChartTypes.AssamRc; + const isGroupedChart = + chartData.type === ChartTypes.GroupedBarVertical || + chartData.type === ChartTypes.GroupedBarHorizontal; + const isBarOrLineChart = + chartData.type === ChartTypes.BarVertical || + chartData.type === ChartTypes.BarHorizontal || + 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]); + + + + // useEffect(() => { + // if ( + // !chartData.filters || + // chartData.filters.length === 0 + // ) { + // handleChange('filters', { + // ...chartData, + // // filters: [{ column: '', operator: '==', value: '' }], + // }); + // } + // }, [chartData.filters]); + + const handleYAxisColumnChange = ( + index: number, + field: string, + value: any + ) => { + const newYAxisColumns = [...chartData.options.yAxisColumn]; + newYAxisColumns[index] = { + ...newYAxisColumns[index], + [field]: value, + }; + handleChange('options', { + ...chartData.options, + yAxisColumn: newYAxisColumns, + }); + }; + + const addYAxisColumn = () => { + const newYAxisColumns = [ + ...(chartData.options.yAxisColumn ?? []), + { fieldName: '', label: '', color: '' }, + ]; + handleChange('options', { + ...chartData.options, + yAxisColumn: newYAxisColumns, + }); + }; + + const removeYAxisColumn = (index: number) => { + const newYAxisColumns = chartData.options.yAxisColumn.filter( + (_, i) => i !== index + ); + handleChange('options', { + ...chartData.options, + yAxisColumn: newYAxisColumns, + }); + }; + + // const handlefilterColumnChange = ( + // index: number, + // field: string, + // value: any + // ) => { + // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : []; + // const newFiltersColumns = [...currentFilters]; + // newFiltersColumns[index] = { + // ...newFiltersColumns[index], + // [field]: value, + // }; + // handleChange('filters', newFiltersColumns); // Changed this line + // }; + // const addFilterColumn = () => { + // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : []; + // const newFiltersColumns = [ + // ...currentFilters, + // { column: '', operator: '==', value: '' }, + // ]; + // handleChange('filters', newFiltersColumns); + // }; + + // const removeFilterColumn = (index: number) => { + // const currentFilters = Array.isArray(chartData.filters) ? chartData.filters : []; + // const newFiltersColumns = currentFilters.filter((_, i) => i !== index); + // handleChange('filters', newFiltersColumns); + // }; + 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 ( +
+ handleChange('name', e)} + label="Name" + value={chartData.name} + name="name" + onBlur={() => handleSave(chartData)} + required + /> + handleChange('description', e)} + label="Description" + value={chartData.description} + name="description" + onBlur={() => handleSave(chartData)} + required + /> + ({ + label: resource.name, + value: resource.id, + }))} + label="Resource" + value={chartData.resource} + onBlur={() => handleSave(chartData)} + onChange={handleResourceChange} + placeholder="Select" + /> +
+ ({ + label: field.fieldName, + value: field.id, + }))} + label="X-axis Column" + value={chartData.options.xAxisColumn} + onBlur={() => handleSave(chartData)} + onChange={(e) => + handleChange('options', { + ...chartData.options, + xAxisColumn: e, + }) + } + placeholder="Select" + /> +
+ + handleChange('options', { + ...chartData.options, + xAxisLabel: e, + }) + } + label="X-axis Label" + value={chartData.options.xAxisLabel} + name="xAxisLabel" + onBlur={() => handleSave(chartData)} + required + /> + + handleChange('options', { + ...chartData.options, + yAxisLabel: e, + }) + } + label="Y-axis Label" + value={chartData.options.yAxisLabel} + name="yAxisLabel" + onBlur={() => handleSave(chartData)} + required + /> +
+ + {(isBarOrLineChart || isGroupedChart) && ( +
+
+ {chartData?.options?.yAxisColumn?.map((column, index) => ( +
+ { + handleYAxisColumnChange( + index, + 'color', + e.target.value + ); + }} + onBlur={() => handleSave(chartData)} + /> +
+ {isGroupedChart && index > 0 && ( + + )} +
+ ))} +
+ {isGroupedChart && ( + + )} +
+ )} + + )} + + {isAssamChart && ( + <> + ({ + label: field.fieldName, + value: field.id, + }))} + label="Value Column" + value={chartData.options.valueColumn} + onBlur={() => handleSave(chartData)} + onChange={(e) => + handleChange('options', { + ...chartData.options, + valueColumn: e, + }) + } + placeholder="Select" + /> + + )} + + {/*
+
+ {Array.isArray(chartData?.filters) && chartData?.filters?.map((column, index) => ( +
+ ' }, + { label: 'In', value: 'in' }, + { label: 'Not In', value: 'not in' }, + { label: 'Less than or Equal to', value: '<=' }, + { label: 'Greater than or Equal to', value: '>=' }, + + ]} + label="Operator" + value={column.operator} + defaultValue="Equal to" + onChange={(e) => handlefilterColumnChange(index, 'operator', e)} + onBlur={() => handleSave(chartData)} + /> + + { + handlefilterColumnChange(index, 'value', e); + }} + onBlur={() => handleSave(chartData)} + /> + { index > 0 && ( + + )} +
+ ))} +
+ { ( + + )} +
*/} +
+ ); +}; + +export default ChartForm; diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartHeader.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartHeader.tsx new file mode 100644 index 00000000..fd8c4394 --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartHeader.tsx @@ -0,0 +1,103 @@ +import React from 'react'; +import { Button, Icon, Sheet, Text } from 'opub-ui'; +import { Icons } from '@/components/icons'; +import { ResourceData } from '../types'; + +interface ChartHeaderProps { + setType: (type: string) => void; + setChartId: (id: string) => void; + isSheetOpen: boolean; + setIsSheetOpen: (open: boolean) => void; + resourceChart: { + mutate: (data: { resource: string }) => void; + isLoading: boolean; + }; + resourceData: ResourceData; + chartsList: { + chartsDetails: Array<{ + id: string; + name: string; + }>; + } | null; + chartId: string; +} + +const ChartHeader: React.FC = ({ + setType, + setChartId, + isSheetOpen, + setIsSheetOpen, + resourceChart, + resourceData, + chartsList, + chartId, +}) => { + return ( +
+ + + + + + +
+
+ Select Charts +
+ + +
+
+ {chartsList?.chartsDetails.map((item, index) => ( +
+ +
+ ))} +
+ + +
+ ); +}; + +export default ChartHeader; diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx index 33cdcbbb..a482c7d6 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsVisualize.tsx @@ -2,30 +2,67 @@ 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 { graphql } from '@/gql'; -import { - AggregateType, - ChartTypes, - ResourceChartInput, -} from '@/gql/generated/graphql'; +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'; -import { - Button, - Checkbox, - Divider, - Icon, - Select, - Sheet, - Spinner, - Text, - TextField, - toast, -} from 'opub-ui'; +import { Button, Divider, Icon, Sheet, Spinner, Text, toast } from 'opub-ui'; import { GraphQL } from '@/lib/api'; import { Icons } from '@/components/icons'; +import { + chartDetailsQuery, + createChart, + CreateResourceChart, + datasetResource, + getResourceChartDetails, +} from '../queries'; +import ChartForm from './ChartForm'; +import ChartHeader from './ChartHeader'; + +interface YAxisColumnItem { + fieldName: string; + label: string; + color: string; +} +interface ChartFilters { + column: string; + operator: string; + value: string; +} + +interface ChartOptions { + aggregateType: string; + regionColumn?: string; + showLegend: boolean; + timeColumn?: string; + valueColumn?: string; + xAxisColumn: string; + xAxisLabel: string; + yAxisColumn: YAxisColumnItem[]; + yAxisLabel: string; +} + +interface ChartData { + chartId: string; + description: string; + // filters: any[]; + name: string; + options: ChartOptions; + resource: string; + type: ChartTypes; + chart: any; +} + +interface ResourceChartInput { + chartId: string; + description: string; + // filters: ChartFilters[]; + name: string; + options: ChartOptions; + resource: string; + type: ChartTypes; +} interface VisualizationProps { setType: any; @@ -33,109 +70,6 @@ interface VisualizationProps { chartId: any; } -const datasetResource: any = graphql(` - query allresources($datasetId: UUID!) { - datasetResources(datasetId: $datasetId) { - id - type - name - description - schema { - fieldName - id - } - } - } -`); - -const chartDetailsQuery: any = graphql(` - query chartsDetails($datasetId: UUID!) { - chartsDetails(datasetId: $datasetId) { - id - name - chartType - } - } -`); - -const createChart: any = graphql(` - mutation editResourceChart($chartInput: ResourceChartInput!) { - editResourceChart(chartInput: $chartInput) { - __typename - ... on TypeResourceChart { - aggregateType - chartType - description - id - resource { - id - name - } - name - showLegend - xAxisLabel - yAxisLabel - regionColumn { - id - } - valueColumn { - id - } - chart - xAxisColumn { - id - } - yAxisColumn { - id - } - } - } - } -`); - -const getResourceChartDetails: any = graphql(` - query resourceChart($chartDetailsId: UUID!) { - resourceChart(chartDetailsId: $chartDetailsId) { - aggregateType - chartType - description - id - name - showLegend - xAxisLabel - yAxisLabel - regionColumn { - id - } - valueColumn { - id - } - chart - xAxisColumn { - id - } - yAxisColumn { - id - } - resource { - id - } - } - } -`); - -const CreateResourceChart: any = graphql(` - mutation GenerateResourceChart($resource: UUID!) { - addResourceChart(resource: $resource) { - __typename - ... on TypeResourceChart { - id - name - } - } - } -`); - const ChartsVisualize: React.FC = ({ setType, chartId, @@ -146,18 +80,21 @@ const ChartsVisualize: React.FC = ({ entitySlug: string; id: string; }>(); - const { data }: { data: any } = useQuery([`charts_${params.id}`], () => - GraphQL( - datasetResource, - { - [params.entityType]: params.entitySlug, - }, - { datasetId: params.id } - ) + + const { data: resourceData }: { data: any } = useQuery( + [`charts_${params.id}`], + () => + GraphQL( + datasetResource, + { + [params.entityType]: params.entitySlug, + }, + { datasetId: params.id } + ) ); const { data: chartDetails, refetch }: { data: any; refetch: any } = useQuery( - [`chartsdata_${params.id}`], + [`chartdata_${params.id}`], () => GraphQL( getResourceChartDetails, @@ -170,6 +107,7 @@ const ChartsVisualize: React.FC = ({ ), {} ); + const { data: chartsList, isLoading, @@ -216,38 +154,51 @@ const ChartsVisualize: React.FC = ({ ); const [isSheetOpen, setIsSheetOpen] = useState(false); - const initialChartData = { + const [chartData, setChartData] = useState({ chartId: '', - name: '', description: '', - chartType: 'BAR_VERTICAL', - resource: data?.datasetResources[0]?.id, - xAxisColumn: '', - xAxisLabel: '', - yAxisColumn: '', - yAxisLabel: '', - aggregateType: 'SUM', - showLegend: false, - chart: '', - regionColumn: '', - valueColumn: '', - }; + // filters: [ + // { + // column: '', + // operator: '==', + // value: '', + // }, + // ], + name: '', + options: { + aggregateType: 'SUM', + showLegend: true, + xAxisColumn: '', + xAxisLabel: '', + yAxisColumn: [{ fieldName: '', label: '', color: '' }], + yAxisLabel: '', + regionColumn: '', + valueColumn: '', + timeColumn: '', + }, + resource: '', + type: ChartTypes.BarVertical, + chart: {}, + }); + + const [previousChartData, setPreviousChartData] = useState( + null + ); - const [chartData, setChartData] = useState(initialChartData); - const [previousChartData, setPreviousChartData] = useState(initialChartData); const [resourceSchema, setResourceSchema] = useState([]); useEffect(() => { - if (data) { - if (chartData.resource) { - const resource = data?.datasetResources.find( - (resource: any) => resource.id === chartData.resource - ); - setResourceSchema(resource?.schema || []); - handleChange('resource', chartData.resource); + if (chartId && chartDetails?.resourceChart) { + const resource = resourceData?.datasetResources?.find( + (r: any) => r.id === chartDetails.resourceChart.resource?.id + ); + + if (resource) { + setResourceSchema(resource.schema || []); } } - }, [data, chartId, chartData.resource]); + }, [chartId, chartDetails, resourceData]); + useEffect(() => { if (chartId && chartDetails?.resourceChart) { @@ -256,6 +207,7 @@ const ChartsVisualize: React.FC = ({ } }, [chartId, chartDetails]); + const updateChartData = (resourceChart: any) => { if ( resourceChart.chartType === 'ASSAM_DISTRICT' || @@ -266,26 +218,101 @@ const ChartsVisualize: React.FC = ({ renderGeoJSON(resourceChart.chartType.toLowerCase()) ); } - const updatedData = { - aggregateType: resourceChart.aggregateType as AggregateType, - chartType: resourceChart.chartType as ChartTypes, - description: resourceChart.description, - name: resourceChart.name, + + const updatedData: ChartData = { chartId: resourceChart.id, - showLegend: resourceChart.showLegend, - xAxisLabel: resourceChart.xAxisLabel, - yAxisLabel: resourceChart.yAxisLabel, - resource: resourceChart.resource.id, - xAxisColumn: resourceChart.xAxisColumn?.id || '', - yAxisColumn: resourceChart.yAxisColumn?.id || '', + description: resourceChart.description || '', + // filters: + // resourceChart.filters?.length > 0 + // ? resourceChart.filters.map((filter: any) => ({ + // column: filter.column, + // operator: filter.operator, + // value: filter.value, + // })) + // : [{ column: '', operator: '==', value: '' }], + name: resourceChart.name || '', + options: { + aggregateType: resourceChart?.options?.aggregateType, + regionColumn: resourceChart?.options?.regionColumn?.id, + showLegend: resourceChart?.options?.showLegend ?? true, + timeColumn: resourceChart?.options?.timeColumn, + valueColumn: resourceChart?.options?.valueColumn?.id, + xAxisColumn: resourceChart?.options?.xAxisColumn?.id, + xAxisLabel: resourceChart?.options?.xAxisLabel, + yAxisColumn: resourceChart?.options?.yAxisColumn?.map((col: any) => ({ + fieldName: col.field.id, + label: col.label, + color: col.color, + })), + yAxisLabel: resourceChart?.options?.yAxisLabel, + }, + resource: resourceChart.resource?.id, + type: resourceChart.chartType as ChartTypes, chart: resourceChart.chart, - regionColumn: resourceChart.regionColumn?.id || '', - valueColumn: resourceChart.valueColumn?.id || '', }; setChartData(updatedData); setPreviousChartData(updatedData); }; + const getDefaultOptions = (chartType: ChartTypes) => { + const baseOptions = { + aggregateType: 'SUM', + showLegend: true, + xAxisColumn: '', + xAxisLabel: '', + yAxisLabel: '', + }; + + switch (chartType) { + case ChartTypes.AssamDistrict: + case ChartTypes.AssamRc: + return { + ...baseOptions, + regionColumn: '', + valueColumn: '', + timeColumn: '', + yAxisColumn: [], + }; + case ChartTypes.BarVertical: + case ChartTypes.BarHorizontal: + return { + ...baseOptions, + yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }], + }; + default: + return { + ...baseOptions, + yAxisColumn: [{ fieldName: '', label: '', color: '#000000' }], + }; + } + }; + + const handleChange = useCallback((field: string, value: any) => { + setChartData((prevData) => { + if (field === 'type') { + const newType = value as ChartTypes; + return { + ...prevData, + type: newType, + options: getDefaultOptions(newType), + }; + } + if (field === 'options') { + return { + ...prevData, + options: { + ...prevData.options, + ...value, + }, + }; + } + return { + ...prevData, + [field]: value, + }; + }); + }, []); + const { mutate, isLoading: editMutationLoading } = useMutation( (chartInput: { chartInput: ResourceChartInput }) => GraphQL( @@ -310,117 +337,87 @@ const ChartsVisualize: React.FC = ({ } ); - const handleSave = (updatedData: any) => { - if (JSON.stringify(chartData) !== JSON.stringify(previousChartData)) { - setPreviousChartData(updatedData); - const inputChartId = updatedData.chartId || chartId || null; + 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() !== '' + ); - mutate({ - chartInput: { - aggregateType: updatedData.aggregateType as AggregateType, - type: updatedData.chartType as ChartTypes, + const chartInput: ResourceChartInput = { + chartId: updatedData.chartId, description: updatedData.description, + // filters: updatedData.filters, name: updatedData.name, - chartId: inputChartId, - showLegend: updatedData.showLegend, - xAxisLabel: updatedData.xAxisLabel, - yAxisLabel: updatedData.yAxisLabel, - resource: updatedData.resource || data?.datasetResources[0]?.id, - xAxisColumn: updatedData.xAxisColumn, - yAxisColumn: updatedData.yAxisColumn, - regionColumn: updatedData.regionColumn, - valueColumn: updatedData.valueColumn, - }, - }); - } - }; + options: { + ...updatedData.options, + yAxisColumn: validYAxisColumns, + }, + resource: updatedData.resource, + type: updatedData.type, + }; - const handleChange = useCallback((field: string, value: any) => { - setChartData((prevData) => ({ - ...prevData, - [field]: value, - })); - }, []); + // Store current type before mutation + const currentType = updatedData.type; + + 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 + // filters: + // updatedData.filters?.length > 0 + // ? updatedData.filters + // : [{ column: '', operator: '==', value: '' }], + }); + } + }, + [previousChartData, mutate] + ); const handleResourceChange = useCallback( - (resourceId: string) => { - const selectedResource = data?.datasetResources.find( - (resource: any) => resource.id === resourceId + (value: string) => { + const resource = resourceData?.datasetResources.find( + (r: any) => r.id === value ); - setResourceSchema(selectedResource?.schema || []); - handleChange('resource', resourceId); + if (resource) { + handleChange('resource', resource.id); + } }, - [data] + [resourceData, handleChange] ); + const chartRef = useRef(null); return ( <>
-
- - - - - - -
-
- Select Charts -
- - -
-
- {chartsList?.chartsDetails.map((item: any, index: any) => ( -
- -
- ))} -
- - -
+
@@ -431,153 +428,17 @@ const ChartsVisualize: React.FC = ({ )}
- handleChange('name', e)} - value={chartData.name} - label="Chart Name" - name="name" - required - helpText="To know about best practices for naming Visualizations go to our User Guide" - onBlur={() => handleSave(chartData)} - /> - handleChange('description', e)} - label="Description" - value={chartData.description} - name="description" - multiline={4} - onBlur={() => handleSave(chartData)} + -
- ({ - label: resource.name, - value: resource.id, - }))} - value={chartData.resource} - defaultValue={data?.datasetResources[0]?.id} - label="Select Resources" - onBlur={() => handleSave(chartData)} - onChange={(e) => handleResourceChange(e)} - /> - {chartData.chartType !== 'ASSAM_DISTRICT' && - chartData.chartType !== 'ASSAM_RC' ? ( - <> - ({ - label: field.fieldName, - value: field.id, - }))} - value={chartData.yAxisColumn} - label="Y-axis Column" - onBlur={() => handleSave(chartData)} - placeholder="Select" - onChange={(e) => handleChange('yAxisColumn', e)} - /> - handleChange('yAxisLabel', e)} - label="Y-axis Label" - name="yAxisLabel" - value={chartData.yAxisLabel} - onBlur={() => handleSave(chartData)} - required - /> - - ) : ( - <> - ({ - label: field.fieldName, - value: field.id, - }))} - value={chartData.valueColumn} - label="Value Column" - onBlur={() => handleSave(chartData)} - placeholder="Select" - onChange={(e) => handleChange('valueColumn', e)} - /> - - )} -