@kanaries/graphic-walker 0.3.8 → 0.3.10

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { IGWProps } from "./App";
+import type { IGWHandler } from "./interfaces";
 import "./empty_sheet.css";
-export declare const ShadowDomContext: React.Context<{
-    root: ShadowRoot | null;
-}>;
-export declare const GraphicWalker: React.FC<IGWProps>;
+export declare const GraphicWalker: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IGWProps & React.RefAttributes<IGWHandler>, "key" | keyof IGWProps> & React.RefAttributes<IGWHandler>>>;
 export { default as PureRenderer } from './renderer/pureRenderer';
+export { embedGraphicWalker } from './vanilla';
+export type { IGWProps };

package/dist/interfaces.d.ts

@@ -191,3 +191,24 @@ export declare enum ISegmentKey {
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
 export type VegaGlobalConfig = VgConfig | VlConfig;
+export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data-url'> {
+    mode: T;
+    title: string;
+    nCols: number;
+    nRows: number;
+    charts: {
+        colIndex: number;
+        rowIndex: number;
+        width: number;
+        height: number;
+        data: string;
+    }[];
+}
+interface IExportChart {
+    <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;
+    <T extends IChartExportResult['mode']>(mode: T): Promise<IChartExportResult<T>>;
+}
+export interface IGWHandler {
+    exportChart: IExportChart;
+}
+export {};

package/dist/main.d.ts

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

package/dist/renderer/pureRenderer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import type { IDarkMode, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 interface IPureRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     rawData?: IRow[];

package/dist/renderer/specRenderer.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { IReactVegaHandler } from '../vis/react-vega';
 import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
 interface SpecRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     data: IRow[];

package/dist/shadow-dom.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+export declare const ShadowDomContext: React.Context<{
+    root: ShadowRoot | null;
+}>;
+interface IShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+    onMount?: (shadowRoot: ShadowRoot) => void;
+    onUnmount?: () => void;
+}
+export declare const ShadowDom: React.FC<IShadowDomProps>;
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+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/utils/vegaApiExport.d.ts

@@ -0,0 +1,10 @@
+import { type ForwardedRef, type MutableRefObject } from "react";
+import type { View } from "vega";
+import type { IReactVegaHandler } from "../vis/react-vega";
+export declare const useVegaExportApi: (name: string | undefined, viewsRef: MutableRefObject<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    view: View;
+}[]>, ref: ForwardedRef<IReactVegaHandler>) => void;

package/dist/vanilla.d.ts

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

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

