m
/
umami
mirror of https://github.com/kremalicious/umami.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Upgraded Chart.js to v4. Updated charts.

This commit is contained in:
Mike Cao 2023-03-14 22:37:50 -07:00
parent 3823705fc6
commit c1d3e9ec67
11 changed files with 113 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/layout/Header.module.css
View File

@ -12,7 +12,7 @@
gap: 10px;
font-size: var(--font-size-lg);
font-weight: 700;
color: var(--font-color100);
color: var(--font-color100) !important;
}
.buttons {

165
components/metrics/BarChart.js
View File

@ -1,7 +1,7 @@
import { useState, useRef, useEffect } from 'react';
import { useState, useRef, useEffect, useMemo } from 'react';
import { StatusLight } from 'react-basics';
import classNames from 'classnames';
import ChartJS from 'chart.js';
import Chart from 'chart.js/auto';
import HoverTooltip from 'components/common/HoverTooltip';
import Legend from 'components/metrics/Legend';
import { formatLongNumber } from 'lib/format';
@ -15,7 +15,6 @@ import styles from './BarChart.module.css';
export default function BarChart({
datasets,
unit,
records,
animationDuration = DEFAULT_ANIMATION_DURATION,
className,
stacked = false,
@ -30,74 +29,36 @@ export default function BarChart({
const [theme] = useTheme();
const forceUpdate = useForceUpdate();
const colors = {
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
zeroLine: THEME_COLORS[theme].gray500,
};
function renderXLabel(label, index, values) {
if (loading) return '';
const d = new Date(values[index].value);
const sw = canvas.current.width / window.devicePixelRatio;
switch (unit) {
case 'minute':
return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
case 'hour':
return dateFormat(d, 'p', locale);
case 'day':
if (records > 25) {
if (sw <= 275) {
return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 550) {
return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
if (sw <= 700) {
return index % 2 === 0 ? dateFormat(d, 'M/d', locale) : '';
}
return dateFormat(d, 'MMM d', locale);
}
if (sw <= 375) {
return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : '';
}
if (sw <= 425) {
return dateFormat(d, 'MMM d', locale);
}
return dateFormat(d, 'EEE M/d', locale);
case 'month':
if (sw <= 330) {
return index % 2 === 0 ? dateFormat(d, 'MMM', locale) : '';
}
return dateFormat(d, 'MMM', locale);
default:
return label;
}
}
const colors = useMemo(
() => ({
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
zeroLine: THEME_COLORS[theme].gray500,
}),
[theme],
);
function renderYLabel(label) {
return +label > 1000 ? formatLongNumber(label) : label;
}
function renderTooltip(model) {
const { opacity, title, body, labelColors } = model;
const { opacity, labelColors, dataPoints } = model.tooltip;
if (!opacity || !title) {
if (!dataPoints?.length || !opacity) {
setTooltip(null);
return;
}
const [label, value] = body[0].lines[0].split(':');
const format = unit === 'hour' ? 'EEE p — PPP' : 'PPPP';
setTooltip(
<>
<div>{dateFormat(new Date(+title[0]), format, locale)}</div>
<div>{dateFormat(new Date(dataPoints[0].raw.x), format, locale)}</div>
<div>
<StatusLight color={labelColors[0].backgroundColor}>
<StatusLight color={labelColors?.[0]?.backgroundColor}>
<b>
{formatLongNumber(value)} {label}
{formatLongNumber(dataPoints[0].raw.y)} {dataPoints[0].dataset.label}
</b>
</StatusLight>
</div>
@ -107,68 +68,53 @@ export default function BarChart({
function createChart() {
const options = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
},
tooltips: {
enabled: false,
custom: renderTooltip,
},
hover: {
animationDuration: 0,
},
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
legend: {
display: false,
},
onResize: ({ width, height }) => {
//console.log({ width, height });
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: renderTooltip,
},
},
scales: {
xAxes: [
{
type: 'time',
distribution: 'series',
time: {
unit,
tooltipFormat: 'x',
},
ticks: {
callback: renderXLabel,
minRotation: 0,
maxRotation: 0,
fontColor: colors.text,
autoSkipPadding: 1,
},
gridLines: {
display: false,
},
offset: true,
stacked: true,
x: {
type: 'time',
stacked: true,
grid: {
display: false,
},
],
yAxes: [
{
ticks: {
callback: renderYLabel,
beginAtZero: true,
fontColor: colors.text,
},
gridLines: {
color: colors.line,
zeroLineColor: colors.zeroLine,
},
stacked,
ticks: {
autoSkip: false,
maxRotation: 0,
},
],
},
y: {
type: 'linear',
min: 0,
beginAtZero: true,
stacked,
ticks: {
callback: renderYLabel,
},
},
},
};
onCreate(options);
chart.current = new ChartJS(canvas.current, {
chart.current = new Chart(canvas.current, {
type: 'bar',
data: {
datasets,
@ -180,16 +126,7 @@ export default function BarChart({
function updateChart() {
const { options } = chart.current;
options.legend.labels.fontColor = colors.text;
options.scales.xAxes[0].time.unit = unit;
options.scales.xAxes[0].ticks.callback = renderXLabel;
options.scales.xAxes[0].ticks.fontColor = colors.text;
options.scales.yAxes[0].ticks.fontColor = colors.text;
options.scales.yAxes[0].ticks.precision = 0;
options.scales.yAxes[0].gridLines.color = colors.line;
options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
options.animation.duration = animationDuration;
options.tooltips.custom = renderTooltip;
onUpdate(chart.current);
@ -207,7 +144,7 @@ export default function BarChart({
updateChart();
}
}
}, [datasets, unit, animationDuration, locale]);
}, [datasets, unit, animationDuration, locale, loading]);
return (
<>

4
components/metrics/BarChart.module.css
View File

@ -1,10 +1,12 @@
.chart {
position: relative;
height: 400px;
overflow: hidden;
}
@media only screen and (max-width: 992px) {
.chart {
height: 200px;
/*height: 200px;*/
}
}

2
components/metrics/Legend.module.css
View File

@ -8,7 +8,7 @@
.label {
display: flex;
align-items: center;
font-size: var(--font-size-xs);
font-size: var(--font-size-sm);
cursor: pointer;
}

49
components/metrics/PageviewsChart.js
View File

@ -25,12 +25,16 @@ export default function PageviewsChart({
const primaryColor = colord(THEME_COLORS[theme].primary);
return {
views: {
background: primaryColor.alpha(0.4).toRgbString(),
border: primaryColor.alpha(0.5).toRgbString(),
hoverBackgroundColor: primaryColor.alpha(0.7).toRgbString(),
backgroundColor: primaryColor.alpha(0.4).toRgbString(),
borderColor: primaryColor.alpha(0.7).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
visitors: {
background: primaryColor.alpha(0.6).toRgbString(),
border: primaryColor.alpha(0.7).toRgbString(),
hoverBackgroundColor: primaryColor.alpha(0.9).toRgbString(),
backgroundColor: primaryColor.alpha(0.6).toRgbString(),
borderColor: primaryColor.alpha(0.9).toRgbString(),
hoverBorderColor: primaryColor.toRgbString(),
},
};
}, [theme]);
@ -50,29 +54,30 @@ export default function PageviewsChart({
return null;
}
const datasets = [
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
lineTension: 0,
borderWidth: 1,
...colors.visitors,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
lineTension: 0,
borderWidth: 1,
...colors.views,
},
];
return (
<div ref={ref}>
<BarChart
{...props}
key={websiteId}
className={className}
datasets={[
{
label: formatMessage(labels.uniqueVisitors),
data: data.sessions,
lineTension: 0,
backgroundColor: colors.visitors.background,
borderColor: colors.visitors.border,
borderWidth: 1,
},
{
label: formatMessage(labels.pageViews),
data: data.pageviews,
lineTension: 0,
backgroundColor: colors.views.background,
borderColor: colors.views.border,
borderWidth: 1,
},
]}
datasets={datasets}
unit={unit}
records={records}
animationDuration={visible ? animationDuration : 0}

1
hooks/useDateRange.js
View File

@ -1,4 +1,3 @@
import { parseISO } from 'date-fns';
import { parseDateRange } from 'lib/date';
import { setItem } from 'next-basics';
import { DATE_RANGE_CONFIG, DEFAULT_DATE_RANGE } from 'lib/constants';

8
lib/date.js
View File

@ -181,18 +181,18 @@ export function getDateArray(data, startDate, endDate, unit) {
const n = diff(endDate, startDate) + 1;
function findData(t) {
const x = data.find(e => {
return normalize(getDateFromString(e.t)).getTime() === t.getTime();
const d = data.find(({ x }) => {
return normalize(getDateFromString(x)).getTime() === t.getTime();
});
return x?.y || 0;
return d?.y || 0;
}
for (let i = 0; i < n; i++) {
const t = normalize(add(startDate, i));
const y = findData(t);
arr.push({ ...data[i], t, y });
arr.push({ x: t, y });
}
return arr;

5
package.json
View File

@ -64,7 +64,8 @@
"@umami/prisma-client": "^0.2.0",
"@umami/redis-client": "^0.2.0",
"chalk": "^4.1.1",
"chart.js": "^2.9.4",
"chart.js": "^4.2.1",
"chartjs-adapter-date-fns": "^3.0.0",
"classnames": "^2.3.1",
"clickhouse": "^2.5.0",
"colord": "^2.9.2",
@ -93,7 +94,7 @@
"node-fetch": "^3.2.8",
"npm-run-all": "^4.1.5",
"react": "^18.2.0",
"react-basics": "^0.72.0",
"react-basics": "^0.73.0",
"react-beautiful-dnd": "^13.1.0",
"react-dom": "^18.2.0",
"react-intl": "^5.24.7",

1
pages/_app.js
View File

@ -10,6 +10,7 @@ import 'styles/locale.css';
import 'styles/index.css';
import '@fontsource/inter/400.css';
import '@fontsource/inter/700.css';
import 'chartjs-adapter-date-fns';
import Script from 'next/script';
const client = new QueryClient({

4
queries/analytics/pageview/getPageviewStats.ts
View File

@ -50,7 +50,7 @@ async function relationalQuery(
const { filterQuery, joinSession } = parseFilters(filters, params);
return rawQuery(
`select ${getDateQuery('website_event.created_at', unit, timezone)} t,
`select ${getDateQuery('website_event.created_at', unit, timezone)} x,
count(${count !== '*' ? `${count}${sessionKey}` : count}) y
from website_event
${joinSession}
@ -83,7 +83,7 @@ async function clickhouseQuery(
return rawQuery(
`select
${getDateStringQuery('g.t', unit)} as t,
${getDateStringQuery('g.t', unit)} as x,
g.y as y
from
(select

46
yarn.lock
View File

@ -1745,6 +1745,11 @@
"@jridgewell/resolve-uri" "3.1.0"
"@jridgewell/sourcemap-codec" "1.4.14"
"@kurkle/color@^0.3.0":
version "0.3.2"
resolved "https://registry.yarnpkg.com/@kurkle/color/-/color-0.3.2.tgz#5acd38242e8bde4f9986e7913c8fdf49d3aa199f"
integrity sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==
"@netlify/esbuild-android-64@0.14.39":
version "0.14.39"
resolved "https://registry.yarnpkg.com/@netlify/esbuild-android-64/-/esbuild-android-64-0.14.39.tgz#7bd30aba94a92351d2c5e25e178ceb824f3c2f99"
@ -3348,28 +3353,17 @@ chalk@^4.0.0, chalk@^4.1.1, chalk@^4.1.2:
ansi-styles "^4.1.0"
supports-color "^7.1.0"
chart.js@^2.9.4:
version "2.9.4"
resolved "https://registry.npmjs.org/chart.js/-/chart.js-2.9.4.tgz"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
chart.js@^4.2.1:
version "4.2.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.2.1.tgz#d2bd5c98e9a0ae35408975b638f40513b067ba1d"
integrity sha512-6YbpQ0nt3NovAgOzbkSSeeAQu/3za1319dPUQTXn9WcOpywM8rGKxJHrhS8V8xEkAlk8YhEfjbuAPfUyp6jIsw==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
"@kurkle/color" "^0.3.0"
chartjs-color-string@^0.6.0:
version "0.6.0"
resolved "https://registry.npmjs.org/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chartjs-adapter-date-fns@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/chartjs-adapter-date-fns/-/chartjs-adapter-date-fns-3.0.0.tgz#c25f63c7f317c1f96f9a7c44bd45eeedb8a478e5"
integrity sha512-Rs3iEB3Q5pJ973J93OBTpnP7qoGwvq3nUnoMdtxO+9aoJof7UFcRbWcIDteXuYd1fgAvct/32T9qaLyLuZVwCg==
chokidar@^3.5.3:
version "3.5.3"
@ -3464,7 +3458,7 @@ cluster-key-slot@^1.1.0:
resolved "https://registry.yarnpkg.com/cluster-key-slot/-/cluster-key-slot-1.1.2.tgz#88ddaa46906e303b5de30d3153b7d9fe0a0c19ac"
integrity sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==
color-convert@^1.9.0, color-convert@^1.9.3:
color-convert@^1.9.0:
version "1.9.3"
resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -6117,7 +6111,7 @@ moment-timezone@^0.5.35:
dependencies:
moment "^2.29.4"
"moment@>= 2.9.0", moment@^2.10.2, moment@^2.29.4:
"moment@>= 2.9.0", moment@^2.29.4:
version "2.29.4"
resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
@ -7082,10 +7076,10 @@ rc@^1.2.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-basics@^0.72.0:
version "0.72.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.72.0.tgz#23dbd61d5ac6bb8b8d61f1f3adcebb7edeab8a26"
integrity sha512-dWthEwyh/ilt1BSPYwMdd1oE/OFDp8oZ5udZGrdXs5guRh9Ukar4V4chQPbnuZPYUnAH4jg19H5Fesvz2lSaaw==
react-basics@^0.73.0:
version "0.73.0"
resolved "https://registry.yarnpkg.com/react-basics/-/react-basics-0.73.0.tgz#9555563f3407ac417dc833dfca47588123d55535"
integrity sha512-eEK8yWWrXO7JATBlPKBfFQlD1hNZoNeEtlYNx+QjOCLKu1qjClutP5nXWHmX4gHE97XFwUKzbTU35NkNEy5C0w==
dependencies:
classnames "^2.3.1"
date-fns "^2.29.3"