recharts#ResponsiveContainer TypeScript Examples

LineChart: React.FC<LineChartProps> = (props) => {
  const { width, height, data, xAxis, line, showGrid, colors } = props;

  return (
    <ResponsiveContainer>
      <RechartsLineChart width={width} height={height}>
        {showGrid ? <CartesianGrid strokeDasharray='3 3' /> : null}
        <XAxis dataKey='category' type={xAxis.type} allowDuplicatedCategory={false} axisLine={false} tickLine={false} />
        <YAxis dataKey='value' axisLine={false} tickLine={false} />
        <Tooltip />
        <Legend verticalAlign='top' />
        {data.map(({ data, name }, index: number) => (
          <Line
            strokeWidth={line.strokeWidth}
            legendType='circle'
            type={line.type}
            stroke={colors[index % colors.length]}
            dataKey='value'
            data={data}
            name={name}
            key={name}
            activeDot={line.activeDot}
          />
        ))}
      </RechartsLineChart>
    </ResponsiveContainer>
  );
}

BuildTimeline = ({
  targets,
  height,
  width,
}: BuildTimelineProps) => {
  const theme = useTheme();
  if (!targets.length) return <p>No Targets</p>;

  const data = getTimelineData(targets);

  return (
    <ResponsiveContainer
      height={height}
      width={width}
      minHeight={EMPTY_HEIGHT + targets.length * 5}
    >
      <BarChart layout="vertical" data={data} maxBarSize={10} barGap={0}>
        <CartesianGrid strokeDasharray="2 2" />
        <XAxis type="number" domain={[0, 'dataMax']} />
        <YAxis type="category" dataKey="name" padding={{ top: 0, bottom: 0 }} />
        <Tooltip content={<TargetToolTip />} />
        <Legend />
        <Bar
          dataKey="buildTime"
          fill={theme.palette.grey[400]}
          minPointSize={1}
        />
        <Bar dataKey="compileTime" fill={theme.palette.primary.main} />
      </BarChart>
    </ResponsiveContainer>
  );
}

TrafficChart: React.FC<IProps> = props => {
  const { data } = props;
  return (
    <ResponsiveContainer>
      <ComposedChart
        barGap="2%"
        width={600}
        height={400}
        margin={{
          top: 10,
          right: 30,
          left: 20,
          bottom: 20
        }}
        data={data}
      >
        <CartesianGrid strokeDasharray="3 3" />

        <XAxis
          tickLine={false}
          dataKey="time"
          domain = {['auto', 'auto']}
          tickFormatter = {(unixTime) => moment(unixTime).format('HH:mm:ss Do')}
          type = 'number'
        />
        <YAxis label={{ value: 'Latency', position: 'insideLeft', angle: -90 }} unit={"ms"}/>
        <Tooltip labelFormatter={t => new Date(t).toLocaleString()} />
        <Legend />
        <Line type="monotone" dataKey="latency" stroke="#8884d8" />
      </ComposedChart>
    </ResponsiveContainer>
  );
}

Ages = ({ ages }: any) => {
  const theme = useTheme();
  return (
    <StyledAges>
      <div className="head">Cases by Age</div>
      <div className="chart-wrap">
        <ResponsiveContainer width="100%" height="100%">
          <BarChart
            data={ages}
            layout="vertical"
            margin={{
              top: 10,
              right: 0,
              left: 0,
              bottom: 10,
            }}
            // @ts-ignore
            isAnimationActive={false}
          >
            <XAxis type="number" hide />
            <YAxis type="category" dataKey="group" interval={0} width={90} />

            <Bar dataKey="active" fill={theme.teal} stackId="a" />
            <Bar dataKey="recovered" fill={theme.green} stackId="a" />
            <Bar dataKey="deaths" fill={theme.navy} stackId="a" />
          </BarChart>
        </ResponsiveContainer>
      </div>
      <ChartLegend
        items={[
          { title: "Active", color: theme.teal },
          { title: "Recovered", color: theme.green },
          { title: "Deaths", color: theme.navy },
        ]}
      />
    </StyledAges>
  );
}

