customize recharts

Question

Модифицировать пример http://recharts.org/en-US/examples/SimpleLineChart Чтобы все участки графиков значение y которых не входят в интервал (avg-stddev, avg+stddev) были подкрашены красным цветом. Где avg - среднее значение stddev - среднеквадратичное отклонение. вычислил avg и stddev, а как перекрасить svg path recharts не знаю

// import logo from './logo.svg';
import './App.css';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 1398,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290
  },
  {
    name: "Page D",
    uv: 2780,
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100
  }
];
let  avg=0,stddev=0,aslow,ashigh; 
data.forEach(dat =>{
  avg+=Number(dat.pv);
})
avg/=data.length;
data.forEach(dat=>{
  stddev+=Math.pow(dat.pv-avg,2)
})
stddev=Math.sqrt((stddev/(data.length-1))) 
aslow=avg-stddev
ashigh = avg+stddev
data.forEach(dat=>{
  dat.aslow=aslow;
  dat.ashigh=ashigh
})
function App() {
  return (
    <div className="App">
      <section>
      <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line
        type="monotone"
        dataKey="pv"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line type="monotone" dataKey="uv" stroke="#00ff00" />
    </LineChart>
      </section>
      <div>
        <p>average: {avg}</p>
        <p>standart deviation: {stddev}</p>
        <p>avg-stddev: {aslow}</p>
        <p>avg-stddev: {ashigh}</p>
      </div>
    </div>
    
  );
}

export default App;

Answer 1

Попробуйте что-то вроде этого:

import "./styles.css";
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend
} from "recharts";

const data = [
  {
    name: "Page A",
    uv: 4000,
    pv: 2400,
    amt: 2400
  },
  {
    name: "Page B",
    uv: 3000,
    pv: 2098,
    amt: 2210
  },
  {
    name: "Page C",
    uv: 2000,
    pv: 9800,
    amt: 2290
  },
  {
    name: "Page D",
    uv: 40,
    pv: 3908,
    amt: 2000
  },
  {
    name: "Page E",
    uv: 1890,
    pv: 4800,
    amt: 2181
  },
  {
    name: "Page F",
    uv: 2390,
    pv: 3800,
    amt: 2500
  },
  {
    name: "Page G",
    uv: 3490,
    pv: 4300,
    amt: 2100
  }
];

let avg = 0,
  stddev = 0,
  aslow = 0,
  ashigh = 0;

data.forEach((page) => {
  avg += Number(page.pv);
});

avg /= data.length;

data.forEach((page) => {
  stddev += Math.pow(page.pv - avg, 2);
});

stddev = Math.sqrt(stddev / (data.length - 1));
aslow = avg - stddev;
ashigh = avg + stddev;

const CustomTooltip = ({ active, payload, label }) => {
  if (active && payload && payload.length) {

    let classNamePv = payload[0].value < aslow || payload[0].value > ashigh ? 'red' : '';
    let classNameUv = payload[1].value < aslow || payload[1].value > ashigh ? 'red' : '';

    return (
      <div>
        <p className={`${classNamePv}`}>
          {`${label} : ${payload[0].value}`}
        </p>
        <p className={`${classNameUv}`}>
          {`${label} : ${payload[1].value}`}
        </p>
      </div>
    );
  }

  return null;
};


export default function App() {
  return (
    <LineChart
      width={500}
      height={300}
      data={data}
      margin={{
        top: 5,
        right: 30,
        left: 20,
        bottom: 5
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip content={<CustomTooltip />}/>
      <Legend color="red"/>
      <Line 
        type="monotone"
        dataKey="pv"
        stroke="#8884d8"
        activeDot={{ r: 8 }}
      />
      <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
    </LineChart>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.red {
  border-bottom: 1px solid red;
}

БЛОГ НА HUSL

customize recharts

Ответы (1 шт):