openreplay/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/CustomMetricOverviewChart/CustomMetricOverviewChart.tsx

import React from 'react';
import {
  AreaChart,
  ResponsiveContainer,
  XAxis,
  YAxis,
  Area,
  Tooltip,
} from 'recharts';
import { numberWithCommas } from 'App/utils';
import { Styles } from '../../common';
import CountBadge from '../../common/CountBadge';

interface Props {
  data: any;
}

function CustomMetricOverviewChart(props: Props) {
  const { data } = props;
  const gradientDef = Styles.gradientDef();

  return (
    <div className="relative -mx-4">
      <div className="absolute flex items-start flex-col justify-start inset-0 p-3">
        <div className="mb-2 flex items-center" />
        <div className="flex items-center">
          <CountBadge
            // title={subtext}
            count={countView(Math.round(data.value), data.unit)}
            change={data.progress || 0}
            unit={data.unit}
          />
        </div>
      </div>
      <ResponsiveContainer
        height={240}
        width="100%"
        className="rounded-lg overflow-hidden"
      >
        <AreaChart
          data={data.chart}
          margin={{
            top: 50,
            right: 0,
            left: 0,
            bottom: 0,
          }}
        >
          {gradientDef}
          <Tooltip {...Styles.tooltip} />
          <XAxis hide {...Styles.xaxis} interval={4} dataKey="time" />
          <YAxis hide interval={0} />
          <Area
            name=""
            // unit={unit && ' ' + unit}
            type="monotone"
            dataKey="value"
            stroke={Styles.strokeColor}
            fillOpacity={1}
            strokeWidth={2}
            strokeOpacity={0.8}
            fill="url(#colorCount)"
          />
        </AreaChart>
      </ResponsiveContainer>
    </div>
  );
}

export default CustomMetricOverviewChart;

const countView = (avg: any, unit: any) => {
  if (unit === 'mb') {
    if (!avg) return 0;
    const count = Math.trunc(avg / 1024 / 1024);
    return numberWithCommas(count);
  }
  if (unit === 'min') {
    if (!avg) return 0;
    const count = Math.trunc(avg);
    return numberWithCommas(count > 1000 ? `${count}k` : count);
  }
  return avg ? numberWithCommas(avg) : 0;
};