1 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/lib/utils/chart_utils.js b/app/assets/javascripts/lib/utils/chart_utils.js
new file mode 100644
index 00000000000..0f78756aac8
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/chart_utils.js
@@ -0,0 +1,83 @@
+const commonTooltips = () => ({
+  mode: 'x',
+  intersect: false,
+});
+
+const adjustedFontScale = () => ({
+  fontSize: 8,
+});
+
+const yAxesConfig = (shouldAdjustFontSize = false) => ({
+  yAxes: [
+    {
+      ticks: {
+        beginAtZero: true,
+        ...(shouldAdjustFontSize ? adjustedFontScale() : {}),
+      },
+    },
+  ],
+});
+
+const xAxesConfig = (shouldAdjustFontSize = false) => ({
+  xAxes: [
+    {
+      ticks: {
+        ...(shouldAdjustFontSize ? adjustedFontScale() : {}),
+      },
+    },
+  ],
+});
+
+const commonChartOptions = () => ({
+  responsive: true,
+  maintainAspectRatio: false,
+  legend: false,
+});
+
+export const barChartOptions = shouldAdjustFontSize => ({
+  ...commonChartOptions(),
+  scales: {
+    ...yAxesConfig(shouldAdjustFontSize),
+    ...xAxesConfig(shouldAdjustFontSize),
+  },
+  tooltips: {
+    ...commonTooltips(),
+    displayColors: false,
+    callbacks: {
+      title() {
+        return '';
+      },
+      label({ xLabel, yLabel }) {
+        return `${xLabel}: ${yLabel}`;
+      },
+    },
+  },
+});
+
+export const pieChartOptions = commonChartOptions;
+
+export const lineChartOptions = ({ width, numberOfPoints, shouldAdjustFontSize }) => ({
+  ...commonChartOptions(),
+  scales: {
+    ...yAxesConfig(shouldAdjustFontSize),
+    ...xAxesConfig(shouldAdjustFontSize),
+  },
+  elements: {
+    point: {
+      hitRadius: width / (numberOfPoints * 2),
+    },
+  },
+  tooltips: {
+    ...commonTooltips(),
+    caretSize: 0,
+    multiKeyBackground: 'rgba(0,0,0,0)',
+    callbacks: {
+      labelColor({ datasetIndex }, { config }) {
+        return {
+          backgroundColor: config.data.datasets[datasetIndex].backgroundColor,
+          borderColor: 'rgba(0,0,0,0)',
+        };
+      },
+    },
+  },
+});