diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 94b73f3d2..eb00f564e 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -9,7 +9,13 @@ import { import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; -import React, { forwardRef, useCallback, useMemo, useState } from "react"; +import React, { + ReactNode, + forwardRef, + useCallback, + useMemo, + useState, +} from "react"; import { DataSetTable } from "@/browse/datatable"; import { ChartDataFilters } from "@/charts/shared/chart-data-filters"; @@ -346,7 +352,7 @@ const SingleURLsPreview = (props: SingleURLsPreviewProps) => { type ChartPreviewInnerProps = ChartPreviewProps & { chartKey?: string | null; - actionElementSlot?: React.ReactNode; + actionElementSlot?: ReactNode; disableMetadataPanel?: boolean; children?: React.ReactNode; }; @@ -403,20 +409,21 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { {props.children} - {/* FIXME: adapt to design */} - {metadata?.dataCubesMetadata.some( - (d) => d.publicationStatus === DataCubePublicationStatus.Draft - ) && ( - - - - Careful, this dataset is only a draft. -
- Don't use for reporting! - - - - )} +
+ {metadata?.dataCubesMetadata.some( + (d) => d.publicationStatus === DataCubePublicationStatus.Draft + ) && ( + + + + Careful, this dataset is only a draft. +
+ Don't use for reporting! + + + + )} +
{hasChartConfigs(state) && ( <> diff --git a/app/components/chart-published.tsx b/app/components/chart-published.tsx index d076d6978..e3b394f68 100644 --- a/app/components/chart-published.tsx +++ b/app/components/chart-published.tsx @@ -245,49 +245,51 @@ const ChartPublishedInner = (props: ChartPublishInnerProps) => { ref={rootRef} > - {metadata?.some( - (d) => d.publicationStatus === DataCubePublicationStatus.Draft - ) && ( - - - - Careful, this dataset is only a draft. -
- Don't use for reporting! - - - - )} - {metadata?.some((d) => d.expires) && ( - - - - Careful, the data for this chart has expired. -
- Don't use for reporting! - - - - )} - {!isTrustedDataSource && ( - - - - This chart is not using a trusted data source. - - - - )} - {isUsingImputation(chartConfig) && ( - - - - Some data in this dataset is missing and has been interpolated - to fill the gaps. - - - - )} +
+ {metadata?.some( + (d) => d.publicationStatus === DataCubePublicationStatus.Draft + ) && ( + + + + Careful, this dataset is only a draft. +
+ Don't use for reporting! + + + + )} + {metadata?.some((d) => d.expires) && ( + + + + Careful, the data for this chart has expired. +
+ Don't use for reporting! + + + + )} + {!isTrustedDataSource && ( + + + + This chart is not using a trusted data source. + + + + )} + {isUsingImputation(chartConfig) && ( + + + + Some data in this dataset is missing and has been + interpolated to fill the gaps. + + + + )} +
((theme) => ({ display: "grid", gridTemplateRows: "subgrid", /** Should stay in sync with the number of rows contained in a chart */ - gridRow: "span 6", + gridRow: "span 7", height: "100%", padding: theme.spacing(6), backgroundColor: theme.palette.background.paper,