Enhancement: Fix diplay issues for tables #414

GooseNight · maany · commit c5e361c9904a · 2024-08-08T14:56:51.000+02:00
diff --git a/src/component-library/Pages/Dashboard/Widgets/WidgetOngoingrules.tsx b/src/component-library/Pages/Dashboard/Widgets/WidgetOngoingrules.tsx
@@ -19,6 +19,7 @@ import {
 } from "@tanstack/react-table";
 import { useEffect, useState } from "react";
 import { TableSortUpDown } from "@/component-library/StreamedTables/TableSortUpDown.stories";
+import tailwind from "@/tailwind"
 
 ChartJS.register(
     CategoryScale,
@@ -83,6 +84,14 @@ export const WidgetOngoingrules: React.FC<JSX.IntrinsicElements["div"] & {
             labels: [],
             datasets: []
         })
+        const isDarkMode = () =>
+            window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        window.matchMedia('(prefers-color-scheme: dark)')
+            .addEventListener('change',() => {
+                location.reload();
+            })
+
         const options = {
             indexAxis: "y" as const,
             responsive: true,
@@ -92,13 +101,21 @@ export const WidgetOngoingrules: React.FC<JSX.IntrinsicElements["div"] & {
                     title: {
                         display: true,
                         text: "Percentage [%]",
+                        color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
                     },
                     stacked: true,
                     min: 0,
                     max: 100,
+                    ticks: {
+                        color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
+                    }
                 },
                 y: {
                     stacked: true,
+                    ticks: {
+                        autoSkip: false,
+                        color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
+                      }
                 }
             },
             plugins: {
@@ -156,17 +173,17 @@ export const WidgetOngoingrules: React.FC<JSX.IntrinsicElements["div"] & {
                     {
                         label: "OK",
                         data: rows.map(row => percentify(row.getValue("ok"), row)),
-                        backgroundColor: "#bef264"
+                        backgroundColor: tailwind.theme.extend.colors.base.success[300],
                     },
                     {
                         label: "Replicating",
                         data: rows.map(row => percentify(row.getValue("replicating"), row)),
-                        backgroundColor: "#fcd34d",
+                        backgroundColor: tailwind.theme.extend.colors.base.warning[300],
                     },
                     {
                         label: "Stuck",
                         data: rows.map(row => percentify(row.getValue("stuck"), row)),
-                        backgroundColor: "#f87171"
+                        backgroundColor: tailwind.theme.extend.colors.base.error[400],
                     }
                 ]
             } as ChartData<ChartDataNumeric>
diff --git a/src/component-library/Pages/Dashboard/Widgets/WidgetUsedquota.tsx b/src/component-library/Pages/Dashboard/Widgets/WidgetUsedquota.tsx
@@ -6,8 +6,7 @@ import { Pie } from 'react-chartjs-2';
 import { BoolTag } from "@/component-library/Tags/BoolTag";
 import { Number } from "@/component-library/Text/Content/Number";
 import { Contenttd, Generaltable, Titleth } from "@/component-library/Helpers/Metatable";
