From e76a5f847e78fee4e62f6eb37d468557a1504c55 Mon Sep 17 00:00:00 2001
From: 简律纯 <hsiangnianian@outlook.com>
Date: Wed, 3 May 2023 01:22:45 +0800
Subject:

---
 .../pages/pack-home/PackBenchmarksGraph.tsx        | 333 ---------------------
 1 file changed, 333 deletions(-)
 delete mode 100644 docs/components/pages/pack-home/PackBenchmarksGraph.tsx

(limited to 'docs/components/pages/pack-home/PackBenchmarksGraph.tsx')

diff --git a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx b/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
deleted file mode 100644
index f3107b0..0000000
--- a/docs/components/pages/pack-home/PackBenchmarksGraph.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import cn from "classnames";
-import {
-  animate,
-  motion,
-  useInView,
-  useAnimation,
-  AnimationPlaybackControls,
-} from "framer-motion";
-import Image from "next/image";
-import { useEffect, useRef, useState } from "react";
-import benchmarkData from "./benchmark-data/data.json";
-import { Gradient } from "../home-shared/Gradient";
-import gradients from "../home-shared/gradients.module.css";
-import {
-  BenchmarkBar,
-  BenchmarkCategory,
-  BenchmarkData,
-  BenchmarkNumberOfModules,
-} from "./PackBenchmarks";
-
-interface BenchmarksGraphProps {
-  category: BenchmarkCategory;
-  numberOfModules: BenchmarkNumberOfModules;
-  bars: BenchmarkBar[];
-  pinTime?: true;
-}
-
-export function BenchmarksGraph({
-  category,
-  numberOfModules,
-  bars,
-  pinTime,
-}: BenchmarksGraphProps) {
-  const data: BenchmarkData = benchmarkData[category][numberOfModules];
-  const keys = bars.map((bar) => bar.key);
-  const longestTime = Math.max(...keys.map((key) => data[key])) * 1000;
-  const longestTimeWithPadding = longestTime * 1.15;
-  const graphRef = useRef(null);
-  const graphInView = useInView(graphRef, { once: true, margin: "-128px" });
-
-  return (
-    <div className="flex w-full max-w-[1248px] relative px-6">
-      <div className="absolute top-0 flex items-center justify-center flex-1 w-full h-full">
-        <Gradient
-          gray
-          width="100%"
-          height="100%"
-          className="dark:opacity-0 dark:md:opacity-25 opacity-10"
-        />
-      </div>
-      <div
-        ref={graphRef}
-        className="relative flex flex-col flex-1 gap-6 md:gap-10"
-      >
-        {bars.map((bar) => {
-          return (
-            <GraphBar
-              key={bar.key}
-              turbo={bar.turbo}
-              Label={
-                <GraphLabel label={bar.label} turbo={bar.turbo} swc={bar.swc} />
-              }
-              duration={data[bar.key] * 1000}
-              longestTime={longestTimeWithPadding}
-              inView={graphInView}
-              pinTime={pinTime}
-            ></GraphBar>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-const START_DELAY = 0.0;
-
-const graphBarVariants = {
-  initial: {
-    width: 0,
-  },
-  progress: {
-    width: "100%",
-  },
-};
-
-const graphBarWrapperVariants = {
-  hidden: {
-    opacity: 0,
-  },
-  show: {
-    opacity: 1,
-  },
-};
-
-function GraphBar({
-  turbo,
-  duration,
-  longestTime,
-  inView,
-  Label,
-  pinTime,
-}: {
-  turbo?: boolean;
-  duration: number;
-  longestTime: number;
-  Label: JSX.Element;
-  inView?: boolean;
-  // Pin the time
-  pinTime?: true;
-}) {
-  const controls = useAnimation();
-  const [timer, setTimer] = useState(0);
-  const [timerAnimation, setTimerAnimation] =
-    useState<AnimationPlaybackControls>();
-  const [barWidth, setBarWidth] = useState(0);
-  const [, setFinished] = useState(false);
-
-  async function stopAnimation() {
-    timerAnimation && timerAnimation.stop();
-    controls.stop();
-  }
-
-  async function resetAnimation() {
-    setTimer(0);
-    setFinished(false);
-    await controls.start("initial");
-  }
-
-  async function startAnimation() {
-    const transition = {
-      duration: duration / 1000,
-      delay: START_DELAY,
-    };
-    setBarWidth((duration / longestTime) * 100);
-    await controls.start("show");
-    controls
-      .start("progress", {
-        ...transition,
-        ease: "linear",
-      })
-      .then(() => {
-        setFinished(true);
-      });
-    const timerAnimationRef = animate(0, duration, {
-      ...transition,
-      ease: "linear",
-      onUpdate(value) {
-        setTimer(value);
-      },
-    });
-    setTimerAnimation(timerAnimationRef);
-  }
-
-  async function playFullAnimation() {
-    await stopAnimation();
-    await controls.start("hidden");
-    await resetAnimation();
-    await startAnimation();
-  }
-
-  useEffect(() => {
-    if (inView) {
-      void startAnimation();
-    } else {
-      void stopAnimation();
-      void resetAnimation();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [inView]);
-
-  useEffect(() => {
-    if (!inView) return;
-    void playFullAnimation();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [duration, longestTime]);
-
-  return (
-    <div className="justify-center w-full gap-1 md:flex-row md:flex align-center">
-      <div className="flex items-center w-48">{Label}</div>
-      <div className="flex w-full items-center justify-between gap-4 z-10 border dark:border-[#333333] rounded-lg p-1">
-        <motion.div
-          animate={controls}
-          variants={graphBarWrapperVariants}
-          style={{ width: `${barWidth}%` }}
-          transition={{ duration: 0.1 }}
-          initial="hidden"
-          className={cn(
-            "flex items-center h-full rounded relative dark:bg-[#383838] bg-[#E6E6E6]"
-          )}
-        >
-          <motion.div
-            className={cn(
-              "h-12 rounded w-0 relative",
-              turbo ? gradients.benchmarkTurbo : gradients.benchmark,
-              { [gradients.barBorder]: !turbo }
-            )}
-            variants={graphBarVariants}
-            animate={controls}
-            transition={{ duration: 0.1 }}
-          />
-        </motion.div>
-        <motion.div
-          animate={controls}
-          variants={graphBarWrapperVariants}
-          className="pr-2"
-          transition={{ duration: 0.1 }}
-        >
-          <GraphTimer
-            turbo={turbo}
-            timer={pinTime ? duration : timer}
-            duration={duration}
-          />
-        </motion.div>
-      </div>
-    </div>
-  );
-}
-
-const GraphTimer = ({
-  turbo,
-  timer,
-  duration,
-}: {
-  turbo: boolean;
-  timer: number;
-  duration: number;
-}) => {
-  return (
-    <div className={`flex flex-row gap-2 w-24 justify-end items-center z-10`}>
-      {turbo && (
-        <div className="relative flex w-6 h-6">
-          <Image
-            alt="HydroRollTRPG"
-            src="/images/docs/TRPG/turbo-benchmark-icon-light.svg"
-            width={32}
-            height={32}
-            className="block dark:hidden"
-          />
-          <Image
-            alt="HydroRollTRPG"
-            src="/images/docs/TRPG/turbo-benchmark-icon-dark.svg"
-            width={32}
-            height={32}
-            className="hidden dark:block"
-          />
-          <Gradient
-            pink
-            width="100%"
-            height="100%"
-            small
-            className="opacity-0 dark:opacity-60"
-          />
-        </div>
-      )}
-      <p className="font-mono">
-        <Time value={timer} maxValue={duration} />
-      </p>
-    </div>
-  );
-};
-
-function roundTo(num: number, decimals: number) {
-  const factor = Math.pow(10, decimals);
-  return Math.round(num * factor) / factor;
-}
-
-const Time = ({
-  value,
-  maxValue,
-}: {
-  value: number;
-  maxValue: number;
-}): JSX.Element => {
-  let unitValue: string;
-  let unit: string;
-  if (maxValue < 1000) {
-    unitValue = Math.round(value).toFixed(0);
-    unit = "ms";
-  } else {
-    const roundedValue = roundTo(value / 1000, 1);
-    unitValue = roundedValue.toFixed(1);
-    unit = "s";
-  }
-
-  return (
-    <>
-      {unitValue}
-      {unit}
-    </>
-  );
-};
-
-function GraphLabel({
-  label,
-  turbo,
-  swc,
-  mobileOnly,
-  esbuild,
-}: {
-  label: string;
-  turbo?: boolean;
-  swc?: boolean;
-  mobileOnly?: boolean;
-  esbuild?: boolean;
-}) {
-  return (
-    <div
-      className={`flex items-center h-12 whitespace-nowrap font-bold gap-y-1 gap-x-2 ${
-        mobileOnly && "md:hidden"
-      }`}
-    >
-      <p>{label}</p>
-      {turbo && (
-        <p
-          className={cn(
-            "font-space-grotesk m-0",
-            gradients.benchmarkTurboLabel
-          )}
-        >
-          turbo
-        </p>
-      )}
-      {swc && (
-        <p className="font-space-grotesk m-0 font-light text-[#666666]">
-          with SWC
-        </p>
-      )}
-      {esbuild && (
-        <p className="font-space-grotesk m-0 text-[#666666]">esbuild</p>
-      )}
-    </div>
-  );
-}
-- 
cgit v1.2.3-70-g09d2