0 ? dataset[0].bench.unit : "",
+ },
+ beginAtZero: true,
+ },
+ },
+ plugins: {
+ tooltip: {
+ callbacks: {
+ afterTitle: (items) => {
+ const index = items[0].dataIndex;
+ const data = dataset[index];
+ return "\n" + data.commit.message + "\n\n" + data.commit.timestamp + " committed by @" +
+ data.commit.author.username + "\n";
+ },
+ label: (item) => {
+ let label = item.formattedValue;
+ const { range, unit } = dataset[item.datasetIndex].bench;
+ label += " " + unit;
+ if (range) {
+ label += " (" + range + ")";
+ }
+ return label;
+ },
+ afterLabel: (item) => {
+ const { extra } = dataset[item.datasetIndex].bench;
+ return extra ? "\n" + extra : "";
+ },
+ },
+ },
+ },
+ onClick: (_mouseEvent, activeElems) => {
+ if (activeElems.length === 0) {
+ return;
+ }
+ // XXX: Undocumented. How can we know the index?
+ const index = activeElems[0].index;
+ const url = dataset[index].commit.url;
+ window.open(url, "_blank");
+ },
+ }}
+ />
+ );
+};
+
+export default function BenchmarkResultCharts(): JSX.Element {
+ const [data, setData] = useState<{ entries: { Benchmark: [] } }>();
+
+ useEffect(() => {
+ if (!data) {
+ (async () => {
+ setData(
+ JSON.parse(
+ (await (await fetch(
+ "https://raw.githubusercontent.com/discordeno/discordeno/benchies/benchmarksResult/data.js",
+ )).text()).slice(24),
+ ),
+ );
+ })();
+ }
+ }, []);
+
+ function collectBenchesPerTestCase(entries) {
+ const dataMap = new Map();
+ for (const entry of entries) {
+ const { commit, date, tool, benches } = entry;
+ for (const bench of benches) {
+ const result = { commit, date, tool, bench };
+ const arr = dataMap.get(bench.name);
+ if (arr === undefined) {
+ dataMap.set(bench.name, [result]);
+ } else {
+ arr.push(result);
+ }
+ }
+ }
+ return dataMap;
+ }
+
+ return (
+
+ {data
+ ? Array.from(
+ collectBenchesPerTestCase(data.entries.Benchmark),
+ ([key, value]) => ({ benchName: key, benches: value }),
+ ).map((
+ bench,
+ index,
+ ) => (
+
+ ))
+ : <>}
+
+ );
+}
diff --git a/site/src/components/BenchmarkResultCharts.jsx b/site/src/components/BenchmarkResultCharts.jsx
deleted file mode 100644
index ef040f82a..000000000
--- a/site/src/components/BenchmarkResultCharts.jsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import { useColorMode } from "@docusaurus/theme-common";
-import React, { useEffect, useState } from "react";
-import { Line } from "react-chartjs-2";
-// Colors from https://github.com/github/linguist/blob/master/lib/linguist/languages.yml
-const toolColors = {
- cargo: "#dea584",
- go: "#00add8",
- benchmarkjs: "#f1e05a",
- benchmarkluau: "#000080",
- pytest: "#3572a5",
- googlecpp: "#f34b7d",
- catch2: "#f34b7d",
- julia: "#a270ba",
- benchmarkdotnet: "#178600",
- customBiggerIsBetter: "#38ff38",
- customSmallerIsBetter: "#ff3838",
- _: "#333333",
-};
-
-const BenchmarkResultChart = ({ name, dataset, theme }) => {
- const color = toolColors[dataset.length > 0 ? dataset[0].tool : "_"];
- const data = {
- labels: dataset.map((d) => d.commit.id.slice(0, 7)),
- datasets: [
- {
- label: name,
- data: dataset.map((d) => d.bench.value),
- borderColor: color,
- backgroundColor: color + "60", // Add alpha for #rrggbbaa
- },
- ],
- };
- const options = {
- scales: {
- xAxes: [
- {
- scaleLabel: {
- display: true,
- labelString: "commit",
- },
- },
- ],
- yAxes: [
- {
- scaleLabel: {
- display: true,
- labelString: dataset.length > 0 ? dataset[0].bench.unit : "",
- },
- ticks: {
- beginAtZero: true,
- },
- },
- ],
- legend: {
- labels: {
- // This more specific font property overrides the global property
- defaultFontColor: theme === "light" ? "#000000" : "#FFFFFF",
- },
- },
- },
- tooltips: {
- callbacks: {
- afterTitle: (items) => {
- const { index } = items[0];
- const data = dataset[index];
- return "\n" + data.commit.message + "\n\n" + data.commit.timestamp + " committed by @" +
- data.commit.committer.username + "\n";
- },
- label: (item) => {
- let label = item.value;
- const { range, unit } = dataset[item.index].bench;
- label += " " + unit;
- if (range) {
- label += " (" + range + ")";
- }
- return label;
- },
- afterLabel: (item) => {
- const { extra } = dataset[item.index].bench;
- return extra ? "\n" + extra : "";
- },
- },
- },
- onClick: (_mouseEvent, activeElems) => {
- if (activeElems.length === 0) {
- return;
- }
- // XXX: Undocumented. How can we know the index?
- const index = activeElems[0]._index;
- const url = dataset[index].commit.url;
- window.open(url, "_blank");
- },
- };
- // console.log(theme);
- return ;
-};
-
-export default function BenchmarkResultCharts() {
- const { colorMode } = useColorMode();
- const [data, setData] = useState();
-
- useEffect(async () => {
- if (!data) {
- setData(
- JSON.parse(
- (await (await fetch(
- "https://raw.githubusercontent.com/discordeno/discordeno/benchies/benchmarksResult/data.js",
- )).text()).slice(24),
- ),
- );
- }
- }, []);
-
- function collectBenchesPerTestCase(entries) {
- const dataMap = new Map();
- for (const entry of entries) {
- const { commit, date, tool, benches } = entry;
- for (const bench of benches) {
- const result = { commit, date, tool, bench };
- const arr = dataMap.get(bench.name);
- if (arr === undefined) {
- dataMap.set(bench.name, [result]);
- } else {
- arr.push(result);
- }
- }
- }
- return dataMap;
- }
-
- return (data
- ? Array.from(
- collectBenchesPerTestCase(data.entries.Benchmark),
- ([key, value]) => ({ benchName: key, benches: value }),
- ).map((
- bench,
- index,
- ) => (
-
- ))
- : <>);
-}
diff --git a/site/src/components/architecture/BaseFlowChart.tsx b/site/src/components/architecture/BaseFlowChart.tsx
new file mode 100644
index 000000000..bc1117bb2
--- /dev/null
+++ b/site/src/components/architecture/BaseFlowChart.tsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import ReactFlow, { Background, Controls, Edge, Handle, Node, Position, useEdgesState, useNodesState } from "reactflow";
+import "reactflow/dist/style.css";
+
+export const multiplier = 225;
+export const height = 40;
+export const widthMultiplier = 0.75;
+
+export const defaultNodeOptions = {
+ targetPosition: Position.Left,
+ sourcePosition: Position.Right,
+ draggable: false,
+ style: { width: `${multiplier * 0.75}px`, height: `${height}px` },
+};
+
+export const defaultGroupOptions = {
+ draggable: false,
+};
+
+export default function BaseFlowChart(
+ { initialNodes = [], initialEdges = [] }: { initialNodes: Node[]; initialEdges: Edge[] },
+) {
+ function getWindowDimensions() {
+ const { innerWidth: width, innerHeight: height } = window;
+ return {
+ width,
+ height,
+ };
+ }
+
+ const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+ useEffect(() => {
+ function handleResize() {
+ setWindowDimensions(getWindowDimensions());
+ }
+
+ window.addEventListener("resize", handleResize);
+ return () => window.removeEventListener("resize", handleResize);
+ }, []);
+
+ const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+ const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+
+ return (
+ <>
+ = 997
+ ? `${
+ (100 *
+ ((windowDimensions.width - 300 -
+ (windowDimensions.width >= 1620 ? (windowDimensions.width - 1620) * 0.5 : 0)) /
+ windowDimensions.width) - 2) * widthMultiplier
+ }vw`
+ : "95vw",
+ height: "25vh",
+ }}
+ >
+
(
+
+
+
+
+ ),
+ baseLineNodeText: (n) => (
+
+
{n.data.label}
+
+ ),
+ }}
+ fitView
+ >
+
+
+
+
= 997
+ ? `${
+ (100 *
+ ((windowDimensions.width - 300 -
+ (windowDimensions.width >= 1620 ? (windowDimensions.width - 1620) * 0.5 : 0)) /
+ windowDimensions.width) - 2) * widthMultiplier
+ }vw`
+ : "95vw",
+ height: "50vh",
+ }}
+ >
+
{
+ //@ts-ignore
+ if (e.target.className === "react-flow__pane") nodeMouseHandler(e, { id: " - ", data: { label: " - " } });
+ }}
+ nodeTypes={{
+ baseLineNode: () => (
+
+
+
+
+ ),
+ baseLineNodeText: (n) => (
+
+
{n.data.label}
+
+ ),
+ }}
+ fitView
+ >
+
+
+
+