@kanaries/graphic-walker 0.2.15 → 0.2.17

package/src/vis/spec/view.ts

@@ -0,0 +1,136 @@
+import { ISemanticType, 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';
+import { addTooltipEncode } from './tooltip';
+
+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,
+        details,
+        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,
+        details
+    });
+    addTooltipEncode(encoding, details)
+    if (defaultAggregated) {
+        channelAggregate(encoding, fields);
+    }
+    channelStack(encoding, stack);
+    const mark = {
+        type: markType,
+        opacity: 0.96,
+        tooltip: { content: 'data' }
+    };
+    if (!enableCrossFilter || (brushEncoding === 'none' && selectEncoding === 'none')) {
+        return {
+            config,
+            mark,
+            encoding,
+        };
+    }
+
+    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);