Skip to content

Commit 019834b

Browse files
bprusinowskibprusinowski
committed
feat: Shrink published chart when metadata panel is opened
1 parent e1bcb44 commit 019834b

1 file changed

Lines changed: 130 additions & 122 deletions

File tree

‎app/components/chart-published.tsx‎

Lines changed: 130 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
33
import { makeStyles } from "@mui/styles";
44
import * as React from "react";
55
import { useEffect, useMemo, useRef } from "react";
6+
import { useStore } from "zustand";
67

78
import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
89
import { isUsingImputation } from "@/charts/shared/imputation";
@@ -32,6 +33,7 @@ import {
3233
PublishedConfiguratorStateProvider,
3334
} from "@/configurator";
3435
import { DataSetTable } from "@/configurator/components/datatable";
36+
import { DRAWER_WIDTH } from "@/configurator/components/drawer";
3537
import { flag } from "@/configurator/components/flag";
3638
import { parseDate } from "@/configurator/components/ui-helpers";
3739
import {
@@ -59,34 +61,35 @@ export const ChartPublished = ({
5961
chartConfig: ChartConfig;
6062
configKey: string;
6163
}) => {
62-
const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
63-
6464
return (
6565
<ChartTablePreviewProvider>
66-
<MetadataPanelStoreContext.Provider value={metadataPanelStore}>
67-
<ChartPublishedInner
68-
dataSet={dataSet}
69-
dataSource={dataSource}
70-
meta={meta}
71-
chartConfig={chartConfig}
72-
configKey={configKey}
73-
/>
74-
</MetadataPanelStoreContext.Provider>
66+
<ChartPublishedInner
67+
dataSet={dataSet}
68+
dataSource={dataSource}
69+
meta={meta}
70+
chartConfig={chartConfig}
71+
configKey={configKey}
72+
/>
7573
</ChartTablePreviewProvider>
7674
);
7775
};
7876

79-
const useStyles = makeStyles((theme: Theme) => ({
80-
root: {
81-
position: "relative",
82-
display: "flex",
83-
flexGrow: 1,
84-
flexDirection: "column",
85-
padding: theme.spacing(5),
86-
color: theme.palette.grey[800],
87-
overflowX: "auto",
88-
},
89-
}));
77+
const useStyles = makeStyles<Theme, { metadataPanelOpen: boolean }>(
78+
(theme) => ({
79+
root: {
80+
position: "relative",
81+
display: "flex",
82+
flexGrow: 1,
83+
flexDirection: "column",
84+
padding: theme.spacing(5),
85+
paddingLeft: ({ metadataPanelOpen }) =>
86+
`calc(${theme.spacing(5)} + ${metadataPanelOpen ? DRAWER_WIDTH : 0}px)`,
87+
color: theme.palette.grey[800],
88+
overflowX: "auto",
89+
transition: "padding 0.25s ease",
90+
},
91+
})
92+
);
9093

9194
export const ChartPublishedInner = ({
9295
dataSet,
@@ -101,7 +104,10 @@ export const ChartPublishedInner = ({
101104
chartConfig: ChartConfig;
102105
configKey: string;
103106
}) => {
104-
const classes = useStyles();
107+
const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
108+
const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);
109+
110+
const classes = useStyles({ metadataPanelOpen });
105111
const locale = useLocale();
106112
const isTrustedDataSource = useIsTrustedDataSource(dataSource);
107113

@@ -140,109 +146,111 @@ export const ChartPublishedInner = ({
140146
}, [metaData?.dataCubeByIri?.dimensions, metaData?.dataCubeByIri?.measures]);
141147

142148
return (
143-
<Box className={classes.root} ref={rootRef}>
144-
<ChartErrorBoundary resetKeys={[chartConfig]}>
145-
{metaData?.dataCubeByIri?.publicationStatus ===
146-
DataCubePublicationStatus.Draft && (
147-
<Box sx={{ mb: 4 }}>
148-
<HintRed iconName="datasetError" iconSize={64}>
149-
<Trans id="dataset.publicationStatus.draft.warning">
150-
Careful, this dataset is only a draft.
151-
<br />
152-
<strong>Don&apos;t use for reporting!</strong>
153-
</Trans>
154-
</HintRed>
155-
</Box>
156-
)}
157-
{metaData?.dataCubeByIri?.expires && (
158-
<Box sx={{ mb: 4 }}>
159-
<HintRed iconName="datasetError" iconSize={64}>
160-
<Trans id="dataset.publicationStatus.expires.warning">
161-
Careful, the data for this chart has expired.
162-
<br />
163-
<strong>Don&apos;t use for reporting!</strong>
164-
</Trans>
165-
</HintRed>
166-
</Box>
167-
)}
168-
{!isTrustedDataSource && (
169-
<Box sx={{ mb: 4 }}>
170-
<HintYellow iconName="hintWarning">
171-
<Trans id="data.source.notTrusted">
172-
This chart is not using a trusted data source.
173-
</Trans>
174-
</HintYellow>
175-
</Box>
176-
)}
177-
{isUsingImputation(chartConfig) && (
178-
<Box sx={{ mb: 4 }}>
179-
<HintBlue iconName="hintWarning">
180-
<Trans id="dataset.hasImputedValues">
181-
Some data in this dataset is missing and has been interpolated
182-
to fill the gaps.
183-
</Trans>
184-
</HintBlue>
185-
</Box>
186-
)}
187-
<Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
188-
<Typography component="div" variant="h2" mb={2}>
189-
{meta.title[locale]}
190-
</Typography>
191-
192-
{flag("metadata") && (
193-
<MetadataPanel
194-
datasetIri={dataSet}
195-
dataSource={dataSource}
196-
dimensions={allDimensions}
197-
container={rootRef.current}
198-
/>
149+
<MetadataPanelStoreContext.Provider value={metadataPanelStore}>
150+
<Box className={classes.root} ref={rootRef}>
151+
<ChartErrorBoundary resetKeys={[chartConfig]}>
152+
{metaData?.dataCubeByIri?.publicationStatus ===
153+
DataCubePublicationStatus.Draft && (
154+
<Box sx={{ mb: 4 }}>
155+
<HintRed iconName="datasetError" iconSize={64}>
156+
<Trans id="dataset.publicationStatus.draft.warning">
157+
Careful, this dataset is only a draft.
158+
<br />
159+
<strong>Don&apos;t use for reporting!</strong>
160+
</Trans>
161+
</HintRed>
162+
</Box>
163+
)}
164+
{metaData?.dataCubeByIri?.expires && (
165+
<Box sx={{ mb: 4 }}>
166+
<HintRed iconName="datasetError" iconSize={64}>
167+
<Trans id="dataset.publicationStatus.expires.warning">
168+
Careful, the data for this chart has expired.
169+
<br />
170+
<strong>Don&apos;t use for reporting!</strong>
171+
</Trans>
172+
</HintRed>
173+
</Box>
174+
)}
175+
{!isTrustedDataSource && (
176+
<Box sx={{ mb: 4 }}>
177+
<HintYellow iconName="hintWarning">
178+
<Trans id="data.source.notTrusted">
179+
This chart is not using a trusted data source.
180+
</Trans>
181+
</HintYellow>
182+
</Box>
199183
)}
200-
</Flex>
184+
{isUsingImputation(chartConfig) && (
185+
<Box sx={{ mb: 4 }}>
186+
<HintBlue iconName="hintWarning">
187+
<Trans id="dataset.hasImputedValues">
188+
Some data in this dataset is missing and has been interpolated
189+
to fill the gaps.
190+
</Trans>
191+
</HintBlue>
192+
</Box>
193+
)}
194+
<Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
195+
<Typography component="div" variant="h2" mb={2}>
196+
{meta.title[locale]}
197+
</Typography>
201198

202-
{meta.description[locale] && (
203-
<Typography component="div" variant="body1" mb={2}>
204-
{meta.description[locale]}
205-
</Typography>
206-
)}
207-
<InteractiveFiltersProvider>
208-
<Flex
209-
flexDirection="column"
210-
ref={containerRef}
211-
height={containerHeight.current!}
212-
flexGrow={1}
213-
>
214-
<PublishedConfiguratorStateProvider
215-
chartId={configKey}
216-
initialState={publishedConfiguratorState}
217-
>
218-
{isTablePreview ? (
219-
<DataSetTable
220-
sx={{ maxHeight: "100%" }}
221-
dataSetIri={dataSet}
222-
dataSource={dataSource}
223-
chartConfig={chartConfig}
224-
/>
225-
) : (
226-
<ChartWithInteractiveFilters
227-
dataSet={dataSet}
228-
dataSource={dataSource}
229-
chartConfig={chartConfig}
230-
/>
231-
)}
232-
</PublishedConfiguratorStateProvider>
199+
{flag("metadata") && (
200+
<MetadataPanel
201+
datasetIri={dataSet}
202+
dataSource={dataSource}
203+
dimensions={allDimensions}
204+
container={rootRef.current}
205+
/>
206+
)}
233207
</Flex>
234-
{chartConfig && (
235-
<ChartFootnotes
236-
dataSetIri={dataSet}
237-
dataSource={dataSource}
238-
chartConfig={chartConfig}
239-
configKey={configKey}
240-
onToggleTableView={handleToggleTableView}
241-
/>
208+
209+
{meta.description[locale] && (
210+
<Typography component="div" variant="body1" mb={2}>
211+
{meta.description[locale]}
212+
</Typography>
242213
)}
243-
</InteractiveFiltersProvider>
244-
</ChartErrorBoundary>
245-
</Box>
214+
<InteractiveFiltersProvider>
215+
<Flex
216+
flexDirection="column"
217+
ref={containerRef}
218+
height={containerHeight.current!}
219+
flexGrow={1}
220+
>
221+
<PublishedConfiguratorStateProvider
222+
chartId={configKey}
223+
initialState={publishedConfiguratorState}
224+
>
225+
{isTablePreview ? (
226+
<DataSetTable
227+
sx={{ maxHeight: "100%" }}
228+
dataSetIri={dataSet}
229+
dataSource={dataSource}
230+
chartConfig={chartConfig}
231+
/>
232+
) : (
233+
<ChartWithInteractiveFilters
234+
dataSet={dataSet}
235+
dataSource={dataSource}
236+
chartConfig={chartConfig}
237+
/>
238+
)}
239+
</PublishedConfiguratorStateProvider>
240+
</Flex>
241+
{chartConfig && (
242+
<ChartFootnotes
243+
dataSetIri={dataSet}
244+
dataSource={dataSource}
245+
chartConfig={chartConfig}
246+
configKey={configKey}
247+
onToggleTableView={handleToggleTableView}
248+
/>
249+
)}
250+
</InteractiveFiltersProvider>
251+
</ChartErrorBoundary>
252+
</Box>
253+
</MetadataPanelStoreContext.Provider>
246254
);
247255
};
248256

0 commit comments

Comments
 (0)