recharts#LineChart JavaScript Examples

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

LineChartRevenue = () => (
  <ResponsiveContainer width="100%" height={350}>
    <LineChart data={data} margin={{top: 0, right: 26, left: -20, bottom: 0}}>

      <CartesianGrid strokeDasharray="3 3"/>
      <XAxis stroke="#ffffff" dataKey="name"/>
      <YAxis stroke="#ffffff"/>
      <Line type="monotone" dataKey="pv" stroke="#e6b21a" activeDot={{r: 8}}/>
      <Line type="monotone" dataKey="uv" stroke="#ffffff"/>
    </LineChart>
  </ResponsiveContainer>
)

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

function SimpleLineChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" minWidth={500} height={350}>
      <LineChart
        width={600}
        height={300}
        data={sales}
        margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
      >
        <XAxis dataKey="month" />
        <YAxis />

        <Tooltip />

        <Line
          type="monotone"
          dataKey="orders"
          stroke={theme.palette.primary.dark}
          activeDot={{ r: 8 }}
        />
        <Line type="monotone" dataKey="sales" stroke={theme.palette.success.light} />
      </LineChart>
    </ResponsiveContainer>
  );
}

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

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

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

UserActivityStatsWidget = () => {
    const [auditLogStats] = useFetch('/auditlog/stats')

    return <DashboardWidget title="User activity over time">

        {auditLogStats && auditLogStats.length > 0 ?
            <LineChart width={320} height={320} data={auditLogStats}>
                <Line type="monotone" dataKey="total" stroke="var(--primary-color)" strokeWidth="var(--borderWidth)" />
                <CartesianGrid stroke="var(--bg-color)" />
                <XAxis dataKey="log_date" />
                <YAxis dataKey="total" />
            </LineChart> :
            <p>No enough data to generate the chart.</p>
        }
    </DashboardWidget>
}

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

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

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

export default function LineGraph() {
	const data = useSelector((state) => state.User.userVideoFeedback.score_over_time);
	const recursiveFormat = getDate(data);
	console.log("width", window.screen.availWidth, "height", window.screen.availHeight);

	return (
		<div>
			<LineChart
				width={window.screen.availWidth < 768 ? 350 : window.screen.availWidth < 1800 ? 700 : 800}
				height={window.screen.availHeight < 768 ? 300 : window.screen.availHeight < 1100 ? 550 : 600}
				margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
				data={recursiveFormat}>
				<CartesianGrid strokeDasharray="5 5" />
				<XAxis dataKey="created_at" />
				<YAxis domain={[0, 5]} ticks={[0, 1, 2, 3, 4, 5]} />
				<Tooltip />
				<Legend />
				<Line
					strokeWidth="0.3rem"
					type="monotone"
					dataKey="overall_performance"
					stroke="#6954EA"
					dot={true}
					activeDot={{ r: 8 }}
				/>
			</LineChart>
		</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>
	)
}

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

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

MiniStateSparkline = ({
  requiredStateDailyData,
  dataKey,
  min,
  max,
  sparklineData,
  stroke,
}) => {
  return (
    <section style={{ alignContent: "center" }}>
      <ResponsiveContainer width="95%" height="100%" aspect={2.35}>
        <LineChart
          data={requiredStateDailyData.slice(
            requiredStateDailyData.length - 20,
            requiredStateDailyData.length
          )}
          syncId="line2"
        >
          <YAxis domain={[min, max]} hide={true} />

          <Tooltip
            content={<CustomTooltip />}
            contentStyle={{
              background: "rgba(255,255,255,0)",
              border: "none",
              textAlign: "left",
            }}
            active={true}
            cursor={false}
            position={{ x: -5, y: 0 }}
            offset={5}
          />
          <Line
            type="monotone"
            dataKey={dataKey}
            stroke={stroke}
            strokeWidth={2.2}
            dot={false}
            animationDuration={2000}
          />
          <ReferenceDot
            x={
              sparklineData.slice(
                sparklineData.length - 20,
                sparklineData.length
              ).length - 1
            }
            y={Number(sparklineData.slice(-1))}
            r={3}
            fill={stroke}
            stroke={stroke}
            isAbove={true}
          />
        </LineChart>
      </ResponsiveContainer>
    </section>
  );
}

