@hpcc-js/dgrid2 0.0.0

package/package.json

@@ -0,0 +1,62 @@
+{
+    "name": "@hpcc-js/dgrid2",
+    "version": "0.0.0",
+    "description": "hpcc-js - DGrid2",
+    "main": "dist/index.js",
+    "module": "dist/index.es6",
+    "unpkg": "dist/index.min.js",
+    "jsdelivr": "dist/index.min.js",
+    "types": "types/index.d.ts",
+    "typesVersions": {
+        "<3.8": {
+            "*": [
+                "types-3.4/index.d.ts"
+            ]
+        }
+    },
+    "files": [
+        "dist/*",
+        "types/*",
+        "types-3.4/*",
+        "src/*"
+    ],
+    "scripts": {
+        "clean": "rimraf lib* types dist *.tsbuildinfo",
+        "compile-es6": "tsc --module es6 --outDir ./lib-es6",
+        "compile-es6-watch": "npm run compile-es6 -- -w",
+        "compile-umd": "tsc --module umd --outDir ./lib-umd",
+        "compile-umd-watch": "npm run compile-umd -- -w",
+        "bundle": "rollup -c",
+        "bundle-watch": "npm run bundle -- -w",
+        "minimize": "terser dist/index.js -c -m --source-map \"content='dist/index.js.map',url='index.min.js.map'\" -o dist/index.min.js",
+        "gen-legacy-types": "downlevel-dts ./types ./types-3.4",
+        "build": "npm run compile-es6 && npm run bundle",
+        "watch": "npm-run-all compile-es6 -p compile-es6-watch bundle-watch",
+        "stamp": "node ../../node_modules/@hpcc-js/bundle/src/stamp.js",
+        "lint": "eslint src/**/*.ts",
+        "docs": "typedoc --options tdoptions.json .",
+        "update": "npx npm-check-updates -u -t minor"
+    },
+    "dependencies": {
+        "@hpcc-js/common": "^2.67.0",
+        "@hpcc-js/util": "^2.46.2"
+    },
+    "devDependencies": {
+        "react-data-grid": "7.0.0-beta.11",
+        "@githubocto/flat-ui": "0.14.0",
+        "@hpcc-js/bundle": "^2.11.1",
+        "preact": "10.7.1",
+        "tslib": "2.3.1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/hpcc-systems/Visualization.git"
+    },
+    "author": "Gordon Smith <gordonjsmith@gmail.com>",
+    "contributors": [],
+    "license": "Apache-2.0",
+    "bugs": {
+        "url": "https://github.com/hpcc-systems/Visualization/issues"
+    },
+    "homepage": "https://github.com/hpcc-systems/Visualization"
+}

package/src/__package__.ts

@@ -0,0 +1,3 @@
+export const PKG_NAME = "@hpcc-js/dgrid2";
+export const PKG_VERSION = "0.0.0";
+export const BUILD_VERSION = "2.102.11";

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./__package__";
+export * from "./table";

package/src/table.css

@@ -0,0 +1,10 @@
+.dgrid2_Table .rdg {
+    font-family: monospace, 'Courier New', Courier;
+}
+
+.dgrid2_Table .rdg-checkbox-label .rdg-checkbox {
+    block-size: 16px;
+    inline-size: 16px;
+    border-width: 2px;
+    box-shadow: inset 0 0 0 3px var(--rdg-background-color);
+}

package/src/table.md

