@kanaries/graphic-walker 0.3.4 → 0.3.5

package/src/components/pivotTable/utils.ts

@@ -0,0 +1,141 @@
+import { IRow } from "../../interfaces";
+import { INestNode } from "./inteface";
+
+const key_prefix = 'nk_';
+
+export function insertNode (tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number) {
+    if (depth >= layerKeys.length) {
+        // tree.key = nodeData[layerKeys[depth]];
+        return;   
+    }
+    const key = nodeData[layerKeys[depth]];
+    // console.log({
+    //     key,
+    //     nodeData,
+    //     layerKeys,
+    //     depth
+    // })
+    let child = tree.children.find((c) => c.key === key);
+    if (!child) {
+        // console.log(key, tree.children.map(c => c.key))
+        // insertNode(child, layerKeys, nodeData, depth + 1);
+        // return;
+        child = {
+            key,
+            value: key,
+            fieldKey: layerKeys[depth],
+            children: [],
+        }
+        tree.children.push(child);
+    }
+    insertNode(child, layerKeys, nodeData, depth + 1);
+
+}
+const ROOT_KEY = '__root';
+
+export function buildNestTree (layerKeys: string[], data: IRow[]): INestNode {
+    const tree: INestNode = {
+        key: ROOT_KEY,
+        value: 'root',
+        fieldKey: 'root',
+        children: [],
+    };
+    for (let row of data) {
+        insertNode(tree, layerKeys, row, 0);
+    }
+    return tree;
+}
+
+class NodeIterator {
+    public tree: INestNode;
+    public nodeStack: INestNode[] = [];
+    public current: INestNode | null = null;
+    constructor (tree: INestNode) {
+        this.tree = tree;
+    }
+    public first () {
+        let node = this.tree
+        this.nodeStack = [node];
+        while (node.children.length > 0) {
+            this.nodeStack.push(node.children[0])
+            node = node.children[0]
+        }
+        this.current = node;
+        return this.current;
+    }
+    public next (): INestNode | null {
+        let cursorMoved = false;
+        let counter = 0
+        while (this.nodeStack.length > 1) {
+            counter++
+            if (counter > 100) break;
+            let node = this.nodeStack[this.nodeStack.length - 1];
+            let parent = this.nodeStack[this.nodeStack.length - 2];
+            let nodeIndex = parent.children.findIndex(n => n.key === node!.key);
+            if (nodeIndex === -1) break;
+            // console.log(this.nodeStack.map(n => `${n.fieldKey}-${n.value}`))
+            if (cursorMoved) {
+                if (node.children.length > 0) {
+                    this.nodeStack.push(node.children[0]);
+                    continue;
+                } else {
+                    break;
+                }
+            } else {
+                if (nodeIndex < parent.children.length - 1) {
+                    this.nodeStack.pop();
+                    this.nodeStack.push(parent.children[nodeIndex + 1])
+                    cursorMoved = true
+                    continue;
+                }
+                if (nodeIndex >= parent.children.length - 1) {
+                    this.nodeStack.pop();
+                    continue;
+                }
+            }
+        }
+        if (cursorMoved) {
+            this.current = this.nodeStack[this.nodeStack.length - 1] || null;
+        } else {
+            this.current = null;
+        }
+        // console.log(this.current)
+        return this.current;
+    }
+    public predicates (): { key: string; value: any }[] {
+        return this.nodeStack.filter(node => node.key !== ROOT_KEY).map(node => ({
+            key: node.fieldKey,
+            value: node.value
+        }))
+    }
+}
+
+export function buildMetricTableFromNestTree (leftTree: INestNode, topTree: INestNode, data: IRow[]): (IRow | null)[][] {
+    const mat: any[][] = [];
+    const iteLeft = new NodeIterator(leftTree);
+    const iteTop = new NodeIterator(topTree);
+    // console.log(iteLeft, iteTop)
+    iteLeft.first();
+    // return mat;
+    while (iteLeft.current !== null) {
+        const vec: any[] = [];
+        iteTop.first();
+        while (iteTop.current !== null) {
+            const predicates = iteLeft.predicates().concat(iteTop.predicates());
+            const row = data.find(r => predicates.every(pre => r[pre.key] === pre.value))
+            vec.push(row)
+            iteTop.next();
+        }
+        mat.push(vec)
+        iteLeft.next();
+    }
+    return mat;
+}
+
+export function getAllChildrenSize (node: INestNode, depth: number): number {
+    if (depth === 0) {
+        return node.children.length;
+    }
+    return node.children.reduce((acc, child) => acc + getAllChildrenSize(child, depth + 1), 0)
+
+}

