rtgk-screen-web/pages/reports/xmr/DemoLine.js

import React, {
  useRef,
  useEffect,
  useState,
  useMemo,
  useCallback,
} from "react";
import dynamic from "next/dynamic";
const Line = dynamic(
  () => import("@ant-design/charts").then(({ Line }) => Line),
  { ssr: false }
);

// import { Line } from '@ant-design/charts'
const DemoLine = ({
  dataSource,
  UCL,
  LCL,
  AVER,
  legend,
  USL,
  LSL,
  maxz,
  minz,
}) => {
  const data = dataSource;
  const line = useRef();
  const name = data?.map((x) => x.name);
  let isX = false;
  if (USL && LSL) {
    isX = true;
  }
  let maxn = useMemo(() => {
    let max = Math.max.apply(
      null,
      data?.map((x) => {
        if (x?.value) {
          return x.value;
        }
        return 0;
      })
    );
    let tmparr = [];
    tmparr.push(UCL, LCL, AVER);
    if (isX) {
      tmparr.push(USL, LSL);
    }
    if (!isNaN(max)) {
      tmparr.push(max);
    }
    let maxnew = Math.max.apply(null, tmparr);

    return maxnew;
  }, [data]);
  const config = {
    data,
    slider: {},
    color: "#8AA1C9",
    xField: "x",
    yField: "value",
    xAxis: {
      animation: false,
    },
    yAxis: {
      tickCount: 7,
      nice: true,
      animation: false,
      max: maxz,
      min: minz,
      line: {
        style: {
          stroke: "#aaa",
        },
      },
      tickLine: {},
    },
    point: {
      style: {
        r: 2.5,
      },
    },
    smooth: true,
    tooltip: {
      showCrosshairs: true,
      shared: true,
    },
    seriesField: "name",
    annotations: [
      // {
      //   type: "text",
      //   position: ["min", UCL],
      //   content: "UCL",
      //   offsetY: -4,
      //   style: {
      //     textBaseline: "bottom",
      //   },
      // },
      // {
      //   type: "text",
      //   position: ["min", LCL],
      //   content: "LCL",
      //   offsetY: -4,
      //   style: {
      //     textBaseline: "bottom",
      //   },
      // },
      // {
      //   type: "text",
      //   position: ["min", AVER],
      //   content: "AVER",
      //   offsetY: -4,
      //   style: {
      //     textBaseline: "bottom",
      //   },
      // },
      {
        type: "line",
        start: ["min", LCL],
        end: ["max", LCL],
        style: {
          stroke: "#FF0000",
          fill: "#FF0000",
          // lineDash: [6, 3],
          lineWidth: 2,
        },
      },

      {
        type: "line",
        start: ["min", UCL],
        end: ["max", UCL],
        style: {
          stroke: "#FF0000",
          fill: "#FF0000",
          // lineDash: [6, 3],
          lineWidth: 2,
        },
      },
      {
        type: "line",
        start: ["min", AVER],
        end: ["max", AVER],
        style: {
          stroke: "#80FC5E",
          fill: "#80FC5E",
          lineDash: [6, 3],
          lineWidth: 2,
        },
      },
    ],
    legend: legend,
  };

  dataSource
    ?.filter((a) => a?.controlRefList?.length > 0)
    .forEach((b) => {
      const _controlPerf = "";
      if (legend.items[0].name === "极差值") {
        if (b.controlRefList?.indexOf("I") > -1) {
          _controlPerf = "I";
        }
      } else {
        _controlPerf = b.controlRefList?.filter((z) => z !== "I").join(",");
      }
      if (_controlPerf !== "") {
        const tmplateann = {
          type: "text",
          content: _controlPerf,
          position: (xScale, yScale) => {
            return [
              `${xScale.scale(b.x) * 100}%`,
             b.value>0?  `${(1 - yScale.value.scale(b.value)) * 50}%` :   `${(1 - yScale.value.scale(b.value)) * 94}%`,
            ];
          },
          style: {
            textAlign: "center",
            fill: "rgba(0,0,0,0.85)",
          },
        };
        config.annotations.push(tmplateann);
      }
    });

  let usllsl = [
    {
      type: "line",
      start: ["min", USL],
      end: ["max", USL],
      style: {
        stroke: "#FF0000",
        fill: "#FF0000",
        lineDash: [6, 3],
        lineWidth: 2,
      },
    },
    {
      type: "line",
      start: ["min", LSL],
      end: ["max", LSL],
      style: {
         stroke: "#FF0000",
        fill: "#FF0000", 
        lineDash: [6, 3],
        lineWidth: 2,
      },
    },
  ];
  if (isX) {
    usllsl.forEach((item) => {
      config.annotations.push(item);
    });
  }
  return <Line {...config} height={250} />;
};

export default DemoLine;