refactor: daily charts

Signed-off-by: Jad Chahed <[email protected]>

website/package.json

@@ -15,6 +15,7 @@
     "@nivo/line": "^0.83.0",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
@@ -39,6 +40,7 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@types/bytes": "^3.1.4",
     "@types/node": "^20.14.9",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",

website/src/assets/styles/tailwind.css

@@ -50,16 +50,23 @@ limitations under the License.
     --ring: 24.6 95% 53.1%;
     --radius: 0.5rem;
 
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-
     --front: 0 0% 10%;
     --back: 0 0% 100%;
 
     --theme: 48 100% 50%;
+
+    --chart-qpsReads: 220, 100%, 50%;
+    --chart-qpsTotal: 39, 100%, 50%;
+    --chart-qpsWrites: 0, 59%, 41%;
+    --chart-qpsOther: 300, 100%, 25%;
+    --chart-tps: 39, 100%, 50%;
+    --chart-latency: 39, 100%, 50%;
+    --chart-cpuTimeTotal: 39, 100%, 50%;
+    --chart-cpuTimeVtgate: 220, 100%, 50%;
+    --chart-cpuTimeVttablet: 0, 59%, 41%;
+    --chart-memBytesTotal: 39, 100%, 50%;
+    --chart-memBytesVtgate: 220, 100%, 50%;
+    --chart-memBytesVttablet: 0, 59%, 41%;
   }
 
   .dark {
@@ -102,6 +109,19 @@ limitations under the License.
     --back: 0 0% 10%;
 
     --theme: 48 100% 50%;
+
+    --chart-qpsReads: 220, 100%, 50%;
+    --chart-qpsTotal: 39, 100%, 50%;
+    --chart-qpsWrites: 0, 59%, 41%;
+    --chart-qpsOther: 300, 100%, 25%;
+    --chart-tps: 39, 100%, 50%;
+    --chart-latency: 39, 100%, 50%;
+    --chart-cpuTimeTotal: 39, 100%, 50%;
+    --chart-cpuTimeVtgate: 220, 100%, 50%;
+    --chart-cpuTimeVttablet: 0, 59%, 41%;
+    --chart-memBytesTotal: 39, 100%, 50%;
+    --chart-memBytesVtgate: 220, 100%, 50%;
+    --chart-memBytesVttablet: 0, 59%, 41%;
   }
 }
 

website/src/common/DailySummary.tsx

@@ -14,19 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import {
   ChartConfig,
   ChartContainer,
   ChartTooltip,
 } from "@/components/ui/chart";
 import { DailySummarydata } from "@/types";
-import PropTypes from "prop-types";
 import { Line, LineChart, XAxis } from "recharts";
 import { twMerge } from "tailwind-merge";
 
@@ -36,7 +30,7 @@ export type DailySummaryProps = {
   setBenchmarktype: (type: string) => void;
 };
 
-export default function DailySummary(props : DailySummaryProps) {
+export default function DailySummary(props: DailySummaryProps) {
   const { data, benchmarkType, setBenchmarktype } = props;
   type ChartData = { name: string; totalQps: number };
   const chartData: ChartData[] = [];
@@ -46,10 +40,6 @@ export default function DailySummary(props : DailySummaryProps) {
       label: "Total QPS",
       color: "hsl(var(--primary))",
     },
-    mobile: {
-      label: "Total QPS",
-      color: "hsl(var(--primary))",
-    },
   } satisfies ChartConfig;
 
   if (data.data !== null) {
@@ -66,9 +56,13 @@ export default function DailySummary(props : DailySummaryProps) {
   };
 
   return (
-    <Card className={twMerge("w-[310px] h-[124px] md:w-[316px] md:h-[124px] hover:scale-105 duration-300 hover:bg-muted border-border",
-      benchmarkType === data.name && "border-2 border-front"
-    )} onClick={() => getBenchmarkType()}>
+    <Card
+      className={twMerge(
+        "w-[310px] h-[124px] md:w-[316px] md:h-[124px] hover:scale-105 duration-300 hover:bg-muted border-border",
+        benchmarkType === data.name && "border-2 border-front"
+      )}
+      onClick={() => getBenchmarkType()}
+    >
       <CardHeader className="flex flex-row justify-between">
         <CardTitle className="font-light text-sm">{data.name}</CardTitle>
         <i className="h-4 w-4 text-foreground fa-solid fa-arrow-right daily--fa-arrow-right"></i>
@@ -125,9 +119,3 @@ const CustomTooltip = ({
 
   return null;
 };
-
-CustomTooltip.propTypes = {
-  active: PropTypes.bool,
-  payload: PropTypes.array,
-  label: PropTypes.string,
-};

website/src/components/ui/chart.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import * as React from "react"
 import * as RechartsPrimitive from "recharts"
 

website/src/components/ui/scroll-area.tsx

@@ -0,0 +1,62 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/library/utils"
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn("relative overflow-hidden", className)}
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+))
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" &&
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" &&
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+))
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+
+export { ScrollArea, ScrollBar }

website/src/components/ui/separator.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 

website/src/components/ui/skeleton.tsx

@@ -1,3 +1,19 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import { cn } from "@/library/utils"
 
 function Skeleton({

website/src/hooks/useDailySummaryData.ts

@@ -1,3 +1,19 @@
+/*
+Copyright 2024 The Vitess Authors.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
 import useApiCall from "@/utils/Hook";
 import { DailySummarydata, Workloads } from "@/types";
 
@@ -8,12 +24,12 @@ export default function useDailySummaryData(workloads: Workloads[]) {
   const {
     data: dataDailySummary,
     isLoading: isLoadingDailySummary,
-    error: errorDailySummary,
+    error: dailySummaryError,
   } = useApiCall<DailySummarydata>(`${import.meta.env.VITE_API_URL}daily/summary?workloads=${workloadsQuery}`);
 
   return {
     dataDailySummary,
     isLoadingDailySummary,
-    errorDailySummary,
+    dailySummaryError,
   };
 };