Refactored funnel report. Made BarChart more generic.

hooks/useTheme.js

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import useStore, { setTheme } from 'store/app';
 import { getItem, setItem } from 'next-basics';
-import { THEME_CONFIG } from 'lib/constants';
+import { THEME_COLORS, THEME_CONFIG } from 'lib/constants';
+import { colord } from 'colord';
 
 const selector = state => state.theme;
 
@@ -13,6 +14,26 @@ export function useTheme() {
         : 'light'
       : 'light';
   const theme = useStore(selector) || getItem(THEME_CONFIG) || defaultTheme;
+  const primaryColor = colord(THEME_COLORS[theme].primary);
+
+  const colors = {
+    chart: {
+      text: THEME_COLORS[theme].gray700,
+      line: THEME_COLORS[theme].gray200,
+      views: {
+        hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.4).toRgbString(),
+        borderColor: primaryColor.alpha(0.7).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
+      },
+      visitors: {
+        hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
+        backgroundColor: primaryColor.alpha(0.6).toRgbString(),
+        borderColor: primaryColor.alpha(0.9).toRgbString(),
+        hoverBorderColor: primaryColor.toRgbString(),
+      },
+    },
+  };
 
   function saveTheme(value) {
     setItem(THEME_CONFIG, value);
@@ -32,7 +53,7 @@ export function useTheme() {
     }
   }, []);
 
-  return [theme, saveTheme];
+  return { theme, saveTheme, colors };
 }
 
 export default useTheme;