Skip to content

Commit 0e4c6c0

Browse files
bhavabhuthibhavabhuthi
committed
Move charts flow from datasets to dashboard level
1 parent bfed774 commit 0e4c6c0

File tree

8 files changed

+121
-103
lines changed

8 files changed

+121
-103
lines changed

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

File renamed without changes.

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartHeader.tsx renamed to app/[locale]/dashboard/[entityType]/[entitySlug]/charts/components/ChartHeader.tsx

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Button, Icon, Sheet, Text } from 'opub-ui';
3+
34
import { Icons } from '@/components/icons';
45
import { ResourceData } from '../types';
56

@@ -49,9 +50,7 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
4950
</Button>
5051
<Sheet open={isSheetOpen}>
5152
<Sheet.Trigger>
52-
<Button onClick={() => setIsSheetOpen(true)}>
53-
Select Charts
54-
</Button>
53+
<Button onClick={() => setIsSheetOpen(true)}>Select Charts</Button>
5554
</Sheet.Trigger>
5655
<Sheet.Content side="bottom">
5756
<div className="flex flex-col gap-6 p-10">
@@ -67,21 +66,18 @@ const ChartHeader: React.FC<ChartHeaderProps> = ({
6766
>
6867
Visualize Data
6968
</Button>
70-
<Button
71-
kind="tertiary"
72-
onClick={() => setIsSheetOpen(false)}
73-
>
69+
<Button kind="tertiary" onClick={() => setIsSheetOpen(false)}>
7470
<Icon source={Icons.cross} size={24} />
7571
</Button>
7672
</div>
7773
</div>
7874
{chartsList?.chartsDetails.map((item, index) => (
7975
<div
8076
key={index}
81-
className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${chartId === item.id ? ' bg-baseGraySlateSolid5' : ''}`}
77+
className={`rounded-1 border-1 border-solid border-baseGraySlateSolid6 px-6 py-3 ${chartId === item.id ? ' bg-baseGraySlateSolid5' : ''}`}
8278
>
8379
<Button
84-
kind={'tertiary'}
80+
kind={'tertiary'}
8581
className="flex w-full justify-start"
8682
disabled={chartId === item.id}
8783
onClick={() => {

app/[locale]/dashboard/[entityType]/[entitySlug]/dataset/[id]/edit/charts/components/ChartsImage.tsx renamed to app/[locale]/dashboard/[entityType]/[entitySlug]/charts/components/ChartsImage.tsx

File renamed without changes.

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

Lines changed: 90 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,40 @@ import {
1717
import { GraphQL } from '@/lib/api';
1818
import { toTitleCase } from '@/lib/utils';
1919
import { Icons } from '@/components/icons';
20+
import ChartEditor from './ChartEditor';
2021

2122
interface ChartsListProps {
2223
setType: any;
23-
type: any;
2424
setChartId: any;
2525
setImageId: any;
2626
}
27-
const chartDetailsQuery: any = graphql(`
28-
query ChartDetails($datasetId: UUID!) {
29-
getChartData(datasetId: $datasetId) {
27+
28+
const getAllCharts: any = graphql(`
29+
query ChartList {
30+
getChartData {
3031
__typename
3132
... on TypeResourceChart {
3233
name
3334
id
3435
chartType
36+
dataset {
37+
title
38+
slug
39+
id
40+
}
41+
resource {
42+
name
43+
id
44+
}
3545
}
3646
... on TypeResourceChartImage {
3747
name
3848
id
49+
dataset {
50+
title
51+
slug
52+
id
53+
}
3954
}
4055
}
4156
}
@@ -77,19 +92,18 @@ const AddResourceChart: any = graphql(`
7792
}
7893
`);
7994

80-
const datasetResourceList: any = graphql(`
81-
query all_resources($datasetId: UUID!) {
82-
datasetResources(datasetId: $datasetId) {
83-
id
84-
type
85-
name
86-
}
87-
}
88-
`);
95+
// const datasetResourceList: any = graphql(`
96+
// query all_resources($datasetId: UUID!) {
97+
// datasetResources(datasetId: $datasetId) {
98+
// id
99+
// type
100+
// name
101+
// }
102+
// }
103+
// `);
89104

90105
const ChartsList: React.FC<ChartsListProps> = ({
91106
setType,
92-
type,
93107
setChartId,
94108
setImageId,
95109
}) => {
@@ -99,32 +113,32 @@ const ChartsList: React.FC<ChartsListProps> = ({
99113
id: string;
100114
}>();
101115

102-
const {
103-
data,
104-
isLoading,
105-
refetch,
106-
}: { data: any; isLoading: boolean; refetch: any } = useQuery(
107-
[`chartDetails_${params.id}`, type],
108-
() =>
109-
GraphQL(
110-
chartDetailsQuery,
111-
{
112-
[params.entityType]: params.entitySlug,
113-
},
114-
{
115-
datasetId: params.id,
116-
}
117-
)
116+
const [editorView, setEditorView] = useState(false);
117+
118+
const chartListRes: {
119+
data: any;
120+
isLoading: boolean;
121+
refetch: any;
122+
error: any;
123+
isError: boolean;
124+
} = useQuery([`chartList`], () =>
125+
GraphQL(
126+
getAllCharts,
127+
{
128+
[params.entityType]: params.entitySlug,
129+
},
130+
[]
131+
)
118132
);
119133

120134
const [filteredRows, setFilteredRows] = useState<any[]>([]);
121135

122136
useEffect(() => {
123-
refetch();
124-
if (data?.getChartData) {
125-
setFilteredRows(data.getChartData);
137+
chartListRes.refetch();
138+
if (chartListRes.data?.getChartData) {
139+
setFilteredRows(chartListRes.data.getChartData);
126140
}
127-
}, [data, type]);
141+
}, [chartListRes.data]);
128142

129143
const deleteResourceChartmutation: { mutate: any; isLoading: any } =
130144
useMutation(
@@ -139,7 +153,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
139153
{
140154
onSuccess: () => {
141155
toast('Chart Deleted Successfully');
142-
refetch();
156+
chartListRes.refetch();
143157
},
144158
onError: (err: any) => {
145159
toast(`Received ${err} while deleting chart `);
@@ -160,7 +174,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
160174
{
161175
onSuccess: () => {
162176
toast('ChartImage Deleted Successfully');
163-
refetch();
177+
chartListRes.refetch();
164178
},
165179
onError: (err: any) => {
166180
toast(`Received ${err} while deleting chart `);
@@ -183,7 +197,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
183197
{
184198
onSuccess: (res: any) => {
185199
toast('Resource ChartImage Created Successfully');
186-
refetch();
200+
chartListRes.refetch();
187201
setType('img');
188202
setImageId(res.addResourceChartImage.id);
189203

@@ -197,15 +211,15 @@ const ChartsList: React.FC<ChartsListProps> = ({
197211

198212
// AddResourceImage
199213

200-
const resourceList: { data: any } = useQuery([`charts_${params.id}`], () =>
201-
GraphQL(
202-
datasetResourceList,
203-
{
204-
[params.entityType]: params.entitySlug,
205-
},
206-
{ datasetId: params.id }
207-
)
208-
);
214+
// const resourceList: { data: any } = useQuery([`charts_${params.id}`], () =>
215+
// GraphQL(
216+
// datasetResourceList,
217+
// {
218+
// [params.entityType]: params.entitySlug,
219+
// },
220+
// { datasetId: params.id }
221+
// )
222+
// );
209223

210224
const resourceChart: {
211225
mutate: any;
@@ -222,7 +236,7 @@ const ChartsList: React.FC<ChartsListProps> = ({
222236
{
223237
onSuccess: (res: any) => {
224238
toast('Resource Chart Created Successfully');
225-
refetch();
239+
chartListRes.refetch();
226240
setType('visualize');
227241
setChartId(res.addResourceChart.id);
228242

@@ -263,6 +277,14 @@ const ChartsList: React.FC<ChartsListProps> = ({
263277
accessorKey: 'type',
264278
header: 'Chart type',
265279
},
280+
{
281+
accessorKey: 'dataset',
282+
header: 'Dataset',
283+
},
284+
{
285+
accessorKey: 'resource',
286+
header: 'Resource',
287+
},
266288
{
267289
header: 'DELETE',
268290
cell: ({ row }: any) => (
@@ -296,25 +318,30 @@ const ChartsList: React.FC<ChartsListProps> = ({
296318
? toTitleCase(item.chartType.split('_').join(' ').toLowerCase())
297319
: 'Image',
298320
id: item.id,
321+
resource: item.resource?.name || '',
322+
dataset: item.dataset?.title || item.dataset?.id || '',
299323
typename: item.__typename,
300324
}));
301325
};
302326

303327
const handleSearchChange = (e: string) => {
304328
const searchTerm = e.toLowerCase();
305-
const filtered = data?.getChartData.filter((row: any) =>
329+
const filtered = chartListRes.data?.getChartData.filter((row: any) =>
306330
row.name.toLowerCase().includes(searchTerm)
307331
);
308332
setFilteredRows(filtered || []);
309333
};
310334

311335
return (
312336
<>
313-
{' '}
314-
{!data || isLoading || deleteResourceChartmutation.isLoading ? (
337+
{editorView ? (
338+
<ChartEditor setEditorView={setEditorView} />
339+
) : chartListRes.isLoading || deleteResourceChartmutation.isLoading ? (
315340
<div className=" mt-8 flex justify-center">
316341
<Spinner />
317342
</div>
343+
) : chartListRes.isError ? (
344+
<>Error</>
318345
) : (
319346
<>
320347
<div className=" my-6 flex flex-wrap items-center justify-between gap-3 px-3 py-4">
@@ -326,32 +353,21 @@ const ChartsList: React.FC<ChartsListProps> = ({
326353
name="Search"
327354
onChange={(e) => handleSearchChange(e)}
328355
/>
329-
<div className="flex gap-3">
330-
<Button
331-
onClick={(e) =>
332-
resourceChart.mutate({
333-
resource: resourceList.data.datasetResources[0].id,
334-
})
335-
}
336-
>
337-
Visualize Data
338-
</Button>
339-
<Button
340-
onClick={(e) =>
341-
resourceChartImageMutation.mutate({ dataset: params.id })
342-
}
343-
>
344-
Add ChartImage
345-
</Button>
356+
<div className="flex justify-end gap-3">
357+
<Button onClick={(e) => setEditorView(true)}>Add Chart</Button>
346358
</div>
347359
</div>
348-
<DataTable
349-
columns={generateColumnData()}
350-
rows={generateTableData(filteredRows)}
351-
hideSelection
352-
truncate
353-
hideFooter
354-
/>
360+
{filteredRows.length > 0 ? (
361+
<DataTable
362+
columns={generateColumnData()}
363+
rows={generateTableData(filteredRows)}
364+
hideSelection
365+
truncate
366+
hideFooter
367+
/>
368+
) : (
369+
<>No records found</>
370+
)}
355371
</>
356372
)}
357373
</>

0 commit comments

Comments
 (0)