BarChart: React.FC<BarChartProps> = (props) => {
  const { width, height, data, barSize, barCategoryGap, showGrid, showLegend, colors } = props;
  return (
    <ResponsiveContainer>
      <RechartsBarChart
        width={width}
        height={height}
        data={data}
        barSize={barSize}
        barCategoryGap={barCategoryGap}
        margin={{
          top: 5,
          right: 30,
          left: 10,
          bottom: 5,
        }}>
        {showGrid ? <CartesianGrid strokeDasharray='3 3' /> : null}
        <XAxis dataKey='name' axisLine={false} tickLine={false} />
        <YAxis axisLine={false} tickLine={false} />
        <Tooltip cursor={false} />
        {showLegend ? <Legend /> : null}
        {Object.keys(data[0]).map((key: string, index: number) => {
          return key !== 'name' ? <Bar dataKey={key} key={key} fill={colors[(index - 1) % colors.length]} /> : null;
        })}
      </RechartsBarChart>
    </ResponsiveContainer>
  );
}

Graph = ({context}: {context: Context}) => {
    const analyticsApi = useApi(analyticsApiRef);
    const dataPoints = analyticsApi.incidentsByDay(context);

    return (
        <div id="daily-incidents" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
            <ResponsiveContainer>
                <ScatterChart data={dataPoints}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="day" name="Day" />
                    <YAxis dataKey="total" name="Total" />
                    <Tooltip content={<FilterZeroTooltip />} />
                    <Scatter name="day" data={dataPoints} fill="#8884d8" />
                </ScatterChart>
            </ResponsiveContainer>
        </div>
    );
}

ScatterChart: React.FC<ScatterChartProps> = (props: ScatterChartProps) => {
  const { data, width, height, showGrid, strokeColor, fillColor, scatterName } = props;

  return (
    <ResponsiveContainer>
      <RechartsScatterChart width={width} height={height}>
        {showGrid ? <CartesianGrid strokeDasharray='3 3' /> : null}
        <XAxis type='number' dataKey='x' name={data?.xname} tickLine={false} />
        <YAxis type='number' dataKey='y' name={data?.yname} tickLine={false} />
        <Tooltip />
        <Legend
          verticalAlign='top'
          content={<CustomizedLegend strokeColor={strokeColor} fillColor={fillColor} scatterName={scatterName} />}
        />
        <Scatter
          name={scatterName}
          data={data.lineChartData}
          shape={<CustomizedDot strokeColor={strokeColor} fillColor={fillColor} r={6} cx={10} cy={10} />}
        />
      </RechartsScatterChart>
    </ResponsiveContainer>
  );
}

function Chart({ displayData, plotNode, valueNode, showMin }: {
  displayData: Point[],
  plotNode: NumNode,
  valueNode: NumNode,
  showMin: boolean
}) {
  const plotBaseUnit = KeyMap.unit(plotNode.info?.key)
  const valueUnit = KeyMap.unit(valueNode.info?.key)
  return <ResponsiveContainer width="100%" height={600}>
    <ComposedChart data={displayData}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="x" scale="linear" unit={plotBaseUnit} domain={["auto", "auto"]} tick={{ fill: 'white' }} type="number" tickFormatter={n => n > 10000 ? n.toFixed() : n.toFixed(1)} />
      <YAxis name="DMG" domain={["auto", "auto"]} unit={valueUnit} allowDecimals={false} tick={{ fill: 'white' }} type="number" />
      <ZAxis dataKey="y" range={[3, 25]} />
      <Legend />
      <Scatter name="Optimization Target" dataKey="y" fill="#8884d8" line lineType="fitting" isAnimationActive={false} />
      {showMin && <Line name="Minimum Stat Requirement Threshold" dataKey="min" stroke="#ff7300" type="stepBefore" connectNulls strokeWidth={2} isAnimationActive={false} />}
    </ComposedChart>
  </ResponsiveContainer>
}

