From 56c1ba11fcfabdc9bfa4ebf93454303380f79869 Mon Sep 17 00:00:00 2001
From: julius <julius@0124816.xyz>
Date: Mon, 26 May 2025 07:51:44 +0200
Subject: [PATCH] chore: remove unused

---
 src/Analysis.tsx | 228 -----------------------------------------------
 src/BarChart.tsx |  95 --------------------
 2 files changed, 323 deletions(-)
 delete mode 100644 src/Analysis.tsx
 delete mode 100644 src/BarChart.tsx

diff --git a/src/Analysis.tsx b/src/Analysis.tsx
deleted file mode 100644
index a6e56f3..0000000
--- a/src/Analysis.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import { useEffect, useState } from "react";
-import { apiAuth } from "./api";
-
-//const debounce = <T extends (...args: any[]) => void>(
-//  func: T,
-//  delay: number
-//): ((...args: Parameters<T>) => void) => {
-//  let timeoutId: number | null = null;
-//  return (...args: Parameters<T>) => {
-//    if (timeoutId !== null) {
-//      clearTimeout(timeoutId);
-//    }
-//    console.log(timeoutId);
-//    timeoutId = setTimeout(() => {
-//      func(...args);
-//    }, delay);
-//  };
-//};
-//
-
-interface Params {
-  nodeSize: number;
-  edgeWidth: number;
-  arrowSize: number;
-  fontSize: number;
-  distance: number;
-  weighting: boolean;
-  popularity: boolean;
-  show: number;
-}
-
-let timeoutID: NodeJS.Timeout | null = null;
-export default function Analysis() {
-  const [image, setImage] = useState("");
-  const [params, setParams] = useState<Params>({
-    nodeSize: 2000,
-    edgeWidth: 1,
-    arrowSize: 16,
-    fontSize: 10,
-    distance: 2,
-    weighting: true,
-    popularity: true,
-    show: 2,
-  });
-  const [showControlPanel, setShowControlPanel] = useState(false);
-  const [loading, setLoading] = useState(true);
-
-  // Function to generate and fetch the graph image
-  async function loadImage() {
-    setLoading(true);
-    await apiAuth("analysis/image", params, "POST")
-      .then((data) => {
-        setImage(data.image);
-        setLoading(false);
-      })
-      .catch((e) => {
-        console.log("best to just reload... ", e);
-      });
-  }
-
-  useEffect(() => {
-    if (timeoutID) {
-      clearTimeout(timeoutID);
-    }
-    timeoutID = setTimeout(() => {
-      loadImage();
-    }, 1000);
-  }, [params]);
-
-  function showLabel() {
-    switch (params.show) {
-      case 0:
-        return "dislike";
-      case 1:
-        return "both";
-      case 2:
-        return "like";
-    }
-  }
-
-  return (
-    <div className="stack column dropdown">
-      <button onClick={() => setShowControlPanel(!showControlPanel)}>
-        Parameters{" "}
-        <svg
-          viewBox="0 0 24 24"
-          height="1.2em"
-          style={{
-            fill: "#ffffff",
-            display: "inline",
-            top: "0.2em",
-            position: "relative",
-            transform: showControlPanel ? "rotate(180deg)" : "unset",
-          }}
-        >
-          {" "}
-          <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"> </path>
-        </svg>
-      </button>
-      <div id="control-panel" className={showControlPanel ? "opened" : ""}>
-        <div className="control">
-          <datalist id="markers">
-            <option value="0"></option>
-            <option value="1"></option>
-            <option value="2"></option>
-          </datalist>
-          <div id="three-slider">
-            <label>😬</label>
-            <input
-              type="range"
-              list="markers"
-              min="0"
-              max="2"
-              step="1"
-              width="16px"
-              onChange={(evt) =>
-                setParams({ ...params, show: Number(evt.target.value) })
-              }
-            />
-            <label>😍</label>
-          </div>
-          {showLabel()}
-        </div>
-        <div className="control">
-          <div className="checkBox">
-            <input
-              type="checkbox"
-              checked={params.weighting}
-              onChange={(evt) =>
-                setParams({ ...params, weighting: evt.target.checked })
-              }
-            />
-            <label>weighting</label>
-          </div>
-
-          <div className="checkBox">
-            <input
-              type="checkbox"
-              checked={params.popularity}
-              onChange={(evt) =>
-                setParams({ ...params, popularity: evt.target.checked })
-              }
-            />
-            <label>popularity</label>
-          </div>
-        </div>
-
-        <div className="control">
-          <label>distance between nodes</label>
-          <input
-            type="range"
-            min="0.01"
-            max="3.001"
-            step="0.05"
-            value={params.distance}
-            onChange={(evt) =>
-              setParams({ ...params, distance: Number(evt.target.value) })
-            }
-          />
-          <span>{params.distance}</span>
-        </div>
-
-        <div className="control">
-          <label>node size</label>
-          <input
-            type="range"
-            min="500"
-            max="3000"
-            value={params.nodeSize}
-            onChange={(evt) =>
-              setParams({ ...params, nodeSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.nodeSize}</span>
-        </div>
-
-        <div className="control">
-          <label>font size</label>
-          <input
-            type="range"
-            min="4"
-            max="24"
-            value={params.fontSize}
-            onChange={(evt) =>
-              setParams({ ...params, fontSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.fontSize}</span>
-        </div>
-
-        <div className="control">
-          <label>edge width</label>
-          <input
-            type="range"
-            min="1"
-            max="5"
-            step="0.1"
-            value={params.edgeWidth}
-            onChange={(evt) =>
-              setParams({ ...params, edgeWidth: Number(evt.target.value) })
-            }
-          />
-          <span>{params.edgeWidth}</span>
-        </div>
-
-        <div className="control">
-          <label>arrow size</label>
-          <input
-            type="range"
-            min="10"
-            max="50"
-            value={params.arrowSize}
-            onChange={(evt) =>
-              setParams({ ...params, arrowSize: Number(evt.target.value) })
-            }
-          />
-          <span>{params.arrowSize}</span>
-        </div>
-      </div>
-      <button onClick={() => loadImage()}>reload ↻</button>
-      {loading ? (
-        <span className="loader"></span>
-      ) : (
-        <img src={"data:image/png;base64," + image} width="86%" />
-      )}
-    </div>
-  );
-}
diff --git a/src/BarChart.tsx b/src/BarChart.tsx
deleted file mode 100644
index e09e40b..0000000
--- a/src/BarChart.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { FC } from 'react';
-import { PlayerRanking } from './types';
-
-interface BarChartProps {
-  players: PlayerRanking[];
-  width: number;
-  height: number;
-  std: boolean;
-}
-
-const BarChart: FC<BarChartProps> = ({ players, width, height, std }) => {
-  const padding = 24;
-  const maxValue = Math.max(...players.map((player) => player.rank)) + 1;
-  const barWidth = (width - 2 * padding) / players.length;
-
-  return (
-    <svg width={width} height={height}>
-
-      {players.map((player, index) => (
-        <rect
-          key={index}
-          x={index * barWidth + padding}
-          y={height - (1 - player.rank / maxValue) * height}
-          width={barWidth - 8} // subtract 2 for some spacing between bars
-          height={(1 - player.rank / maxValue) * height}
-          fill="#69f"
-        />
-      ))}
-
-      {players.map((player, index) => (
-        <text
-          key={index}
-          x={index * barWidth + barWidth / 2 - 4 + padding}
-          y={height - (1 - player.rank / maxValue) * height - 5}
-          textAnchor="middle"
-          //transform='rotate(-27)'
-          //style={{ transformOrigin: "center", transformBox: "fill-box" }}
-          fontSize="16px"
-          fill="#404040"
-        >
-          {player.name}
-        </text>
-      ))}
-
-      {players.map((player, index) => (
-        <text
-          key={index}
-          x={index * barWidth + barWidth / 2 + padding - 4}
-          y={height - 8}
-          textAnchor="middle"
-          fontSize="12px"
-          fill="#404040"
-        >
-          {player.rank}
-        </text>
-      ))}
-
-      {std && players.map((player, index) => (
-        <line
-          key={`error-${index}`}
-          x1={index * barWidth + barWidth / 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-      {std && players.map((player, index) => (
-        <line
-          key={`cap-${index}-top`}
-          x1={index * barWidth + barWidth / 2 - 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height - (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-      {std && players.map((player, index) => (
-        <line
-          key={`cap-${index}-bottom`}
-          x1={index * barWidth + barWidth / 2 - 2 + padding}
-          y1={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          x2={index * barWidth + barWidth / 2 + 2 + padding}
-          y2={height - (1 - player.rank / maxValue) * height + (player.std / maxValue) * height}
-          stroke="#ff0000"
-          strokeWidth="1"
-        />
-      ))}
-    </svg>
-  );
-};
-
-export default BarChart;