recharts#ResponsiveContainer JavaScript Examples

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>
    );
  }

RadarCovidChart = props => {

    const data = props.radarData;
    const key = props.chartKey;

    let color = COLOR_CODES.RANDOM.BLACK;
    let name = 'None';
    if (key === 'deaths') {
        color = COLOR_CODES.CATEGORIES.DEATHS;
        name = 'Deaths';
    } else if (key === 'active') {
        color = COLOR_CODES.CATEGORIES.ACTIVE;
        name = 'Active';
    } else if (key === 'recovered') {
        color = COLOR_CODES.CATEGORIES.RECOVERED;
        name = 'Recovered';
    } else if (key === 'confirmed') {
        color = COLOR_CODES.CATEGORIES.CONFIRMED;
        name = 'Confirmed';
    }

    let sliced = data.slice(0, props.top_n);
    console.log('RadarCovidChart', sliced, key);

    return(
        <ResponsiveContainer width='100%' height={430}>
            <RadarChart cx={300} cy={250} outerRadius={150} data={sliced}>
                <PolarGrid />
                <Tooltip />
                <PolarAngleAxis dataKey="state" />
                <PolarRadiusAxis />
                <Radar name={name} dataKey={key} stroke={color} fill={color} fillOpacity={0.6} />
            </RadarChart>
        </ResponsiveContainer>
    )
}

render() {

        const { classes, coin_data } = this.state;

        const market_radar_card_data = coin_data !== null ? [
            { domain: t( "words.feelings", {FLC: true}), score: coin_data.sentiment_votes_up_percentage },
            { domain: t( "words.average score", {FLC: true}), score: coin_data.coingecko_score },
            { domain: t( "words.development score", {FLC: true}), score: coin_data.developer_score },
            { domain: t( "words.liquidity", {FLC: true}), score: coin_data.liquidity_score }
        ]: [];

        const market_score_card = coin_data !== null ?
            <Fade in>
                <Card className={classes.fullHeight}>
                    <CardHeader title={t("components.coin_charts_radar.title")} />
                    <CardContent>
                        <Fade in timeout={300}>
                            <div className={classes.radarChart}>
                                <ResponsiveContainer>
                                    <RadarChart cx="50%" cy="50%" data={market_radar_card_data} legendType="circle" paddingAngle={1} minAngle={1}>
                                        <PolarGrid/>
                                        <PolarAngleAxis dataKey="domain" />
                                        <PolarRadiusAxis angle={90} />
                                        <Radar name={coin_data.name} dataKey="score" stroke="#1c1882" fill="#1c1882"  dot={false} strokeWidth={3} activeDot={<ChartDot dotColor={"#1c1882"}/>} fillOpacity={0.2} />
                                        <Tooltip content={data => this._custom_tooltip(data)}/>
                                    </RadarChart>
                                </ResponsiveContainer>
                            </div>
                        </Fade>
                    </CardContent>
                </Card>
            </Fade>: null;

        return (
            <div className={classes.fullHeight}>{market_score_card}</div>
        );
    }

Sparkline = ({ data, color }) => (
  <div style={{ width: '100%', minWidth: '120px', height: '40px' }}>
    <ResponsiveContainer>
      <AreaChart
        data={data}
        margin={{
          top: 0, left: 0, right: 0, bottom: 0,
        }}
      >
        <YAxis
          hide
          dataKey="y"
          domain={['dataMin', 'dataMax']}
        />
        <Area
          type="monotone"
          dataKey="y"
          stroke={color}
          fill={color}
          fillOpacity={0.3}
          strokeWidth={1}
          connectNulls
        />
      </AreaChart>
    </ResponsiveContainer>
  </div>
)

RechartsPieChart = () => {

  return (
    <div style={{ height: "316px" }}>
      <ResponsiveContainer width="100%" height={200}>
        <PieChart >
          <Pie
            data={chartsSettings.donut.data}
            innerRadius={50}
            outerRadius={80}
            dataKey="value"
          >
            {chartsSettings.donut.data.map((entry, index) => (
              <Cell key={`cell-${index}`} fill={entry.color} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
      <div className={s.donutLabels}>
        {chartsSettings.donut.data.map((entry, index) => (
          <div key={uuidv4()} className={s.label}>
            <Dot color={entry.color} />
            <span className="body-3 ml-2">{entry.name}</span>
          </div>
        ))}
      </div>
    </div>
  )
}

LineCharts = ((props) => {

  const { kind, cluster_data = []} = props;
  let data = [];

  cluster_data.map((value) => {
          data.push({
            time: Unix_timestamp(value[0]),
            [kind]: value[1] * 1,
          });
  })
  // console.log(data,kind)
  return (
  
      <ResponsiveContainer width="100%" height="100%">
        <AreaChart
        width={1500}
        height={200}
        data={data}
          margin={{
            top: 0,
            right: 10,
            left: -20,
            bottom: 0,
          }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="time" />
        <YAxis />
          <Tooltip />
        <Area type="monotone" dataKey={kind} stroke="#4472C4" fill="#E9F4F1" />
        {/* <Line type="monotone" dataKey={kind} stroke="#5A61FF" /> */}
        </AreaChart>
      </ResponsiveContainer>
    
  );
})

export default function SimpleBarChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" height={350}>
      <BarChart data={byDevice} margin={{ top: 0, right: -15, left: -30, bottom: 0 }}>
        <XAxis dataKey="month" tick={{ fontSize: 10 }} />
        <YAxis tick={{ fontSize: 10 }} />
        <Bar dataKey="mobile" barSize={5} fill={theme.palette.primary.dark} />
        <Bar dataKey="desktop" barSize={5} fill={theme.palette.success.light} />
      </BarChart>
    </ResponsiveContainer>
  );
}

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>
  );
}

renderGraph(gridKey, title, dataKeys) {
    return (
      <div key={gridKey} style={ styles.gridCard }>
        <ResponsiveContainer>
          <LineChart 
            data={this.state.data}
            dot={false}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis tick={false} >
              <Label value={title} offset={0} style={{fill: 'green', fontSize: '1.4em'}} position="insideLeft" />
            </XAxis>
            <YAxis axisLine={false} tickLine={false} />
            <Tooltip />
            {dataKeys.map((dataKey, i) => {
              return <Line dot={false} isAnimationActive={false} key={dataKey} type="monotone" dataKey={dataKey} stroke={lineColors[i % lineColors.length]} fill={lineColors[i % lineColors.length]} />
            })}
          </LineChart >
        </ResponsiveContainer>

      </div>
    );
  }

export default function RatingsChart() {
  const theme = useTheme()

  const { loading, error, data } = useQuery(GET_DATA_QUERY)
  if (error) return <p>Sign in to view</p>
  if (loading) return <p>Loading</p>

  return (
    <React.Fragment>
      <Title>Average City Property Value</Title>
      <ResponsiveContainer>
        <BarChart
          data={data.cityValues}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="city" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              City
            </Label>
          </YAxis>
          <Bar dataKey="average" fill={theme.palette.primary.main}></Bar>
        </BarChart>
      </ResponsiveContainer>
    </React.Fragment>
  )
}

ChartColumn = () => (
  <ResponsiveContainer>
    <BarChart
      data={data}
      height={300}
      width={400}
    >
      <XAxis dataKey="name" />
      <YAxis />
      <Bar
        dataKey="value"
        fill="#8884d8"
        isAnimationActive={false}
      />
    </BarChart>
  </ResponsiveContainer>
)

