96 lines
1.9 KiB
TypeScript
96 lines
1.9 KiB
TypeScript
import React, { useRef, useEffect } from 'react';
|
|
import {
|
|
Chart as ChartJS,
|
|
LinearScale,
|
|
CategoryScale,
|
|
BarElement,
|
|
PointElement,
|
|
LineElement,
|
|
Legend,
|
|
Tooltip,
|
|
} from 'chart.js';
|
|
import { Chart } from 'react-chartjs-2';
|
|
import faker from 'faker';
|
|
import { ChartView } from './ChartView';
|
|
|
|
ChartJS.register(
|
|
LinearScale,
|
|
CategoryScale,
|
|
BarElement,
|
|
PointElement,
|
|
LineElement,
|
|
Legend,
|
|
Tooltip
|
|
);
|
|
|
|
const labels = ['1', '2', '3', '4', '5', '6', '7', '8', '8', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30'];
|
|
|
|
export const data = {
|
|
labels,
|
|
datasets: [
|
|
{
|
|
type: 'line' as const,
|
|
label: 'Dataset 1',
|
|
borderColor: '#C2D5FB',
|
|
borderWidth: 2,
|
|
fill: false,
|
|
data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })),
|
|
},
|
|
{
|
|
type: 'bar' as const,
|
|
label: 'Dataset 3',
|
|
backgroundColor: '#255488',
|
|
data: labels.map(() => faker.datatype.number({ min: 0, max: 140000 })),
|
|
},
|
|
],
|
|
};
|
|
|
|
function triggerTooltip(chart: ChartJS | null) {
|
|
const tooltip = chart?.tooltip;
|
|
|
|
if (!tooltip) {
|
|
return;
|
|
}
|
|
|
|
if (tooltip.getActiveElements().length > 0) {
|
|
tooltip.setActiveElements([], { x: 0, y: 0 });
|
|
} else {
|
|
const { chartArea } = chart;
|
|
|
|
tooltip.setActiveElements(
|
|
[
|
|
{
|
|
datasetIndex: 0,
|
|
index: 2,
|
|
},
|
|
{
|
|
datasetIndex: 1,
|
|
index: 2,
|
|
},
|
|
],
|
|
{
|
|
x: (chartArea.left + chartArea.right) / 2,
|
|
y: (chartArea.top + chartArea.bottom) / 2,
|
|
}
|
|
);
|
|
}
|
|
|
|
chart.update();
|
|
}
|
|
|
|
export function LineBarChart() {
|
|
const chartRef = useRef<ChartJS>(null);
|
|
|
|
useEffect(() => {
|
|
const chart = chartRef.current;
|
|
|
|
triggerTooltip(chart);
|
|
}, []);
|
|
|
|
return (
|
|
<ChartView>
|
|
<Chart ref={chartRef} type='bar' data={data} />
|
|
</ChartView>
|
|
)
|
|
}
|