m/umami
1
0
Fork 0
mirror of https://github.com/kremalicious/umami.git synced 2024-12-18 15:23:38 +01:00
Code Issues Packages Projects Releases Wiki Activity

Bar chart styling.

Browse Source
This commit is contained in:
Mike Cao 2020-08-27 18:44:20 -07:00
parent d936ecc86e
commit a7e7469d22
9 changed files with 130 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
components/WebsiteDetails.js
View File

@ -23,9 +23,9 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
const [data, setData] = useState(); const [data, setData] = useState();
const [chartLoaded, setChartLoaded] = useState(false); const [chartLoaded, setChartLoaded] = useState(false);
const [countryData, setCountryData] = useState(); const [countryData, setCountryData] = useState();
const [eventsData, setEventsData] = useState();
const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange)); const [dateRange, setDateRange] = useState(getDateRange(defaultDateRange));
const [expand, setExpand] = useState(); const [expand, setExpand] = useState();
const [showEvents, setShowEvents] = useState(false);
const { startDate, endDate, unit } = dateRange; const { startDate, endDate, unit } = dateRange;
const BackButton = () => ( const BackButton = () => (
@ -145,14 +145,16 @@ export default function WebsiteDetails({ websiteId, defaultDateRange = '7day' })
<WorldMap data={countryData} /> <WorldMap data={countryData} />
</div> </div>
<div className="col-12 col-md-12 col-lg-4"> <div className="col-12 col-md-12 col-lg-4">
<CountriesTable {...tableProps} onDataLoad={data => setCountryData(data)} /> <CountriesTable {...tableProps} onDataLoad={setCountryData} />
</div> </div>
</div> </div>
<div className={classNames(styles.row, 'row', { [styles.hidden]: !showEvents })}> <div
className={classNames(styles.row, 'row', { [styles.hidden]: !eventsData?.length > 0 })}
>
<div className="col-12 col-md-12 col-lg-4"> <div className="col-12 col-md-12 col-lg-4">
<EventsTable {...tableProps} onDataLoad={data => setShowEvents(data.length > 0)} /> <EventsTable {...tableProps} onDataLoad={setEventsData} />
</div> </div>
<div className="col-12 col-md-12 col-lg-8"> <div className="col-12 col-md-12 col-lg-8 pt-5 pb-5">
<EventsChart {...dataProps} /> <EventsChart {...dataProps} />
</div> </div>
</div> </div>

8
components/common/ButtonGroup.module.css
View File

@ -2,13 +2,13 @@
display: inline-flex; display: inline-flex;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
border: 1px solid var(--gray400); border: 1px solid var(--gray500);
} }
.group .button { .group .button {
border-radius: 0; border-radius: 0;
background: var(--gray50); background: var(--gray50);
border-left: 1px solid var(--gray400); border-left: 1px solid var(--gray500);
padding: 4px 8px; padding: 4px 8px;
} }
@ -16,6 +16,10 @@
border: 0; border: 0;
} }
.group .button:hover {
background: var(--gray100);
}
.group .button + .button { .group .button + .button {
margin: 0; margin: 0;
} }

22
components/metrics/BarChart.js
View File

