Refactored funnel report. Made BarChart more generic.

This commit is contained in:
Mike Cao 2023-05-24 21:40:02 -07:00
parent 050cd2f5d9
commit fb4dd75e18
24 changed files with 327 additions and 367 deletions

View file

@ -1,8 +1,7 @@
import useStore, { createReport } from 'store/reports';
import { useCallback, useEffect, useState } from 'react';
import { useForceUpdate } from 'hooks';
export function useReport(reportId) {
export function useReport(reportId, defaultParameters) {
const [id, setId] = useState(reportId);
const selector = useCallback(state => state[id], [id]);
@ -10,12 +9,11 @@ export function useReport(reportId) {
useEffect(() => {
if (!report) {
setId(createReport().id);
const newReport = createReport(defaultParameters);
setId(newReport.id);
}
}, []);
console.log('USE REPORT', report);
return report;
}

View file

@ -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;