Reactグラフライブラリの検証の備忘録（MUI X Charts, Recharts, Victory）

import { BarChart } from "@mui/x-charts";
import { FC, useMemo, useState } from "react";
import { axisClasses } from "@mui/x-charts/ChartsAxis";
import {
  RadioGroup,
  FormControl,
  FormLabel,
  FormControlLabel,
  Radio,
  Stack,
  Typography,
  Box,
} from "@mui/material";
import { DataSelect, items, type Item } from "../datas/item";

const createDataset = (currentSelect: DataSelect) => {
  const customDataset: Item[] = [];
  switch (currentSelect) {
    case "ringo":
      customDataset.push(
        ...items.map((data) => ({
          itemA: data.itemA,
          month: data.month,
        }))
      );
      break;
    case "mikan":
      customDataset.push(
        ...items.map((data) => ({
          itemB: data.itemB,
          itemC: data.itemC,
          month: data.month,
        }))
      );
      break;
    case "gokei":
      customDataset.push(
        ...items.map((data) => ({
          itemB: data.itemB,
          itemA: data.itemA,
          month: data.month,
        }))
      );
      break;
  }
  return customDataset;
};

export const Sample1: FC = () => {
  const [currentDataSelect, setDataCurrentSelect] =
    useState<DataSelect>("gokei");

  const series = useMemo(() => {
    const s = [];
    const valueFormatter = (value: number | null) => `${value}`;

    if (currentDataSelect === "ringo" || currentDataSelect === "gokei") {
      s.push({
        dataKey: "itemA",
        stack: "A",
        label: "りんごがとれた数",
        valueFormatter,
        color: "#62b4f7",
      });
    }

    if (currentDataSelect === "mikan" || currentDataSelect === "gokei") {
      s.push({
        dataKey: "itemB",
        label: "みかんがとれた数",
        stack: "A",
        valueFormatter,
        color: "#7fea79",
      });
    }

    if (currentDataSelect === "mikan") {
      s.push({
        dataKey: "itemC",
        label: "有田みかんの数",
        valueFormatter,
        color: "#f8ed69",
      });
    }

    return s;
  }, [currentDataSelect]);

  return (
    <Box>
      <Typography variant="h6">
        MUI X Charts Sample 1 bar only : りんごとみかんがとれた数
      </Typography>

      <FormControl sx={{ py: 2 }}>
        <FormLabel id="data-select">表示データ</FormLabel>
        <RadioGroup
          aria-labelledby="data-select"
          name="controlled-radio-buttons-group"
          value={currentDataSelect}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
            setDataCurrentSelect(
              (event.target as HTMLInputElement).value as DataSelect
            );
          }}>
          <Stack direction="row">
            <FormControlLabel
              value="mikan"
              control={<Radio />}
              label="みかん"
            />
            <FormControlLabel
              value="ringo"
              control={<Radio />}
              label="りんご"
            />
            <FormControlLabel value="gokei" control={<Radio />} label="合計" />
          </Stack>
        </RadioGroup>
      </FormControl>

      <div className="bar-chart">
        <BarChart
          dataset={createDataset(currentDataSelect)}
          axisHighlight={{
            x: "band",
          }}
          // barLabel={(item: BarItem, _: BarLabelContext) => String(item.value)}
          borderRadius={2}
          xAxis={[
            {
              scaleType: "band",
              dataKey: "month",
              tickPlacement: "start",
              tickLabelPlacement: "middle",
              position: "top",
              // typeエラーになるが設定はできる
              // categoryGapRatio: 0.1,
              // barGapRatio: 0.1,
            },
          ]}
          yAxis={[
            {
              // label: 'rainfall',
              labelStyle: {
                fontSize: 12,
              },
            },
          ]}
          series={series}
          grid={{ horizontal: true }}
          // ここで全体のバーの大きさは調整
          width={1000}
          height={300}
          margin={{
            left: 30,
            bottom: 40,
          }}
          sx={{
            [`.${axisClasses.left} .${axisClasses.label}`]: {
              transform: "translateX(-10px)",
            },
          }}
          slotProps={{
            legend: {
              direction: "row",
              position: { vertical: "top", horizontal: "left" },
              padding: 0,
              labelStyle: {
                fontSize: 14,
              },
            },
          }}
          tooltip={{
            trigger: "axis",
          }}
        />
      </div>
    </Box>
  );
};

