@kanaries/graphic-walker 0.2.15 → 0.2.16

package/src/vis/spec/view.ts

@@ -0,0 +1,138 @@
+import { ISemanticType } from 'visual-insights';
+import { IStackMode, IViewField } from '../../interfaces';
+import { autoMark } from './mark';
+import { NULL_FIELD } from './field';
+import { channelAggregate } from './aggregate';
+import { IEncodeProps, channelEncode } from './encode';
+import { channelStack } from './stack'
+
+const BRUSH_SIGNAL_NAME = '__gw_brush__';
+const POINT_SIGNAL_NAME = '__gw_point__';
+export interface SingleViewProps extends IEncodeProps {
+    
+    defaultAggregated: boolean;
+    stack: IStackMode;
+    enableCrossFilter: boolean;
+    asCrossFilterTrigger: boolean;
+    selectEncoding: 'default' | 'none';
+    brushEncoding: 'x' | 'y' | 'default' | 'none';
+    hideLegend?: boolean;
+}
+export function getSingleView(props: SingleViewProps) {
+    const {
+        x,
+        y,
+        color,
+        opacity,
+        size,
+        shape,
+        theta,
+        radius,
+        row,
+        column,
+        xOffset,
+        yOffset,
+        defaultAggregated,
+        stack,
+        geomType,
+        selectEncoding,
+        brushEncoding,
+        enableCrossFilter,
+        asCrossFilterTrigger,
+        hideLegend = false,
+    } = props;
+    const fields: IViewField[] = [x, y, color, opacity, size, shape, row, column, xOffset, yOffset, theta, radius];
+    let markType = geomType;
+    let config: any = {};
+    if (hideLegend) {
+        config.legend = {
+            disable: true,
+        };
+    }
+    if (geomType === 'auto') {
+        const types: ISemanticType[] = [];
+        if (x !== NULL_FIELD) types.push(x.semanticType); //types.push(getFieldType(x));
+        if (y !== NULL_FIELD) types.push(y.semanticType); //types.push(getFieldType(yField));
+        markType = autoMark(types);
+    }
+
+    let encoding = channelEncode({
+        geomType: markType,
+        x,
+        y,
+        color,
+        opacity,
+        size,
+        shape,
+        row,
+        column,
+        xOffset,
+        yOffset,
+        theta,
+        radius,
+    });
+    if (defaultAggregated) {
+        channelAggregate(encoding, fields);
+    }
+    channelStack(encoding, stack);
+    if (!enableCrossFilter || (brushEncoding === 'none' && selectEncoding === 'none')) {
+        return {
+            config,
+            mark: {
+                type: markType,
+                opacity: 0.96,
+                tooltip: true,
+            },
+            encoding,
+        };
+    }
+    const mark = {
+        type: markType,
+        opacity: 0.96,
+        tooltip: true,
+    };
+
+    if (brushEncoding !== 'none') {
+        return {
+            config,
+            transform: asCrossFilterTrigger ? [] : [{ filter: { param: BRUSH_SIGNAL_NAME } }],
+            params: [
+                // {
+                //   name: BRUSH_SIGNAL_DISPLAY_NAME,
+                //   select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+                //   on: '__YOU_CANNOT_MODIFY_THIS_SIGNAL__',
+                // },
+                {
+                    name: BRUSH_SIGNAL_NAME,
+                    select: { type: 'interval', encodings: brushEncoding === 'default' ? undefined : [brushEncoding] },
+                },
+            ],
+            mark,
+            encoding,
+        };
+    }
+
+    return {
+        config,
+        transform: asCrossFilterTrigger ? [] : [{ filter: { param: POINT_SIGNAL_NAME } }],
+        params: [
+            {
+                name: POINT_SIGNAL_NAME,
+                select: { type: 'point' },
+            },
+        ],
+        mark,
+        encoding: asCrossFilterTrigger
+            ? {
+                  ...encoding,
+                  color: {
+                      condition: {
+                          ...encoding.color,
+                          param: POINT_SIGNAL_NAME,
+                      },
+                      value: '#888',
+                  },
+              }
+            : encoding,
+    };
+}

package/src/vis/theme.ts

@@ -56,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",

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';
@@ -66,7 +67,7 @@ interface IVisualSettings {
 }
 
 const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePreference }) => {
-    const { vizStore } = useGlobalStore();
+    const { vizStore, commonStore } = useGlobalStore();
     const { visualConfig, canUndo, canRedo } = vizStore;
     const { t: tGlobal } = useTranslation();
     const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
@@ -335,6 +336,14 @@ const VisualSettings: React.FC<IVisualSettings> = ({ rendererHandler, darkModePr
                     </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, dark]);
 

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/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/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);