refactor: wip daily charts

Signed-off-by: Jad Chahed <[email protected]>
vitessio · Jul 9, 2024 · 40342ef · 40342ef
1 parent a16fe72
commit 40342ef
Show file tree

Hide file tree

Showing 6 changed files with 157 additions and 99 deletions.
diff --git a/go/server/api.go b/go/server/api.go
@@ -326,7 +326,7 @@ func (s *Server) getDailySummary(c *gin.Context) {
 }
 
 func (s *Server) getDaily(c *gin.Context) {
-	benchmarkType := c.Query("type")
+	benchmarkType := c.Query("workloads")
 	data, err := macrobench.SearchForLastDays(s.dbClient, benchmarkType, macrobench.Gen4Planner, 31)
 	if err != nil {
 		c.JSON(http.StatusInternalServerError, &ErrorAPI{Error: err.Error()})

diff --git a/website/src/assets/styles/tailwind.css b/website/src/assets/styles/tailwind.css
@@ -29,22 +29,22 @@ limitations under the License.
 
     --popover: 0 0% 100%;
     --popover-foreground: 20 14.3% 4.1%;
-  
+
     --primary: 24.6 95% 53.1%;
     --primary-foreground: 60 9.1% 97.8%;
-  
+
     --secondary: 60 4.8% 95.9%;
     --secondary-foreground: 24 9.8% 10%;
-  
+
     --muted: 60 4.8% 95.9%;
     --muted-foreground: 25 5.3% 44.7%;
-  
+
     --accent: 60 4.8% 95.9%;
     --accent-foreground: 24 9.8% 10%;
-  
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 60 9.1% 97.8%;
-  
+
     --border: 20 5.9% 90%;
     --input: 20 5.9% 90%;
     --ring: 24.6 95% 53.1%;
@@ -65,28 +65,28 @@ limitations under the License.
   .dark {
     --background: 20 14.3% 4.1%;
     --foreground: 60 9.1% 97.8%;
-  
+
     --card: 20 14.3% 4.1%;
     --card-foreground: 60 9.1% 97.8%;
-  
+
     --popover: 20 14.3% 4.1%;
     --popover-foreground: 60 9.1% 97.8%;
-  
+
     --primary: 20.5 90.2% 48.2%;
     --primary-foreground: 60 9.1% 97.8%;
-  
+
     --secondary: 12 6.5% 15.1%;
     --secondary-foreground: 60 9.1% 97.8%;
-  
+
     --muted: 12 6.5% 15.1%;
     --muted-foreground: 24 5.4% 63.9%;
-  
+
     --accent: 12 6.5% 15.1%;
     --accent-foreground: 60 9.1% 97.8%;
-  
+
     --destructive: 0 72.2% 50.6%;
     --destructive-foreground: 60 9.1% 97.8%;
-  
+
     --border: 12 6.5% 15.1%;
     --input: 12 6.5% 15.1%;
     --ring: 20.5 90.2% 48.2%;

diff --git a/website/src/common/DailySummary.tsx b/website/src/common/DailySummary.tsx
@@ -17,7 +17,6 @@ limitations under the License.
 import {
   Card,
   CardContent,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
@@ -29,14 +28,16 @@ import {
 import { DailySummarydata } from "@/types";
 import PropTypes from "prop-types";
 import { Line, LineChart, XAxis } from "recharts";
+import { twMerge } from "tailwind-merge";
 
 export type DailySummaryProps = {
   data: DailySummarydata;
   benchmarkType: string;
   setBenchmarktype: (type: string) => void;
 };
 
-export default function DailySummary({ data }: DailySummaryProps) {
+export default function DailySummary(props : DailySummaryProps) {
+  const { data, benchmarkType, setBenchmarktype } = props;
   type ChartData = { name: string; totalQps: number };
   const chartData: ChartData[] = [];
 
@@ -60,8 +61,14 @@ export default function DailySummary({ data }: DailySummaryProps) {
     }));
   }
 
+  const getBenchmarkType = () => {
+    setBenchmarktype(data.name);
+  };
+
   return (
-    <Card className="w-[310px] h-[124px] md:w-[316px] md:h-[124px] hover:scale-105 duration-300 border-border">
+    <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>

diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx
@@ -19,13 +19,22 @@ import RingLoader from "react-spinners/RingLoader";
 import { useNavigate } from "react-router-dom";
 import useApiCall from "@/utils/Hook";
 
-import ResponsiveChart from "./components/Chart";
-import DailySummary from "./components/DailySummary";
-import { MacroData, MacroDataValue } from "@/types";
+import DailySummary from "@/common/DailySummary";
+import { MacroData, MacroDataValue, Workloads } from "@/types";
 
 import { secondToMicrosecond } from "@/utils/Utils";
 import DailyHero from "./components/DailyHero";
 import useDailySummaryData from "@/hooks/useDailySummaryData";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { CartesianGrid, XAxis, Line, LineChart } from "recharts";
+import {
+  ChartTooltipContent,
+  ChartTooltip,
+  ChartContainer,
+} from "@/components/ui/chart";
+import ResponsiveChart from "./components/Chart";
 
 interface DailySummarydata {
   name: string;
@@ -42,14 +51,16 @@ type ChartDataItem =
 export default function DailyPage() {
   const urlParams = new URLSearchParams(window.location.search);
   const [benchmarkType, setBenchmarktype] = useState<string>(
-    (urlParams.get("type")) ?? "OLTP"
+    urlParams.get("type") ?? "OLTP"
   );
 
   const {
     data: dataDaily,
     error: dailyError,
     textLoading: dailyTextLoading,
-  } = useApiCall<MacroData>(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`);
+  } = useApiCall<MacroData>(
+    `${import.meta.env.VITE_API_URL}daily?workloads=${benchmarkType}`
+  );
 
   const navigate = useNavigate();
 
@@ -201,91 +212,131 @@ export default function DailyPage() {
     title: string;
     colors: string[];
   }[] = [
-      {
-        data: QPSData,
-        title: "QPS (Queries per second)",
-        colors: ["#fad900", "orange", "brown", "purple"],
-      },
-      {
-        data: TPSData,
-        title: "TPS (Transactions per second)",
-        colors: ["#fad900"],
-      },
-      {
-        data: latencyData,
-        title: "Latency (ms)",
-        colors: ["#fad900"],
-      },
-      {
-        data: CPUTimeData,
-        title: "CPU / query (μs)",
-        colors: ["#fad900", "orange", "brown"],
-      },
-      {
-        data: MemBytesData,
-        title: "Allocated / query (bytes)",
-        colors: ["#fad900", "orange", "brown"],
-      },
-    ];
+    {
+      data: QPSData,
+      title: "QPS (Queries per second)",
+      colors: ["#fad900", "orange", "brown", "purple"],
+    },
+    {
+      data: TPSData,
+      title: "TPS (Transactions per second)",
+      colors: ["#fad900"],
+    },
+    {
+      data: latencyData,
+      title: "Latency (ms)",
+      colors: ["#fad900"],
+    },
+    {
+      data: CPUTimeData,
+      title: "CPU / query (μs)",
+      colors: ["#fad900", "orange", "brown"],
+    },
+    {
+      data: MemBytesData,
+      title: "Allocated / query (bytes)",
+      colors: ["#fad900", "orange", "brown"],
+    },
+  ];
 
-  const {
-    dataDailySummary,
-    isLoadingDailySummary,
-    errorDailySummary,
-  } = useDailySummaryData(["OLTP", "OLTP-READONLY", "OLTP-SET", "TPCC", "TPCC_FK", "TPCC_UNSHARDED", "TPCC_FK_UNMANAGED"]);
+  const workloads: Workloads[] = [
+    "OLTP",
+    "OLTP-READONLY",
+    "OLTP-SET",
+    "TPCC",
+    "TPCC_FK",
+    "TPCC_UNSHARDED",
+    "TPCC_FK_UNMANAGED",
+  ];
 
-  return (
-    <>
-      <DailyHero />
+  const { dataDailySummary, isLoadingDailySummary, errorDailySummary } =
+    useDailySummaryData(workloads);
 
-      <figure className="p-page w-full">
-        <div className="border-front border" />
-      </figure>
+  const [expandedStates, setExpandedStates] = useState(
+    Array(allChartData.length).fill(true)
+  );
 
-      {isLoadingDailySummary && (
-        <div className="flex justify-center w-full my-16">
-          <RingLoader
-            loading={isLoadingDailySummary}
-            color="#E77002"
-            size={300}
-          />
-        </div>
-      )}
+  const toggleExpand = (index: number) => {
+    setExpandedStates((prevStates) => {
+      const newStates = [...prevStates];
+      newStates[index] = !newStates[index];
+      return newStates;
+    });
+  };
 
-      {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 && (
-        <>
-          <section className="flex p-page justif-center flex-wrap gap-10 py-10">
-            {dataDailySummary.map((dailySummary, index) => {
+  return (
+    <>
+      <DailyHero />
+      <section className="flex p-page flex-wrap justify-center gap-12 p-4">
+        {isLoadingDailySummary && (
+          <>
+            {workloads.map((_, index) => {
               return (
-                <DailySummary
+                <Skeleton
                   key={index}
-                  data={dailySummary}
-                  benchmarkType={benchmarkType}
-                  setBenchmarktype={setBenchmarktype}
+                  className="w-[250px] h-[150px] md:w-[316px] md:h-[186px] rounded-lg"
                 />
               );
             })}
-          </section>
-
-          <figure className="p-page w-full">
-            <div className="border-front border" />
-          </figure>
-
-          {!dailyTextLoading && benchmarkType !== "" && (
-            <section className="p-page mt-12 flex flex-col gap-y-8">
-              {allChartData.map((chartData, index) => (
-                <div key={index} className="relative w-full h-[500px]">
-                  <ResponsiveChart
-                    data={chartData.data as any}
-                    title={chartData.title}
-                    colors={chartData.colors}
-                    isFirstChart={index === 0}
+          </>
+        )}
+
+        {!errorDailySummary &&
+          dataDailySummary &&
+          dataDailySummary.length > 0 && (
+            <>
+              {dataDailySummary.map((dailySummary, index) => {
+                return (
+                  <DailySummary
+                    key={index}
+                    data={dailySummary}
+                    benchmarkType={benchmarkType}
+                    setBenchmarktype={setBenchmarktype}
                   />
-                </div>
-              ))}
-            </section>
+                );
+              })}
+
+              <Separator className="mx-auto w-[80%] foreground" />
+            </>
           )}
-        </>
+      </section>
+
+      {dailyTextLoading && (
+        <div className="flex justify-center w-full my-16">
+          <RingLoader loading={dailyTextLoading} color="#E77002" size={300} />
+        </div>
+      )}
+
+      {!dailyTextLoading && benchmarkType !== "" && (
+        <section className="p-page mt-12 flex flex-col gap-y-8">
+          {allChartData.map((chartData, index) => (
+            <Card key={index} className="w-full">
+              <CardHeader
+                className="cursor-pointer hover:bg-muted duration-300 py-0"
+                onClick={() => toggleExpand(index)}
+              >
+                <div className="flex items-center justify-between">
+                  <CardTitle className="my-10 text-xl font-medium text-primary">
+                    {chartData.title}
+                  </CardTitle>
+                  <i className={`h-4 w-4 text-foreground fa-solid ${expandedStates[index] ? 'fa-chevron-up' : 'fa-chevron-down'} daily--fa-chevron-right`}></i>
+                </div>
+              </CardHeader>
+              {expandedStates[index] && (
+                <CardContent>
+                  <div className="relative w-full h-[500px]">
+                    <ResponsiveChart
+                      data={chartData.data as any}
+                      title={chartData.title}
+                      colors={chartData.colors}
+                      isFirstChart={index === 0}
+                    />
+                  </div>
+                </CardContent>
+              )}
+            </Card>
+          ))}
+        </section>
       )}
 
       {(errorDailySummary || dailyError) && (

diff --git a/website/src/pages/DailyPage/components/Chart.tsx b/website/src/pages/DailyPage/components/Chart.tsx
@@ -23,7 +23,7 @@ const ResponsiveChart = ({ data, title, colors }) => {
   return (
     data[0].data.length > 0 && (
       <>
-        <h3 className="my-10 text-xl font-medium text-primary">{title}</h3>
+        {/* <h3 className="my-10 text-xl font-medium text-primary">{title}</h3> */}
         <ResponsiveLine
           data={data}
           height={400}

diff --git a/website/src/pages/HomePage/components/HomePageHero.tsx b/website/src/pages/HomePage/components/HomePageHero.tsx
@@ -95,8 +95,8 @@ export default function HomePageHero() {
       <section className="flex md:flex-row flex-col justif-center gap-10 my-20">
         {isLoadingDailySummary && (
           <>
-            <Skeleton className="w-[250px] h-[150px] md:w-[316px] md:h-[186px] rounded-lg" />
-            <Skeleton className="w-[250px] h-[150px] md:w-[316px] md:h-[186px] rounded-lg" />
+            <Skeleton className="w-[310px] h-[124px] md:w-[316px] md:h-[124px] rounded-lg" />
+            <Skeleton className="w-[310px] h-[124px] md:w-[316px] md:h-[124px] rounded-lg" />
           </>
         )}
         {dataDailySummary.map((dailySummary, index) => {