Skip to content

Commit

Permalink
feat: Shrink published chart when metadata panel is opened
Browse files Browse the repository at this point in the history
  • Loading branch information
@bprusinowski
bprusinowski committed Nov 29, 2022
1 parent 5371026 commit ddebff3
Showing 1 changed file with 130 additions and 122 deletions.
252 changes: 130 additions & 122 deletions app/components/chart-published.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Box, Theme, Typography } from "@mui/material";
import { makeStyles } from "@mui/styles";
import * as React from "react";
import { useEffect, useMemo, useRef } from "react";
import { useStore } from "zustand";

import { ChartDataFilters } from "@/charts/shared/chart-data-filters";
import { isUsingImputation } from "@/charts/shared/imputation";
Expand Down Expand Up @@ -32,6 +33,7 @@ import {
PublishedConfiguratorStateProvider,
} from "@/configurator";
import { DataSetTable } from "@/configurator/components/datatable";
import { DRAWER_WIDTH } from "@/configurator/components/drawer";
import { flag } from "@/configurator/components/flag";
import { parseDate } from "@/configurator/components/ui-helpers";
import {
Expand Down Expand Up @@ -59,34 +61,35 @@ export const ChartPublished = ({
chartConfig: ChartConfig;
configKey: string;
}) => {
const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);

return (
<ChartTablePreviewProvider>
<MetadataPanelStoreContext.Provider value={metadataPanelStore}>
<ChartPublishedInner
dataSet={dataSet}
dataSource={dataSource}
meta={meta}
chartConfig={chartConfig}
configKey={configKey}
/>
</MetadataPanelStoreContext.Provider>
<ChartPublishedInner
dataSet={dataSet}
dataSource={dataSource}
meta={meta}
chartConfig={chartConfig}
configKey={configKey}
/>
</ChartTablePreviewProvider>
);
};

const useStyles = makeStyles((theme: Theme) => ({
root: {
position: "relative",
display: "flex",
flexGrow: 1,
flexDirection: "column",
padding: theme.spacing(5),
color: theme.palette.grey[800],
overflowX: "auto",
},
}));
const useStyles = makeStyles<Theme, { metadataPanelOpen: boolean }>(
(theme) => ({
root: {
position: "relative",
display: "flex",
flexGrow: 1,
flexDirection: "column",
padding: theme.spacing(5),
paddingLeft: ({ metadataPanelOpen }) =>
`calc(${theme.spacing(5)} + ${metadataPanelOpen ? DRAWER_WIDTH : 0}px)`,
color: theme.palette.grey[800],
overflowX: "auto",
transition: "padding 0.25s ease",
},
})
);