@@ -7,6 +7,7 @@ export interface IReactVegaHandler {
     downloadPNG: (filename?: string) => Promise<string[]>;
 }
 interface ReactVegaProps {
+    name?: string;
     rows: Readonly<IViewField[]>;
     columns: Readonly<IViewField[]>;
     dataSource: IRow[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -36,7 +36,8 @@
   "dependencies": {
     "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
-    "@kanaries/react-beautiful-dnd": "0.0.1",
+    "@kanaries/graphic-walker": "0.3.9",
+    "@kanaries/react-beautiful-dnd": "0.0.2",
     "@kanaries/web-data-loader": "^0.1.7",
     "autoprefixer": "^10.3.5",
     "i18next": "^21.9.1",

package/src/components/appRoot.tsx

@@ -0,0 +1,32 @@
+import React, { createContext, forwardRef, useImperativeHandle, type ForwardedRef, useContext } from "react";
+import type { IGWHandler } from "../interfaces";
+
+const AppRootContext = createContext<ForwardedRef<IGWHandler>>(null!);
+
+export const useAppRootContext = () => {
+    return useContext(AppRootContext);
+};
+
+const AppRoot = forwardRef<IGWHandler, { children: any }>(({ children }, ref) => {
+    useImperativeHandle(ref, () => {
+        return {
+            exportChart: (async mode => {
+                return {
+                    mode,
+                    title: '',
+                    nCols: 0,
+                    nRows: 0,
+                    charts: [],
+                };
+            }) as IGWHandler['exportChart'],
+        };
+    }, []);
+
+    return (
+        <AppRootContext.Provider value={ref}>
+            {children}
+        </AppRootContext.Provider>
+    );
+});
+
+export default AppRoot;

package/src/components/callout.tsx

@@ -2,7 +2,7 @@ import React, { memo, ReactNode, useContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import styled from "styled-components";
 import type { IDarkMode } from "../interfaces";
-import { ShadowDomContext } from "..";
+import { ShadowDomContext } from "../shadow-dom";
 import { useCurrentMediaTheme } from "../utils/media";
 
 export interface CalloutProps {

package/src/components/tooltip.tsx

@@ -2,7 +2,7 @@ import React, { memo, useContext, useEffect, useMemo, useRef, useState } from "r
 import { createPortal } from "react-dom";
 import styled from "styled-components";
 import type { IDarkMode } from "../interfaces";
-import { ShadowDomContext } from "..";
+import { ShadowDomContext } from "../shadow-dom";
 import { useCurrentMediaTheme } from "../utils/media";
 
 export interface TooltipProps {

package/src/index.tsx

@@ -1,53 +1,40 @@
-import React, { createContext, useEffect, useRef, useState } from "react";
-import { StyleSheetManager } from "styled-components";
-import root from "react-shadow";
+import React, { forwardRef } from "react";
 import { DOM } from "@kanaries/react-beautiful-dnd";
 import { observer } from "mobx-react-lite";
 import App, { IGWProps } from "./App";
 import { StoreWrapper } from "./store/index";
 import { FieldsContextWrapper } from "./fields/fieldsContext";
+import { ShadowDom } from "./shadow-dom";
+import AppRoot from "./components/appRoot";
+import type { IGWHandler } from "./interfaces";
 
 import "./empty_sheet.css";
-import tailwindStyle from "tailwindcss/tailwind.css?inline";
-import style from "./index.css?inline";
 
-export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
-
-export const GraphicWalker: React.FC<IGWProps> = observer((props) => {
-    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
-    const rootRef = useRef<HTMLDivElement>(null);
+export const GraphicWalker = observer(forwardRef<IGWHandler, IGWProps>((props, ref) => {
     const { storeRef } = props;
 
-    useEffect(() => {
-        if (rootRef.current) {
-            const shadowRoot = rootRef.current.shadowRoot!;
-            setShadowRoot(shadowRoot);
-            DOM.setBody(shadowRoot);
-            DOM.setHead(shadowRoot);
-            return () => {
-                DOM.setBody(document.body);
-                DOM.setHead(document.head);
-            };
-        }
-    }, []);
+    const handleMount = (shadowRoot: ShadowRoot) => {
+        DOM.setBody(shadowRoot);
+        DOM.setHead(shadowRoot);
+    };
+    const handleUnmount = () => {
+        DOM.setBody(document.body);
+        DOM.setHead(document.head);
+    };
 
     return (
         <StoreWrapper keepAlive={props.keepAlive} storeRef={storeRef}>
-            <root.div mode="open" ref={rootRef}>
-                <style>{tailwindStyle}</style>
-                <style>{style}</style>
-                {shadowRoot && (
-                    <StyleSheetManager target={shadowRoot}>
-                        <FieldsContextWrapper>
-                            <ShadowDomContext.Provider value={{ root: shadowRoot }}>
-                                <App {...props} />
-                            </ShadowDomContext.Provider>
-                        </FieldsContextWrapper>
-                    </StyleSheetManager>
-                )}
-            </root.div>
+            <AppRoot ref={ref}>
+                <ShadowDom onMount={handleMount} onUnmount={handleUnmount}>
+                    <FieldsContextWrapper>
+                        <App {...props} />
+                    </FieldsContextWrapper>
+                </ShadowDom>
+            </AppRoot>
         </StoreWrapper>
     );
-});
+}));
 
 export { default as PureRenderer } from './renderer/pureRenderer';
+export { embedGraphicWalker } from './vanilla';
+export type { IGWProps };

package/src/interfaces.ts

@@ -223,4 +223,27 @@ export enum ISegmentKey {
 export type IThemeKey = 'vega' | 'g2';
 export type IDarkMode = 'media' | 'light' | 'dark';
 
-export type VegaGlobalConfig = VgConfig | VlConfig;
+export type VegaGlobalConfig = VgConfig | VlConfig;
+
+export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data-url'> {
+    mode: T;
+    title: string;
+    nCols: number;
+    nRows: number;
+    charts: {
+        colIndex: number;
+        rowIndex: number;
+        width: number;
+        height: number;
+        data: string;
+    }[];
+}
+
+interface IExportChart {
+    <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;
+    <T extends IChartExportResult['mode']>(mode: T): Promise<IChartExportResult<T>>;
+}
+
+export interface IGWHandler {
+    exportChart: IExportChart;
+}

package/src/main.tsx

@@ -1,30 +1,8 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { GraphicWalker } from './index';
-
 import { inject } from '@vercel/analytics';
-import './index.css';
+import { embedGraphicWalker } from './vanilla';
 
 if (!import.meta.env.DEV) {
     inject();
 }
 
-// Example: Detect if Concurrent Mode is available
-const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
-
-// Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
-if (isConcurrentModeAvailable) {
-    if (import.meta.env.DEV) {
-        console.warn('React 18+ detected, remove strict mode if you meet drag and drop issue. more info at https://docs.kanaries.net/graphic-walker/faq/graphic-walker-react-18')
-    }
-    // @ts-ignore
-    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-    root.render(<GraphicWalker themeKey="g2" />);
-} else {
-    ReactDOM.render(
-        <React.StrictMode>
-            <GraphicWalker themeKey="g2" />
-        </React.StrictMode>,
-        document.getElementById('root') as HTMLElement
-    );
-}
+embedGraphicWalker(document.getElementById('root') as HTMLElement)

package/src/renderer/hooks.ts

@@ -30,8 +30,16 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         const taskId = ++taskIdRef.current;
         setComputing(true);
         applyFilter(data, filters)
-            .then((data) => transformDataService(data, allFields))
+            .then((data) => {
+                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
+                    return data;
+                }
+                return transformDataService(data, allFields);
+            })
             .then((d) => {
+                if (viewDimensions.length === 0 && viewMeasures.length === 0) {
+                    return data;
+                }
                 // setViewData(d);
                 const dims = viewDimensions;
                 const meas = viewMeasures;

package/src/renderer/index.tsx

@@ -20,7 +20,8 @@ interface RendererProps {
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
     const { themeKey, dark } = props;
     const { vizStore, commonStore } = useGlobalStore();
-    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState } = vizStore;
+    const { allFields, viewFilters, viewDimensions, viewMeasures, visualConfig, draggableFieldState, visList, visIndex } = vizStore;
+    const chart = visList[visIndex];
     const { currentDataset } = commonStore;
     const { dataSource } = currentDataset;
 
@@ -83,6 +84,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
 
     return (
         <SpecRenderer
+            name={chart?.name}
             loading={waiting}
             data={viewData}
             ref={ref}

package/src/renderer/pureRenderer.tsx

@@ -2,6 +2,8 @@ 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 { ShadowDom } from '../shadow-dom';
+import AppRoot from '../components/appRoot';
 import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig } from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
@@ -9,6 +11,7 @@ import { useRenderer } from './hooks';
 
 
 interface IPureRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     rawData?: IRow[];
@@ -22,6 +25,7 @@ interface IPureRendererProps {
  */
 const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function PureRenderer (props, ref) {
     const {
+        name,
         themeKey,
         dark,
         rawData,
@@ -75,15 +79,22 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     }, [waiting]);
 
     return (
-        <SpecRenderer
-            loading={waiting}
-            data={viewData}
-            ref={ref}
-            themeKey={themeKey}
-            dark={dark}
-            draggableFieldState={visualState}
-            visualConfig={visualConfig}
-        />
+        <AppRoot>
+            <ShadowDom>
+                <div className="relative">
+                    <SpecRenderer
+                        name={name}
+                        loading={waiting}
+                        data={viewData}
+                        ref={ref}
+                        themeKey={themeKey}
+                        dark={dark}
+                        draggableFieldState={visualState}
+                        visualConfig={visualConfig}
+                    />
+                </div>
+            </ShadowDom>
+        </AppRoot>
     );
 });
 

package/src/renderer/specRenderer.tsx

@@ -10,6 +10,7 @@ import { useCurrentMediaTheme } from '../utils/media';
 import { builtInThemes } from '../vis/theme';
 
 interface SpecRendererProps {
+    name?: string;
     themeKey?: IThemeKey;
     dark?: IDarkMode;
     data: IRow[];
@@ -24,7 +25,7 @@ interface SpecRendererProps {
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
@@ -123,6 +124,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
         >
             {loading && <LoadingLayer />}
             <ReactVega
+                name={name}
                 vegaConfig={vegaConfig}
                 // format={format}
                 layoutMode={size.mode}

package/src/shadow-dom.tsx

@@ -0,0 +1,48 @@
+import React, { HTMLAttributes, createContext, useEffect, useRef, useState } from "react";
+import { StyleSheetManager } from "styled-components";
+import root from "react-shadow";
+
+import tailwindStyle from "tailwindcss/tailwind.css?inline";
+import style from "./index.css?inline";
+
+export const ShadowDomContext = createContext<{ root: ShadowRoot | null }>({ root: null });
+
+interface IShadowDomProps extends HTMLAttributes<HTMLDivElement> {
+    onMount?: (shadowRoot: ShadowRoot) => void;
+    onUnmount?: () => void;
+}
+
+export const ShadowDom: React.FC<IShadowDomProps> = function ShadowDom ({ onMount, onUnmount, children, ...attrs }) {
+    const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);
+    const rootRef = useRef<HTMLDivElement>(null);
+
+    const onMountRef = useRef(onMount);
+    onMountRef.current = onMount;
+    const onUnmountRef = useRef(onUnmount);
+    onUnmountRef.current = onUnmount;
+
+    useEffect(() => {
+        if (rootRef.current) {
+            const shadowRoot = rootRef.current.shadowRoot!;
+            setShadowRoot(shadowRoot);
+            onMountRef.current?.(shadowRoot);
+            return () => {
+                onUnmountRef.current?.();
+            };
+        }
+    }, []);
+
+    return (
+        <root.div {...attrs} mode="open" ref={rootRef}>
+            <style>{tailwindStyle}</style>
+            <style>{style}</style>
+            {shadowRoot && (
+                <StyleSheetManager target={shadowRoot}>
+                    <ShadowDomContext.Provider value={{ root: shadowRoot }}>
+                        {children}
+                    </ShadowDomContext.Provider>
+                </StyleSheetManager>
+            )}
+        </root.div>
+    );
+};

package/src/utils/vegaApiExport.ts

@@ -0,0 +1,102 @@
+import { useImperativeHandle, type ForwardedRef, type MutableRefObject, useEffect } from "react";
+import type { View } from "vega";
+import { useAppRootContext } from "../components/appRoot";
+import type { IReactVegaHandler } from "../vis/react-vega";
+import type { IChartExportResult } from "../interfaces";
+
+
+export const useVegaExportApi = (name: string | undefined, viewsRef: MutableRefObject<{ x: number; y: number; w: number; h: number; view: View }[]>, ref: ForwardedRef<IReactVegaHandler>) => {
+    const renderHandle = {
+        getSVGData() {
+            return Promise.all(viewsRef.current.map(item => item.view.toSVG()));
+        },
+        async getCanvasData() {
+            const canvases = await Promise.all(viewsRef.current.map(item => item.view.toCanvas(2)));
+            return canvases.map(canvas => canvas.toDataURL('image/png', 1));
+        },
+        async downloadSVG(filename = `gw chart ${Date.now() % 1_000_000}`.padStart(6, '0')) {
+            const data = await Promise.all(viewsRef.current.map(item => item.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(viewsRef.current.map(item => item.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;
+        },
+    };
+    
+    useImperativeHandle(ref, () => renderHandle);
+    
+    const appRef = useAppRootContext();
+    
+    useEffect(() => {
+        if (appRef && 'current' in appRef && appRef.current) {
+            appRef.current.exportChart = (async (mode: IChartExportResult['mode'] = 'svg') => {
+                const res: IChartExportResult = {
+                    mode,
+                    title: name || 'untitled',
+                    nCols: viewsRef.current.map(item => item.x).reduce((a, b) => Math.max(a, b), 0) + 1,
+                    nRows: viewsRef.current.map(item => item.y).reduce((a, b) => Math.max(a, b), 0) + 1,
+                    charts: viewsRef.current.map(item => ({
+                        rowIndex: item.y,
+                        colIndex: item.x,
+                        width: item.w,
+                        height: item.h,
+                        data: '',
+                    })),
+                };
+                if (mode === 'data-url') {
+                    const imgData = await renderHandle.getCanvasData();
+                    if (imgData) {
+                        for (let i = 0; i < imgData.length; i += 1) {
+                            res.charts[i].data = imgData[i];
+                        }
+                    }
+                } else if (mode === 'svg') {
+                    const svgData = await renderHandle.getSVGData();
+                    if (svgData) {
+                        for (let i = 0; i < svgData.length; i += 1) {
+                            res.charts[i].data = svgData[i];
+                        }
+                    }
+                }
+                return res;
+            }) as typeof appRef.current.exportChart;
+        }
+    });
+
+    useEffect(() => {
+        return () => {
+            if (appRef && 'current' in appRef && appRef.current) {
+                appRef.current.exportChart = async mode => ({
+                    mode,
+                    title: '',
+                    nCols: 0,
+                    nRows: 0,
+                    charts: [],
+                });
+            }
+        };
+    }, []);
+};

package/src/vanilla.tsx

@@ -0,0 +1,31 @@
+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 = {}) {
+    if (!dom) {
+        throw("DOM element not found.")
+    }
+    // Example: Detect if Concurrent Mode is available
+    const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
+
+    // Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
+    if (isConcurrentModeAvailable) {
+        if (import.meta.env.DEV) {
+            console.warn('React 18+ detected, remove strict mode if you meet drag and drop issue. more info at https://docs.kanaries.net/graphic-walker/faq/graphic-walker-react-18')
+        }
+        // @ts-ignore
+        const root = ReactDOM.createRoot(dom as HTMLElement);
+        root.render(<GraphicWalker themeKey="g2" {...props} />);
+    } else {
+        ReactDOM.render(
+            <React.StrictMode>
+                <GraphicWalker themeKey="g2" {...props} />
+            </React.StrictMode>,
+            dom as HTMLElement
+        );
+    }
+}