export default function DailyStatsChart(props: Props) {
  const data = makeChartData(props.data, props.numDays);
  const theme = useTheme<Theme>();
  return (
    <ResponsiveContainer>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis
          dataKey="date"
          minTickGap={10}
          stroke={theme.palette.text.secondary}
        />
        <YAxis stroke={theme.palette.text.secondary} />
        <Tooltip />
        <Legend />
        <Line
          type="monotone"
          dataKey="succeeded"
          stroke={theme.palette.success.main}
        />
        <Line
          type="monotone"
          dataKey="failed"
          stroke={theme.palette.error.main}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

ChartSpans: React.FunctionComponent<IChartSpansProps> = ({ spans }: IChartSpansProps) => {
  const traceStartTime = spans[0].startTime;
  const data: IData[] = [];

  for (const span of spans) {
    const offset = span.startTime - traceStartTime;
    data.push({
      time: span.duration / 1000,
      offset: offset / 1000,
    });
  }

  return (
    <IonRow style={{ minHeight: `50px`, width: '100%' }}>
      <IonCol style={{ padding: '0px' }}>
        <ResponsiveContainer>
          <ComposedChart layout="vertical" data={data} barSize={2}>
            <XAxis type="number" hide={true} domain={['dataMin', 'dataMax']} />
            <Bar stackId="span" dataKey="offset" fill="#326ce5" fillOpacity={0} isAnimationActive={false} />
            <Bar stackId="span" dataKey="time" fill="#326ce5" isAnimationActive={false} />
          </ComposedChart>
        </ResponsiveContainer>
      </IonCol>
    </IonRow>
  );
}

export function GeneMapAxis() {
  const genomeSize = useRecoilValue(genomeSizeAtom)
  const geneMap = useRecoilValue(geneMapAtom)
  const viewedGene = useRecoilValue(viewedGeneAtom)

  const { ticks, domain } = useMemo(() => {
    const length = getAxisLength(genomeSize, viewedGene, geneMap)
    const tickSize = getTickSize(length)
    const domain: [number, number] = [0, length]
    const ticks = range(0, length, tickSize)
    return { ticks, domain }
  }, [geneMap, genomeSize, viewedGene])

  return (
    <ResponsiveContainer width="100%" height={30}>
      <ComposedChart margin={MARGIN}>
        <XAxis dataKey={'ticks'} type="number" ticks={ticks} domain={domain} axisLine={false} />
      </ComposedChart>
    </ResponsiveContainer>
  )
}

export default function Line<
  D extends { x: number; y: number; dateWithPrecision: DateWithPrecision },
>({ data, xFormat, yFormat, tooltipLabelFormatter, tooltipValueFormatter }: LineProps<D>) {
  const internTooltipLabelFormatter = useRawTooltipLabelFormatter(tooltipLabelFormatter);
  const internTooltipValueFormatter = useRawTooltipValueFormatter(tooltipValueFormatter);

  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart data={data}>
        <RLine
          connectNulls
          type="monotone"
          dataKey="y"
          fill="var(--primary)"
          stroke="var(--primary)"
          strokeWidth={2}
          dot={false}
        />
        <XAxis
          name="X"
          domain={['dataMin', 'dataMax']}
          dataKey="x"
          tickFormatter={xFormat}
          style={{ fontWeight: 'bold' }}
        />
        <YAxis domain={['dataMin', 'dataMax']} tickFormatter={yFormat} />
        <Tooltip
          wrapperStyle={{ zIndex: 10 }}
          contentStyle={{ backgroundColor: 'var(--background)' }}
          labelStyle={{ color: 'var(--text-on-light)' }}
          labelFormatter={internTooltipLabelFormatter}
          formatter={internTooltipValueFormatter}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

Graph = ({context}: {context: Context}) => {
    const analyticsApi = useApi(analyticsApiRef);
    const dataPoints = analyticsApi.incidentsByWeekAndSeverity(context);

    return (
        <div id="weekly-incidents-severity" style={{ width: '100%', height: 300, paddingTop: '1.2rem', paddingRight: '1.2rem' }}>
            <ResponsiveContainer>
                <ComposedChart data={dataPoints}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="week" />
                    <YAxis />
                    <Bar dataKey="p1" fill="#bf2600" name="P1 - Critical" stackId="a" barSize={30} />
                    <Bar dataKey="p2" fill="#ff7452" name="P2 - High" stackId="a" barSize={30} />
                    <Bar dataKey="p3" fill="#ffab00" name="P3 - Moderate" stackId="a" barSize={30} />
                    <Bar dataKey="p4" fill="#36b37e" name="P4 - Low" stackId="a" barSize={30} />
                    <Bar dataKey="p5" fill="#00857A" name="P5 - Informational" stackId="a" barSize={30} />
                    <Tooltip content={<FilterZeroTooltip />} />
                    <Legend />
                </ComposedChart>
            </ResponsiveContainer>
        </div>
    );
}

export default function Bar({
  data,
  xFormat,
  yFormat,
  tooltipLabelFormatter,
  tooltipValueFormatter,
  customXTick,
}: BarProps) {
  const realFormatter = useMemo(() => {
    if (tooltipValueFormatter) {
      return (...args: any[]) => [tooltipValueFormatter(...args), null];
    }
    return undefined;
  }, [tooltipValueFormatter]);

  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart data={data}>
        <XAxis
          dataKey="x"
          tickFormatter={xFormat}
          tick={customXTick}
          style={{ fontWeight: 'bold' }}
        />
        <YAxis dataKey="y" tickFormatter={yFormat} width={40} />
        <RBar dataKey="y" fill="var(--primary)" />
        <Tooltip
          wrapperStyle={{ zIndex: 10 }}
          contentStyle={{ backgroundColor: 'var(--background)' }}
          labelStyle={{ color: 'var(--text-on-light)' }}
          labelFormatter={tooltipLabelFormatter}
          formatter={realFormatter}
        />
      </BarChart>
    </ResponsiveContainer>
  );
}

ClaimGraph: FC = () => {
  const rewardsEarned = useRewardsEarned()

  const data = useMemo<DataType[]>(() => {
    return [
      {
        mta: 0,
        ordering: 0,
      },
      {
        mta: rewardsEarned?.rewards ?? 0,
        ordering: 1,
      },
    ]
  }, [rewardsEarned])

  return (
    <Container>
      <ResponsiveContainer width="100%" aspect={1.75}>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={Color.blue} stopOpacity={0.5} />
              <stop offset="95%" stopColor={Color.blue} stopOpacity={0} />
            </linearGradient>
          </defs>
          <XAxis
            dataKey="ordering"
            tickFormatter={ordering => (ordering === 0 ? 'Last claim' : 'Now')}
            axisLine={false}
            padding={{ left: 16 }}
            tickLine={false}
          />
          <YAxis tickCount={2} tickFormatter={m => `${m}`} axisLine={false} padding={{ bottom: 16 }} tickLine={false} width={32} />
          <Tooltip
            cursor
            label=""
            labelFormatter={w => (w === 0 ? 'Last claim' : 'Available to claim')}
            formatter={mta => `${(mta as number).toFixed(2)} MTA`}
            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,
            }}
          />
          <Area type="monotone" name={'Earned: '} dataKey="mta" stroke={Color.blue} strokeWidth={2} fill="url(#area)" />
        </AreaChart>
      </ResponsiveContainer>
    </Container>
  )
}