@@ -0,0 +1,57 @@
+# Table
+
+**Class**: `Table`
+
+<ClientOnly>
+  <hpcc-vitepress style="width:100%;height:600px">
+    <div id="placeholder" style="height:400px">
+    </div>
+    <script type="module">
+        import { Table } from "@hpcc-js/dgrid2";
+        
+        new Table()
+            .target("placeholder")
+            .columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
+            .data([
+                ["A", -25, -23, -25, -22],
+                ["B", -20, -21, -25, -21],
+                ["C", -18, -20, -25, -19],
+                ["D", -17, -17, -25, -18],
+                ["E", -16, -15, -19, -18],
+                ["F", -15, -14, -16, -16],
+                ["G", -12, -10, -14, -15],
+                ["H", -12, -8, -13, -15],
+                ["I", -11, -6, -12, -12],
+                ["J", -11, -6, -8, -12],
+                ["K", -9, 0, -5, -10],
+                ["L", -5, 1, -5, -9],
+                ["M", -5, 2, -4, -8],
+                ["N", -1, 4, -2, -7],
+                ["O", 3, 7, 0, -5],
+                ["P", 3, 8, 0, -3],
+                ["Q", 4, 8, 7, 0],
+                ["R", 6, 9, 11, 1],
+                ["S", 9, 11, 11, 5],
+                ["T", 10, 20, 12, 6],
+                ["U", 12, 20, 16, 8],
+                ["V", 12, 21, 18, 14],
+                ["W", 14, 21, 18, 18],
+                ["X", 15, 23, 21, 18],
+                ["Y", 21, 23, 23, 21],
+                ["Z", 23, 24, 24, 24]
+            ])
+            .render()
+            ;
+    </script>
+  </hpcc-vitepress>
+</ClientOnly>
+
+::: tip
+See [Getting Started](../README) for details on how to include @hpcc-js/dgrid2 in your application
+:::
+
+## `Table`
+
+## Events
+
+## Credits

package/src/table.tsx

@@ -0,0 +1,165 @@
+import { HTMLWidget, publish } from "@hpcc-js/common";
+import * as React from "preact/compat";
+import DataGrid, { Column, SelectColumn, SortColumn } from "react-data-grid";
+
+import "../src/table.css";
+
+export type QuerySortItem = { attribute: string, descending: boolean };
+function copyAndSort<T>(items: T[], attribute: string, descending?: boolean): T[] {
+    const key = attribute as keyof T;
+    return [...items].sort((a: T, b: T) => {
+        if (a[key] < b[key]) {
+            return descending ? 1 : -1;
+        } else if (a[key] > b[key]) {
+            return descending ? -1 : 1;
+        }
+        return 0;
+    });
+}
+
+interface ReactTableProps {
+    columns: string[];
+    data: Array<string | number>[];
+    onRowClickCallback: (row: any) => void;
+    sort?: QuerySortItem,
+    darkMode?: boolean;
+    multiSelect?: boolean;
+}
+
+const ReactTable: React.FunctionComponent<ReactTableProps> = ({
+    columns,
+    data,
+    onRowClickCallback,
+    sort,
+    darkMode = false,
+    multiSelect = false
+}) => {
+    const [listColumns, setListColumns] = React.useState<Column<object>[]>([]);
+    const [sortColumn, setSortColumn] = React.useState<SortColumn>();
+    const [items, setItems] = React.useState<any[]>([]);
+    const [selectedRows, setSelectedRows] = React.useState<ReadonlySet<number>>(() => new Set());
+
+    //  Columns  ---
+    React.useEffect(() => {
+        setListColumns([
+            ...multiSelect ? [SelectColumn] : [],
+            ...columns.map(column => ({
+                key: column,
+                name: column,
+                resizable: true,
+                sortable: true,
+                minWidth: 80,
+            }))
+        ]);
+    }, [columns, multiSelect]);
+
+    const onSortColumnsChange = React.useCallback((sortColumns: SortColumn[]) => {
+        const futureSortColumn = sortColumns.slice(-1)[0];
+        const sorted = futureSortColumn !== undefined;
+        const isSortedDescending: boolean = futureSortColumn?.direction === "DESC";
+        setSortColumn(futureSortColumn);
+        setItems(copyAndSort(items, sorted ? futureSortColumn.columnKey : "key", sorted ? isSortedDescending : false));
+    }, [items]);
+
+    const rowKeyGetter = React.useCallback((row: any) => {
+        return row.key;
+    }, []);
+
+    const onSelectedRowsChange = React.useCallback((selectedRows: Set<any>) => {
+        setSelectedRows(selectedRows);
+        onRowClickCallback(items.filter(row => selectedRows.has(rowKeyGetter(row))));
+    }, [items, onRowClickCallback, rowKeyGetter]);
+
+    const onRowClick = React.useCallback((row, column) => {
+        onRowClickCallback(items.filter(item => rowKeyGetter(item) === rowKeyGetter(row)));
+    }, [items, onRowClickCallback, rowKeyGetter]);
+
+    //  Rows  ---
+    React.useEffect(() => {
+        let items = data.map((row, index) => {
+            const retVal = {
+                key: index
+            };
+            columns.forEach((column, index) => {
+                retVal[column] = row[index];
+            });
+            return retVal;
+        });
+        if (sort?.attribute) {
+            items = copyAndSort(items, sort.attribute, sort.descending);
+        }
+        setItems(items);
+    }, [columns, data, sort]);
+
+    return <DataGrid
+        columns={listColumns}
+        headerRowHeight={24}
+        rows={items}
+        rowKeyGetter={rowKeyGetter}
+        rowHeight={20}
+        className={darkMode ? "rdg-dark" : "rdg-light"}
+        sortColumns={sortColumn ? [sortColumn] : []}
+        onSortColumnsChange={onSortColumnsChange}
+        selectedRows={selectedRows}
+        onSelectedRowsChange={multiSelect ? onSelectedRowsChange : undefined}
+        onRowClick={multiSelect ? undefined : onRowClick}
+        aria-describedby={""}
+        aria-label={""}
+        aria-labelledby={""}
+        style={{ height: "100%" }}
+    />;
+};
+
+export class Table extends HTMLWidget {
+
+    protected _div;
+
+    constructor() {
+        super();
+    }
+
+    @publish(false, "boolean", "Dark Mode")
+    darkMode: publish<this, boolean>;
+    @publish(false, "boolean", "Multiple Selection")
+    multiSelect: publish<this, boolean>;
+
+    _prevRow;
+    _prevColumn;
+    private renderTable() {
+        return <ReactTable columns={this.columns()} data={this.data()} darkMode={this.darkMode()} onRowClickCallback={(row, column = "") => {
+            if (this._prevRow && JSON.stringify(this._prevRow) !== JSON.stringify(row)) {
+                this.click(this._prevRow, this._prevColumn ?? "", false);
+            }
+            if (row) {
+                this.click(row, column, true);
+            }
+            this._prevRow = row;
+            this._prevColumn = column;
+        }} />;
+    }
+
+    enter(domNode, element) {
+        super.enter(domNode, element);
+        this._div = element
+            .append("div")
+            ;
+    }
+
+    update(domNode, element) {
+        super.update(domNode, element);
+        this._div.style("width", this.width() + "px");
+        this._div.style("height", this.height() + "px");
+        React.render(this.renderTable(), this._div.node());
+    }
+
+    exit(domNode, element) {
+        React.unmountComponentAtNode(this._div.node());
+        this._div.remove();
+        super.exit(domNode, element);
+    }
+
+    //  Events  ---
+    click(row, col, sel) {
+    }
+}
+Table.prototype._class += " dgrid2_Table";

