@kanaries/graphic-walker 0.2.19 → 0.3.1

package/dist/main.d.ts

@@ -1 +1 @@
-import "./index.css";
+import './index.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.2.19",
+  "version": "0.3.1",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",
@@ -70,8 +70,8 @@
     "vite": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": ">=17.0.0 <19.0.0",
+    "react-dom": ">=17.0.0 <19.0.0",
     "styled-components": "^5.3.6"
   }
 }

package/src/components/pivotTable/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { StoreWrapper, useGlobalStore } from '../../store';
+import { PivotTableDataProps, PivotTableStoreWrapper, usePivotTableStore } from './store';
+import { observer } from 'mobx-react-lite';
+import LeftTree from './leftTree';
+import TopTree from './topTree';
+
+interface PivotTableProps extends PivotTableDataProps {}
+const PivotTable: React.FC = observer((props) => {
+    const store = usePivotTableStore();
+    const { vizStore } = useGlobalStore();
+    const { draggableFieldState } = vizStore;
+    const { rows, columns } = draggableFieldState;
+
+    const { leftTree, topTree, metricTable } = store;
+    return (
+        <div>
+            <div>
+                <h1>left</h1>
+                {leftTree && <LeftTree data={leftTree} />}
+            </div>
+            <div>
+                <h1>top</h1>
+                {topTree && <TopTree data={topTree} />}
+            </div>
+            <div>
+                <h1>metric</h1>
+                <code>{JSON.stringify(metricTable, null, 2)}</code>
+            </div>
+        </div>
+    );
+});
+
+const PivotTableApp: React.FC<PivotTableProps> = (props) => {
+    return (
+        <PivotTableStoreWrapper {...props}>
+            <PivotTable />
+        </PivotTableStoreWrapper>
+    );
+};

package/src/components/pivotTable/inteface.ts

@@ -0,0 +1,12 @@
+import { IAggregator } from "../../interfaces";
+
+export interface INestNode {
+    key: string;
+    value: string;
+    children: INestNode[];
+}
+
+export interface IGroupByQuery {
+    groupBy: string[];
+    measures: { field: string; agg: IAggregator }[];
+}

package/src/components/pivotTable/leftTree.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { INestNode } from './inteface';
+
+export interface TreeProps {
+    data: INestNode;
+}
+const LeftTree: React.FC<TreeProps> = (props) => {
+    return <div>{JSON.stringify(props.data)}</div>;
+};
+
+export default LeftTree;

package/src/components/pivotTable/store.tsx

@@ -0,0 +1,65 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { IGroupByQuery, INestNode } from './inteface';
+import { IAggQuery } from '../../lib/interfaces';
+import { queryView } from '../../lib/viewQuery';
+import { IField, IRow } from '../../interfaces';
+import React, { createContext, useContext, useEffect } from 'react';
+
+class PivotTableStore {
+    public leftTree: INestNode | null = null;
+    public topTree: INestNode | null = null;
+    public metricTable: any[][] = [];
+    public dataSource: IRow[] = [];
+    public metas: IField[] = [];
+    public viewData: IRow[] = [];
+    constructor() {
+        makeAutoObservable(this, {
+            leftTree: observable.ref,
+            topTree: observable.ref,
+            metricTable: observable.ref,
+            dataSource: observable.ref,
+            metas: observable.ref,
+        });
+    }
+    public init(dataSource: IRow[], metas: IField[]) {
+        this.dataSource = dataSource ?? [];
+        this.metas = metas ?? [];
+        this.leftTree = null;
+        this.metricTable = [];
+        this.topTree = null;
+        this.viewData = [];
+    }
+    public createTree(query: IGroupByQuery, viewData: IRow[]) {}
+
+    public createTopTree(query: IGroupByQuery, viewData) {}
+    public createLeftTree(query: IGroupByQuery, viewData) {}
+    public async queryData(leftQuery: IGroupByQuery, topQuery: IGroupByQuery) {
+        const viewQuery: IAggQuery = {
+            op: 'aggregate',
+            groupBy: leftQuery.groupBy.concat(topQuery.groupBy),
+            agg: Object.fromEntries(leftQuery.measures.concat(topQuery.measures).map((mea) => [mea.field, mea.agg])),
+        };
+        const viewData = queryView(this.dataSource, this.metas, viewQuery);
+        this.viewData = viewData;
+    }
+}
+
+const initStore = new PivotTableStore();
+const PTContext = createContext<PivotTableStore>(initStore);
+
+export interface PivotTableDataProps {
+    data: IRow[];
+    metas: IField[];
+}
+export const PivotTableStoreWrapper: React.FC<PivotTableDataProps> = (props) => {
+    const { data, metas } = props;
+    useEffect(() => {
+        initStore.init(data, metas);
+    }, [data, metas]);
+    return <PTContext.Provider value={initStore}>{props.children}</PTContext.Provider>;
+};
+
+
+export function usePivotTableStore () {
+    return useContext(PTContext)
+}