OrderChart: FC<{ orders?: Order[] }> = ({ orders }) => {
    const translate = useTranslate();
    if (!orders) return null;

    return (
        <Card>
            <CardHeader title={translate('pos.dashboard.month_history')} />
            <CardContent>
                <div style={{ width: '100%', height: 300 }}>
                    <ResponsiveContainer>
                        <AreaChart data={getRevenuePerDay(orders)}>
                            <defs>
                                <linearGradient
                                    id="colorUv"
                                    x1="0"
                                    y1="0"
                                    x2="0"
                                    y2="1"
                                >
                                    <stop
                                        offset="5%"
                                        stopColor="#8884d8"
                                        stopOpacity={0.8}
                                    />
                                    <stop
                                        offset="95%"
                                        stopColor="#8884d8"
                                        stopOpacity={0}
                                    />
                                </linearGradient>
                            </defs>
                            <XAxis
                                dataKey="date"
                                name="Date"
                                type="number"
                                scale="time"
                                domain={[
                                    addDays(aMonthAgo, 1).getTime(),
                                    new Date().getTime(),
                                ]}
                                tickFormatter={dateFormatter}
                            />
                            <YAxis dataKey="total" name="Revenue" unit="€" />
                            <CartesianGrid strokeDasharray="3 3" />
                            <Tooltip
                                cursor={{ strokeDasharray: '3 3' }}
                                formatter={(value): string =>
                                    new Intl.NumberFormat(undefined, {
                                        style: 'currency',
                                        currency: 'USD',
                                    }).format(value as any)
                                }
                                labelFormatter={(label: any): string =>
                                    dateFormatter(label)
                                }
                            />
                            <Area
                                type="monotone"
                                dataKey="total"
                                stroke="#8884d8"
                                strokeWidth={2}
                                fill="url(#colorUv)"
                            />
                        </AreaChart>
                    </ResponsiveContainer>
                </div>
            </CardContent>
        </Card>
    );
}