StatChart = ({ data, dataKey, color }) => {
  const sortedData = orderBy(data, 'date.date')

  return (
    <ResponsiveContainer width="100%" height={128}>
      <LineChart data={sortedData}>
        <Tooltip
          separator=""
          formatter={(value) => [commaNumber(value)]}
          labelFormatter={() => ''}
        />
        <Line
          type="monotone"
          dataKey={dataKey}
          stroke={theme.colors[color]}
          strokeWidth={3}
          dot={false}
        />
      </LineChart>
    </ResponsiveContainer>
  )
}

export default function TodayWidget() {
  const theme = useTheme();

  return (
    <Box display="flex" flexDirection="column" flex={1}>
      <Typography component="h2" variant="h6" color="primary" gutterBottom>
        Today
      </Typography>
      <ResponsiveContainer>
        <LineChart
          data={data}
          margin={{
            top: 16,
            right: 16,
            bottom: 0,
            left: 24,
          }}
        >
          <XAxis dataKey="time" stroke={theme.palette.text.secondary} />
          <YAxis stroke={theme.palette.text.secondary}>
            <Label
              angle={270}
              position="left"
              style={{ textAnchor: 'middle', fill: theme.palette.text.primary }}
            >
              Sales ($)
            </Label>
          </YAxis>
          <Line type="monotone" dataKey="amount" stroke={theme.palette.primary.main} dot={false} />
        </LineChart>
      </ResponsiveContainer>
    </Box>
  );
}

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>
    );
  }

export default function QtyPublishedProducts({ products, keywords }) {
  if (!products) {
    return <div> Loading ... </div>;
  }

  const lines = keywords.map((item, index) => ({
    keyword: item,
    fill: colors[index],
  }));

  return (
    <ResponsiveContainer height={300}>
      <LineChart data={products}>
        <CartesianGrid strokeDasharray='5 5' />
        <XAxis dataKey='date' />
        <YAxis />
        <Tooltip />
        {lines.map(({ keyword, fill }) => {
          return (
            <Line
              key={keyword.replace(' ', '-')}
              dataKey={`"${keyword}"`}
              fill={fill}
              stroke={fill}
            />
          );
        })}
      </LineChart>
    </ResponsiveContainer>
  );
}

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>
)

AnnualIncidentsChart = () => {
    const currentUser = getSession();
    const incidentService = new IncidentService();
    const [annualIncidentCount, setAnnualIncidentCount] = useState([]);

    useEffect(() => {
        const orgId = currentUser.org_id;
        incidentService.getMonthlyIncidentCount(orgId).then((res) => {
            setAnnualIncidentCount(res);
        });
    }, []);

    return (
        <MDBCard className="annual-incidents-chart-container">
            <MDBCardBody>
                <p className="text-center font-weight-bold">
                    Dengue Incidents Reported Over the year
                </p>
                <ResponsiveContainer width="100%" height={250}>
                    <LineChart data={annualIncidentCount}>
                        <XAxis dataKey="name" />
                        <YAxis />
                        <Tooltip />
                        <Line
                            type="monotone"
                            dataKey="count"
                            strokeWidth={3}
                            stroke="#0783EC"
                            fill="#0783EC"
                        />
                    </LineChart>
                </ResponsiveContainer>
            </MDBCardBody>
        </MDBCard>
    );
}

function GrowthAreaChart ({ data, xName, title }) {
  return (
    <ResponsiveContainer width='100%' height={300} minWidth={300}>
      <AreaChart
        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 />
        {Object.keys(data[0]).filter(v => v !== 'time' && v !== '__typename').map((v, i) =>
          <Area key={v} type='monotone' dataKey={v} name={v} stackId='1' stroke={COLORS[i]} fill={COLORS[i]} />)}
      </AreaChart>
    </ResponsiveContainer>
  )
}

TimeChart = ({ chartData, classes }) => (
  <div>
    <Card>
      <CardContent className={classes.content}>
        <ResponsiveContainer width="100%" height={255}>
          <ScatterChart>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="datetime" className="datetime" />
            <YAxis domain={[0, chartData.dataMax]} dataKey="count" />
            <Tooltip cursor={{ strokeDasharray: '3 3' }} />
            <Scatter
              className="datetime"
              data={chartData.displayData}
              line={{}}
            />
          </ScatterChart>
        </ResponsiveContainer>
      </CardContent>
    </Card>
  </div>
)

