recharts#Legend JavaScript Examples

render() {
    const width = 1050;
    const { mockCount, mockDateList } = this.state.chartDate;

    return (
      <div>
        <Spin spinning={this.state.showLoading}>
          <div className="statis-chart-content">
            <h3 className="statis-title">mock 接口访问总数为：{mockCount.toLocaleString()}</h3>
            <div className="statis-chart">
              <LineChart
                width={width}
                height={300}
                data={mockDateList}
                margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
              >
                <XAxis dataKey="_id" />
                <YAxis />
                <CartesianGrid strokeDasharray="7 3" />
                <Tooltip />
                <Legend />
                <Line
                  name="mock统计值"
                  type="monotone"
                  dataKey="count"
                  stroke="#8884d8"
                  activeDot={{ r: 8 }}
                />
              </LineChart>
            </div>
            <div className="statis-footer">过去3个月mock接口调用情况</div>
          </div>
        </Spin>
      </div>
    );
  }

BarGraph = props => {
  const {
    data,
    dataKey1,
    dataKey2,
    height,
    margin,
    maxHeight,
    strokeColor1,
    strokeColor2,
    title,
    width,
    xAxisKey
  } = props;

  return (
    <div className='graph'>
      <p className='title'>{title}</p>
      <BarChart
        width={width}
        height={maxHeight > 0 ? (
          height <= maxHeight ? height : maxHeight
        ) : height}
        data={data}
        margin={margin}
      >
        <CartesianGrid strokeDasharray="5 5" />
        <XAxis dataKey={xAxisKey} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey={dataKey1} fill={strokeColor1} />
        <Bar dataKey={dataKey2} fill={strokeColor2} />
      </BarChart>
    </div>
  );
}

function LoadChart(props) {
  const { classes, t, load } = props;

  return (
    <Paper className={classes.paper}>
      <div className={classes.root}>
        <Typography className={classes.chartTitle}>{t("Load")}</Typography>
        <ResponsiveContainer width="100%" height={200} >
          <BarChart data={load} margin={{ top: 0, right: 32, left: 10, bottom: 16 }}>
            <defs>
              <linearGradient id="gradientBlue2" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#2980B9"} />
                <stop offset="95%" stopColor={"#6DD5FA"} />
              </linearGradient>
            </defs>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="time" />
            <YAxis />
            <Legend />
            <Tooltip labelStyle={{ color: 'black', fontSize: 18, paddingBottom: 4 }}/>
            <Bar
              dataKey="value"
              fill="url(#gradientBlue)"/>
          </BarChart>
        </ResponsiveContainer>
      </div>
    </Paper>
  );
}

