From 8a146404461066a2d65eb0e653651f3810055e82 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 19 Feb 2025 22:01:36 +0530 Subject: [PATCH 01/21] move queries and form to new components --- .../[id]/edit/charts/components/ChartForm.tsx | 216 ++++++ .../charts/components/ChartsVisualize.tsx | 693 +++++++++--------- .../dataset/[id]/edit/charts/queries/index.ts | 122 +++ 3 files changed, 704 insertions(+), 327 deletions(-) create mode 100644 app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx create mode 100644 app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts 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..4666ec02 --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartForm.tsx @@ -0,0 +1,216 @@ +import React from 'react'; +import { Checkbox, Select, TextField } from 'opub-ui'; + +interface ChartOptions { + aggregateType: string; + regionColumn?: string; + showLegend: boolean; + timeColumn?: string; + valueColumn?: string; + xAxisColumn: string; + xAxisLabel: string; + yAxisColumn: any[]; + yAxisLabel: string; +} + +interface ChartData { + chartId: string; + description: string; + filters: any[]; + name: string; + options: ChartOptions; + resource: string; + type: string; + chart: any; +} + +interface ResourceSchema { + fieldName: string; + id: string; +} + +interface Resource { + id: string; + name: string; +} + +interface ResourceData { + datasetResources: Resource[]; +} + +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, +}) => { + return ( +
+ 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={resourceData?.datasetResources[0]?.id} + label="Select Resources" + onBlur={() => handleSave(chartData)} + onChange={(e) => handleResourceChange(e)} + /> + {chartData.type !== 'ASSAM_DISTRICT' && + chartData.type !== 'ASSAM_RC' ? ( + <> + ({ + label: field.fieldName, + value: field.id, + }))} + // value={chartData?.options?.yAxisColumn[0]} + 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.options.yAxisLabel} + onBlur={() => handleSave(chartData)} + required + /> + + ) : ( + <> + ({ + label: field.fieldName, + value: field.id, + }))} + value={chartData.options.valueColumn} + label="Value Column" + onBlur={() => handleSave(chartData)} + placeholder="Select" + onChange={(e) => handleChange('valueColumn', e)} + /> + + )} + handleSave(chartData)} - onChange={(e) => handleChange('chartType', e)} - /> - ({ - label: field.fieldName, - value: field.id, - }))} - label="X-axis Column" - value={chartData.xAxisColumn} - placeholder="Select" - onBlur={() => handleSave(chartData)} - onChange={(e) => handleChange('xAxisColumn', e)} - /> - handleChange('xAxisLabel', e)} - label="X-axis Label" - value={chartData.xAxisLabel} - name="xAxisLabel" - onBlur={() => handleSave(chartData)} - required - /> - ({ - label: field.fieldName, - value: field.id, - }))} - label="Region Column" - value={chartData.regionColumn} - placeholder="Select" - onBlur={() => handleSave(chartData)} - onChange={(e) => handleChange('regionColumn', e)} - /> - handleSave(chartData)} - onChange={(e) => handleChange('aggregateType', e)} - /> -
- handleSave(chartData)} - onChange={(e) => handleChange('showLegend', e)} - > - Show Legend (Legend values will be taken from resource) - -
-
Preview - {Object?.keys(chartData.chart).length > 0 && ( - - )} +
diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts new file mode 100644 index 00000000..3cda0c48 --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts @@ -0,0 +1,122 @@ +import { graphql } from '@/gql'; + +export const datasetResource = graphql(` + query allresources($datasetId: UUID!) { + datasetResources(datasetId: $datasetId) { + id + type + name + description + schema { + fieldName + id + } + } + } +`); + +export const chartDetailsQuery = graphql(` + query chartsDetails($datasetId: UUID!) { + chartsDetails(datasetId: $datasetId) { + id + name + chartType + } + } +`); + +export const getResourceChartDetails = graphql(` + query resourceChart($chartDetailsId: UUID!) { + resourceChart(chartDetailsId: $chartDetailsId) { + chartType + description + id + name + resource { + id + } + chart + options { + aggregateType + xAxisColumn { + id + fieldName + } + yAxisColumn { + field { + id + fieldName + } + } + showLegend + xAxisLabel + yAxisLabel + regionColumn { + id + fieldName + } + valueColumn { + id + fieldName + } + } + } + } +`); + +export const createChart = graphql(` + mutation editResourceChart($chartInput: ResourceChartInput!) { + editResourceChart(chartInput: $chartInput) { + __typename + ... on TypeResourceChart { + chartType + description + id + resource { + id + name + } + name + options { + aggregateType + xAxisColumn { + id + fieldName + } + yAxisColumn { + field { + id + fieldName + } + } + showLegend + xAxisLabel + yAxisLabel + regionColumn { + id + fieldName + } + valueColumn { + id + fieldName + } + } + chart + } + } + } +`); + + + +export const CreateResourceChart: any = graphql(` + mutation GenerateResourceChart($resource: UUID!) { + addResourceChart(resource: $resource) { + __typename + ... on TypeResourceChart { + id + name + } + } + } +`); From d7dc542fd3913c00f96575af710b0c2c0455e65a Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Wed, 19 Feb 2025 22:02:46 +0530 Subject: [PATCH 02/21] move form and queries to new components --- .../components/Details/index.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) 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 From 1480a52d3608c0739a891b28fd8dfe4d0b9e9929 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 16:34:45 +0530 Subject: [PATCH 03/21] add types --- .../dataset/[id]/edit/charts/types.ts | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts new file mode 100644 index 00000000..198636fd --- /dev/null +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts @@ -0,0 +1,56 @@ +import { ChartTypes } from "@/gql/generated/graphql"; + + + +export interface YAxisColumnItem { + fieldName: string; + label: string; + color: string; +} + +export interface ChartOptions { + aggregateType: string; + regionColumn?: string; + showLegend: boolean; + timeColumn?: string; + valueColumn?: string; + xAxisColumn: string; + xAxisLabel: string; + yAxisColumn: YAxisColumnItem[]; + yAxisLabel: string; +} + +export interface ChartData { + chartId: string; + description: string; + filters: any[]; + name: string; + options: ChartOptions; + resource: string; + type: ChartTypes; + chart: any; +} + +export interface ResourceChartInput { + chartId: string; + description: string; + filters: any[]; + name: string; + options: ChartOptions; + resource: string; + type: ChartTypes; +} + +export interface ResourceSchema { + fieldName: string; + id: string; +} + +export interface Resource { + id: string; + name: string; +} + +export interface ResourceData { + datasetResources: Resource[]; +} From e6bd47bb83f4a6e80819794fbe5d460a3a0ca822 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 16:35:07 +0530 Subject: [PATCH 04/21] add chartheader --- .../edit/charts/components/ChartHeader.tsx | 103 ++++++++++++++++++ 1 file changed, 103 insertions(+) create mode 100644 app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartHeader.tsx 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; From fd1ca9a830678189f6d1542b4370b70b82dbcd0f Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 16:35:29 +0530 Subject: [PATCH 05/21] add logic to show options based on chart type --- .../[id]/edit/charts/components/ChartForm.tsx | 405 ++++++++++-------- 1 file changed, 229 insertions(+), 176 deletions(-) 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 index 4666ec02..622662f9 100644 --- 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 @@ -1,42 +1,8 @@ import React from 'react'; -import { Checkbox, Select, TextField } from 'opub-ui'; +import { ChartTypes } from '@/gql/generated/graphql'; +import { Button, Checkbox, Select, TextField } from 'opub-ui'; -interface ChartOptions { - aggregateType: string; - regionColumn?: string; - showLegend: boolean; - timeColumn?: string; - valueColumn?: string; - xAxisColumn: string; - xAxisLabel: string; - yAxisColumn: any[]; - yAxisLabel: string; -} - -interface ChartData { - chartId: string; - description: string; - filters: any[]; - name: string; - options: ChartOptions; - resource: string; - type: string; - chart: any; -} - -interface ResourceSchema { - fieldName: string; - id: string; -} - -interface Resource { - id: string; - name: string; -} - -interface ResourceData { - datasetResources: Resource[]; -} +import { ChartData, ResourceData, ResourceSchema } from '../types'; interface ChartFormProps { chartData: ChartData; @@ -55,160 +21,247 @@ const ChartForm: React.FC = ({ 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; + + 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, + }); + }; + +console.log(chartData, "data"); + return ( -
+
handleChange('name', e)} + label="Name" 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)} + required /> handleChange('description', e)} label="Description" value={chartData.description} name="description" - multiline={4} onBlur={() => handleSave(chartData)} + required + /> + handleSave(chartData)} - onChange={(e) => handleChange('chartType', e)} - /> - ({ - label: field.fieldName, - value: field.id, - }))} - label="X-axis Column" - value={chartData.options.xAxisColumn} - placeholder="Select" - onBlur={() => handleSave(chartData)} - onChange={(e) => handleChange('xAxisColumn', e)} - /> - handleChange('xAxisLabel', e)} - label="X-axis Label" - value={chartData.options.xAxisLabel} - name="xAxisLabel" - onBlur={() => handleSave(chartData)} - required - /> - ({ - label: field.fieldName, - value: field.id, - }))} - label="Region Column" - value={chartData.options.regionColumn} - placeholder="Select" - onBlur={() => handleSave(chartData)} - onChange={(e) => handleChange('regionColumn', e)} - /> - handleSave(chartData)} - onChange={(e) => handleChange('aggregateType', e)} - /> -
- ({ + label: resource.name, + value: resource.id, + }))} + label="Resource" + value={chartData.resource} + onBlur={() => handleSave(chartData)} + onChange={handleResourceChange} + placeholder="Select" + /> + handleSave(chartData)} + onChange={(e) => + handleChange('options', { + ...chartData.options, + showLegend: e, + }) + } + > + Show Legend + + + {!isAssamChart && ( + <> + ({ + label: field.fieldName, + value: field.id, + }))} + label="Y-axis Column" + value={column.fieldName} + onChange={(e) => + handleYAxisColumnChange(index, 'fieldName', e) + } + onBlur={() => handleSave(chartData)} + placeholder="Select" + /> + handleYAxisColumnChange(index, 'label', e)} + onBlur={() => handleSave(chartData)} + /> + { + 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('showLegend', e)} - > - Show Legend (Legend values will be taken from resource) - -
- + onChange={(e) => + handleChange('options', { + ...chartData.options, + valueColumn: e, + }) + } + placeholder="Select" + /> + + )} ); }; From 71414c596703945b826db64ae3be10747163dd69 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 16:35:47 +0530 Subject: [PATCH 06/21] update.. --- .../charts/components/ChartsVisualize.tsx | 550 ++++++------------ 1 file changed, 167 insertions(+), 383 deletions(-) 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 f562efa1..0c01f489 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,7 +2,6 @@ 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 { ResourceChartInput } from '@/gql/generated/graphql'; import { useMutation, useQuery } from '@tanstack/react-query'; import ReactECharts from 'echarts-for-react'; import * as echarts from 'echarts/core'; @@ -18,6 +17,47 @@ import { getResourceChartDetails, } from '../queries'; import ChartForm from './ChartForm'; +import { ChartTypes } from '@/gql/generated/graphql'; +import ChartHeader from './ChartHeader'; + +interface YAxisColumnItem { + fieldName: string; + label: string; + color: 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: any[]; + name: string; + options: ChartOptions; + resource: string; + type: ChartTypes; +} interface VisualizationProps { setType: any; @@ -109,29 +149,31 @@ const ChartsVisualize: React.FC = ({ ); const [isSheetOpen, setIsSheetOpen] = useState(false); - const initialChartData = { + const [chartData, setChartData] = useState({ chartId: '', description: '', filters: [], name: '', options: { - aggregateType: '', - regionColumn: '', - showLegend: false, - timeColumn: '', - valueColumn: '', + aggregateType: 'SUM', + showLegend: true, xAxisColumn: '', xAxisLabel: '', - yAxisColumn: [], + yAxisColumn: [{ fieldName: '', label: '', color: '' }], yAxisLabel: '', + regionColumn: '', + valueColumn: '', + timeColumn: '', }, - resource: resourceData?.datasetResources[0]?.id, - type: 'BAR_VERTICAL', - chart: '', - }; + 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(() => { @@ -147,8 +189,6 @@ const ChartsVisualize: React.FC = ({ } }, [resourceData, chartId, chartData.resource]); - console.log(chartData, chartDetails?.resourceChart); - useEffect(() => { if (chartId && chartDetails?.resourceChart) { refetch(); @@ -167,7 +207,7 @@ const ChartsVisualize: React.FC = ({ ); } - const updatedData = { + const updatedData: ChartData = { chartId: resourceChart.id, description: resourceChart.description, filters: resourceChart.filters || [], @@ -182,17 +222,78 @@ const ChartsVisualize: React.FC = ({ xAxisLabel: resourceChart?.options?.xAxisLabel, yAxisColumn: resourceChart?.options?.yAxisColumn?.map((col: any) => ({ fieldName: col.field, + label: col.label, + color: col.color, })), yAxisLabel: resourceChart?.options?.yAxisLabel, }, resource: resourceChart.resource?.id, - type: resourceChart.chartType, + type: resourceChart.chartType as ChartTypes, chart: resourceChart.chart, }; 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, @@ -220,68 +321,48 @@ 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)) { + const chartInput: ResourceChartInput = { + chartId: updatedData.chartId, + description: updatedData.description, + filters: updatedData.filters, + name: updatedData.name, + options: updatedData.options, + resource: updatedData.resource, + type: updatedData.type as ChartTypes, + }; - console.log( - { - chartInput: { - chartId: inputChartId, - description: updatedData.description, - filters: updatedData.filters || [], - name: updatedData.name, - options: { - aggregateType: updatedData.aggregateType, - regionColumn: updatedData.regionColumn, - showLegend: updatedData.showLegend, - timeColumn: updatedData.timeColumn, - valueColumn: updatedData.valueColumn, - xAxisColumn: updatedData.xAxisColumn, - xAxisLabel: updatedData.xAxisLabel, - yAxisColumn: updatedData.options.yAxisColumn?.map((col: any) => ({ - fieldName: col.field, - })), - yAxisLabel: updatedData.yAxisLabel, - }, - resource: - updatedData.resource || resourceData?.datasetResources[0]?.id, - type: updatedData.chartType, - }, - }, - 'log' - ); - } - }; + // mutate( + // { chartInput }, + // { + // onSuccess: (data) => { + // setChartData((prev) => ({ + // ...prev, + // chart: data.createChart.chart, + // })); + // }, + // } + // ); - const handleChange = useCallback((field: string, value: any) => { - setChartData((prevData) => { - if (field === 'options') { - return { - ...prevData, - options: { - ...prevData.options, - ...value, - }, - }; + console.log(chartInput); + setPreviousChartData(updatedData); } - return { - ...prevData, - [field]: value, - }; - }); - }, []); + }, + [previousChartData] + ); const handleResourceChange = useCallback( - (resourceId: string) => { - const selectedResource = resourceData?.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); + } }, - [resourceData] + [resourceData, handleChange] ); const chartRef = useRef(null); @@ -289,70 +370,16 @@ const ChartsVisualize: React.FC = ({ return ( <>
-
- - - - - - -
-
- Select Charts -
- - -
-
- {chartsList?.chartsDetails.map((item: any, index: any) => ( -
- -
- ))} -
- - -
+
@@ -373,252 +400,9 @@ const ChartsVisualize: React.FC = ({ />
Preview - + {chartData.chart && Object.keys(chartData.chart).length > 0 && ( + + )}
From c884d662f9fb1b4b788876bad64c7f17f22c71ee Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 19:54:04 +0530 Subject: [PATCH 07/21] add label and color --- .../[entitySlug]/dataset/[id]/edit/charts/queries/index.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts index 3cda0c48..9e269dc1 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts @@ -47,6 +47,8 @@ export const getResourceChartDetails = graphql(` id fieldName } + label + color } showLegend xAxisLabel @@ -88,6 +90,8 @@ export const createChart = graphql(` id fieldName } + label + color } showLegend xAxisLabel From 92c55f5ad98eda5cb1cd906bb7d8761ae99c5ea0 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 22:00:35 +0530 Subject: [PATCH 08/21] add format --- .../[entitySlug]/dataset/[id]/edit/charts/queries/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts index 9e269dc1..3f93e2c9 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts @@ -10,6 +10,7 @@ export const datasetResource = graphql(` schema { fieldName id + format } } } From 658ad3d42f09a2459d4be79df77addc436cce22a Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 22:00:41 +0530 Subject: [PATCH 09/21] add format --- .../[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts index 198636fd..065c9e48 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts @@ -44,6 +44,7 @@ export interface ResourceChartInput { export interface ResourceSchema { fieldName: string; id: string; + format: string } export interface Resource { From 052cbd939e787d9be348dedf043a7e661185c9b0 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Thu, 20 Feb 2025 22:01:48 +0530 Subject: [PATCH 10/21] fix yaxiscolumn structure --- .../charts/components/ChartsVisualize.tsx | 41 +++++++++++-------- 1 file changed, 24 insertions(+), 17 deletions(-) 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 0c01f489..5026177d 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 @@ -214,14 +214,14 @@ const ChartsVisualize: React.FC = ({ name: resourceChart.name || '', options: { aggregateType: resourceChart?.options?.aggregateType, - regionColumn: resourceChart?.options?.regionColumn, + regionColumn: resourceChart?.options?.regionColumn?.id, showLegend: resourceChart?.options?.showLegend, timeColumn: resourceChart?.options?.timeColumn, - valueColumn: resourceChart?.options?.valueColumn, + valueColumn: resourceChart?.options?.valueColumn?.id, xAxisColumn: resourceChart?.options?.xAxisColumn?.id, xAxisLabel: resourceChart?.options?.xAxisLabel, yAxisColumn: resourceChart?.options?.yAxisColumn?.map((col: any) => ({ - fieldName: col.field, + fieldName: col.field.id, label: col.label, color: col.color, })), @@ -324,29 +324,36 @@ const ChartsVisualize: React.FC = ({ const handleSave = useCallback( (updatedData: ChartData) => { if (JSON.stringify(previousChartData) !== JSON.stringify(updatedData)) { + + const validYAxisColumns = updatedData.options.yAxisColumn.filter( + col => col.fieldName && col.fieldName.trim() !== '' + ); + const chartInput: ResourceChartInput = { chartId: updatedData.chartId, description: updatedData.description, filters: updatedData.filters, name: updatedData.name, - options: updatedData.options, + options: { + ...updatedData.options, + yAxisColumn: validYAxisColumns + }, resource: updatedData.resource, type: updatedData.type as ChartTypes, }; - // mutate( - // { chartInput }, - // { - // onSuccess: (data) => { - // setChartData((prev) => ({ - // ...prev, - // chart: data.createChart.chart, - // })); - // }, - // } - // ); + mutate( + { chartInput }, + { + onSuccess: (data) => { + setChartData((prev) => ({ + ...prev, + chart: data.chart, + })); + }, + } + ); - console.log(chartInput); setPreviousChartData(updatedData); } }, @@ -400,7 +407,7 @@ const ChartsVisualize: React.FC = ({ />
Preview - {chartData.chart && Object.keys(chartData.chart).length > 0 && ( + {chartData.chart && Object.keys(chartData.chart).length > 0 && ( )}
From 7e9b7ea82031740f6a535a6b3dd1101be855bacf Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 08:21:26 +0530 Subject: [PATCH 11/21] fix saving issue(aggregate type, yaxiscolumns) and show only integer values in yaxis col dropdown --- .../[id]/edit/charts/components/ChartForm.tsx | 67 +++++++++++++-- .../charts/components/ChartsVisualize.tsx | 83 ++++++++++++------- 2 files changed, 109 insertions(+), 41 deletions(-) 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 index 622662f9..06d41621 100644 --- 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 @@ -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 = ({ 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 = ({ }); }; -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 (
@@ -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" /> handleSave(chartData)} + onChange={(e) => handleChange('options', { ...chartData.options, aggregateType: e })} + /> {!isAssamChart && ( <> ({ - 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"); { handleYAxisColumnChange(index, 'color', e.target.value); }} 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 5026177d..9f11ba81 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,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 = ({ const [resourceSchema, setResourceSchema] = useState([]); 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 = ({ }); }, []); - const { - mutate, - isLoading: editMutationLoading, - } = useMutation( + const { mutate, isLoading: editMutationLoading } = useMutation( (chartInput: { chartInput: ResourceChartInput }) => GraphQL( createChart, @@ -323,12 +331,13 @@ const ChartsVisualize: React.FC = ({ 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, @@ -336,28 +345,38 @@ const ChartsVisualize: React.FC = ({ 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 = ({ />
Preview - {chartData.chart && Object.keys(chartData.chart).length > 0 && ( + {chartData.chart && Object.keys(chartData.chart).length > 0 && ( )}
From a93e331100bf59f95f0e32787da1d785be93daf7 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 08:28:36 +0530 Subject: [PATCH 12/21] remove unwanted useEffect --- .../edit/charts/components/ChartsVisualize.tsx | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) 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 9f11ba81..999dc25a 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 @@ -176,18 +176,8 @@ const ChartsVisualize: React.FC = ({ const [resourceSchema, setResourceSchema] = useState([]); - useEffect(() => { - 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( From 6de4f5c3b27db9ae1af1e2934b28e0432dfbf30d Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 08:32:53 +0530 Subject: [PATCH 13/21] set showlegend default to true --- .../dataset/[id]/edit/charts/components/ChartForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 06d41621..fe279044 100644 --- 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 @@ -151,7 +151,7 @@ const ChartForm: React.FC = ({ handleSave(chartData)} onChange={(e) => handleChange('options', { From 06e2a3ac767c4691c54d621564f418c2261b88e3 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 08:41:41 +0530 Subject: [PATCH 14/21] on new chart creation make desc empty --- .../dataset/[id]/edit/charts/components/ChartsVisualize.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 999dc25a..9f100f8c 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 @@ -88,6 +88,9 @@ const ChartsVisualize: React.FC = ({ ) ); + + + const { data: chartDetails, refetch }: { data: any; refetch: any } = useQuery( [`chartdata_${params.id}`], () => @@ -210,7 +213,7 @@ const ChartsVisualize: React.FC = ({ const updatedData: ChartData = { chartId: resourceChart.id, - description: resourceChart.description, + description: resourceChart.description || '', filters: resourceChart.filters || [], name: resourceChart.name || '', options: { From 41c59b4f3103b82bf8e0089f266372c717252c65 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 08:59:41 +0530 Subject: [PATCH 15/21] make showlegend true by default --- .../charts/components/ChartsVisualize.tsx | 50 +++++++++---------- 1 file changed, 23 insertions(+), 27 deletions(-) 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 9f100f8c..9eb04c73 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 @@ -88,9 +88,6 @@ const ChartsVisualize: React.FC = ({ ) ); - - - const { data: chartDetails, refetch }: { data: any; refetch: any } = useQuery( [`chartdata_${params.id}`], () => @@ -179,8 +176,6 @@ const ChartsVisualize: React.FC = ({ const [resourceSchema, setResourceSchema] = useState([]); - - useEffect(() => { if (chartId && chartDetails?.resourceChart) { const resource = resourceData?.datasetResources?.find( @@ -219,7 +214,7 @@ const ChartsVisualize: React.FC = ({ options: { aggregateType: resourceChart?.options?.aggregateType, regionColumn: resourceChart?.options?.regionColumn?.id, - showLegend: resourceChart?.options?.showLegend, + showLegend: resourceChart?.options?.showLegend || true, timeColumn: resourceChart?.options?.timeColumn, valueColumn: resourceChart?.options?.valueColumn?.id, xAxisColumn: resourceChart?.options?.xAxisColumn?.id, @@ -298,6 +293,8 @@ const ChartsVisualize: React.FC = ({ }); }, []); + + const { mutate, isLoading: editMutationLoading } = useMutation( (chartInput: { chartInput: ResourceChartInput }) => GraphQL( @@ -324,7 +321,6 @@ const ChartsVisualize: React.FC = ({ const handleSave = useCallback( (updatedData: ChartData) => { - if (JSON.stringify(previousChartData) !== JSON.stringify(updatedData)) { // Filter out empty Y-axis columns const validYAxisColumns = updatedData.options.yAxisColumn.filter( @@ -347,26 +343,26 @@ const ChartsVisualize: React.FC = ({ // 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 - }); + 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, mutate] From ab406311c57b4c32b3b7210f16f1a91e9f489861 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 09:04:11 +0530 Subject: [PATCH 16/21] remove true --- .../dataset/[id]/edit/charts/components/ChartsVisualize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 9eb04c73..ed9efcdc 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 @@ -214,7 +214,7 @@ const ChartsVisualize: React.FC = ({ options: { aggregateType: resourceChart?.options?.aggregateType, regionColumn: resourceChart?.options?.regionColumn?.id, - showLegend: resourceChart?.options?.showLegend || true, + showLegend: resourceChart?.options?.showLegend , timeColumn: resourceChart?.options?.timeColumn, valueColumn: resourceChart?.options?.valueColumn?.id, xAxisColumn: resourceChart?.options?.xAxisColumn?.id, From 7148b7435b9886667bbe768bc26ebdf936a297f7 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 09:05:28 +0530 Subject: [PATCH 17/21] make showlegend true by default --- .../dataset/[id]/edit/charts/components/ChartsVisualize.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 ed9efcdc..d27e8015 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 @@ -214,7 +214,7 @@ const ChartsVisualize: React.FC = ({ options: { aggregateType: resourceChart?.options?.aggregateType, regionColumn: resourceChart?.options?.regionColumn?.id, - showLegend: resourceChart?.options?.showLegend , + showLegend: resourceChart?.options?.showLegend ?? true, timeColumn: resourceChart?.options?.timeColumn, valueColumn: resourceChart?.options?.valueColumn?.id, xAxisColumn: resourceChart?.options?.xAxisColumn?.id, From d2305efae59c64d22ff09ac90f3ae262083eec6c Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Fri, 21 Feb 2025 10:52:34 +0530 Subject: [PATCH 18/21] fix css --- .../[id]/edit/charts/components/ChartForm.tsx | 239 ++++++++++-------- 1 file changed, 134 insertions(+), 105 deletions(-) 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 index fe279044..d62087c2 100644 --- 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 @@ -1,6 +1,6 @@ import React, { useEffect } from 'react'; import { ChartTypes } from '@/gql/generated/graphql'; -import { Button, Checkbox, Select, TextField } from 'opub-ui'; +import { Button, Checkbox, Select, Text, TextField } from 'opub-ui'; import { ChartData, ResourceData, ResourceSchema } from '../types'; @@ -33,9 +33,11 @@ const ChartForm: React.FC = ({ chartData.type === ChartTypes.Line || chartData.type === ChartTypes.Multiline; - useEffect(() => { - if (!chartData.options.yAxisColumn || chartData.options.yAxisColumn.length === 0) { + if ( + !chartData.options.yAxisColumn || + chartData.options.yAxisColumn.length === 0 + ) { handleChange('options', { ...chartData.options, yAxisColumn: [{ fieldName: '', label: '', color: '' }], @@ -81,16 +83,16 @@ const ChartForm: React.FC = ({ }; 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: '' }], + yAxisColumn: + chartData.options.yAxisColumn.length > 0 + ? chartData.options.yAxisColumn + : [{ fieldName: '', label: '', color: '' }], }, }; handleChange(field, value); @@ -105,7 +107,6 @@ const ChartForm: React.FC = ({ } }; - return (
= ({ onChange={handleResourceChange} placeholder="Select" /> - handleSave(chartData)} - onChange={(e) => - handleChange('options', { - ...chartData.options, - showLegend: e, - }) - } - > - Show Legend - - handleSave(chartData)} + onChange={(e) => + handleChange('options', { ...chartData.options, aggregateType: e }) + } + /> +
+ handleSave(chartData)} + onChange={(e) => + handleChange('options', { + ...chartData.options, + showLegend: e, + }) + } + > + Show Legend + +
+
{!isAssamChart && ( <> field.format.toUpperCase() === 'INTEGER' ) - .map((field) => ({ - label: field.fieldName, - value: field.id, - }))} - label="Y-axis Column" - value={column.fieldName} - onChange={(e) => - handleYAxisColumnChange(index, 'fieldName', e) - } - onBlur={() => handleSave(chartData)} - placeholder="Select" - /> - handleYAxisColumnChange(index, 'label', e)} - onBlur={() => handleSave(chartData)} - /> - { - handleYAxisColumnChange(index, 'color', e.target.value); - }} - onBlur={() => handleSave(chartData)} - /> - {isGroupedChart && index > 0 && ( - - )} -
- ))} +
+ +
+ {chartData?.options?.yAxisColumn?.map((column, index) => ( +
+ { + handleYAxisColumnChange( + index, + 'color', + e.target.value + ); + }} + onBlur={() => handleSave(chartData)} + /> +
+ {isGroupedChart && index > 0 && ( + + )} +
+ ))} +
{isGroupedChart && ( - + )}
)} From 90837ea9f33327dace2b57d682edf0f23135dde3 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 24 Feb 2025 16:25:43 +0530 Subject: [PATCH 19/21] add filters in the query --- .../dataset/[id]/edit/charts/queries/index.ts | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts index 3f93e2c9..2d7e4c35 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/queries/index.ts @@ -37,6 +37,11 @@ export const getResourceChartDetails = graphql(` id } chart + filters { + column + operator + value + } options { aggregateType xAxisColumn { @@ -80,6 +85,11 @@ export const createChart = graphql(` name } name + filters { + column + operator + value + } options { aggregateType xAxisColumn { @@ -112,8 +122,6 @@ export const createChart = graphql(` } `); - - export const CreateResourceChart: any = graphql(` mutation GenerateResourceChart($resource: UUID!) { addResourceChart(resource: $resource) { From d13a846fdd27e545eaad7915739d242c15133175 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 24 Feb 2025 16:25:54 +0530 Subject: [PATCH 20/21] add filters in types --- .../[entitySlug]/dataset/[id]/edit/charts/types.ts | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts index 065c9e48..4784c61c 100644 --- a/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts +++ b/app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/types.ts @@ -8,6 +8,11 @@ export interface YAxisColumnItem { color: string; } +export interface ChartFilters{ + column: string; + operator: string; + value: string; +} export interface ChartOptions { aggregateType: string; regionColumn?: string; @@ -23,7 +28,7 @@ export interface ChartOptions { export interface ChartData { chartId: string; description: string; - filters: any[]; + // filters: any[]; name: string; options: ChartOptions; resource: string; @@ -34,7 +39,7 @@ export interface ChartData { export interface ResourceChartInput { chartId: string; description: string; - filters: any[]; + filters: ChartFilters[]; name: string; options: ChartOptions; resource: string; From 5b4de4fc9edf4755bb0e15667c8935a6936fb294 Mon Sep 17 00:00:00 2001 From: sanjaypinna Date: Mon, 24 Feb 2025 16:26:20 +0530 Subject: [PATCH 21/21] add filters --- .../[id]/edit/charts/components/ChartForm.tsx | 110 +++++++++++++++++- .../charts/components/ChartsVisualize.tsx | 37 ++++-- 2 files changed, 137 insertions(+), 10 deletions(-) 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 index d62087c2..9dfb6f59 100644 --- 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 @@ -1,7 +1,6 @@ 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 { @@ -45,6 +44,20 @@ const ChartForm: React.FC = ({ } }, [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, @@ -82,6 +95,33 @@ const ChartForm: React.FC = ({ }); }; + // 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 = { @@ -233,7 +273,6 @@ const ChartForm: React.FC = ({ {(isBarOrLineChart || isGroupedChart) && (
-
{chartData?.options?.yAxisColumn?.map((column, index) => (
= ({ ))}
{isGroupedChart && ( - )} @@ -340,6 +379,71 @@ const ChartForm: React.FC = ({ /> )} + + {/*
+
+ {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 && ( + + )} +
+ ))} +
+ { ( + + )} +
*/}
); }; 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 d27e8015..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 @@ -25,6 +25,11 @@ interface YAxisColumnItem { label: string; color: string; } +interface ChartFilters { + column: string; + operator: string; + value: string; +} interface ChartOptions { aggregateType: string; @@ -41,7 +46,7 @@ interface ChartOptions { interface ChartData { chartId: string; description: string; - filters: any[]; + // filters: any[]; name: string; options: ChartOptions; resource: string; @@ -52,7 +57,7 @@ interface ChartData { interface ResourceChartInput { chartId: string; description: string; - filters: any[]; + // filters: ChartFilters[]; name: string; options: ChartOptions; resource: string; @@ -152,7 +157,13 @@ const ChartsVisualize: React.FC = ({ const [chartData, setChartData] = useState({ chartId: '', description: '', - filters: [], + // filters: [ + // { + // column: '', + // operator: '==', + // value: '', + // }, + // ], name: '', options: { aggregateType: 'SUM', @@ -188,6 +199,7 @@ const ChartsVisualize: React.FC = ({ } }, [chartId, chartDetails, resourceData]); + useEffect(() => { if (chartId && chartDetails?.resourceChart) { refetch(); @@ -195,6 +207,7 @@ const ChartsVisualize: React.FC = ({ } }, [chartId, chartDetails]); + const updateChartData = (resourceChart: any) => { if ( resourceChart.chartType === 'ASSAM_DISTRICT' || @@ -209,7 +222,14 @@ const ChartsVisualize: React.FC = ({ const updatedData: ChartData = { chartId: resourceChart.id, description: resourceChart.description || '', - filters: resourceChart.filters || [], + // 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, @@ -293,8 +313,6 @@ const ChartsVisualize: React.FC = ({ }); }, []); - - const { mutate, isLoading: editMutationLoading } = useMutation( (chartInput: { chartInput: ResourceChartInput }) => GraphQL( @@ -330,7 +348,7 @@ const ChartsVisualize: React.FC = ({ const chartInput: ResourceChartInput = { chartId: updatedData.chartId, description: updatedData.description, - filters: updatedData.filters, + // filters: updatedData.filters, name: updatedData.name, options: { ...updatedData.options, @@ -359,9 +377,14 @@ const ChartsVisualize: React.FC = ({ }, } ); + setPreviousChartData({ ...updatedData, type: currentType, // Ensure previousChartData also has correct type + // filters: + // updatedData.filters?.length > 0 + // ? updatedData.filters + // : [{ column: '', operator: '==', value: '' }], }); } },