feat: Image download

CHANGELOG.md

@@ -11,7 +11,8 @@ You can also check the
 
 # Unreleased
 
-Nothing yet.
+- Features
+  - It's now possible to export charts as images
 
 # [5.0.2] - 2024-11-28
 

app/charts/map/map.tsx

@@ -32,6 +32,7 @@ import { GeoFeature, GeoPoint } from "@/domain/data";
 import { Icon, IconName } from "@/icons";
 import { useLocale } from "@/src";
 import useEvent from "@/utils/use-event";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 // supported was removed as of maplibre-gl v3.0.0, so we need to add it back
 const maplibregl = { ...maplibreglraw, supported };
@@ -391,7 +392,7 @@ export const MapComponent = () => {
   return (
     <>
       {locked ? null : (
-        <div className={classes.controlButtons}>
+        <div className={classes.controlButtons} {...DISABLE_SCREENSHOT_ATTR}>
           <ControlButton iconName="refresh" onClick={reset} />
           <ControlButton iconName="add" onClick={zoomIn} />
           <ControlButton iconName="minus" onClick={zoomOut} />
@@ -403,6 +404,8 @@ export const MapComponent = () => {
           initialViewState={defaultViewState}
           mapLib={maplibregl}
           mapStyle={mapStyle}
+          // Important so we can take a screenshot of the map
+          preserveDrawingBuffer
           style={{
             position: "absolute",
             left: 0,

app/charts/shared/brush/index.tsx

@@ -32,6 +32,7 @@ import {
 } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { getTextWidth } from "@/utils/get-text-width";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 // Brush constants
 const HANDLE_HEIGHT = 14;
@@ -371,6 +372,7 @@ export const BrushTime = () => {
 
   return fullData.length ? (
     <g
+      {...DISABLE_SCREENSHOT_ATTR}
       transform={`translate(0, ${
         chartHeight + margins.top + margins.bottom - HEIGHT * 1.5
       })`}

app/charts/shared/chart-helpers.tsx

@@ -287,6 +287,20 @@ export const extractChartConfigComponentIds = ({
   );
 };
 
+export const extractChartConfigUsedComponents = (
+  chartConfig: ChartConfig,
+  { components }: { components: Component[] }
+) => {
+  const componentIds = extractChartConfigComponentIds({
+    chartConfig,
+    includeFilters: false,
+  });
+
+  return componentIds
+    .map((id) => components.find((component) => component.id === id))
+    .filter(truthy); // exclude potential joinBy components
+};
+
 /** Use to remove missing values from chart data. */
 export const usePlottableData = (
   data: Observation[],

app/charts/shared/containers.tsx

@@ -12,6 +12,7 @@ import {
   useConfiguratorState,
 } from "@/configurator";
 import { useTransitionStore } from "@/stores/transition";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 export const useStyles = makeStyles<{}, {}, "chartContainer">(() => ({
   chartContainer: {
@@ -70,6 +71,7 @@ export const ChartSvg = ({ children }: { children: ReactNode }) => {
     >
       {interactiveFiltersConfig?.calculation.active && (
         <foreignObject
+          {...DISABLE_SCREENSHOT_ATTR}
           width={width - margins.right}
           y={20}
           height="26"

app/charts/table/table.tsx

@@ -25,6 +25,7 @@ import { TableChartState } from "@/charts/table/table-state";
 import Flex from "@/components/flex";
 import { Input, Switch } from "@/components/form";
 import { Observation } from "@/domain/data";
+import { DISABLE_SCREENSHOT_ATTR } from "@/utils/use-screenshot";
 
 const MOBILE_VIEW_THRESHOLD = 384;
 
@@ -299,7 +300,10 @@ export const Table = () => {
   return (
     <>
       {showSearch && (
-        <Box sx={{ mb: 4, width: "min(100%, 300px)" }}>
+        <Box
+          sx={{ mb: 4, width: "min(100%, 300px)" }}
+          {...DISABLE_SCREENSHOT_ATTR}
+        >
           <Input
             type="text"
             name="search-input"

app/components/chart-footnotes.tsx

@@ -1,10 +1,10 @@
-import { Trans } from "@lingui/macro";
+import { t, Trans } from "@lingui/macro";
 import { Box, Link, Theme, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import uniqBy from "lodash/uniqBy";
-import { useMemo } from "react";
+import { ReactNode, useMemo } from "react";
 
-import { extractChartConfigComponentIds } from "@/charts/shared/chart-helpers";
+import { extractChartConfigUsedComponents } from "@/charts/shared/chart-helpers";
 import { LegendItem } from "@/charts/shared/legend-color";
 import { ChartFiltersList } from "@/components/chart-filters-list";
 import { OpenMetadataPanelWrapper } from "@/components/metadata-panel";
@@ -17,7 +17,6 @@ import {
   DataSource,
 } from "@/configurator";
 import { Component, Measure } from "@/domain/data";
-import { truthy } from "@/domain/types";
 import { useTimeFormatLocale } from "@/formatters";
 import { useDataCubesMetadataQuery } from "@/graphql/hooks";
 import { useLocale } from "@/locales/use-locale";
@@ -42,6 +41,8 @@ export const useFootnotesStyles = makeStyles<Theme, { useMarginTop: boolean }>(
   })
 );
 
+export const CHART_FOOTNOTES_CLASS_NAME = "chart-footnotes";
+
 export const ChartFootnotes = ({
   dataSource,
   chartConfig,
@@ -57,14 +58,7 @@ export const ChartFootnotes = ({
 }) => {
   const locale = useLocale();
   const usedComponents = useMemo(() => {
-    const componentIds = extractChartConfigComponentIds({
-      chartConfig,
-      includeFilters: false,
-    });
-
-    return componentIds
-      .map((id) => components.find((component) => component.id === id))
-      .filter(truthy); // exclude potential joinBy components
+    return extractChartConfigUsedComponents(chartConfig, { components });
   }, [chartConfig, components]);
   const [{ data }] = useDataCubesMetadataQuery({
     variables: {
@@ -81,7 +75,10 @@ export const ChartFootnotes = ({
   const formatLocale = useTimeFormatLocale();
 
   return (
-    <Box sx={{ mt: 1, "& > :not(:last-child)": { mb: 3 } }}>
+    <Box
+      className={CHART_FOOTNOTES_CLASS_NAME}
+      sx={{ mt: 1, "& > :not(:last-child)": { mb: 3 } }}
+    >
       {data?.dataCubesMetadata.map((metadata) => (
         <div key={metadata.iri}>
           <ChartFootnotesLegend
@@ -115,7 +112,9 @@ export const ChartFootnotes = ({
           ) : null}
         </div>
       ))}
-      {showVisualizeLink ? <VisualizeLink /> : null}
+      {showVisualizeLink ? (
+        <VisualizeLink createdWith={t({ id: "metadata.link.created.with" })} />
+      ) : null}
     </Box>
   );
 };
@@ -289,11 +288,12 @@ const ChartFootnotesComboLineSingle = ({
   ) : null;
 };
 
-export const VisualizeLink = () => {
+export const VisualizeLink = ({ createdWith }: { createdWith: ReactNode }) => {
   const locale = useLocale();
+
   return (
     <Typography variant="caption" color="grey.600">
-      <Trans id="metadata.link.created.with">Created with</Trans>
+      {createdWith}
       <Link
         href={`https://visualize.admin.ch/${locale}/`}
         target="_blank"

app/components/chart-preview.tsx

@@ -10,7 +10,14 @@ import { Trans } from "@lingui/macro";
 import { Box } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import Head from "next/head";
-import { forwardRef, ReactNode, useCallback, useMemo, useState } from "react";
+import {
+  forwardRef,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 
 import { DataSetTable } from "@/browse/datatable";
 import { LoadingStateProvider } from "@/charts/shared/chart-loading-state";
@@ -29,6 +36,7 @@ import {
 } from "@/components/chart-shared";
 import {
   ChartTablePreviewProvider,
+  TablePreviewWrapper,
   useChartTablePreview,
 } from "@/components/chart-table-preview";
 import { ChartWithFilters } from "@/components/chart-with-filters";
@@ -63,6 +71,7 @@ import { InteractiveFiltersChartProvider } from "@/stores/interactive-filters";
 import { useTransitionStore } from "@/stores/transition";
 import { useTheme } from "@/themes";
 import { createSnapCornerToCursor } from "@/utils/dnd";
+import { DISABLE_SCREENSHOT_ATTR_KEY } from "@/utils/use-screenshot";
 
 export const ChartPreview = ({ dataSource }: { dataSource: DataSource }) => {
   const [state] = useConfiguratorState(hasChartConfigs);
@@ -393,6 +402,7 @@ const ChartPreviewInner = ({
   chartKey?: string | null;
   actionElementSlot?: ReactNode;
 }) => {
+  const ref = useRef<HTMLDivElement>(null);
   const [state, dispatch] = useConfiguratorState();
   const configuring = isConfiguring(state);
   const chartConfig = getChartConfig(state, chartKey);
@@ -421,7 +431,7 @@ const ChartPreviewInner = ({
       })),
     },
   });
-  const { isTable, containerRef, containerHeight } = useChartTablePreview();
+  const { isTable } = useChartTablePreview();
   const dimensions = components?.dataCubesComponents.dimensions;
   const measures = components?.dataCubesComponents.measures;
   const allComponents = useMemo(() => {
@@ -433,7 +443,7 @@ const ChartPreviewInner = ({
   }, [dimensions, measures]);
 
   return (
-    <Box className={chartClasses.root}>
+    <Box ref={ref} className={chartClasses.root}>
       {children}
       <ChartErrorBoundary resetKeys={[state]}>
         {hasChartConfigs(state) && (
@@ -474,6 +484,10 @@ const ChartPreviewInner = ({
                               })
                           : undefined
                       }
+                      {...{
+                        [DISABLE_SCREENSHOT_ATTR_KEY]:
+                          !chartConfig.meta.title[locale],
+                      }}
                     />
                   ) : (
                     // We need to have a span here to keep the space between the
@@ -488,7 +502,11 @@ const ChartPreviewInner = ({
                       mt: "-0.33rem",
                     }}
                   >
-                    <ChartMoreButton chartKey={chartConfig.key} />
+                    <ChartMoreButton
+                      chartKey={chartConfig.key}
+                      chartWrapperNode={ref.current}
+                      components={allComponents}
+                    />
                     {actionElementSlot}
                   </Box>
                 </Flex>
@@ -507,6 +525,10 @@ const ChartPreviewInner = ({
                           }
                         : undefined
                     }
+                    {...{
+                      [DISABLE_SCREENSHOT_ATTR_KEY]:
+                        !chartConfig.meta.description[locale],
+                    }}
                   />
                 ) : (
                   // We need to have a span here to keep the space between the
@@ -538,15 +560,7 @@ const ChartPreviewInner = ({
                     top: BANNER_MARGIN_TOP,
                   }}
                 />
-                <div
-                  ref={containerRef}
-                  style={{
-                    minWidth: 0,
-                    height: containerHeight,
-                    paddingTop: 16,
-                    flexGrow: 1,
-                  }}
-                >
+                <TablePreviewWrapper>
                   {isTable ? (
                     <DataSetTable
                       dataSource={dataSource}
@@ -562,7 +576,7 @@ const ChartPreviewInner = ({
                       dashboardFilters={state.dashboardFilters}
                     />
                   )}
-                </div>
+                </TablePreviewWrapper>
                 <ChartFootnotes
                   dataSource={dataSource}
                   chartConfig={chartConfig}