@kanaries/graphic-walker 0.2.15 → 0.2.16

package/src/lib/execExp.ts

@@ -0,0 +1,147 @@
+import { IExpParamter, IExpression, IField, IRow } from "../interfaces";
+
+interface IDataFrame {
+    [key: string]: any[];
+}
+
+export function execExpression (exp: IExpression, dataFrame: IDataFrame, columns: IField[]): IDataFrame {
+    const { op, params } = exp;
+    const subFrame: IDataFrame = { ...dataFrame };
+    const len = dataFrame[Object.keys(dataFrame)[0]].length;
+    for (let param of params) {
+        switch (param.type) {
+            case 'field':
+                subFrame[param.value] = dataFrame[param.value];
+                break;
+            case 'constant':
+                subFrame[param.value] = new Array(len).fill(param.value);
+                break;
+            case 'expression':
+                let f = execExpression(param.value, dataFrame, columns);
+                Object.keys(f).forEach(key => {
+                    subFrame[key] = f[key];
+                })
+                break;
+            case 'value':
+            default:
+                break;
+        }
+    }
+    switch (op) {
+        case 'one':
+            return one(exp.as, params, subFrame);
+        case 'bin':
+            return bin(exp.as, params, subFrame);
+        case 'log2':
+            return log2(exp.as, params, subFrame);
+        case 'log10':
+            return log10(exp.as, params, subFrame);
+        case 'binCount':
+            return binCount(exp.as, params, subFrame);
+        default:
+            return subFrame;
+    }
+}
+
+function bin(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey] as number[];
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < fieldValues.length; i++) {
+        let val = fieldValues[i];
+        if (val > _max) _max = val;
+        if (val < _min) _min = val;
+    }
+    const step = (_max - _min) / binSize;
+    const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
+    const newValues = fieldValues.map((v: number) => {
+        let bIndex = Math.floor((v - _min) / step);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return Number(((bIndex * step + _min)).toFixed(beaStep))
+    });
+    return {
+        ...data,
+        [resKey]: newValues,
+    }
+}
+
+function binCount(resKey: string, params: IExpParamter[], data: IDataFrame, binSize: number | undefined = 10): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey] as number[];
+
+    const valueWithIndices: {val: number; index: number; orderIndex: number }[] = fieldValues.map((v, i) => ({
+        val: v,
+        index: i
+    })).sort((a, b) => a.val - b.val)
+        .map((item, i) => ({
+            val: item.val,
+            index: item.index,
+            orderIndex: i
+        }))
+
+    const groupSize = valueWithIndices.length / binSize;
+
+    const newValues = valueWithIndices.map(item => {
+        let bIndex = Math.floor(item.orderIndex / groupSize);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return bIndex + 1
+    })
+    return {
+        ...data,
+        [resKey]: newValues,
+    }
+}
+
+function log2(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    const { value } = params[0];
+    const field = data[value];
+    const newField = field.map((v: number) => Math.log2(v));
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+function log10(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    const { value: fieldKey } = params[0];
+    const fieldValues = data[fieldKey];
+    const newField = fieldValues.map((v: number) => Math.log10(v));
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+function one(resKey: string, params: IExpParamter[], data: IDataFrame): IDataFrame {
+    // const { value: fieldKey } = params[0];
+    if (Object.keys(data).length === 0) return data;
+    const len = data[Object.keys(data)[0]].length;
+    const newField = new Array(len).fill(1);
+    return {
+        ...data,
+        [resKey]: newField,
+    }
+}
+
+export function dataset2DataFrame(dataset: IRow[], columns: IField[]): IDataFrame {
+    const dataFrame: IDataFrame = {};
+    columns.forEach((col) => {
+        dataFrame[col.fid] = dataset.map((row) => row[col.fid]);
+    });
+    return dataFrame;
+}
+
+export function dataframe2Dataset(dataFrame: IDataFrame, columns: IField[]): IRow[] {
+    if (columns.length === 0) return [];
+    const dataset: IRow[] = [];
+    const len = dataFrame[Object.keys(dataFrame)[0]].length;
+    for (let i = 0; i < len; i++) {
+        const row: IRow = {};
+        columns.forEach((col) => {
+            row[col.fid] = dataFrame[col.fid][i];
+        });
+        dataset.push(row);
+    }
+    return dataset;
+}

package/src/lib/interfaces.ts

@@ -0,0 +1,39 @@
+export interface IAggQuery {
+    op: 'aggregate';
+    groupBy: string[];
+    agg: {
+        [field: string]:
+            | 'sum'
+            | 'count'
+            | 'max'
+            | 'min'
+            | 'mean'
+            | 'median'
+            | 'variance'
+            | 'stdev';
+    };
+}
+
+// interface IFilterQuery {
+//     op: 'filter';
+//     filter: string;
+// }
+
+export interface IFoldQuery {
+    op: 'fold';
+    foldBy: string[];
+    newFoldKeyCol: string;
+    newFoldValueCol: string;
+}
+
+export interface IBinQuery {
+    op: 'bin';
+    binBy: string;
+    newBinCol: string;
+    binSize: number;
+}
+
+
+export interface IRawQuery {
+    op: 'raw';
+}

package/src/lib/op/aggregate.ts

@@ -0,0 +1,49 @@
+import { IRow } from "visual-insights";
+import { IAggQuery } from "../interfaces";
+import { sum, mean, median, stdev, variance, max, min, count } from "./stat";
+
+const aggregatorMap = {
+    sum,
+    mean,
+    median,
+    stdev,
+    variance,
+    max,
+    min,
+    count,
+};
+
+const KEY_JOINER = '___';
+
+export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
+    const { groupBy, agg } = query;
+    const ans: Map<string, IRow> = new Map();
+    const groups: Map<string, IRow[]> = new Map();
+    for (let row of data) {
+        const gk = groupBy.map((k) => row[k]).join(KEY_JOINER);
+
+        if (!groups.has(gk)) {
+            groups.set(gk, []);
+        }
+        groups.get(gk)?.push(row);
+    }
+    for (let [gk, subGroup] of groups) {
+        if (subGroup.length === 0) {
+            continue;
+        }
+        let aggRow: IRow = {};
+        for (let k of groupBy) {
+            aggRow[k] = subGroup[0][k];
+        }
+        for (let meaKey in agg) {
+            if (aggRow[meaKey] === undefined) {
+                aggRow[meaKey] = 0;
+            }
+            const values: number[] = subGroup.map((r) => r[meaKey]) ?? [];
+            const aggregator = aggregatorMap[agg[meaKey]] ?? sum;
+            aggRow[meaKey] = aggregator(values);
+        }
+        ans.set(gk, aggRow);
+    }
+    return Array.from(ans.values());
+}

package/src/lib/op/bin.ts

@@ -0,0 +1,25 @@
+import { IRow } from "visual-insights";
+import { IBinQuery } from "../interfaces";
+
+export function bin (dataSource: IRow[], query: IBinQuery): IRow[] {
+    const { binBy, newBinCol, binSize } = query;
+    let _min = Infinity;
+    let _max = -Infinity;
+    for (let i = 0; i < dataSource.length; i++) {
+        let val = dataSource[i][binBy];
+        if (val > _max) _max = val;
+        if (val < _min) _min = val;
+    }
+    const step = (_max - _min) / binSize;
+    // const beaStep = Math.max(-Math.round(Math.log10(_max - _min)) + 2, 0)
+    return dataSource.map((r) => {
+        let bIndex = Math.floor((r[binBy] - _min) / step);
+        if (bIndex === binSize) bIndex = binSize - 1;
+        return {
+            ...r,
+            [newBinCol]: [bIndex * step + _min, (bIndex + 1) * step + _min],
+            
+            // [binFid]: Number(((bIndex * step + _min)).toFixed(beaStep)),
+        };
+    });
+}

package/src/lib/op/fold.ts

@@ -0,0 +1,17 @@
+import { IRow } from "visual-insights";
+import { IFoldQuery } from "../interfaces";
+
+export function fold (data: IRow[], query: IFoldQuery): IRow[] {
+    const { foldBy, newFoldKeyCol, newFoldValueCol } = query;
+    const ans: IRow[] = [];
+    for (let row of data) {
+        for (let k of foldBy) {
+            const newRow = { ...row };
+            newRow[newFoldKeyCol] = k;
+            newRow[newFoldValueCol] = row[k];
+            delete newRow[k];
+            ans.push(newRow);
+        }
+    }
+    return ans;
+}

package/src/lib/op/stat.ts

@@ -0,0 +1,46 @@
+export function mean(nums: number[]): number {
+    return nums.reduce((a, b) => a + b, 0) / nums.length;
+}
+
+export function sum(nums: number[]): number {
+    return nums.reduce((a, b) => a + b, 0);
+}
+
+export function median(nums: number[]): number {
+    const sorted = nums.sort((a, b) => a - b);
+    const mid = Math.floor(sorted.length / 2);
+    return sorted.length % 2 === 0 ? (sorted[mid] + sorted[mid - 1]) / 2 : sorted[mid];
+}
+
+export function variance(nums: number[]): number {
+    const m = mean(nums);
+    return mean(nums.map((x) => (x - m) ** 2));
+}
+
+export function stdev(nums: number[]): number {
+    return Math.sqrt(variance(nums));
+}
+
+export function max(nums: number[]): number {
+    let ans = -Infinity;
+    for (let n of nums) {
+        if (n > ans) {
+            ans = n;
+        }
+    }
+    return ans;
+}
+
+export function min(nums: number[]): number {
+    let ans = Infinity;
+    for (let n of nums) {
+        if (n < ans) {
+            ans = n;
+        }
+    }
+    return ans;
+}
+
+export function count(nums: number[]): number {
+    return nums.length;
+}

package/src/lib/viewQuery.ts

@@ -0,0 +1,23 @@
+import { IRow } from "visual-insights";
+import { IMutField } from "../interfaces";
+import { aggregate } from "./op/aggregate";
+import { fold } from "./op/fold";
+import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";
+import { bin } from "./op/bin";
+
+export type IViewQuery = IAggQuery | IFoldQuery | IBinQuery | IRawQuery;
+
+export function queryView (rawData: IRow[], metas: IMutField[], query: IViewQuery) {
+    switch (query.op) {
+        case 'aggregate':
+            return aggregate(rawData, query);
+        case 'fold':
+            return fold(rawData, query);
+        case 'bin':
+            return bin(rawData, query);
+        case 'raw':
+        default:
+            return rawData;
+    }
+
+}

package/src/locales/en-US.json

@@ -117,7 +117,8 @@
     "main": {
         "tablist": {
             "new": "+ New",
-            "autoTitle": "Chart {{idx}}"
+            "auto_title": "Chart {{idx}}",
+            "chart_name": "Chart Name"
         },
         "tabpanel": {
             "menubar": {
@@ -190,6 +191,7 @@
         "prev": "Previous",
         "next": "Next",
         "drop_field": "Drop Field Here",
-        "confirm": "Confirm"
+        "confirm": "Confirm",
+        "cancel": "Cancel"
     }
 }

package/src/locales/i18n.ts

@@ -6,7 +6,6 @@ import localeEnUs from './en-US.json';
 import localeJaJp from './ja-JP.json';
 import localeZhCn from './zh-CN.json';
 
-
 const locales: Resource & { 'en-US': any } = {
     'en': {
         translation: localeEnUs,

package/src/locales/ja-JP.json

@@ -117,7 +117,8 @@
     "main": {
       "tablist": {
         "new": "+ 新規作成",
-        "autoTitle": "グラフ {{idx}}"
+        "auto_title": "グラフ {{idx}}",
+        "chart_name": "グラフ名"
       },
       "tabpanel": {
         "menubar": {
@@ -190,6 +191,7 @@
       "prev": "前へ",
       "next": "次へ",
       "drop_field": "ここにフィールドをドロップ",
-      "confirm": "確認"
+      "confirm": "確認",
+      "cancel": "キャンセル"
     }
   }

package/src/locales/zh-CN.json

@@ -117,7 +117,8 @@
     "main": {
         "tablist": {
             "new": "+ 新建",
-            "autoTitle": "图表 {{idx}}"
+            "auto_title": "图表 {{idx}}",
+            "chart_name": "图表名称"
         },
         "tabpanel": {
             "menubar": {
@@ -190,6 +191,7 @@
         "prev": "向前",
         "next": "向后",
         "drop_field": "拖拽字段至此",
-        "confirm": "确认"
+        "confirm": "确认",
+        "cencel": "取消"
     }
 }

package/src/main.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom";
 import { GraphicWalker } from "./index";
 

package/src/models/visSpecHistory.ts

@@ -27,6 +27,14 @@ export class VisSpecWithHistory {
 
     private batchFlag = false;
 
+    public updateLatest(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>) {
+        this.snapshots[this.cursor] = {
+            ...this.snapshots[this.cursor],
+            ...snapshot,
+        }
+    }
+
+
     private commit(snapshot: Partial<Readonly<VisSpecWithHistory['snapshots'][0]>>): void {
         if (this.batchFlag) {
             // batch this commit
@@ -120,6 +128,12 @@ export class VisSpecWithHistory {
         });
     }
 
+    public clone () {
+        const nextVSWH = new VisSpecWithHistory(this.frame);
+        nextVSWH.cursor = this.cursor;
+        return nextVSWH;
+    }
+
     public exportGW (): IVisSpec {
         return {
             ...this.frame

package/src/renderer/index.tsx

@@ -1,138 +1,70 @@
-import { runInAction, toJS } from "mobx";
-import { observer } from "mobx-react-lite";
-import { Resizable } from "re-resizable";
-import React, { useState, useCallback, useEffect, useRef, forwardRef } from "react";
-import { applyFilter } from "../services";
-import { useGlobalStore } from "../store";
-import ReactVega, { IReactVegaHandler } from "../vis/react-vega";
-import { IDarkMode, IThemeKey } from "../interfaces";
+import { observer } from 'mobx-react-lite';
+import React, { useState, useEffect, forwardRef } from 'react';
+import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import { DeepReadonly, DraggableFieldState, IDarkMode, IRow, IThemeKey, IVisualConfig } from '../interfaces';
+import SpecRenderer from './specRenderer';
+import { toJS } from 'mobx';
+import { useGlobalStore } from '../store';
+import { IReactVegaHandler } from '../vis/react-vega';
+import { unstable_batchedUpdates } from 'react-dom';
+import { initEncoding, initVisualConfig } from '../store/visualSpecStore';
 
-const ReactiveRenderer = forwardRef<IReactVegaHandler, { themeKey?: IThemeKey; dark?: IDarkMode }>(function ReactiveRenderer(
-    { themeKey, dark },
-    ref
-) {
+interface RendererProps {
+    themeKey?: IThemeKey;
+    dark?: IDarkMode;
+}
+const Renderer = forwardRef<IReactVegaHandler, RendererProps>(function (props, ref) {
+    const { themeKey, dark } = props;
+    const [waiting, setWaiting] = useState<boolean>(false);
     const { vizStore, commonStore } = useGlobalStore();
-    const { draggableFieldState, visualConfig } = vizStore;
-    const { geoms, interactiveScale, defaultAggregated, stack, showActions, size, exploration } = visualConfig;
+    const { allFields, viewFilters, viewDimensions, viewMeasures } = vizStore;
     const { currentDataset } = commonStore;
-    const { filters } = draggableFieldState;
-
-    const rows = toJS(draggableFieldState.rows);
-    const columns = toJS(draggableFieldState.columns);
-    const color = toJS(draggableFieldState.color);
-    const opacity = toJS(draggableFieldState.opacity);
-    const shape = toJS(draggableFieldState.shape);
-    const theta = toJS(draggableFieldState.theta);
-    const radius = toJS(draggableFieldState.radius);
-    const sizeChannel = toJS(draggableFieldState.size);
-
-    const rowLeftFacetFields = rows.slice(0, -1).filter((f) => f.analyticType === "dimension");
-    const colLeftFacetFields = columns.slice(0, -1).filter((f) => f.analyticType === "dimension");
-
-    const hasFacet = rowLeftFacetFields.length > 0 || colLeftFacetFields.length > 0;
-
-    const shouldTriggerMenu = exploration.mode === "none";
-
-    const handleGeomClick = useCallback(
-        (values: any, e: any) => {
-            if (shouldTriggerMenu) {
-                e.stopPropagation();
-                runInAction(() => {
-                    commonStore.showEmbededMenu([e.pageX, e.pageY]);
-                    commonStore.setFilters(values);
-                });
-            }
-        },
-        [shouldTriggerMenu]
-    );
-
-    // apply filters
     const { dataSource } = currentDataset;
+    const [viewConfig, setViewConfig] = useState<IVisualConfig>(initVisualConfig);
+    const [encodings, setEncodings] = useState<DeepReadonly<DraggableFieldState>>(initEncoding);
 
-    const [data, setData] = useState(dataSource);
-    const pendingPromiseRef = useRef<Promise<typeof data> | null>(null);
+    const [viewData, setViewData] = useState<IRow[]>([]);
 
     useEffect(() => {
-        setData(dataSource);
-    }, [dataSource]);
-
-    useEffect(() => {
-        const p = filters.length === 0 ? Promise.resolve(dataSource) : applyFilter(dataSource, filters);
-        pendingPromiseRef.current = p;
-
-        p.then((d) => {
-            if (p !== pendingPromiseRef.current) {
-                // This promise is out-of-date
-                return;
-            }
-
-            setData(d);
-        }).catch((err) => {
-            console.error(err);
-        });
+        setWaiting(true);
+        applyFilter(dataSource, viewFilters)
+            .then((data) => transformDataService(data, allFields))
+            .then((d) => {
+                // setViewData(d);
+                const dims = viewDimensions;
+                const meas = viewMeasures;
+                const config = toJS(vizStore.visualConfig);
+                return applyViewQuery(d, dims.concat(meas), {
+                    op: config.defaultAggregated ? 'aggregate' : 'raw',
+                    groupBy: dims.map((f) => f.fid),
+                    agg: Object.fromEntries(meas.map((f) => [f.fid, f.aggName as any])),
+                });
+            })
+            .then((data) => {
+                unstable_batchedUpdates(() => {
+                    setViewData(data);
+                    setWaiting(false);
+                    setEncodings(toJS(vizStore.draggableFieldState));
+                    setViewConfig(toJS(vizStore.visualConfig));
+                });
+            })
+            .catch((err) => {
+                console.error(err);
+                setWaiting(false);
+            });
+    }, [dataSource, viewFilters, allFields, viewDimensions, viewMeasures]);
 
-        return () => {
-            pendingPromiseRef.current = null;
-        };
-    }, [dataSource, filters]);
-    const enableResize = size.mode === "fixed" && !hasFacet;
     return (
-        <Resizable
-            className={enableResize ? "border-blue-400 border-2 overflow-hidden" : ""}
-            style={{ padding: "12px" }}
-            onResizeStop={(e, direction, ref, d) => {
-                vizStore.setChartLayout({
-                    mode: "fixed",
-                    width: size.width + d.width,
-                    height: size.height + d.height,
-                });
-            }}
-            enable={
-                enableResize
-                    ? undefined
-                    : {
-                          top: false,
-                          right: false,
-                          bottom: false,
-                          left: false,
-                          topRight: false,
-                          bottomRight: false,
-                          bottomLeft: false,
-                          topLeft: false,
-                      }
-            }
-            size={{
-                width: size.width + "px",
-                height: size.height + "px",
-            }}
-        >
-            <ReactVega
-                layoutMode={size.mode}
-                interactiveScale={interactiveScale}
-                geomType={geoms[0]}
-                defaultAggregate={defaultAggregated}
-                stack={stack}
-                dataSource={data}
-                rows={rows}
-                columns={columns}
-                color={color[0]}
-                theta={theta[0]}
-                radius={radius[0]}
-                shape={shape[0]}
-                opacity={opacity[0]}
-                size={sizeChannel[0]}
-                showActions={showActions}
-                width={size.width - 12 * 4}
-                height={size.height - 12 * 4}
-                ref={ref}
-                brushEncoding={exploration.mode === "brush" ? exploration.brushDirection : "none"}
-                selectEncoding={exploration.mode === "point" ? "default" : "none"}
-                onGeomClick={handleGeomClick}
-                themeKey={themeKey}
-                dark={dark}
-            />
-        </Resizable>
+        <SpecRenderer
+            loading={waiting}
+            data={viewData}
+            ref={ref}
+            themeKey={themeKey}
+            dark={dark}
+            draggableFieldState={encodings}
+            visualConfig={viewConfig}
+        />
     );
 });
 
-export default observer(ReactiveRenderer);
+export default observer(Renderer);