@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import classNames from 'classnames'; import classNames from 'classnames';
import ChartJS from 'chart.js'; import ChartJS from 'chart.js';
import styles from './PageviewsChart.module.css'; import styles from './BarChart.module.css';
import { format } from 'date-fns'; import { format } from 'date-fns';
export default function BarChart({ export default function BarChart({
@ -10,6 +10,7 @@ export default function BarChart({
datasets, datasets,
unit, unit,
records, records,
height = 400,
animationDuration = 300, animationDuration = 300,
className, className,
stacked = false, stacked = false,
@ -68,7 +69,9 @@ export default function BarChart({
hover: { hover: {
animationDuration: 0, animationDuration: 0,
}, },
responsive: true,
responsiveAnimationDuration: 0, responsiveAnimationDuration: 0,
maintainAspectRatio: false,
scales: { scales: {
xAxes: [ xAxes: [
{ {
@ -133,16 +136,19 @@ export default function BarChart({
}, [datasets]); }, [datasets]);
return ( return (
<div <>
data-tip="" <div
data-for={`${chartId}-tooltip`} data-tip=""
className={classNames(styles.chart, className)} data-for={`${chartId}-tooltip`}
> className={classNames(styles.chart, className)}
<canvas ref={canvas} width={960} height={400} /> style={{ height }}
>
<canvas ref={canvas} />
</div>
<ReactTooltip id={`${chartId}-tooltip`}> <ReactTooltip id={`${chartId}-tooltip`}>
{tooltip ? <Tooltip {...tooltip} /> : null} {tooltip ? <Tooltip {...tooltip} /> : null}
</ReactTooltip> </ReactTooltip>
</div> </>
); );
} }

0
components/metrics/PageviewsChart.module.css → components/metrics/BarChart.module.css
View File

66
components/metrics/EventsChart.js
View File

@ -1,33 +1,38 @@
import React, { useState, useEffect, useMemo } from 'react'; import React, { useState, useEffect, useMemo } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import tinycolor from 'tinycolor2';
import BarChart from './BarChart'; import BarChart from './BarChart';
import { get } from 'lib/web'; import { get } from 'lib/web';
import { getTimezone, getDateArray, getDateLength } from 'lib/date'; import { getTimezone, getDateArray, getDateLength } from 'lib/date';
import styles from './PageviewsChart.module.css'; import styles from './BarChart.module.css';
const COLORS = [ const COLORS = [
'rgba(38, 128, 235, 0.5)', '#2680eb',
'rgba(146, 86, 217, 0.5)', '#9256d9',
'rgba(45, 157, 120, 0.5)', '#44b556',
'rgba(216, 55, 144, 0.5)', '#e68619',
'rgba(227, 72, 80, 0.5)', '#e34850',
'rgba(103, 103, 236, 0.5)', '#1b959a',
'rgba(68, 181, 86, 0.5)', '#d83790',
'#85d044',
]; ];
export default function EventsChart({ websiteId, startDate, endDate, unit, className }) { export default function EventsChart({ websiteId, startDate, endDate, unit }) {
const [data, setData] = useState(); const [data, setData] = useState();
const datasets = useMemo(() => { const datasets = useMemo(() => {
if (!data) return []; if (!data) return [];
return Object.keys(data).map((key, index) => ({ return Object.keys(data).map((key, index) => {
label: key, const color = tinycolor(COLORS[index]);
data: data[key], return {
lineTension: 0, label: key,
backgroundColor: COLORS[index], data: data[key],
borderColor: COLORS[index], lineTension: 0,
borderWidth: 1, backgroundColor: color.setAlpha(0.4).toRgbString(),
})); borderColor: color.setAlpha(0.5).toRgbString(),
borderWidth: 1,
};
});
}, [data]); }, [data]);
async function loadData() { async function loadData() {
@ -55,6 +60,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
setData(map); setData(map);
} }
function handleCreate(options) {
const legend = {
position: 'bottom',
};
options.legend = legend;
}
function handleUpdate(chart) { function handleUpdate(chart) {
chart.data.datasets = datasets; chart.data.datasets = datasets;
@ -70,15 +83,14 @@ export default function EventsChart({ websiteId, startDate, endDate, unit, class
} }
return ( return (
<div className={classNames(styles.chart, className)}> <BarChart
<BarChart chartId={`events-${websiteId}`}
chartId={websiteId} datasets={datasets}
datasets={datasets} unit={unit}
unit={unit} records={getDateLength(startDate, endDate, unit)}
records={getDateLength(startDate, endDate, unit)} onCreate={handleCreate}
onUpdate={handleUpdate} onUpdate={handleUpdate}
stacked stacked
/> />
</div>
); );
} }

19
components/metrics/EventsTable.js
View File

@ -2,7 +2,7 @@ import React from 'react';
import MetricsTable from './MetricsTable'; import MetricsTable from './MetricsTable';
import styles from './EventsTable.module.css'; import styles from './EventsTable.module.css';
export default function DevicesTable({ export default function EventsTable({
websiteId, websiteId,
startDate, startDate,
endDate, endDate,
@ -19,14 +19,19 @@ export default function DevicesTable({
startDate={startDate} startDate={startDate}
endDate={endDate} endDate={endDate}
limit={limit} limit={limit}
renderLabel={({ w, x }) => ( renderLabel={({ x }) => <Label value={x} />}
<>
<span className={styles.type}>{w}</span>
{x}
</>
)}
onExpand={onExpand} onExpand={onExpand}
onDataLoad={onDataLoad} onDataLoad={onDataLoad}
/> />
); );
} }
const Label = ({ value }) => {
const [event, label] = value.split(':');
return (
<>
<span className={styles.type}>{event}</span>
{label}
</>
);
};

53
components/metrics/PageviewsChart.js
View File

@ -1,7 +1,5 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames';
import BarChart from './BarChart'; import BarChart from './BarChart';
import styles from './PageviewsChart.module.css';
export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) { export default function PageviewsChart({ websiteId, data, unit, className, animationDuration }) {
const handleUpdate = chart => { const handleUpdate = chart => {
@ -22,31 +20,30 @@ export default function PageviewsChart({ websiteId, data, unit, className, anima
} }
return ( return (
<div className={classNames(styles.chart, className)}> <BarChart
<BarChart className={className}
chartId={websiteId} chartId={websiteId}
datasets={[ datasets={[
{ {
label: 'unique visitors', label: 'unique visitors',
data: data.uniques, data: data.uniques,
lineTension: 0, lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.4)', backgroundColor: 'rgb(38, 128, 235, 0.4)',
borderColor: 'rgb(13, 102, 208, 0.4)', borderColor: 'rgb(13, 102, 208, 0.4)',
borderWidth: 1, borderWidth: 1,
}, },
{ {
label: 'page views', label: 'page views',
data: data.pageviews, data: data.pageviews,
lineTension: 0, lineTension: 0,
backgroundColor: 'rgb(38, 128, 235, 0.2)', backgroundColor: 'rgb(38, 128, 235, 0.2)',
borderColor: 'rgb(13, 102, 208, 0.2)', borderColor: 'rgb(13, 102, 208, 0.2)',
borderWidth: 1, borderWidth: 1,
}, },
]} ]}
unit={unit} unit={unit}
records={data.pageviews.length} records={data.pageviews.length}
onUpdate={handleUpdate} onUpdate={handleUpdate}
/> />
</div>
); );
} }

38
lib/queries.js
View File

@ -401,44 +401,6 @@ export function getActiveVisitors(website_id) {
return Promise.resolve([]); return Promise.resolve([]);
} }
export function getEventRankings(website_id, start_at, end_at) {
const db = getDatabase();
if (db === POSTGRESQL) {
return prisma.$queryRaw(
`
select distinct event_type w, event_value x, count(*) y
from event
where website_id=$1
and created_at between $2 and $3
group by 1, 2
order by 3 desc
`,
website_id,
start_at,
end_at,
);
}
if (db === MYSQL) {
return prisma.$queryRaw(
`
select distinct event_type w, event_value x, count(*) y
from event
where website_id=?
and created_at between ? and ?
group by 1, 2
order by 3 desc
`,
website_id,
start_at,
end_at,
);
}
return Promise.resolve([]);
}
export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit = 'day') { export function getEvents(website_id, start_at, end_at, timezone = 'utc', unit = 'day') {
const db = getDatabase(); const db = getDatabase();

37
pages/api/website/[id]/rankings.js
View File

@ -1,9 +1,28 @@
import { getRankings, getEventRankings } from 'lib/queries'; import { getRankings } from 'lib/queries';
import { ok, badRequest } from 'lib/response'; import { ok, badRequest } from 'lib/response';
const sessionColumns = ['browser', 'os', 'device', 'country']; const sessionColumns = ['browser', 'os', 'device', 'country'];
const pageviewColumns = ['url', 'referrer']; const pageviewColumns = ['url', 'referrer'];
function getTable(type) {
if (type === 'event') {
return 'event';
}
if (sessionColumns.includes(type)) {
return 'session';
}
return 'pageview';
}
function getColumn(type) {
if (type === 'event') {
return `concat(event_type, ':', event_value)`;
}
return type;
}
export default async (req, res) => { export default async (req, res) => {
const { id, type, start_at, end_at } = req.query; const { id, type, start_at, end_at } = req.query;
const websiteId = +id; const websiteId = +id;
@ -14,15 +33,13 @@ export default async (req, res) => {
return badRequest(res); return badRequest(res);
} }
if (type === 'event') { const rankings = await getRankings(
const events = await getEventRankings(websiteId, startDate, endDate); websiteId,
startDate,
return ok(res, events); endDate,
} getColumn(type),
getTable(type),
const table = sessionColumns.includes(type) ? 'session' : 'pageview'; );
const rankings = await getRankings(websiteId, startDate, endDate, type, table);
return ok(res, rankings); return ok(res, rankings);
}; };