Skip to content

Commit bcc1cb6

Browse files
ptbrowneptbrowne
committed
feat: Change layout to have options to the left
1 parent 4d472da commit bcc1cb6

1 file changed

Lines changed: 151 additions & 117 deletions

File tree

‎app/pages/_pivot.tsx‎

Lines changed: 151 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@ import useEvent from "@/utils/use-event";
3131
const Card = styled(MUICard)({
3232
border: "1px solid #ccc",
3333
backgroundColor: "#eee",
34-
borderRadius: "1rem",
3534
padding: "1rem",
3635
marginTop: 16,
3736
marginBottom: 16,
@@ -59,7 +58,27 @@ type Observation = Record<string, any>;
5958
type PivottedObservation = Record<string, any>;
6059

6160
const useStyles = makeStyles((theme: Theme) => ({
62-
table: {
61+
pivotTableRoot: {
62+
display: "grid",
63+
gridTemplateColumns: "280px 1fr",
64+
gridTemplateAreas: `
65+
"options chart"
66+
`,
67+
gridGap: "1rem",
68+
},
69+
pivotTableOptions: {
70+
paddingTop: "1rem",
71+
gridArea: "options",
72+
},
73+
pivotTableChart: {
74+
gridArea: "chart",
75+
overflowX: "hidden",
76+
},
77+
pivotTableContainer: {
78+
overflowX: "scroll",
79+
},
80+
pivotTableTable: {
81+
width: "100%",
6382
fontSize: "12px",
6483
borderCollapse: "collapse",
6584
"& td, & th": {
@@ -70,9 +89,12 @@ const useStyles = makeStyles((theme: Theme) => ({
7089
},
7190
optionGroup: {
7291
"& + &": {
73-
marginTop: "0.5rem",
92+
marginTop: "0.75rem",
7493
},
7594
},
95+
row: {
96+
transition: "background-color 0.3s ease",
97+
},
7698
expanded: {},
7799
depth_0: {
78100
"&$expanded": {
@@ -128,10 +150,7 @@ const Bar = ({ percent }: { percent: number }) => {
128150
);
129151
};
130152

131-
const Page = () => {
132-
const [dataset, setDataset] = useState(
133-
datasets[Object.keys(datasets)[0] as keyof typeof datasets]!
134-
);
153+
const PivotTable = ({ dataset }: { dataset: typeof datasets[number] }) => {
135154
const [activeMeasures, setActiveMeasures] = useState<
136155
Record<Measure["iri"], boolean>
137156
>({});
@@ -175,17 +194,6 @@ const Page = () => {
175194
return data?.dataCubeByIri?.observations?.data || [];
176195
}, [data]);
177196

178-
const handleChangeDataset = (ev: ChangeEvent<HTMLSelectElement>) => {
179-
const name = ev.currentTarget.value;
180-
if (name in datasets) {
181-
setDataset(datasets[name as keyof typeof datasets]);
182-
setActiveMeasures({});
183-
setIgnoredDimensions({});
184-
setPivotDimension(undefined);
185-
setHierarchyDimension(undefined);
186-
}
187-
};
188-
189197
const handleChangePivot = (ev: ChangeEvent<HTMLSelectElement>) => {
190198
const name = ev.currentTarget.value;
191199
setPivotDimension(dimensions?.find((d) => d.iri === name));
@@ -430,25 +438,8 @@ const Page = () => {
430438
}, [activeMeasures, measures]);
431439

432440
return (
433-
<Box m={5}>
434-
<Typography variant="h2">Pivot table</Typography>
435-
<Typography variant="overline" display="block">
436-
Dataset
437-
</Typography>
438-
<select onChange={handleChangeDataset} value={dataset.iri}>
439-
{Object.keys(datasets).map((k) => {
440-
const dataset = datasets[k as keyof typeof datasets];
441-
return (
442-
<option key={dataset.iri} value={dataset.iri}>
443-
{dataset.label}
444-
</option>
445-
);
446-
})}
447-
</select>
448-
<Card>
449-
<Typography variant="h5" gutterBottom>
450-
Options
451-
</Typography>
441+
<Box className={classes.pivotTableRoot}>
442+
<div className={classes.pivotTableOptions}>
452443
<div className={classes.optionGroup}>
453444
<Typography variant="h6" gutterBottom display="block">
454445
Pivot columns
@@ -498,7 +489,7 @@ const Page = () => {
498489
<FormControlLabel
499490
key={m.iri}
500491
label={m.label}
501-
componentsProps={{ typography: { variant: "body2" } }}
492+
componentsProps={{ typography: { variant: "caption" } }}
502493
control={
503494
<Switch
504495
size="small"
@@ -517,7 +508,7 @@ const Page = () => {
517508
</Typography>
518509
<Typography variant="caption" gutterBottom display="block">
519510
If some dimensions contain duplicate information with another
520-
dimension, you need to ignore them for the grouping to work.
511+
dimension, it is necessary to ignore them for the grouping to work.
521512
<br />
522513
Ex: the Hierarchy column of the Gas dataset is a duplicate of the
523514
Source of emission column, it needs to be ignored.
@@ -527,7 +518,7 @@ const Page = () => {
527518
<FormControlLabel
528519
key={d.iri}
529520
label={d.label}
530-
componentsProps={{ typography: { variant: "body2" } }}
521+
componentsProps={{ typography: { variant: "caption" } }}
531522
control={
532523
<Switch
533524
size="small"
@@ -540,86 +531,129 @@ const Page = () => {
540531
);
541532
})}
542533
</div>
543-
</Card>
544-
<Card>
545-
<details>
546-
<summary>
547-
<Typography variant="h6" display="inline">
548-
Debug
534+
</div>
535+
<div className={classes.pivotTableChart}>
536+
<Card elevation={0}>
537+
<details>
538+
<summary>
539+
<Typography variant="h6" display="inline">
540+
Debug
541+
</Typography>
542+
</summary>
543+
544+
<Typography variant="overline" display="block">
545+
Columns
549546
</Typography>
550-
</summary>
551-
552-
<Typography variant="overline" display="block">
553-
Columns
554-
</Typography>
555-
<Inspector data={columns} />
556-
<Typography variant="overline" display="block">
557-
Pivotted
558-
</Typography>
559-
<Inspector data={pivotted} />
560-
<Typography variant="overline" display="block">
561-
Pivotted tree
562-
</Typography>
563-
<Inspector data={tree} />
564-
<Typography variant="overline" display="block">
565-
Hierarchy
566-
</Typography>
567-
<Inspector
568-
data={hierarchyData?.dataCubeByIri?.dimensionByIri?.hierarchy}
569-
/>
570-
<Typography variant="overline" display="block">
571-
Hierarchy indexes
572-
</Typography>
573-
<Inspector data={hierarchyIndexes} />
574-
</details>
575-
</Card>
576-
{fetching ? <Loading /> : null}
577-
<table {...getTableProps()} className={classes.table}>
578-
<thead>
579-
{headerGroups.map((headerGroup) => (
580-
// eslint-disable-next-line react/jsx-key
581-
<tr {...headerGroup.getHeaderGroupProps()}>
582-
{headerGroup.headers.map((column) => (
547+
<Inspector data={columns} />
548+
<Typography variant="overline" display="block">
549+
Pivotted
550+
</Typography>
551+
<Inspector data={pivotted} />
552+
<Typography variant="overline" display="block">
553+
Pivotted tree
554+
</Typography>
555+
<Inspector data={tree} />
556+
<Typography variant="overline" display="block">
557+
Hierarchy
558+
</Typography>
559+
<Inspector
560+
data={hierarchyData?.dataCubeByIri?.dimensionByIri?.hierarchy}
561+
/>
562+
<Typography variant="overline" display="block">
563+
Hierarchy indexes
564+
</Typography>
565+
<Inspector data={hierarchyIndexes} />
566+
</details>
567+
</Card>
568+
{fetching ? <Loading /> : null}
569+
<div className={classes.pivotTableContainer}>
570+
<table {...getTableProps()} className={classes.pivotTableTable}>
571+
<thead>
572+
{headerGroups.map((headerGroup) => (
583573
// eslint-disable-next-line react/jsx-key
584-
<th {...column.getHeaderProps(column.getSortByToggleProps())}>
585-
{column.render("Header")}
586-
<span>
587-
{column.isSorted
588-
? column.isSortedDesc
589-
? " 🔽"
590-
: " 🔼"
591-
: ""}
592-
</span>
593-
</th>
594-
))}
595-
</tr>
596-
))}
597-
</thead>
598-
<tbody {...getTableBodyProps()}>
599-
{rows.map((row) => {
600-
prepareRow(row);
601-
return (
602-
// eslint-disable-next-line react/jsx-key
603-
<tr
604-
{...row.getRowProps()}
605-
className={clsx(
606-
classes[
607-
`depth_${expandedDepth - row.depth}` as keyof typeof classes
608-
],
609-
row.isExpanded ? classes.expanded : null
610-
)}
611-
>
612-
{row.cells.map((cell) => {
613-
return (
574+
<tr {...headerGroup.getHeaderGroupProps()}>
575+
{headerGroup.headers.map((column) => (
614576
// eslint-disable-next-line react/jsx-key
615-
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
616-
);
617-
})}
618-
</tr>
619-
);
620-
})}
621-
</tbody>
622-
</table>
577+
<th
578+
{...column.getHeaderProps(column.getSortByToggleProps())}
579+
>
580+
{column.render("Header")}
581+
<span>
582+
{column.isSorted
583+
? column.isSortedDesc
584+
? " 🔽"
585+
: " 🔼"
586+
: ""}
587+
</span>
588+
</th>
589+
))}
590+
</tr>
591+
))}
592+
</thead>
593+
<tbody {...getTableBodyProps()}>
594+
{rows.map((row) => {
595+
prepareRow(row);
596+
return (
597+
// eslint-disable-next-line react/jsx-key
598+
<tr
599+
{...row.getRowProps()}
600+
className={clsx(
601+
classes.row,
602+
row.isExpanded ? classes.expanded : null,
603+
classes[
604+
`depth_${
605+
expandedDepth - row.depth
606+
}` as keyof typeof classes
607+
]
608+
)}
609+
>
610+
{row.cells.map((cell) => {
611+
return (
612+
// eslint-disable-next-line react/jsx-key
613+
<td {...cell.getCellProps()}>{cell.render("Cell")}</td>
614+
);
615+
})}
616+
</tr>
617+
);
618+
})}
619+
</tbody>
620+
</table>
621+
</div>
622+
</div>
623+
</Box>
624+
);
625+
};
626+
627+
const Page = () => {
628+
const [dataset, setDataset] = useState(
629+
datasets[Object.keys(datasets)[0] as keyof typeof datasets]!
630+
);
631+
632+
const handleChangeDataset = (ev: ChangeEvent<HTMLSelectElement>) => {
633+
const name = ev.currentTarget.value;
634+
if (name in datasets) {
635+
setDataset(datasets[name as keyof typeof datasets]);
636+
}
637+
};
638+
639+
return (
640+
<Box m={5}>
641+
<Typography variant="h2">Pivot table</Typography>
642+
<Typography variant="overline" display="block">
643+
Dataset
644+
</Typography>
645+
646+
<select onChange={handleChangeDataset} value={dataset.iri}>
647+
{Object.keys(datasets).map((k) => {
648+
const dataset = datasets[k as keyof typeof datasets];
649+
return (
650+
<option key={dataset.iri} value={dataset.iri}>
651+
{dataset.label}
652+
</option>
653+
);
654+
})}
655+
</select>
656+
<PivotTable key={dataset.iri} dataset={dataset} />
623657
</Box>
624658
);
625659
};

0 commit comments

Comments
 (0)