squash: feat(config): add options to select traffic chart style

1 files changed, 28 insertions, 0 deletions

diff --git a/src/hooks/useLineChart.js b/src/hooks/useLineChart.js
new file mode 100644
index 0000000..2ab23a0
--- /dev/null
+++ b/src/hooks/useLineChart.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import { commonChartOptions } from 'm/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]);
+}