watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-12 00:27:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Renamed methods. Initial work on realtime dashboard.

Browse source
This commit is contained in:
Mike Cao 2020-10-08 15:02:48 -07:00
parent b4ea70a67c
commit e64a555652
16 changed files with 246 additions and 86 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/metrics/MetricsBar.js
View file

@ -19,7 +19,7 @@ export default function MetricsBar({ websiteId, token, className }) {
} = usePageQuery();
const { data, error, loading } = useFetch(
`/api/website/${websiteId}/metrics`,
`/api/website/${websiteId}/stats`,
{
start_at: +startDate,
end_at: +endDate,

2
components/metrics/MetricsTable.js
View file

@ -38,7 +38,7 @@ export default function MetricsTable({
} = usePageQuery();
const { data, loading, error } = useFetch(
`/api/website/${websiteId}/rankings`,
`/api/website/${websiteId}/metrics`,
{
type,
start_at: +startDate,

80
components/metrics/RealtimeChart.js Normal file
View file

@ -0,0 +1,80 @@
import React from 'react';
import { useIntl } from 'react-intl';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';
export default function RealtimeChart({ 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 {
data: { datasets },
} = chart;
datasets[0].data = data.uniques;
datasets[0].label = intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
});
datasets[1].data = data.pageviews;
datasets[1].label = intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
});
chart.update();
};
if (!data) {
return null;
}
return (
<BarChart
className={className}
chartId={`realtime-${websiteId}`}
datasets={[
{
label: intl.formatMessage({
id: 'metrics.unique-visitors',
defaultMessage: 'Unique visitors',
}),
data: data.uniques,
lineTension: 0,
backgroundColor: colors.visitors.background,
borderColor: colors.visitors.border,
borderWidth: 1,
},
{
label: intl.formatMessage({
id: 'metrics.page-views',
defaultMessage: 'Page views',
}),
data: data.pageviews,
lineTension: 0,
backgroundColor: colors.views.background,
borderColor: colors.views.border,
borderWidth: 1,
},
]}
unit={unit}
records={records}
onUpdate={handleUpdate}
loading={loading}
/>
);
}