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

Fixed grid lines on bar chart.

Browse Source
This commit is contained in:
Mike Cao 2023-03-16 02:05:56 -07:00
parent 54051d7204
commit afec08b355
1 changed files with 33 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
components/metrics/BarChart.js
View File

@ -8,7 +8,6 @@ import { formatLongNumber } from 'lib/format';
import { dateFormat } from 'lib/date'; import { dateFormat } from 'lib/date';
import useLocale from 'hooks/useLocale'; import useLocale from 'hooks/useLocale';
import useTheme from 'hooks/useTheme'; import useTheme from 'hooks/useTheme';
import useForceUpdate from 'hooks/useForceUpdate';
import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants'; import { DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
import styles from './BarChart.module.css'; import styles from './BarChart.module.css';
@ -27,22 +26,20 @@ export default function BarChart({
const [tooltip, setTooltip] = useState(null); const [tooltip, setTooltip] = useState(null);
const { locale } = useLocale(); const { locale } = useLocale();
const [theme] = useTheme(); const [theme] = useTheme();
const forceUpdate = useForceUpdate();
const colors = useMemo( const colors = useMemo(
() => ({ () => ({
text: THEME_COLORS[theme].gray700, text: THEME_COLORS[theme].gray700,
line: THEME_COLORS[theme].gray200, line: THEME_COLORS[theme].gray200,
zeroLine: THEME_COLORS[theme].gray500,
}), }),
[theme], [theme],
); );
function renderYLabel(label) { const renderYLabel = label => {
return +label > 1000 ? formatLongNumber(label) : label; return +label > 1000 ? formatLongNumber(label) : label;
} };
function renderTooltip(model) { const renderTooltip = model => {
const { opacity, labelColors, dataPoints } = model.tooltip; const { opacity, labelColors, dataPoints } = model.tooltip;
if (!dataPoints?.length || !opacity) { if (!dataPoints?.length || !opacity) {
@ -64,9 +61,11 @@ export default function BarChart({
</div> </div>
</>, </>,
); );
} };
const createChart = () => {
Chart.defaults.font.family = 'Inter';
function createChart() {
const options = { const options = {
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
@ -92,10 +91,17 @@ export default function BarChart({
x: { x: {
type: 'time', type: 'time',
stacked: true, stacked: true,
time: {
unit,
},
grid: { grid: {
display: false, display: false,
}, },
border: {
color: colors.line,
},
ticks: { ticks: {
color: colors.text,
autoSkip: false, autoSkip: false,
maxRotation: 0, maxRotation: 0,
}, },
@ -105,7 +111,14 @@ export default function BarChart({
min: 0, min: 0,
beginAtZero: true, beginAtZero: true,
stacked, stacked,
grid: {
color: colors.line,
},
border: {
color: colors.line,
},
ticks: { ticks: {
color: colors.text,
callback: renderYLabel, callback: renderYLabel,
}, },
}, },
@ -121,19 +134,23 @@ export default function BarChart({
}, },
options, options,
}); });
} };
function updateChart() { const updateChart = () => {
const { options } = chart.current; const { animation, scales } = chart.current.options;
options.animation.duration = animationDuration; animation.duration = animationDuration;
scales.x.ticks.color = colors.text;
scales.x.time.unit = unit;
scales.x.border.color = colors.line;
scales.y.ticks.color = colors.text;
scales.y.grid.color = colors.line;
scales.y.border.color = colors.line;
onUpdate(chart.current); onUpdate(chart.current);
chart.current.update(); chart.current.update();
};
forceUpdate();
}
useEffect(() => { useEffect(() => {
if (datasets) { if (datasets) {
@ -144,7 +161,7 @@ export default function BarChart({
updateChart(); updateChart();
} }
} }
}, [datasets, unit, animationDuration, locale, loading]); }, [datasets, unit, theme, animationDuration, locale, loading]);
return ( return (
<> <>