Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
bprusinowski committed Nov 28, 2022
1 parent 0426cc3 commit 1476474
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 19 deletions.
73 changes: 54 additions & 19 deletions app/components/chart-filters-list.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,35 @@
import { Box, Typography } from "@mui/material";
import { Box, Button, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import { Fragment } from "react";
import shallow from "zustand/shallow";

import { useQueryFilters } from "@/charts/shared/chart-helpers";
import { useMetadataPanelStore } from "@/components/metadata-panel";
import { ChartConfig, DataSource } from "@/configurator";
import { isTemporalDimension } from "@/domain/data";
import { useTimeFormatUnit } from "@/formatters";
import { useDataCubeMetadataWithComponentValuesQuery } from "@/graphql/query-hooks";
import {
DimensionMetadataFragment,
useDataCubeMetadataWithComponentValuesQuery,
} from "@/graphql/query-hooks";
import { useLocale } from "@/locales/use-locale";
import { MaybeTooltip } from "@/utils/maybe-tooltip";
import useEvent from "@/utils/use-event";

const useStyles = makeStyles<Theme>((theme) => ({
root: {
display: "flex",
flexWrap: "wrap",
},
button: {
minHeight: 0,
padding: 0,
fontWeight: "bold",
color: theme.palette.grey[800],
},
semicolon: {
marginRight: theme.spacing(1),
},
}));

export const ChartFiltersList = ({
dataSetIri,
Expand All @@ -18,9 +40,26 @@ export const ChartFiltersList = ({
dataSource: DataSource;
chartConfig: ChartConfig;
}) => {
const classes = useStyles();
const locale = useLocale();
const timeFormatUnit = useTimeFormatUnit();

const { setOpen, setActiveSection, setSelectedDimension } =
useMetadataPanelStore(
(state) => ({
setOpen: state.setOpen,
setActiveSection: state.setActiveSection,
setSelectedDimension: state.setSelectedDimension,
}),
shallow
);

const handleClick = useEvent((d: DimensionMetadataFragment) => {
setOpen(true);
setActiveSection("data");
setSelectedDimension(d);
});

const [{ data }] = useDataCubeMetadataWithComponentValuesQuery({
variables: {
iri: dataSetIri,
Expand Down Expand Up @@ -67,28 +106,24 @@ export const ChartFiltersList = ({
<>
{namedFilters.length > 0 && (
<Typography
className={classes.root}
component="div"
variant="body2"
sx={{ color: "grey.800" }}
data-testid="chart-filters-list"
>
{namedFilters.map(({ dimension, value }, i) => (
<Fragment key={dimension.iri}>
<Box component="span" fontWeight="bold">
<MaybeTooltip text={dimension.description || undefined}>
<span
style={{
textDecoration: dimension.description
? "underline"
: undefined,
}}
>
{dimension.label}
</span>
</MaybeTooltip>

{": "}
</Box>
<Button
className={classes.button}
variant="text"
size="small"
onClick={() => {
handleClick(dimension);
}}
>
{dimension.label}
</Button>
<span className={classes.semicolon}>{": "}</span>

<Box component="span">{value && value.label}</Box>
{i < namedFilters.length - 1 && ", "}
Expand Down
4 changes: 4 additions & 0 deletions app/components/metadata-panel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ type MetadataPanelSection = "general" | "data";

type MetadataPanelState = {
open: boolean;
setOpen: (d: boolean) => void;
toggle: () => void;
activeSection: MetadataPanelSection;
setActiveSection: (d: MetadataPanelSection) => void;
Expand All @@ -47,6 +48,9 @@ type MetadataPanelState = {

export const useMetadataPanelStore = create<MetadataPanelState>((set, get) => ({
open: false,
setOpen: (d: boolean) => {
set({ open: d });
},
toggle: () => {
set({ open: !get().open });
},
Expand Down

0 comments on commit 1476474

Please sign in to comment.