@kanaries/graphic-walker 0.2.7 → 0.2.9

package/src/vis/react-vega.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState, useMemo } from 'react';
+import React, { useEffect, useState, useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
 import embed from 'vega-embed';
-import { Subject } from 'rxjs'
+import { Subject, Subscription } from 'rxjs'
 import * as op from 'rxjs/operators';
-import { ScenegraphEvent } from 'vega';
+import type { ScenegraphEvent, View } from 'vega';
 import { ISemanticType } from 'visual-insights';
 import styled from 'styled-components';
 import { autoMark } from '../utils/autoMark';
@@ -17,6 +17,12 @@ const CanvaContainer = styled.div<{rowSize: number; colSize: number;}>`
 `
 
 const SELECTION_NAME = 'geom';
+export interface IReactVegaHandler {
+  getSVGData: () => Promise<string[]>;
+  getCanvasData: () => Promise<string[]>;
+  downloadSVG: (filename?: string) => Promise<string[]>;
+  downloadPNG: (filename?: string) => Promise<string[]>;
+}
 interface ReactVegaProps {
   rows: Readonly<IViewField[]>;
   columns: Readonly<IViewField[]>;
@@ -36,6 +42,8 @@ interface ReactVegaProps {
   width: number;
   height: number;
   onGeomClick?: (values: any, e: any) => void
+  selectEncoding: SingleViewProps['selectEncoding'];
+  brushEncoding: SingleViewProps['brushEncoding'];
 }
 const NULL_FIELD: IViewField = {
   dragId: '',
@@ -59,6 +67,17 @@ const geomClick$ = selection$.pipe(
 function getFieldType(field: IViewField): 'quantitative' | 'nominal' | 'ordinal' | 'temporal' {
   return field.semanticType
 }
+
+const BRUSH_SIGNAL_NAME = "__gw_brush__";
+const POINT_SIGNAL_NAME = "__gw_point__";
+
+interface ParamStoreEntry {
+  signal: typeof BRUSH_SIGNAL_NAME | typeof POINT_SIGNAL_NAME;
+  /** 这个标记用于防止循环 */
+  source: number;
+  data: any;
+}
+
 interface SingleViewProps {
   x: IViewField;
   y: IViewField;
@@ -75,6 +94,10 @@ interface SingleViewProps {
   defaultAggregated: boolean;
   stack: IStackMode;
   geomType: string;
+  enableCrossFilter: boolean;
+  asCrossFilterTrigger: boolean;
+  selectEncoding: 'default' | 'none';
+  brushEncoding: 'x' | 'y' | 'default' | 'none';
 }
 
 function availableChannels (geomType: string): Set<string> {
@@ -163,7 +186,11 @@ function getSingleView(props: SingleViewProps) {
     yOffset,
     defaultAggregated,
     stack,
-    geomType
+    geomType,
+    selectEncoding,
+    brushEncoding,
+    enableCrossFilter,
+    asCrossFilterTrigger,
   } = props
   const fields: IViewField[] = [x, y, color, opacity, size, shape, row, column, xOffset, yOffset, theta, radius]
   let markType = geomType;
@@ -179,17 +206,158 @@ function getSingleView(props: SingleViewProps) {
     channelAggregate(encoding, fields);
   }
   channelStack(encoding, stack);
-  const spec = {
-    mark: {
-      type: markType,
-      opacity: 0.96,
-      tooltip: true
-    },
-    encoding
+  if (!enableCrossFilter || brushEncoding === 'none' && selectEncoding === 'none') {
+    return {
+      mark: {
+        type: markType,
+        opacity: 0.96,
+        tooltip: true
+      },
+      encoding
+    };
+  }
+  const mark = {
+    type: markType,
+    opacity: 0.96,
+    tooltip: true
+  };
+
+  // TODO:
+  // 鉴于 Vega 中使用 layer 会导致一些难以覆盖的预期外行为，
+  // 破坏掉引入交互后视图的正确性，
+  // 目前不使用 layer 来实现交互（注掉以下代码）。
+  // 考虑 layer 的目的是 layer + condition 可以用于同时展现“全集”（context）和“选中”两层结构，尤其对于聚合数据有分析帮助；
+  // 同时，不需要关心作为筛选器的是哪一张图。
+  // 现在采用临时方案，区别产生筛选的来源，并对其他图仅借助 transform 展现筛选后的数据。
+  // #[BEGIN bad-layer-interaction]
+  // const shouldUseMultipleLayers = brushEncoding !== 'none' && Object.values(encoding).some(channel => {
+  //   return typeof channel.aggregate === 'string' && /* 这种 case 对应行数 */ typeof channel.field === 'string';
+  // });
+  // if (shouldUseMultipleLayers) {
+  //   if (['column', 'row'].some(key => key in encoding && encoding[key].length > 0)) {
+  //     // 这种情况 Vega 不能处理，是因为 Vega 不支持在 layer 中使用 column / row channel，
+  //     // 会导致渲染出来的视图无法与不使用交互时的结果不变。
+  //     return {
+  //       params: [
+  //         {
+  //           name: BRUSH_SIGNAL_NAME,
+  //           select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+  //         },
+  //       ],
+  //       mark,
+  //       encoding: {
+  //         ...encoding,
+  //         color: {
+  //           condition: {
+  //             ...encoding.color,
+  //             param: BRUSH_SIGNAL_NAME,
+  //           },
+  //           value: '#888',
+  //         },
+  //       },
+  //     };
+  //   }
+  //   return {
+  //     layer: [
+  //       {
+  //         params: [
+  //           {
+  //             name: BRUSH_SIGNAL_NAME,
+  //             select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+  //           },
+  //         ],
+  //         mark,
+  //         encoding: {
+  //           ...encoding,
+  //           color: 'color' in encoding ? {
+  //             condition: {
+  //               ...encoding.color,
+  //               test: 'false',
+  //             },
+  //             value: '#888',
+  //           } : {
+  //             value: '#888',
+  //           },
+  //         },
+  //       },
+  //       {
+  //         transform: [{ filter: { param: BRUSH_SIGNAL_NAME }}],
+  //         mark,
+  //         encoding: {
+  //           ...encoding,
+  //           color: encoding.color ?? { value: 'steelblue' },
+  //         },
+  //       },
+  //     ],
+  //   };
+  // } else if (brushEncoding !== 'none') {
+  //   return {
+  //     params: [
+  //       {
+  //         name: BRUSH_SIGNAL_NAME,
+  //         select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+  //       },
+  //     ],
+  //     mark,
+  //     encoding: {
+  //       ...encoding,
+  //       color: {
+  //         condition: {
+  //           ...encoding.color,
+  //           param: BRUSH_SIGNAL_NAME,
+  //         },
+  //         value: '#888',
+  //       },
+  //     },
+  //   };
+  // }
+  // #[END bad-layer-interaction]
+
+  if (brushEncoding !== 'none') {
+    return {
+      transform: asCrossFilterTrigger ? [] : [
+        { filter: { param: BRUSH_SIGNAL_NAME } }
+      ],
+      params: [
+        // {
+        //   name: BRUSH_SIGNAL_DISPLAY_NAME,
+        //   select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+        //   on: '__YOU_CANNOT_MODIFY_THIS_SIGNAL__',
+        // },
+        {
+          name: BRUSH_SIGNAL_NAME,
+          select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+        },
+      ],
+      mark,
+      encoding,
+    };
+  }
+
+  return {
+    transform: asCrossFilterTrigger ? [] : [
+      { filter: { param: POINT_SIGNAL_NAME } }
+    ],
+    params: [
+      {
+        name: POINT_SIGNAL_NAME,
+        select: { type: 'point' },
+      },
+    ],
+    mark,
+    encoding: asCrossFilterTrigger ? {
+      ...encoding,
+      color: {
+        condition: {
+          ...encoding.color,
+          param: POINT_SIGNAL_NAME,
+        },
+        value: '#888',
+      },
+    } : encoding,
   };
-  return spec;
 }
-const ReactVega: React.FC<ReactVegaProps> = props => {
+const ReactVega = forwardRef<IReactVegaHandler, ReactVegaProps>(function ReactVega (props, ref) {
   const {
     dataSource = [],
     rows = [],
@@ -208,7 +376,9 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
     interactiveScale,
     layoutMode,
     width,
-    height
+    height,
+    selectEncoding,
+    brushEncoding,
   } = props;
   // const container = useRef<HTMLDivElement>(null);
   // const containers = useRef<(HTMLDivElement | null)[]>([]);
@@ -222,7 +392,7 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
     return () => {
       clickSub.unsubscribe();
     }
-  }, []);
+  }, [onGeomClick]);
   const rowDims = useMemo(() => rows.filter(f => f.analyticType === 'dimension'), [rows]);
   const colDims = useMemo(() => columns.filter(f => f.analyticType === 'dimension'), [columns]);
   const rowMeas = useMemo(() => rows.filter(f => f.analyticType === 'measure'), [rows]);
@@ -233,8 +403,10 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
   const colRepeatFields = useMemo(() => colMeas.length === 0 ? colDims.slice(-1) : colMeas, [rowDims, rowMeas]);//colMeas.slice(0, -1);
   const allFieldIds = useMemo(() => [...rows, ...columns, color, opacity, size].filter(f => Boolean(f)).map(f => (f as IViewField).fid), [rows, columns, color, opacity, size]);
 
+  const [crossFilterTriggerIdx, setCrossFilterTriggerIdx] = useState(-1);
 
   useEffect(() => {
+    setCrossFilterTriggerIdx(-1);
     setViewPlaceholders(views => {
       const viewNum = Math.max(1, rowRepeatFields.length * colRepeatFields.length)
       const nextViews = new Array(viewNum).fill(null).map((v, i) => views[i] || React.createRef())
@@ -242,7 +414,10 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
     })
   }, [rowRepeatFields, colRepeatFields])
 
+  const vegaRefs = useRef<View[]>([]);
+
   useEffect(() => {
+    vegaRefs.current = [];
 
     const yField = rows.length > 0 ? rows[rows.length - 1] : NULL_FIELD;
     const xField = columns.length > 0 ? columns[columns.length - 1] : NULL_FIELD;
@@ -295,16 +470,41 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
         yOffset: NULL_FIELD,
         defaultAggregated: defaultAggregate,
         stack,
-        geomType
+        geomType,
+        selectEncoding,
+        brushEncoding,
+        enableCrossFilter: false,
+        asCrossFilterTrigger: false,
       });
       // if (layoutMode === 'fixed') {
       //   spec.width = 800;
       //   spec.height = 600;
       // }
       spec.mark = singleView.mark;
-      spec.encoding = singleView.encoding;
+      if ('encoding' in singleView) {
+        spec.encoding = singleView.encoding;
+      }
+
+      // #[BEGIN bad-layer-interaction]
+      // if ('layer' in singleView) {
+      //   if ('params' in spec) {
+      //     const basicParams = spec['params'];
+      //     delete spec['params'];
+      //     singleView.layer![0].params = [...basicParams, ...singleView.layer![0].params ?? []];
+      //   }
+      //   spec.layer = singleView.layer;
+      // } else if ('params' in singleView) {
+      //   spec.params.push(...singleView.params!);
+      // }
+      // #[END bad-layer-interaction]
+
+      if ('params' in singleView) {
+        spec.params.push(...singleView.params!);
+      }
+      // console.log(JSON.stringify(spec, undefined, 2));
       if (viewPlaceholders.length > 0 && viewPlaceholders[0].current) {
         embed(viewPlaceholders[0].current, spec, { mode: 'vega-lite', actions: showActions }).then(res => {
+          vegaRefs.current = [res.view];
           try {
             res.view.addEventListener('click', (e) => {
               click$.next(e);
@@ -323,8 +523,22 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
         spec.height = Math.floor(height / rowRepeatFields.length) - 5;
         spec.autosize = 'fit'
       }
+      const combinedParamStore$ = new Subject<ParamStoreEntry>();
+      const throttledParamStore$ = combinedParamStore$.pipe(
+        op.throttleTime(
+          dataSource.length / 64 * rowRepeatFields.length * colRepeatFields.length,
+          undefined,
+          { leading: false, trailing: true }
+        )
+      );
+      const subscriptions: Subscription[] = [];
+      const subscribe = (cb: (entry: ParamStoreEntry) => void) => {
+        subscriptions.push(throttledParamStore$.subscribe(cb));
+      };
+      let index = 0;
       for (let i = 0; i < rowRepeatFields.length; i++) {
-        for (let j = 0; j < colRepeatFields.length; j++) {
+        for (let j = 0; j < colRepeatFields.length; j++, index++) {
+          const sourceId = index;
           const singleView = getSingleView({
             x: colRepeatFields[j] || NULL_FIELD,
             y: rowRepeatFields[i] || NULL_FIELD,
@@ -340,13 +554,88 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
             yOffset: NULL_FIELD,
             defaultAggregated: defaultAggregate,
             stack,
-            geomType
+            geomType,
+            selectEncoding,
+            brushEncoding,
+            enableCrossFilter: crossFilterTriggerIdx !== -1,
+            asCrossFilterTrigger: crossFilterTriggerIdx === sourceId,
           });
           const node = i * colRepeatFields.length + j < viewPlaceholders.length ? viewPlaceholders[i * colRepeatFields.length + j].current : null
-          const ans = { ...spec, ...singleView }
+          let commonSpec = { ...spec };
+
+          // #[BEGIN bad-layer-interaction]
+          // if ('layer' in singleView) {
+          //   if ('params' in commonSpec) {
+          //     const { params: basicParams, ...spec } = commonSpec;
+          //     commonSpec = spec;
+          //     singleView.layer![0].params = [...basicParams, ...singleView.layer![0].params ?? []];
+          //   }
+          //   commonSpec.layer = singleView.layer;
+          // } else if ('params' in singleView) {
+          //   commonSpec.params = [...commonSpec.params, ...singleView.params!];
+          // }
+          // #[END bad-layer-interaction]
+
+          if ('params' in singleView) {
+            commonSpec.params = [...commonSpec.params, ...singleView.params!];
+          }
+          const ans = { ...commonSpec, ...singleView }
+          if ('params' in commonSpec) {
+            ans.params = commonSpec.params;
+          }
+          // console.log(JSON.stringify(ans, undefined, 2));
           if (node) {
             embed(node, ans, { mode: 'vega-lite', actions: showActions }).then(res => {
+              vegaRefs.current.push(res.view);
+              // 这种 case 下，我们来考虑联动的 params
+              // vega 使用 Data 来维护 params 的状态，只需要打通这些状态就可以实现联动
+              const paramStores = (res.vgSpec.data?.map(d => d.name) ?? []).filter(
+                name => [BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].map(p => `${p}_store`).includes(name)
+              ).map(name => name.replace(/_store$/, ''));
+              try {
+                for (const param of paramStores) {
+                  let noBroadcasting = false;
+                  // 发出
+                  res.view.addSignalListener(param, name => {
+                    if (noBroadcasting) {
+                      noBroadcasting = false;
+                      return;
+                    }
+                    if ([BRUSH_SIGNAL_NAME, POINT_SIGNAL_NAME].includes(name)) {
+                      const data = res.view.getState().data?.[`${name}_store`];
+                      if (!data || (Array.isArray(data) && data.length === 0)) {
+                        setCrossFilterTriggerIdx(-1);
+                      }
+                      combinedParamStore$.next({
+                        signal: name as typeof BRUSH_SIGNAL_NAME | typeof POINT_SIGNAL_NAME,
+                        source: sourceId,
+                        data: data ?? null,
+                      });
+                    }
+                  });
+                  // 订阅
+                  subscribe(entry => {
+                    if (entry.source === sourceId || !entry.data) {
+                      return;
+                    }
+                    // 防止被动更新触发广播
+                    noBroadcasting = true;
+                    res.view.setState({
+                      data: {
+                        [`${entry.signal}_store`]: entry.data,
+                      },
+                    });
+                  });
+                }
+              } catch (error) {
+                console.warn('Crossing filter failed', error);
+              }
               try {
+                res.view.addEventListener('mouseover', () => {
+                  if (sourceId !== crossFilterTriggerIdx) {
+                    setCrossFilterTriggerIdx(sourceId);
+                  }
+                });
                 res.view.addEventListener('click', (e) => {
                   click$.next(e);
                 })
@@ -360,8 +649,10 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
           }
         }
       }
+      return () => {
+        subscriptions.forEach(sub => sub.unsubscribe());
+      };
     }
-
   }, [
     dataSource,
     allFieldIds,
@@ -384,15 +675,58 @@ const ReactVega: React.FC<ReactVegaProps> = props => {
     interactiveScale,
     layoutMode,
     width,
-    height
+    height,
+    selectEncoding,
+    brushEncoding,
+    crossFilterTriggerIdx,
   ]);
 
+  useImperativeHandle(ref, () => ({
+    getSVGData() {
+      return Promise.all(vegaRefs.current.map(view => view.toSVG()));
+    },
+    async getCanvasData() {
+      const canvases = await Promise.all(vegaRefs.current.map(view => view.toCanvas()));
+      return canvases.map(canvas => canvas.toDataURL('image/png'));
+    },
+    async downloadSVG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
+      const data = await Promise.all(vegaRefs.current.map(view => view.toSVG()));
+      const files: string[] = [];
+      for (let i = 0; i < data.length; i += 1) {
+        const d = data[i];
+        const file = new File([d], `${filename}${data.length > 1 ? `_${i + 1}` : ''}.svg`);
+        const url = URL.createObjectURL(file);
+        const a = document.createElement('a');
+        a.download = file.name;
+        a.href = url;
+        a.click();
+        requestAnimationFrame(() => {
+          URL.revokeObjectURL(url);
+        });
+      }
+      return files;
+    },
+    async downloadPNG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
+      const canvases = await Promise.all(vegaRefs.current.map(view => view.toCanvas(2)));
+      const data = canvases.map(canvas => canvas.toDataURL('image/png', 1));
+      const files: string[] = [];
+      for (let i = 0; i < data.length; i += 1) {
+        const d = data[i];
+        const a = document.createElement('a');
+        a.download = `${filename}${data.length > 1 ? `_${i + 1}` : ''}.png`;
+        a.href = d.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
+        a.click();
+      }
+      return files;
+    },
+  }));
+
   return <CanvaContainer rowSize={Math.max(rowRepeatFields.length, 1)} colSize={Math.max(colRepeatFields.length, 1)}>
     {/* <div ref={container}></div> */}
     {
       viewPlaceholders.map((view, i) => <div key={i} ref={view}></div>)
     }
   </CanvaContainer>
-}
+});
 
 export default ReactVega;

package/src/visualSettings/index.tsx

@@ -1,4 +1,4 @@
-import { BarsArrowDownIcon, BarsArrowUpIcon } from '@heroicons/react/24/outline';
+import { BarsArrowDownIcon, BarsArrowUpIcon, ChevronDownIcon, PhotoIcon } from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 import styled from 'styled-components'
@@ -6,9 +6,10 @@ import { ArrowPathIcon } from '@heroicons/react/24/solid';
 import { useTranslation } from 'react-i18next';
 import { LiteForm } from '../components/liteForm';
 import SizeSetting from '../components/sizeSetting';
-import { CHART_LAYOUT_TYPE, GEMO_TYPES, STACK_MODE } from '../config';
+import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
-import { IStackMode } from '../interfaces';
+import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS } from '../interfaces';
+import { IReactVegaHandler } from '../vis/react-vega';
 
 
 export const LiteContainer = styled.div`
@@ -16,9 +17,27 @@ export const LiteContainer = styled.div`
     border: 1px solid #d9d9d9;
     padding: 1em;
     background-color: #fff;
+    .menu-root {
+        position: relative;
+        & > *:not(.trigger) {
+            display: flex;
+            flex-direction: column;
+            position: absolute;
+            right: 0;
+            top: 100%;
+            border: 1px solid #8884;
+        }
+        &:not(:hover) > *:not(.trigger):not(:hover) {
+            display: none;
+        }
+    }
 `;
 
-const VisualSettings: React.FC = () => {
+interface IVisualSettings {
+    rendererHandler?: React.RefObject<IReactVegaHandler>;
+}
+
+const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
     const { vizStore } = useGlobalStore();
     const { visualConfig, sortCondition } = vizStore;
     const { t: tGlobal } = useTranslation();
@@ -226,6 +245,68 @@ const VisualSettings: React.FC = () => {
                     {t('size')}
                 </label>
             </div>
+            <div className="item">
+                <label
+                    id="dropdown:exploration_mode:label"
+                    htmlFor="dropdown:exploration_mode"
+                >
+                    {tGlobal(`constant.exploration_mode.__enum__`)}
+                </label>
+                <select
+                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
+                    id="dropdown:exploration_mode"
+                    aria-describedby="dropdown:exploration_mode:label"
+                    value={visualConfig.exploration.mode}
+                    onChange={e => {
+                        vizStore.setExploration({
+                            mode: e.target.value as (typeof EXPLORATION_TYPES)[number]
+                        });
+                    }}
+                >
+                    {EXPLORATION_TYPES.map(g => (
+                        <option
+                            key={g}
+                            value={g}
+                            className="cursor-pointer"
+                            aria-selected={visualConfig.exploration.mode === g}
+                        >
+                            {tGlobal(`constant.exploration_mode.${g}`)}
+                        </option>
+                    ))}
+                </select>
+            </div>
+            <div className="item" style={{ opacity: visualConfig.exploration.mode !== 'brush' ? 0.3 : undefined }}>
+                <label
+                    id="dropdown:brush_mode:label"
+                    htmlFor="dropdown:brush_mode"
+                >
+                    {tGlobal(`constant.brush_mode.__enum__`)}
+                </label>
+                <select
+                    className="border border-gray-500 rounded-sm text-xs pt-0.5 pb-0.5 pl-2 pr-2 cursor-pointer"
+                    id="dropdown:brush_mode"
+                    aria-describedby="dropdown:brush_mode:label"
+                    disabled={visualConfig.exploration.mode !== 'brush'}
+                    aria-disabled={visualConfig.exploration.mode !== 'brush'}
+                    value={visualConfig.exploration.brushDirection}
+                    onChange={e => {
+                        vizStore.setExploration({
+                            brushDirection: e.target.value as IBrushDirection
+                        });
+                    }}
+                >
+                    {BRUSH_DIRECTIONS.map(g => (
+                        <option
+                            key={g}
+                            value={g}
+                            className="cursor-pointer"
+                            aria-selected={visualConfig.exploration.brushDirection === g}
+                        >
+                            {tGlobal(`constant.brush_mode.${g}`)}
+                        </option>
+                    ))}
+                </select>
+            </div>
             <div className="item">
                 <input
                     type="checkbox"
@@ -245,6 +326,48 @@ const VisualSettings: React.FC = () => {
                     {t('toggle.debug')}
                 </label>
             </div>
+            <div className='item'>
+                <label
+                    className="text-xs text-color-gray-700 mr-2"
+                    htmlFor="button:transpose"
+                    id="button:transpose:label"
+                >
+                    {t('button.export_chart')}
+                </label>
+                <PhotoIcon
+                    className="w-4 inline-block cursor-pointer"
+                    role="button"
+                    tabIndex={0}
+                    id="button:export_chart"
+                    aria-describedby="button:export_chart:label"
+                    xlinkTitle={t('button.export_chart')}
+                    aria-label={t('button.export_chart')}
+                    onClick={() => rendererHandler?.current?.downloadPNG()}
+                />
+                <div className="menu-root flex flex-col items-center justify-center">
+                    <ChevronDownIcon
+                        className="w-4 h-3 inline-block mr-1 cursor-pointer trigger"
+                        role="button"
+                        tabIndex={0}
+                    />
+                    <div>
+                        <button
+                            className="text-xs min-w-96 w-full pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            aria-label={t('button.export_chart_as', { type: 'png' })}
+                            onClick={() => rendererHandler?.current?.downloadPNG()}
+                        >
+                            {t('button.export_chart_as', { type: 'png' })}
+                        </button>
+                        <button
+                            className="text-xs min-w-96 w-full pt-1 pb-1 pl-6 pr-6 bg-white hover:bg-gray-200"
+                            aria-label={t('button.export_chart_as', { type: 'svg' })}
+                            onClick={() => rendererHandler?.current?.downloadSVG()}
+                        >
+                            {t('button.export_chart_as', { type: 'svg' })}
+                        </button>
+                    </div>
+                </div>
+            </div>
         </LiteForm>
     </LiteContainer>
 }