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

Updated color selection. Added loading to fetch hook.

Browse source
This commit is contained in:
Mike Cao 2020-09-20 11:28:38 -07:00
parent 5524d504f4
commit 569fcc7f0b
7 changed files with 47 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/metrics/PageviewsChart.js
View file

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