@kanaries/graphic-walker 0.2.13 → 0.2.15

package/dist/insightBoard/index.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import React from "react";
 declare const _default: React.FunctionComponent<{}>;
 export default _default;

package/dist/interfaces.d.ts

@@ -104,6 +104,7 @@ export interface DraggableFieldState {
     shape: IViewField[];
     theta: IViewField[];
     radius: IViewField[];
+    details: IViewField[];
     filters: IFilterField[];
 }
 export interface IDraggableStateKey {
@@ -153,3 +154,5 @@ export declare enum ISegmentKey {
     vis = "vis",
     data = "data"
 }
+export type IThemeKey = 'vega' | 'g2';
+export type IDarkMode = 'media' | 'light' | 'dark';

package/dist/renderer/index.d.ts

@@ -1,4 +1,8 @@
-import React from 'react';
-import { IReactVegaHandler } from '../vis/react-vega';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<React.RefAttributes<IReactVegaHandler>, "key"> & React.RefAttributes<IReactVegaHandler>>>;
+import React from "react";
+import { IReactVegaHandler } from "../vis/react-vega";
+import { IDarkMode, IThemeKey } from "../interfaces";
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
+    themeKey?: IThemeKey | undefined;
+    dark?: IDarkMode | undefined;
+} & React.RefAttributes<IReactVegaHandler>, "dark" | "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/store/visualSpecStore.d.ts

