@kanaries/graphic-walker 0.4.2 → 0.4.4

package/dist/interfaces.d.ts

@@ -270,6 +270,7 @@ export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data
         canvas(): HTMLCanvasElement | null;
     }[];
     container(): HTMLDivElement | null;
+    chartType?: string;
 }
 interface IExportChart {
     <T extends Extract<IChartExportResult['mode'], 'svg'>>(mode?: T): Promise<IChartExportResult<T>>;

package/package.json

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

package/src/components/leafletRenderer/ChoroplethRenderer.tsx

@@ -7,9 +7,11 @@ import { getMeaAggKey } from "../../utils";
 import { useColorScale, useOpacityScale } from "./encodings";
 import { isValidLatLng } from "./POIRenderer";
 import { TooltipContent } from "./tooltip";
+import { useAppRootContext } from "../appRoot";
 
 
 export interface IChoroplethRendererProps {
+    name?: string;
     data: IRow[];
     allFields: DeepReadonly<IViewField[]>;
     features: FeatureCollection | undefined;
@@ -86,7 +88,7 @@ const resolveCenter = (coordinates: [lat: number, lng: number][]): [lng: number,
 };
 
 const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendererProps>(function ChoroplethRenderer (props, ref) {
-    const { data, allFields, features, geoKey, defaultAggregated, geoId, color, opacity, text, details, vegaConfig, scaleIncludeUnmatchedChoropleth } = props;
+    const { name, data, allFields, features, geoKey, defaultAggregated, geoId, color, opacity, text, details, vegaConfig, scaleIncludeUnmatchedChoropleth } = props;
 
     useImperativeHandle(ref, () => ({}));
 
@@ -190,6 +192,23 @@ const ChoroplethRenderer = forwardRef<IChoroplethRendererRef, IChoroplethRendere
             };
         }
     });