function TimeseriesLineChart({ name, data, dataKeys, colors }) {
  const { mode } = useContext(WindmillContext);

  return (
    <div>
      <SectionTitle>{name}</SectionTitle>
      <Card className="mb-8">
        <CardBody>
          <ResponsiveContainer height={400}>
            <LineChart
              data={data}
              margin={{
                top: 20,
                right: 10,
                left: -10,
                bottom: 5,
              }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis dataKey="date" />
              <YAxis />
              <Tooltip
                cursor={false}
                contentStyle={{
                  backgroundColor:
                    mode === "dark"
                      ? "var(--color-gray-800)"
                      : "var(--color-gray-100)",
                  color:
                    mode === "dark"
                      ? "var(--color-gray-100)"
                      : "var(--color-gray-800)",
                  borderRadius: "0.5rem",
                  borderStyle: "none",
                }}
              />
              <Legend
                wrapperStyle={{
                  color:
                    mode === "dark"
                      ? "var(--color-gray-100)"
                      : "var(--color-gray-800)",
                }}
              />
              {dataKeys.map((k, i) => (
                <Line
                  type="monotone"
                  key={k}
                  dataKey={k}
                  stroke={colors[i]}
                  strokeWidth={2}
                />
              ))}
            </LineChart>
          </ResponsiveContainer>
        </CardBody>
      </Card>
    </div>
  );
}

render() {
    return (
      <Column flexGrow={1} className={css(styles.container)} horizontal='center'>
        <Row horizontal='center' className={css(styles.fullwidth)}>
          <Column flexGrow={1} vertical='center' horizontal='center' className={css(styles.cards)}>
            Active tasks: {this.state.active_number}
          </Column>
          <Column className={css(styles.separatorwidth)}> </Column>
          <Column flexGrow={1} vertical='center' horizontal='center' className={css(styles.cards)}>
            Reserved tasks: {this.state.reserved_number}
          </Column>
          <Column className={css(styles.separatorwidth)}> </Column>
          <Column flexGrow={1} vertical='center' horizontal='center' className={css(styles.cards)}>
            Total tasks:  {this.state.succeed_number}
          </Column>
        </Row>
        <Row className={css(styles.separatorheight)}> </Row>
        <Row flexGrow={1} horizontal='center' className={css(styles.fullwidth)}>
          <Column flexGrow={1} vertical='center' horizontal='center' className={css(styles.with_c1)}>
            <ResponsiveContainer width="99%" aspect={3}>
              <LineChart data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
                <XAxis dataKey="time" />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="tasks" stroke="#42494F" />
              </LineChart>
            </ResponsiveContainer>
          </Column>
          <Column className={css(styles.separatorwidth)}> </Column>
          <Column flexGrow={1} vertical='center' horizontal='center' className={css(styles.with_c2)}>
            <ResponsiveContainer width="99%" aspect={1} >
              <PieChart>
                <Pie dataKey="value" isAnimationActive={false} data={this.state.tasks} stroke="#444444" fill="#ffffff" />
                <Tooltip />
              </PieChart>
            </ResponsiveContainer>
          </Column>
        </Row>
        <Row className={css(styles.separatorheight)}> </Row>
        {this.state.results.length > 0 && this.state.results.map(function (item) {
          return (<div key={item.uuid} className={css(styles.fullwidth)}>
            <Row className={css(styles.listofrows)}>
              <Column flexGrow={1} vertical='center' horizontal='start' className={css(styles.cardinputoverflow)}>
                <ReactJson src={item} />
              </Column>
              <Column flexGrow={1} vertical='center' horizontal='end' className={css(styles.cardinput)}>
                <img src={backendurls.screenshot + item.uuid} alt="" height="140" width="220" />
              </Column>
            </Row>
            <Row className={css(styles.separatorheight)}> </Row></div>)
        })}
        {this.state.flashmessage.msg !== "" ? <LoadingSpinner close={false} key={this.state.flashmessage.random} timeout="5" msg={this.state.flashmessage.msg} keep={true} spinner={this.state.flashmessage.spinner} /> : ""}
      </Column>
    );
  }

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

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

MiniSparkline = ({
  sparklinedata,
  min,
  max,
  type,
  fill,
  stroke,
  datakey,
}) => {
  const lineKey = ["confirmed", "active", "recovered", "deceased"];
  return (
    <ResponsiveContainer width="98%" height="100%" aspect={2.25}>
      <LineChart data={sparklinedata} syncId="line2">
        <YAxis domain={[min, max]} hide={true} />
        <Tooltip
          content={<CustomTooltip />}
          contentStyle={{
            background: "rgb(255,255,255)",
            border: "none",
            textAlign: "left",
          }}
          active={true}
          cursor={false}
          position={{ x: 0, y: 0 }}
          offset={5}
        />
        <Line
          type="monotone"
          dataKey={lineKey[datakey]}
          stroke={fill}
          strokeWidth={2}
          dot={false}
          animationDuration={2000}
        />
        <ReferenceDot
          x={type.length - 1}
          y={Number(type.slice(-1))}
          r={3.2}
          fill={fill}
          stroke={stroke}
          isFront={true}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

ResourceStats = ({ resourceId }) => {
    const { t } = useTranslation();
    const { edlibApi } = useConfigurationContext();

    const { loading, response } = useFetchWithToken(
        edlibApi(`/resources/v1/resources/${resourceId}/stats`)
    );

    if (loading || !response) {
        return <CircularProgress />;
    }
    const last7daysViews = response.data.last7daysViews;
    const datasets = [
        {
            key: 'count',
            name: _.capitalize(t('resource_view', { count: 2 })),
            dataset: last7daysViews,
        },
    ];

    return (
        <>
            <Box pb={2}>
                <strong>{t('S.VIEWS_PAST_7_DAYS')}</strong>
            </Box>
            <ResponsiveContainer width="100%" height={100}>
                <LineChart
                    data={fillEmptyDays(
                        last7daysViews,
                        moment().subtract(7, 'days').startOf('day'),
                        moment().endOf('day'),
                        {
                            zeroFields: datasets.map((dataset) => dataset.key),
                        }
                    )}
                    margin={{
                        left: -20,
                    }}
                >
                    <XAxis dataKey="date" />
                    <YAxis allowDecimals={false} />
                    <Tooltip />
                    {datasets.map((dataset) => (
                        <Line
                            key={dataset.name}
                            dot={false}
                            name={dataset.name}
                            type="monotone"
                            dataKey={dataset.key}
                            stroke={dataset.color}
                            yAxisId={0}
                            isAnimationActive={false}
                        />
                    ))}
                </LineChart>
            </ResponsiveContainer>
        </>
    );
}

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

TwoWeekLineChart = ( props ) => {
    
    // map data into object
    let data = props.data.map(d => {
        return {val: d/props.data[0]}
    })
    
    let schemas = {
        'cases/deaths': ['green', 'yellow', 'red'],
        'testingCap': ['#f7fbff', '#f7fbff', '#08306b'],
        'testingPos': ['#0d0887', '#cb4679', '#f0f921'],
        'vaccination': ['#FCFBFD', '#D9D8EA', '#bcbcdb'],
    }
    
    // colors derived from green - yellow - red diverging scale
    const colorScale = d3.scaleLinear()
        .domain([0, 0.5, 1])
        .range(schemas[props.schema])

    // change over past two weeks
    const delta = props.data[13] - props.data[0]

    const lineColor = (delta, start) => {
        let pctChange = delta/start
        return colorScale(pctChange + 0.5);
    }

    const calcAngle = (delta, start) => {
        let pctChange = delta/start;
        if (pctChange >= 0.5) {
            return -60
        } else if (pctChange <= -0.5) {
            return 60
        } else { 
            return pctChange*-1*60
        }
    }

    return (
        <LineContainer>
            <LineChart data={data} width={60} height={30}>
                <YAxis domain={['dataMin', 'dataMax']}  hide={true} />
                <Line 
                    type="linear" 
                    dataKey="val" 
                    stroke={lineColor(delta, props.data[0])}
                    strokeWidth={2} 
                    isAnimationActive={false}
                    dot={
                        <CustomizedDot color={lineColor(delta, props.data[0])} angle={calcAngle(props.data[12] - props.data[10], props.data[12])} />
                        }
                />
            </LineChart>
        </LineContainer>
    );
}

Line = (props) => {
  const [activeTitle, setIsActiveTitle] = useState('')

  const colors = [
    '#2980b9', '#c0392b', '#16a085', '#d35400', '#f39c12', '#7f8c8d',
    '#3498db', '#e74c3c', '#1abc9c', '#e67e22', '#f1c40f'
  ]

  // Make up recharts data
  const maxX = Math.max(...props.values.map((value) => value.length))
  const data = Range(0, maxX).map((i) => ({ x: i + 1 })).toArray()
  props.values.forEach((value, dataIndex) => {
    value.forEach((v, timeIndex) => {
      data[timeIndex][props.titles[dataIndex]] = v
    })
  })

  const handleMouseEnter = ({ dataKey }) => {
    setIsActiveTitle(dataKey)
  }

  const handleMouseLeave = () => {
    setIsActiveTitle('')
  }

  return (
    <ResponsiveContainer>
      <LineChart
        data={data}
        height={300}
        margin={{ top: 0, bottom: 30 }}
      >
        <CartesianGrid strokeDasharray='3 3' />
        <XAxis
          dataKey='x'
          label={{
            value: props.xLabel,
            position: 'insideBottom',
            offset: -10
          }}
        />
        <YAxis
          label={{
            value: props.yLabel,
            angle: -90,
            position: 'insideLeft'
          }}
        />
        <Tooltip />
        <Legend
          wrapperStyle={{ fontSize: 10, paddingTop: 15 }}
          onMouseEnter={handleMouseEnter}
          onMouseLeave={handleMouseLeave}
        />
        {props.titles.map((title, i) => {
          let opacity = 1.0
          if (activeTitle !== '' && activeTitle !== title) {
            opacity = GRAPH_DIMMED_OPACITY
          }
          return (
            <RechartsLine
              strokeWidth={2}
              key={title}
              type='monotone'
              dataKey={title}
              strokeOpacity={opacity}
              stroke={colors[i % colors.length]}
              fill={colors[i % colors.length]}
              dot={false}
              isAnimationActive
              animationDuration={500}
            />
          )
        })}
      </LineChart>
    </ResponsiveContainer>
  )
}