import { FC } from "react";
import {
  ResponsiveChartContainer,
  LinePlot,
  BarPlot,
  ChartsXAxis,
  ChartsYAxis,
  ChartsAxisHighlight,
  ChartsLegend,
  ChartsTooltip,
  ChartsAxisTooltipContent,
} from "@mui/x-charts";
import { Box, Typography } from "@mui/material";

export const Sample2: FC = () => {
  return (
    <Box>
      <Typography variant="h6">
        MUI X Charts Sample2 bar and line :
        りんごとみかんの総数ととても良いりんご率
      </Typography>
      <Box sx={{ width: "100%", maxWidth: 600 }}>
        <ResponsiveChartContainer
          dataset={[
            {
              ringo: 10,
              mikan: 20,
              bestRingo: 4,
              bestMikan: 3,
              bestRingoPercentage: 10,
              bestMikanPercentage: 30,
              month: "2023/04",
            },
            {
              ringo: 15,
              mikan: 26,
              bestRingo: 5,
              bestMikan: 7,
              bestRingoPercentage: 2,
              bestMikanPercentage: 10,
              month: "2023/05",
            },
            {
              ringo: 40,
              mikan: 23,
              bestRingo: 8,
              bestMikan: 2,
              bestRingoPercentage: 50,
              bestMikanPercentage: 5,
              month: "2023/06",
            },
          ]}
          xAxis={[
            {
              scaleType: "band",
              dataKey: "month",
              id: "x-axis-month",
            },
          ]}
          yAxis={[
            {
              labelStyle: {
                fontSize: 12,
              },
              id: "y-axis",
            },
          ]}
          series={[
            {
              dataKey: "ringo",
              type: "bar",
              stack: "A",
              label: "りんごの総数",
              color: "#62b4f7",
            },
            {
              dataKey: "mikan",
              type: "bar",
              stack: "A",
              label: "みかんの総数",
              color: "#7fea79",
            },
            {
              type: "bar",
              dataKey: "bestRingo",
              stack: "B",
              label: "よいりんご",
              color: "#62b4f7",
            },
            {
              dataKey: "bestMikan",
              type: "bar",
              stack: "B",
              label: "よいみかん",
              color: "#7fea79",
            },
            {
              type: "line",
              dataKey: "bestRingoPercentage",
              label: "よいりんご率",
              color: "#0846a3",
            },
            {
              type: "line",
              dataKey: "bestMikanPercentage",
              label: "よいみかん率",
              color: "#0846a3",
            },
          ]}
          height={400}
          margin={{ left: 30 }}>
          <BarPlot />
          <LinePlot />
          <ChartsXAxis axisId="x-axis-month" />
          <ChartsYAxis axisId="y-axis" />
          <ChartsTooltip
            trigger="axis"
            slots={{
              axisContent: ({ axisData, classes, series }) => {
                // ここで比率や前週比を出す
                // ChartsAxisTooltipContentを書き換える必要あり
                return (
                  <>
                    <ChartsAxisTooltipContent
                      axisData={axisData}
                      classes={classes}
                      contentProps={{
                        series: series,
                      }}
                    />
                  </>
                );
              },
            }}
          />
          <ChartsAxisHighlight />
          <ChartsLegend
            position={{ vertical: "top", horizontal: "left" }}
            slotProps={{ legend: { labelStyle: { fontSize: 14 } } }}
          />
        </ResponsiveChartContainer>
      </Box>
    </Box>
  );
};

import { FC, useState } from "react";
import {
  Bar,
  BarChart,
  Legend,
  Tooltip,
  Rectangle,
  ResponsiveContainer,
  XAxis,
  YAxis,
} from "recharts";
import { DataSelect, items } from "../datas/item";
import {
  Box,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  Stack,
  Typography,
} from "@mui/material";

