@kanaries/graphic-walker 0.2.14 → 0.2.16

package/src/vis/theme.ts

@@ -1,22 +1,30 @@
 const DEFAULT_COLOR = "#5B8FF9";
-
+const DARK_COMMON_DESIGN = {
+    background: "transparent",
+    header: {
+        titleColor: "#d1d5db", // change title color to white
+        labelColor: "#d1d5db", // change label color to white
+    },
+    axis: {
+        gridColor: "#666",
+        domainColor: "#d1d5db", // change axis color to white
+        tickColor: "#d1d5db", // change tick color to white
+        labelColor: "#d1d5db", // change label color to white
+        titleColor: "#d1d5db", // change title color to white
+    },
+    legend: {
+        labelColor: "#d1d5db", // change legend label color to white
+        titleColor: "#d1d5db" // change legend title color to white
+    },
+    view: {
+        stroke: '#666'
+    }
+}
 export const VegaTheme = {
     light: {
         background: "transparent",
     },
-    dark: {
-        background: "transparent",
-        axis: {
-            gridColor: "#666",
-            domainColor: "#d1d5db", // change axis color to white
-            tickColor: "#d1d5db", // change tick color to white
-            labelColor: "#d1d5db", // change label color to white
-        },
-        legend: {
-            labelColor: "#d1d5db", // change legend label color to white
-            titleColor: "#d1d5db" // change legend title color to white
-        },
-    },
+    dark: DARK_COMMON_DESIGN
 } as const;
 
 export const AntVTheme = {
@@ -48,6 +56,18 @@ export const AntVTheme = {
             ],
             diverging: ["#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"],
             heatmap: ["#000000", "#7b3294", "#c2a5cf", "#f7f7f7", "#a6dba0", "#008837"],
+            // ordinal: [
+            //     '#B8E1FF',
+            //     // '#9AC5FF',
+            //     // '#7DAAFF',
+            //     // '#5B8FF9',
+            //     // '#3D76DD',
+            //     // '#085EC0',
+            //     // '#0047A5',
+            //     // '#00318A',
+            //     '#001D70'
+            // ],
+            // ordinal: 'blues',
             ramp: [
                 "#EBCCFF",
                 "#CCB0FF",
@@ -65,6 +85,7 @@ export const AntVTheme = {
         },
     },
     dark: {
+        ...DARK_COMMON_DESIGN,
         area: { fill: DEFAULT_COLOR },
         bar: { fill: DEFAULT_COLOR },
         circle: { fill: DEFAULT_COLOR },
@@ -76,17 +97,6 @@ export const AntVTheme = {
         errorbar: { stroke: DEFAULT_COLOR },
         errorband: { fill: DEFAULT_COLOR },
         arc: { fill: DEFAULT_COLOR },
-        background: "transparent", // change background color to dark gray
-        axis: {
-            gridColor: "#666",
-            domainColor: "#d1d5db", // change axis color to white
-            tickColor: "#d1d5db", // change tick color to white
-            labelColor: "#d1d5db", // change label color to white
-        },
-        legend: {
-            labelColor: "#d1d5db", // change legend label color to white
-            titleColor: "#d1d5db" // change legend title color to white
-        },
         range: {
             category: [
                 "#5B8FF9",

package/src/visualSettings/index.tsx

@@ -21,6 +21,7 @@ import {
     ChevronDoubleUpIcon,
     ArrowsUpDownIcon,
     LightBulbIcon,
+    CodeBracketSquareIcon,
 } from '@heroicons/react/24/outline';
 import { observer } from 'mobx-react-lite';
 import React, { SVGProps, useCallback, useMemo } from 'react';
@@ -29,38 +30,14 @@ import { useTranslation } from 'react-i18next';
 import { ResizeDialog } from '../components/sizeSetting';
 import { GEMO_TYPES, STACK_MODE, CHART_LAYOUT_TYPE } from '../config';
 import { useGlobalStore } from '../store';
-import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS } from '../interfaces';
+import { IStackMode, EXPLORATION_TYPES, IBrushDirection, BRUSH_DIRECTIONS, IDarkMode } from '../interfaces';
 import { IReactVegaHandler } from '../vis/react-vega';
 import Toolbar, { ToolbarItemProps } from '../components/toolbar';
 import { ButtonWithShortcut } from './menubar';
+import { useCurrentMediaTheme } from '../utils/media';
 import throttle from '../utils/throttle';
 
 
-export const LiteContainer = styled.div`
-    margin: 0.2em;
-    border: 1px solid #e5e7eb;
-    padding: 1em;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
-    .menu-root {
-        position: relative;
-        & > *:not(.trigger) {
-            display: flex;
-            flex-direction: column;
-            position: absolute;
-            right: 0;
-            top: 100%;
-            border: 1px solid #8884;
-        }
-        &:not(:hover) > *:not(.trigger):not(:hover) {
-            display: none;
-        }
-    }
-`;
-
 const Invisible = styled.div`
     clip: rect(1px, 1px, 1px, 1px);
     clip-path: inset(50%);
@@ -79,17 +56,18 @@ const FormContainer = styled.div`
     display: flex;
     flex-direction: column;
     color: #444;
-    @media (prefers-color-scheme: dark) {
+    .dark {
         color: #aaa;
     }
 `;
 
 interface IVisualSettings {
+    darkModePreference: IDarkMode;
     rendererHandler?: React.RefObject<IReactVegaHandler>;
 }
 
-const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
-    const { vizStore } = useGlobalStore();
+const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference }) => {
+    const { vizStore, commonStore } = useGlobalStore();
     const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
@@ -107,6 +85,8 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
         rendererHandler?.current?.downloadSVG();
     }, 200), [rendererHandler]);
 
+    const dark = useCurrentMediaTheme(darkModePreference) === 'dark';
+
     const items = useMemo<ToolbarItemProps[]>(() => {
         return [
             {
@@ -338,16 +318,16 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                 label: t('button.export_chart'),
                 icon: PhotoIcon,
                 form: (
-                    <FormContainer>
+                    <FormContainer className={dark ? 'dark' : ''}>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+                            className={`text-xs pt-1 pb-1 pl-6 pr-6 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             aria-label={t('button.export_chart_as', { type: 'png' })}
                             onClick={() => downloadPNG()}
                         >
                             {t('button.export_chart_as', { type: 'png' })}
                         </button>
                         <button
-                            className="text-xs pt-1 pb-1 pl-6 pr-6 bg-white dark:bg-zinc-900  hover:bg-gray-200 text-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+                            className={`text-xs pt-1 pb-1 pl-6 pr-6 ${dark ? 'dark bg-zinc-900 text-gray-100 hover:bg-gray-700' : 'bg-white hover:bg-gray-200 text-gray-800'}`}
                             aria-label={t('button.export_chart_as', { type: 'svg' })}
                             onClick={() => downloadSVG()}
                         >
@@ -356,11 +336,20 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler }) => {
                     </FormContainer>
                 ),
             },
+            {
+                key: 'export_code',
+                label: t('button.export_code'),
+                icon: CodeBracketSquareIcon,
+                onClick: () => {
+                    commonStore.setShowCodeExportPanel(true);
+                }
+            }
         ] as ToolbarItemProps[];
-    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG]);
+    }, [vizStore, canUndo, canRedo, defaultAggregated, markType, stack, interactiveScale, sizeMode, width, height, explorationMode, brushDirection, showActions, downloadPNG, downloadSVG, dark]);
 
     return <div style={{ margin: '0.38em 0.28em 0.2em 0.18em' }}>
         <Toolbar