package/src/components/visualConfig/index.tsx

@@ -0,0 +1,76 @@
+import { observer } from 'mobx-react-lite';
+import React, { useState } from 'react';
+import { useGlobalStore } from '../../store';
+import Modal from '../modal';
+import { IVisualConfig } from '../../interfaces';
+import PrimaryButton from '../button/primary';
+import DefaultButton from '../button/default';
+import { useTranslation } from 'react-i18next';
+
+const VisualConfigPanel: React.FC = (props) => {
+    const { commonStore, vizStore } = useGlobalStore();
+    const { showVisualConfigPanel } = commonStore;
+    const { visualConfig } = vizStore;
+    const { t } = useTranslation();
+    const formatConfigList: (keyof IVisualConfig['format'])[] = [
+        'numberFormat',
+        'timeFormat',
+        'normalizedNumberFormat',
+    ];
+    const [format, setFormat] = useState<IVisualConfig['format']>({
+        numberFormat: visualConfig.format.numberFormat,
+        timeFormat: visualConfig.format.timeFormat,
+        normalizedNumberFormat: visualConfig.format.normalizedNumberFormat,
+    });
+
+    return (
+        <Modal
+            show={showVisualConfigPanel}
+            onClose={() => {
+                commonStore.setShowVisualConfigPanel(false);
+            }}
+        >
+            <div>
+                <h2 className='text-lg mb-4'>{t('config.format')}</h2>
+                <p className='text-xs'>Format guides docs: <a target="_blank" className='underline text-blue-500' href="https://github.com/d3/d3-format#locale_format">read here</a></p>
+                {formatConfigList.map((fc) => (
+                    <div className="my-2" key={fc}>
+                        <label className="block text-xs font-medium leading-6 text-gray-900">{t(`config.${fc}`)}</label>
+                        <div className="mt-1">
+                            <input
+                                type="text"
+                                className="block w-full rounded-md border-0 py-1 px-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                value={format[fc] ?? ''}
+                                onChange={(e) => {
+                                    setFormat((f) => ({
+                                        ...f,
+                                        [fc]: e.target.value,
+                                    }));
+                                }}
+                            />
+                        </div>
+                    </div>
+                ))}
+                <div className='mt-4'>
+                    <PrimaryButton
+                        text={t('actions.confirm')}
+                        className='mr-2'
+                        onClick={() => {
+                            vizStore.setVisualConfig('format', format);
+                            commonStore.setShowVisualConfigPanel(false);
+                        }}
+                    />
+                    <DefaultButton
+                        text={t('actions.cancel')}
+                        className='mr-2'
+                        onClick={() => {
+                            commonStore.setShowVisualConfigPanel(false);
+                        }}
+                    />
+                </div>
+            </div>
+        </Modal>
+    );
+};
+
+export default observer(VisualConfigPanel);

package/src/config.ts

