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

@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { Tooltip } from 'react-basics';
import styles from './HoverTooltip.module.css';
export function HoverTooltip({ tooltip }) {
export function HoverTooltip({ children }) {
const [position, setPosition] = useState({ x: -1000, y: -1000 });
useEffect(() => {
@ -18,8 +18,8 @@ export function HoverTooltip({ tooltip }) {
}, []);
return (
<div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
<Tooltip position="top" action="none" label={tooltip} />
<div className={styles.tooltip} style={{ left: position.x, top: position.y - 16 }}>
<Tooltip position="top" action="none" label={children} />
</div>
);
}

View File

@ -15,7 +15,7 @@ import styles from './WorldMap.module.css';
export function WorldMap({ data, className }) {
const { basePath } = useRouter();
const [tooltip, setTooltip] = useState();
const [theme] = useTheme();
const { theme } = useTheme();
const colors = useMemo(
() => ({
baseColor: THEME_COLORS[theme].primary,

View File

@ -9,9 +9,9 @@ export function LanguageButton() {
const { locale, saveLocale, dir } = useLocale();
const items = Object.keys(languages).map(key => ({ ...languages[key], value: key }));
function handleSelect(value) {
//saveLocale(value);
console.log('WTFFFF');
function handleSelect(value, close) {
saveLocale(value);
close();
}
return (
@ -22,24 +22,28 @@ export function LanguageButton() {
</Icon>
</Button>
<Popup position="bottom" alignment={dir === 'rtl' ? 'start' : 'end'}>
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (
<div
key={value}
className={classNames(styles.item, { [styles.selected]: value === locale })}
onClick={handleSelect.bind(null, value)}
>
<Text>{label}</Text>
{value === locale && (
<Icon className={styles.icon}>
<Icons.Check />
</Icon>
)}
</div>
);
})}
</div>
{close => {
return (
<div className={styles.menu}>
{items.map(({ value, label }) => {
return (
<div
key={value}
className={classNames(styles.item, { [styles.selected]: value === locale })}
onClick={handleSelect.bind(null, value, close)}
>
<Text>{label}</Text>
{value === locale && (
<Icon className={styles.icon}>
<Icons.Check />
</Icon>
)}
</div>
);
})}
</div>
);
}}
</Popup>
</PopupTrigger>
);

View File

@ -5,7 +5,7 @@ import Icons from 'components/icons';
import styles from './ThemeButton.module.css';
export function ThemeButton() {
const [theme, setTheme] = useTheme();
const { theme, saveTheme } = useTheme();
const transitions = useTransition(theme, {
initial: { opacity: 1 },
@ -21,7 +21,7 @@ export function ThemeButton() {
});
function handleClick() {
setTheme(theme === 'light' ? 'dark' : 'light');
saveTheme(theme === 'light' ? 'dark' : 'light');
}
return (

View File

@ -123,7 +123,11 @@ export const labels = defineMessages({
reports: { id: 'label.reports', defaultMessage: 'Reports' },
eventData: { id: 'label.event-data', defaultMessage: 'Event data' },
funnel: { id: 'label.funnel', defaultMessage: 'Funnel' },
url: { id: 'label.url', defaultMessage: 'URL' },
urls: { id: 'label.urls', defaultMessage: 'URLs' },
add: { id: 'label.add', defaultMessage: 'Add' },
window: { id: 'label.window', defaultMessage: 'Window' },
addUrl: { id: 'label.add-url', defaultMessage: 'Add URL' },
});
export const messages = defineMessages({

View File

@ -1,102 +1,39 @@
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { StatusLight, Loading } from 'react-basics';
import { useState, useRef, useEffect, useCallback } from 'react';
import { Loading } from 'react-basics';
import classNames from 'classnames';
import Chart from 'chart.js/auto';
import HoverTooltip from 'components/common/HoverTooltip';
import Legend from 'components/metrics/Legend';
import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/date';
import useLocale from 'hooks/useLocale';
import useTheme from 'hooks/useTheme';
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import { DEFAULT_ANIMATION_DURATION } from 'lib/constants';
import styles from './BarChart.module.css';
function defaultRenderYLabel(label) {
return +label > 1000 ? formatLongNumber(label) : label;
}
export function BarChart({
datasets,
unit,
animationDuration = DEFAULT_ANIMATION_DURATION,
stacked = false,
loading = false,
onCreate = () => {},
onUpdate = () => {},
renderXLabel,
renderYLabel,
XAxisType = 'time',
YAxisType = 'linear',
renderTooltip,
onCreate,
onUpdate,
className,
}) {
const canvas = useRef();
const chart = useRef(null);
const [tooltip, setTooltip] = useState(null);
const { locale } = useLocale();
const [theme] = useTheme();
const colors = useMemo(
() => ({
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
}),
[theme],
);
const renderYLabel = label => {
return +label > 1000 ? formatLongNumber(label) : label;
};
const renderXLabel = useCallback(
(label, index, values) => {
const d = new Date(values[index].value);
switch (unit) {
case 'minute':
return dateFormat(d, 'h:mm', locale);
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
return dateFormat(d, 'MMM d', locale);
case 'month':
return dateFormat(d, 'MMM', locale);
case 'year':
return dateFormat(d, 'YYY', locale);
default:
return label;
}
},
[locale, unit],
);
const renderTooltip = useCallback(
model => {
const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
const formats = {
millisecond: 'T',
second: 'pp',
minute: 'p',
hour: 'h:mm aaa - PP',
day: 'PPPP',
week: 'PPPP',
month: 'LLLL yyyy',
quarter: 'qqq',
year: 'yyyy',
};
setTooltip(
<div className={styles.tooltip}>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<div className={styles.value}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</div>
</StatusLight>
</div>
</div>,
);
},
[unit],
);
const { theme, colors } = useTheme();
const getOptions = useCallback(() => {
return {
@ -117,12 +54,12 @@ export function BarChart({
},
tooltip: {
enabled: false,
external: renderTooltip,
external: renderTooltip ? renderTooltip.bind(null, setTooltip) : undefined,
},
},
scales: {
x: {
type: 'time',
type: XAxisType,
stacked: true,
time: {
unit,
@ -131,34 +68,44 @@ export function BarChart({
display: false,
},
border: {
color: colors.line,
color: colors.chart.line,
},
ticks: {
color: colors.text,
color: colors.chart.text,
autoSkip: false,
maxRotation: 0,
callback: renderXLabel,
},
},
y: {
type: 'linear',
type: YAxisType,
min: 0,
beginAtZero: true,
stacked,
grid: {
color: colors.line,
color: colors.chart.line,
},
border: {
color: colors.line,
color: colors.chart.line,
},
ticks: {
color: colors.text,
callback: renderYLabel,
callback: renderYLabel || defaultRenderYLabel,
},
},
},
};
}, [animationDuration, renderTooltip, renderXLabel, stacked, colors, unit, locale]);
}, [
animationDuration,
renderTooltip,
renderXLabel,
XAxisType,
YAxisType,
stacked,
colors,
unit,
locale,
]);
const createChart = () => {
Chart.defaults.font.family = 'Inter';
@ -173,7 +120,7 @@ export function BarChart({
options,
});
onCreate(chart.current);
onCreate?.(chart.current);
};
const updateChart = () => {
@ -186,7 +133,7 @@ export function BarChart({
chart.current.options = getOptions();
onUpdate(chart.current);
onUpdate?.(chart.current);
chart.current.update();
};
@ -208,7 +155,11 @@ export function BarChart({
<canvas ref={canvas} />
</div>
<Legend chart={chart.current} />
{tooltip && <HoverTooltip tooltip={tooltip} />}
{tooltip && (
<HoverTooltip>
<div className={styles.tooltip}>{tooltip}</div>
</HoverTooltip>
)}
</>
);
}

View File

@ -5,8 +5,8 @@ import { useSpring, animated, config } from 'react-spring';
import classNames from 'classnames';
import NoData from 'components/common/NoData';
import { formatNumber, formatLongNumber } from 'lib/format';
import useMessages from 'hooks/useMessages';
import styles from './DataTable.module.css';
import useMessages from '../../hooks/useMessages';
export function DataTable({
data = [],

View File

@ -1,9 +1,9 @@
.table {
position: relative;
height: 100%;
display: grid;
grid-template-rows: fit-content(100%) auto;
overflow: hidden;
flex: 1;
}
.body {

View File

@ -1,7 +1,7 @@
.bar {
display: flex;
cursor: pointer;
min-height: 80px;
min-height: 110px;
gap: 20px;
flex-wrap: wrap;
}

View File

@ -1,33 +1,73 @@
import { useMemo } from 'react';
import { colord } from 'colord';
import { useCallback, useMemo } from 'react';
import { StatusLight } from 'react-basics';
import BarChart from './BarChart';
import { THEME_COLORS } from 'lib/constants';
import useTheme from 'hooks/useTheme';
import useMessages from 'hooks/useMessages';
import useLocale from 'hooks/useLocale';
import { dateFormat } from 'lib/date';
import { formatLongNumber } from 'lib/format';
export function PageviewsChart({ websiteId, data, unit, records, className, loading, ...props }) {
export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
const { formatMessage, labels } = useMessages();
const [theme] = useTheme();
const { colors } = useTheme();
const { locale } = useLocale();
const colors = useMemo(() => {
const primaryColor = colord(THEME_COLORS[theme].primary);
return {
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(),
},
};
}, [theme]);
const renderXLabel = useCallback(
(label, index, values) => {
const d = new Date(values[index].value);
switch (unit) {
case 'minute':
return dateFormat(d, 'h:mm', locale);
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
return dateFormat(d, 'MMM d', locale);
case 'month':
return dateFormat(d, 'MMM', locale);
case 'year':
return dateFormat(d, 'YYY', locale);
default:
return label;
}
},
[locale, unit],
);
const renderTooltip = useCallback(
(setTooltip, model) => {
const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
const formats = {
millisecond: 'T',
second: 'pp',
minute: 'p',
hour: 'h:mm aaa - PP',
day: 'PPPP',
week: 'PPPP',
month: 'LLLL yyyy',
quarter: 'qqq',
year: 'yyyy',
};
setTooltip(
<>
<div>{dateFormat(new Date(dataPoints[0].raw.x), formats[unit], locale)}</div>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</StatusLight>
</div>
</>,
);
},
[unit],
);
const datasets = useMemo(() => {
if (!data) return [];
@ -37,13 +77,13 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
borderWidth: 1,
...colors.visitors,
...colors.chart.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
borderWidth: 1,
...colors.views,
...colors.chart.views,
},
];
}, [data, locale, colors]);
@ -55,8 +95,9 @@ export function PageviewsChart({ websiteId, data, unit, records, className, load
className={className}
datasets={datasets}
unit={unit}
records={records}
loading={loading}
renderXLabel={renderXLabel}
renderTooltip={renderTooltip}
/>
);
}

View File

@ -1,3 +1,9 @@
.header {
display: flex;
flex-direction: row;
align-items: center;
}
.title {
display: flex;
flex-direction: row;

View File

@ -16,8 +16,6 @@ export function ReportHeader({ report, icon }) {
const { id, websiteId, name, parameters } = report || {};
const { value, startDate, endDate } = parameters?.dateRange || {};
console.log('REPORT HEADER', report);
const handleSelect = websiteId => {
updateReport(id, { websiteId });
};

View File

@ -1,184 +1,60 @@
import Chart from 'chart.js/auto';
import classNames from 'classnames';
import { colord } from 'colord';
import HoverTooltip from 'components/common/HoverTooltip';
import Legend from 'components/metrics/Legend';
import useLocale from 'hooks/useLocale';
import { useCallback, useMemo } from 'react';
import { Loading } from 'react-basics';
import useMessages from 'hooks/useMessages';
import useTheme from 'hooks/useTheme';
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import BarChart from 'components/metrics/BarChart';
import { formatLongNumber } from 'lib/format';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Loading, StatusLight } from 'react-basics';
import styles from './FunnelChart.module.css';
export function FunnelChart({
data,
animationDuration = DEFAULT_ANIMATION_DURATION,
stacked = false,
loading = false,
onCreate = () => {},
onUpdate = () => {},
className,
}) {
export function FunnelChart({ report, data, loading, className }) {
const { formatMessage, labels } = useMessages();
const canvas = useRef();
const chart = useRef(null);
const [tooltip, setTooltip] = useState(null);
const { locale } = useLocale();
const [theme] = useTheme();
const { colors } = useTheme();
const datasets = useMemo(() => {
const primaryColor = colord(THEME_COLORS[theme].primary);
return [
{
label: formatMessage(labels.uniqueVisitors),
data: data,
borderWidth: 1,
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
];
}, [data]);
const { parameters } = report || {};
const colors = useMemo(
() => ({
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
}),
[theme],
const renderXLabel = useCallback(
(label, index) => {
return parameters.urls[index];
},
[parameters],
);
const renderYLabel = label => {
return +label > 1000 ? formatLongNumber(label) : label;
};
const renderTooltip = useCallback(model => {
const { opacity, labelColors, dataPoints } = model.tooltip;
const renderTooltip = useCallback((setTooltip, model) => {
const { opacity, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
setTooltip(
<div className={styles.tooltip}>
<div>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<div className={styles.value}>
<div>{dataPoints[0].raw.x}</div>
<div>{formatLongNumber(dataPoints[0].raw.y)}</div>
</div>
</StatusLight>
</div>
</div>,
);
setTooltip(`${formatLongNumber(dataPoints[0].raw.y)} ${formatMessage(labels.visitors)}`);
}, []);
const getOptions = useCallback(() => {
return {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
const datasets = useMemo(() => {
return [
{
label: formatMessage(labels.uniqueVisitors),
data: data,
borderWidth: 1,
...colors.chart.visitors,
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: renderTooltip,
},
},
scales: {
x: {
grid: {
display: false,
},
border: {
color: colors.line,
},
ticks: {
color: colors.text,
autoSkip: false,
maxRotation: 0,
},
},
y: {
type: 'linear',
min: 0,
beginAtZero: true,
stacked,
grid: {
color: colors.line,
},
border: {
color: colors.line,
},
ticks: {
color: colors.text,
callback: renderYLabel,
},
},
},
};
}, [animationDuration, renderTooltip, stacked, colors, locale]);
];
}, [data]);
const createChart = () => {
Chart.defaults.font.family = 'Inter';
const options = getOptions();
chart.current = new Chart(canvas.current, {
type: 'bar',
data: { datasets },
options,
});
onCreate(chart.current);
};
const updateChart = () => {
setTooltip(null);
chart.current.data.datasets[0].data = datasets[0].data;
chart.current.data.datasets[0].label = datasets[0].label;
chart.current.options = getOptions();
onUpdate(chart.current);
chart.current.update();
};
useEffect(() => {
if (datasets) {
if (!chart.current) {
createChart();
} else {
updateChart();
}
}
}, [datasets, theme, animationDuration, locale]);
if (loading) {
return <Loading icon="dots" className={styles.loading} />;
}
return (
<>
<div className={classNames(styles.chart, className)}>
{loading && <Loading position="page" icon="dots" />}
<canvas ref={canvas} />
</div>
<Legend chart={chart.current} />
{tooltip && <HoverTooltip tooltip={tooltip} />}
</>
<BarChart
className={className}
datasets={datasets}
unit="day"
loading={loading}
renderXLabel={renderXLabel}
renderTooltip={renderTooltip}
XAxisType="category"
/>
);
}

View File

@ -1,23 +1,3 @@
.chart {
position: relative;
height: 400px;
overflow: hidden;
}
.tooltip {
display: flex;
flex-direction: column;
gap: 10px;
}
.tooltip .value {
display: flex;
flex-direction: column;
text-transform: lowercase;
}
@media only screen and (max-width: 992px) {
.chart {
/*height: 200px;*/
}
.loading {
height: 300px;
}

View File

@ -1,5 +1,6 @@
import { useMessages } from 'hooks';
import {
Button,
Icon,
Form,
FormButtons,
@ -8,29 +9,38 @@ import {
PopupTrigger,
Popup,
SubmitButton,
Text,
TextField,
} from 'react-basics';
import Icons from 'components/icons';
import { updateReport } from 'store/reports';
import { useRef } from 'react';
import { useRef, useState } from 'react';
import styles from './FunnelParameters.module.css';
export function FunnelParameters({ report }) {
const { formatMessage, labels } = useMessages();
const ref = useRef(null);
const { id, websiteId, parameters, isLoading } = report || {};
const queryDisabled = !websiteId || parameters?.urls?.length < 2;
const handleSubmit = values => {
console.log({ values });
updateReport(id, { parameters: values, isLoading: false });
updateReport(id, { parameters: values, isLoading: false, update: Date.now() });
};
console.log('PARAMETERS', parameters);
const handleAdd = url => {
updateReport(id, { parameters: { ...parameters, urls: parameters.urls.concat(url) } });
};
const handleRemove = index => {
const urls = [...parameters.urls];
urls.splice(index, 1);
updateReport(id, { parameters: { ...parameters, urls } });
};
return (
<>
<Form ref={ref} values={parameters} onSubmit={handleSubmit}>
<FormRow label="Window (minutes)">
<FormRow label={formatMessage(labels.window)}>
<FormInput
name="window"
rules={{ required: formatMessage(labels.required), pattern: /[0-9]+/ }}
@ -38,11 +48,22 @@ export function FunnelParameters({ report }) {
<TextField autoComplete="off" />
</FormInput>
</FormRow>
<FormRow label={formatMessage(labels.urls)} action={<AddURLButton />}>
hi
<FormRow label={formatMessage(labels.urls)} action={<AddURLButton onAdd={handleAdd} />}>
<div className={styles.urls}>
{parameters?.urls.map((url, index) => {
return (
<div key={index} className={styles.url}>
<Text>{url}</Text>
<Icon onClick={() => handleRemove(index)}>
<Icons.Close />
</Icon>
</div>
);
})}
</div>
</FormRow>
<FormButtons>
<SubmitButton variant="primary" disabled={!websiteId} loading={isLoading}>
<SubmitButton variant="primary" disabled={queryDisabled} loading={isLoading}>
{formatMessage(labels.query)}
</SubmitButton>
</FormButtons>
@ -51,14 +72,40 @@ export function FunnelParameters({ report }) {
);
}
function AddURLButton() {
function AddURLButton({ onAdd }) {
const [url, setUrl] = useState('');
const { formatMessage, labels } = useMessages();
const handleAdd = close => {
onAdd?.(url);
setUrl('');
close();
};
const handleChange = e => {
setUrl(e.target.value);
};
return (
<PopupTrigger>
<Icon>
<Icons.Plus />
</Icon>
<Popup className={styles.popup} position="right" alignment="start">
HALLO
{close => {
return (
<Form>
<FormRow label={formatMessage(labels.url)}>
<TextField name="url" value={url} onChange={handleChange} autoComplete="off" />
</FormRow>
<FormButtons>
<Button variant="primary" onClick={() => handleAdd(close)}>
{formatMessage(labels.add)}
</Button>
</FormButtons>
</Form>
);
}}
</Popup>
</PopupTrigger>
);

View File

@ -4,4 +4,22 @@
margin-left: 10px;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
}
width: 400px;
}
.urls {
display: flex;
flex-direction: column;
gap: 10px;
}
.url {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 12px;
border: 1px solid var(--base400);
border-radius: var(--border-radius);
box-shadow: 1px 1px 1px var(--base400);
}

View File

@ -7,21 +7,35 @@ import ReportMenu from '../ReportMenu';
import ReportBody from '../ReportBody';
import Funnel from 'assets/funnel.svg';
import { useReport } from 'hooks';
import useApi from 'hooks/useApi';
export default function FunnelReport({ reportId }) {
const report = useReport(reportId);
const report = useReport(reportId, { window: 60, urls: ['/', '/docs'] });
const { post, useQuery } = useApi();
const { data, isLoading, error } = useQuery(
['report:funnel', report?.update],
() => {
const { websiteId, parameters } = report || {};
console.log('REPORT', { report });
return post(`/reports/funnel`, {
websiteId: websiteId,
...parameters,
startAt: +parameters.dateRange.startDate,
endAt: +parameters.dateRange.endDate,
});
},
{ enabled: !!report?.update },
);
return (
<Report>
<Report error={error} loading={data && isLoading}>
<ReportHeader icon={<Funnel />} report={report} />
<ReportMenu>
<FunnelParameters report={report} />
</ReportMenu>
<ReportBody>
<FunnelChart report={report} />
<FunnelTable report={report} />
<FunnelChart report={report} data={data} />
<FunnelTable data={data} />
</ReportBody>
</Report>
);

View File

@ -1,12 +1,17 @@
import DataTable from 'components/metrics/DataTable';
import { useMessages } from 'hooks';
export function FunnelTable({ ...props }) {
const { data } = props;
export function FunnelTable({ data }) {
const { formatMessage, labels } = useMessages();
const tableData =
data?.map(a => ({ x: a.x, y: a.y, z: Math.floor(a.y / data[0].y) * 100 })) || [];
return <DataTable data={tableData} title="Url" type="device" />;
return (
<DataTable
data={data}
title={formatMessage(labels.url)}
metric={formatMessage(labels.visitors)}
showPercentage={false}
/>
);
}
export default FunnelTable;

View File

@ -6,13 +6,13 @@ import Moon from 'assets/moon.svg';
import styles from './ThemeSetting.module.css';
export function ThemeSetting() {
const [theme, setTheme] = useTheme();
const { theme, saveTheme } = useTheme();
return (
<div className={styles.buttons}>
<Button
className={classNames({ [styles.active]: theme === 'light' })}
onClick={() => setTheme('light')}
onClick={() => saveTheme('light')}
>
<Icon>
<Sun />
@ -20,7 +20,7 @@ export function ThemeSetting() {
</Button>
<Button
className={classNames({ [styles.active]: theme === 'dark' })}
onClick={() => setTheme('dark')}
onClick={() => saveTheme('dark')}
>
<Icon>
<Moon />

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;

View File

@ -29,6 +29,7 @@ export default async (
if (req.method === 'POST') {
const { websiteId, urls, window, startAt, endAt } = req.body;
if (!(await canViewWebsite(req.auth, websiteId))) {
return unauthorized(res);
}

View File

@ -4,7 +4,7 @@ import replace from '@rollup/plugin-replace';
import { terser } from 'rollup-plugin-terser';
export default {
input: 'tracker/event-data.js',
input: 'tracker/index.js',
output: {
file: 'public/script.js',
format: 'iife',

View File

@ -15,8 +15,6 @@ const store = create(() => ({ ...initialState }));
export function updateReport(id, data) {
const report = store.getState()[id];
console.log('UPDATE STORE START', id, report);
if (report) {
store.setState(
produce(state => {
@ -37,9 +35,9 @@ export function updateReport(id, data) {
}
}
export function createReport() {
export function createReport(parameters) {
const id = `new_${getRandomChars(16)}`;
const report = { ...emptyReport, id };
const report = { ...emptyReport, id, parameters };
store.setState(
produce(state => {
@ -49,8 +47,6 @@ export function createReport() {
}),
);
console.log('CREATE STORE', report);
return report;
}