@kanaries/graphic-walker 0.3.6 → 0.3.8

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export declare const ShadowDomContext: React.Context<{
     root: ShadowRoot | null;
 }>;
 export declare const GraphicWalker: React.FC<IGWProps>;
+export { default as PureRenderer } from './renderer/pureRenderer';

package/dist/interfaces.d.ts

@@ -1,3 +1,5 @@
+import { Config as VgConfig } from 'vega';
+import { Config as VlConfig } from 'vega-lite';
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
@@ -164,6 +166,7 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    zeroScale: boolean;
     format: {
         numberFormat?: string;
         timeFormat?: string;
@@ -187,3 +190,4 @@ export declare enum ISegmentKey {
 }
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
+export type VegaGlobalConfig = VgConfig | VlConfig;

package/dist/renderer/hooks.d.ts

@@ -0,0 +1,15 @@
+import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
+interface UseRendererProps {
+    data: IRow[];
+    allFields: Omit<IViewField, 'dragId'>[];
+    viewDimensions: IViewField[];
+    viewMeasures: IViewField[];
+    filters: readonly DeepReadonly<IFilterField>[];
+    defaultAggregated: boolean;
+}
+interface UseRendererResult {
+    viewData: IRow[];
+    loading: boolean;
+}
+export declare const useRenderer: (props: UseRendererProps) => UseRendererResult;
+export {};

package/dist/renderer/pureRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { IDarkMode, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type { IReactVegaHandler } from '../vis/react-vega';
+interface IPureRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    rawData?: IRow[];
+    visualState: DraggableFieldState;
+    visualConfig: IVisualConfig;
+}
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IPureRendererProps & React.RefAttributes<IReactVegaHandler>, "key" | keyof IPureRendererProps> & React.RefAttributes<IReactVegaHandler>>>;
+export default _default;

package/dist/renderer/specRenderer.d.ts

@@ -7,7 +7,13 @@ interface SpecRendererProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
+    onGeomClick?: ((values: any, e: any) => void) | undefined;
+    onChartResize?: ((width: number, height: number) => void) | undefined;
 }
+/**
+ * Sans-store renderer of GraphicWalker.
+ * This is a pure component, which means it will not depend on any global state.
+ */
 declare const SpecRenderer: React.ForwardRefExoticComponent<SpecRendererProps & React.RefAttributes<IReactVegaHandler>>;
 export default SpecRenderer;

package/dist/vis/react-vega.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey, IVisualConfig } from '../interfaces';
+import { IViewField, IRow, IStackMode, VegaGlobalConfig } from '../interfaces';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -7,7 +7,6 @@ export interface IReactVegaHandler {
     downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
-    format: IVisualConfig['format'];
     rows: Readonly<IViewField[]>;
     columns: Readonly<IViewField[]>;
     dataSource: IRow[];
@@ -28,9 +27,7 @@ interface ReactVegaProps {
     width: number;
     height: number;
     onGeomClick?: (values: any, e: any) => void;
-    /** @default "vega" */
-    themeKey?: IThemeKey;
-    dark?: IDarkMode;
+    vegaConfig: VegaGlobalConfig;
 }
 declare const ReactVega: React.ForwardRefExoticComponent<ReactVegaProps & React.RefAttributes<IReactVegaHandler>>;
 export default ReactVega;

package/dist/vis/spec/tooltip.d.ts

@@ -1,4 +1,4 @@
 import { IViewField } from "../../interfaces";
 export declare function addTooltipEncode(encoding: {
     [key: string]: any;
-}, details?: Readonly<IViewField[]>): void;
+}, details?: Readonly<IViewField[]>, defaultAggregated?: boolean): void;

package/package.json

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

package/src/components/pivotTable/index.tsx

