feat(submenu_export): Add export to png and pdf options for charts

superset-frontend/src/dashboard/components/SliceHeaderControls/index.tsx

@@ -48,12 +48,17 @@ import {
 } from '@superset-ui/core/components';
 import { useShareMenuItems } from 'src/dashboard/components/menu/ShareMenuItems';
 import downloadAsImage from 'src/utils/downloadAsImage';
+import downloadAsPdf from 'src/utils/downloadAsPdf';
 import { getSliceHeaderTooltip } from 'src/dashboard/util/getSliceHeaderTooltip';
 import { Icons } from '@superset-ui/core/components/Icons';
 import ViewQueryModal from 'src/explore/components/controls/ViewQueryModal';
 import { ResultsPaneOnDashboard } from 'src/explore/components/DataTablesPane';
 import { useDrillDetailMenuItems } from 'src/components/Chart/useDrillDetailMenuItems';
-import { LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE } from 'src/logger/LogUtils';
+import {
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE,
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG,
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF,
+} from 'src/logger/LogUtils';
 import { MenuKeys, RootState } from 'src/dashboard/types';
 import DrillDetailModal from 'src/components/Chart/DrillDetail/DrillDetailModal';
 import { usePermissions } from 'src/hooks/usePermissions';
@@ -270,6 +275,61 @@ const SliceHeaderControls = (
         });
         break;
       }
+      case MenuKeys.DownloadAsPngTransparent:
+      case MenuKeys.DownloadAsPngSolid: {
+        const menu = document.querySelector(
+          '.ant-dropdown:not(.ant-dropdown-hidden)',
+        ) as HTMLElement;
+        if (menu) {
+          menu.style.visibility = 'hidden';
+        }
+
+        const backgroundType =
+          key === MenuKeys.DownloadAsPngTransparent ? 'transparent' : 'solid';
+
+        downloadAsImage(
+          getScreenshotNodeSelector(props.slice.slice_id),
+          props.slice.slice_name,
+          true,
+          theme,
+          { format: 'png', backgroundType },
+        )(domEvent).then(() => {
+          if (menu) {
+            menu.style.visibility = 'visible';
+          }
+        });
+
+        props.logEvent?.(LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG, {
+          chartId: props.slice.slice_id,
+          backgroundType,
+        });
+        break;
+      }
+      case MenuKeys.DownloadAsPdf: {
+        const menu = document.querySelector(
+          '.ant-dropdown:not(.ant-dropdown-hidden)',
+        ) as HTMLElement;
+        if (menu) {
+          menu.style.visibility = 'hidden';
+        }
+
+        downloadAsPdf(
+          getScreenshotNodeSelector(props.slice.slice_id),
+          props.slice.slice_name,
+          true,
+        )(domEvent);
+
+        setTimeout(() => {
+          if (menu) {
+            menu.style.visibility = 'visible';
+          }
+        }, 100);
+
+        props.logEvent?.(LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF, {
+          chartId: props.slice.slice_id,
+        });
+        break;
+      }
       case MenuKeys.ExportPivotXlsx: {
         const sliceSelector = `#chart-id-${props.slice.slice_id}`;
         props.exportPivotExcel?.(
@@ -550,6 +610,27 @@ const SliceHeaderControls = (
           label: t('Download as image'),
           icon: <Icons.FileImageOutlined css={dropdownIconsStyles} />,
         },
+        {
+          type: 'submenu',
+          key: 'download_as_png_submenu',
+          label: t('Download as image (png)'),
+          icon: <Icons.FileImageOutlined css={dropdownIconsStyles} />,
+          children: [
+            {
+              key: MenuKeys.DownloadAsPngTransparent,
+              label: t('Transparent background'),
+            },
+            {
+              key: MenuKeys.DownloadAsPngSolid,
+              label: t('Solid background'),
+            },
+          ],
+        },
+        {
+          key: MenuKeys.DownloadAsPdf,
+          label: t('Download as PDF'),
+          icon: <Icons.FileOutlined css={dropdownIconsStyles} />,
+        },
       ],
     });
   }

