@kanaries/graphic-walker 0.3.14 → 0.3.16

package/src/components/dataTable/index.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useState } from "react";
-import styled from "styled-components";
-import { IMutField, IRow } from "../../interfaces";
-import { useTranslation } from "react-i18next";
-import Pagination from "./pagination";
-import { ChevronUpDownIcon } from "@heroicons/react/24/outline";
-import DropdownContext from "../dropdownContext";
+import React, { useMemo, useState } from 'react';
+import styled from 'styled-components';
+import { IMutField, IRow } from '../../interfaces';
+import { useTranslation } from 'react-i18next';
+import Pagination from './pagination';
+import { ChevronUpDownIcon } from '@heroicons/react/24/outline';
+import DropdownContext from '../dropdownContext';
 
 interface DataTableProps {
     size?: number;
@@ -32,34 +32,83 @@ const Container = styled.div`
         }
     }
 `;
-const ANALYTIC_TYPE_LIST = ["dimension", "measure"];
-const SEMANTIC_TYPE_LIST = ["nominal", "ordinal", "quantitative", "temporal"];
+const ANALYTIC_TYPE_LIST = ['dimension', 'measure'];
+const SEMANTIC_TYPE_LIST = ['nominal', 'ordinal', 'quantitative', 'temporal'];
 // function getCellType(field: IMutField): 'number' | 'text' {
 //     return field.dataType === 'number' || field.dataType === 'integer' ? 'number' : 'text';
 // }
-function getHeaderType(field: IMutField): "number" | "text" {
-    return field.analyticType === "dimension" ? "text" : "number";
+function getHeaderType(field: IMutField): 'number' | 'text' {
+    return field.analyticType === 'dimension' ? 'text' : 'number';
 }
 
 function getHeaderClassNames(field: IMutField) {
-    return field.analyticType === "dimension" ? "border-t-4 border-blue-400" : "border-t-4 border-purple-400";
+    return field.analyticType === 'dimension' ? 'border-t-4 border-blue-400' : 'border-t-4 border-purple-400';
 }
 
 function getSemanticColors(field: IMutField): string {
     switch (field.semanticType) {
-        case "nominal":
-            return "border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600";
-        case "ordinal":
-            return "border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600";
-        case "quantitative":
-            return "border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600";
-        case "temporal":
-            return "border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600";
+        case 'nominal':
+            return 'border border-transparent bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-100 dark:border-sky-600';
+        case 'ordinal':
+            return 'border border-transparent bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-100 dark:border-indigo-600';
+        case 'quantitative':
+            return 'border border-transparent bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100 dark:border-purple-600';
+        case 'temporal':
+            return 'border border-transparent bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100 dark:border-yellow-600';
         default:
-            return "border border-transparent bg-gray-400";
+            return 'border border-transparent bg-gray-400';
     }
 }
 
+type wrapMutField = {
+    colSpan: number;
+    rowSpan: number;
+} & (
+    | { type: 'field'; value: IMutField; fIndex: number }
+    | {
+          type: 'name';
+          value: string;
+      }
+);
+
+const getHeaders = (metas: IMutField[]): wrapMutField[][] => {
+    const height = metas.map((x) => x.path?.length ?? 1).reduce((a, b) => Math.max(a, b), 0);
+    const result: wrapMutField[][] = [...Array(height)].map(() => []);
+    let now = 1;
+    metas.forEach((x, fIndex) => {
+        const path = x.path ?? [x.name ?? x.fid];
+        if (path.length > now) {
+            for (let i = now - 1; i < path.length - 1; i++) {
+                result[i].push({
+                    colSpan: 0,
+                    rowSpan: 1,
+                    type: 'name',
+                    value: path[i],
+                });
+            }
+        }
+        now = path.length;
+        for (let i = 0; i < path.length - 1; i++) {
+            result[i][result[i].length - 1].colSpan++;
+        }
+        result[path.length - 1].push({
+            type: 'field',
+            value: x,
+            colSpan: 1,
+            rowSpan: height - path.length + 1,
+            fIndex,
+        });
+    });
+    return result;
+};
+
+const getHeaderKey = (f: wrapMutField) => {
+    if (f.type === 'name') {
+        return f.value;
+    }
+    return f.value.name ?? f.value.fid;
+};
+
 const DataTable: React.FC<DataTableProps> = (props) => {
     const { size = 10, data, metas, onMetaChange } = props;
     const [pageIndex, setPageIndex] = useState(0);
@@ -82,6 +131,8 @@ const DataTable: React.FC<DataTableProps> = (props) => {
     const from = pageIndex * size;
     const to = Math.min((pageIndex + 1) * size, data.length - 1);
 
+    const headers = useMemo(() => getHeaders(metas), [metas]);
+
     return (
         <Container className="rounded border-gray-200 dark:border-gray-700 border">
             <Pagination
@@ -97,70 +148,99 @@ const DataTable: React.FC<DataTableProps> = (props) => {
             />
             <table className="min-w-full divide-y">
                 <thead className="bg-gray-50 dark:bg-gray-900">
-                    <tr className="divide-x divide-gray-200 dark:divide-gray-700">
-                        {metas.map((field, fIndex) => (
-                            <th key={field.fid} className={""}>
-                                <div
-                                    className={
-                                        getHeaderClassNames(field) +
-                                        " whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6"
-                                    }
+                    {headers.map((row) => (
+                        <tr
+                            className="divide-x divide-gray-200 dark:divide-gray-700"
+                            key={`row_${getHeaderKey(row[0])}`}
+                        >
+                            {row.map((f) => (
+                                <th
+                                    colSpan={f.colSpan}
+                                    rowSpan={f.rowSpan}
+                                    key={getHeaderKey(f)}
+                                    className={'align-top'}
                                 >
-                                    <b>{field.name || field.fid}</b>
-                                    <div>
-                                        <DropdownContext
-                                            options={analyticTypeList}
-                                            onSelect={(value) => {
-                                                onMetaChange(field.fid, fIndex, {
-                                                    analyticType: value as IMutField["analyticType"],
-                                                });
-                                            }}
+                                    {f.type === 'name' && (
+                                        <div
+                                            className={
+                                                'border-t-4 border-yellow-400 whitespace-nowrap py-3.5 text-left text-xs font-semibold text-gray-900 dark:text-gray-50'
+                                            }
                                         >
-                                            <span
-                                                className={
-                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white " +
-                                                    (field.analyticType === "dimension" ? "bg-blue-500" : "bg-purple-500")
-                                                }
-                                            >
-                                                {field.analyticType}
-                                                <ChevronUpDownIcon className="ml-2 w-3" />
-                                            </span>
-                                        </DropdownContext>
-                                    </div>
-                                    <div>
-                                        <DropdownContext
-                                            options={semanticTypeList}
-                                            onSelect={(value) => {
-                                                onMetaChange(field.fid, fIndex, {
-                                                    semanticType: value as IMutField["semanticType"],
-                                                });
-                                            }}
+                                            <b className="sticky inset-x-0 w-fit px-6 sm:pl-6">{f.value}</b>
+                                        </div>
+                                    )}
+                                    {f.type === 'field' && (
+                                        <div
+                                            className={
+                                                getHeaderClassNames(f.value) +
+                                                ' whitespace-nowrap py-3.5 px-6 text-left text-xs font-semibold text-gray-900 dark:text-gray-50 sm:pl-6'
+                                            }
                                         >
-                                            <span
-                                                className={
-                                                    "cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs " +
-                                                    getSemanticColors(field)
-                                                }
-                                            >
-                                                {field.semanticType}
-                                                <ChevronUpDownIcon className="ml-2 w-3" />
-                                            </span>
-                                        </DropdownContext>
-                                    </div>
-                                </div>
-                            </th>
-                        ))}
-                    </tr>
+                                            <b>{f.value.basename || f.value.name || f.value.fid}</b>
+                                            <div>
+                                                <DropdownContext
+                                                    options={analyticTypeList}
+                                                    onSelect={(value) => {
+                                                        onMetaChange(f.value.fid, f.fIndex, {
+                                                            analyticType: value as IMutField['analyticType'],
+                                                        });
+                                                    }}
+                                                >
+                                                    <span
+                                                        className={
+                                                            'cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs text-white ' +
+                                                            (f.value.analyticType === 'dimension'
+                                                                ? 'bg-blue-500'
+                                                                : 'bg-purple-500')
+                                                        }
+                                                    >
+                                                        {f.value.analyticType}
+                                                        <ChevronUpDownIcon className="ml-2 w-3" />
+                                                    </span>
+                                                </DropdownContext>
+                                            </div>
+                                            <div>
+                                                <DropdownContext
+                                                    options={semanticTypeList}
+                                                    onSelect={(value) => {
+                                                        onMetaChange(f.value.fid, f.fIndex, {
+                                                            semanticType: value as IMutField['semanticType'],
+                                                        });
+                                                    }}
+                                                >
+                                                    <span
+                                                        className={
+                                                            'cursor-pointer inline-flex px-2.5 py-0.5 text-xs font-medium mt-1 rounded-full text-xs ' +
+                                                            getSemanticColors(f.value)
+                                                        }
+                                                    >
+                                                        {f.value.semanticType}
+                                                        <ChevronUpDownIcon className="ml-2 w-3" />
+                                                    </span>
+                                                </DropdownContext>
+                                            </div>
+                                        </div>
+                                    )}
+                                </th>
+                            ))}
+                        </tr>
+                    ))}
                 </thead>
                 <tbody className="divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-zinc-900">
                     {data.slice(from, to + 1).map((row, index) => (
-                        <tr className={"divide-x divide-gray-200 dark:divide-gray-700 " + (index % 2 ? "bg-gray-50 dark:bg-gray-900" : "")} key={index}>
+                        <tr
+                            className={
+                                'divide-x divide-gray-200 dark:divide-gray-700 ' +
+                                (index % 2 ? 'bg-gray-50 dark:bg-gray-900' : '')
+                            }
+                            key={index}
+                        >
                             {metas.map((field) => (
                                 <td
                                     key={field.fid + index}
                                     className={
                                         getHeaderType(field) +
-                                        " whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6"
+                                        ' whitespace-nowrap py-2 pl-4 pr-3 text-xs text-gray-500 dark:text-gray-300 sm:pl-6'
                                     }
                                 >
                                     {`${row[field.fid]}`}

package/src/components/dataTable/pagination.tsx

@@ -12,7 +12,7 @@ export default function Pagination(props: PaginationProps) {
     const { t } = useTranslation();
     return (
         <nav
-            className="flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
+            className="sticky inset-x-0	flex items-center justify-between border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-zinc-900 px-4 py-3 sm:px-6"
             aria-label="Pagination"
         >
             <div className="hidden sm:block">

package/src/components/limitSetting.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+export default function LimitSetting(props: { value: number; setValue: (v: number) => void }) {
+    const { t } = useTranslation('translation', { keyPrefix: 'main.tabpanel.settings' });
+
+    return (
+        <div className=" mt-2">
+            <input
+                className="w-full h-2 bg-blue-100 appearance-none"
+                type="range"
+                name="limit"
+                value={props.value > 0 ? props.value : 0}
+                min="1"
+                max="50"
+                disabled={props.value < 0}
+                step="1"
+                onChange={(e) => {
+                    const v = parseInt(e.target.value);
+                    if (!isNaN(v)) {
+                        props.setValue(v);
+                    }
+                }}
+            />
+            <output className="text-sm ml-1" htmlFor="height">
+                <input
+                    type="checkbox"
+                    className="h-4 w-4 mr-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600"
+                    checked={props.value > 0}
+                    onChange={(e) => {
+                        props.setValue(e.target.checked ? 30 : -1);
+                    }}
+                ></input>
+                {`${t('limit')}${props.value > 0 ? `: ${props.value}` : ''}`}
+            </output>
+        </div>
+    );
+}

package/src/dataSource/utils.ts

@@ -1,7 +1,6 @@
-import { IRow, IMutField } from "../interfaces";
-import { inferMeta } from "../lib/inferMeta";
-import { guardDataKeys } from "../utils/dataPrep";
-
+import { IRow, IMutField } from '../interfaces';
+import { inferMeta } from '../lib/inferMeta';
+import { flatKeys, guardDataKeys } from '../utils/dataPrep';
 
 export function transData(dataSource: IRow[]): {
     dataSource: IRow[];
@@ -17,31 +16,34 @@ export function transData(dataSource: IRow[]): {
     // const rawKeys = Object.keys(sampleRecord);
     // let flatColKeys: string[] = flatNestKeys(sampleRecord);
 
-    const keys = Object.keys(sampleRecord);
+    const keys = flatKeys(sampleRecord);
     const metas = inferMeta({
         dataSource,
         fields: keys.map((k) => ({
-            fid: k,
-            key: k,
-            analyticType: "?",
-            semanticType: "?",
+            fid: k[k.length - 1],
+            key: k[k.length - 1],
+            analyticType: '?',
+            semanticType: '?',
+            path: k,
+            basename: k[k.length - 1],
+            name: k.join('.'),
         })),
-    })
+    });
     const { safeData, safeMetas } = guardDataKeys(dataSource, metas);
     const finalData: IRow[] = [];
     for (let record of safeData) {
         const newRecord: IRow = {};
         for (let field of safeMetas) {
-            if (field.semanticType === "quantitative") {
+            if (field.semanticType === 'quantitative') {
                 newRecord[field.fid] = Number(record[field.fid]);
             } else {
-                newRecord[field.fid] = record[field.fid];//getValueByKeyPath(record, field.fid);// record[field.fid];
+                newRecord[field.fid] = record[field.fid]; //getValueByKeyPath(record, field.fid);// record[field.fid];
             }
         }
         finalData.push(newRecord);
     }
     return {
         dataSource: finalData,
-        fields: safeMetas
+        fields: safeMetas,
     };
 }

package/src/hooks/index.ts

@@ -0,0 +1,10 @@
+import { useState, useEffect } from 'react';
+
+export function useDebounceValue<T>(value: T, timeout = 200): T {
+    const [innerValue, setInnerValue] = useState(value);
+    useEffect(() => {
+        const handler = setTimeout(() => setInnerValue(value), timeout);
+        return () => clearTimeout(handler);
+    }, [value]);
+    return innerValue;
+}

package/src/interfaces.ts

@@ -34,18 +34,22 @@ export interface IMutField {
     fid: string;
     key?: string;
     name?: string;
+    basename?: string;
     disable?: boolean;
     semanticType: ISemanticType;
     analyticType: IAnalyticType;
+    path?: string[];
 }
 
 export interface IUncertainMutField {
     fid: string;
     key?: string;
     name?: string;
+    basename?: string;
     disable?: boolean;
     semanticType: ISemanticType | '?';
     analyticType: IAnalyticType | '?';
+    path: string[];
 }
 
 export type IExpParamter =
@@ -90,6 +94,8 @@ export interface IField {
     cmp?: (a: any, b: any) => number;
     computed?: boolean;
     expression?: IExpression;
+    basename?: string;
+    path?: [],
 }
 
 export interface IViewField extends IField {
@@ -215,6 +221,16 @@ export interface IVisSpec {
     readonly config: DeepReadonly<IVisualConfig>;
 }
 
+export type SetToArray<T> = (
+    T extends object ? (
+      T extends Set<infer U> ? Array<U> : { [K in keyof T]: SetToArray<T[K]> }
+    ) : T
+);
+
+export type IVisSpecForExport = SetToArray<IVisSpec>;
+
+export type IFilterFieldForExport = SetToArray<IFilterField>;
+
 export enum ISegmentKey {
     vis = 'vis',
     data = 'data',

package/src/lib/inferMeta.ts

@@ -1,4 +1,5 @@
 import { IAnalyticType, IMutField, IRow, ISemanticType, IUncertainMutField } from '../interfaces';
+import { getValueByKeyPath } from '../utils/dataPrep';
 
 const COMMON_TIME_FORMAT: RegExp[] = [
     /^\d{4}-\d{2}-\d{2}$/, // YYYY-MM-DD
@@ -55,12 +56,12 @@ function inferAnalyticTypeFromSemanticType(semanticType: ISemanticType): IAnalyt
     }
 }
 
-export function inferSemanticType(data: IRow[], fid: string): ISemanticType {
-    const values = data.map((row) => row[fid]);
+export function inferSemanticType(data: IRow[], path: string[]): ISemanticType {
+    const values = data.map((row) => getValueByKeyPath(row, path));
 
     let st: ISemanticType = isNumericArray(values) ? 'quantitative' : 'nominal';
     if (st === 'nominal') {
-        if (isDateTimeArray(data.map((row) => `${row[fid]}`))) st = 'temporal';
+        if (isDateTimeArray(data.map((row) => `${getValueByKeyPath(row, path)}`))) st = 'temporal';
     }
     return st;
 }
@@ -70,7 +71,7 @@ export function inferMeta(props: { dataSource: IRow[]; fields: IUncertainMutFiel
     const finalFieldMetas: IMutField[] = [];
     for (let field of fields) {
         let semanticType: ISemanticType =
-            field.semanticType === '?' ? inferSemanticType(dataSource, field.fid) : field.semanticType;
+            field.semanticType === '?' ? inferSemanticType(dataSource, field.path) : field.semanticType;
         let analyticType: IAnalyticType = inferAnalyticTypeFromSemanticType(semanticType);
 
         finalFieldMetas.push({
@@ -79,6 +80,8 @@ export function inferMeta(props: { dataSource: IRow[]; fields: IUncertainMutFiel
             name: field.name ? field.name : field.fid,
             analyticType,
             semanticType,
+            basename: field.basename || field.name || field.fid,
+            path: field.path,
         });
     }
     return finalFieldMetas;

package/src/lib/viewQuery.ts

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

package/src/locales/en-US.json

@@ -154,6 +154,7 @@
                     "export_chart_as": "Export as {{type}}",
                     "export_code": "Export Code"
                 },
+                "limit": "Limit",
                 "size": "Resize",
                 "size_setting": {
                     "width": "Width",

package/src/locales/ja-JP.json

@@ -153,6 +153,7 @@
                     "export_chart_as": "{{type}}としてエクスポート",
                     "export_code": "コードをエクスポート"
                 },
+                "limit": "上限",
                 "size": "サイズ変更",
                 "size_setting": {
                     "width": "幅",

package/src/locales/zh-CN.json

@@ -154,6 +154,7 @@
                     "export_chart_as": "导出 {{type}}",
                     "export_code": "导出代码"
                 },
+                "limit": "上限",
                 "size": "调整尺寸",
                 "size_setting": {
                     "width": "宽度",

package/src/renderer/hooks.ts

@@ -1,10 +1,10 @@
 import { useState, useEffect, useMemo, useRef } from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import type { DeepReadonly, IFilterField, IRow, IViewField } from '../interfaces';
-import { applyFilter, applyViewQuery, transformDataService } from '../services';
+import { applyFilter, applySort, applyViewQuery, transformDataService } from '../services';
 import { getMeaAggKey } from '../utils';
 import { useAppRootContext } from '../components/appRoot';
-
+import { useDebounceValue } from '../hooks';
 
 interface UseRendererProps {
     data: IRow[];
@@ -13,6 +13,8 @@ interface UseRendererProps {
     viewMeasures: IViewField[];
     filters: readonly DeepReadonly<IFilterField>[];
     defaultAggregated: boolean;
+    sort: 'none' | 'ascending' | 'descending';
+    limit: number;
 }
 
 interface UseRendererResult {
@@ -21,10 +23,21 @@ interface UseRendererResult {
 }
 
 export const useRenderer = (props: UseRendererProps): UseRendererResult => {
-    const { data, allFields, viewDimensions, viewMeasures, filters, defaultAggregated } = props;
+    const {
+        data,
+        allFields,
+        viewDimensions,
+        viewMeasures,
+        filters,
+        defaultAggregated,
+        sort,
+        limit: storeLimit,
+    } = props;
     const [computing, setComputing] = useState(false);
     const taskIdRef = useRef(0);
 
+    const limit = useDebounceValue(storeLimit);
+
     const [viewData, setViewData] = useState<IRow[]>([]);
 
     const appRef = useAppRootContext();
@@ -50,10 +63,26 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
                 return applyViewQuery(d, dims.concat(meas), {
                     op: defaultAggregated ? 'aggregate' : 'raw',
                     groupBy: dims.map((f) => f.fid),
-                    measures: meas.map((f) => ({ field: f.fid, agg: f.aggName as any, asFieldKey: getMeaAggKey(f.fid, f.aggName!) })),
+                    measures: meas.map((f) => ({
+                        field: f.fid,
+                        agg: f.aggName as any,
+                        asFieldKey: getMeaAggKey(f.fid, f.aggName!),
+                    })),
                 });
             })
-            .then(data => {
+            .then((data) => {
+                if (limit > 0 && sort !== 'none' && viewMeasures.length > 0) {
+                    return applySort(data, viewMeasures, sort);
+                }
+                return data;
+            })
+            .then((data) => {
+                if (limit > 0) {
+                    return data.slice(0, limit);
+                }
+                return data;
+            })
+            .then((data) => {
                 if (taskId !== taskIdRef.current) {
                     return;
                 }
@@ -62,7 +91,8 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
                     setComputing(false);
                     setViewData(data);
                 });
-            }).catch((err) => {
+            })
+            .catch((err) => {
                 if (taskId !== taskIdRef.current) {
                     return;
                 }
@@ -76,7 +106,7 @@ export const useRenderer = (props: UseRendererProps): UseRendererResult => {
         return () => {
             taskIdRef.current++;
         };
-    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated]);
+    }, [data, filters, viewDimensions, viewMeasures, defaultAggregated, limit]);
 
     return useMemo(() => {
         return {