recharts#ReferenceLine TypeScript Examples

TotalChart = ({ summary }: { summary: any }) => {
  const theme = useTheme();
  return (
    <Chart>
      <div className="head">Daily cases</div>
      <div className="chart-wrap">
        <ResponsiveContainer>
          <LineChart
            data={summary}
            margin={{ left: -30, right: 10, bottom: 20 }}
          >
            <XAxis
              dataKey="date"
              label={{
                fill: theme.navy,
                fontSize: 12,
                value: "Days since first case detected",
                position: "bottom",
              }}
              tickFormatter={(tick) =>
                summary.findIndex((x: any) => x.date === tick)
              }
            />
            <YAxis />
            <Line
              type="monotone"
              dataKey="recovered"
              stroke="#aacd6e"
              strokeWidth={4}
              dot={false}
            />

            <Line
              type="monotone"
              dataKey="combined"
              stroke="#ffc906"
              strokeWidth={4}
              dot={false}
            />

            <ReferenceLine x="2020-03-25T00:00:00.000Z" stroke="#025064" />
          </LineChart>
        </ResponsiveContainer>

        <ChartLegend
          items={[
            { title: "New", color: theme.yellow },
            { title: "Recovered", color: theme.green },
            // { title: "Lv4 lockdown", color: theme.navy },
          ]}
        />
      </div>
    </Chart>
  );
}

TotalChart = ({ summary }: { summary: any }) => {
  const theme = useTheme();
  return (
    <Chart>
      <div className="head">Total cases</div>
      <div className="chart-wrap">
        <ResponsiveContainer>
          <LineChart
            data={summary}
            margin={{ left: -30, right: 10, bottom: 20 }}
          >
            <XAxis
              dataKey="date"
              label={{
                fill: theme.navy,
                fontSize: 12,
                value: "Days since first case detected",
                position: "bottom",
              }}
              tickFormatter={(tick) =>
                summary.findIndex((x: any) => x.date === tick)
              }
            />
            <YAxis />
            <Line
              type="monotone"
              dataKey="recoveredTotal"
              stroke={theme.green}
              strokeWidth={4}
              dot={false}
            />

            <Line
              type="monotone"
              dataKey="combinedTotal"
              stroke={theme.teal}
              strokeWidth={4}
              dot={false}
            />

            {/* <Line
              type="monotone"
              dataKey="deathsTotal"
              stroke="red"
              strokeWidth={2}
              dot={false}
            /> */}

            <ReferenceLine x="2020-03-25T00:00:00.000Z" stroke="#025064" />
          </LineChart>
        </ResponsiveContainer>

        <ChartLegend
          items={[
            { title: "Total", color: theme.teal },
            { title: "Recovered", color: theme.green },
            // { title: "Lv4 lockdown", color: theme.navy },
          ]}
        />
      </div>
    </Chart>
  );
}

ClaimGraph: FC = () => {
  const rewardStreams = useRewardStreams()

  const chart = useMemo<Chart>(() => {
    if (!rewardStreams) return { maxY: 0, groups: [] }

    // Filter for selected types
    const filtered = rewardStreams.chartData

    // Group into ranges
    const ranges = filtered
      .map(({ t }) => t)
      .reduce<[number, number][]>((prev, x, idx) => {
        if (idx === 0) return [[x, x]]

        const last = prev[prev.length - 1]

        // More than 2 months? Too much of a gap, make a new group
        // Otherwise the chart is hard to read
        // TODO needs more logic here... if I didn't claim for more than that
        //  time since I started earning, it won't show correctly
        // if (x - last[1] > 5184000) {
        //   return [...prev, [x, x]];
        // }

        return [...prev.slice(0, -1), [last[0], x]]
      }, [])

    // Find the max Y value to use a common scale
    const maxY = filtered.reduce(
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      (prev, { t, ...datum }) => Math.max(prev, ...(Object.values(datum) as number[])),
      0,
    )

    return {
      maxY,
      groups: ranges
        .map(range => {
          const data = filtered.filter(datum => datum.t >= range[0] && datum.t <= range[1])
          const types = Array.from(
            new Set(
              data.reduce<StreamType[]>(
                (prev, datum) => [
                  ...prev,
                  ...Object.entries(datum)
                    .filter(([k, v]) => k !== 't' && v)
                    .map(([k]) => k as unknown as StreamType),
                ],
                [],
              ),
            ),
          )
          return {
            range,
            data,
            types,
          }
        })
        .filter(group => group.data.length > 1),
    }
  }, [rewardStreams])

  if (!rewardStreams) return null

  return (
    <ChartContainer key={chart.groups.length}>
      {chart.groups.map(({ data, types, range }) => (
        <ResponsiveContainer maxHeight={200} aspect={3} key={range[0]}>
          <AreaChart data={data} margin={{ top: 20, left: 0, right: 0, bottom: 0 }}>
            <defs>
              {Object.keys(dataTypes).map(streamType => (
                <linearGradient id={`type-${streamType}`} key={streamType} x1="0" y1="0" x2="0" y2="1">
                  <stop offset="5%" stopColor={rewardsColorMapping[streamType as unknown as StreamType].fill1} />
                  <stop offset="95%" stopColor={rewardsColorMapping[streamType as unknown as StreamType].fill2} />
                </linearGradient>
              ))}
            </defs>
            <Tooltip
              cursor
              labelFormatter={tooltipFormatter}
              formatter={toK as never}
              separator=" "
              contentStyle={{
                fontSize: '14px',
                padding: '8px',
                background: 'rgba(255, 255, 255, 0.8)',
                textAlign: 'right',
                border: 'none',
                borderRadius: '4px',
                color: Color.black,
              }}
              wrapperStyle={{
                top: 0,
                left: 0,
              }}
            />
            <XAxis
              scale="time"
              interval="preserveStartEnd"
              domain={[range[0], 'auto']}
              type="number"
              dataKey="t"
              tickFormatter={xAxisFormatter}
              stroke={Color.greyTransparent}
              padding={{ left: 40, right: 80 }}
            />
            <YAxis
              type="number"
              domain={[0, chart.maxY]}
              orientation="left"
              tickFormatter={toK}
              axisLine={false}
              interval={100}
              // interval="preserveEnd"
              tick={false}
            />
            <ReferenceLine x={rewardStreams?.currentTime} stroke={Color.greyTransparent}>
              <Label position="insideTopRight" value="Unclaimed" fontSize={14} dx={6} dy={-20} />
            </ReferenceLine>
            {rewardStreams?.nextUnlock && (
              <ReferenceLine x={rewardStreams.nextUnlock} stroke={Color.greyTransparent}>
                <Label position="insideTopLeft" value="Next unlock" fontSize={14} dy={-20} dx={-6} />
              </ReferenceLine>
            )}
            {rewardStreams && (
              <ReferenceLine x={rewardStreams.previewStream.start} stroke={Color.greyTransparent}>
                <Label position="insideTopLeft" value="New unlock" fontSize={14} />
              </ReferenceLine>
            )}
            {types.flatMap(streamType =>
              (dataTypes[streamType].subTypes ?? [streamType]).map(subType => (
                <Area
                  key={subType}
                  dataKey={subType}
                  name={dataTypes[subType].label}
                  dot={false}
                  strokeWidth={0}
                  stroke={rewardsColorMapping[subType].point}
                  stackId={1}
                  fill={`url(#type-${subType})`}
                  fillOpacity={1}
                />
              )),
            )}
          </AreaChart>
        </ResponsiveContainer>
      ))}
    </ChartContainer>
  )
}