chore: remove unused
This commit is contained in:
parent
ad2b2993df
commit
56c1ba11fc
GPG Key ID:
C80A63E6A5FD7092
228
src/Analysis.tsx
228
src/Analysis.tsx
@ -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>
|
||||
);
|
||||
}
|
||||
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user