export const Sample: FC = () => {
  const [currentDataSelect, setDataCurrentSelect] =
    useState<DataSelect>("gokei");

  return (
    <Box sx={{ width: 1000 }}>
      <Typography variant="h6">
        Recharts Sample 1 bar only : りんごとみかんがとれた数
      </Typography>

      <FormControl sx={{ py: 2 }}>
        <FormLabel id="data-select">表示データ</FormLabel>
        <RadioGroup
          aria-labelledby="data-select"
          name="controlled-radio-buttons-group"
          value={currentDataSelect}
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
            setDataCurrentSelect(
              (event.target as HTMLInputElement).value as DataSelect
            );
          }}>
          <Stack direction="row">
            <FormControlLabel
              value="mikan"
              control={<Radio />}
              label="みかん"
            />
            <FormControlLabel
              value="ringo"
              control={<Radio />}
              label="りんご"
            />
            <FormControlLabel value="gokei" control={<Radio />} label="合計" />
          </Stack>
        </RadioGroup>
      </FormControl>
      <Box height={400}>
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            width={500}
            height={1000}
            data={items}
            margin={{
              top: 0,
              right: 0,
              left: 0,
              bottom: 5,
            }}>
            <XAxis dataKey="month" />
            <YAxis max={500} />
            <Legend
              align="left"
              verticalAlign="top"
              height={40}
              margin={{ bottom: 100, top: 100 }}
            />
            <Tooltip />
            {(currentDataSelect === "ringo" ||
              currentDataSelect === "gokei") && (
              <Bar
                dataKey="itemA"
                barSize={40}
                fill="#8884d8"
                stackId="a"
                name="りんごがとれた数"
                activeBar={<Rectangle fill="#808080" stroke="#808080" />}
              />
            )}
            {(currentDataSelect === "mikan" ||
              currentDataSelect === "gokei") && (
              <Bar
                dataKey="itemB"
                barSize={30}
                stackId="a"
                fill="#82ca9d"
                name="みかんがとれた数"
                activeBar={<Rectangle fill="#808080" stroke="#808080" />}
              />
            )}
            {currentDataSelect === "mikan" && (
              <Bar
                dataKey="itemC"
                stackId="b"
                barSize={20}
                name="有田みかんの数"
                fill="pink"
                activeBar={<Rectangle fill="#808080" stroke="#808080" />}
              />
            )}
          </BarChart>
        </ResponsiveContainer>
      </Box>
    </Box>
  );
};

import { Box, Stack, Typography } from "@mui/material";
import * as d3 from "d3";
import { format } from "date-fns";
import { FC, useMemo, useRef, useState } from "react";
import { useMount } from "react-use";