@@ -11,7 +11,9 @@ export const GEMO_TYPES: Readonly<string[]> = [
     'tick',
     'rect',
     'arc',
+    'text',
     'boxplot',
+    'table'
 ] as const;
 
 export const STACK_MODE: Readonly<IStackMode[]> = [
@@ -47,7 +49,9 @@ export const CHANNEL_LIMIT = {
     size: 1,
     shape: 1,
     theta: 1,
-    radius: 1
+    radius: 1,
+    details: Infinity,
+    text: 1,
 }
 
 export const MetaFieldKeys: Array<keyof DraggableFieldState> = [

package/src/fields/aestheticFields.tsx

@@ -1,15 +1,36 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Droppable } from "@kanaries/react-beautiful-dnd";
 import { DRAGGABLE_STATE_KEYS } from './fieldsContext';
 import { AestheticFieldContainer } from './components'
 import SingleEncodeEditor from './encodeFields/singleEncodeEditor';
+import { observer } from 'mobx-react-lite';
+import { useGlobalStore } from '../store';
 
-const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape', 'details'].includes(f.id));
+const aestheticFields = DRAGGABLE_STATE_KEYS.filter(f => ['color', 'opacity', 'size', 'shape', 'details', 'text'].includes(f.id));
 
 const AestheticFields: React.FC = props => {
+    const { vizStore } = useGlobalStore();
+    const { visualConfig } = vizStore;
+    const { geoms } = visualConfig;
+
+    const channels = useMemo(() => {
+        switch (geoms[0]) {
+            case 'arc':
+            case 'line':
+            case 'area':
+            case 'boxplot':
+                return aestheticFields.filter(f => f.id !== 'shape');
+            case 'text':
+                return aestheticFields.filter(f => f.id === 'text' || f.id === 'color' || f.id === 'size' || f.id === 'opacity');
+            case 'table':
+                return []
+            default:
+                return aestheticFields.filter(f => f.id !== 'text');
+        }
+    }, [geoms[0]])
     return <div>
         {
-            aestheticFields.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
+            channels.map(dkey => <AestheticFieldContainer name={dkey.id} key={dkey.id}>
                 <Droppable droppableId={dkey.id} direction="horizontal">
                     {(provided, snapshot) => (
                         // <OBFieldContainer dkey={dkey} provided={provided} />
@@ -21,4 +42,4 @@ const AestheticFields: React.FC = props => {
     </div>
 }
 
-export default AestheticFields;
+export default observer(AestheticFields);

package/src/fields/components.tsx

@@ -100,11 +100,11 @@ export const FilterFieldSegment = styled.div`
     > h4 {
       font-weight: 400;
     };
-  },
+  }
 
   .flt-container {
 
-  },
+  }
 `
 
 export const Pill = styled.div<{colType: 'discrete' | 'continuous'}>`

package/src/fields/fieldsContext.tsx

@@ -49,7 +49,8 @@ export const DRAGGABLE_STATE_KEYS: Readonly<IDraggableStateKey[]> = [
     { id: 'theta', mode: 1 },
     { id: 'radius', mode: 1 },
     { id: 'filters', mode: 1 },
-    { id: 'details', mode: 1 }
+    { id: 'details', mode: 1 },
+    { id: 'text', mode: 1 },
 ] as const;
 
 export const AGGREGATOR_LIST: Readonly<string[]> = [

package/src/interfaces.ts

@@ -161,6 +161,7 @@ export interface DraggableFieldState {
     radius: IViewField[];
     details: IViewField[];
     filters: IFilterField[];
+    text: IViewField[];
 }
 
 export interface IDraggableStateKey {
@@ -191,6 +192,11 @@ export interface IVisualConfig {
     showActions: boolean;
     interactiveScale: boolean;
     sorted: 'none' | 'ascending' | 'descending';
+    format: {
+        numberFormat?: string;
+        timeFormat?: string;
+        normalizedNumberFormat?: string;
+    };
     size: {
         mode: 'auto' | 'fixed';
         width: number;

package/src/lib/insights/explainByChildren.ts

@@ -1,5 +1,5 @@
 import { IMeasure, IRow } from '../../interfaces';
-import { IPredicate, checkChildOutlier, checkMajorFactor, filterByPredicates } from '../../utils';
+import { IPredicate, checkChildOutlier, checkMajorFactor, filterByPredicates, getMeaAggKey } from '../../utils';
 import { aggregate } from '../op/aggregate';
 
 export function explainByChildren(
@@ -16,7 +16,11 @@ export function explainByChildren(
     const viewData = aggregate(dataSource, {
         groupBy: dimensions,
         op: 'aggregate',
-        agg: Object.fromEntries(measures.map((mea) => [mea.key, mea.op])),
+        measures: measures.map(mea => ({
+            field: mea.key,
+            agg: mea.op,
+            asFieldKey: getMeaAggKey(mea.key, mea.op)
+        }))
     });
     const measureIds = measures.map((m) => m.key);
     const parentData = filterByPredicates(viewData, predicates);
@@ -27,7 +31,11 @@ export function explainByChildren(
         const data = aggregate(dataSource, {
             groupBy: dimensions.concat(extendDim),
             op: 'aggregate',
-            agg: Object.fromEntries(measures.map((mea) => [mea.key, mea.op])),
+            measures: measures.map((mea) => ({
+                field: mea.key,
+                agg: mea.op,
+                asFieldKey: getMeaAggKey(mea.key, mea.op),
+            }))
         });
         let groups: Map<any, IRow[]> = new Map();
         for (let record of data) {

package/src/lib/insights/explainBySelection.ts

@@ -1,8 +1,8 @@
-import { IExplainProps, IField } from '../../interfaces';
-import { filterByPredicates } from '../../utils';
+import { IAggregator, IExplainProps, IField } from '../../interfaces';
+import { filterByPredicates, getMeaAggKey } from '../../utils';
 import { compareDistribution, normalizeWithParent } from '../../utils/normalization';
 import { aggregate } from '../op/aggregate';
-import { complementaryFields, groupByAnalyticTypes, meaList2AggProps } from './utils';
+import { complementaryFields, groupByAnalyticTypes } from './utils';
 
 export function explainBySelection(props: IExplainProps) {
     const { metas, dataSource, viewFields, predicates } = props;
@@ -15,12 +15,21 @@ export function explainBySelection(props: IExplainProps) {
         const overallData = aggregate(dataSource, {
             groupBy: [extendDim.fid],
             op: 'aggregate',
-            agg: meaList2AggProps(measInView),
+            measures: measInView.map((mea) => ({
+                field: mea.fid,
+                agg: (mea.aggName ?? 'sum') as IAggregator,
+                asFieldKey: getMeaAggKey(mea.fid, (mea.aggName ?? 'sum') as IAggregator),
+            })),
+                
         });
         const viewData = aggregate(dataSource, {
             groupBy: dimsInView.map((f) => f.fid),
             op: 'aggregate',
-            agg: meaList2AggProps(measInView),
+            measures: measInView.map((mea) => ({
+                field: mea.fid,
+                agg: (mea.aggName ?? 'sum') as IAggregator,
+                asFieldKey: getMeaAggKey(mea.fid, (mea.aggName ?? 'sum') as IAggregator),
+            }))
         });
         const subData = filterByPredicates(viewData, predicates);
 

package/src/lib/insights/explainValue.ts

@@ -1,7 +1,7 @@
 import { IAggregator, IExplainProps } from '../../interfaces';
-import { filterByPredicates } from '../../utils';
+import { filterByPredicates, getMeaAggKey } from '../../utils';
 import { aggregate } from '../op/aggregate';
-import { complementaryFields, groupByAnalyticTypes } from './utils';
+import { groupByAnalyticTypes } from './utils';
 
 export function explainValue(props: IExplainProps): number[] {
     const { viewFields, dataSource, predicates } = props;
@@ -9,7 +9,14 @@ export function explainValue(props: IExplainProps): number[] {
     const viewData = aggregate(dataSource, {
         groupBy: dimsInView.map((f) => f.fid),
         op: 'aggregate',
-        agg: Object.fromEntries(measInView.map((mea) => [mea.fid, (mea.aggName ?? 'sum') as IAggregator])),
+        measures: measInView.map((mea) => {
+            const agg = (mea.aggName ?? 'sum') as IAggregator;
+            return {
+                field: mea.fid,
+                agg,
+                asFieldKey: getMeaAggKey(mea.fid, agg),
+            }
+        }),
     });
     const selection = filterByPredicates(viewData, predicates);
     const cmps: number[] = [];

package/src/lib/insights/utils.ts

@@ -10,10 +10,6 @@ export function groupByAnalyticTypes(fields: IField[]) {
     };
 }
 
-export function meaList2AggProps(measures: IField[]): IAggQuery['agg'] {
-    return Object.fromEntries(measures.map((mea) => [mea.fid, (mea.aggName ?? 'sum') as IAggregator]));
-}
-
 export function complementaryFields(props: { selection: IField[]; all: IField[] }): IField[] {
     return props.all
         .filter((f) => f.analyticType === 'dimension')

package/src/lib/interfaces.ts

@@ -3,9 +3,7 @@ import { IAggregator } from "../interfaces";
 export interface IAggQuery {
     op: 'aggregate';
     groupBy: string[];
-    agg: {
-        [field: string]: IAggregator;
-    };
+    measures: { field: string; agg: IAggregator; asFieldKey: string }[];
 }
 
 // interface IFilterQuery {

package/src/lib/op/aggregate.ts

@@ -1,4 +1,5 @@
 import { IRow } from "../../interfaces";
+import { getMeaAggKey } from "../../utils";
 import { IAggQuery } from "../interfaces";
 import { sum, mean, median, stdev, variance, max, min, count } from "./stat";
 
@@ -16,7 +17,7 @@ const aggregatorMap = {
 const KEY_JOINER = '___';
 
 export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
-    const { groupBy, agg } = query;
+    const { groupBy, measures } = query;
     const ans: Map<string, IRow> = new Map();
     const groups: Map<string, IRow[]> = new Map();
     for (let row of data) {
@@ -35,13 +36,14 @@ export function aggregate (data: IRow[], query: IAggQuery): IRow[] {
         for (let k of groupBy) {
             aggRow[k] = subGroup[0][k];
         }
-        for (let meaKey in agg) {
-            if (aggRow[meaKey] === undefined) {
-                aggRow[meaKey] = 0;
+        for (let mea of measures) {
+            const aggMeaKey = getMeaAggKey(mea.field, mea.agg);
+            if (aggRow[aggMeaKey] === undefined) {
+                aggRow[aggMeaKey] = 0;
             }
-            const values: number[] = subGroup.map((r) => r[meaKey]) ?? [];
-            const aggregator = aggregatorMap[agg[meaKey]] ?? sum;
-            aggRow[meaKey] = aggregator(values);
+            const values: number[] = subGroup.map((r) => r[mea.field]) ?? [];
+            const aggregator = aggregatorMap[mea.agg] ?? sum;
+            aggRow[aggMeaKey] = aggregator(values);
         }
         ans.set(gk, aggRow);
     }

package/src/locales/en-US.json

@@ -1,4 +1,10 @@
 {
+    "config": {
+        "format": "Format",
+        "numberFormat": "Number format",
+        "timeFormat": "Time format",
+        "normalizedNumberFormat": "Normalized number format"
+    },
     "constant": {
         "row_count": "Row count",
         "analytic_type": {
@@ -23,7 +29,9 @@
             "tick": "Tick",
             "rect": "Rectangle",
             "arc": "Arc",
-            "boxplot": "Box (Box Plot)"
+            "boxplot": "Box (Box Plot)",
+            "table": "Table",
+            "text": "Text"
         },
         "stack_mode": {
             "__enum__": "Stack Mode",
@@ -59,7 +67,8 @@
             "theta": "Angle",
             "radius": "Radius",
             "filters": "Filters",
-            "details": "Details"
+            "details": "Details",
+            "text": "Text"
         },
         "aggregator": {
             "sum": "Sum",