ChartDetailsSinglestat: React.FunctionComponent<IChartDetailsSinglestatProps> = ({
  unit,
  results,
}: IChartDetailsSinglestatProps) => {
  const context = useContext<IContext>(AppContext);

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const series: any = [];

  for (let i = 0; i < results.length; i++) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const data: any = [];
    for (let j = 0; j < results[i].values.length; j++) {
      data.push({
        time: results[i].values[j][0],
        value: parseFloat(results[i].values[j][1]),
      });
    }
    series.push({ name: results[i].label, data: data });
  }

  return (
    <IonRow
      style={{
        fontSize: '20px',
        fontWeight: 500,
        color: isDarkMode(context.settings.theme)
          ? isPlatform('ios')
            ? '#ffffff'
            : '#dbdbdb'
          : isPlatform('ios')
          ? '#000000'
          : '#262626',
        height: '100px',
        width: '100%',
      }}
    >
      {series.length > 0 ? (
        <div
          style={{
            margin: 'auto',
            left: 0,
            right: 0,
            top: 40,
            position: 'absolute',
            display: 'flex',
            justifyContent: 'center',
            zIndex: 1000,
          }}
        >
          {series[0].data[series[0].data.length - 1].value.toFixed(2)} {unit ? unit : ''}
        </div>
      ) : null}
      <IonCol style={{ padding: '0px' }}>
        <ResponsiveContainer>
          <AreaChart>
            {series.map((serie, index) => (
              <Area
                key={index}
                dataKey="value"
                // NOTE: https://github.com/recharts/recharts/issues/2487
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-ignore
                data={serie.data}
                name={serie.name}
                stroke="#326ce5"
                fill="#326ce5"
                fillOpacity={0.2}
              />
            ))}
          </AreaChart>
        </ResponsiveContainer>
      </IonCol>
    </IonRow>
  );
}

LineChart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
  const { theme } = useTheme()
  if (!data || data.length === 0) {
    return <LineChartLoader />
  }
  return (
    <ResponsiveContainer>
      <AreaChart
        data={data}
        width={300}
        height={308}
        margin={{
          top: 5,
          right: 15,
          left: 0,
          bottom: 5,
        }}
        onMouseLeave={() => {
          if (setHoverDate) setHoverDate(undefined)
          if (setHoverValue) setHoverValue(undefined)
        }}
      >
        <XAxis
          dataKey="time"
          axisLine={false}
          tickLine={false}
          tickFormatter={(time) => format(time, 'dd')}
          minTickGap={10}
        />
        <YAxis
          dataKey="value"
          tickCount={6}
          scale="linear"
          axisLine={false}
          tickLine={false}
          fontSize="12px"
          tickFormatter={(val) => `$${formatAmount(val)}`}
          orientation="right"
          tick={{ dx: 10, fill: theme.colors.textSubtle }}
        />
        <Tooltip
          cursor={{ stroke: theme.colors.primary }}
          contentStyle={{ display: 'none' }}
          formatter={(tooltipValue, name, props) => (
            <HoverUpdater payload={props.payload} setHoverValue={setHoverValue} setHoverDate={setHoverDate} />
          )}
        />
        <Area
          dataKey="value"
          type="monotone"
          stroke={theme.colors.primary}
          fill={theme.colors.lightBlue}
          strokeWidth={2}
        />
      </AreaChart>
    </ResponsiveContainer>
  )
}

StakeGraph: FC = () => {
  const { data: tokenData } = useStakedTokenQuery()
  const weightedTimestamp = tokenData?.stakedToken?.accounts?.[0]?.balance?.weightedTimestamp

  const data = generateData(weightedTimestamp)
  const ticks = removeDuplicatesBy(x => x.multiplier, data).map(v => v.week)

  return (
    <Container>
      <ResponsiveContainer width="100%" aspect={1.75}>
        <AreaChart data={data}>
          <defs>
            <linearGradient id="area" x1="0" y1="0" x2="0" y2="1">
              <stop offset="5%" stopColor={Color.blue} stopOpacity={0.5} />
              <stop offset="95%" stopColor={Color.blue} stopOpacity={0} />
            </linearGradient>
          </defs>
          <XAxis dataKey="week" tickFormatter={w => `${w / WEEK}`} axisLine={false} padding={{ left: 16 }} tickLine={false} ticks={ticks} />
          <YAxis
            domain={['dataMin', 'dataMax']}
            tickCount={4}
            tickFormatter={m => `${m}x`}
            axisLine={false}
            padding={{ bottom: 16 }}
            tickLine={false}
            width={32}
          />
          <Tooltip
            cursor
            labelFormatter={week => `+${(week as number) / WEEK} weeks`}
            formatter={multiplier => multiplier}
            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,
            }}
          />
          <Area type="stepAfter" name={`multiplier: `} dataKey="multiplier" stroke={Color.blue} strokeWidth={2} fill="url(#area)" />
        </AreaChart>
      </ResponsiveContainer>
    </Container>
  )
}

