#8 - TablePivot

Create new component
OrangesixGithub · Nov 13, 2024 · 936c5e9 · 936c5e9
1 parent b73a33f
commit 936c5e9
Show file tree

Hide file tree

Showing 16 changed files with 1,899 additions and 516 deletions.
diff --git a/debug/App.tsx b/debug/App.tsx
@@ -1,13 +1,15 @@
 import Root from "./src";
+import React from "react";
 import ReactDOM from "react-dom/client";
-import React, { StrictMode } from "react";
+import { registerLicense } from "@syncfusion/ej2-base";
+
+registerLicense("Ngo9BigBOggjHTQxAR8/V1NDaF5cWGtCf1FpRmJGdld5fUVHYVZUTXxaS00DNHVRdkdnWH5fcnRTRWNYUUR3WkY=");
 
 import "../src/api/css/theme.css";
 import "bootstrap-icons/font/bootstrap-icons.css";
+import "@webdatarocks/webdatarocks/webdatarocks.css";
 import "primereact/resources/themes/bootstrap4-light-blue/theme.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-    <StrictMode>
-        <Root/>
-    </StrictMode>,
+    <Root/>,
 );
diff --git a/debug/package-lock.json b/debug/package-lock.json
diff --git a/debug/package.json b/debug/package.json
@@ -5,12 +5,16 @@
     "sass:dev": "sass --load-path=node_modules/bootstrap/scss assets/scss/theme.scss assets/css/style.css --watch"
   },
   "dependencies": {
-    "@orangesix/react": "^1.0.6"
+    "@orangesix/react": "^1.0.6",
+    "@syncfusion/ej2-icons": "^27.1.50",
+    "@syncfusion/ej2-react-pivotview": "^27.1.58",
+    "@webdatarocks/react-webdatarocks": "^1.4.15"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.3.3",
     "node-sass": "^9.0.0",
     "sass": "^1.80.6",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11",
+    "vite-plugin-commonjs": "^0.10.3"
   }
 }
diff --git a/debug/src/index.tsx b/debug/src/index.tsx
@@ -1,30 +1,71 @@
+import React, { useEffect, useState, useRef } from "react";
+
 import { Box } from "../../src/box";
-import { Chip } from "primereact/chip";
-import React, { useState } from "react";
-import { filterLegendAutocomplete, InputFilter } from "../../src/inputfilter";
+import { TablePivot } from "../../src/tablepivot";
+import { TablePivotRefProps } from "../../src/tablepivot/types";
 
 const Root = () => {
-    const [value, setValue] = useState<any>(undefined);
     const [data, setData] = useState<any>([]);
+    const pivotRef = useRef<TablePivotRefProps>(null);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setData([
+                { Cliente: "DIRETRIZ INFORMÁTICA", Prioridade: "Alta", Valor: 50 },
+                { Cliente: "DIRETRIZ INFORMÁTICA", Prioridade: "Alta", Valor: 200 },
+                { Cliente: "DIRETRIZ INFORMÁTICA", Prioridade: "Alta", Valor: 106 },
+                { Cliente: "DIRETRIZ INFORMÁTICA", Prioridade: "Alta", Valor: 100 },
+                { Cliente: "PREF. MUN. ELOI MENDES", Prioridade: "Média", Valor: 108 },
+                { Cliente: "PREF. MUN. ELOI MENDES", Prioridade: "Média", Valor: 200 },
+                { Cliente: "PREF. MUN. ELOI MENDES", Prioridade: "Baixa", Valor: 250 },
+            ]);
+        }, 2000);
+    }, []);
+
+    useEffect(() => {
+        console.log(data);
+        console.log(pivotRef.current?.webdatarocks?.updateData({
+            data: data
+        }));
+    }, [data]);
 
     return (
         <Box size="100">
-            <p className="w-100">Componente - Filtro</p>
-            <Chip className="my-2 fs-7"
-                  label={filterLegendAutocomplete(value, data)}/>
-            <InputFilter required
-                         data={data}
-                         icon="funnel-fill"
-                         label="Data"
-                         options={["=", "!="]}
-                         type="autocomplete"
-                         value={value}
-                         onSearch={() => setData([
-                             { id: 1, label: "Luiz Fernando" },
-                             { id: 2, label: "Dayana" },
-                             { id: 3, label: "Lara" },
-                         ])}
-                         onChange={setValue}/>
+            <Box className="m-0 p-0"
+                 size="100">
+                <TablePivot pivotOptions={{
+                    grid: {
+                        showFilter: false,
+                        showHeaders: false
+                    },
+                    configuratorButton: false
+                }}
+                            pivotSlice={{
+                                rows: [
+                                    { uniqueName: "Cliente" },
+                                    { uniqueName: "Prioridade" },
+                                ],
+                                columns: [
+                                    { uniqueName: "Prioridade" }
+                                ],
+                                measures: [
+                                    { uniqueName: "Valor", active: true, grandTotalCaption: "Total" },
+                                ],
+                                expands: {
+                                    expandAll: true,
+                                }
+                            }}
+                            toolbarOptions={{
+                                connect: false,
+                                open: false,
+                                fullscreen: false,
+                                save: false,
+                                options: false
+                            }}
+                            pivotDataSource={data}
+                            ref={pivotRef}
+                            size="100"/>
+            </Box>
         </Box>
     );
 };

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@orangesix/react",
   "type": "module",
-  "version": "1.0.10-x5",
+  "version": "1.0.10-x7",
   "description": "Conjunto de componentes e funções disponíveis para serem utilizados em projetos React.",
   "author": "Luiz Fernando Bernardes de Paula",
   "license": "MIT",
@@ -23,6 +23,7 @@
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
     "@tiptap/starter-kit": "^2.9.1",
+    "@webdatarocks/react-webdatarocks": "^1.4.15",
     "axios": "^1.7.7",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",

diff --git a/rollup.config.js b/rollup.config.js
@@ -25,12 +25,21 @@ const __dependeciesExternal = [
     "bootstrap",
     "sweetalert2",
     "node-snackbar",
-    "@stitches/react",
     "primereact/utils",
     "primereact/editor",
     "primereact/column",
     "primereact/datatable",
     "primereact/autocomplete",
+    "@webdatarocks/react-webdatarocks",
+    "@tiptap/starter-kit",
+    "@tiptap/react",
+    "@tiptap/pm",
+    "@tiptap/extension-underline",
+    "@tiptap/extension-text-style",
+    "@tiptap/extension-link",
+    "@tiptap/extension-image",
+    "@tiptap/extension-highlight",
+    "@tiptap/extension-color",
 ];
 
 /**