recharts#Label TypeScript Examples

Graph = ({ data, ylabel, xlabel }: GraphProps) => {
  const renderColorfulLegendText = (value: string, entry: any) => {
    const { color } = entry;

    return <span style={{ color: '#f9efe2' }}>{value}</span>;
  };
  return (
    <div className="Graph">
      <ResponsiveContainer width={'100%'} height={220}>
        <LineChart
          // width={200}
          onClick={() => {}}
          // height={150}
          data={data}
          margin={{ top: 15, right: 20, left: 0, bottom: 15 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="name">
            <Label
              value={xlabel}
              offset={-15}
              position="insideBottom"
              fill="#f9efe2"
            />
          </XAxis>
          <YAxis
            label={{
              value: ylabel,
              angle: -90,
              position: 'insideLeft',
              fill: '#f9efe2',
              color: 'f9efe2',
            }}
          ></YAxis>
          <Tooltip labelStyle={{ color: '#323D34' }} />
          {/* <Legend
            verticalAlign="top"
            height={36}
            formatter={renderColorfulLegendText}
          /> */}
          <Line
            type="monotone"
            dataKey="team0"
            name="Team 0"
            dot={false}
            strokeWidth={2}
            isAnimationActive={false}
            stroke={TEAM_A_COLOR_STR}
          />
          <Line
            type="monotone"
            dataKey="team1"
            name="Team 1"
            dot={false}
            strokeWidth={2}
            isAnimationActive={false}
            stroke={TEAM_B_COLOR_STR}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

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