@kanaries/graphic-walker 0.2.16 → 0.2.17

package/src/interfaces.ts

@@ -1,19 +1,28 @@
-import { StatFuncName } from "visual-insights/build/esm/statistics";
-import { AggFC } from 'cube-core/built/types';
-import { IAnalyticType, ISemanticType } from 'visual-insights';
-
 export type DeepReadonly<T extends Record<keyof any, any>> = {
     readonly [K in keyof T]: T[K] extends Record<keyof any, any> ? DeepReadonly<T[K]> : T[K];
 };
+export type ISemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
+export type IDataType = 'number' | 'integer' | 'boolean' | 'date' | 'string';
+export type IAnalyticType = 'dimension' | 'measure';
 
 export interface IRow {
     [key: string]: any;
 }
-/**
- * @deprecated
- */
-export type SemanticType = 'quantitative' | 'nominal' | 'ordinal' | 'temporal';
 
+export type IAggregator = 'sum' | 'count' | 'max' | 'min' | 'mean' | 'median' | 'variance' | 'stdev';
+export interface Specification {
+    position?: string[];
+    color?: string[];
+    size?: string[];
+    shape?: string[];
+    opacity?: string[];
+    facets?: string[];
+    page?: string[];
+    filter?: string[];
+    highFacets?: string[];
+    geomType?: string[];
+    aggregate?: boolean;
+}
 export interface Filters {
     [key: string]: any[];
 }