package/src/test.ts

@@ -0,0 +1,41 @@
+import { Table } from "./table";
+
+export { Test1 as Test };
+
+export class Test1 extends Table {
+
+    constructor() {
+        super();
+        this
+            .columns(["Category", "Series-1", "Series-2", "Series-3", "Series-4"])
+            .data([
+                ["A", -25, -23, -25, -22],
+                ["B", -20, -21, -25, -21],
+                ["C", -18, -20, -25, -19],
+                ["D", -17, -17, -25, -18],
+                ["E", -16, -15, -19, -18],
+                ["F", -15, -14, -16, -16],
+                ["G", -12, -10, -14, -15],
+                ["H", -12, -8, -13, -15],
+                ["I", -11, -6, -12, -12],
+                ["J", -11, -6, -8, -12],
+                ["K", -9, 0, -5, -10],
+                ["L", -5, 1, -5, -9],
+                ["M", -5, 2, -4, -8],
+                ["N", -1, 4, -2, -7],
+                ["O", 3, 7, 0, -5],
+                ["P", 3, 8, 0, -3],
+                ["Q", 4, 8, 7, 0],
+                ["R", 6, 9, 11, 1],
+                ["S", 9, 11, 11, 5],
+                ["T", 10, 20, 12, 6],
+                ["U", 12, 20, 16, 8],
+                ["V", 12, 21, 18, 14],
+                ["W", 14, 21, 18, 18],
+                ["X", 15, 23, 21, 18],
+                ["Y", 21, 23, 23, 21],
+                ["Z", 23, 24, 24, 24]
+            ])
+            ;
+    }
+}