ChartTraces: React.FunctionComponent<IChartTracesProps> = ({ traces }: IChartTracesProps) => {
  const context = useContext<IContext>(AppContext);

  const data: IData[] = [];

  for (const trace of traces) {
    if (trace.spans.length > 0) {
      data.push({
        name: traceTitle(trace),
        time: Math.floor(trace.spans[0].startTime / 1000),
        duration: getDuration(trace.spans),
        spans: trace.spans.length,
      });
    }
  }

  const formatTime = (time: number): string => {
    const d = new Date(time);
    return `${('0' + d.getHours()).slice(-2)}:${('0' + d.getMinutes()).slice(-2)}:${('0' + d.getSeconds()).slice(
      -2,
    )}.${('0' + d.getMilliseconds()).slice(-3)}`;
  };

  return (
    <IonRow style={{ height: '200px', width: '100%' }}>
      <IonCol style={{ padding: '0px' }}>
        <ResponsiveContainer>
          <ScatterChart>
            <XAxis
              dataKey="time"
              scale="time"
              type="number"
              name="Time"
              domain={['dataMin', 'dataMax']}
              tickFormatter={formatTime}
            />
            <YAxis type="number" name="Duration" dataKey="duration" unit="ms" />
            <ZAxis type="number" name="Spans" dataKey="spans" range={[100, 1000]} />
            {!isPlatform('hybrid') ? (
              <Tooltip
                cursor={{ stroke: '#949494', strokeWidth: 2 }}
                contentStyle={
                  isDarkMode(context.settings.theme)
                    ? isPlatform('ios')
                      ? { backgroundColor: '1c1c1c', borderColor: '#949494' }
                      : { backgroundColor: '#1A1B1E', borderColor: '#949494' }
                    : { backgroundColor: '#ffffff', borderColor: '#949494' }
                }
                content={<CustomTooltipContent />}
                formatter={(value, name) => {
                  if (name === 'Name') {
                    return [value];
                  } else if (name === 'Time') {
                    return [formatTime(value), 'Time'];
                  } else {
                    return [value, name];
                  }
                }}
              />
            ) : null}
            <Scatter data={data} stroke="#326ce5" fill="#326ce5" shape="circle" />
          </ScatterChart>
        </ResponsiveContainer>
      </IonCol>
    </IonRow>
  );
}

PoolComposition: FC = () => {
  const { masset, fasset } = useSelectedFeederPoolState()

  const data = useMemo(
    () => [
      {
        name: masset.token.symbol,
        value: masset.totalVaultInMasset.simple,
        fill: assetColorMapping[masset.token.symbol] ?? '#444',
      },
      {
        name: fasset.token.symbol,
        value: fasset.totalVaultInMasset.simple,
        fill: assetColorMapping[fasset.token.symbol] ?? '#888',
      },
    ],
    [masset, fasset],
  )

  return (
    <RechartsContainer>
      <ResponsiveContainer aspect={2}>
        <PieChart margin={MARGIN}>
          <Pie dataKey="value" isAnimationActive={false} data={data} fill="fill" />
          <Legend align="left" layout="vertical" verticalAlign="middle" />
          <Tooltip
            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,
            }}
          />
        </PieChart>
      </ResponsiveContainer>
    </RechartsContainer>
  )
}

Chart: React.FunctionComponent<IChartProps> = ({ aggregations }: IChartProps) => {
  const context = useContext<IContext>(AppContext);

  const formatTime = (time: number): string => {
    const d = new Date(time);
    return `${('0' + (d.getMonth() + 1)).slice(-2)}/${('0' + d.getDate()).slice(-2)} ${('0' + d.getHours()).slice(
      -2,
    )}:${('0' + d.getMinutes()).slice(-2)}`;
  };

  return (
    <IonRow style={{ height: '200px', width: '100%' }}>
      <IonCol style={{ padding: '0px' }}>
        <ResponsiveContainer>
          <BarChart data={aggregations?.logcount?.buckets}>
            <XAxis
              dataKey="key"
              scale="time"
              type="number"
              domain={['dataMin', 'dataMax']}
              tickFormatter={formatTime}
            />
            {!isPlatform('hybrid') ? (
              <Tooltip
                cursor={{ stroke: '#949494', strokeWidth: 2 }}
                contentStyle={
                  isDarkMode(context.settings.theme)
                    ? isPlatform('ios')
                      ? { backgroundColor: '1c1c1c', borderColor: '#949494' }
                      : { backgroundColor: '#1A1B1E', borderColor: '#949494' }
                    : { backgroundColor: '#ffffff', borderColor: '#949494' }
                }
                formatter={(value) => {
                  return [value, 'Count'];
                }}
                labelFormatter={formatTime}
              />
            ) : null}
            <Bar dataKey="doc_count" stroke="#326ce5" fill="#326ce5" />
          </BarChart>
        </ResponsiveContainer>
      </IonCol>
    </IonRow>
  );
}

