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

Fixed chart rendering issue.

Browse Source
This commit is contained in:
Mike Cao 2024-03-29 08:39:05 -07:00
parent e1ad3b99cd
commit 40c1ce40e2
2 changed files with 63 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/charts/BarChart.tsx
View File

@ -1,3 +1,4 @@
import { useMemo } from 'react';
import { useTheme } from 'components/hooks';
import Chart, { ChartProps } from 'components/charts/Chart';
import { renderNumberLabels } from 'lib/charts';
@ -25,45 +26,47 @@ export function BarChart(props: BarChartProps) {
stacked = false,
} = props;
const options = {
scales: {
x: {
type: XAxisType,
stacked: true,
time: {
unit,
const options = useMemo(() => {
return {
scales: {
x: {
type: XAxisType,
stacked: true,
time: {
unit,
},
grid: {
display: false,
},
border: {
color: colors.chart.line,
},
ticks: {
color: colors.chart.text,
autoSkip: false,
maxRotation: 0,
callback: renderXLabel,
},
},
grid: {
display: false,
},
border: {
color: colors.chart.line,
},
ticks: {
color: colors.chart.text,
autoSkip: false,
maxRotation: 0,
callback: renderXLabel,
y: {
type: YAxisType,
min: 0,
beginAtZero: true,
stacked,
grid: {
color: colors.chart.line,
},
border: {
color: colors.chart.line,
},
ticks: {
color: colors.chart.text,
callback: renderYLabel || renderNumberLabels,
},
},
},
y: {
type: YAxisType,
min: 0,
beginAtZero: true,
stacked,
grid: {
color: colors.chart.line,
},
border: {
color: colors.chart.line,
},
ticks: {
color: colors.chart.text,
callback: renderYLabel || renderNumberLabels,
},
},
},
};
};
}, [colors]);
const handleTooltip = ({ tooltip }: { tooltip: any }) => {
const { opacity } = tooltip;

46
src/components/charts/Chart.tsx
View File

@ -1,4 +1,4 @@
import { useState, useRef, useEffect, ReactNode } from 'react';
import { useState, useRef, useEffect, useMemo, ReactNode } from 'react';
import { Loading } from 'react-basics';
import classNames from 'classnames';
import ChartJS, { LegendItem } from 'chart.js/auto';
@ -38,29 +38,31 @@ export function Chart({
const chart = useRef(null);
const [legendItems, setLegendItems] = useState([]);
const options = {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
const options = useMemo(() => {
return {
responsive: true,
maintainAspectRatio: false,
animation: {
duration: animationDuration,
resize: {
duration: 0,
},
active: {
duration: 0,
},
},
active: {
duration: 0,
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: onTooltip,
},
},
},
plugins: {
legend: {
display: false,
},
tooltip: {
enabled: false,
external: onTooltip,
},
},
...chartOptions,
};
...chartOptions,
};
}, [chartOptions]);
const createChart = (data: any) => {
ChartJS.defaults.font.family = 'Inter';