Histogram = (props) => {
  const { discrete, labels, values } = props
  const data = values.map((value, index) => {
    const label = labels[index]
    return {
      x: discrete ? label.toString() : label.toFixed(DISPLAY_DECIMAL_LENGTH),
      y: value
    }
  })
  return (
    <ResponsiveContainer width='100%' height={400}>
      <BarChart
        data={data}
        width={500}
        height={300}
        margin={{ top: 0, bottom: 30 }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis
          dataKey='x'
          label={{
            value: props.xLabel,
            position: 'insideBottom',
            offset: -20
          }}
        />
        <YAxis
          label={{
            value: props.yLabel,
            angle: -90,
            position: 'insideLeft'
          }}
        />
        <Tooltip />
        <Bar dataKey='y' fill='#2980b9' />
      </BarChart>
    </ResponsiveContainer>
  )
}

export default function FeesChart(props) {
  const {
    data,
    loading,
    chartHeight,
    yaxisWidth,
    xaxisTickFormatter,
    yaxisTickFormatter,
    tooltipFormatter,
    tooltipLabelFormatter
  } = props

  const csvFields = [
    // {key: 'swap', name: 'Swap'},
    {key: 'margin', name: 'Margin trading'},
    {key: 'mint', name: 'Mint ALP'},
    {key: 'burn', name: 'Burn ALP'},
    {key: 'liquidation', name: 'Liquidation'},
    {key: 'cumulative', name: 'Cumulative'}
  ]

  return <ChartWrapper title="Fees" loading={loading} csvFields={csvFields} data={data}>
    <ResponsiveContainer width="100%" height={chartHeight}>
      <ComposedChart data={data} syncId="syncA">
        <CartesianGrid strokeDasharray="3 3" stroke='#333333' />
        <XAxis dataKey="timestamp" tickFormatter={xaxisTickFormatter} minTickGap={30} />
        <YAxis dataKey="all" interval="preserveStartEnd" tickCount={7} tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
        <YAxis dataKey="cumulative" orientation="right" yAxisId="right" tickFormatter={yaxisTickFormatter} width={yaxisWidth} />
        <Tooltip
          formatter={tooltipFormatter}
          labelFormatter={tooltipLabelFormatter}
          contentStyle={{ textAlign: 'left' }}
        />
        <Legend />
        {/* <Bar isAnimationActive={false} type="monotone" dataKey="swap" stackId="a" name="Swap" fill={COLORS[0]} /> */}
        <Bar isAnimationActive={false} type="monotone" dataKey="mint" stackId="a" name="Mint ALP" fill={COLORS[1]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="burn" stackId="a" name="Burn ALP" fill={COLORS[2]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="liquidation" stackId="a" name="Liquidation" fill={COLORS[3]} />
        <Bar isAnimationActive={false} type="monotone" dataKey="margin" stackId="a" name="Margin trading" fill={COLORS[4]} />
        <Line isAnimationActive={false} type="monotone" strokeWidth={3} dot={false} stroke={COLORS[0]} dataKey="cumulative" yAxisId="right" name="Cumulative" />
      </ComposedChart>
    </ResponsiveContainer>
    <div className="chart-description">
      Collected fees. USD value is calculated with token price at the moment of swap, trade, minting or redeeming ALP
    </div>
  </ChartWrapper>
}

renderBarGraph() {
    return (
      <div className="mx-3 mt-2">
        <ResponsiveContainer width="100%" height={400}>
          <BarChart
            width={500}
            height={300}
            data={this.ageData}
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="High" stackId="a" fill="#FA897B" />
            <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
            <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
            <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
            <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
          </BarChart>
        </ResponsiveContainer>
        <ResponsiveContainer width="100%" height={400}>
          <BarChart
            width={500}
            height={300}
            data={this.sexData}
            margin={{
              top: 20,
              right: 30,
              left: 20,
              bottom: 5,
            }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip />
            <Legend />
            <Bar dataKey="High" stackId="a" fill="#FA897B" />
            <Bar dataKey="Medium" stackId="a" fill="#FFDD94" />
            <Bar dataKey="Low" stackId="a" fill="#D0E6A5" />
            <Bar dataKey="No Identified Risk" stackId="a" fill="#333" />
            <Bar dataKey="Missing" stackId="a" fill="#BABEC4" />
          </BarChart>
        </ResponsiveContainer>
      </div>
    );
  }

Chart = props => {
  const { observations, tempUnit } = props;

  const temps = observations.map(observation => {
    const datetime = new Date(observation.date).toISOString().slice(0, 10);
    let temp;
    if (
      !observation.physical.feverSeverity ||
      observation.physical.feverSeverity === '' ||
      !parseFloat(observation.physical.feverSeverity, 10) > 0
    ) {
      temp = 0;
    } else {
      temp = parseFloat(observation.physical.feverSeverity, 10);
    }

    return { date: datetime, temperature: temp };
  });

  const [temperatureData] = useState(temps);

  return (
    <ResponsiveContainer width="100%" aspect={4.0 / 1.5}>
      <LineChart
        data={temperatureData}
        margin={{
          top: 10,
          right: 50,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="date" />
        <YAxis type="number" domain={tempUnit === 'fahrenheit' ? [94, 105] : [32, 42]} />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="temperature" stroke="#8884d8" activeDot={{ r: 8 }} />
        <Tooltip />
      </LineChart>
    </ResponsiveContainer>
  );
}

export default function PlotKNN() {
  const { model_state } = useModelState();
  const data = createPlotData(model_state);
  const columns = model_state.knn_columns;
  const columnMap = model_state.knn_columns_map;
  const xAxisColumn = columnMap[columns[model_state.knn_column1_index]];
  const yAxisColumn = columnMap[columns[model_state.knn_column2_index]];

  return (
    <>
      {!model_state.viz_loading ? (
        <ResponsiveContainer
          className="graph-wrapper"
          width="100%"
          height="100%"
        >
          <ScatterChart
            margin={{
              top: 20,
              right: 20,
              bottom: 20,
              left: 20,
            }}
          >
            <CartesianGrid />
            <XAxis
              type="number"
              dataKey="x"
              name={xAxisColumn}
              unit={
                model_state.knn_column_units
                  ? model_state.knn_column_units[model_state.knn_column1_index]
                  : ""
              }
            >
              <Label value={xAxisColumn} position="insideBottom" offset={-12} />
            </XAxis>
            <YAxis
              type="number"
              dataKey="y"
              name={yAxisColumn}
              unit={
                model_state.knn_column_units
                  ? model_state.knn_column_units[model_state.knn_column2_index]
                  : ""
              }
            >
              <Label value={yAxisColumn} angle={-90} position="insideLeft" />
            </YAxis>
            <Tooltip cursor={{ strokeDasharray: "3 3" }} />
            <Legend verticalAlign="top" height={36} />
            {model_state.knn_labels.map((label, index) => (
              <Scatter
                name={label}
                data={data[index]}
                fill={fillColors[index]}
                shape={shapeTypes[index]}
                key={index}
              />
            ))}
          </ScatterChart>
        </ResponsiveContainer>
      ) : (
        <LoadingComponent />
      )}
    </>
  );
}

DailyTracker = ({ data, title, value }) => {
	return (
		<div>
			{data.length > 0 && (
				<div className="h-80">
					<ResponsiveContainer>
						<AreaChart data={data} margin={{ top: 5, right: 20, left: 10, bottom: 35 }}>
							<defs>
								<linearGradient id="colorVolume" x1="0" y1="0" x2="0" y2="1">
									<stop offset="0%" stopColor="#9996bc" stopOpacity={0.5} />
									<stop offset="50%" stopColor="#594fb2" stopOpacity={0.5} />
									<stop offset="75%" stopColor="#1300BA" stopOpacity={0.15} />
									<stop offset="100%" stopColor="#1300" stopOpacity={0} />
								</linearGradient>
							</defs>
							<CartesianGrid strokeDasharray="4 8" horizontal={false} />
							<YAxis
								dataKey={value}
								axisLine={false}
								tickLine={false}
								tickMargin={8}
								stroke="rgba(255, 255, 255, 0.6)"
							/>
							<XAxis
								interval={4}
								dataKey="timestamp"
								axisLine={false}
								tickLine={false}
								tickMargin={8}
								stroke="rgba(255, 255, 255, 0.6)"
								tickFormatter={(x) => {
									return `${new Date(x).getMonth() + 1}/${new Date(x).getDate()}`
								}}
							/>
							<Tooltip content={<CustomTooltip title={title} value={value} />} />
							<Area
								type="monotone"
								stackId="1"
								dataKey={value}
								dot={false}
								stroke="#3389ff"
								strokeWidth={2}
								fillOpacity={1}
								fill="url(#colorVolume)"
							/>
						</AreaChart>
					</ResponsiveContainer>
				</div>
			)}
		</div>
	)
}

render() {
    const { data, classes } = this.props;
    let result;
    try {
      const updatedData = data.slice(1).slice(-50);
      result = updatedData.map((dataItem) => {
        let newObject = {};
        for (let [key, value] of Object.entries(dataItem)) {
          if (key === "date") {
            newObject[key] = value;
          } else {
            newObject[key] = Number(value);
          }
        }
        return {
          ...newObject,
          totalactive:
            newObject.totalconfirmed -
            (newObject.totalrecovered + newObject.totaldeceased),
        };
      });
    } catch (err) {}

    return (
      <div className={classes.charts}>
        <ResponsiveContainer>
          <LineChart
            width={600}
            height={300}
            data={result}
            margin={{
              top: 5,
              right: 30,
              left: 20,
              bottom: 5,
            }}
          >
            <XAxis dataKey="date" />
            <YAxis />
            <Tooltip />
            <Legend
              wrapperStyle={{
                margin: "-3rem 1rem",
              }}
            />
            <Line
              type="monotone"
              dataKey="totalconfirmed"
              stroke={colors.red}
              dot={false}
              activeDot={{ r: 8 }}
            />
            <Line
              type="monotone"
              dataKey="totalactive"
              stroke={colors.orange}
              dot={false}
            />
            <Line
              type="monotone"
              dataKey="totalrecovered"
              stroke={colors.green}
              dot={false}
            />
            <Line
              type="monotone"
              dataKey="totaldeceased"
              stroke={colors.purple}
              dot={false}
            />
          </LineChart>
        </ResponsiveContainer>
      </div>
    );
  }

render() {
        const {
            classes, className: classNameProp, log, indexedLogs,
        } = this.props;

        // filtering out the following APIs for a better representation of the latency
        const apiFilter = new Set([
            'getAgentSnapshot',
        ]);

        const latencies = log
            .filter((event) => (indexedLogs.has(event._key)))
            .flatMap((event) => ({
                _localTimestamp: event._ts,
                localTimestamp: event.time,
                _type: 'LATENCY',
                ...indexedLogs.get(event._key),
            }))
            .filter((event) => !(apiFilter.has(event.apiName) || event.type === 'SEND'));

        return (
            <div className={clsx(classes.root, classNameProp)}>
                <Container
                    title="API Call Metrics"
                    gutters={false}
                >
                    <div className={classes.content}>
                        <ResponsiveContainer width="100%" height={300}>
                            <ComposedChart
                                data={latencies}
                                margin={{
                                    top: 5, right: 20, bottom: 5, left: 20,
                                }}
                            >
                                <YAxis>
                                    <Label angle={270} position="left" style={{ textAnchor: 'middle' }}>
                                        Latency (ms)
                                    </Label>
                                </YAxis>
                                <XAxis dataKey="_localTimestamp" type="number" scale="time" domain={['auto', 'auto']} tick={this.renderCustomAxisTick} />
                                <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
                                {/* eslint-disable-next-line max-len */}
                                <Line type="linear" dataKey="latency" stroke="#8884d8" strokeWidth={2} dot={this.renderDots} activeDot={this.renderActiveDots} connectNulls isAnimationActive={false} />
                                <Tooltip content={this.renderCustomTooltip} />
                            </ComposedChart>
                        </ResponsiveContainer>
                    </div>
                </Container>
            </div>
        );
    }

render() {
        return (
            <Fragment>
                <PageTitle
                    heading="Auction History"
                    subheading="Here you can see the list of completed auctions."
                    icon="pe-7s-wristwatch icon-gradient bg-night-fade"
                />

                {!this.state.loading && this.state.boxes.length === 0 && (
                    <strong
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                            alignItems: 'center',
                        }}
                    >
                        No Auction History Yet
                    </strong>
                )}

                <ShowHistories
                    boxes={this.state.boxes}
                />
                <ResponsiveContainer height={70}>
                    <div
                        style={{
                            display: 'flex',
                            justifyContent: 'center',
                        }}
                    >
                        <Row>
                            <Button
                                onClick={() => this.loadMore(true)}
                                outline
                                className="btn-outline-light m-2 border-0"
                                color="primary"
                            >
                                {this.state.still && !this.state.loading && (
                                    <span>
                                        <i className="nav-link-icon lnr-plus-circle">
                                            {' '}
                                        </i>
                                        Load More
                                    </span>
                                )}
                            </Button>
                        </Row>
                        <br/>
                        <Row>
                            <PropagateLoader
                                css={override}
                                size={20}
                                color={'#0086d3'}
                                loading={this.state.loading}
                            />
                        </Row>
                    </div>
                </ResponsiveContainer>
            </Fragment>
        );
    }

CountryCasesWidget = props => {
    const data = props.data;
    const TOP_N = 15;

    let refinedData = [];
    let sortedData = data.sort((a, b) => b.cases - a.cases);
    let cloned = JSON.parse(JSON.stringify(sortedData));
    let topNData = cloned.splice(0, TOP_N);

    topNData.forEach(element => {
        let obj = {};
        obj['Country'] = element['country'];
        obj['Cases'] = element['cases'];
        obj['Recovered'] = element['recovered'];
        obj['Deaths'] = element['deaths'];
        refinedData.push(obj);
    });
    

    return(
        <div className="country-all-data-widget">
            <Card >
                <Card.Body>
                    <Card.Title>Major Country Spreads(Total Confirmed Cases)</Card.Title>
                    <Card.Subtitle className="mb-2 text-muted">Number of Countries: <b>{TOP_N}</b></Card.Subtitle>
                    <div>
                        <ResponsiveContainer width='100%' height={400}>
                            <AreaChart data={refinedData}
                                    margin={{top: 10, right: 30, left: 0, bottom: 0}}>
                                <CartesianGrid strokeDasharray="3 3"/>
                                <XAxis dataKey="Country"/>
                                <YAxis/>
                                <Tooltip/>
                                <Area type='monotone' dataKey='Cases' stackId="1" stroke={COLOR_CODES.CATEGORIES.CONFIRMED} fill={COLOR_CODES.CATEGORIES.CONFIRMED} activeDot={{ r: 8 }}/>
                            </AreaChart>
                        </ResponsiveContainer>
                    </div>
                </Card.Body>
            </Card>
        </div>
    )
}