From cc35147078b00ae50eda3fdc7d34c696692108fc Mon Sep 17 00:00:00 2001
From: "Mr.Dr.Professor Patrick" <alaev89@yandex-team.ru>
Date: Tue, 14 Nov 2023 13:08:29 +0100
Subject: [PATCH] fix(Highcharts plugin): fix area trigger overlapping (#342)

---
 .../area/WithThreshold.stories.tsx            | 57 +++++++++++++
 .../__stories__/combined/AreaLine.stories.tsx | 82 +++++++++++++++++++
 .../renderer/helpers/config/config.js         |  7 --
 .../renderer/helpers/config/options.js        |  2 -
 4 files changed, 139 insertions(+), 9 deletions(-)
 create mode 100644 src/plugins/highcharts/__stories__/area/WithThreshold.stories.tsx
 create mode 100644 src/plugins/highcharts/__stories__/combined/AreaLine.stories.tsx

diff --git a/src/plugins/highcharts/__stories__/area/WithThreshold.stories.tsx b/src/plugins/highcharts/__stories__/area/WithThreshold.stories.tsx
new file mode 100644
index 00000000..10192766
--- /dev/null
+++ b/src/plugins/highcharts/__stories__/area/WithThreshold.stories.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {ChartKit} from '../../../../components/ChartKit';
+import type {HighchartsWidgetData} from '../../types';
+import {ChartStory} from '../components/ChartStory';
+
+export default {
+    title: 'Plugins/Highcharts/Area',
+    component: ChartKit,
+} as Meta;
+
+const data = {
+    data: {
+        graphs: [
+            {
+                data: [
+                    29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,
+                ],
+            },
+        ],
+    },
+    config: {
+        hideHolidaysBands: true,
+    },
+    libraryConfig: {
+        chart: {
+            type: 'area',
+        },
+        plotOptions: {
+            series: {
+                threshold: 100,
+            },
+        },
+        xAxis: {
+            categories: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec',
+            ],
+        },
+    },
+} as HighchartsWidgetData;
+
+const Template: Story<any> = () => {
+    return <ChartStory data={data} height="300px" />;
+};
+
+export const WithThreshold = Template.bind({});
diff --git a/src/plugins/highcharts/__stories__/combined/AreaLine.stories.tsx b/src/plugins/highcharts/__stories__/combined/AreaLine.stories.tsx
new file mode 100644
index 00000000..5abfa84b
--- /dev/null
+++ b/src/plugins/highcharts/__stories__/combined/AreaLine.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import {Meta, Story} from '@storybook/react';
+import {ChartKit} from '../../../../components/ChartKit';
+import type {HighchartsWidgetData} from '../../types';
+import {ChartStory} from '../components/ChartStory';
+
+export default {
+    title: 'Plugins/Highcharts/Combined Charts',
+    component: ChartKit,
+} as Meta;
+
+const data = {
+    data: {
+        graphs: [
+            {
+                data: [29.9, 40, 30.4, 50, 60, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
+            },
+            {
+                type: 'area',
+                data: [
+                    144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2,
+                ],
+                yAxis: 1,
+            },
+        ],
+    },
+    config: {
+        hideHolidaysBands: true,
+    },
+    libraryConfig: {
+        chart: {
+            marginRight: 80,
+            zoomType: 'xy',
+        },
+        xAxis: {
+            categories: [
+                'Jan',
+                'Feb',
+                'Mar',
+                'Apr',
+                'May',
+                'Jun',
+                'Jul',
+                'Aug',
+                'Sep',
+                'Oct',
+                'Nov',
+                'Dec',
+            ],
+            endOnTick: false,
+            startOnTick: false,
+        },
+        yAxis: [
+            {
+                lineWidth: 1,
+                title: {
+                    text: 'Primary Axis',
+                },
+                labels: {
+                    enabled: true,
+                },
+            },
+            {
+                lineWidth: 1,
+                opposite: true,
+                title: {
+                    text: 'Secondary Axis',
+                },
+            },
+        ],
+        tooltip: {
+            shared: true,
+            valueDecimals: 0,
+        },
+    },
+} as HighchartsWidgetData;
+
+const Template: Story<any> = () => {
+    return <ChartStory data={data} />;
+};
+
+export const AreaLine = Template.bind({});
diff --git a/src/plugins/highcharts/renderer/helpers/config/config.js b/src/plugins/highcharts/renderer/helpers/config/config.js
index 4a0239a0..cbd9f804 100644
--- a/src/plugins/highcharts/renderer/helpers/config/config.js
+++ b/src/plugins/highcharts/renderer/helpers/config/config.js
@@ -1718,13 +1718,6 @@ export function prepareConfig(data, options, isMobile, holidays) {
                     },
                 },
             },
-            area:
-                series.length === 1
-                    ? {
-                          trackByArea: false,
-                          stickyTracking: true,
-                      }
-                    : {},
         },
         xAxis: {
             crosshair: options.splitTooltip
diff --git a/src/plugins/highcharts/renderer/helpers/config/options.js b/src/plugins/highcharts/renderer/helpers/config/options.js
index a1567df1..d60217a2 100644
--- a/src/plugins/highcharts/renderer/helpers/config/options.js
+++ b/src/plugins/highcharts/renderer/helpers/config/options.js
@@ -213,8 +213,6 @@ const options = {
         area: Object.assign(
             {
                 boostThreshold: 0, // https://jsfiddle.net/2ahd7c9b
-                trackByArea: true,
-                stickyTracking: false,
             },
             first,
             wizardGraphDataLabels,