umami/components/metrics/RealtimeChart.js

import React from 'react';
import { useIntl } from 'react-intl';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';

export default function RealtimeChart({ websiteId, data, unit, records, className, loading }) {
  const intl = useIntl();
  const [theme] = useTheme();
  const primaryColor = tinycolor(THEME_COLORS[theme].primary);
  const colors = {
    views: {
      background: primaryColor.setAlpha(0.4).toRgbString(),
      border: primaryColor.setAlpha(0.5).toRgbString(),
    },
    visitors: {
      background: primaryColor.setAlpha(0.6).toRgbString(),
      border: primaryColor.setAlpha(0.7).toRgbString(),
    },
  };

  const handleUpdate = chart => {
    const {
      data: { datasets },
    } = chart;

    datasets[0].data = data.uniques;
    datasets[0].label = intl.formatMessage({
      id: 'metrics.unique-visitors',
      defaultMessage: 'Unique visitors',
    });
    datasets[1].data = data.pageviews;
    datasets[1].label = intl.formatMessage({
      id: 'metrics.page-views',
      defaultMessage: 'Page views',
    });

    chart.update();
  };

  if (!data) {
    return null;
  }

  return (
    <BarChart
      className={className}
      chartId={`realtime-${websiteId}`}
      datasets={[
        {
          label: intl.formatMessage({
            id: 'metrics.unique-visitors',
            defaultMessage: 'Unique visitors',
          }),
          data: data.uniques,
          lineTension: 0,
          backgroundColor: colors.visitors.background,
          borderColor: colors.visitors.border,
          borderWidth: 1,
        },
        {
          label: intl.formatMessage({
            id: 'metrics.page-views',
            defaultMessage: 'Page views',
          }),
          data: data.pageviews,
          lineTension: 0,
          backgroundColor: colors.views.background,
          borderColor: colors.views.border,
          borderWidth: 1,
        },
      ]}
      unit={unit}
      records={records}
      onUpdate={handleUpdate}
      loading={loading}
    />
  );
}