@kanaries/graphic-walker 0.4.5 → 0.4.7

package/dist/renderer/index.d.ts

@@ -3,6 +3,7 @@ import { IDarkMode, IThemeKey, IComputationFunction } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
 interface RendererProps {
     themeKey?: IThemeKey;
+    themeConfig?: any;
     dark?: IDarkMode;
     computationFunction: IComputationFunction;
 }

package/dist/renderer/pureRenderer.d.ts

@@ -3,6 +3,7 @@ import type { IDarkMode, IRow, IThemeKey, DraggableFieldState, IVisualConfig, IC
 declare const _default: ((props: {
     name?: string | undefined;
     themeKey?: IThemeKey | undefined;
+    themeConfig?: any;
     dark?: IDarkMode | undefined;
     visualState: DraggableFieldState;
     visualConfig: IVisualConfig;

package/dist/renderer/specRenderer.d.ts

@@ -13,6 +13,7 @@ interface SpecRendererProps {
     onChartResize?: ((width: number, height: number) => void) | undefined;
     locale?: string;
     computationFunction: IComputationFunction;
+    themeConfig?: any;
 }
 /**
  * Sans-store renderer of GraphicWalker.

package/dist/utils/useTheme.d.ts

@@ -0,0 +1,6 @@
+import { IThemeKey } from "../interfaces";
+export declare function useTheme(props: {
+    themeKey?: IThemeKey;
+    themeConfig?: any;
+    mediaTheme: 'dark' | 'light';
+}): any;

package/package.json

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

package/src/App.tsx

@@ -38,6 +38,7 @@ export interface IGWProps {
     fieldKeyGuard?: boolean;
     /** @default "vega" */
     themeKey?: IThemeKey;
+    themeConfig?: any;
     dark?: IDarkMode;
     storeRef?: React.MutableRefObject<IGlobalStore | null>;
     computation?: IComputationFunction;
@@ -67,6 +68,7 @@ const App = observer<IGWProps>(function App(props) {
         hideDataSourceConfig,
         fieldKeyGuard = true,
         themeKey = 'vega',
+        themeConfig,
         dark = 'media',
         computation,
         toolbar,
@@ -209,7 +211,7 @@ const App = observer<IGWProps>(function App(props) {
                                     // }}
                                 >
                                     {datasets.length > 0 && (
-                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} computationFunction={vizStore.computationFunction} />
+                                        <ReactiveRenderer ref={rendererRef} themeKey={themeKey} themeConfig={themeConfig} dark={dark} computationFunction={vizStore.computationFunction} />
                                     )}
                                     {/* {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>

package/src/hooks/service.ts

@@ -18,9 +18,9 @@ export function useGeoJSON(geojson?: FeatureCollection, url?: IGeoUrl) {
                 .then((json) => {
                     if (timestamp !== lastFetchedRef.current) return;
                     if (url.type === 'GeoJSON') {
-                        data[key] = json;
+                        GeoJSONDict[key] = json;
                     } else {
-                        data[key] = feature(json, Object.keys(json.objects)[0]);
+                        GeoJSONDict[key] = feature(json, Object.keys(json.objects)[0]) as unknown as FeatureCollection;
                     }
                     setLastFetched(timestamp);
                 });

package/src/renderer/index.tsx

@@ -15,6 +15,7 @@ import { initVisualConfig } from '../utils/save';
 
 interface RendererProps {
     themeKey?: IThemeKey;
+    themeConfig?: any;
     dark?: IDarkMode;
     computationFunction: IComputationFunction;
 }
@@ -23,7 +24,7 @@ interface RendererProps {
  * Depending on global store.
  */
 const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
-    const { themeKey, dark, computationFunction } = props;
+    const { themeKey, dark, computationFunction, themeConfig } = props;
     const { vizStore, commonStore } = useGlobalStore();
     const {
         allFields,
@@ -131,6 +132,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
             data={viewData}
             ref={ref}
             themeKey={themeKey}
+            themeConfig={themeConfig}
             dark={dark}
             locale={i18n.language}
             draggableFieldState={encodings}

package/src/renderer/pureRenderer.tsx

@@ -3,17 +3,9 @@ import { unstable_batchedUpdates } from 'react-dom';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { ShadowDom } from '../shadow-dom';
-import LeafletRenderer from '../components/leafletRenderer';
+import LeafletRenderer, { LEAFLET_DEFAULT_HEIGHT, LEAFLET_DEFAULT_WIDTH } from '../components/leafletRenderer';
 import { withAppRoot } from '../components/appRoot';
-import type {
-    IDarkMode,
-    IViewField,
-    IRow,
-    IThemeKey,
-    DraggableFieldState,
-    IVisualConfig,
-    IComputationFunction,
-} from '../interfaces';
+import type { IDarkMode, IViewField, IRow, IThemeKey, DraggableFieldState, IVisualConfig, IComputationFunction } from '../interfaces';
 import type { IReactVegaHandler } from '../vis/react-vega';
 import SpecRenderer from './specRenderer';
 import { useRenderer } from './hooks';
@@ -23,6 +15,7 @@ type IPureRendererProps =
     | {
           name?: string;
           themeKey?: IThemeKey;
+          themeConfig?: any;
           dark?: IDarkMode;
           visualState: DraggableFieldState;
           visualConfig: IVisualConfig;
@@ -31,11 +24,11 @@ type IPureRendererProps =
           locale?: string;
       } & (
           | {
-                type: 'remote',
+                type: 'remote';
                 computation: IComputationFunction;
             }
           | {
-                type?: 'local'
+                type?: 'local';
                 rawData: IRow[];
             }
       );
@@ -51,7 +44,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
             return props.computation;
         }
         return getComputation(props.rawData);
-    }, [props.type, props.type === 'remote' ? props.computation: props.rawData])
+    }, [props.type, props.type === 'remote' ? props.computation : props.rawData]);
     const defaultAggregated = visualConfig?.defaultAggregated ?? false;
 
     const [viewData, setViewData] = useState<IRow[]>([]);
@@ -86,7 +79,6 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
         limit: limit ?? -1,
         computationFunction: computation,
     });
-    console.log(computation)
     // Dependencies that should not trigger effect individually
     const latestFromRef = useRef({ data });
     latestFromRef.current = { data };
@@ -103,15 +95,12 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
     const isSpatial = coordSystem === 'geographic';
 
     return (
-        <ShadowDom>
-            <div className="relative">
+        <ShadowDom className="flex w-full" style={{ height: '100%' }}>
+            <div className="relative flex flex-col w-full flex-1">
                 {isSpatial && (
-                    <LeafletRenderer
-                        name={name}
-                        data={data}
-                        draggableFieldState={visualState}
-                        visualConfig={visualConfig}
-                    />
+                    <div className="max-w-full" style={{ width: LEAFLET_DEFAULT_WIDTH, height: LEAFLET_DEFAULT_HEIGHT, flexGrow: 1 }}>
+                        <LeafletRenderer data={data} draggableFieldState={visualState} visualConfig={visualConfig} />
+                    </div>
                 )}
                 {isSpatial || (
                     <SpecRenderer

package/src/renderer/specRenderer.tsx

@@ -9,6 +9,7 @@ import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualC
 import LoadingLayer from '../components/loadingLayer';
 import { useCurrentMediaTheme } from '../utils/media';
 import { builtInThemes } from '../vis/theme';
+import { useTheme } from '../utils/useTheme';
 
 interface SpecRendererProps {
     name?: string;
@@ -22,13 +23,14 @@ interface SpecRendererProps {
     onChartResize?: ((width: number, height: number) => void) | undefined;
     locale?: string;
     computationFunction: IComputationFunction;
+    themeConfig?: any;
 }
 /**
  * Sans-store renderer of GraphicWalker.
  * This is a pure component, which means it will not depend on any global state.
  */
 const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
-    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale, computationFunction  },
+    { name, themeKey, dark, data, loading, draggableFieldState, visualConfig, onGeomClick, onChartResize, locale, computationFunction, themeConfig: customizedThemeConfig },
     ref
 ) {
     // const { draggableFieldState, visualConfig } = vizStore;
@@ -58,7 +60,11 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
 
     const enableResize = size.mode === 'fixed' && !hasFacet && Boolean(onChartResize);
     const mediaTheme = useCurrentMediaTheme(dark);
-    const themeConfig = builtInThemes[themeKey ?? 'vega']?.[mediaTheme];
+    const themeConfig = useTheme({
+        themeKey,
+        mediaTheme,
+        themeConfig: customizedThemeConfig
+    })
 
     const vegaConfig = useMemo<VegaGlobalConfig>(() => {
         const config: VegaGlobalConfig = {

package/src/utils/useTheme.ts

@@ -0,0 +1,8 @@
+import { IThemeKey } from "../interfaces";
+import { builtInThemes } from "../vis/theme";
+
+export function useTheme (props: { themeKey?: IThemeKey; themeConfig?: any; mediaTheme: 'dark' | 'light' }) {
+    const { themeConfig, themeKey, mediaTheme } = props;
+    const config = (themeConfig ?? builtInThemes[themeKey ?? 'vega'])?.[mediaTheme];
+    return config
+}