StatisticsChart: React.FC<Props> = ({
  data,
  granularity,
  dataToDisplay = ["success", "skip", "errors"],
  legendLabels = {},
}) => {
  const [state, dispatch] = useReducer(reducer, initialState)

  const handleClickOnLegend = (data: any) => {
    const clickedDataType = data["value"] as DataType
    dispatch({ type: clickedDataType })
  }

  return (
    <ResponsiveContainer width="100%" minHeight={225} minWidth={300}>
      <LineChart
        className={styles.chart}
        data={data.map(point => ({
          ...point,
          date: granularity == "hour" ? point.date.format("HH:mm") : point.date.format("DD MMM"),
        }))}
      >
        <XAxis dataKey="date" tick={<CustomizedXAxisTick />} stroke="#394e5a" />
        <YAxis tick={<CustomizedYAxisTick />} stroke="#394e5a" />
        <CartesianGrid strokeDasharray="3 3" stroke="#394e5a" />
        <Legend onClick={handleClickOnLegend} formatter={value => legendLabels[value] ?? value} />
        <Tooltip
          wrapperStyle={{
            backgroundColor: "#22313a",
            border: "1px solid #394e5a",
          }}
          itemStyle={{ color: "#9bbcd1" }}
          labelStyle={{ color: "#dcf3ff" }}
          formatter={value => new Intl.NumberFormat("en").format(value)}
        />
        {dataToDisplay.includes("total") && (
          <Line dataKey="total" stroke={"rgb(135, 138, 252)"} hide={state.hide_total_data} {...commonLineProps} />
        )}
        {dataToDisplay.includes("success") && (
          <Line dataKey="success" stroke={"#2cc56f"} hide={state.hide_success_data} {...commonLineProps} />
        )}
        {dataToDisplay.includes("skip") && (
          <Line dataKey="skip" stroke={"#ffc021"} hide={state.hide_skip_data} {...commonLineProps} />
        )}
        {dataToDisplay.includes("errors") && (
          <Line dataKey="errors" stroke={"#e53935"} hide={state.hide_errors_data} {...commonLineProps} />
        )}
      </LineChart>
    </ResponsiveContainer>
  )
}

ChartContainer = styled(ResponsiveContainer)`
  min-height: 25rem;
`

function QueueMetricsChart(props: Props) {
  const theme = useTheme();

  const data = toChartData(props.data);
  const keys = props.data.map((x) => x.metric.queue);
  return (
    <ResponsiveContainer height={260}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis
          minTickGap={10}
          dataKey="timestamp"
          domain={[props.startTime, props.endTime]}
          tickFormatter={(timestamp: number) =>
            new Date(timestamp * 1000).toLocaleTimeString()
          }
          type="number"
          scale="time"
          stroke={theme.palette.text.secondary}
        />
        <YAxis
          tickFormatter={props.yAxisTickFormatter}
          stroke={theme.palette.text.secondary}
        />
        <Tooltip
          labelFormatter={(timestamp: number) => {
            return new Date(timestamp * 1000).toLocaleTimeString();
          }}
        />
        <Legend />
        {keys.map((key, idx) => (
          <Line
            key={key}
            type="monotone"
            dataKey={key}
            stroke={lineColors[idx % lineColors.length]}
            dot={false}
          />
        ))}
      </LineChart>
    </ResponsiveContainer>
  );
}

