From 40342ef98d569762bcc22a1aee174804d182b010 Mon Sep 17 00:00:00 2001 From: Jad Chahed Date: Tue, 9 Jul 2024 20:51:27 +0200 Subject: [PATCH] refactor: wip daily charts Signed-off-by: Jad Chahed --- go/server/api.go | 2 +- website/src/assets/styles/tailwind.css | 28 +-- website/src/common/DailySummary.tsx | 13 +- website/src/pages/DailyPage/DailyPage.tsx | 207 +++++++++++------- .../src/pages/DailyPage/components/Chart.tsx | 2 +- .../HomePage/components/HomePageHero.tsx | 4 +- 6 files changed, 157 insertions(+), 99 deletions(-) diff --git a/go/server/api.go b/go/server/api.go index c7c7ec406..9142591da 100644 --- 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 index 12e5d2c8e..160bd4736 100644 --- 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 index 61be81f63..bc171a781 100644 --- 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,6 +28,7 @@ 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; @@ -36,7 +36,8 @@ export type DailySummaryProps = { 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 ( - + getBenchmarkType()}> {data.name} diff --git a/website/src/pages/DailyPage/DailyPage.tsx b/website/src/pages/DailyPage/DailyPage.tsx index 266199425..ec23808cb 100644 --- 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( - (urlParams.get("type")) ?? "OLTP" + urlParams.get("type") ?? "OLTP" ); const { data: dataDaily, error: dailyError, textLoading: dailyTextLoading, - } = useApiCall(`${import.meta.env.VITE_API_URL}daily?type=${benchmarkType}`); + } = useApiCall( + `${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 ( - <> - + const { dataDailySummary, isLoadingDailySummary, errorDailySummary } = + useDailySummaryData(workloads); -
-
-
+ const [expandedStates, setExpandedStates] = useState( + Array(allChartData.length).fill(true) + ); - {isLoadingDailySummary && ( -
- -
- )} + const toggleExpand = (index: number) => { + setExpandedStates((prevStates) => { + const newStates = [...prevStates]; + newStates[index] = !newStates[index]; + return newStates; + }); + }; - {!errorDailySummary && dataDailySummary && dataDailySummary.length > 0 && ( - <> -
- {dataDailySummary.map((dailySummary, index) => { + return ( + <> + +
+ {isLoadingDailySummary && ( + <> + {workloads.map((_, index) => { return ( - ); })} -
- -
-
-
- - {!dailyTextLoading && benchmarkType !== "" && ( -
- {allChartData.map((chartData, index) => ( -
- + )} + + {!errorDailySummary && + dataDailySummary && + dataDailySummary.length > 0 && ( + <> + {dataDailySummary.map((dailySummary, index) => { + return ( + -
- ))} -
+ ); + })} + + + )} - +
+ + {dailyTextLoading && ( +
+ +
+ )} + + {!dailyTextLoading && benchmarkType !== "" && ( +
+ {allChartData.map((chartData, index) => ( + + toggleExpand(index)} + > +
+ + {chartData.title} + + +
+
+ {expandedStates[index] && ( + +
+ +
+
+ )} +
+ ))} +
)} {(errorDailySummary || dailyError) && ( diff --git a/website/src/pages/DailyPage/components/Chart.tsx b/website/src/pages/DailyPage/components/Chart.tsx index a2d510adc..7ee88caca 100644 --- 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 && ( <> -

{title}

+ {/*

{title}

*/} {isLoadingDailySummary && ( <> - - + + )} {dataDailySummary.map((dailySummary, index) => {