feat: wip dailySummary

Signed-off-by: Jad Chahed <[email protected]>
vitessio · Jul 8, 2024 · 75551a7 · 75551a7
1 parent 5442876
commit 75551a7
Show file tree

Hide file tree

Showing 11 changed files with 881 additions and 96 deletions.
diff --git a/website/package.json b/website/package.json
@@ -21,14 +21,15 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "dotenv": "^16.1.4",
-    "lucide-react": "^0.363.0",
+    "lucide-react": "^0.400.0",
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.10.1",
     "react-json-pretty": "^2.2.0",
     "react-router-dom": "^6.11.2",
     "react-spinners": "^0.13.8",
+    "recharts": "^2.12.7",
     "serve": "^14.2.0",
     "swiper": "^9.4.1",
     "tailwind-merge": "^2.2.2",

diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css
@@ -50,6 +50,12 @@ 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%;
 
@@ -86,6 +92,12 @@ limitations under the License.
     --ring: 20.5 90.2% 48.2%;
     --radius: 0.5rem;
 
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+
     --front: 0 0% 100%;
     --back: 0 0% 10%;
 

diff --git a/website/src/common/DailySummary.tsx b/website/src/common/DailySummary.tsx
@@ -1,56 +1,106 @@
+/*
+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 PropTypes from "prop-types";
-import { ResponsiveLine } from "@nivo/line";
-import { twMerge } from "tailwind-merge";
-import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { Card, CardHeader, CardTitle, CardContent, CardFooter } from "@/components/ui/card";
+import { DailySummarydata } from "@/types";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart"
+import { TrendingUp } from "lucide-react"
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
+import { Button } from "@/components/ui/button";
+
+
+export type DailySummaryProps = {
+  data: DailySummarydata;
+  benchmarkType: string;
+  setBenchmarktype: (type: string) => void;
+}
+
+export default function DailySummary({ data, benchmarkType, setBenchmarktype }: DailySummaryProps) {
+  const chartData: any[] | undefined = [];
 
-const DailySummary = ({ data, setBenchmarktype, benchmarkType }) => {
-  const orange = "#E77002";
+  const chartConfig = {
+    desktop: {
+      label: "Desktop",
+      color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+      label: "Mobile",
+      color: "hsl(var(--chart-2))",
+    },
+  } satisfies ChartConfig
 
-  const transformedData = [];
 
   if (data.data !== null) {
-    transformedData.push({
-      id: "QPSTotal",
-      data: data.data.map((item) => ({
-        y: item.total_qps.center,
-      })),
-    });
+    data.data.map((item) => ({
+      totalQps: chartData.push({
+        totalQps: item.total_qps.center / 2,
+      }),
+    }));
   }
 
   const getBenchmarkType = () => {
     setBenchmarktype(data.name);
   };
 
+  console.log(chartData)
+
   return (
-    <Card
-      className={twMerge(
-        "cursor-pointer hover:bg-accent duration-300 hover:scale-105 w-[20vw] h-[15vh]",
-        benchmarkType === data.name && "bg-accent brightness-125 border-2"
-      )}
-      onClick={getBenchmarkType}
-    >
+    <Card className="w-[20vw] max-h-[20vh]">
       <CardHeader>
-        <CardTitle className="font-extralight">{data.name}</CardTitle>
+        <CardTitle className="font-light">{data.name}</CardTitle>
       </CardHeader>
-      <CardContent className="flex flex-col p-3">
-        {data ? (
-          <div className="w-full h-1/2 p-2 pt-4 flex flex-nowrap justify-center items-center">
-            <ResponsiveLine
-              data={transformedData}
-              margin={{ top: 20, right: 30, bottom: 50, left: 10 }}
-              height={300}
-              enableGridX={false}
-              enableGridY={false}
-              colors={orange}
-              axisBottom={null}
-              axisLeft={null}
+      <CardContent className="max-h-[5vh]">
+        <ChartContainer config={chartConfig}>
+          <LineChart
+            data={chartData}
+          >
+            <XAxis
+              dataKey="time"
+              tickLine={false}
+              axisLine={false}
+            />
+            <ChartTooltip
+              cursor={false}
+              content={<ChartTooltipContent hideLabel />}
+            />
+            <Line
+              dataKey="totalQps"
+              type="natural"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{
+                fill: "var(--color-desktop)",
+              }}
+              activeDot={{
+                r: 6,
+              }}
             />
-          </div>
-        ) : null}
-        <div className="flex justify-between flex-1 items-center mt-2">
-          <i className="fa-solid fa-arrow-right daily--fa-arrow-right"></i>
-        </div>
+          </LineChart>
+        </ChartContainer>
       </CardContent>
+      <CardFooter>
+      <i className="fa-solid fa-arrow-right daily--fa-arrow-right"></i>
+      </CardFooter>
+
     </Card>
   );
 };
@@ -62,6 +112,4 @@ DailySummary.propTypes = {
   }),
   setBenchmarktype: PropTypes.func.isRequired,
   isSelected: PropTypes.bool,
-};
-
-export default DailySummary;
+};