type Props = {
  data?: { date: Date; lineValue: number; barValue: number }[];
  width?: number;
  height?: number;
  marginTop?: number;
  marginRight?: number;
  marginBottom?: number;
  marginLeft?: number;
};
export const Sample1: FC<Props> = ({
  data = [
    { date: new Date("2021/01"), lineValue: 15, barValue: 34 },
    { date: new Date("2021/02"), lineValue: 22, barValue: 52 },
    { date: new Date("2021/03"), lineValue: 36, barValue: 100 },
    { date: new Date("2021/04"), lineValue: 41, barValue: 32 },
    { date: new Date("2021/05"), lineValue: 59, barValue: 5 },
    { date: new Date("2021/06"), lineValue: 89, barValue: 150 },
    { date: new Date("2021/07"), lineValue: 17, barValue: 44 },
  ],
  width = 640,
  height = 400,
  marginTop = 40,
  marginRight = 40,
  marginBottom = 20,
  marginLeft = 40,
}) => {
  const svgRef = useRef<SVGSVGElement | null>(null);
  const [tooltip, setTooltip] = useState<{
    x: number;
    y: number;
    date: Date;
    value: number;
    show: boolean;
  } | null>(null);

  const baseColor = useMemo(() => {
    const color = d3.color("steelblue");
    if (color === null) {
      throw new Error("color is null");
    }
    return color;
  }, []);

  const dateExtent = d3.extent(data, (d) => d.date) as [Date, Date];
  // 日付の範囲に余裕を加える
  const startDate = new Date(dateExtent[0].getTime());
  startDate.setDate(startDate.getDate() - 15);
  const endDate = new Date(dateExtent[1].getTime());
  endDate.setDate(endDate.getDate() + 15);

  const dateX = d3
    .scaleTime()
    .domain([startDate, endDate])
    .range([marginLeft, width - marginRight]);

  const combinedExtent = [
    Math.min(...data.map((d) => d.lineValue), ...data.map((d) => d.barValue)),
    Math.max(...data.map((d) => d.lineValue), ...data.map((d) => d.barValue)),
  ];
  const commonY = d3
    .scaleLinear()
    .domain(combinedExtent)
    .nice() // スケールの端数を整える
    .range([height - marginBottom, marginTop]);

  const line = d3
    .line<{ date: Date; lineValue: number }>()
    .x((d) => dateX(d.date))
    .y((d) => commonY(d.lineValue))
    .curve(d3.curveCatmullRom.alpha(0.5));
  const d = line(data);
  if (d === null) {
    throw new Error("line is null");
  }

  const backgroundBarX = d3
    .scaleBand()
    .range([marginLeft, width - marginRight])
    .domain(
      data.map(function (d) {
        return format(d.date, "yyyy/MM");
      })
    )
    .padding(0);
  const xAxis = d3
    .axisBottom(dateX)
    .ticks(10)
    .tickFormat((d) => d3.timeFormat("%Y/%m")(d as Date));

  const yAxis = d3
    .axisLeft(commonY)
    .ticks((commonY.domain()[1] - commonY.domain()[0]) / 10)
    .tickSize(5)
    .tickSizeOuter(4)
    .tickFormat((d) => `${d} !`);

  const xAxisRef = useRef<SVGGElement | null>(null);
  const yAxisRef = useRef<SVGGElement | null>(null);

  useMount(() => {
    if (xAxisRef.current) {
      d3.select(xAxisRef.current).call(xAxis);
    }
    if (yAxisRef.current) {
      d3.select(yAxisRef.current).call(yAxis);
    }

    const svg = d3.select(svgRef.current);

    // 棒グラフ
    svg
      .selectAll(".bar") // 要素がない
      .data(data)
      .join("rect") // 要素を追加
      .attr("x", function (d) {
        const formatted = format(d.date, "yyyy/MM");
        const barX = backgroundBarX(formatted);
        if (barX === undefined) {
          throw new Error("barX is undefined");
        }
        return barX + backgroundBarX.bandwidth() * 0.1;
      })
      .attr("y", function (d) {
        return commonY(d.barValue);
      })
      .attr("width", function () {
        return backgroundBarX.bandwidth() * 0.8; // 例として80%の幅を設定
      })
      .attr("height", function (d) {
        return height - commonY(d.barValue) - marginBottom - 1;
      })
      .attr("fill", baseColor.brighter(0.5).formatHex());

    // Lineグラフ
    svg
      .append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", baseColor.brighter(1).formatHex())
      .attr("stroke-width", 1.5)
      .attr("d", d);

    const circlesGroup = svg.append("g").attr("class", "circles-group");
    circlesGroup
      .selectAll("circle")
      .data(data)
      .join("circle")
      .attr("fill", "white")
      .attr("stroke", baseColor.brighter(1).formatHex())
      .attr("stroke-width", 1.5)
      .attr("cx", (d) => dateX(d.date))
      .attr("cy", (d) => commonY(d.lineValue))
      .attr("r", 5);

    // 背景（アクティブ検知）
    svg
      .selectAll(".backgroundBar")
      .data(data)
      .join("rect") // 要素を追加
      .attr("x", function (d) {
        const barX = backgroundBarX(format(d.date, "yyyy/MM"));
        if (barX === undefined) {
          throw new Error("barX is undefined");
        }
        return barX;
      })
      .attr("width", backgroundBarX.bandwidth())
      .attr("y", marginTop)
      .attr("height", function () {
        return height - marginTop - marginBottom;
      })
      .style("fill", "none")
      .style("pointer-events", "all")
      .on("mouseover", function (event, d) {
        d3.select(this).style("fill", "rgba(0, 0, 0, 0.1)");
        setTooltip({
          x: event.offsetX,
          y: event.offsetY,
          date: d.date,
          value: d.lineValue,
          show: true,
        });
      })
      .on("mouseout", function () {
        d3.select(this).style("fill", "none");
        setTooltip(null);
      });
  });

  return (
    <Stack spacing={4}>
      <Typography variant="h6">
        d3js Sample 1 bar only : かんたんな表
      </Typography>
      <Box sx={{ position: "relative" }}>
        <svg width={width} height={height} ref={svgRef}>
          {/** XAxis */}
          <g
            ref={xAxisRef}
            transform={`translate(0,${height - marginBottom})`}
          />
          {/** YAxis */}
          <g ref={yAxisRef} transform={`translate(${marginLeft},0)`} />
        </svg>
        {tooltip && tooltip.show ? "ツールチップあるよ" : "ツールチップないよ"}
      </Box>
    </Stack>
  );
};