From 7e339bb9307b2b90427f5b7a3dbe80b85553a709 Mon Sep 17 00:00:00 2001
From: "vikas.kumar" <vikas.kumar@kreeti.com>
Date: Fri, 21 May 2021 10:16:59 +0530
Subject: [PATCH 1/2] function override for firefox

---
 react-c3js.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 src/index.js  | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 88 insertions(+)

diff --git a/react-c3js.js b/react-c3js.js
index 3d690a4..9600834 100644
--- a/react-c3js.js
+++ b/react-c3js.js
@@ -41,6 +41,50 @@ var C3Chart = function (_React$Component) {
     key: 'componentDidMount',
     value: function componentDidMount() {
       c3 = require('c3');
+
+      // function override
+      c3.chart.internal.fn.tooltipPosition = function (dataToShow, tWidth, tHeight, element) {
+        var $$ = this,
+            config = $$.config,
+            d3 = $$.d3;
+        var svgLeft, tooltipLeft, tooltipRight, tooltipTop, chartRight;
+        var forArc = $$.hasArcType(),
+            mouse = d3.mouse(element);
+        if (navigator.userAgent.indexOf("Firefox") != -1) {
+          // this works in Firefox
+          mouse = [d3.event.offsetX - tWidth / 2 + 20, d3.event.offsetY - tHeight - 20];
+        }
+        // Determin tooltip position
+        if (forArc) {
+          tooltipLeft = ($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2 + mouse[0];
+          tooltipTop = $$.height / 2 + mouse[1] + 20;
+        } else {
+          svgLeft = $$.getSvgLeft(true);
+          if (config.axis_rotated) {
+            tooltipLeft = svgLeft + mouse[0] + 100;
+            tooltipRight = tooltipLeft + tWidth;
+            chartRight = $$.currentWidth - $$.getCurrentPaddingRight();
+            tooltipTop = $$.x(dataToShow[0].x) + 20;
+          } else {
+            tooltipLeft = svgLeft + $$.getCurrentPaddingLeft(true) + $$.x(dataToShow[0].x) + 20;
+            tooltipRight = tooltipLeft + tWidth;
+            chartRight = svgLeft + $$.currentWidth - $$.getCurrentPaddingRight();
+            tooltipTop = mouse[1] + 15;
+          }
+
+          if (tooltipRight > chartRight) {
+            // 20 is needed for Firefox to keep tooltip width
+            tooltipLeft -= tooltipRight - chartRight + 20;
+          }
+          if (tooltipTop + tHeight > $$.currentHeight) {
+            tooltipTop -= tHeight + 30;
+          }
+        }
+        if (tooltipTop < 0) {
+          tooltipTop = 0;
+        }
+        return { top: tooltipTop, left: tooltipLeft };
+      };
       this.updateChart(this.props);
     }
   }, {
diff --git a/src/index.js b/src/index.js
index 562ee70..8f1a081 100644
--- a/src/index.js
+++ b/src/index.js
@@ -46,6 +46,50 @@ class C3Chart extends React.Component {
 
   componentDidMount() {
     c3 = require('c3');
+
+    // function override
+    c3.chart.internal.fn.tooltipPosition = function (dataToShow, tWidth, tHeight, element) {
+      var $$ = this,
+          config = $$.config,
+          d3 = $$.d3;
+      var svgLeft, tooltipLeft, tooltipRight, tooltipTop, chartRight;
+      var forArc = $$.hasArcType(),
+          mouse = d3.mouse(element);
+      if (navigator.userAgent.indexOf("Firefox") != -1) {
+        // this works in Firefox
+        mouse = [d3.event.offsetX - tWidth / 2 + 20, d3.event.offsetY - tHeight - 20];
+      }
+      // Determin tooltip position
+      if (forArc) {
+        tooltipLeft = ($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2 + mouse[0];
+        tooltipTop = $$.height / 2 + mouse[1] + 20;
+      } else {
+        svgLeft = $$.getSvgLeft(true);
+        if (config.axis_rotated) {
+          tooltipLeft = svgLeft + mouse[0] + 100;
+          tooltipRight = tooltipLeft + tWidth;
+          chartRight = $$.currentWidth - $$.getCurrentPaddingRight();
+          tooltipTop = $$.x(dataToShow[0].x) + 20;
+        } else {
+          tooltipLeft = svgLeft + $$.getCurrentPaddingLeft(true) + $$.x(dataToShow[0].x) + 20;
+          tooltipRight = tooltipLeft + tWidth;
+          chartRight = svgLeft + $$.currentWidth - $$.getCurrentPaddingRight();
+          tooltipTop = mouse[1] + 15;
+        }
+
+        if (tooltipRight > chartRight) {
+          // 20 is needed for Firefox to keep tooltip width
+          tooltipLeft -= tooltipRight - chartRight + 20;
+        }
+        if (tooltipTop + tHeight > $$.currentHeight) {
+          tooltipTop -= tHeight + 30;
+        }
+      }
+      if (tooltipTop < 0) {
+        tooltipTop = 0;
+      }
+      return { top: tooltipTop, left: tooltipLeft };
+    };
     this.updateChart(this.props);
   }
 

From 57212b1d1db3ac64c979c818a0b2361a163505df Mon Sep 17 00:00:00 2001
From: "vikas.kumar" <vikas.kumar@kreeti.com>
Date: Fri, 21 May 2021 12:39:10 +0530
Subject: [PATCH 2/2] adjust margin

---
 react-c3js.js | 4 +++-
 src/index.js  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/react-c3js.js b/react-c3js.js
index 9600834..3f03746 100644
--- a/react-c3js.js
+++ b/react-c3js.js
@@ -52,7 +52,7 @@ var C3Chart = function (_React$Component) {
             mouse = d3.mouse(element);
         if (navigator.userAgent.indexOf("Firefox") != -1) {
           // this works in Firefox
-          mouse = [d3.event.offsetX - tWidth / 2 + 20, d3.event.offsetY - tHeight - 20];
+          mouse = [d3.event.offsetX - 80, d3.event.offsetY - 80];
         }
         // Determin tooltip position
         if (forArc) {
@@ -83,8 +83,10 @@ var C3Chart = function (_React$Component) {
         if (tooltipTop < 0) {
           tooltipTop = 0;
         }
+
         return { top: tooltipTop, left: tooltipLeft };
       };
+
       this.updateChart(this.props);
     }
   }, {
diff --git a/src/index.js b/src/index.js
index 8f1a081..e39b6d5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -57,7 +57,7 @@ class C3Chart extends React.Component {
           mouse = d3.mouse(element);
       if (navigator.userAgent.indexOf("Firefox") != -1) {
         // this works in Firefox
-        mouse = [d3.event.offsetX - tWidth / 2 + 20, d3.event.offsetY - tHeight - 20];
+        mouse = [d3.event.offsetX - 80, d3.event.offsetY - 80];
       }
       // Determin tooltip position
       if (forArc) {
@@ -88,8 +88,10 @@ class C3Chart extends React.Component {
       if (tooltipTop < 0) {
         tooltipTop = 0;
       }
+
       return { top: tooltipTop, left: tooltipLeft };
     };
+
     this.updateChart(this.props);
   }