From db92bfb5943ab0249b5fc30c58e505ea3a97bf01 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Fri, 20 Apr 2018 16:15:53 +0200
Subject: [PATCH 1/2] feat(charts): CustomTooltips

---
 package.json                     |  1 +
 src/views/Charts/Charts.js       | 15 +++++++++++---
 src/views/Dashboard/Dashboard.js | 34 ++++++++++++++++++++++++++++++--
 3 files changed, 45 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index ca7f5c9..caa5559 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.0-beta.10",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.0.0",
     "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
diff --git a/src/views/Charts/Charts.js b/src/views/Charts/Charts.js
index 1be2648..4415837 100644
--- a/src/views/Charts/Charts.js
+++ b/src/views/Charts/Charts.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
 import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips/js/';
 
 const line = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@@ -142,6 +143,14 @@ const polar = {
   ],
 };
 
+const options = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
+  maintainAspectRatio: false
+}
+
 class Charts extends Component {
   render() {
     return (
@@ -158,7 +167,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Line data={line} options={{ maintainAspectRatio: false, }} />
+                <Line data={line} options={options} />
               </div>
             </CardBody>
           </Card>
@@ -173,7 +182,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Bar data={bar} options={{ maintainAspectRatio: false, }} />
+                <Bar data={bar} options={options} />
               </div>
             </CardBody>
           </Card>
@@ -233,7 +242,7 @@ class Charts extends Component {
             </CardHeader>
             <CardBody>
               <div className="chart-wrapper">
-                <Polar data={polar} />
+                <Polar data={polar} options={options}/>
               </div>
             </CardBody>
           </Card>
diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js
index 00385c3..8f7087f 100644
--- a/src/views/Dashboard/Dashboard.js
+++ b/src/views/Dashboard/Dashboard.js
@@ -21,6 +21,7 @@ import {
   Table,
 } from 'reactstrap';
 import Widget03 from '../../views/Widgets/Widget03'
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips/js/';
 
 const brandPrimary = '#20a8d8';
 const brandSuccess = '#4dbd74';
@@ -42,6 +43,10 @@ const cardChartData1 = {
 };
 
 const cardChartOpts1 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -78,8 +83,9 @@ const cardChartOpts1 = {
       hitRadius: 10,
       hoverRadius: 4,
     },
-  },
-};
+  }
+}
+
 
 // Card Chart 2
 const cardChartData2 = {
@@ -95,6 +101,10 @@ const cardChartData2 = {
 };
 
 const cardChartOpts2 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -149,6 +159,10 @@ const cardChartData3 = {
 };
 
 const cardChartOpts3 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -189,6 +203,10 @@ const cardChartData4 = {
 };
 
 const cardChartOpts4 = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,
@@ -233,6 +251,10 @@ const makeSocialBoxData = (dataSetNo) => {
 };
 
 const socialChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   responsive: true,
   maintainAspectRatio: false,
   legend: {
@@ -303,6 +325,10 @@ const makeSparkLineData = (dataSetNo, variant) => {
 };
 
 const sparklineChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   responsive: true,
   maintainAspectRatio: true,
   scales: {
@@ -392,6 +418,10 @@ const mainChart = {
 };
 
 const mainChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,

From 0e28db82e0f87285e010ff23b014cff2ab4cc8fd Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 24 Apr 2018 12:55:21 +0200
Subject: [PATCH 2/2] feat: chart.js custom tooltips plugin

---
 package.json                     |  4 ++--
 src/views/Charts/Charts.js       |  2 +-
 src/views/Dashboard/Dashboard.js | 14 +++++++++++---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index caa5559..b408290 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/coreui-free-react-admin-template",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "https://coreui.io",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.0-beta.10",
-    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.0.0",
+    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
     "@coreui/react": "^2.0.0-beta.1",
     "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
diff --git a/src/views/Charts/Charts.js b/src/views/Charts/Charts.js
index 4415837..509a520 100644
--- a/src/views/Charts/Charts.js
+++ b/src/views/Charts/Charts.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
 import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips/js/';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 
 const line = {
   labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js
index 8f7087f..43497df 100644
--- a/src/views/Dashboard/Dashboard.js
+++ b/src/views/Dashboard/Dashboard.js
@@ -21,7 +21,7 @@ import {
   Table,
 } from 'reactstrap';
 import Widget03 from '../../views/Widgets/Widget03'
-import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips/js/';
+import { CustomTooltips } from '@coreui/coreui-plugin-chartjs-custom-tooltips';
 
 const brandPrimary = '#20a8d8';
 const brandSuccess = '#4dbd74';
@@ -387,7 +387,7 @@ for (var i = 0; i <= elements; i++) {
 }
 
 const mainChart = {
-  labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S', 'M', 'T', 'W', 'T', 'F', 'S', 'S'],
+  labels: ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
   datasets: [
     {
       label: 'My First dataset',
@@ -420,7 +420,15 @@ const mainChart = {
 const mainChartOpts = {
   tooltips: {
     enabled: false,
-    custom: CustomTooltips
+    custom: CustomTooltips,
+    intersect: true,
+    mode: 'index',
+    position: 'nearest',
+    callbacks: {
+      labelColor: function(tooltipItem, chart) {
+        return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+      }
+    }
   },
   maintainAspectRatio: false,
   legend: {