package/types/__package__.d.ts

@@ -0,0 +1,4 @@
+export declare const PKG_NAME = "@hpcc-js/dgrid2";
+export declare const PKG_VERSION = "0.0.0";
+export declare const BUILD_VERSION = "2.102.11";
+//# sourceMappingURL=__package__.d.ts.map

package/types/__package__.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"__package__.d.ts","sourceRoot":"","sources":["../src/__package__.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,QAAQ,oBAAoB,CAAC;AAC1C,eAAO,MAAM,WAAW,UAAU,CAAC;AACnC,eAAO,MAAM,aAAa,aAAa,CAAC"}

package/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./__package__";
+export * from "./table";
+//# sourceMappingURL=index.d.ts.map

package/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}

package/types/table.d.ts

@@ -0,0 +1,20 @@
+import { HTMLWidget, publish } from "@hpcc-js/common";
+import "../src/table.css";
+export declare type QuerySortItem = {
+    attribute: string;
+    descending: boolean;
+};
+export declare class Table extends HTMLWidget {
+    protected _div: any;
+    constructor();
+    darkMode: publish<this, boolean>;
+    multiSelect: publish<this, boolean>;
+    _prevRow: any;
+    _prevColumn: any;
+    private renderTable;
+    enter(domNode: any, element: any): void;
+    update(domNode: any, element: any): void;
+    exit(domNode: any, element: any): void;
+    click(row: any, col: any, sel: any): void;
+}
+//# sourceMappingURL=table.d.ts.map

package/types/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../src/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAItD,OAAO,kBAAkB,CAAC;AAE1B,oBAAY,aAAa,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,OAAO,CAAA;CAAE,CAAC;AA0GvE,qBAAa,KAAM,SAAQ,UAAU;IAEjC,SAAS,CAAC,IAAI,MAAC;;IAOf,QAAQ,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEjC,WAAW,EAAE,OAAO,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAEpC,QAAQ,MAAC;IACT,WAAW,MAAC;IACZ,OAAO,CAAC,WAAW;IAanB,KAAK,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOtB,MAAM,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOvB,IAAI,CAAC,OAAO,KAAA,EAAE,OAAO,KAAA;IAOrB,KAAK,CAAC,GAAG,KAAA,EAAE,GAAG,KAAA,EAAE,GAAG,KAAA;CAEtB"}

package/types/test.d.ts

@@ -0,0 +1,6 @@
+import { Table } from "./table";
+export { Test1 as Test };
+export declare class Test1 extends Table {
+    constructor();
+}
+//# sourceMappingURL=test.d.ts.map

package/types/test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"test.d.ts","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,OAAO,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC;AAEzB,qBAAa,KAAM,SAAQ,KAAK;;CAoC/B"}

package/types-3.4/__package__.d.ts

@@ -0,0 +1,4 @@
+export declare const PKG_NAME = "@hpcc-js/dgrid2";
+export declare const PKG_VERSION = "0.0.0";
+export declare const BUILD_VERSION = "2.102.11";
+//# sourceMappingURL=__package__.d.ts.map

package/types-3.4/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./__package__";
+export * from "./table";
+//# sourceMappingURL=index.d.ts.map

package/types-3.4/table.d.ts

@@ -0,0 +1,20 @@
+import { HTMLWidget, publish } from "@hpcc-js/common";
+import "../src/table.css";
+export declare type QuerySortItem = {
+    attribute: string;
+    descending: boolean;
+};
+export declare class Table extends HTMLWidget {
+    protected _div: any;
+    constructor();
+    darkMode: publish<this, boolean>;
+    multiSelect: publish<this, boolean>;
+    _prevRow: any;
+    _prevColumn: any;
+    private renderTable;
+    enter(domNode: any, element: any): void;
+    update(domNode: any, element: any): void;
+    exit(domNode: any, element: any): void;
+    click(row: any, col: any, sel: any): void;
+}
+//# sourceMappingURL=table.d.ts.map

package/types-3.4/test.d.ts

@@ -0,0 +1,6 @@
+import { Table } from "./table";
+export { Test1 as Test };
+export declare class Test1 extends Table {
+    constructor();
+}
+//# sourceMappingURL=test.d.ts.map