@@ -25,7 +34,7 @@ export interface IMutField {
     disable?: boolean;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
-};
+}
 
 export interface IUncertainMutField {
     fid: string;
@@ -36,21 +45,23 @@ export interface IUncertainMutField {
     analyticType: IAnalyticType | '?';
 }
 
-
-export type IExpParamter = {
-    type: 'field';
-    value: string;
-} | {
-    type: 'value';
-    value: any;
-} | {
-    type: 'expression';
-    value: IExpression;
-} | {
-    type: 'constant';
-    value: any;
-}
-
+export type IExpParamter =
+    | {
+          type: 'field';
+          value: string;
+      }
+    | {
+          type: 'value';
+          value: any;
+      }
+    | {
+          type: 'expression';
+          value: IExpression;
+      }
+    | {
+          type: 'constant';
+          value: any;
+      };
 
 export interface IExpression {
     op: 'bin' | 'log2' | 'log10' | 'one' | 'binCount';
@@ -83,13 +94,6 @@ export interface IViewField extends IField {
     sort?: 'none' | 'ascending' | 'descending';
 }
 
-export interface Measure extends IField {
-    aggregator?: AggFC;
-    minWidth?: number;
-    formatter?: (value: number | undefined) => number | string;
-    [key: string]: any;
-}
-
 export interface DataSet {
     id: string;
     name: string;
@@ -104,7 +108,20 @@ export interface IFieldNeighbor {
 
 export interface IMeasure {
     key: string;
-    op: StatFuncName
+    op: IAggregator;
+}
+
+export interface IPredicate {
+    key: string;
+    type: "discrete" | "continuous";
+    range: Set<any> | [number, number];
+}
+
+export interface IExplainProps {
+    dataSource: IRow[];
+    predicates: IPredicate[];
+    viewFields: IField[];
+    metas: IField[];
 }
 
 export interface IDataSet {
@@ -119,12 +136,12 @@ export interface IDataSet {
 export interface IDataSetInfo {
     name: string;
     rawFields: IMutField[];
-    dataSource: IRow[]
+    dataSource: IRow[];
 }
 
 export interface IDataSource {
     id: string;
-    data: IRow[]
+    data: IRow[];
 }
 
 export interface IFilterField extends IViewField {
@@ -149,39 +166,34 @@ export interface DraggableFieldState {
 
 export interface IDraggableStateKey {
     id: keyof DraggableFieldState;
-    mode: number
-}
-
-export type IFilterRule = {
-    type: 'range';
-    value: readonly [number, number];
-} | {
-    type: 'temporal range';
-    value: readonly [number, number];
-} | {
-    type: 'one of';
-    value: Set<string | number>;
-};
+    mode: number;
+}
 
-export const EXPLORATION_TYPES = [
-    'none',
-    'brush',
-    'point',
-] as const;
+export type IFilterRule =
+    | {
+          type: 'range';
+          value: readonly [number, number];
+      }
+    | {
+          type: 'temporal range';
+          value: readonly [number, number];
+      }
+    | {
+          type: 'one of';
+          value: Set<string | number>;
+      };
 
-export const BRUSH_DIRECTIONS = [
-    'default',
-    'x',
-    'y',
-] as const;
+export const EXPLORATION_TYPES = ['none', 'brush', 'point'] as const;
+
+export const BRUSH_DIRECTIONS = ['default', 'x', 'y'] as const;
 
 export type IStackMode = 'none' | 'stack' | 'normalize';
-export type IExplorationType = (typeof EXPLORATION_TYPES)[number];
-export type IBrushDirection = (typeof BRUSH_DIRECTIONS)[number];
+export type IExplorationType = typeof EXPLORATION_TYPES[number];
+export type IBrushDirection = typeof BRUSH_DIRECTIONS[number];
 
 export interface IVisualConfig {
     defaultAggregated: boolean;
-    geoms:  string[];        
+    geoms: string[];
     stack: IStackMode;
     showActions: boolean;
     interactiveScale: boolean;
@@ -190,7 +202,7 @@ export interface IVisualConfig {
         mode: 'auto' | 'fixed';
         width: number;
         height: number;
-    }
+    };
     exploration: {
         mode: IExplorationType;
         /** works when mode is 'brush' */
@@ -207,8 +219,8 @@ export interface IVisSpec {
 
 export enum ISegmentKey {
     vis = 'vis',
-    data = 'data'
+    data = 'data',
 }
 
 export type IThemeKey = 'vega' | 'g2';
-export type IDarkMode = 'media' | 'light' | 'dark';
+export type IDarkMode = 'media' | 'light' | 'dark';

package/src/lib/inferMeta.ts

@@ -1,5 +1,4 @@
-import { IAnalyticType, ISemanticType, UnivariateSummary } from "visual-insights";
-import { IMutField, IRow, IUncertainMutField } from "../interfaces";
+import { IAnalyticType, IMutField, IRow, ISemanticType, IUncertainMutField } from '../interfaces';
 
 const COMMON_TIME_FORMAT: RegExp[] = [
     /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
@@ -8,13 +7,13 @@ const COMMON_TIME_FORMAT: RegExp[] = [
     /^\d{4}\/\d{2}\/\d{2}$/, // YYYY/MM/DD
     /^\d{4}\.\d{2}\.\d{2}$/, // YYYY.MM.DD
     /^\d{4}-\d{2}-\d{2}\s\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DD HH:MM:SS
-    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/ // YYYY-MM-DDTHH:MM:SS (ISO-8601)
+    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/, // YYYY-MM-DDTHH:MM:SS (ISO-8601)
 ];
 
 /**
  * check if this array is a date time array based on some common date format
  * @param data string array
- * @returns 
+ * @returns
  */
 export function isDateTimeArray(data: string[]): boolean {
     let isDateTime = true;
@@ -34,6 +33,19 @@ export function isDateTimeArray(data: string[]): boolean {
     return isDateTime;
 }
 
+export function isNumericArray(data: any[]): boolean {
+    return data.every((item) => {
+        // Check if the item is already a number
+        if (typeof item === 'number') {
+            return true;
+        }
+
+        // Check if the item can be converted into a number
+        const number = parseFloat(item);
+        return !isNaN(number) && isFinite(item);
+    });
+}
+
 function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyticType {
     switch (semanticType) {
         case 'quantitative':
@@ -43,37 +55,22 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
     }
 }
 
-/**
- * 这里目前暂时包一层，是为了解耦具体的推断实现。后续这里要调整推断的逻辑。
- * 需要讨论这一层是否和交互层有关，如果没有关系，这一层包裹可以不存在这里，而是在visual-insights中。
- * @param data 原始数据
- * @param fid 字段id
- * @returns semantic type 列表
- */
 export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
-    let st = UnivariateSummary.getFieldType(data, fid);
+    const values = data.map((row) => row[fid]);
+
+    let st: ISemanticType = isNumericArray(values) ? 'quantitative' : 'nominal';
     if (st === 'nominal') {
         if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
-    } else if (st === 'ordinal') {
-        const valueSet: Set<number> = new Set();
-        let _max = -Infinity;
-        let _min = Infinity;
-        for (let v of valueSet) {
-            _max = Math.max(_max, v);
-            _min = Math.max(_min, v);
-        }
-        if (_max - _min + 1 !== valueSet.size) {
-            st = 'quantitative';
-        }
     }
     return st;
 }
 
-export function inferMeta (props: { dataSource: IRow[]; fields: IUncertainMutField[] }): IMutField[] {
+export function inferMeta(props: { dataSource: IRow[]; fields: IUncertainMutField[] }): IMutField[] {
     const { dataSource, fields } = props;
-    const finalFieldMetas: IMutField[] = []
+    const finalFieldMetas: IMutField[] = [];
     for (let field of fields) {
-        let semanticType: ISemanticType = field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
+        let semanticType: ISemanticType =
+            field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
         let analyticType: IAnalyticType = inferAnalyticTypeFromSemanticType(semanticType);
 
         finalFieldMetas.push({
@@ -82,7 +79,7 @@ export function inferMeta (props: { dataSource: IRow[]; fields: IUncertainMutFie
             name: field.name ? field.name : field.fid,
             analyticType,
             semanticType,
-        })
+        });
     }
-    return finalFieldMetas
-}
+    return finalFieldMetas;
+}

package/src/lib/insights/explainByChildren.ts

@@ -0,0 +1,50 @@
+import { IMeasure, IRow } from '../../interfaces';
+import { IPredicate, checkChildOutlier, checkMajorFactor, filterByPredicates } from '../../utils';
+import { aggregate } from '../op/aggregate';
+
+export function explainByChildren(
+    dataSource: IRow[],
+    predicates: IPredicate[],
+    dimensions: string[],
+    measures: IMeasure[]
+) {
+    // 1. find most relative dimensions(topK)
+    // 2. for each dimension, we check all the dim member in it. find the member whos distribution is most close to current one.
+    // here we do not nomorlize all the dim member's distribution, we use the relative distribution instead.
+    // 3. the dim member we found can be used to explain current one as major factor.
+    // const predicates: IPredicate[] = selection === 'all' ? [] : getPredicates(selection, dimensions, []);
+    const viewData = aggregate(dataSource, {
+        groupBy: dimensions,
+        op: 'aggregate',
+        agg: Object.fromEntries(measures.map((mea) => [mea.key, mea.op])),
+    });
+    const measureIds = measures.map((m) => m.key);
+    const parentData = filterByPredicates(viewData, predicates);
+
+    const majorList: Array<{ key: string; score: number; dimensions: string[]; measures: IMeasure[] }> = [];
+    const outlierList: Array<{ key: string; score: number; dimensions: string[]; measures: IMeasure[] }> = [];
+    for (let extendDim of dimensions) {
+        const data = aggregate(dataSource, {
+            groupBy: dimensions.concat(extendDim),
+            op: 'aggregate',
+            agg: Object.fromEntries(measures.map((mea) => [mea.key, mea.op])),
+        });
+        let groups: Map<any, IRow[]> = new Map();
+        for (let record of data) {
+            if (!groups.has(record[extendDim])) {
+                groups.set(record[extendDim], []);
+            }
+            groups.get(record[extendDim])?.push(record);
+        }
+        const { majorKey, majorSum } = checkMajorFactor(parentData, groups, dimensions, measureIds);
+        majorList.push({ key: majorKey, score: majorSum, dimensions: [extendDim], measures });
+        const { outlierKey, outlierSum } = checkChildOutlier(parentData, groups, dimensions, measureIds);
+        outlierList.push({ key: outlierKey, score: outlierSum, dimensions: [extendDim], measures });
+    }
+    majorList.sort((a, b) => a.score - b.score);
+    outlierList.sort((a, b) => b.score - a.score);
+    return {
+        majorList,
+        outlierList,
+    };
+}

package/src/lib/insights/explainBySelection.ts

@@ -0,0 +1,47 @@
+import { IExplainProps, IField } from '../../interfaces';
+import { filterByPredicates } from '../../utils';
+import { compareDistribution, normalizeWithParent } from '../../utils/normalization';
+import { aggregate } from '../op/aggregate';
+import { complementaryFields, groupByAnalyticTypes, meaList2AggProps } from './utils';
+
+export function explainBySelection(props: IExplainProps) {
+    const { metas, dataSource, viewFields, predicates } = props;
+    const { dimensions: dimsInView, measures: measInView } = groupByAnalyticTypes(viewFields);
+    const complementaryDimensions = complementaryFields({
+        all: metas.filter((f) => f.analyticType === 'dimension'),
+        selection: dimsInView,
+    });
+    const outlierList: Array<{ score: number; viiewFields: IField[] }> = complementaryDimensions.map(extendDim => {
+        const overallData = aggregate(dataSource, {
+            groupBy: [extendDim.fid],
+            op: 'aggregate',
+            agg: meaList2AggProps(measInView),
+        });
+        const viewData = aggregate(dataSource, {
+            groupBy: dimsInView.map((f) => f.fid),
+            op: 'aggregate',
+            agg: meaList2AggProps(measInView),
+        });
+        const subData = filterByPredicates(viewData, predicates);
+
+        let outlierNormalization = normalizeWithParent(
+            subData,
+            overallData,
+            measInView.map((mea) => mea.fid),
+            false
+        );
+
+        let outlierScore = compareDistribution(
+            outlierNormalization.normalizedData,
+            outlierNormalization.normalizedParentData,
+            [extendDim.fid],
+            measInView.map((mea) => mea.fid)
+        );
+        return {
+            viiewFields: measInView.concat(extendDim),
+            score: outlierScore,
+        }
+    }).sort((a, b) => b.score - a.score)
+ 
+    return outlierList;
+}

package/src/lib/insights/explainValue.ts

@@ -0,0 +1,30 @@
+import { IAggregator, IExplainProps } from '../../interfaces';
+import { filterByPredicates } from '../../utils';
+import { aggregate } from '../op/aggregate';
+import { complementaryFields, groupByAnalyticTypes } from './utils';
+
+export function explainValue(props: IExplainProps): number[] {
+    const { viewFields, dataSource, predicates } = props;
+    const { dimensions: dimsInView, measures: measInView } = groupByAnalyticTypes(viewFields);
+    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])),
+    });
+    const selection = filterByPredicates(viewData, predicates);
+    const cmps: number[] = [];
+    for (let mea of measInView) {
+        const values = viewData.map((r) => r[mea.fid]).sort((a, b) => a - b);
+        const selectionValues = selection.map((r) => r[mea.fid]);
+        const lowerBoundary: number = values[Math.floor(values.length * 0.15)];
+        const higherBoundary: number = values[Math.min(Math.ceil(values.length * 0.85), values.length - 1)];
+        if (selectionValues.some((v) => v >= higherBoundary)) {
+            cmps.push(1);
+        } else if (selectionValues.some((v) => v <= lowerBoundary)) {
+            cmps.push(-1);
+        } else {
+            cmps.push(0);
+        }
+    }
+    return cmps;
+}

package/src/lib/insights/utils.ts

@@ -0,0 +1,21 @@
+import { IAggregator, IField } from '../../interfaces';
+import { IAggQuery } from '../interfaces';
+
+export function groupByAnalyticTypes(fields: IField[]) {
+    const dimensions = fields.filter((f) => f.analyticType === 'dimension');
+    const measures = fields.filter((f) => f.analyticType === 'measure');
+    return {
+        dimensions,
+        measures,
+    };
+}
+
+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')
+        .filter((f) => !props.selection.find((vf) => vf.fid === f.fid));
+}

package/src/lib/interfaces.ts

@@ -1,16 +1,10 @@
+import { IAggregator } from "../interfaces";
+
 export interface IAggQuery {
     op: 'aggregate';
     groupBy: string[];
     agg: {
-        [field: string]:
-            | 'sum'
-            | 'count'
-            | 'max'
-            | 'min'
-            | 'mean'
-            | 'median'
-            | 'variance'
-            | 'stdev';
+        [field: string]: IAggregator;
     };
 }
 

package/src/lib/op/aggregate.ts

@@ -1,4 +1,4 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IAggQuery } from "../interfaces";
 import { sum, mean, median, stdev, variance, max, min, count } from "./stat";
 

package/src/lib/op/bin.ts

@@ -1,4 +1,4 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IBinQuery } from "../interfaces";
 
 export function bin (dataSource: IRow[], query: IBinQuery): IRow[] {

package/src/lib/op/fold.ts

@@ -1,4 +1,4 @@
-import { IRow } from "visual-insights";
+import { IRow } from "../../interfaces";
 import { IFoldQuery } from "../interfaces";
 
 export function fold (data: IRow[], query: IFoldQuery): IRow[] {

package/src/lib/viewQuery.ts

@@ -1,5 +1,4 @@
-import { IRow } from "visual-insights";
-import { IMutField } from "../interfaces";
+import { IMutField, IRow } from "../interfaces";
 import { aggregate } from "./op/aggregate";
 import { fold } from "./op/fold";
 import { IAggQuery, IBinQuery, IFoldQuery, IRawQuery } from "./interfaces";

package/src/locales/en-US.json

@@ -58,7 +58,8 @@
             "shape": "Shape",
             "theta": "Angle",
             "radius": "Radius",
-            "filters": "Filters"
+            "filters": "Filters",
+            "details": "Details"
         },
         "aggregator": {
             "sum": "Sum",

package/src/locales/zh-CN.json

@@ -58,7 +58,8 @@
             "shape": "形状",
             "theta": "角度",
             "radius": "半径",
-            "filters": "筛选器"
+            "filters": "筛选器",
+            "details": "信息"
         },
         "aggregator": {
             "sum": "求和",

package/src/renderer/specRenderer.tsx

@@ -31,6 +31,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
     const theta = draggableFieldState.theta;
     const radius = draggableFieldState.radius;
     const sizeChannel = draggableFieldState.size;
+    const details = draggableFieldState.details;
 
     const rowLeftFacetFields = useMemo(() => rows.slice(0, -1).filter((f) => f.analyticType === 'dimension'), [rows]);
     const colLeftFacetFields = useMemo(
@@ -102,6 +103,7 @@ const SpecRenderer = forwardRef<IReactVegaHandler, SpecRendererProps>(function (
                 shape={shape[0]}
                 opacity={opacity[0]}
                 size={sizeChannel[0]}
+                details={details}
                 showActions={showActions}
                 width={size.width - 12 * 4}
                 height={size.height - 12 * 4}