From 9e1487685ce98255204428862870a7c97e017cc6 Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 2 Feb 2021 11:45:45 +0300
Subject: [PATCH] Fix: charts stripes alignment (#2054)

* Align chart stripe on every dataset update

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Removing default stripes interval

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

diff --git a/src/renderer/components/chart/bar-chart.tsx b/src/renderer/components/chart/bar-chart.tsx
index 4f80258703..19ef031ba6 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[0].data.length
         }
       }
     };
diff --git a/src/renderer/components/chart/zebra-stripes.plugin.ts b/src/renderer/components/chart/zebra-stripes.plugin.ts
index 3a85f8d0a2..f190401066 100644
--- a/src/renderer/components/chart/zebra-stripes.plugin.ts
+++ b/src/renderer/components/chart/zebra-stripes.plugin.ts
@@ -6,8 +6,6 @@ import moment, { Moment } from "moment";
 import get from "lodash/get";
 
 const defaultOptions = {
-  interval: 61,
-  stripeMinutes: 10,
   stripeColor: "#ffffff08",
 };
 
@@ -36,12 +34,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 +70,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);
   },