From db92bfb5943ab0249b5fc30c58e505ea3a97bf01 Mon Sep 17 00:00:00 2001 From: xidedix Date: Fri, 20 Apr 2018 16:15:53 +0200 Subject: [PATCH 1/4] 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 {
- +
@@ -173,7 +182,7 @@ class Charts extends Component {
- +
@@ -233,7 +242,7 @@ class Charts extends Component {
- +
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 Date: Tue, 24 Apr 2018 12:55:21 +0200 Subject: [PATCH 2/4] 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: { From 4518f54db93b28c4ccf891cf157b13b506a7f1bd Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 24 Apr 2018 14:54:41 +0200 Subject: [PATCH 3/4] fix: temp hotfix ButtonDropdown up --- src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js index 337fcb5..333c313 100644 --- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js +++ b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js @@ -209,7 +209,7 @@ class ButtonDropdowns extends Component { Direction Up - + Header Action Disabled Action From 3218b647c3d1bbbae5664fcf188ab187ca4f889d Mon Sep 17 00:00:00 2001 From: xidedix Date: Tue, 24 Apr 2018 16:24:13 +0200 Subject: [PATCH 4/4] chore: fix css build scripts --- package.json | 4 ++-- src/scss/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index b408290..7fd7c5f 100644 --- a/package.json +++ b/package.json @@ -36,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", diff --git a/src/scss/style.scss b/src/scss/style.scss index 458464a..fbe62fa 100644 --- a/src/scss/style.scss +++ b/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";