@@ -39,7 +39,7 @@ interface PivotTableProps {
     data: IRow[];
     loading: boolean;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
-    visualConfig: IVisualConfig;
+    visualConfig: DeepReadonly<IVisualConfig>;
 }
 const PivotTable: React.FC<PivotTableProps> = (props) => {
     const { data, draggableFieldState } = props;

package/src/components/toggle.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { Switch } from '@headlessui/react';
+
+function classNames(...classes: string[]) {
+    return classes.filter(Boolean).join(' ');
+}
+
+interface ToggleProps {
+    enabled: boolean;
+    onChange: (enabled: boolean) => void;
+    label?: string;
+}
+
+export default function Toggle(props: ToggleProps) {
+    const { enabled, onChange, label } = props;
+
+    return (
+        <Switch.Group as="div" className="flex items-center">
+            <Switch
+                checked={enabled}
+                onChange={onChange}
+                className={classNames(
+                    enabled ? 'bg-indigo-600' : 'bg-gray-200',
+                    'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2'
+                )}
+            >
+                <span
+                    aria-hidden="true"
+                    className={classNames(
+                        enabled ? 'translate-x-5' : 'translate-x-0',
+                        'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
+                    )}
+                />
+            </Switch>
+            <Switch.Label as="span" className="ml-3 text-sm">
+                <span className="font-medium text-gray-900">{label}</span>
+            </Switch.Label>
+        </Switch.Group>
+    );
+}

package/src/components/visualConfig/index.tsx

@@ -6,6 +6,8 @@ import { IVisualConfig } from '../../interfaces';
 import PrimaryButton from '../button/primary';
 import DefaultButton from '../button/default';
 import { useTranslation } from 'react-i18next';
+import Toggle from '../toggle';
+import { runInAction } from 'mobx';
 
 const VisualConfigPanel: React.FC = (props) => {
     const { commonStore, vizStore } = useGlobalStore();
@@ -22,6 +24,7 @@ const VisualConfigPanel: React.FC = (props) => {
         timeFormat: visualConfig.format.timeFormat,
         normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
     });
+    const [zeroScale, setZeroScale] = useState<boolean>(visualConfig.zeroScale);
 
     return (
         <Modal
@@ -31,8 +34,17 @@ const VisualConfigPanel: React.FC = (props) => {
             }}
         >
             <div>
-                <h2 className='text-lg mb-4'>{t('config.format')}</h2>
-                <p className='text-xs'>Format guides docs: <a target="_blank" className='underline text-blue-500' href="https://github.com/d3/d3-format#locale_format">read here</a></p>
+                <h2 className="text-lg mb-4">{t('config.format')}</h2>
+                <p className="text-xs">
+                    Format guides docs:{' '}
+                    <a
+                        target="_blank"
+                        className="underline text-blue-500"
+                        href="https://github.com/d3/d3-format#locale_format"
+                    >
+                        read here
+                    </a>
+                </p>
                 {formatConfigList.map((fc) => (
                     <div className="my-2" key={fc}>
                         <label className="block text-xs font-medium leading-6 text-gray-900">{t(`config.${fc}`)}</label>
@@ -51,18 +63,30 @@ const VisualConfigPanel: React.FC = (props) => {
                         </div>
                     </div>
                 ))}
-                <div className='mt-4'>
+                <div className="my-2">
+                    <Toggle
+                        label="zero scale"
+                        enabled={zeroScale}
+                        onChange={(en) => {
+                            setZeroScale(en);
+                        }}
+                    />
+                </div>
+                <div className="mt-4">
                     <PrimaryButton
                         text={t('actions.confirm')}
-                        className='mr-2'
+                        className="mr-2"
                         onClick={() => {
-                            vizStore.setVisualConfig('format', format);
-                            commonStore.setShowVisualConfigPanel(false);
+                            runInAction(() => {
+                                vizStore.setVisualConfig('format', format);
+                                vizStore.setVisualConfig('zeroScale', zeroScale);
+                                commonStore.setShowVisualConfigPanel(false);
+                            })
                         }}
                     />
                     <DefaultButton
                         text={t('actions.cancel')}
-                        className='mr-2'
+                        className="mr-2"
                         onClick={() => {
                             commonStore.setShowVisualConfigPanel(false);
                         }}

package/src/fields/aestheticFields.tsx

@@ -15,6 +15,8 @@ const AestheticFields: React.FC = props => {
 
     const channels = useMemo(() => {
         switch (geoms[0]) {
+            case 'bar':
+            case 'tick':
             case 'arc':
             case 'line':
             case 'area':

package/src/index.tsx

@@ -49,3 +49,5 @@ export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
         </StoreWrapper>
     );
 });
+
+export { default as PureRenderer } from './renderer/pureRenderer';

package/src/interfaces.ts

@@ -1,3 +1,6 @@
+import {Config as VgConfig} from 'vega';
+import {Config as VlConfig} from 'vega-lite';
+
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
@@ -192,6 +195,7 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    zeroScale: boolean;
     format: {
         numberFormat?: string;
         timeFormat?: string;
@@ -218,3 +222,5 @@ export enum ISegmentKey {
 
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
+
+export type VegaGlobalConfig = VgConfig | VlConfig;

package/src/renderer/hooks.ts

@@ -0,0 +1,73 @@
+import { useState, useEffect, useMemo, useRef } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
+import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import { getMeaAggKey } from '../utils';
+
+
+interface UseRendererProps {
+    data: IRow[];
+    allFields: Omit<IViewField, 'dragId'>[];
+    viewDimensions: IViewField[];
+    viewMeasures: IViewField[];
+    filters: readonly DeepReadonly<IFilterField>[];
+    defaultAggregated: boolean;
+}
+
+interface UseRendererResult {
+    viewData: IRow[];
+    loading: boolean;
+}
+
+export const useRenderer = (props: UseRendererProps): UseRendererResult => {
+    const { data, allFields, viewDimensions, viewMeasures, filters, defaultAggregated } = props;
+    const [computing, setComputing] = useState(false);
+    const taskIdRef = useRef(0);
+
+    const [viewData, setViewData] = useState<IRow[]>([]);
+
+    useEffect(() => {
+        const taskId = ++taskIdRef.current;
+        setComputing(true);
+        applyFilter(data, filters)
+            .then((data) => transformDataService(data, allFields))
+            .then((d) => {
+                // setViewData(d);
+                const dims = viewDimensions;
+                const meas = viewMeasures;
+                return applyViewQuery(d, dims.concat(meas), {
+                    op: defaultAggregated ? 'aggregate' : 'raw',
+                    groupBy: dims.map((f) => f.fid),
+                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
+                });
+            })
+            .then(data => {
+                if (taskId !== taskIdRef.current) {
+                    return;
+                }
+                unstable_batchedUpdates(() => {
+                    setComputing(false);
+                    setViewData(data);
+                });
+            }).catch((err) => {
+                if (taskId !== taskIdRef.current) {
+                    return;
+                }
+                console.error(err);
+                unstable_batchedUpdates(() => {
+                    setComputing(false);
+                    setViewData([]);
+                });
+            });
+        return () => {
+            taskIdRef.current++;
+        };
+    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated]);
+
+    return useMemo(() => {
+        return {
+            viewData,
+            loading: computing,
+        };
+    }, [viewData, computing]);
+};

package/src/renderer/index.tsx

@@ -1,72 +1,85 @@
 import { observer } from 'mobx-react-lite';
-import React, { useState, useEffect, forwardRef } from 'react';
-import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import React, { useState, useEffect, forwardRef, useRef, useCallback } from 'react';
 import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
 import SpecRenderer from './specRenderer';
-import { toJS } from 'mobx';
+import { runInAction, toJS } from 'mobx';
 import { useGlobalStore } from '../store';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { unstable_batchedUpdates } from 'react-dom';
+import { useRenderer } from './hooks';
 import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
-import PivotTable from '../components/pivotTable';
-import { getMeaAggKey } from '../utils';
 
 interface RendererProps {
     themeKey?: IThemeKey;
     dark?: IDarkMode;
 }
+/**
+ * Renderer of GraphicWalker editor.
+ * Depending on global store.
+ */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
     const { themeKey, dark } = props;
-    const [waiting, setWaiting] = useState<boolean>(false);
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures } = vizStore;
+    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState } = vizStore;
     const { currentDataset } = commonStore;
     const { dataSource } = currentDataset;
+
     const [viewConfig, setViewConfig] = useState<IVisualConfig>(initVisualConfig);
     const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
-
     const [viewData, setViewData] = useState<IRow[]>([]);
+
+    const { viewData: data, loading: waiting } = useRenderer({
+        data: dataSource,
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters: viewFilters,
+        defaultAggregated: visualConfig.defaultAggregated,
+    });
+
+    // Dependencies that should not trigger effect individually
+    const latestFromRef = useRef({
+        data,
+        draggableFieldState: toJS(draggableFieldState),
+        visualConfig: toJS(visualConfig),
+    });
+    latestFromRef.current = {
+        data,
+        draggableFieldState: toJS(draggableFieldState),
+        visualConfig: toJS(visualConfig),
+    };
+
     useEffect(() => {
-        setWaiting(true);
-        applyFilter(dataSource, viewFilters)
-            .then((data) => transformDataService(data, allFields))
-            .then((d) => {
-                // setViewData(d);
-                const dims = viewDimensions;
-                const meas = viewMeasures;
-                const config = toJS(vizStore.visualConfig);
-                return applyViewQuery(d, dims.concat(meas), {
-                    op: config.defaultAggregated ? 'aggregate' : 'raw',
-                    groupBy: dims.map((f) => f.fid),
-                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
-                });
-            })
-            .then((data) => {
-                unstable_batchedUpdates(() => {
-                    setViewData(data);
-                    setWaiting(false);
-                    setEncodings(toJS(vizStore.draggableFieldState));
-                    setViewConfig(toJS(vizStore.visualConfig));
-                });
-            })
-            .catch((err) => {
-                console.error(err);
-                setWaiting(false);
+        if (waiting === false) {
+            unstable_batchedUpdates(() => {
+                setViewData(latestFromRef.current.data);
+                setEncodings(latestFromRef.current.draggableFieldState);
+                setViewConfig(latestFromRef.current.visualConfig);
             });
-    }, [dataSource, viewFilters, allFields, viewDimensions, viewMeasures]);
+        }
+    }, [waiting, vizStore]);
 
-    if (viewConfig.geoms.includes('table')) {
-        return (
-            <PivotTable
-                data={viewData}
-                draggableFieldState={encodings}
-                visualConfig={viewConfig}
-                loading={waiting}
-                themeKey={themeKey}
-                dark={dark}
-            />
-        );
-    }
+    const handleGeomClick = useCallback(
+        (values: any, e: any) => {
+            e.stopPropagation();
+            runInAction(() => {
+                commonStore.showEmbededMenu([e.pageX, e.pageY]);
+                commonStore.setFilters(values);
+            });
+        },
+        []
+    );
+
+    const handleChartResize = useCallback(
+        (width: number, height: number) => {
+            vizStore.setChartLayout({
+                mode: 'fixed',
+                width,
+                height,
+            });
+        },
+        [vizStore]
+    );
 
     return (
         <SpecRenderer
@@ -77,6 +90,8 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             dark={dark}
             draggableFieldState={encodings}
             visualConfig={viewConfig}
+            onGeomClick={handleGeomClick}
+            onChartResize={handleChartResize}
         />
     );
 });

package/src/renderer/pureRenderer.tsx

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, forwardRef, useMemo, useRef } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
+import type { IReactVegaHandler } from '../vis/react-vega';
+import SpecRenderer from './specRenderer';
+import { useRenderer } from './hooks';
+
+
+interface IPureRendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+    rawData?: IRow[];
+    visualState: DraggableFieldState;
+    visualConfig: IVisualConfig;
+}
+
+/**
+ * Render a readonly chart with given visualization schema.
+ * This is a pure component, which means it will not depend on any global state.
+ */
+const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer (props, ref) {
+    const {
+        themeKey,
+        dark,
+        rawData,
+        visualState,
+        visualConfig,
+    } = props;
+    const defaultAggregated = visualConfig?.defaultAggregated ?? false;
+
+    const [viewData, setViewData] = useState<IRow[]>([]);
+    
+    const { allFields, viewDimensions, viewMeasures, filters } = useMemo(() => {
+        const viewDimensions: IViewField[] = [];
+        const viewMeasures: IViewField[] = [];
+
+        const { dimensions, measures, filters, ...state } = toJS(visualState);
+        const allFields = [...dimensions, ...measures];
+
+        const dKeys = Object.keys(state) as (keyof DraggableFieldState)[];
+        for (const dKey of dKeys) {
+            for (const f of state[dKey]) {
+                if (f.analyticType === 'dimension') {
+                    viewDimensions.push(f);
+                } else if (f.analyticType === 'measure') {
+                    viewMeasures.push(f);
+                }
+            }
+        }
+
+        return { allFields, viewDimensions, viewMeasures, filters };
+    }, [visualState]);
+
+    const { viewData: data, loading: waiting } = useRenderer({
+        data: rawData ?? [],
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters,
+        defaultAggregated,
+    });
+
+    // Dependencies that should not trigger effect individually
+    const latestFromRef = useRef({ data });
+    latestFromRef.current = { data };
+
+    useEffect(() => {
+        if (waiting === false) {
+            unstable_batchedUpdates(() => {
+                setViewData(latestFromRef.current.data);
+            });
+        }
+    }, [waiting]);
+
+    return (
+        <SpecRenderer
+            loading={waiting}
+            data={viewData}
+            ref={ref}
+            themeKey={themeKey}
+            dark={dark}
+            draggableFieldState={visualState}
+            visualConfig={visualConfig}
+        />
+    );
+});
+
+export default observer(PureRenderer);