public render() {
    const { stats, onRefresh, range } = this.props;
    const { strokeWidth } = this.state;
    return (
      <ResponsiveContainer width="100%" maxHeight={500} aspect={4.0 / 3.0}>
        <LineChart
          data={stats}
          margin={{
            top: 25,
            right: 30,
            left: 20,
            bottom: 100,
          }}
        >
          <CartesianGrid strokeDasharray="1 4" />
          <XAxis
            dataKey="timeStamp"
            tick={this.renderCustomAxisTick}
            interval={0}
            ticks={stats.map((s: any) => s.timeStamp)}
            type="number"
            domain={['dataMin', 'dataMax']}
          />
          <YAxis />
          <Tooltip
            itemStyle={{ textTransform: 'capitalize' }}
            labelFormatter={value =>
              range === 'day'
                ? moment(value).format('DD/MM/YYYY HH:mm:ss')
                : moment(value).format('DD/MM/YYYY')
            }
            labelStyle={{ fontWeight: 'bold', marginBottom: '10px' }}
          />
          <Legend
            verticalAlign="top"
            iconType="circle"
            formatter={(value, entry, index) => value.toUpperCase()}
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave}
          />
          <Line
            type="monotone"
            dataKey="all"
            connectNulls={true}
            stroke="#4F4F4F"
            activeDot={{ r: 8 }}
            strokeWidth={strokeWidth.all}
          />
          <Line
            type="monotone"
            dataKey="allowed"
            stroke="#71ADFE"
            connectNulls={true}
            activeDot={{ r: 8 }}
            strokeWidth={strokeWidth.allowed}
          />
          <Line
            type="monotone"
            connectNulls={true}
            dataKey="blocked"
            stroke="#EB5757"
            activeDot={{ r: 8 }}
            strokeWidth={strokeWidth.blocked}
          />
        </LineChart>
      </ResponsiveContainer>
    );
  }

Chart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
  const { theme } = useTheme()
  if (!data || data.length === 0) {
    return <BarChartLoader />
  }
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        margin={{
          top: 5,
          right: 15,
          left: 0,
          bottom: 5,
        }}
        onMouseLeave={() => {
          setHoverDate(undefined)
          setHoverValue(undefined)
        }}
      >
        <XAxis
          dataKey="time"
          axisLine={false}
          tickLine={false}
          tickFormatter={(time) => format(time, 'dd')}
          minTickGap={10}
        />
        <YAxis
          dataKey="value"
          tickCount={6}
          scale="linear"
          axisLine={false}
          tickLine={false}
          color={theme.colors.textSubtle}
          fontSize="12px"
          tickFormatter={(val) => `$${formatAmount(val)}`}
          orientation="right"
          tick={{ dx: 10, fill: theme.colors.textSubtle }}
        />
        <Tooltip
          cursor={{ fill: theme.colors.backgroundDisabled }}
          contentStyle={{ display: 'none' }}
          formatter={(tooltipValue, name, props) => (
            <HoverUpdater payload={props.payload} setHoverValue={setHoverValue} setHoverDate={setHoverDate} />
          )}
        />
        <Bar
          dataKey="value"
          fill={theme.colors.primary}
          shape={(props) => (
            <CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={theme.colors.primary} />
          )}
        />
      </BarChart>
    </ResponsiveContainer>
  )
}

Chart = ({ data, setHoverValue, setHoverDate }: LineChartProps) => {
  const { theme } = useTheme()
  if (!data || data.length === 0) {
    return <BarChartLoader />
  }
  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart
        data={data}
        margin={{
          top: 5,
          right: 15,
          left: 0,
          bottom: 5,
        }}
        onMouseLeave={() => {
          setHoverDate(undefined)
          setHoverValue(undefined)
        }}
      >
        <XAxis
          dataKey="time"
          axisLine={false}
          tickLine={false}
          tickFormatter={(time) => format(time, 'dd')}
          minTickGap={10}
        />
        <YAxis
          dataKey="value"
          tickCount={6}
          scale="linear"
          axisLine={false}
          tickLine={false}
          color={theme.colors.textSubtle}
          fontSize="12px"
          tickFormatter={(val) => `$${formatAmount(val)}`}
          orientation="right"
          tick={{ dx: 10, fill: theme.colors.textSubtle }}
        />
        <Tooltip
          cursor={{ fill: theme.colors.backgroundDisabled }}
          contentStyle={{ display: 'none' }}
          formatter={(tooltipValue, name, props) => (
            <HoverUpdater payload={props.payload} setHoverValue={setHoverValue} setHoverDate={setHoverDate} />
          )}
        />
        <Bar
          dataKey="value"
          fill={theme.colors.primary}
          shape={(props) => (
            <CustomBar height={props.height} width={props.width} x={props.x} y={props.y} fill={theme.colors.primary} />
          )}
        />
      </BarChart>
    </ResponsiveContainer>
  )
}

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