+    
+    const appRef = useAppRootContext();
+
+    useEffect(() => {
+        const ctx = appRef.current;
+        if (ctx) {
+            ctx.exportChart = async (mode) => ({
+                mode,
+                title: name || 'untitled',
+                nCols: 0,
+                nRows: 0,
+                charts: [],
+                container: () => mapRef.current?.getContainer() as HTMLDivElement ?? null,
+                chartType: 'map'
+            })
+        }
+    }, []);
 
     useEffect(() => {
         mapRef.current?.flyToBounds(bounds);

package/src/components/leafletRenderer/POIRenderer.tsx

@@ -5,9 +5,11 @@ import type { DeepReadonly, IRow, IViewField, VegaGlobalConfig } from "../../int
 import { getMeaAggKey } from "../../utils";
 import { useColorScale, useOpacityScale, useSizeScale } from "./encodings";
 import { TooltipContent } from "./tooltip";
+import { useAppRootContext } from "../appRoot";
 
 
 export interface IPOIRendererProps {
+    name?: string;
     data: IRow[];
     allFields: DeepReadonly<IViewField[]>;
     defaultAggregated: boolean;
@@ -39,7 +41,7 @@ const formatCoerceLatLng = (latRaw: unknown, lngRaw: unknown) => {
 const debugMaxLen = 20;
 
 const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIRenderer (props, ref) {
-    const { data, allFields, latitude, longitude, color, opacity, size, details, defaultAggregated, vegaConfig } = props;
+    const { name, data, allFields, latitude, longitude, color, opacity, size, details, defaultAggregated, vegaConfig } = props;
     
     const lngLat = useMemo<[lat: number, lng: number][]>(() => {
         if (longitude && latitude) {
@@ -100,6 +102,23 @@ const POIRenderer = forwardRef<IPOIRendererRef, IPOIRendererProps>(function POIR
         }
     });
 
+    const appRef = useAppRootContext();
+
+    useEffect(() => {
+        const ctx = appRef.current;
+        if (ctx) {
+            ctx.exportChart = async (mode) => ({
+                mode,
+                title: name || 'untitled',
+                nCols: 0,
+                nRows: 0,
+                charts: [],
+                container: () => mapRef.current?.getContainer() as HTMLDivElement ?? null,
+                chartType: 'map',
+            })
+        }
+    }, []);
+
     useEffect(() => {
         mapRef.current?.flyToBounds(bounds);
     }, [`${bounds[0][0]},${bounds[0][1]},${bounds[1][0]},${bounds[1][1]}`]);

package/src/components/leafletRenderer/index.tsx

@@ -5,6 +5,7 @@ import ChoroplethRenderer from "./ChoroplethRenderer";
 
 
 export interface ILeafletRendererProps {
+    name?: string;
     vegaConfig?: VegaGlobalConfig;
     draggableFieldState: DeepReadonly<DraggableFieldState>;
     visualConfig: DeepReadonly<IVisualConfig>;
@@ -17,7 +18,7 @@ export const LEAFLET_DEFAULT_WIDTH = 800;
 export const LEAFLET_DEFAULT_HEIGHT = 600;
 
 const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(function LeafletRenderer (props, ref) {
-    const { draggableFieldState, data, visualConfig, vegaConfig = {} } = props;
+    const { name, draggableFieldState, data, visualConfig, vegaConfig = {} } = props;
     const { latitude: [lat], longitude: [lng], geoId: [geoId], dimensions, measures, size: [size], color: [color], opacity: [opacity], text: [text], details } = draggableFieldState;
     const { defaultAggregated, geoms: [markType], geojson, geoKey = '', scaleIncludeUnmatchedChoropleth = false } = visualConfig;
     const allFields = useMemo(() => [...dimensions, ...measures], [dimensions, measures]);
@@ -29,6 +30,7 @@ const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(f
     if (markType === 'poi') {
         return (
             <POIRenderer
+                name={name}
                 data={data}
                 allFields={allFields}
                 defaultAggregated={defaultAggregated}
@@ -44,6 +46,7 @@ const LeafletRenderer = forwardRef<ILeafletRendererRef, ILeafletRendererProps>(f
     } else if (markType === 'choropleth') {
         return (
             <ChoroplethRenderer
+                name={name}
                 data={data}
                 allFields={allFields}
                 features={geojson}

package/src/components/loadingLayer.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
+import Spinner from './spinner';
 
 export default function LoadingLayer () {
     return <div className="bg-gray-100/50 dark:bg-gray-700/50 absolute top-0 left-0 right-0 bottom-0 z-50 flex items-center justify-center">
-        Loading...
+        <Spinner className="text-indigo-500" />
+        <span className="text-sm text-indigo-500">
+            Loading...
+        </span>
     </div>
 }

package/src/components/spinner.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-export default function Spinner() {
+export default function Spinner(props: { className?: string }) {
+    const className = props.className || 'text-white';
     return (
-        <svg className="animate-spin ml-2 mr-2 h-5 w-5 text-white" viewBox="0 0 24 24">
+        <svg className={`animate-spin ml-2 mr-2 h-5 w-5 ${className}`} viewBox="0 0 24 24">
             <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
             <path
                 className="opacity-75"

package/src/interfaces.ts

@@ -311,6 +311,7 @@ export interface IChartExportResult<T extends 'svg' | 'data-url' = 'svg' | 'data
         canvas(): HTMLCanvasElement | null;
     }[];
     container(): HTMLDivElement | null;
+    chartType?: string;
 }
 
 interface IExportChart {

package/src/renderer/index.tsx

@@ -76,7 +76,7 @@ const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, r
                 setViewConfig(latestFromRef.current.visualConfig);
             });
         }
-    }, [waiting, vizStore]);
+    }, [waiting, data, vizStore]);
 
     useChartIndexControl({
         count: visList.length,

package/src/renderer/pureRenderer.tsx

@@ -107,6 +107,7 @@ const PureRenderer = forwardRef<IReactVegaHandler, IPureRendererProps>(function
             <div className="relative">
                 {isSpatial && (
                     <LeafletRenderer
+                        name={name}
                         data={data}
                         draggableFieldState={visualState}
                         visualConfig={visualConfig}

package/src/renderer/specRenderer.tsx

@@ -146,6 +146,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
             {loading && <LoadingLayer />}
             {isSpatial && (
                 <LeafletRenderer
+                    name={name}
                     data={data}
                     draggableFieldState={draggableFieldState}
                     visualConfig={visualConfig}

package/src/utils/vegaApiExport.ts

@@ -89,6 +89,7 @@ export const useVegaExportApi = (
                         nCols: 0,
                         nRows: 0,
                         charts: [],
+                        chartType: 'vega',
                     };
                 }
                 if (ctx.renderStatus !== 'idle') {
@@ -114,6 +115,7 @@ export const useVegaExportApi = (
                             nCols: 0,
                             nRows: 0,
                             charts: [],
+                            chartType: 'vega',
                         };
                     } finally {
                         dispose?.();
@@ -139,6 +141,7 @@ export const useVegaExportApi = (
                     container() {
                         return containerRef.current;
                     },
+                    chartType: 'vega',
                 };
                 if (mode === 'data-url') {
                     const imgData = await renderHandle.getCanvasData();