export const ChartPublishedInner = ({
dataSet,
Expand All @@ -101,7 +104,10 @@ export const ChartPublishedInner = ({
chartConfig: ChartConfig;
configKey: string;
}) => {
const classes = useStyles();
const metadataPanelStore = useMemo(() => createMetadataPanelStore(), []);
const metadataPanelOpen = useStore(metadataPanelStore, (state) => state.open);

const classes = useStyles({ metadataPanelOpen });
const locale = useLocale();
const isTrustedDataSource = useIsTrustedDataSource(dataSource);

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

return (
<Box className={classes.root} ref={rootRef}>
<ChartErrorBoundary resetKeys={[chartConfig]}>
{metaData?.dataCubeByIri?.publicationStatus ===
DataCubePublicationStatus.Draft && (
<Box sx={{ mb: 4 }}>
<HintRed iconName="datasetError" iconSize={64}>
<Trans id="dataset.publicationStatus.draft.warning">
Careful, this dataset is only a draft.
<br />
<strong>Don&apos;t use for reporting!</strong>
</Trans>
</HintRed>
</Box>
)}
{metaData?.dataCubeByIri?.expires && (
<Box sx={{ mb: 4 }}>
<HintRed iconName="datasetError" iconSize={64}>
<Trans id="dataset.publicationStatus.expires.warning">
Careful, the data for this chart has expired.
<br />
<strong>Don&apos;t use for reporting!</strong>
</Trans>
</HintRed>
</Box>
)}
{!isTrustedDataSource && (
<Box sx={{ mb: 4 }}>
<HintYellow iconName="hintWarning">
<Trans id="data.source.notTrusted">
This chart is not using a trusted data source.
</Trans>
</HintYellow>
</Box>
)}
{isUsingImputation(chartConfig) && (
<Box sx={{ mb: 4 }}>
<HintBlue iconName="hintWarning">
<Trans id="dataset.hasImputedValues">
Some data in this dataset is missing and has been interpolated
to fill the gaps.
</Trans>
</HintBlue>
</Box>
)}
<Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Typography component="div" variant="h2" mb={2}>
{meta.title[locale]}
</Typography>

{flag("metadata") && (
<MetadataPanel
datasetIri={dataSet}
dataSource={dataSource}
dimensions={allDimensions}
container={rootRef.current}
/>
<MetadataPanelStoreContext.Provider value={metadataPanelStore}>
<Box className={classes.root} ref={rootRef}>
<ChartErrorBoundary resetKeys={[chartConfig]}>
{metaData?.dataCubeByIri?.publicationStatus ===
DataCubePublicationStatus.Draft && (
<Box sx={{ mb: 4 }}>
<HintRed iconName="datasetError" iconSize={64}>
<Trans id="dataset.publicationStatus.draft.warning">
Careful, this dataset is only a draft.
<br />
<strong>Don&apos;t use for reporting!</strong>
</Trans>
</HintRed>
</Box>
)}
{metaData?.dataCubeByIri?.expires && (
<Box sx={{ mb: 4 }}>
<HintRed iconName="datasetError" iconSize={64}>
<Trans id="dataset.publicationStatus.expires.warning">
Careful, the data for this chart has expired.
<br />
<strong>Don&apos;t use for reporting!</strong>
</Trans>
</HintRed>
</Box>
)}
{!isTrustedDataSource && (
<Box sx={{ mb: 4 }}>
<HintYellow iconName="hintWarning">
<Trans id="data.source.notTrusted">
This chart is not using a trusted data source.
</Trans>
</HintYellow>
</Box>
)}
</Flex>
{isUsingImputation(chartConfig) && (
<Box sx={{ mb: 4 }}>
<HintBlue iconName="hintWarning">
<Trans id="dataset.hasImputedValues">
Some data in this dataset is missing and has been interpolated
to fill the gaps.
</Trans>
</HintBlue>
</Box>
)}
<Flex sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Typography component="div" variant="h2" mb={2}>
{meta.title[locale]}
</Typography>

{meta.description[locale] && (
<Typography component="div" variant="body1" mb={2}>
{meta.description[locale]}
</Typography>
)}
<InteractiveFiltersProvider>
<Flex
flexDirection="column"
ref={containerRef}
height={containerHeight.current!}
flexGrow={1}
>
<PublishedConfiguratorStateProvider
chartId={configKey}
initialState={publishedConfiguratorState}
>
{isTablePreview ? (
<DataSetTable
sx={{ maxHeight: "100%" }}
dataSetIri={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
/>
) : (
<ChartWithInteractiveFilters
dataSet={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
/>
)}
</PublishedConfiguratorStateProvider>
{flag("metadata") && (
<MetadataPanel
datasetIri={dataSet}
dataSource={dataSource}
dimensions={allDimensions}
container={rootRef.current}
/>
)}
</Flex>
{chartConfig && (
<ChartFootnotes
dataSetIri={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
configKey={configKey}
onToggleTableView={handleToggleTableView}
/>

{meta.description[locale] && (
<Typography component="div" variant="body1" mb={2}>
{meta.description[locale]}
</Typography>
)}
</InteractiveFiltersProvider>
</ChartErrorBoundary>
</Box>
<InteractiveFiltersProvider>
<Flex
flexDirection="column"
ref={containerRef}
height={containerHeight.current!}
flexGrow={1}
>
<PublishedConfiguratorStateProvider
chartId={configKey}
initialState={publishedConfiguratorState}
>
{isTablePreview ? (
<DataSetTable
sx={{ maxHeight: "100%" }}
dataSetIri={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
/>
) : (
<ChartWithInteractiveFilters
dataSet={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
/>
)}
</PublishedConfiguratorStateProvider>
</Flex>
{chartConfig && (
<ChartFootnotes
dataSetIri={dataSet}
dataSource={dataSource}
chartConfig={chartConfig}
configKey={configKey}
onToggleTableView={handleToggleTableView}
/>
)}
</InteractiveFiltersProvider>
</ChartErrorBoundary>
</Box>
</MetadataPanelStoreContext.Provider>
);
};

Expand Down

0 comments on commit ddebff3

Please sign in to comment.