superset-frontend/src/dashboard/types.ts

@@ -282,6 +282,9 @@ export type Slice = {
 
 export enum MenuKeys {
   DownloadAsImage = 'download_as_image',
+  DownloadAsPngTransparent = 'download_as_png_transparent',
+  DownloadAsPngSolid = 'download_as_png_solid',
+  DownloadAsPdf = 'download_as_pdf',
   ExploreChart = 'explore_chart',
   ExportCsv = 'export_csv',
   ExportPivotCsv = 'export_pivot_csv',

superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx

@@ -33,12 +33,15 @@ import { useToasts } from 'src/components/MessageToasts/withToasts';
 import { DEFAULT_CSV_STREAMING_ROW_THRESHOLD } from 'src/constants';
 import { exportChart, getChartKey } from 'src/explore/exploreUtils';
 import downloadAsImage from 'src/utils/downloadAsImage';
+import downloadAsPdf from 'src/utils/downloadAsPdf';
 import { getChartPermalink } from 'src/utils/urlUtils';
 import copyTextToClipboard from 'src/utils/copy';
 import { useHeaderReportMenuItems } from 'src/features/reports/ReportModal/HeaderReportDropdown';
 import { logEvent } from 'src/logger/actions';
 import {
   LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE,
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG,
+  LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF,
   LOG_ACTIONS_CHART_DOWNLOAD_AS_JSON,
   LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV,
   LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV_PIVOTED,
@@ -65,9 +68,15 @@ const MENU_KEYS = {
   EXPORT_TO_JSON: 'export_to_json',
   EXPORT_TO_XLSX: 'export_to_xlsx',
   EXPORT_ALL_SCREENSHOT: 'export_all_screenshot',
+  EXPORT_ALL_PNG_TRANSPARENT: 'export_all_png_transparent',
+  EXPORT_ALL_PNG_SOLID: 'export_all_png_solid',
+  EXPORT_ALL_PDF: 'export_all_pdf',
   EXPORT_CURRENT_TO_CSV: 'export_current_to_csv',
   EXPORT_CURRENT_TO_JSON: 'export_current_to_json',
   EXPORT_CURRENT_SCREENSHOT: 'export_current_screenshot',
+  EXPORT_CURRENT_PNG_TRANSPARENT: 'export_current_png_transparent',
+  EXPORT_CURRENT_PNG_SOLID: 'export_current_png_solid',
+  EXPORT_CURRENT_PDF: 'export_current_pdf',
   EXPORT_CURRENT_XLSX: 'export_current_xlsx',
   SHARE_SUBMENU: 'share_submenu',
   COPY_PERMALINK: 'copy_permalink',
@@ -619,6 +628,75 @@ export const useExploreAdditionalActionsMenu = (
           );
         },
       },
+      {
+        type: 'submenu',
+        key: 'export_all_png_submenu',
+        label: t('Export screenshot (png)'),
+        icon: <Icons.FileImageOutlined />,
+        children: [
+          {
+            key: MENU_KEYS.EXPORT_ALL_PNG_TRANSPARENT,
+            label: t('Transparent background'),
+            onClick: e => {
+              downloadAsImage(
+                '.panel-body .chart-container',
+                slice?.slice_name ?? t('New chart'),
+                true,
+                theme,
+                { format: 'png', backgroundType: 'transparent' },
+              )(e.domEvent);
+              setIsDropdownVisible(false);
+              dispatch(
+                logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG, {
+                  chartId: slice?.slice_id,
+                  chartName: slice?.slice_name,
+                  backgroundType: 'transparent',
+                }),
+              );
+            },
+          },
+          {
+            key: MENU_KEYS.EXPORT_ALL_PNG_SOLID,
+            label: t('Solid background'),
+            onClick: e => {
+              downloadAsImage(
+                '.panel-body .chart-container',
+                slice?.slice_name ?? t('New chart'),
+                true,
+                theme,
+                { format: 'png', backgroundType: 'solid' },
+              )(e.domEvent);
+              setIsDropdownVisible(false);
+              dispatch(
+                logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG, {
+                  chartId: slice?.slice_id,
+                  chartName: slice?.slice_name,
+                  backgroundType: 'solid',
+                }),
+              );
+            },
+          },
+        ],
+      },
+      {
+        key: MENU_KEYS.EXPORT_ALL_PDF,
+        label: t('Export as PDF'),
+        icon: <Icons.FileOutlined />,
+        onClick: e => {
+          downloadAsPdf(
+            '.panel-body .chart-container',
+            slice?.slice_name ?? t('New chart'),
+            true,
+          )(e.domEvent);
+          setIsDropdownVisible(false);
+          dispatch(
+            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF, {
+              chartId: slice?.slice_id,
+              chartName: slice?.slice_name,
+            }),
+          );
+        },
+      },
       {
         key: MENU_KEYS.EXPORT_TO_XLSX,
         label: t('Export to Excel'),
@@ -723,6 +801,75 @@ export const useExploreAdditionalActionsMenu = (
           );
         },
       },
