@kanaries/graphic-walker 0.4.12 → 0.4.13

package/dist/main.d.ts

@@ -1 +1 @@
-export {};
+import './index.css';

package/dist/renderer/index.d.ts

@@ -7,6 +7,9 @@ interface RendererProps {
     dark?: IDarkMode;
     computationFunction: IComputationFunction;
     channelScales?: IChannelScales;
+    csvRef?: React.MutableRefObject<{
+        download: () => void;
+    }>;
 }
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<RendererProps & React.RefAttributes<IReactVegaHandler>, "key" | keyof RendererProps> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/style.css

@@ -1 +0,0 @@
-html{margin:0;padding:0;background-color:#fff}@media (prefers-color-scheme: dark){html{background-color:#18181b}}body{margin:0;padding:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

package/dist/vanilla.d.ts

@@ -1,3 +1,2 @@
-import './index.css';
 import { IGWProps } from './App';
 export declare function embedGraphicWalker(dom: HTMLElement | null, props?: IGWProps | undefined): void;

package/dist/visualSettings/index.d.ts

@@ -5,6 +5,9 @@ import { ToolbarItemProps } from '../components/toolbar';
 interface IVisualSettings {
     darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
+    csvHandler?: React.MutableRefObject<{
+        download: () => void;
+    }>;
     exclude?: string[];
     extra?: ToolbarItemProps[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.4.12",
+  "version": "0.4.13",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

package/src/App.tsx

@@ -174,6 +174,8 @@ const App = observer<IGWProps>(function App(props) {
 
     const rendererRef = useRef<IReactVegaHandler>(null);
 
+    const downloadCSVRef = useRef<{ download: () => void }>({download() {}});
+
     const reportError = useCallback((msg: string, code?: number) => {
         const err = new Error(`Error${code ? `(${code})`: ''}: ${msg}`);
         console.error(err);
@@ -208,7 +210,7 @@ const App = observer<IGWProps>(function App(props) {
                         {enhanceAPI?.features?.askviz && (
                             <AskViz api={typeof enhanceAPI.features.askviz === 'string' ? enhanceAPI.features.askviz : ''} headers={enhanceAPI?.header} />
                         )}
-                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
+                        <VisualSettings csvHandler={downloadCSVRef} rendererHandler={rendererRef} darkModePreference={dark} exclude={toolbar?.exclude} extra={toolbar?.extra} />
                         <CodeExport />
                         <ExplainData themeKey={themeKey} dark={darkMode}/>
                         <VisualConfig />
@@ -239,7 +241,7 @@ const App = observer<IGWProps>(function App(props) {
                                     }}
                                 >
                                     {datasets.length > 0 && (
-                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} themeConfig={themeConfig} dark={dark} computationFunction={vizStore.computationFunction} channelScales={props.channelScales} />
+                                        <ReactiveRenderer csvRef={downloadCSVRef} ref={rendererRef} themeKey={themeKey} themeConfig={themeConfig} dark={dark} computationFunction={vizStore.computationFunction} channelScales={props.channelScales} />
                                     )}
                                     {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>

package/src/fields/filterField/filterEditDialog.tsx

@@ -1,7 +1,7 @@
 import { observer } from "mobx-react-lite";
 import React from "react";
 import { useTranslation } from "react-i18next";
-
+import { toJS } from 'mobx';
 import Modal from "../../components/modal";
 import type { IFilterField, IFilterRule } from "../../interfaces";
 import { useGlobalStore } from "../../store";
@@ -45,7 +45,7 @@ const FilterEditDialog: React.FC = observer(() => {
 
     React.useEffect(() => {
         if (field !== ufRef.current) {
-            setUncontrolledField(field);
+            setUncontrolledField(toJS(field) );
         }
     }, [field]);
 

package/src/main.tsx

@@ -1,5 +1,6 @@
 import { inject } from '@vercel/analytics';
 import { embedGraphicWalker } from './vanilla';
+import './index.css';
 
 if (!import.meta.env.DEV) {
     inject();

package/src/renderer/index.tsx

@@ -1,6 +1,6 @@
 import { observer } from 'mobx-react-lite';
 import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
-import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, IComputationFunction, IChannelScales } from '../interfaces';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig, IComputationFunction, IChannelScales, IViewField } from '../interfaces';
 import { useTranslation } from 'react-i18next';
 import SpecRenderer from './specRenderer';
 import { runInAction, toJS } from 'mobx';
@@ -8,10 +8,12 @@ import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
 import { useRenderer } from './hooks';
-import { initEncoding } from '../utils/save';
+import { download, initEncoding } from '../utils/save';
 import { useChartIndexControl } from '../utils/chartIndexControl';
 import { LEAFLET_DEFAULT_HEIGHT, LEAFLET_DEFAULT_WIDTH } from '../components/leafletRenderer';
 import { initVisualConfig } from '../utils/save';
+import { getMeaAggKey } from '../utils';
+import { COUNT_FIELD_ID } from '../constants';
 
 interface RendererProps {
     themeKey?: IThemeKey;
@@ -19,13 +21,14 @@ interface RendererProps {
     dark?: IDarkMode;
     computationFunction: IComputationFunction;
     channelScales?: IChannelScales;
+    csvRef?: React.MutableRefObject<{ download: () => void }>;
 }
 /**
  * Renderer of GraphicWalker editor.
  * Depending on global store.
  */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
-    const { themeKey, dark, computationFunction, themeConfig } = props;
+    const { themeKey, dark, computationFunction, themeConfig, csvRef, } = props;
     const { vizStore, commonStore } = useGlobalStore();
     const {
         allFields,
@@ -58,6 +61,32 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
         computationFunction,
     });
 
+    useEffect(() => {
+        if (csvRef) {
+            csvRef.current = {
+                download() {
+                    const headers = viewDimensions.concat(viewMeasures).map(x => {
+                        if (x.fid === COUNT_FIELD_ID) {
+                            return {
+                                name: 'Count',
+                                fid: COUNT_FIELD_ID
+                            }
+                        }
+                        if (viewConfig.defaultAggregated && x.analyticType === 'measure') {
+                            return {
+                                fid: getMeaAggKey(x.fid,x.aggName),
+                                name: `${x.aggName}(${x.name})`
+                            }
+                        }
+                        return {fid: x.fid, name: x.name};
+                    });
+                    const result = `${headers.map(x=>x.name).join(',')}\n${data.map(x => headers.map(f => x[f.fid]).join(',')).join('\n')}`;
+                    download(result, `${chart.name}.csv`, 'text/plain');
+                },
+            }
+        }
+    }, [data,viewDimensions,viewMeasures,visualConfig.defaultAggregated]);
+
     // Dependencies that should not trigger effect individually
     const latestFromRef = useRef({
         data,

package/src/vanilla.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { GraphicWalker } from './index';
 
-import './index.css';
 import { IGWProps } from './App';
 
 export function embedGraphicWalker (dom: HTMLElement | null, props: IGWProps | undefined = {}) {

package/src/visualSettings/index.tsx

@@ -69,6 +69,7 @@ const FormContainer = styled.div`
 interface IVisualSettings {
     darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
+    csvHandler?: React.MutableRefObject<{ download: () => void }>;
     exclude?: string[];
     extra?: ToolbarItemProps[];
 }
@@ -76,6 +77,7 @@ interface IVisualSettings {
 const VisualSettings: React.FC<IVisualSettings> = ({
     rendererHandler,
     darkModePreference,
+    csvHandler,
     extra = [],
     exclude = [],
 }) => {
@@ -109,6 +111,13 @@ const VisualSettings: React.FC<IVisualSettings> = ({
         [rendererHandler]
     );
 
+    const downloadCSV = useCallback(
+        throttle(() => {
+            csvHandler?.current?.download();
+        }, 200),
+        []
+    );
+
     const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
 
     const items = useMemo<ToolbarItemProps[]>(() => {
@@ -524,6 +533,12 @@ const VisualSettings: React.FC<IVisualSettings> = ({
                     </FormContainer>
                 ),
             }]:[],
+            {
+                key: 'csv',
+                label: t('button.export_chart_as', { type: 'csv' }),
+                icon: TableCellsIcon,
+                onClick: downloadCSV,
+            },
             {
                 key: 'config',
                 label: t('button.config'),