Updated color selection. Added loading to fetch hook.

components/metrics/PageviewsChart.js

@@ -1,10 +1,25 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import tinycolor from 'tinycolor2';
 import CheckVisible from 'components/helpers/CheckVisible';
 import BarChart from './BarChart';
+import useTheme from 'hooks/useTheme';
+import { THEME_COLORS } from 'lib/constants';
 
-export default function PageviewsChart({ websiteId, data, unit, records, className }) {
+export default function PageviewsChart({ 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 {
@@ -43,8 +58,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
               }),
               data: data.uniques,
               lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.4)',
-              borderColor: 'rgb(13, 102, 208, 0.4)',
+              backgroundColor: colors.visitors.background,
+              borderColor: colors.visitors.border,
               borderWidth: 1,
             },
             {
@@ -54,8 +69,8 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
               }),
               data: data.pageviews,
               lineTension: 0,
-              backgroundColor: 'rgb(38, 128, 235, 0.2)',
-              borderColor: 'rgb(13, 102, 208, 0.2)',
+              backgroundColor: colors.views.background,
+              borderColor: colors.views.border,
               borderWidth: 1,
             },
           ]}
@@ -63,6 +78,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
           records={records}
           animationDuration={visible ? 300 : 0}
           onUpdate={handleUpdate}
+          loading={loading}
         />
       )}
     </CheckVisible>