@@ -93,6 +93,7 @@ export declare class VizSpecStore {
     reorderField(stateKey: keyof DraggableFieldState, sourceIndex: number, destinationIndex: number): void;
     moveField(sourceKey: keyof DraggableFieldState, sourceIndex: number, destinationKey: keyof DraggableFieldState, destinationIndex: number): void;
     removeField(sourceKey: keyof DraggableFieldState, sourceIndex: number): void;
+    replaceField(sourceKey: keyof DraggableFieldState, sourceIndex: number, fid: string): void;
     private appendFilter;
     writeFilter(index: number, rule: IFilterRule | null): void;
     setFilterEditing(index: number): void;

package/dist/utils/index.d.ts

@@ -20,3 +20,5 @@ export declare function extendCountField(dataSource: IRow[], fields: IMutField[]
     dataSource: IRow[];
     fields: IMutField[];
 };
+export declare function getRange(nums: number[]): [number, number];
+export declare function makeNumbersBeautiful(nums: number[]): number[];

package/dist/utils/media.d.ts

@@ -0,0 +1,3 @@
+import { IDarkMode } from "../interfaces";
+export declare function currentMediaTheme(): "dark" | "light";
+export declare function useCurrentMediaTheme(mode?: IDarkMode | undefined): "dark" | "light";

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IViewField, IRow, IStackMode } from '../interfaces';
+import { IViewField, IRow, IStackMode, IDarkMode, IThemeKey } from '../interfaces';
 export interface IReactVegaHandler {
     getSVGData: () => Promise<string[]>;
     getCanvasData: () => Promise<string[]>;
@@ -27,6 +27,9 @@ interface ReactVegaProps {
     onGeomClick?: (values: any, e: any) => void;
     selectEncoding: SingleViewProps['selectEncoding'];
     brushEncoding: SingleViewProps['brushEncoding'];
+    /** @default "vega" */
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
 }
 interface SingleViewProps {
     x: IViewField;
@@ -48,6 +51,7 @@ interface SingleViewProps {
     asCrossFilterTrigger: boolean;
     selectEncoding: 'default' | 'none';
     brushEncoding: 'x' | 'y' | 'default' | 'none';
+    hideLegend?: boolean;
 }
 declare const ReactVega: React.ForwardRefExoticComponent<ReactVegaProps & React.RefAttributes<IReactVegaHandler>>;
 export default ReactVega;

package/dist/vis/theme.d.ts

@@ -0,0 +1,146 @@
+export declare const VegaTheme: {
+    readonly light: {
+        readonly background: "transparent";
+    };
+    readonly dark: {
+        background: string;
+        header: {
+            titleColor: string;
+            labelColor: string;
+        };
+        axis: {
+            gridColor: string;
+            domainColor: string;
+            tickColor: string;
+            labelColor: string;
+            titleColor: string;
+        };
+        legend: {
+            labelColor: string;
+            titleColor: string;
+        };
+        view: {
+            stroke: string;
+        };
+    };
+};
+export declare const AntVTheme: {
+    readonly light: {
+        readonly area: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly bar: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly circle: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly line: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly point: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly rect: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly tick: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly boxplot: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly errorbar: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly errorband: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly arc: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly background: "transparent";
+        readonly range: {
+            readonly category: readonly ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262FD", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"];
+            readonly diverging: readonly ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly heatmap: readonly ["#000000", "#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly ramp: readonly ["#EBCCFF", "#CCB0FF", "#AE95FF", "#907BFF", "#7262FD", "#5349E0", "#2F32C3", "#001BA7", "#00068C"];
+        };
+        readonly scale: {
+            readonly continuous: {
+                readonly range: readonly ["#f7fbff", "#08306b"];
+            };
+        };
+    };
+    readonly dark: {
+        readonly area: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly bar: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly circle: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly line: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly point: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly rect: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly tick: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly boxplot: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly errorbar: {
+            readonly stroke: "#5B8FF9";
+        };
+        readonly errorband: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly arc: {
+            readonly fill: "#5B8FF9";
+        };
+        readonly range: {
+            readonly category: readonly ["#5B8FF9", "#61DDAA", "#65789B", "#F6BD16", "#7262FD", "#78D3F8", "#9661BC", "#F6903D", "#008685", "#F08BB4"];
+            readonly diverging: readonly ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly heatmap: readonly ["#000000", "#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"];
+            readonly ramp: readonly ["#EBCCFF", "#CCB0FF", "#AE95FF", "#907BFF", "#7262FD", "#5349E0", "#2F32C3", "#001BA7", "#00068C"];
+        };
+        readonly scale: {
+            readonly continuous: {
+                readonly range: readonly ["#f7fbff", "#08306b"];
+            };
+        };
+        readonly background: string;
+        readonly header: {
+            titleColor: string;
+            labelColor: string;
+        };
+        readonly axis: {
+            gridColor: string;
+            domainColor: string;
+            tickColor: string;
+            labelColor: string;
+            titleColor: string;
+        };
+        readonly legend: {
+            labelColor: string;
+            titleColor: string;
+        };
+        readonly view: {
+            stroke: string;
+        };
+    };
+};
+export declare const builtInThemes: {
+    [themeKey: string]: {
+        light: any;
+        dark: any;
+    };
+};

package/dist/visualSettings/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
+import { IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
-export declare const LiteContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IVisualSettings {
+    darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 declare const _default: React.FunctionComponent<IVisualSettings>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -32,6 +32,7 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@headlessui/react": "^1.7.12",
     "@heroicons/react": "^2.0.8",
     "@kanaries/react-beautiful-dnd": "0.0.1",
     "@kanaries/web-data-loader": "0.1.5",

package/src/App.tsx

@@ -4,10 +4,9 @@ import { observer } from "mobx-react-lite";
 import { LightBulbIcon } from "@heroicons/react/24/outline";
 import { toJS } from "mobx";
 import { useTranslation } from "react-i18next";
-import { IMutField, IRow, ISegmentKey } from "./interfaces";
+import { IDarkMode, IMutField, IRow, ISegmentKey, IThemeKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
-import { Container, NestContainer } from "./components/container";
 import ClickMenu from "./components/clickMenu";
 import InsightBoard from "./insightBoard/index";
 import PosFields from "./fields/posFields";
@@ -23,6 +22,7 @@ import FilterField from "./fields/filterField";
 import { guardDataKeys } from "./utils/dataPrep";
 import SegmentNav from "./segments/segmentNav";
 import DatasetConfig from "./dataSource/datasetConfig";
+import { useCurrentMediaTheme } from "./utils/media";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -36,9 +36,12 @@ export interface IGWProps {
      * auto parse field key into a safe string. default is true
      */
     fieldKeyGuard?: boolean;
+    /** @default "vega" */
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
 }
 
-const App: React.FC<IGWProps> = (props) => {
+const App = observer<IGWProps>(function App (props) {
     const {
         dataSource = [],
         rawFields = [],
@@ -47,6 +50,8 @@ const App: React.FC<IGWProps> = (props) => {
         i18nResources,
         hideDataSourceConfig,
         fieldKeyGuard = true,
+        themeKey = 'vega',
+        dark = 'media',
     } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
@@ -114,14 +119,16 @@ const App: React.FC<IGWProps> = (props) => {
         };
     }, [currentDataset, spec]);
 
+    const darkMode = useCurrentMediaTheme(dark);
+
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className="App">
+        <div className={`${darkMode === 'dark' ? 'dark' : ''} App font-sans bg-white dark:bg-zinc-900 dark:text-white m-0 p-0`}>
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
-            <div className="">
+            <div className="bg-white dark:bg-zinc-900 dark:text-white">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
                     <SegmentNav />
@@ -130,8 +137,8 @@ const App: React.FC<IGWProps> = (props) => {
                     }
                 </div>
                 {segmentKey === ISegmentKey.vis && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                        <VisualSettings rendererHandler={rendererRef} />
+                    <div style={{ marginTop: "0em", borderTop: "none" }} className="m-4 p-4 border border-gray-200 dark:border-gray-700">
+                        <VisualSettings rendererHandler={rendererRef} darkModePreference={dark} />
                         <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
                             <div className="md:col-span-3 xl:col-span-1">
                                 <DatasetFields />
@@ -144,7 +151,8 @@ const App: React.FC<IGWProps> = (props) => {
                                 <div>
                                     <PosFields />
                                 </div>
-                                <NestContainer
+                                <div
+                                    className="m-0.5 p-1 border border-gray-200 dark:border-gray-700"
                                     style={{ minHeight: "600px", overflow: "auto" }}
                                     onMouseLeave={() => {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
@@ -153,12 +161,12 @@ const App: React.FC<IGWProps> = (props) => {
                                         vizEmbededMenu.show && commonStore.closeEmbededMenu();
                                     }}
                                 >
-                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} dark={dark} />}
                                     <InsightBoard />
                                     {vizEmbededMenu.show && (
                                         <ClickMenu x={vizEmbededMenu.position[0]} y={vizEmbededMenu.position[1]}>
                                             <div
-                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100"
+                                                className="flex items-center whitespace-nowrap py-1 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                                 onClick={() => {
                                                     commonStore.closeEmbededMenu();
                                                     commonStore.setShowInsightBoard(true);
@@ -171,19 +179,19 @@ const App: React.FC<IGWProps> = (props) => {
                                             </div>
                                         </ClickMenu>
                                     )}
-                                </NestContainer>
+                                </div>
                             </div>
                         </div>
-                    </Container>
+                    </div>
                 )}
                 {segmentKey === ISegmentKey.data && (
-                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                    <div className="m-4 p-4 border border-gray-200 dark:border-gray-700" style={{ marginTop: "0em", borderTop: "none" }}>
                         <DatasetConfig />
-                    </Container>
+                    </div>
                 )}
             </div>
         </div>
     );
-};
+});
 
-export default observer(App);
+export default App;

package/src/components/button/base.ts

@@ -4,4 +4,5 @@ export interface ButtonBaseProps {
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     text: string;
     disabled?: boolean;
+    className?: string;
 }

package/src/components/button/default.tsx

@@ -2,10 +2,14 @@ import React from "react";
 import { ButtonBaseProps } from "./base";
 
 const DefaultButton: React.FC<ButtonBaseProps> = (props) => {
-    const { text, onClick, disabled } = props;
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-flex items-center rounded border border-gray-300 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
     return (
         <button
-            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            className={btnClassName}
             onClick={onClick}
             disabled={disabled}
         >

package/src/components/button/defaultMini.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const DefaultMiniButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled } = props;
+    return (
+        <button
+            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm hover:bg-gray-800 hover:border-gray-800 hover:text-white disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default DefaultMiniButton;

package/src/components/button/primary.tsx

@@ -2,10 +2,14 @@ import React from "react";
 import { ButtonBaseProps } from "./base";
 
 const PrimaryButton: React.FC<ButtonBaseProps> = (props) => {
-    const { text, onClick, disabled } = props;
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-flex items-center rounded border border-transparent bg-indigo-600 px-2.5 py-1.5 text-xs font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
     return (
         <button
-            className="inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+            className={btnClassName}
             onClick={onClick}
             disabled={disabled}
         >

package/src/components/button/primaryMini.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { ButtonBaseProps } from "./base";
+
+const PrimaryMiniButton: React.FC<ButtonBaseProps> = (props) => {
+    const { text, onClick, disabled, className } = props;
+    let btnClassName = "inline-block min-w-96 text-xs ml-2 pt-1 pb-1 pl-6 pr-6 border border-gray-800 bg-gray-800 text-white rounded-sm hover:bg-white dark:bg-zinc-900  border-gray-800 hover:text-gray-800 cursor-pointer disabled:bg-gray-400 disabled:border-gray-400 disabled:text-white disabled:cursor-not-allowed disabled:text-white"
+    if (className) {
+        btnClassName = btnClassName + " " + className;
+    }
+    return (
+        <button
+            className={btnClassName}
+            onClick={onClick}
+            disabled={disabled}
+        >
+            {text}
+        </button>
+    );
+};
+
+export default PrimaryMiniButton;

package/src/components/callout.tsx

@@ -1,14 +1,17 @@
 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 { useCurrentMediaTheme } from "../utils/media";
 
 export interface CalloutProps {
     target: string;
     children: ReactNode;
+    darkModePreference?: IDarkMode;
 }
 
-const Bubble = styled.div`
+const Bubble = styled.div<{ dark: boolean }>`
     border-radius: 1px;
     transform: translate(-50%, 0);
     filter: drop-shadow(0 1.6px 1px rgba(0, 0, 0, 0.24)) drop-shadow(0 -1px 0.8px rgba(0, 0, 0, 0.19));
@@ -25,12 +28,12 @@ const Bubble = styled.div`
         width: 8px;
         height: 8px;
         transform: translate(-50%, -50%) rotate(45deg);
-        background-color: #fff;
+        background-color: ${({ dark }) => dark ? "#000" : "#fff"};
         border-radius: 1px;
     }
 `;
 
-const Callout = memo<CalloutProps>(function Callout({ target, children }) {
+const Callout = memo<CalloutProps>(function Callout({ target, children, darkModePreference = 'media' }) {
     const shadowDomMeta = useContext(ShadowDomContext);
     const { root } = shadowDomMeta;
     const [pos, setPos] = useState<[number, number] | null>(null);
@@ -45,11 +48,13 @@ const Callout = memo<CalloutProps>(function Callout({ target, children }) {
         }
     }, [target, root]);
 
+    const darkMode = useCurrentMediaTheme(darkModePreference);
+
     return (
         root &&
         pos &&
         createPortal(
-            <Bubble role="dialog" className="fixed bg-white z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            <Bubble role="dialog" dark={darkMode === 'dark'} className="fixed bg-white dark:bg-zinc-900  z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
                 {children}
             </Bubble>,
             root

package/src/components/clickMenu.tsx

@@ -3,13 +3,9 @@ import styled from "styled-components";
 
 const MenuContainer = styled.div`
     min-width: 100px;
-    background-color: #fff;
-    border: 1px solid #f0f0f0;
     position: absolute;
     z-index: 99;
     cursor: pointer;
-    /* box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.09); */
-    /* border-radius: 2px; */
     padding: 4px;
 `;
 interface ClickMenuProps {
@@ -20,7 +16,7 @@ interface ClickMenuProps {
 const ClickMenu: React.FC<ClickMenuProps> = (props) => {
     const { x, y, children } = props;
     return (
-        <MenuContainer className="shadow-lg text-sm" style={{ left: x + "px", top: y + "px" }}>
+        <MenuContainer className="shadow-lg text-sm bg-white border border-gray-100 dark:bg-black dark:border-gray-700" style={{ left: x + "px", top: y + "px" }}>
             {children}
         </MenuContainer>
     );