+      {
+        type: 'submenu',
+        key: 'export_current_png_submenu',
+        label: t('Export screenshot (png)'),
+        icon: <Icons.FileImageOutlined />,
+        children: [
+          {
+            key: MENU_KEYS.EXPORT_CURRENT_PNG_TRANSPARENT,
+            label: t('Transparent background'),
+            onClick: e => {
+              downloadAsImage(
+                '.panel-body .chart-container',
+                slice?.slice_name ?? t('New chart'),
+                true,
+                theme,
+                { format: 'png', backgroundType: 'transparent' },
+              )(e.domEvent);
+              setIsDropdownVisible(false);
+              dispatch(
+                logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG, {
+                  chartId: slice?.slice_id,
+                  chartName: slice?.slice_name,
+                  backgroundType: 'transparent',
+                }),
+              );
+            },
+          },
+          {
+            key: MENU_KEYS.EXPORT_CURRENT_PNG_SOLID,
+            label: t('Solid background'),
+            onClick: e => {
+              downloadAsImage(
+                '.panel-body .chart-container',
+                slice?.slice_name ?? t('New chart'),
+                true,
+                theme,
+                { format: 'png', backgroundType: 'solid' },
+              )(e.domEvent);
+              setIsDropdownVisible(false);
+              dispatch(
+                logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG, {
+                  chartId: slice?.slice_id,
+                  chartName: slice?.slice_name,
+                  backgroundType: 'solid',
+                }),
+              );
+            },
+          },
+        ],
+      },
+      {
+        key: MENU_KEYS.EXPORT_CURRENT_PDF,
+        label: t('Export as PDF'),
+        icon: <Icons.FileOutlined />,
+        onClick: e => {
+          downloadAsPdf(
+            '.panel-body .chart-container',
+            slice?.slice_name ?? t('New chart'),
+            true,
+          )(e.domEvent);
+          setIsDropdownVisible(false);
+          dispatch(
+            logEvent(LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF, {
+              chartId: slice?.slice_id,
+              chartName: slice?.slice_name,
+            }),
+          );
+        },
+      },
       {
         key: MENU_KEYS.EXPORT_CURRENT_XLSX,
         label: t('Export to Excel'),

superset-frontend/src/logger/LogUtils.ts

@@ -54,6 +54,8 @@ export const LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_IMAGE =
 export const LOG_ACTIONS_DASHBOARD_DOWNLOAD_AS_PDF =
   'dashboard_download_as_pdf';
 export const LOG_ACTIONS_CHART_DOWNLOAD_AS_IMAGE = 'chart_download_as_image';
+export const LOG_ACTIONS_CHART_DOWNLOAD_AS_PNG = 'chart_download_as_png';
+export const LOG_ACTIONS_CHART_DOWNLOAD_AS_PDF = 'chart_download_as_pdf';
 export const LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV = 'chart_download_as_csv';
 export const LOG_ACTIONS_CHART_DOWNLOAD_AS_CSV_PIVOTED =
   'chart_download_as_csv_pivoted';