recharts#Line JavaScript Examples

The following examples show how to use recharts#Line. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: StatisChart.js From YApi-X with MIT License

6 votes

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

Example #2

Source File: greeksChart.jsx From GraphVega with MIT License

6 votes

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

Example #3

Source File: LineChartRevenue.js From DMS_React with GNU Affero General Public License v3.0

6 votes

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

Example #4

Source File: ivSkewChart.jsx From GraphVega with MIT License

6 votes

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

Example #5

Source File: IndiaDistrictTrend.js From covid-19 with MIT License

6 votes

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

Example #6

Source File: UserActivityStatsWidget.js From web-client with Apache License 2.0

6 votes

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

Example #7

Source File: annualIncidentsChart.js From DengueStop with Apache License 2.0

6 votes

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

Example #8

Source File: forever.js From stacker.news with MIT License

6 votes

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

Example #9

Source File: ComposedCharts.js From gedge-platform with Apache License 2.0

6 votes

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

Example #10

Source File: LineGraph.jsx From covid19-updates with GNU General Public License v3.0

6 votes

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

Example #11

Source File: SimpleComposedChart.js From paper-and-ink with MIT License

6 votes

function SimpleComposedChart() {
  const theme = useTheme();
  return (
    <ResponsiveContainer width="100%" minWidth={500} height={350}>
      <ComposedChart margin={{ top: 0, right: -15, left: -15, bottom: 0 }} data={sales}>
        <YAxis ticks={[0, 2500, 5000, 9800]} tick={{ fontSize: 12 }} tickLine={false} />
        <XAxis dataKey="month" tick={{ fontSize: 12 }} tickLine={false} />
        <Area
          type="natural"
          dataKey="area"
          fill={theme.palette.primary.light}
          strokeWidth={0}
          activeDot={false}
        />
        <Line type="monotone" dataKey="sales" stroke={theme.palette.primary.dark} strokeWidth={2} />
        <Line
          type="monotone"
          dataKey="orders"
          stroke={theme.palette.success.light}
          strokeWidth={2}
          dot={{
            stroke: theme.palette.success.dark,
            strokeWidth: 2,
            fill: theme.palette.success.main
          }}
        />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

Example #12

Source File: allCountriesGraph.js From caricovidsite with MIT License

6 votes

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

Example #13

Source File: TodayWidget.js From module-federation-examples with MIT License

6 votes

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

Example #14

Source File: StatChart.js From covid19 with MIT License

6 votes

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

Example #15

Source File: qty-products.jsx From product-collector with MIT License

6 votes

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

Example #16

Source File: AssessmentsDay.js From SaraAlert with Apache License 2.0

6 votes

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

Example #17

Source File: CoreView.js From Rover-Mission-Control with MIT License

6 votes

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

Example #18

Source File: LineGraph.js From video-journal-for-teams-fe with MIT License

6 votes

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

Example #19

Source File: SimpleLineChart.js From paper-and-ink with MIT License

6 votes

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

Example #20

Source File: AdvancedGraph.js From covid-19 with MIT License

6 votes

function lineForSpec(spec) {
  return (
    <Line
      key={spec.label}
      baseLine={10000}
      type="monotone"
      dataKey={spec.label}
      isAnimationActive={false}
      fill={spec.color}
      stroke={spec.color}
      strokeDasharray={spec.stipple ? '1 2' : undefined}
      dot={false}
      strokeWidth={2}
      yAxisId={spec.rightAxis ? 1 : 0}
    />
  );
}

Example #21

Source File: Bandwidth.js From petio with MIT License

5 votes

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

Example #22

Source File: miniStateSparkline.jsx From CovidIndiaStats with MIT License

5 votes

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

Example #23

Source File: Ram.js From petio with MIT License

5 votes

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

Example #24

Source File: miniSateSparkline.jsx From CovidIndiaStats with MIT License

5 votes

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

Example #25

Source File: TestsPage.js From caricovidsite with MIT License

5 votes

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

Example #26

Source File: TimeseriesLineChart.js From dashboard with MIT License

5 votes

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

Example #27

Source File: FeesChart.js From acy-dex-interface with MIT License

5 votes

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

Example #28

Source File: GraphDeathProjection.js From covid-19 with MIT License

5 votes

GraphDeathProjectionRender = (props) => {
  let data = props.data;
  const max_date = props.max_date;
  const data_keys = props.data_keys;

  data = data.map(d => {
    d.name = moment(d.fulldate, "MM/DD/YYYY").format("M/D");
    return d;
  });
  data = data.sort((a, b) => moment(a.fulldate, "MM/DD/YYYY").toDate() - (moment(b.fulldate, "MM/DD/YYYY")).toDate());

  const [state, setState] = React.useState({
    showall: false,
  });

  const handleLogScaleToggle = event => {
    setState({ ...state, showall: !state.showall });
  };
  const cutoff = moment().subtract(30, 'days')
  const future = moment().add(30, 'days')
  data = data.filter(d => {
    let day = moment(d.fulldate, "MM/DD/YYYY");
    return day.isAfter(cutoff) && day.isBefore(future);
  });
  const formatYAxis = (tickItem) => {
    return myShortNumber(tickItem);
  }

  return <>
    <Grid container alignItems="center" spacing={1}>
      <Grid item onClick={handleLogScaleToggle}>
        <Typography>
          Daily
                </Typography>
      </Grid>
      <Grid item>
        <AntSwitch checked={state.showall} onClick={handleLogScaleToggle} />
      </Grid>
      <Grid item onClick={handleLogScaleToggle}>
        <Typography>
          Total
                </Typography>
      </Grid>
      <Grid item></Grid>
    </Grid>
    <ResponsiveContainer height={300} >
      <ComposedChart data={data} margin={{ top: 5, right: 30, left: 5, bottom: 5 }} >
        <XAxis dataKey="name" />
        <YAxis yAxisId={0} tickFormatter={formatYAxis} />
        <ReferenceLine x={moment(max_date, "MM/DD/YYYY").format("M/D")} label={{ value: props.max_label, fill: '#a3a3a3' }} stroke="#e3e3e3" strokeWidth={3} />
        <CartesianGrid stroke="#d5d5d5" strokeDasharray="5 5" />
        <Line type="monotone" dataKey={data_keys.key_mean} stroke="#000000" dot={{ r: 1 }} yAxisId={0} strokeWidth={2} />
        <Area type='monotone' dataKey={data_keys.key_lower} stackId="1" stroke='#8884d8' fill='#FFFFFF' />
        <Area type='monotone' dataKey={data_keys.key_delta} stackId="1" stroke='#82ca9d' fill='#82ca9d' />
        <Line type="monotone" dataKey="actualDeath_daily" stroke="#FF0000" dot={{ r: 1 }} strokeDasharray="2 2" yAxisId={0} strokeWidth={2} />
        <Line type="monotone" dataKey="actualDeath_moving_avg" stroke="#FF0000" dot={{ r: 1 }} yAxisId={0} strokeWidth={3} />
        {state.showall && <Line type="monotone" dataKey={data_keys.key_mean_cumulative} dot={{ r: 1 }} stroke="#000000" yAxisId={0} strokeWidth={1} />}
        {state.showall && <Line type="monotone" dataKey="actualDeath_total" dot={{ r: 1 }} stroke="#ff0000" yAxisId={0} strokeWidth={2} />}
        {state.showall && <Area type='monotone' dataKey={data_keys.key_lower_cumulative} stackId="2" stroke='#8884d8' fill='#FFFFFF' />}
        {state.showall && <Area type='monotone' dataKey={data_keys.key_delta_cumulative} stackId="2" stroke='#82ca9d' fill='#82ca9d' />}
        <Tooltip content={props.tooltip} />
        <Legend verticalAlign="top" payload={[
          { value: 'Actual Death', type: 'line', color: '#ff0000' },
          { value: 'Projection', type: 'line', color: '#000000' },
        ]} />
      </ComposedChart>
    </ResponsiveContainer>
    <Typography variant="body2">
      Source: The Institute for Health Metrics and Evaluation
                </Typography>
  </>
}

Example #29

Source File: Chart.jsx From Corona-tracker with MIT License

5 votes

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