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

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

import _, { max } from "lodash";
const symbol= function symbol(x, y, r) {
  return [
    ["M", x - r, y],
    ["L", x + r, y],
  ];
};

const DemoDualAxes = ({ dataSource, UCL, LCL, CL }) => {
  const [chartDatanew,setchartDatanew] =  useState([]);
  const [xAxisarr,setxAxisarr] =  useState([]);
  const data = dataSource;
  const maxnnn = () => {
    let max = Math.max.apply(
      null,
      data?.map((x) => x.value)
    );
    let tmparr = [];
    tmparr.push(UCL, LCL, CL);
    if (!isNaN(max)) {
      tmparr.push(max);
    }
    console.log(tmparr);
    let maxnew = Math.max.apply(null, tmparr);

    return maxnew;
  };
  function closestTo(arr, target) {
    return arr.reduce(function(prev, curr) {
      return (Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev);
    });
  }
  let maxn = useMemo(()=>{return maxnnn},[maxnnn])
  let category = ["y", "curve", "usl", "cl", "lsl"];
  let categoryNames = ["频数", "正态曲线", "USL", "规格中线", "LSL"];
  // let chartData = [];
  // if (data && data.length > 0)
  //   data.map((item) => {
  //     Object.keys(item).map((key) => {
  //       if (category.includes(key)) {
  //         chartData.push({
  //           x: item.x,
  //           category: key,
  //           categoryName: categoryNames[category.indexOf(key)],
  //           value: item[key],
  //         });
  //       }
  //     });
  //   });
  // let tmplist = [],
  //   chartDatanew = [];
  // chartDatanew = chartData
  //   .map((x) => {
  //     if (x.category === "usl" || x.category === "lsl" || x.category === "cl") {
  //       let val = x.value;
  //       if (tmplist.indexOf(val) === -1) {
  //         x.x = val;
  //         x.value = maxn;
  //         tmplist.push(val);
  //       } else {
  //         return null;
  //       }
  //     }
  //     return x;
  //   })
  //   .filter((x) => x !== null);
  useEffect(() => {
    // data.push({ x: maxnnn(), y: 0 });
    setchartDatanew(data)
    setxAxisarr(data?.filter(x=>!isNaN(x.x)).map(x=>x.x))
  }, [data]);
  const config = {
    tooltip: {
      shared: true,
    },
    syncViewPadding: true,
    plots: [
      // {
      //   type: 'column',
      //   options:{
      //     data: chartData,
      //     xField: 'x',
      //     seriesField: 'category',
      //     yField: 'value',
      //   }
      // },
      {
        type: "column",
        options: {
          data: chartDatanew?.map((c) => {
            return {
              x: c.x,
              value: c.y,
              categoryName: "频数",
            };
          }),
          xField: "x",
          minColumnWidth: 20,
          maxColumnWidth: 20,
          seriesField: "categoryName",
          color: "#7B9DCE",
          yField: "value",
          yAxis: {
            line: {
              style: {
                stroke: "#aaa",
              },
            },
          },
          xAxis: {
            nice: true,
            type: "linear", // 数据呈连续性
    
            tickLine: {
              length: 0,
              alignTick:true,
              style: {
                lineWidth: 2,
                stroke: "red",
              },
            },
            label: {
              style: {
                opacity: 1,
              },
              formatter: (text,item,index)=>{
                let newtext = text;
                try {
                  newtext =  closestTo(xAxisarr, text)
                } catch (error) {
                  newtext = text;
                }
                return  newtext
              }
            },
          },
          annotations: [
            {
              top: true,
              type: "line",
              start: [UCL, "min"],
              end: [UCL, "max"],
              style: {
                stroke: "#FF0000",
                fill: "#FF0000",
                // lineDash: [6, 3],
                lineWidth:2,
              },
            },
            {
              top: true,
              type: "line",
              start: [LCL, "min"],
              end: [LCL, "max"],
              style: {
                stroke: "#FF0000",
                fill: "#FF0000",
                // lineDash: [6, 3],
                lineWidth:2,
              },
            },
            {
              top: true,
              type: "line",
              start: [CL, "min"],
              end: [CL, "max"],
              style: {
                stroke: "#7D679F",
                fill: "#7D679F",
                lineDash: [6, 3],
                lineWidth:2,
              },
            },
          ],
        },
      },
      {
        type: "line",
        options: {
          data: chartDatanew?.map((c) => {
            return {
              x: c.x,
              value: c.curve,
              categoryName: "正态曲线",
            };
          }),
          xField: "x",
          smooth: true,
          yField: "value",
          seriesField: "categoryName",
          color: "#B45A53",
          xAxis: false,
          yAxis: {
            line: null,
            grid: null,
            position: "right",
          },
        
        },
      },
      // {
      //   type: "column",
      //   options: {
      //     data: chartDatanew.filter(
      //       (x) =>
      //         x.category === "usl" ||
      //         x.category === "cl" ||
      //         x.category === "lsl"
      //     ),
      //     minColumnWidth: 1,
      //     maxColumnWidth: 2,
      //     xField: "x",
      //     // color: "#EA3627",
      //     color: [ "#7D679F", "#F5C242","#EA3627"],
      //     yField: "value",
      //     seriesField: "categoryName",
      //     xAxis: false,
      //     yAxis: false,
      //   },
      // },
      // {
      //   type: "column",
      //   options: {
      //     data: chartDatanew.filter((x) => x.category === "cl"),
      //     minColumnWidth: 1,
      //     maxColumnWidth: 2,
      //     xField: "x",
      //     color: "#7D679F",
      //     yField: "value",
      //     seriesField: "categoryName",
      //     xAxis: false,
      //   },
      // },
      // {
      //   type: "column",
      //   options: {
      //     data: chartDatanew.filter((x) => x.category === "lsl"),
      //     minColumnWidth: 1,
      //     maxColumnWidth: 2,
      //     xField: "x",
      //     color: "#F5C242",
      //     yField: "value",
      //     seriesField: "categoryName",
      //     xAxis: false,
      //   },
      // },
    ],

    legend: {
      position: "bottom-left",
      layout: "horizontal",
      items: [
        {
          value: "y",
          name: "频数",
          marker: {
            symbol: "square",
            style: {
            stroke:  "#5A80B8",
            // lineDash: [4, 2],
              fill: "#5A80B8",
              r: 5,
            },
          },
        },
        {
          value: "curve",
          name: "正态曲线",
          marker: {
            symbol: symbol,
            style: {
                lineWidth: 2,
            stroke:  "#B45A53",
            // lineDash: [4, 2],
              fill: "#B45A53",
              r: 8,
            },
          },
        },
        {
          value: "usl",
          name: "USL",
          marker: {
            symbol: symbol,
            style: {
                lineWidth: 2,
            stroke:  "#FF0000",
            lineDash: [4, 2],
              fill: "#FF0000",
              r: 8,
            },
          },
        },
        {
          value: "cl",
          name: "规格中线",
          marker: {
            symbol: symbol,
            style: {
                lineWidth: 2,
            stroke:  "#7D679F",
            lineDash: [4, 2],
              fill: "#7D679F",
              r: 8,
            },
          },
        },
        {
          value: "lsl",
          name: "LSL",
          marker: {
            symbol: symbol,
            style: {
                lineWidth: 2,
            stroke:  "#FF0000",
            lineDash: [4, 2],
              fill: "#FF0000",
              r: 8,
            },
          },
        },
      ],
    },
  };
  return <Mix {...config}  height={250}/>;
};

export default DemoDualAxes;