+            darkModePreference={darkModePreference}
             items={items}
             styles={{
                 root: {

package/src/workers/transform.ts

@@ -0,0 +1,12 @@
+import { IField, IRow } from "../interfaces";
+import { dataframe2Dataset, dataset2DataFrame, execExpression } from "../lib/execExp";
+
+export function transformData(data: IRow[], columns: IField[]) {
+    const computedFields = columns.filter((f) => f.computed);
+    let df = dataset2DataFrame(data, columns);
+    for (let i = 0; i < computedFields.length; i++) {
+        const field = computedFields[i];
+        df = execExpression(field.expressoion!, df, columns);
+    }
+    return dataframe2Dataset(df, columns);
+}

package/src/workers/transform.worker.js

@@ -0,0 +1,13 @@
+import { transformData } from './transform'
+const main = e => {
+    const { dataSource, columns } = e.data;
+
+    try {
+        const ans = transformData(dataSource, columns);
+        self.postMessage(ans);
+    } catch (error) {
+        self.postMessage({ error: error.message });
+    }
+};
+
+self.addEventListener('message', main, false);

package/src/workers/viewQuery.worker.js

@@ -0,0 +1,16 @@
+import { queryView } from '../lib/viewQuery'
+const main = e => {
+    try {
+        const { dataSource, metas, query } = e.data;
+        const ans = queryView(dataSource, metas, query);
+        self.postMessage(ans);
+
+    } catch (err) {
+        // console.log(err.s)
+        // log err stack
+        console.error(err.stack);
+        self.postMessage(err.stack);
+    }
+};
+
+self.addEventListener('message', main, false);

package/dist/components/container.d.ts

@@ -1,2 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NestContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/dataSource/pannel.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-interface DSPanelProps {
-}
-declare const _default: React.FunctionComponent<DSPanelProps>;
-export default _default;

package/src/components/container.tsx

@@ -1,25 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-    border: 1px solid #e5e7eb;
-    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`
-    border: 1px solid #e5e7eb;
-    padding: 0.4em;
-    font-size: 12px;
-    margin: 0.2em;
-    background-color: #fff;
-    @media (prefers-color-scheme: dark) {
-        background-color: #000;
-        border: 1px solid #4b5563;
-    }
-`;

package/src/dataSource/pannel.tsx

@@ -1,71 +0,0 @@
-import React, { useRef, useCallback } from 'react';
-import { FileReader } from '@kanaries/web-data-loader';
-import { IRow } from '../interfaces';
-import Table from './table';
-import styled from 'styled-components';
-import { useGlobalStore } from '../store';
-import { observer } from 'mobx-react-lite';
-
-const Container = styled.div`
-    overflow-x: auto;
-`;
-
-interface DSPanelProps {
-}
-const DataSourcePanel: React.FC<DSPanelProps> = props => {
-    const fileRef = useRef<HTMLInputElement>(null);
-    const { commonStore } = useGlobalStore();
-    const { tmpDSName, tmpDataSource } = commonStore;
-
-    const onSubmitData = useCallback(() => {
-        commonStore.commitTempDS();
-    }, [])
-    return (
-        <Container>
-            <input
-                style={{ display: 'none' }}
-                type="file"
-                ref={fileRef}
-                onChange={(e) => {
-                    const files = e.target.files;
-                    if (files !== null) {
-                        const file = files[0];
-                        FileReader.csvReader({
-                            file,
-                            config: { type: 'reservoirSampling', size: Infinity },
-                            onLoading: () => {}
-                        }).then((data) => {
-                            commonStore.updateTempDS(data as IRow[]);
-                        });
-                    }
-                }}
-            />
-            <div className="mt-1 mb-1">
-                <button className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 border border-gray-500 rounded-sm cursor-pointer hover:bg-gray-200"
-                    onClick={() => { if (fileRef.current) { fileRef.current.click(); }}}
-                >
-                    上传数据
-                </button>
-                <button className="inline-block min-w-96 text-xs mr-2 pt-1 pb-1 pl-6 pr-6 bg-yellow-600 rounded-sm hover:bg-yellow-500 text-white font-bold disabled:bg-gray-300"
-                    disabled={tmpDataSource.length === 0}
-                    onClick={() => { onSubmitData(); }}
-                >
-                    确认
-                </button>
-            </div>
-            <div className="mt-1 mb-1">
-                <label className="block text-xs text-gray-800">数据集名称</label>
-                <input type="text" placeholder="数据集名称"
-                    value={tmpDSName}
-                    onChange={e => {
-                        commonStore.updateTempName(e.target.value)
-                    }}
-                    className="text-xs p-1 border border-gray-200 outline-none focus:outline-none focus:border-blue-500"
-                />
-            </div>
-            <Table />
-        </Container>
-    );
-}
-
-export default observer(DataSourcePanel);