package/src/components/pivotTable/topTree.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { INestNode } from './inteface';
+
+export interface TreeProps {
+    data: INestNode;
+}
+const TopTree: React.FC<TreeProps> = (props) => {
+    return <div>{JSON.stringify(props.data)}</div>;
+};
+
+export default TopTree;

package/src/components/pivotTable/utils.ts

@@ -0,0 +1,37 @@
+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 - 1) {
+        // tree.key = nodeData[layerKeys[depth]];
+        return;   
+    }
+    const key = nodeData[layerKeys[depth]];
+    let child = tree.children.find((c) => c.key === key);
+    if (!child) {
+        // insertNode(child, layerKeys, nodeData, depth + 1);
+        // return;
+        child = {
+            key: `${key_prefix}${key}`,
+            value: key,
+            children: [],
+        }
+        tree.children.push(child);
+    }
+    insertNode(child, layerKeys, nodeData, depth + 1);
+
+}
+
+export function buildNestTree (layerKeys: string[], data: IRow[]): INestNode {
+    const tree: INestNode = {
+        key: 'root',
+        value: 'root',
+        children: [],
+    };
+    for (let row of data) {
+        insertNode(tree, layerKeys, row, 0);
+    }
+    return tree;
+}

package/src/main.tsx

@@ -1,17 +1,30 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { GraphicWalker } from "./index";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { GraphicWalker } from './index';
 
-import { inject } from "@vercel/analytics";
-import "./index.css";
+import { inject } from '@vercel/analytics';
+import './index.css';
 
 if (!import.meta.env.DEV) {
     inject();
 }
 
-ReactDOM.render(
-    <React.StrictMode>
-        <GraphicWalker themeKey="g2" />
-    </React.StrictMode>,
-    document.getElementById("root")
-);
+// Example: Detect if Concurrent Mode is available
+const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
+
+// Use the new ReactDOM.createRoot API if available, otherwise fall back to the old ReactDOM.render API
+if (isConcurrentModeAvailable) {
+    if (import.meta.env.DEV) {
+        console.warn('React 18+ detected, remove strict mode if you meet drag and drop issue. more info at https://docs.kanaries.net/graphic-walker/faq/graphic-walker-react-18')
+    }
+    // @ts-ignore
+    const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+    root.render(<GraphicWalker themeKey="g2" />);
+} else {
+    ReactDOM.render(
+        <React.StrictMode>
+            <GraphicWalker themeKey="g2" />
+        </React.StrictMode>,
+        document.getElementById('root') as HTMLElement
+    );
+}

package/src/models/visSpecHistory.ts

@@ -130,6 +130,7 @@ export class VisSpecWithHistory {
 
     public clone () {
         const nextVSWH = new VisSpecWithHistory(this.frame);
+        nextVSWH.snapshots = this.snapshots.slice().map(s => ({ ...s }));
         nextVSWH.cursor = this.cursor;
         return nextVSWH;
     }