mirror of
https://github.com/umami-software/umami.git
synced 2026-02-12 16:45:35 +01:00
Refactor BarChart component.
This commit is contained in:
parent
4618dc7f15
commit
d936ecc86e
3 changed files with 73 additions and 63 deletions
|
|
@ -13,6 +13,7 @@ export default function BarChart({
|
|||
animationDuration = 300,
|
||||
className,
|
||||
stacked = false,
|
||||
onCreate = () => {},
|
||||
onUpdate = () => {},
|
||||
}) {
|
||||
const canvas = useRef();
|
||||
|
|
@ -56,54 +57,58 @@ export default function BarChart({
|
|||
};
|
||||
|
||||
const createChart = () => {
|
||||
const options = {
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: renderTooltip,
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0,
|
||||
},
|
||||
responsiveAnimationDuration: 0,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
time: {
|
||||
unit,
|
||||
tooltipFormat: 'ddd MMMM DD YYYY',
|
||||
},
|
||||
ticks: {
|
||||
callback: renderLabel,
|
||||
minRotation: 0,
|
||||
maxRotation: 0,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
offset: true,
|
||||
stacked: true,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
stacked,
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
onCreate(options);
|
||||
|
||||
chart.current = new ChartJS(canvas.current, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
datasets,
|
||||
},
|
||||
options: {
|
||||
animation: {
|
||||
duration: animationDuration,
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
custom: renderTooltip,
|
||||
},
|
||||
hover: {
|
||||
animationDuration: 0,
|
||||
},
|
||||
responsiveAnimationDuration: 0,
|
||||
scales: {
|
||||
xAxes: [
|
||||
{
|
||||
type: 'time',
|
||||
distribution: 'series',
|
||||
time: {
|
||||
unit,
|
||||
tooltipFormat: 'ddd MMMM DD YYYY',
|
||||
},
|
||||
ticks: {
|
||||
callback: renderLabel,
|
||||
minRotation: 0,
|
||||
maxRotation: 0,
|
||||
},
|
||||
gridLines: {
|
||||
display: false,
|
||||
},
|
||||
offset: true,
|
||||
stacked: true,
|
||||
},
|
||||
],
|
||||
yAxes: [
|
||||
{
|
||||
ticks: {
|
||||
beginAtZero: true,
|
||||
},
|
||||
stacked,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
options,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue