@1771technologies/lytenyte-pro 2.0.0-dev.0 → 2.0.0-dev.2

package/dist/__play__/alpha.play.d.ts

@@ -0,0 +1,3 @@
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+export default function Experimental(): import("react/jsx-runtime").JSX.Element;

package/dist/__play__/alpha.play.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTheme } from "@1771technologies/play-frame";
+import "@1771technologies/lytenyte-design/fonts.css";
+import "../../css/grid-full.css";
+import { bankDataSmall } from "@1771technologies/grid-sample-data/bank-data-smaller";
+import { ViewportShadows } from "@1771technologies/lytenyte-core/components";
+import { useClientDataSource } from "../data-source-client/use-client-data-source.js";
+import { useMemo, useState } from "react";
+import { RowGroupCell } from "../components/row-group-cell.js";
+import { Grid } from "../index.js";
+const columns = [
+    { id: "age", name: "bob", groupPath: ["Alpha", "Beta"], type: "number" },
+    { id: "marital", groupPath: ["Alpha"] },
+    { id: "default", groupPath: ["Top Dog"] },
+    { id: "housing" },
+    { id: "loan" },
+    { id: "contact", groupPath: ["Alpha", "Beta", "Carlson"] },
+    { id: "day", groupPath: ["Alpha", "Beta"] },
+    { id: "month", groupPath: ["Alpha"] },
+    { id: "duration" },
+    { id: "campaign" },
+    { id: "pdays", groupPath: ["Carlson"] },
+    { id: "previous", groupPath: ["Carlson", "Delta"] },
+    { id: "poutcome" },
+    { id: "y" },
+];
+const sumAge = (_, rows) => rows.reduce((acc, x) => x.data.balance + acc, 0);
+export default function Experimental() {
+    const [pivotMode, setPivotMode] = useState(false);
+    const ds = useClientDataSource({
+        data: bankDataSmall,
+        rowGroupDefaultExpansion: true,
+        group: [{ id: "marital" }, { id: "contact" }, { id: "age" }],
+        pivotMode,
+        pivotGrandTotals: "bottom",
+        pivotModel: {
+            columns: [{ id: "contact" }, { id: "education" }],
+            rows: [{ id: "marital" }, { id: "age" }],
+            measures: [
+                {
+                    dim: { id: "Balance", type: "number" },
+                    fn: sumAge,
+                },
+            ],
+        },
+    });
+    const pivotProps = ds.usePivotProps();
+    const [rowGroupColumn, setRowGroupColumn] = useState({
+        cellRenderer: RowGroupCell,
+    });
+    const { resolvedTheme } = useTheme();
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", padding: "8px" }, children: _jsx("button", { onClick: () => setPivotMode((prev) => !prev), children: "Toggle Pivot Mode" }) }), _jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center" }, children: _jsx("div", { className: "ln-grid " + (resolvedTheme === "light" ? "ln-light" : "ln-dark"), style: { height: "90vh", width: "90vw" }, children: _jsx(Grid, { columns: columns, columnBase: useMemo(() => ({ movable: true, resizable: true, width: 100 }), []), slotShadows: ViewportShadows, columnGroupRenderer: (props) => {
+                            const label = props.groupPath.at(-1);
+                            return (_jsxs("div", { children: [label, props.collapsible && (_jsx("button", { onClick: () => props.api.columnToggleGroup(props.groupPath), children: ">" }))] }));
+                        }, rowSource: ds, rowGroupColumn: rowGroupColumn, onRowGroupColumnChange: setRowGroupColumn, rowSelectionMode: "multiple", ...pivotProps }) }) })] }));
+}

package/dist/__play__/basic-server-data/data.d.ts

@@ -0,0 +1,10 @@
+export type SalaryData = (typeof data)[number];
+export declare const data: {
+    id: string;
+    Age: number;
+    Gender: string;
+    "Education Level": string;
+    "Job Title": string;
+    "Years of Experience": number;
+    Salary: number;
+}[];