차트에서 불필요한 파일 정리

frontend/src/charts/axes/AxisV0.tsx

-import React, { useMemo } from "react";
-import { scaleLinear } from "d3-scale";
-
-export const AxisV0 = () => {
-  const ticks = useMemo(() => {
-    const xScale = scaleLinear().domain([0, 100]).range([10, 290]);
-
-    return xScale.ticks().map((value) => ({
-      value,
-      xOffset: xScale(value),
-    }));
-  }, []);
-
-  return (
-    <svg>
-      <path d="M 9.5 0.5 H 290.5" stroke="currentColor" />
-      {ticks.map(({ value, xOffset }) => (
-        <g key={value} transform={`translate(${xOffset}, 0)`}>
-          <line y2={6} stroke="currentColor" />
-          <text
-            key={value}
-            style={{
-              fontSize: "10px",
-              textAnchor: "middle",
-              transform: "translateY(20px)",
-            }}
-          >
-            {value}
-          </text>
-        </g>
-      ))}
-    </svg>
-  );
-};

frontend/src/charts/axes/BottomAxis.tsx

-import React from "react";
-import { axisBottom } from "d3-axis";
-import { scaleLinear } from "d3-scale";
-
-export const BottomAxis = () => {
-  let scale = scaleLinear().domain([0, 100]).range([0, 500]);
-  let axis = axisBottom(scale);
-
-  console.log("axis:", axis);
-
-  return (
-    <div>
-      <h1>BottomAxis</h1>
-      <svg width="600" height="100">
-        <g transform="translate(20, 50)"></g>
-      </svg>
-    </div>
-  );
-};

frontend/src/charts/bars/BarChartWithAnimation.tsx

-import React from "react";
-import { max, min, range } from "d3";
-import { scaleLinear, scaleBand } from "d3-scale";
-import { BarText } from "../texts";
-import { BarWithAnimation } from "./BarWithAnimation";
-
-type Props = {
-  dataset: number[];
-};
-export const BarChartWithAnimation = ({ dataset }: Props) => {
-  const margin = { top: 20, right: 30, bottom: 20, left: 30 };
-  const width = window.innerWidth - margin.left - margin.right;
-  const height = 300 - margin.bottom - margin.top;
-
-  const xScale = scaleBand<number>()
-    .domain(range(dataset.length))
-    .rangeRound([0, width])
-    .paddingInner(0.05);
-  const yScale = scaleLinear()
-    .domain([0, max(dataset) || 0])
-    .rangeRound([0, height]);
-
-  return (
-    <svg
-      width={width + margin.left + margin.right}
-      height={height + margin.bottom + margin.top}
-      style={{ borderWidth: "2px", borderColor: "black" }}
-    >
-      <BarWithAnimation
-        dataset={dataset}
-        xScale={xScale}
-        yScale={yScale}
-        height={height}
-      />
-      <BarText
-        dataset={dataset}
-        xScale={xScale}
-        yScale={yScale}
-        height={height}
-      />
-    </svg>
-  );
-};

frontend/src/charts/bars/BarWithAnimation.tsx

-import { ScaleBand, ScaleLinear } from "d3-scale";
-import React, { Fragment, useEffect, useRef } from "react";
-
-type Props = {
-  dataset: number[];
-  height: number;
-  xScale: ScaleBand<number>;
-  yScale: ScaleLinear<number, number>;
-};
-
-export const BarWithAnimation = ({
-  dataset,
-  height,
-  xScale,
-  yScale,
-}: Props) => {
-  // console.log("dataset:", dataset);
-  const preDataset = useRef(dataset);
-  useEffect(() => {
-    preDataset.current = dataset;
-  }, [dataset]);
-
-  const getStyle = (i: number) => {
-    const style = {
-      // fill: "red",
-      animationName: `inmoveleftright-${i}`,
-      animationDuration: "1s",
-      // animationDirection: "alternate",
-      animationIterationCount: "1",
-      // transformOrigin: "bottom",
-    };
-    return style;
-  };
-
-  return (
-    <g transform={`scale(1, -1) translate(0, ${-height})`}>
-      {dataset.map((d, i) => {
-        // console.log("d", d, "i", i, "x:", xScale(i), "y", yScale(d));
-        return (
-          <Fragment key={Math.random()}>
-            <style>
-              {`
-@keyframes inmoveleftright-${i} {
-  0% {
-    height: ${yScale(preDataset.current[i])}px;
-  }
-  100% {
-    height: ${yScale(d)}px;
-  }
-}  
-`}
-            </style>
-            <rect
-              x={xScale(i)}
-              y={0}
-              width={xScale.bandwidth()}
-              height={yScale(d)}
-              fill={`rgb(0, 0, ${Math.round(d * 10)})`}
-              style={getStyle(i)}
-            ></rect>
-          </Fragment>
-        );
-      })}
-    </g>
-  );
-};

frontend/src/charts/scatters/CirclesWithG.tsx

-import React from "react";
-
-type Props = {
-  dataset: number[][];
-};
-
-export const CirclesWithG = ({ dataset }: Props) => {
-  return (
-    <g>
-      {dataset.map((d) => (
-        <circle key={d[0]} cx={d[0]} cy={d[1]} r={3}></circle>
-      ))}
-    </g>
-  );
-};