src/hooks/useLineChart.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React from 'react';
import { commonChartOptions } from '../misc/chart';

const { useEffect } = React;
const options = commonChartOptions;

export default function useLineChart(
  Chart,
  elementId,
  data,
  subscription,
  extraChartOptions = {}
) {
  useEffect(() => {
    const ctx = document.getElementById(elementId).getContext('2d');
    const c = new Chart(ctx, {
      type: 'line',
      data,
      options: { ...options, ...extraChartOptions }
    });
    const unsubscribe =
      subscription && subscription.subscribe(() => c.update());
    return () => {
      unsubscribe && unsubscribe();
      c.destroy();
    };
  }, [Chart, elementId, data, subscription, extraChartOptions]);
}