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