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

Dark mode.

Browse source
This commit is contained in:
Mike Cao 2020-09-20 01:33:39 -07:00
parent 4bb95cd997
commit aa265d1d42
29 changed files with 221 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

26
components/metrics/BarChart.js
View file

@ -6,6 +6,8 @@ import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/lang';
import useLocale from 'hooks/useLocale';
import styles from './BarChart.module.css';
import useTheme from 'hooks/useTheme';
import { THEME_COLORS } from 'lib/constants';
export default function BarChart({
chartId,
@ -23,6 +25,12 @@ export default function BarChart({
const chart = useRef();
const [tooltip, setTooltip] = useState({});
const [locale] = useLocale();
const [theme] = useTheme();
const colors = {
text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200,
zeroLine: THEME_COLORS[theme].gray500,
};
function renderXLabel(label, index, values) {
const d = new Date(values[index].value);
@ -97,6 +105,11 @@ export default function BarChart({
responsive: true,
responsiveAnimationDuration: 0,
maintainAspectRatio: false,
legend: {
labels: {
fontColor: colors.text,
},
},
scales: {
xAxes: [
{
@ -110,6 +123,7 @@ export default function BarChart({
callback: renderXLabel,
minRotation: 0,
maxRotation: 0,
fontColor: colors.text,
},
gridLines: {
display: false,
@ -123,6 +137,11 @@ export default function BarChart({
ticks: {
callback: renderYLabel,
beginAtZero: true,
fontColor: colors.text,
},
gridLines: {
color: colors.line,
zeroLineColor: colors.zeroLine,
},
stacked,
},
@ -144,8 +163,13 @@ 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].gridLines.color = colors.line;
options.scales.yAxes[0].gridLines.zeroLineColor = colors.zeroLine;
options.animation.duration = animationDuration;
options.tooltips.custom = renderTooltip;
@ -161,7 +185,7 @@ export default function BarChart({
updateChart();
}
}
}, [datasets, unit, animationDuration, locale]);
}, [datasets, unit, animationDuration, locale, theme]);
return (
<>