Merge branch 'master' of https://github.com/coreui/coreui-free-react-admin-template

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,6 +13,7 @@
   },
   "dependencies": {
     "@coreui/coreui": "^2.0.0-beta.10",
+    "@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",
@@ -35,8 +36,8 @@
     "react-scripts": "^1.1.4"
   },
   "scripts": {
-    "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
-    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
+    "build-css": "node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss",
+    "watch-css": "npm run build-css && node-sass-chokidar --include-path ./node_modules ./src/scss -o ./src/scss --watch --recursive",
     "start-js": "react-scripts start",
     "start": "npm-run-all -p watch-css start-js",
     "build-js": "react-scripts build",

src/scss/style.scss

@@ -2,9 +2,9 @@
 @import "variables";
 
 // Import styles
-@import "../../node_modules/@coreui/coreui/scss/coreui";
+@import "@coreui/coreui/scss/coreui.scss";
 // Temp fix for reactstrap
-@import 'node_modules/@coreui/coreui/scss/_dropdown-menu-right.scss';
+@import '@coreui/coreui/scss/_dropdown-menu-right.scss';
 
 // If you want to add something do it here
 @import "custom";

src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js

@@ -209,7 +209,7 @@ class ButtonDropdowns extends Component {
                   <DropdownToggle caret size="lg">
                     Direction Up
                   </DropdownToggle>
-                  <DropdownMenu>
+                  <DropdownMenu style={{bottom: "-116px"}}>
                     <DropdownItem header>Header</DropdownItem>
                     <DropdownItem disabled>Action Disabled</DropdownItem>
                     <DropdownItem>Action</DropdownItem>

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';
 
 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>

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';
 
 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: {
@@ -361,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',
@@ -392,6 +418,18 @@ const mainChart = {
 };
 
 const mainChartOpts = {
+  tooltips: {
+    enabled: false,
+    custom: CustomTooltips,
+    intersect: true,
+    mode: 'index',
+    position: 'nearest',
+    callbacks: {
+      labelColor: function(tooltipItem, chart) {
+        return { backgroundColor: chart.data.datasets[tooltipItem.datasetIndex].borderColor }
+      }
+    }
+  },
   maintainAspectRatio: false,
   legend: {
     display: false,