Merge pull request #159 from lyjeileen/menu

fix: customize vegalite menu

Author: Shiti

src/components/visualization/vegaLiteViz/vegaLiteViz.cy.tsx

@@ -4,33 +4,46 @@ import { supportedViewports } from '../../../../cypress/support/variables'
 import VegaLiteViz from './vegaLiteViz'
 
 describe('VegaLiteViz', () => {
+  beforeEach(() => {
+    cy.mount(
+      <VegaLiteViz
+        spec={{
+          $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
+          width: 'container',
+          data: {
+            values: [
+              { a: 'A', b: 28 },
+              { a: 'B', b: 55 },
+              { a: 'C', b: 43 },
+            ],
+          },
+          mark: 'bar',
+          encoding: {
+            x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
+            y: { field: 'b', type: 'quantitative' },
+          },
+        }}
+      />
+    )
+  })
+
   supportedViewports.forEach((viewport) => {
     it(`should display the graphic on ${viewport} screen`, () => {
       cy.viewport(viewport)
-      cy.mount(
-        <VegaLiteViz
-          spec={{
-            $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
-            width: 'container',
-            data: {
-              values: [
-                { a: 'A', b: 28 },
-                { a: 'B', b: 55 },
-                { a: 'C', b: 43 },
-              ],
-            },
-            mark: 'bar',
-            encoding: {
-              x: { field: 'a', type: 'nominal', axis: { labelAngle: 0 } },
-              y: { field: 'b', type: 'quantitative' },
-            },
-          }}
-        />
-      )
 
       cy.get('[data-cy="vega-lite"]').should('exist')
     })
 
+    it(`should show the menu options properly on ${viewport} screen`, () => {
+      cy.viewport(viewport)
+
+      cy.get('[data-cy="vega-lite"]').should('exist')
+      cy.get('.rustic-vega-lite').should('exist')
+      cy.get('[aria-label="menu"]').click()
+      cy.contains('Save as SVG').should('exist')
+      cy.contains('Save as PNG').should('exist')
+    })
+
     const invalidSpec = {
       $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
       data: {

src/components/visualization/vegaLiteViz/vegaLiteViz.stories.tsx

@@ -40,7 +40,7 @@ const decorators = [
       <div
         style={{
           width: 'clamp(250px, 70vw, 1000px)',
-          height: 'clamp(150px, 30vh, 400px)',
+          height: 'clamp(150px, 40vh, 400px)',
         }}
       >
         <Story />

src/components/visualization/vegaLiteViz/vegaLiteViz.tsx

@@ -2,21 +2,25 @@ import './vegaLiteViz.css'
 
 import type { Theme } from '@mui/material/styles'
 import Typography from '@mui/material/Typography'
+import Box from '@mui/system/Box'
 import Stack from '@mui/system/Stack'
 import useTheme from '@mui/system/useTheme'
 import React, { useEffect, useRef, useState } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { default as VegaEmbed } from 'vega-embed'
 
+import PopoverMenu, { type PopoverMenuItem } from '../../menu/popoverMenu'
 import type { VegaLiteData } from '../../types'
 
 /** The `VegaLiteViz` component is a versatile tool for visualizing data using the Vega-Lite grammar. With support for various graphic types, it empowers users to create engaging and informative data visualizations effortlessly. */
 function VegaLiteViz(props: VegaLiteData) {
   const chartRef = useRef<HTMLDivElement>(null)
   const [hasError, setHasError] = useState<boolean>(false)
+
   const rusticTheme: Theme = useTheme()
   const isDarkTheme = rusticTheme.palette.mode === 'dark'
   const defaultFont = rusticTheme.typography.fontFamily
+
   const tooltipStyle = {
     backgroundColor: rusticTheme.palette.primary.main,
     color: rusticTheme.palette.background.paper,
@@ -48,21 +52,48 @@ function VegaLiteViz(props: VegaLiteData) {
     id: 'rustic-vega-lite-tooltip',
   }
 
+  const menuItems: PopoverMenuItem[] = [
+    {
+      label: 'Save as SVG',
+    },
+    {
+      label: 'Save as PNG',
+    },
+  ]
+
   function renderChart() {
     if (chartRef.current && props.spec) {
       const options = {
         config: { font: defaultFont },
         ...props.options,
         theme: isDarkTheme ? props.theme?.dark : props.theme?.light,
         tooltip: tooltipOptions,
+        actions: false,
       }
 
       if (!props.options?.config?.font) {
         options.config.font = defaultFont
       }
 
       VegaEmbed(chartRef.current, props.spec, options)
-        .then(() => {
+        .then((result) => {
+          const opts = result.embedOptions
+          const fileName =
+            result.embedOptions.downloadFileName || 'visualization'
+          const formats: Array<'svg' | 'png'> = ['svg', 'png']
+
+          formats.map((format, index) => {
+            const scaleFactor =
+              typeof opts.scaleFactor === 'object'
+                ? opts.scaleFactor[format]
+                : opts.scaleFactor
+
+            result.view.toImageURL(format, scaleFactor).then((url) => {
+              menuItems[index].href = url
+              menuItems[index].downloadFileName = `${fileName}.${format}`
+            })
+          })
+
           setHasError(false)
         })
         .catch(() => {
@@ -90,6 +121,10 @@ function VegaLiteViz(props: VegaLiteData) {
   } else {
     return (
       <Stack direction="column" className="rustic-vega-lite-container">
+        <Box justifyContent="end" display="flex">
+          <PopoverMenu menuItems={menuItems} ariaLabel="menu" />
+        </Box>
+
         {props.title && (
           <Typography variant="subtitle2">{props.title}</Typography>
         )}