From ba97235dd633cf773b267823b403b03722c2eb7f Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Mon, 1 Feb 2021 16:05:28 +0300
Subject: [PATCH] Align chart stripe on every dataset update

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/chart/bar-chart.tsx   |  3 ++-
 .../components/chart/zebra-stripes.plugin.ts  | 22 +++++++++++++------
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/renderer/components/chart/bar-chart.tsx b/src/renderer/components/chart/bar-chart.tsx
index 4f80258703..4b9426e797 100644
--- a/src/renderer/components/chart/bar-chart.tsx
+++ b/src/renderer/components/chart/bar-chart.tsx
@@ -136,7 +136,8 @@ export class BarChart extends React.Component<Props> {
       },
       plugins: {
         ZebraStripes: {
-          stripeColor: chartStripesColor
+          stripeColor: chartStripesColor,
+          interval: chartData.datasets.length ? chartData.datasets[0].data.length : 61
         }
       }
     };
diff --git a/src/renderer/components/chart/zebra-stripes.plugin.ts b/src/renderer/components/chart/zebra-stripes.plugin.ts
index 3a85f8d0a2..7187a5622a 100644
--- a/src/renderer/components/chart/zebra-stripes.plugin.ts
+++ b/src/renderer/components/chart/zebra-stripes.plugin.ts
@@ -7,7 +7,6 @@ import get from "lodash/get";
 
 const defaultOptions = {
   interval: 61,
-  stripeMinutes: 10,
   stripeColor: "#ffffff08",
 };
 
@@ -36,12 +35,23 @@ export const ZebraStripes = {
     chart.canvas.parentElement.removeChild(elem);
   },
 
+  updateOptions(chart: ChartJS) {
+    this.options = {
+      ...defaultOptions,
+      ...this.getOptions(chart)
+    };
+  },
+
+  getStripeMinutes() {
+    return this.options.interval < 10 ? 0 : 10;
+  },
+
   renderStripes(chart: ChartJS) {
     if (!chart.data.datasets.length) return;
-    const { interval, stripeMinutes, stripeColor } = this.options;
+    const { interval, stripeColor } = this.options;
     const { top, left, bottom, right } = chart.chartArea;
     const step = (right - left) / interval;
-    const stripeWidth = step * stripeMinutes;
+    const stripeWidth = step * this.getStripeMinutes();
     const cover = document.createElement("div");
     const styles = cover.style;
 
@@ -61,14 +71,12 @@ export const ZebraStripes = {
 
   afterInit(chart: ChartJS) {
     if (!chart.data.datasets.length) return;
-    this.options = {
-      ...defaultOptions,
-      ...this.getOptions(chart)
-    };
+    this.updateOptions(chart);
     this.updated = this.getLastUpdate(chart);
   },
 
   afterUpdate(chart: ChartJS) {
+    this.updateOptions(chart);
     this.renderStripes(chart);
   },