@kanaries/graphic-walker 0.3.0 → 0.3.1

package/dist/components/pivotTable/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/pivotTable/inteface.d.ts

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

package/dist/components/pivotTable/leftTree.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { INestNode } from './inteface';
+export interface TreeProps {
+    data: INestNode;
+}
+declare const LeftTree: React.FC<TreeProps>;
+export default LeftTree;

package/dist/components/pivotTable/store.d.ts

@@ -0,0 +1,24 @@
+import { IGroupByQuery, INestNode } from './inteface';
+import { IField, IRow } from '../../interfaces';
+import React from 'react';
+declare class PivotTableStore {
+    leftTree: INestNode | null;
+    topTree: INestNode | null;
+    metricTable: any[][];
+    dataSource: IRow[];
+    metas: IField[];
+    viewData: IRow[];
+    constructor();
+    init(dataSource: IRow[], metas: IField[]): void;
+    createTree(query: IGroupByQuery, viewData: IRow[]): void;
+    createTopTree(query: IGroupByQuery, viewData: any): void;
+    createLeftTree(query: IGroupByQuery, viewData: any): void;
+    queryData(leftQuery: IGroupByQuery, topQuery: IGroupByQuery): Promise<void>;
+}
+export interface PivotTableDataProps {
+    data: IRow[];
+    metas: IField[];
+}
+export declare const PivotTableStoreWrapper: React.FC<PivotTableDataProps>;
+export declare function usePivotTableStore(): PivotTableStore;
+export {};

package/dist/components/pivotTable/topTree.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { INestNode } from './inteface';
+export interface TreeProps {
+    data: INestNode;
+}
+declare const TopTree: React.FC<TreeProps>;
+export default TopTree;

package/dist/components/pivotTable/utils.d.ts

@@ -0,0 +1,4 @@
+import { IRow } from "../../interfaces";
+import { INestNode } from "./inteface";
+export declare function insertNode(tree: INestNode, layerKeys: string[], nodeData: IRow, depth: number): void;
+export declare function buildNestTree(layerKeys: string[], data: IRow[]): INestNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanaries/graphic-walker",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "scripts": {
     "dev:front_end": "vite --host",
     "dev": "npm run dev:front_end",

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

@@ -11,17 +11,15 @@ if (!import.meta.env.DEV) {
 
 // Example: Detect if Concurrent Mode is available
 const isConcurrentModeAvailable = 'createRoot' in ReactDOM;
-console.log(isConcurrentModeAvailable)
 
 // 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(
-        <React.StrictMode>
-            <GraphicWalker themeKey="g2" />
-        </React.StrictMode>
-    );
+    root.render(<GraphicWalker themeKey="g2" />);
 } else {
     ReactDOM.render(
         <React.StrictMode>
@@ -30,10 +28,3 @@ if (isConcurrentModeAvailable) {
         document.getElementById('root') as HTMLElement
     );
 }
-
-// ReactDOM.render(
-//     <React.StrictMode>
-//         <GraphicWalker themeKey="g2" />
-//     </React.StrictMode>,
-//     document.getElementById("root")
-// );