-import { useEffect, useState } from "react";
-
+import tailwind from "@/tailwind"
 ChartJS.register(ArcElement, Tooltip, Legend);
 
 const RSEPie: React.FC<JSX.IntrinsicElements["div"] & {
@@ -20,21 +19,28 @@ const RSEPie: React.FC<JSX.IntrinsicElements["div"] & {
         labels: ["Used", "Free"],
         datasets: [{
             data: [input.used, input.quota - input.used],
-            backgroundColor: ["#f87171", "#86efac"]
+            backgroundColor: [tailwind.theme.extend.colors.brand[400],tailwind.theme.extend.colors.extra.emerald[400]]
         }]
     }
+
+    const isDarkMode = () =>
+        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
     const options = {
         plugins: {
             legend: {
-                display: small
+                display: true,
+                labels:{
+                    color: isDarkMode() ? tailwind.theme.extend.colors.text[200] : tailwind.theme.extend.colors.text[900],
+                }
             },
         }
     }
     const customid = input.rse + "-piediv"
     return (
         <div
             className={twMerge(
-                "w-52 md:w-96 h-auto",
+                "h-auto",
                 "flex flex-col justify-start items-center",
                 hideWhenSmall ? "hidden md:flex" : "",
                 className ?? "",
@@ -44,13 +50,13 @@ const RSEPie: React.FC<JSX.IntrinsicElements["div"] & {
         >
             <label
                 className={twMerge(
-                    "break-all",
+                    "w-max",
                 )}
                 htmlFor={customid}
             >
                 {input.rse}
             </label>
-            <div className="relative w-24 md:w-72">
+            <div className="relative flex w-full">
                 <Pie
                     data={data}
                     options={options}
@@ -87,25 +93,6 @@ export const WidgetUsedquota: React.FC<JSX.IntrinsicElements["div"] & {
     }
 ) => {
         const { className, ...otherprops } = props
-        const [windowSize, setWindowSize] = useState([
-            1920, 1080
-        ]);
-
-        useEffect(() => {
-            setWindowSize([window.innerWidth, window.innerHeight])
-
-            const handleWindowResize = () => {
-                setWindowSize([window.innerWidth, window.innerHeight]);
-            };
-
-            window.addEventListener('resize', handleWindowResize);
-
-            return () => {
-                window.removeEventListener('resize', handleWindowResize);
-            };
-        }, []);
-
-        const isSm = () => windowSize[0] > 640  // 640px is the breakpoint for sm => is minimum sm sized
 
         return (
             <div
@@ -116,20 +103,20 @@ export const WidgetUsedquota: React.FC<JSX.IntrinsicElements["div"] & {
                 {...otherprops}
             >
                 <div>
-                    <H4 className="font-bold">Top Used RSEs</H4>
+                    <H4 className="font-bold dark:text-text-0 text-text-1000">Top Used RSEs</H4>
                 </div>
                 <div
                     className={twMerge(
                         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",
                         "dark:text-text-0 text-text-1000"
                     )}
                 >
-                    <RSEPie input={input[0]} small={isSm()} />
-                    <RSEPie input={input[1]} small={isSm()} />
-                    <RSEPie input={input[2]} small={isSm()} />
-                    <RSEPie input={input[3]} small={isSm()} hideWhenSmall />
-                    <RSEPie input={input[4]} small={isSm()} hideWhenSmall />
-                    <RSEPie input={input[5]} small={isSm()} hideWhenSmall />
+                    <RSEPie input={input[0]} />
+                    <RSEPie input={input[1]} />
+                    <RSEPie input={input[2]} />
+                    <RSEPie input={input[3]} hideWhenSmall/>
+                    <RSEPie input={input[4]} hideWhenSmall />
+                    <RSEPie input={input[5]} hideWhenSmall />
                 </div>
             </div>
         );
diff --git a/src/component-library/Pages/Rule/ListRule.tsx b/src/component-library/Pages/Rule/ListRule.tsx
@@ -101,7 +101,7 @@ export const ListRule = (
                 )
             },
             meta: {
-                style: "w-36"
+                style: ""
             }
         }),
         columnHelper.accessor("remaining_lifetime", {
@@ -118,7 +118,7 @@ export const ListRule = (
                 )
             },
             meta: {
-                style: "w-32"
+                style: ""
             }
         }),
         columnHelper.accessor("state", {
@@ -136,12 +136,12 @@ export const ListRule = (
                 )
             },
             meta: {
-                style: "w-44"
+                style: "md:w-44 w-28"
             }
         }),
         columnHelper.accessor("locks_ok_cnt", {
             id: "locks_ok_cnt",
-            cell: info => <P className="text-right dark:text-text-0 text-text-1000">{info.getValue()}</P>,
+            cell: info => <P className="text-right dark:text-text-0  text-text-1000">{info.getValue()}</P>,
             header: info => {
                 return (
                     <TableSortUpDown
diff --git a/src/component-library/StreamedTables/TableFilterString.tsx b/src/component-library/StreamedTables/TableFilterString.tsx
@@ -68,14 +68,14 @@ export function TableFilterString(
         return (
             <form
                 className={twMerge(
-                    "flex flex-row justify-between items-baseline space-x-8",
+                    "flex flex-row flex-wrap justify-between items-baseline ",
                     "pr-2",
                     className ?? "",
                 )}
                 role="search"
                 aria-label={`Filter ${name} Column`}
             >
-                <span className="shrink-0">
+                <span className="">
                     <H3>{name}</H3>
                 </span>
                 <Filter
diff --git a/src/component-library/outputtailwind.css b/src/component-library/outputtailwind.css
@@ -918,10 +918,6 @@ html {
   width: 1.25rem;
 }
 
-.w-52 {
-  width: 13rem;
-}
-
 .w-56 {
   width: 14rem;
 }
@@ -964,6 +960,10 @@ html {
   min-width: 0px;
 }
 
+.min-w-full {
+  min-width: 100%;
+}
+
 .max-w-sm {
   max-width: 24rem;
 }
@@ -2012,6 +2012,11 @@ html {
   color: rgb(241 245 249 / var(--tw-text-opacity));
 }
 
+.text-text-1000 {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .text-text-200 {
   --tw-text-opacity: 1;
   color: rgb(226 232 240 / var(--tw-text-opacity));
@@ -2052,11 +2057,6 @@ html {
   color: rgb(113 113 122 / var(--tw-text-opacity));
 }
 
-.text-text-1000 {
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }
@@ -3083,14 +3083,6 @@ html {
     width: 15rem;
   }
 
-  .md\:w-72 {
-    width: 18rem;
-  }
-
-  .md\:w-96 {
-    width: 24rem;
-  }
-
   .md\:w-\[400px\] {
     width: 400px;
   }
diff --git a/tsconfig.json b/tsconfig.json
@@ -29,7 +29,8 @@
     "paths": {
       "@/*": [
         "./src/*"
-      ]
+      ],
+      "@/tailwind": ["./tailwind.config.js"]
     }
   },
   "include": [

Original file line number	Diff line number	Diff line change
`@@ -101,7 +101,7 @@ export const ListRule = (`
`101`	`101`	`)`
`102`	`102`	`},`
`103`	`103`	`meta: {`
`104`		`- style: "w-36"`
	`104`	`+ style: ""`
`105`	`105`	`}`
`106`	`106`	`}),`
`107`	`107`	`columnHelper.accessor("remaining_lifetime", {`
`@@ -118,7 +118,7 @@ export const ListRule = (`
`118`	`118`	`)`
`119`	`119`	`},`
`120`	`120`	`meta: {`
`121`		`- style: "w-32"`
	`121`	`+ style: ""`
`122`	`122`	`}`
`123`	`123`	`}),`
`124`	`124`	`columnHelper.accessor("state", {`
`@@ -136,12 +136,12 @@ export const ListRule = (`
`136`	`136`	`)`
`137`	`137`	`},`
`138`	`138`	`meta: {`
`139`		`- style: "w-44"`
	`139`	`+ style: "md:w-44 w-28"`
`140`	`140`	`}`
`141`	`141`	`}),`
`142`	`142`	`columnHelper.accessor("locks_ok_cnt", {`
`143`	`143`	`id: "locks_ok_cnt",`
`144`		`- cell: info => <P className="text-right dark:text-text-0 text-text-1000">{info.getValue()}</P>,`
	`144`	`+ cell: info => <P className="text-right dark:text-text-0 text-text-1000">{info.getValue()}</P>,`
`145`	`145`	`header: info => {`
`146`	`146`	`return (`
`147`	`147`	`<TableSortUpDown`