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

Fixed issue with hover tooltips.

Browse source
This commit is contained in:
Mike Cao 2023-06-15 20:15:31 -07:00
parent 2b13002f1b
commit ab0838e272
20 changed files with 50 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

10
components/metrics/BarChart.js
View file

@ -20,14 +20,14 @@ export function BarChart({
renderYLabel,
XAxisType = 'time',
YAxisType = 'linear',
renderTooltip,
renderTooltipPopup,
onCreate,
onUpdate,
className,
}) {
const canvas = useRef();
const chart = useRef(null);
const [tooltip, setTooltip] = useState(null);
const [tooltip, setTooltipPopup] = useState(null);
const { locale } = useLocale();
const { theme, colors } = useTheme();
@ -50,7 +50,7 @@ export function BarChart({
},
tooltip: {
enabled: false,
external: renderTooltip ? renderTooltip.bind(null, setTooltip) : undefined,
external: renderTooltipPopup ? renderTooltipPopup.bind(null, setTooltipPopup) : undefined,
},
},
scales: {
@ -93,7 +93,7 @@ export function BarChart({
};
}, [
animationDuration,
renderTooltip,
renderTooltipPopup,
renderXLabel,
XAxisType,
YAxisType,
@ -120,7 +120,7 @@ export function BarChart({
};
const updateChart = () => {
setTooltip(null);
setTooltipPopup(null);
datasets.forEach((dataset, index) => {
chart.current.data.datasets[index].data = dataset.data;

6
components/metrics/BarChart.module.css
View file

@ -13,9 +13,3 @@
.tooltip .value {
text-transform: lowercase;
}
@media only screen and (max-width: 992px) {
.chart {
/*height: 200px;*/
}
}

4
components/metrics/EventsChart.js
View file

@ -5,7 +5,7 @@ import BarChart from './BarChart';
import { getDateArray } from 'lib/date';
import { useApi, useLocale, useDateRange, useTimezone, usePageQuery } from 'hooks';
import { EVENT_COLORS } from 'lib/constants';
import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
export function EventsChart({ websiteId, className, token }) {
const { get, useQuery } = useApi();
@ -72,7 +72,7 @@ export function EventsChart({ websiteId, className, token }) {
loading={isLoading}
stacked
renderXLabel={renderDateLabels(unit, locale)}
renderTooltip={renderStatusTooltip(unit, locale)}
renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/>
);
}

4
components/metrics/PageviewsChart.js
View file

@ -1,7 +1,7 @@
import { useMemo } from 'react';
import BarChart from './BarChart';
import { useLocale, useTheme, useMessages } from 'hooks';
import { renderDateLabels, renderStatusTooltip } from 'lib/charts';
import { renderDateLabels, renderStatusTooltipPopup } from 'lib/charts';
export function PageviewsChart({ websiteId, data, unit, className, loading, ...props }) {
const { formatMessage, labels } = useMessages();
@ -36,7 +36,7 @@ export function PageviewsChart({ websiteId, data, unit, className, loading, ...p
unit={unit}
loading={loading}
renderXLabel={renderDateLabels(unit, locale)}
renderTooltip={renderStatusTooltip(unit, locale)}
renderTooltipPopup={renderStatusTooltipPopup(unit, locale)}
/>
);
}