Hello World
+
+ {languageResults.map((result, index) => (
+
);
}
diff --git a/result-display/src/components/Header.tsx b/result-display/src/components/Header.tsx
new file mode 100644
index 0000000..78daf7d
--- /dev/null
+++ b/result-display/src/components/Header.tsx
@@ -0,0 +1,11 @@
+import "../styles/Header.css";
+
+export default function Header() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/result-display/src/components/LanguageCard.tsx b/result-display/src/components/LanguageCard.tsx
new file mode 100644
index 0000000..ac9772e
--- /dev/null
+++ b/result-display/src/components/LanguageCard.tsx
@@ -0,0 +1,132 @@
+import "../styles/LanguageCard.css";
+import { Accordion, Span, VStack, HStack, Text } from "@chakra-ui/react";
+import LanguageGraph from "./LanguageGraph";
+
+export interface LanguageData {
+ lang_name: string;
+ image: string;
+ frameworks: string[];
+ requests: number;
+ duration_in_microseconds: number;
+ requests_per_sec: number;
+ bytes_transfer_per_sec: number;
+ connect_errors: number;
+ read_errors: number;
+ write_errors: number;
+ http_errors: number;
+ timeouts: number;
+ latency_distribution: LatencyObjects[];
+}
+
+export interface LatencyObjects {
+ percentile: number;
+ latency_in_microseconds: number;
+}
+
+export default function LanguageCard({
+ lang_name,
+ frameworks,
+ image,
+ requests,
+ duration_in_microseconds,
+ requests_per_sec,
+ bytes_transfer_per_sec,
+ connect_errors,
+ read_errors,
+ write_errors,
+ http_errors,
+ timeouts,
+ latency_distribution,
+}: LanguageData) {
+ const totalErrors =
+ connect_errors + read_errors + write_errors + http_errors + timeouts;
+
+ const errorsAccordian = {
+ value: "errors",
+ title: `Errors (${totalErrors})`,
+ };
+
+ return (
+ <>
+ RestTest Results
+
+
+
+ );
+}
diff --git a/result-display/src/components/LanguageGraph.tsx b/result-display/src/components/LanguageGraph.tsx
new file mode 100644
index 0000000..1891f75
--- /dev/null
+++ b/result-display/src/components/LanguageGraph.tsx
@@ -0,0 +1,46 @@
+import type { LatencyObjects } from "./LanguageCard";
+import { ResponsiveLine } from "@nivo/line";
+
+interface GraphData {
+ data: LatencyObjects[];
+ lang_name: string;
+}
+
+export default function LanguageGraph({ data, lang_name }: GraphData) {
+ const transformedData = [
+ {
+ id: lang_name,
+ data: data.map((item) => ({
+ x: item.percentile,
+ y: item.latency_in_microseconds,
+ })),
+ },
+ ];
+
+ return (
+ <>
+
+ 
+
+ {lang_name}
+[{...frameworks}]
+
+
+
+
+
+
+
+ {errorsAccordian.title}
+
+
+
+
+
+
+ Connection Errors:
+
+ {connect_errors}
+
+
+
+ Read Errors:
+
+ {read_errors}
+
+
+
+ Write Errors:
+
+ {write_errors}
+
+
+
+ HTTP Errors:
+
+ {http_errors}
+
+
+
+ Timeouts:
+
+ {timeouts}
+
+
+
+
+
+
+
+
+
+ + Total requests: {requests} +
++ Duration (mus): {duration_in_microseconds} +
++ Requests (/s): {requests_per_sec} +
++ Bytes Moved (/s): + {bytes_transfer_per_sec} +
+
+
+
+ );
+}
diff --git a/result-display/src/components/ui/color-mode.tsx b/result-display/src/components/ui/color-mode.tsx
new file mode 100644
index 0000000..bedf015
--- /dev/null
+++ b/result-display/src/components/ui/color-mode.tsx
@@ -0,0 +1,108 @@
+"use client"
+
+import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
+import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
+import { ThemeProvider, useTheme } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+import * as React from "react"
+import { LuMoon, LuSun } from "react-icons/lu"
+
+export interface ColorModeProviderProps extends ThemeProviderProps {}
+
+export function ColorModeProvider(props: ColorModeProviderProps) {
+ return (
+ - Duration (mus): {duration_in_microseconds} + Duration (μs): {duration_in_microseconds}
Requests (/s): {requests_per_sec} diff --git a/result-display/src/components/LanguageGraph.tsx b/result-display/src/components/LanguageGraph.tsx index 70652f6..b864e5f 100644 --- a/result-display/src/components/LanguageGraph.tsx +++ b/result-display/src/components/LanguageGraph.tsx @@ -41,6 +41,21 @@ export default function LanguageGraph({ data, lang_name }: GraphData) { pointLabelYOffset={-12} enableTouchCrosshair={true} useMesh={true} + tooltip={({ point }) => ( +
+
+ )}
/>
From 5dfc35a95e00c454b9e6780af948a6bd66ea0c97 Mon Sep 17 00:00:00 2001
From: James Daniel <114611694+jamesdaniel3@users.noreply.github.com>
Date: Fri, 27 Jun 2025 15:18:08 -0400
Subject: [PATCH 8/9] improved spacing of text and graphs
---
.../src/components/LanguageCard.tsx | 19 ++++++++++++++-----
.../src/components/LanguageGraph.tsx | 4 ++--
result-display/src/styles/Header.css | 1 +
result-display/src/styles/LanguageCard.css | 5 +++--
4 files changed, 20 insertions(+), 9 deletions(-)
diff --git a/result-display/src/components/LanguageCard.tsx b/result-display/src/components/LanguageCard.tsx
index bdc30a7..b78f3ad 100644
--- a/result-display/src/components/LanguageCard.tsx
+++ b/result-display/src/components/LanguageCard.tsx
@@ -61,16 +61,21 @@ export default function LanguageCard({
{point.data.yFormatted} μs
+ - Total requests: {requests} + Total requests:{" "} + {requests}
- Duration (μs): {duration_in_microseconds} + Duration (μs):{" "} + {duration_in_microseconds}
- Requests (/s): {requests_per_sec} + Requests (/s):{" "} + {requests_per_sec}
- Bytes Moved (/s): + + Bytes Moved (/s): + {bytes_transfer_per_sec}