Renamed methods. Initial work on realtime dashboard.

components/metrics/RealtimeChart.js

@@ -0,0 +1,80 @@
+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}
+    />
+  );
+}