ScatterCharts = observer(() => {
  return (
    <div>
      <ScatterChart
        width={730}
        height={250}
        margin={{ top: 20, right: 20, bottom: 10, left: 10 }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="x" name="stature" unit="cm" />
        <YAxis dataKey="y" name="weight" unit="kg" />
        <ZAxis dataKey="z" range={[64, 144]} name="score" unit="km" />
        <Tooltip cursor={{ strokeDasharray: "3 3" }} />
        <Legend />
        <Scatter name="A school" data={data01} fill="#8884d8" />
        <Scatter name="B school" data={data02} fill="#82ca9d" />
      </ScatterChart>
    </div>
  );
})

render() {
    const { data } = this.state;
    const { classes } = this.props;
    return (
      <div className={classes.container}>
        <PieChart width={485} height={290} className={classes.chart}>
          <Legend align="right" height={10} />
          <Pie
            data={data}
            dataKey="value"
            nameKey="name"
            cx="50%"
            cy="50%"
            outerRadius={90}
            label
            fill="fill"
          />
          <Tooltip />
        </PieChart>
      </div>
    );
  }

function GrowthLineChart ({ data, xName, yName }) {
  return (
    <ResponsiveContainer width='100%' height={300} minWidth={300}>
      <LineChart
        data={data}
        margin={{
          top: 5,
          right: 5,
          left: 0,
          bottom: 0
        }}
      >
        <XAxis
          dataKey='time' tickFormatter={dateFormatter} name={xName}
          tick={{ fill: 'var(--theme-grey)' }}
        />
        <YAxis tickFormatter={formatSats} tick={{ fill: 'var(--theme-grey)' }} />
        <Tooltip labelFormatter={dateFormatter} contentStyle={{ color: 'var(--theme-color)', backgroundColor: 'var(--theme-body)' }} />
        <Legend />
        <Line type='monotone' dataKey='num' name={yName} stroke='var(--secondary)' />
      </LineChart>
    </ResponsiveContainer>
  )
}

ComposedCharts = observer(() => {
  return (
    <div>
      <ComposedChart width={730} height={250} data={data}>
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <CartesianGrid stroke="#f5f5f5" />
        <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
        <Bar dataKey="pv" barSize={20} fill="#413ea0" />
        <Line type="monotone" dataKey="uv" stroke="#ff7300" />
      </ComposedChart>
    </div>
  );
})

render() {
    return (
      <div style={{ width: "99%", height: 300 }}>
        <ResponsiveContainer>
          <BarChart
            data={data}
            margin={{
              top: 10,
              right: 30,
              left: 0,
              bottom: 0,
            }}
            barSize={16}
          >
            <XAxis
              dataKey="name"
              scale="point"
              padding={{ left: 10, right: 10 }}
            />
            <YAxis />
            <Tooltip />
            <Legend />
            <CartesianGrid strokeDasharray="3 3" />
            <Bar dataKey="sales" fill="#8884d8" background={{ fill: "#eee" }} />
          </BarChart>
        </ResponsiveContainer>
      </div>
    );
  }

IVSkewChart = (props) => {
	return(
		<LineChart
			width={900}
			height={500}
			data={props.data}
			margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
		>
			<CartesianGrid strokeDasharray="3 3" />
			<XAxis dataKey="strike">
				<Label value="Strike price" offset={0} position="insideBottom"/>
			</XAxis>
			<YAxis label={{ value: 'Implied Volatility', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
			<Tooltip />
			<Legend />
			<Line type="monotone" dataKey="iv" stroke="#002366" />
		</LineChart>
	)
}

IndiaDistrictTrend = props => {
    const districtTrendData = props.districtTrendData;
    console.log('IndiaDistrictTrend', districtTrendData);
    return (
        <div style={{ display: 'flex' }}>
            <ResponsiveContainer width='100%' height={300}>
                <LineChart data={districtTrendData}
                    margin={{top: 10, right: 30, left: 0, bottom: 0}}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="date" />
                    <YAxis />
                    <Tooltip />
                    <Legend />
                    <Line type="monotone" dataKey="active" stroke={COLOR_CODES.CATEGORIES.ACTIVE} />
                    <Line type="monotone" dataKey="recovered" stroke={COLOR_CODES.CATEGORIES.RECOVERED} />
                    <Line type="monotone" dataKey="deceased" stroke={COLOR_CODES.CATEGORIES.DEATHS} />
                </LineChart>
            </ResponsiveContainer>
        </div>
    )
}

GreeksChart = (props) => {
	return(
		<LineChart
			width={900}
			height={500}
			data={props.data}
			margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
		>
			<CartesianGrid strokeDasharray="3 3" />
			<XAxis dataKey="strike">
				<Label value="Strike price" offset={0} position="insideBottom"/>
			</XAxis>
			<YAxis label={{ value: 'Value', angle: -90, position: 'insideLeft', textAnchor: 'middle' }}/>
			<Tooltip />
			<Legend />
			<Line type="monotone" dataKey="delta" stroke="rgba(0, 123, 255, 1)" />
			<Line type="monotone" dataKey="gamma" stroke="rgba(255, 230, 70, 1)" />
			<Line type="monotone" dataKey="theta" stroke="rgba(40, 167, 69, 1)" />
			<Line type="monotone" dataKey="vega" stroke="rgba(255, 7, 58, 1)" />

		</LineChart>
	)
}

LineChartWithXAxisPading = (data) => (
  <ResponsiveContainer width="100%" height={data.height} data-test="responsive-component">
    <LineChart data-test="linechart-component" data={data.data} margin={{top: 10, right: 0, left: -15, bottom: 0}}>
      <XAxis dataKey="month" padding={{left: 30, right: 30}}/>
      <YAxis/>
      <CartesianGrid strokeDasharray="3 3"/>
      <Tooltip/>
      <Legend/>
      <Line type="monotone" dataKey="deliveries" stroke="#3367d6" activeDot={{r: 8}}/>
      {/* <Line type="monotone" dataKey="Drone" stroke="#ffc658"/> */}
    </LineChart>
  </ResponsiveContainer>
)

//STACKED BAR CHART
export function StackedBarChart(props)
{
  return (
    <div className='box-border shadow-lg bg-white m-4 w-auto inline-block'>
      <div className='bg-gray-100 p-4 text-lg text-blue-500'>
        {props.heading}
      </div>
      <div className='justify-center p-4'>
        <BarChart width={500}
                  height={300}
                  data={props.data}
                  margin={{
                    top: 20, right: 30, left: 20, bottom: 5,
                  }}>
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name" />
          <YAxis />
          <Tooltip />
          <Legend />
          <Bar dataKey="pv" stackId="a" fill="#8884d8" />
          <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
        </BarChart>
      </div>
    </div>
  );
}

LineGraph = props => {
  const {
    data,
    dataKey,
    height,
    margin,
    maxHeight,
    strokeColor,
    title,
    width,
    xAxisKey
  } = props;

  return (
    <div className='graph'>
      <p className='title'>{title}</p>
      <LineChart
        width={width}
        height={maxHeight > 0 ? (
          height <= maxHeight ? height : maxHeight
        ) : height}
        data={data}
        margin={margin}
      >
        <CartesianGrid strokeDasharray="5 5" />
        <XAxis dataKey={xAxisKey} />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey={dataKey} stroke={strokeColor} activeDot={{ r: 8 }} />
      </LineChart>
    </div>
  );
}

MainSurveyPie = ({ datas, title }) => {
  const sorted = datas.slice(0).sort(function (a, b) {
    return a.count > b.count ? -1 : a.count < b.count ? 1 : 0
  })

  const getColor = (i) => {
    return i > 4 ? COLORS[4] : COLORS[i]
  }

  return (
    <div className="main-survey-pie">
      <PieChart width={374} height={200}>
        <text style={{ fontWeight: '700' }} x={105} y={105} textAnchor="middle" dominantBaseline="middle">
          {title}
        </text>
        <Pie innerRadius={30} outerRadius={80} data={datas} cx={100} cy={100} labelLine={false} fill="#8884d8" dataKey="count" valueKey="name">
          {datas.map((entry, index) => {
            const color = getColor(sorted.indexOf(entry))
            return <Cell name={entry.name} key={`cell-${index}`} fill={color} />
          })}
        </Pie>
        <Tooltip />
        <Legend />
      </PieChart>
    </div>
  )
}

render() {
        const { airline_delays, delays_comparison } = this.state;

        return (
            <div className="charts-main">
                <div className="form-sub-header">
                    { !!(this.props.airline) ? this.props.airline.name : ''}
                </div>
                <div>
                    <div className="inline-div-50">
                        <p class="charts-title">Delay % By Type</p>
                        <PieChart className="form-content" width={400} height={300}>
                            <Pie isAnimationActive={false} data={airline_delays} cx={200} cy={125} outerRadius={80} fill="#8884d8" label>
                                {
                                    airline_delays.map((entry, index) => (
                                        <Cell key={`cell-${index}`} fill={this.colors[index]}/>
                                    ))
                                }
                            </Pie>
                            <Tooltip/>
                            <Legend align="center" />
                        </PieChart>
                    </div>
                    <div className="inline-div-50">
                        <p class="charts-title">Airline (avg minutes) delays vs. All (avg minutes) delays </p>
                        <BarChart className="Form-content" width={400} height={300} data={delays_comparison}>
                            <CartesianGrid strokeDasharray="3 3" />
                            <XAxis dataKey="name" />
                            <YAxis />
                            <Tooltip />
                            <Legend align="center" />
                            <Bar dataKey="Target" fill="#96DDCF" />
                            <Bar dataKey="Average" fill="#0E6488" />
                        </BarChart>
                    </div>
                </div>
            </div>
        );
    }

render() {
    const data = this.props.stats.assessment_result_by_day;
    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">Report Type Over Time</Card.Header>
          <Card.Body>
            <div style={{ width: '100%', height: '300px' }} className="recharts-wrapper">
              <ResponsiveContainer>
                <LineChart data={data}>
                  <XAxis dataKey="name" />
                  <YAxis />
                  <CartesianGrid strokeDasharray="3 3" />
                  <Legend />
                  <Tooltip />
                  <Line type="monotone" dataKey="Symptomatic Reports" stroke="#8884d8" activeDot={{ r: 8 }} />
                  <Line type="monotone" dataKey="Asymptomatic Reports" stroke="#82ca9d" />
                </LineChart>
              </ResponsiveContainer>
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

render() {
    

    return (    
        <LineChart
        width={700}
        height={500}
        data={this.state.data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip content={<CustomTooltip/>}/>
        <Legend />
        {countryList.map(country =>
             <Line
             type="monotone"
             dataKey={country}
             stroke={'#'+Math.floor(Math.random()*16777215).toString(16)}
             dot={false}
           />
          )}
      </LineChart>
      
    );
  }

ChartPie = () => (
  <ResponsiveContainer>
    <PieChart
      height={300}
      width={400}
    >
      <Pie
        data={data}
        dataKey="value"
        isAnimationActive={false}
      >
        {data.map((entry, index) => (
          <Cell
            key={`cell-${index.toString()}`}
            fill={COLORS[index % COLORS.length]}
          />
        ))}
      </Pie>
      <Legend height={36} />
    </PieChart>
  </ResponsiveContainer>
)

render() {
    const data = [...this.props.stats.subject_status];
    const COLORS = ['#39CC7D', '#FCDA4B', '#FF6868', '#6C757D'];

    return (
      <React.Fragment>
        <Card className="card-square">
          <Card.Header as="h5">Monitoree Status</Card.Header>
          <Card.Body>
            <div style={{ width: '100%', height: 260 }} className="recharts-wrapper">
              <ResponsiveContainer>
                <PieChart onMouseEnter={this.onPieEnter}>
                  <Pie data={data} innerRadius={70} outerRadius={100} fill="#8884d8" paddingAngle={2} dataKey="value" label>
                    {data.map((entry, index) => (
                      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                    ))}
                    <Label className="display-5" value={this.props.stats.system_subjects} position="center" />
                  </Pie>
                  <Legend layout="vertical" align="right" verticalAlign="middle" />
                  <Tooltip />
                </PieChart>
              </ResponsiveContainer>
            </div>
          </Card.Body>
        </Card>
      </React.Fragment>
    );
  }

export default function BarGraph({ data }) {
	return (
		<div className="graph_wrapper">
			<BarChart
				width={window.screen.availWidth < 768 ? 350 : window.screen.availWidth < 1800 ? 700 : 800}
				height={window.screen.availHeight < 768 ? 300 : window.screen.availHeight < 1100 ? 550 : 600}
				data={data}
				layout="vertical"
				margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
				<XAxis ticks={[0, 1, 2, 3, 4, 5]} domain={[0, 5]} type="number" />
				<YAxis type="category" dataKey="field" />
				<CartesianGrid strokeDasharray="3 3" />
				<Tooltip />
				<Bar dataKey="score" fill="#FF7F50" />
				<Legend />
			</BarChart>
		</div>
	);
}

render() {
    const { classes, swap, swapPercent } = this.props;

    return (
      <div>
        <Typography className={classes.chartTitle}>
          Swap: {swap.length > 0 && swap[1].value ? swapPercent + '%' : 'None'}
        </Typography>
        <ResponsiveContainer width="100%" height={180}>
          <PieChart height={150}>
            <defs>
              <linearGradient id="gradientGreen" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#56ab2f"} stopOpacity={1}/>
                <stop offset="95%" stopColor={"#a8e063"} stopOpacity={1}/>
              </linearGradient>
              <linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
                <stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
              </linearGradient>
              <linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#FFB75E"} stopOpacity={1}/>
                <stop offset="95%" stopColor={"#ED8F03"} stopOpacity={1}/>
              </linearGradient>
              <linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
                <stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
                <stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
              </linearGradient>
            </defs>
            <Pie
              data={swap}
              dataKey="value"
              nameKey="name"
              startAngle={180}
              endAngle={-180}
              cx="50%"
              cy="50%"
              innerRadius={30}
              outerRadius={50}
              label={data => this.formatLabel(data.payload.value)}
              minAngle={1}
              stroke={"none"}
              isAnimationActive={false}
            >
              {swap.map((entry, index) => 
                <Cell
                  key={`cell-${index}`}
                  fill={`url(#${entry.color})`}
                />
              )}
            </Pie>
            {swap.length > 0 && swap[1].value && <Tooltip
              formatter={this.formatLabel}
              isAnimationActive={true}
            />}
            {swap.length > 0 && swap[1].value && <Legend />}
          </PieChart>
        </ResponsiveContainer>
      </div>
    );
  }

render() {
		let height = window.innerWidth >= 992 ? 300 : 200;
		let margin =
			window.innerWidth >= 992
				? { top: 10, right: 0, left: -15, bottom: 0 }
				: { top: 10, right: 0, left: -60, bottom: 0 };
		const formatter = (value) => `${this.formatBytes(value)}`;
		// const formatter = (value) => value;
		return (
			<ResponsiveContainer width="100%" height={height}>
				<LineChart data={this.props.bandwidth} margin={margin}>
					<XAxis
						dataKey="name"
						ticks={['2m0s', '1m30s', '1m0s', '30s', '0s']}
					/>
					<YAxis tickFormatter={formatter} allowDecimals={false} />
					<CartesianGrid />
					<Legend iconType="circle" align="right" />
					<Tooltip />
					<Line
						type="monotone"
						dataKey="Local"
						stroke="#e69f23"
						dot={false}
						strokeWidth={2}
						activeDot={{ r: 8 }}
						isAnimationActive={false}
					/>
					<Line
						type="monotone"
						dataKey="Remote"
						stroke="#366dfc"
						isAnimationActive={false}
						dot={false}
						strokeWidth={2}
					/>
				</LineChart>
			</ResponsiveContainer>
		);
	}

PieChart = ({
  isLoading,
  data,
  valFormatter,
  labelFormatter,
  height,
  isAnimationActive,
  minAngle,
  displayLegend,
  cellColors,
  growOnMobile,
  displayTooltip,
}) => (
  <ChartWrapper defaultHeight={height} growOnMobile={growOnMobile}>
    {/* eslint-disable-next-line no-nested-ternary */}
    {isLoading ? (
      <div className="d-flex justify-content-center align-items-center h-100">
        <Spinner />
      </div>
    ) : data && data.length ? (
      <ResponsiveContainer>
        <PieChartStyled>
          {displayTooltip && <Tooltip formatter={valFormatter} />}
          {displayLegend && (
            <Legend
              align="left"
              iconType="circle"
              verticalAlign="top"
              wrapperStyle={{
                fontWeight: 700,
                textTransform: 'uppercase',
              }}
            />
          )}
          <Pie
            data={data}
            dataKey="value"
            nameKey="title"
            minAngle={minAngle}
            label={labelFormatter}
            unit=" %"
            isAnimationActive={isAnimationActive}
          >
            {data.map((entry, index) => (
              <Cell
                key={entry.title}
                fill={cellColors[index % cellColors.length]}
              />
            ))}
          </Pie>
        </PieChartStyled>
      </ResponsiveContainer>
    ) : (
      <div className="d-flex justify-content-center align-items-center h-100">
        No data
      </div>
    )}
  </ChartWrapper>
)

render() {
		let height = window.innerWidth >= 992 ? 300 : 200;
		let margin =
			window.innerWidth >= 992
				? { top: 10, right: 0, left: -40, bottom: 0 }
				: { top: 10, right: 0, left: -60, bottom: 0 };
		const formatter = (value) => value;
		return (
			<ResponsiveContainer width="100%" height={height}>
				<LineChart data={this.props.ram} margin={margin}>
					<XAxis dataKey="at" />
					<YAxis
						tickFormatter={formatter}
						allowDecimals={false}
						ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
						interval={0}
						tick={window.innerWidth >= 992 ? true : false}
					/>
					<CartesianGrid />
					<Tooltip />
					<Legend iconType="circle" align="right" />
					<Line
						type="monotone"
						dataKey="processMemoryUtilization"
						stroke="#33f1c5"
						dot={false}
						strokeWidth={2}
						activeDot={{ r: 8 }}
						isAnimationActive={false}
						name="Plex"
					/>
					<Line
						type="monotone"
						dataKey="hostMemoryUtilization"
						stroke="#bd86d1"
						dot={false}
						strokeWidth={2}
						isAnimationActive={false}
						name="System"
					/>
				</LineChart>
			</ResponsiveContainer>
		);
	}

render() {
    return (
      <div className={"graph-style"}>
        <Form>
          <Form.Group controlId="caribbeanForm.SelectCustom">
            <Form.Label>Choose a country to view test data</Form.Label>
            <Form.Control
              ref={(select) => {
                this.select = select;
              }}
              as="select"
              custom
              onChange={this.handleChange}
              defaultValue={svg}
            >
              <option value={bb}>{bb}</option>
              <option value={svg}>{svg}</option>
            </Form.Control>
          </Form.Group>
        </Form>
        <ResponsiveContainer width="99%" height={500}>
          <LineChart
            data={this.state.data[this.state.selectedCountry]}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <CartesianGrid strokeDasharray="3 3" stroke={graphGridColour} />
            <XAxis dataKey="date" />
            <YAxis domain={[0, 30000]} />
            <Tooltip content={<TestsCustomTooltip />} />
            <Legend />
            <Line
              type="monotone"
              dataKey={this.t('tests')}
              stroke={testPageLineColour}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>

        <Alert dismissable={"true"} key={1} variant={'secondary'} style={{color: 'gray', fontSize: '0.75rem',backgroundColor: '#273852', borderColor: '#273852', padding:'0.45rem', marginTop:'1rem'}}>
        {this.t('tests_disclaimer')} {this.state.selectedCountry === bb? this.t('credit_kevz') : svgCredit}
       </Alert>

       <Alert dismissable={"true"} key={1} variant={'secondary'} style={{color: 'gray', fontSize: '0.75rem',backgroundColor: '#273852', borderColor: '#273852', padding:'0.45rem', marginTop:'1rem'}}>
        Interested in volunteering for data entry? contact me on <Alert.Link href="https://www.twitter.com/janiquekajohn" target="_blank">Twitter</Alert.Link>
       </Alert>
      
      </div>
    );
  }

function CPUPieChart(props) {
  const { classes, cpuPercent } = props;
  

  const formatLastCPU = (unformatted) => {
    return [
      { name: 'user', value: unformatted.user, color: "gradientGreen" },
      { name: 'system', value: unformatted.system, color: "gradientRed" },
      { name: 'io', value: unformatted.io, color: "gradientGrey" },
      { name: 'steal', value: unformatted.steal, color: "gradientBlue" },
      { name: 'interrupt', value: unformatted.interrupt, color: "gradientOrange" },
      { name: 'idle', value: unformatted.idle, color: "gradientBlue" },
    ].filter(obj => obj.value !== 0);
  };
    
  const lastCpu = cpuPercent.length > 0 ? formatLastCPU(cpuPercent[cpuPercent.length -1]) : [];
  return (
    <div>
      <Typography className={classes.chartTitle}>
        {cpuPercent.length > 0 && `CPU: ${(100 - cpuPercent[cpuPercent.length - 1].idle).toFixed(1)}%`}
      </Typography>
      <ResponsiveContainer width="100%" height={180}>
        <PieChart height={150}>
          <defs>
            <linearGradient id="gradientGreen" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#56ab2f"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#a8e063"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientBlue" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#2980B9"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#6DD5FA"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientOrange" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#FFB75E"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#ED8F03"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientGrey" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#8e9eab"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#eef2f3"} stopOpacity={1}/>
            </linearGradient>
            <linearGradient id="gradientRed" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={"#FF512F"} stopOpacity={1}/>
              <stop offset="95%" stopColor={"#DD2476"} stopOpacity={1}/>
            </linearGradient>
          </defs>
          <Pie
            data={lastCpu}
            dataKey="value"
            nameKey="name"
            startAngle={180}
            endAngle={-180}
            cx="50%"
            cy="50%"
            innerRadius={30}
            outerRadius={50}
            label
            minAngle={1}
            stroke={"none"}
            isAnimationActive={false}
          >
            {lastCpu.map((entry, index) =>
              <Cell
                key={`cell-${index}`}
                fill={`url(#${entry.color}`}
              />
            )}
          </Pie>
          <Tooltip
            isAnimationActive={true}
          />
          <Legend />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}

render() {
		let height = window.innerWidth >= 992 ? 300 : 200;
		let margin =
			window.innerWidth >= 992
				? { top: 10, right: 0, left: -40, bottom: 0 }
				: { top: 10, right: 0, left: -60, bottom: 0 };
		const formatter = (value) => value;
		return (
			<ResponsiveContainer width="100%" height={height}>
				<LineChart data={this.props.cpu} margin={margin}>
					<XAxis dataKey="at" />
					<YAxis
						tickFormatter={formatter}
						allowDecimals={false}
						ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100]}
						interval={0}
					/>
					<CartesianGrid />
					<Tooltip />
					<Legend iconType="circle" align="right" />
					<Line
						type="monotone"
						dataKey="processCpuUtilization"
						stroke="#9ad186"
						dot={false}
						strokeWidth={2}
						activeDot={{ r: 8 }}
						isAnimationActive={false}
						name="Plex"
					/>
					<Line
						type="monotone"
						dataKey="hostCpuUtilization"
						stroke="#f1335e"
						dot={false}
						strokeWidth={2}
						isAnimationActive={false}
						name="System"
					/>
				</LineChart>
			</ResponsiveContainer>
		);
	}

TopNTodayDeath = props => {
    const data = props.data;
    const TOP_N = 5;
    const DANGER_COLOR_SHADES = [
        "rgba(255, 0, 0, 1.0)",
        "rgba(255, 0, 0, 0.8)",
        "rgba(255, 0, 0, 0.6)",
        "rgba(255, 0, 0, 0.4)",
        "rgba(255, 0, 0, 0.2)"
    ];
    let refinedData = [];
   
    let sortedData = data.sort((a, b) => b.todayDeaths - a.todayDeaths);
    let cloned = JSON.parse(JSON.stringify(sortedData));
    let topNData = cloned.splice(0, TOP_N);

    topNData.forEach(element => {
        let obj = {};
        obj['country'] = element['country'];
        obj['Today Deaths'] = element['todayDeaths'];
        refinedData.push(obj);
    });

    return (
        <div className="top-n-todays-death-widget">
            <Card >
                <Card.Body>
                    <Card.Title>Countries with maximum Deaths Today</Card.Title>
                    <Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></Card.Subtitle>
                    <div>
                        <ResponsiveContainer width='100%' height={330}>
                            <BarChart
                                data={refinedData}
                                margin={{
                                    top: 30, right: 0, left: 0, bottom: 5,
                                }}
                            >
                                <CartesianGrid strokeDasharray="3 3" />
                                <XAxis dataKey="country" />
                                <YAxis />
                                <Tooltip />
                                <Legend />
                                <Bar dataKey="Today Deaths" fill="rgba(255, 0, 0, 1.0)" label={{ position: 'top' }}>
                                    {
                                        refinedData.map((entry, index) => (
                                            <Cell key={`cell-${index}`} fill={DANGER_COLOR_SHADES[index % 20]} />
                                        ))
                                    }
                                </Bar>
                            </BarChart>
                        </ResponsiveContainer>
                    </div>
                </Card.Body>
            </Card>
        </div>
    )
}