@kanaries/graphic-walker 0.2.12 → 0.2.14

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 {
@@ -149,3 +150,7 @@ export interface IVisSpec {
     readonly encodings: DeepReadonly<DraggableFieldState>;
     readonly config: DeepReadonly<IVisualConfig>;
 }
+export declare enum ISegmentKey {
+    vis = "vis",
+    data = "data"
+}

package/dist/renderer/index.d.ts

@@ -1,4 +1,6 @@
 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>>>;
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
+    themeKey?: "vega" | "g2" | undefined;
+} & React.RefAttributes<IReactVegaHandler>, "key" | "themeKey"> & React.RefAttributes<IReactVegaHandler>>>;
 export default _default;

package/dist/segments/segmentNav.d.ts

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

package/dist/store/commonStore.d.ts

@@ -1,4 +1,4 @@
-import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow } from '../interfaces';
+import { DataSet, Filters, IDataSet, IDataSetInfo, IDataSource, IMutField, IRow, ISegmentKey } from '../interfaces';
 export declare class CommonStore {
     datasets: IDataSet[];
     dataSources: IDataSource[];
@@ -12,15 +12,21 @@ export declare class CommonStore {
         show: boolean;
         position: [number, number];
     };
+    showDataConfig: boolean;
     filters: Filters;
+    segmentKey: ISegmentKey;
     constructor();
     get currentDataset(): DataSet;
+    setSegmentKey(sk: ISegmentKey): void;
     setShowDSPanel(show: boolean): void;
+    setShowDataConfig(show: boolean): void;
     setShowInsightBoard(show: boolean): void;
     showEmbededMenu(position: [number, number]): void;
     closeEmbededMenu(): void;
     initTempDS(): void;
     updateTempFields(fields: IMutField[]): void;
+    updateCurrentDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
+    updateTempDatasetMetas(fid: string, diffMeta: Partial<IMutField>): void;
     updateTempFieldAnalyticType(fieldKey: string, analyticType: IMutField['analyticType']): void;
     updateTempFieldSemanticType(fieldKey: string, semanticType: IMutField['semanticType']): void;
     updateTempName(name: string): void;

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,2 @@
+export declare function currentMediaTheme(): "dark" | "light";
+export declare function useCurrentMediaTheme(): "dark" | "light";

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

@@ -27,6 +27,8 @@ interface ReactVegaProps {
     onGeomClick?: (values: any, e: any) => void;
     selectEncoding: SingleViewProps['selectEncoding'];
     brushEncoding: SingleViewProps['brushEncoding'];
+    /** @default "vega" */
+    themeKey?: 'vega' | 'g2';
 }
 interface SingleViewProps {
     x: IViewField;

package/dist/vis/theme.d.ts

@@ -0,0 +1,130 @@
+export declare const VegaTheme: {
+    readonly light: {
+        readonly background: "transparent";
+    };
+    readonly dark: {
+        readonly background: "transparent";
+        readonly axis: {
+            readonly gridColor: "#666";
+            readonly domainColor: "#d1d5db";
+            readonly tickColor: "#d1d5db";
+            readonly labelColor: "#d1d5db";
+        };
+        readonly legend: {
+            readonly labelColor: "#d1d5db";
+            readonly titleColor: "#d1d5db";
+        };
+    };
+};
+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 background: "transparent";
+        readonly axis: {
+            readonly gridColor: "#666";
+            readonly domainColor: "#d1d5db";
+            readonly tickColor: "#d1d5db";
+            readonly labelColor: "#d1d5db";
+        };
+        readonly legend: {
+            readonly labelColor: "#d1d5db";
+            readonly titleColor: "#d1d5db";
+        };
+        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"];
+            };
+        };
+    };
+};
+export declare const builtInThemes: {
+    [themeKey: string]: {
+        light: any;
+        dark: any;
+    };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "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,7 +4,7 @@ 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 } from "./interfaces";
+import { IMutField, IRow, ISegmentKey } from "./interfaces";
 import type { IReactVegaHandler } from "./vis/react-vega";
 import VisualSettings from "./visualSettings";
 import { Container, NestContainer } from "./components/container";
@@ -21,6 +21,8 @@ import VisNav from "./segments/visNav";
 import { mergeLocaleRes, setLocaleLanguage } from "./locales/i18n";
 import FilterField from "./fields/filterField";
 import { guardDataKeys } from "./utils/dataPrep";
+import SegmentNav from "./segments/segmentNav";
+import DatasetConfig from "./dataSource/datasetConfig";
 
 export interface IGWProps {
     dataSource?: IRow[];
@@ -34,14 +36,25 @@ export interface IGWProps {
      * auto parse field key into a safe string. default is true
      */
     fieldKeyGuard?: boolean;
+    /** @default "vega" */
+    themeKey?: 'vega' | 'g2';
 }
 
-const App: React.FC<IGWProps> = (props) => {
-    const { dataSource = [], rawFields = [], spec, i18nLang = "en-US", i18nResources, hideDataSourceConfig, fieldKeyGuard = true } = props;
+const App = observer<IGWProps>(function App (props) {
+    const {
+        dataSource = [],
+        rawFields = [],
+        spec,
+        i18nLang = "en-US",
+        i18nResources,
+        hideDataSourceConfig,
+        fieldKeyGuard = true,
+        themeKey = 'vega',
+    } = props;
     const { commonStore, vizStore } = useGlobalStore();
     const [insightReady, setInsightReady] = useState<boolean>(true);
 
-    const { currentDataset, datasets, vizEmbededMenu } = commonStore;
+    const { currentDataset, datasets, vizEmbededMenu, segmentKey } = commonStore;
 
     const { t, i18n } = useTranslation();
     const curLang = i18n.language;
@@ -107,58 +120,73 @@ const App: React.FC<IGWProps> = (props) => {
     const rendererRef = useRef<IReactVegaHandler>(null);
 
     return (
-        <div className="App">
+        <div className="App font-sans dark:bg-zinc-900 dark:text-white m-0 p-0">
             {/* <div className="grow-0">
                 <PageNav />
             </div> */}
             <div className="">
                 {!hideDataSourceConfig && <DataSourceSegment preWorkDone={insightReady} />}
                 <div className="px-2 mx-2">
-                    <VisNav />
+                    <SegmentNav />
+                    {
+                        segmentKey === ISegmentKey.vis && <VisNav />
+                    }
                 </div>
-                <Container style={{ marginTop: "0em", borderTop: "none" }}>
-                    <VisualSettings rendererHandler={rendererRef} />
-                    <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
-                        <div className="md:col-span-3 xl:col-span-1">
-                            <DatasetFields />
-                        </div>
-                        <div className="md:col-span-2 xl:col-span-1">
-                            <FilterField />
-                            <AestheticFields />
-                        </div>
-                        <div className="md:col-span-7 xl:col-span-4">
-                            <div>
-                                <PosFields />
+                {segmentKey === ISegmentKey.vis && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <VisualSettings rendererHandler={rendererRef} />
+                        <div className="md:grid md:grid-cols-12 xl:grid-cols-6">
+                            <div className="md:col-span-3 xl:col-span-1">
+                                <DatasetFields />
+                            </div>
+                            <div className="md:col-span-2 xl:col-span-1">
+                                <FilterField />
+                                <AestheticFields />
+                            </div>
+                            <div className="md:col-span-7 xl:col-span-4">
+                                <div>
+                                    <PosFields />
+                                </div>
+                                <NestContainer
+                                    style={{ minHeight: "600px", overflow: "auto" }}
+                                    onMouseLeave={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                    onClick={() => {
+                                        vizEmbededMenu.show && commonStore.closeEmbededMenu();
+                                    }}
+                                >
+                                    {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} themeKey={themeKey} />}
+                                    <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"
+                                                onClick={() => {
+                                                    commonStore.closeEmbededMenu();
+                                                    commonStore.setShowInsightBoard(true);
+                                                }}
+                                            >
+                                                <span className="flex-1 pr-2">
+                                                    {t("App.labels.data_interpretation")}
+                                                </span>
+                                                <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
+                                            </div>
+                                        </ClickMenu>
+                                    )}
+                                </NestContainer>
                             </div>
-                            <NestContainer
-                                style={{ minHeight: "600px", overflow: "auto" }}
-                                onMouseLeave={() => {
-                                    vizEmbededMenu.show && commonStore.closeEmbededMenu();
-                                }}
-                            >
-                                {datasets.length > 0 && <ReactiveRenderer ref={rendererRef} />}
-                                <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"
-                                            onClick={() => {
-                                                commonStore.closeEmbededMenu();
-                                                commonStore.setShowInsightBoard(true);
-                                            }}
-                                        >
-                                            <span className="flex-1 pr-2">{t("App.labels.data_interpretation")}</span>
-                                            <LightBulbIcon className="ml-1 w-3 flex-grow-0 flex-shrink-0" />
-                                        </div>
-                                    </ClickMenu>
-                                )}
-                            </NestContainer>
                         </div>
-                    </div>
-                </Container>
+                    </Container>
+                )}
+                {segmentKey === ISegmentKey.data && (
+                    <Container style={{ marginTop: "0em", borderTop: "none" }}>
+                        <DatasetConfig />
+                    </Container>
+                )}
             </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

@@ -27,6 +27,9 @@ const Bubble = styled.div`
         transform: translate(-50%, -50%) rotate(45deg);
         background-color: #fff;
         border-radius: 1px;
+        @media (prefers-color-scheme: dark) {
+            background-color: #000;
+        }
     }
 `;
 
@@ -49,7 +52,7 @@ const Callout = memo<CalloutProps>(function Callout({ target, children }) {
         root &&
         pos &&
         createPortal(
-            <Bubble role="dialog" className="fixed bg-white z-50" style={{ left: pos[0], top: pos[1] + 4 }}>
+            <Bubble role="dialog" 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

@@ -8,9 +8,11 @@ const MenuContainer = styled.div`
     position: absolute;
     z-index: 99;
     cursor: pointer;
-    /* box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.09); */
-    /* border-radius: 2px; */
     padding: 4px;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;
 interface ClickMenuProps {
     x: number;

package/src/components/container.tsx

@@ -5,6 +5,11 @@ export const Container = styled.div`
     padding: 1em;
     margin: 1em;
     background-color: #fff;
+    // dark theme
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;
 
 export const NestContainer = styled.div`
@@ -13,4 +18,8 @@ export const NestContainer = styled.div`
     font-size: 12px;
     margin: 0.2em;
     background-color: #fff;
+    @media (prefers-color-scheme: dark) {
+        background-color: #000;
+        border: 1px solid #4b5563;
+    }
 `;