60 lines
2.0 KiB
JavaScript
60 lines
2.0 KiB
JavaScript
import React, {useEffect} from "react";
|
|
import Highcharts from 'highcharts';
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {useTranslation} from "react-i18next";
|
|
import Accessibility from "highcharts/modules/accessibility";
|
|
import {withReducedSaturation} from "../../util/colors";
|
|
|
|
const PunchCard = ({series}) => {
|
|
const {t} = useTranslation();
|
|
const {graphTheming, nightModeEnabled} = useTheme();
|
|
useEffect(() => {
|
|
const punchCard = {
|
|
name: t('html.label.relativeJoinActivity'),
|
|
color: nightModeEnabled ? withReducedSaturation('#222') : '#222',
|
|
type: 'scatter',
|
|
data: series
|
|
};
|
|
Accessibility(Highcharts);
|
|
Highcharts.setOptions(graphTheming);
|
|
setTimeout(() => Highcharts.chart('punchcard', {
|
|
chart: {
|
|
backgroundColor: 'transparent',
|
|
plotBackgroundColor: 'transparent',
|
|
defaultSeriesType: 'scatter'
|
|
},
|
|
title: {text: ''},
|
|
xAxis: {
|
|
type: 'datetime',
|
|
dateTimeLabelFormats: {
|
|
// https://www.php.net/manual/en/function.strftime.php
|
|
hour: '%I %P',
|
|
day: '%I %P'
|
|
},
|
|
tickInterval: 3600000
|
|
},
|
|
time: {
|
|
timezoneOffset: 0
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: t('html.label.dayOfweek')
|
|
},
|
|
reversed: true,
|
|
categories: t('html.label.weekdays').replaceAll("'", '').split(', ')
|
|
},
|
|
tooltip: {
|
|
pointFormat: t('html.label.active') + ': {point.z}'
|
|
},
|
|
series: [punchCard]
|
|
}), 25)
|
|
}, [series, graphTheming, t, nightModeEnabled])
|
|
|
|
return (
|
|
<div className="chart-area" id="punchcard">
|
|
<span className="loader"/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PunchCard |