Updated color selection. Added loading to fetch hook.

components/layout/Header.module.css

@@ -19,12 +19,8 @@
   font-weight: 600;
 }
 
-.nav > * {
-  margin-left: 30px;
-}
-
-.nav > *:first-child {
-  margin: 0;
+.nav a + a {
+  margin-left: 40px;
 }
 
 .buttons {

components/metrics/BarChart.js

@@ -18,6 +18,7 @@ export default function BarChart({
   animationDuration = 300,
   className,
   stacked = false,
+  loading = false,
   onCreate = () => {},
   onUpdate = () => {},
 }) {
@@ -33,6 +34,7 @@ export default function BarChart({
   };
 
   function renderXLabel(label, index, values) {
+    if (loading) return '';
     const d = new Date(values[index].value);
     const w = canvas.current.width;
 

components/metrics/EventsChart.js

@@ -5,17 +5,7 @@ import { getDateArray, getDateLength } from 'lib/date';
 import useFetch from 'hooks/useFetch';
 import useDateRange from 'hooks/useDateRange';
 import useTimezone from 'hooks/useTimezone';
-
-const COLORS = [
-  '#2680eb',
-  '#9256d9',
-  '#44b556',
-  '#e68619',
-  '#e34850',
-  '#1b959a',
-  '#d83790',
-  '#85d044',
-];
+import { EVENT_COLORS } from 'lib/constants';
 
 export default function EventsChart({ websiteId, token }) {
   const [dateRange] = useDateRange(websiteId);
@@ -51,13 +41,13 @@ export default function EventsChart({ websiteId, token }) {
     });
 
     return Object.keys(map).map((key, index) => {
-      const color = tinycolor(COLORS[index]);
+      const color = tinycolor(EVENT_COLORS[index]);
       return {
         label: key,
         data: map[key],
         lineTension: 0,
-        backgroundColor: color.setAlpha(0.4).toRgbString(),
-        borderColor: color.setAlpha(0.5).toRgbString(),
+        backgroundColor: color.setAlpha(0.6).toRgbString(),
+        borderColor: color.setAlpha(0.7).toRgbString(),
         borderWidth: 1,
       };
     });

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>

components/metrics/WebsiteChart.js

@@ -23,7 +23,7 @@ export default function WebsiteChart({
   const { startDate, endDate, unit, value, modified } = dateRange;
   const [timezone] = useTimezone();
 
-  const { data } = useFetch(
+  const { data, loading } = useFetch(
     `/api/website/${websiteId}/pageviews`,
     {
       start_at: +startDate,
@@ -74,6 +74,7 @@ export default function WebsiteChart({
             data={{ pageviews, uniques }}
             unit={unit}
             records={getDateLength(startDate, endDate, unit)}
+            loading={loading}
           />
         </div>
       </div>

hooks/useFetch.js

@@ -7,6 +7,7 @@ export default function useFetch(url, params = {}, options = {}) {
   const dispatch = useDispatch();
   const [data, setData] = useState();
   const [error, setError] = useState();
+  const [loading, setLoadiing] = useState(false);
   const keys = Object.keys(params)
     .sort()
     .map(key => params[key]);
@@ -14,6 +15,7 @@ export default function useFetch(url, params = {}, options = {}) {
 
   async function loadData() {
     try {
+      setLoadiing(true);
       setError(null);
       const time = performance.now();
       const data = await get(url, params);
@@ -25,6 +27,8 @@ export default function useFetch(url, params = {}, options = {}) {
     } catch (e) {
       console.error(e);
       setError(e);
+    } finally {
+      setLoadiing(false);
     }
   }
 
@@ -42,5 +46,5 @@ export default function useFetch(url, params = {}, options = {}) {
     }
   }, [url, ...keys, ...update]);
 
-  return { data, error, loadData };
+  return { data, error, loading, loadData };
 }

lib/constants.js

@@ -35,6 +35,17 @@ export const THEME_COLORS = {
   },
 };
 
+export const EVENT_COLORS = [
+  '#2680eb',
+  '#9256d9',
+  '#44b556',
+  '#e68619',
+  '#e34850',
+  '#1b959a',
+  '#d83790',
+  '#85d044',
+];
+
 export const DEFAULT_DATE_RANGE = '24hour';
 
 export const POSTGRESQL = 'postgresql';