From 35c24f52945eff5f22ad2c51ed99d193276e3654 Mon Sep 17 00:00:00 2001 From: Alessandro Date: Tue, 12 Mar 2019 16:50:49 +0100 Subject: [PATCH 1/2] tooltip --- Step/wwwroot/assets/styles/base/card.less | 10 ++- Step/wwwroot/assets/styles/style.css | 9 +++ .../components/card-report-production.ts | 69 +++++++++++++++++-- .../components/card-report-production.vue | 2 + 4 files changed, 85 insertions(+), 5 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index 980deb2a..d42e6e65 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -2495,7 +2495,15 @@ } } - +.card-report-tooltip{ + opacity: 1; + position: absolute; + width: 288px; + height: 219px; + border: solid 2px @color-clear-blue; + border-radius: 2px; + background-color: @color-white; +} .card-report-events{ width: 100%; diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index 594f714a..ddf326f3 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -8831,6 +8831,15 @@ footer .container button.big:before { line-height: 0.38; color: #1791ff; } +.card-report-tooltip { + opacity: 1; + position: absolute; + width: 288px; + height: 219px; + border: solid 2px #1791ff; + border-radius: 2px; + background-color: #fff; +} .card-report-events { width: 100%; height: 100%; diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts index 949a81e7..c73c0b8b 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts @@ -20,7 +20,7 @@ import test from "./test.vue"; declare var JustGage: any; declare let $: any; -@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) +@Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion, test } }) export default class CardReportProduction extends Vue { lang = { @@ -220,10 +220,71 @@ export default class CardReportProduction extends Vue { let options = { barPercentage: 0.9, categoryPercentage: 0.8, + events: ["click"], + hover: { + mode: 'nearest' + }, tooltips:{ - // callbacks: { - // title - // } + enabled: false, + custom: function (tooltip) { + // Tooltip Element + let tooltipEl = document.getElementById("chartjs-tooltip"); + + // if (!tooltipEl) { + // tooltipEl = document.createElement('div'); + // tooltipEl.id = 'chartjs-tooltip'; + // tooltipEl.innerHTML = "
" + // document.body.appendChild(tooltipEl); + // } + + // Hide if no tooltip + if (tooltip.opacity === 0) { + tooltipEl.style.opacity = '0'; + return; + } + + // Set caret Position + tooltipEl.classList.remove('above', 'below', 'no-transform'); + if (tooltip.yAlign) { + tooltipEl.classList.add(tooltip.yAlign); + } else { + tooltipEl.classList.add('no-transform'); + } + + if (tooltip.dataPoints.length) { + var ind = tooltip.dataPoints[0].index; + // $("#spn-leads").text(data.data[ind]); + // $("#spn-meetings").text(data.meetings[ind]); + // $("#spn-mails").text(data.mails[ind]); + // $("#spn-rate").text(data.rate[ind]); + } + + // Display, position, and set styles for font + // tooltipEl.style.opacity = '1'; + tooltipEl.classList.add("card-report-tooltip"); + // var positionY = this._chart.canvas.offsetTop; + // var positionX = this._chart.canvas.offsetLeft; + + // Display, position, and set styles for font + // tooltipEl.style.left = positionX + tooltip.caretX + 'px'; + // tooltipEl.style.top = positionY + tooltip.caretY + 'px'; + // tooltipEl.style.fontSize = tooltip.fontSize; + // tooltipEl.style.fontStyle = tooltip._fontStyle; + // tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; + + var position = this._chart.canvas.getBoundingClientRect(); + + // Display, position, and set styles for font + tooltipEl.style.opacity = '1'; + tooltipEl.style.position = 'absolute'; + tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px'; + tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px'; + tooltipEl.style.fontFamily = tooltip._bodyFontFamily; + tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px'; + tooltipEl.style.fontStyle = tooltip._bodyFontStyle; + tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; + tooltipEl.style.pointerEvents = 'none'; + } } } diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue index c4964d0f..b4423d1f 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue @@ -114,6 +114,8 @@
+
+
From 4a1975b71e1de18738bca62efe684f0b6b19b589 Mon Sep 17 00:00:00 2001 From: Alessandro Date: Fri, 15 Mar 2019 08:53:09 +0100 Subject: [PATCH 2/2] bar chart and fix pie chart --- Step/wwwroot/assets/styles/base/card.less | 123 +++++++++++++++- Step/wwwroot/assets/styles/style.css | 116 ++++++++++++++- .../components/card-report-machine-status.ts | 13 +- .../components/card-report-production.ts | 139 +++++++----------- .../components/card-report-production.vue | 12 +- 5 files changed, 312 insertions(+), 91 deletions(-) diff --git a/Step/wwwroot/assets/styles/base/card.less b/Step/wwwroot/assets/styles/base/card.less index d42e6e65..16214476 100644 --- a/Step/wwwroot/assets/styles/base/card.less +++ b/Step/wwwroot/assets/styles/base/card.less @@ -2495,7 +2495,7 @@ } } -.card-report-tooltip{ +.card-report-tooltip-top{ opacity: 1; position: absolute; width: 288px; @@ -2503,7 +2503,126 @@ border: solid 2px @color-clear-blue; border-radius: 2px; background-color: @color-white; + z-index: 100; } +.card-report-tooltip-top:before { + content: ''; + display: block; + position: absolute; + left: 138px; + bottom: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-bottom-color: #1791ff; +} + +.card-report-tooltip-top:after{ + content: ''; + display: block; + position: absolute; + left: 141px; + bottom: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-bottom-color: white; +} + + +.card-report-tooltip-bottom{ + opacity: 1; + position: absolute; + width: 288px; + height: 185px; + border: solid 2px #1791ff; + border-radius: 2px; + background-color: @color-background-white; + z-index: 100; +} + +.card-report-tooltip-bottom:before { + content: ''; + display: block; + position: absolute; + left: 132px; + top: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-top-color: #1791ff; +} + +.card-report-tooltip-bottom:after{ + content: ''; + display: block; + position: absolute; + left: 135px; + top: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-top-color: @color-white2; +} + +.card-report-tooltip-header{ + height: 63px; + border-bottom: 2px solid #d8d8d8; + display: flex; + align-items: center; + padding-left: 16px; + font-size: 20px; + color: @color-darkish-blue; + label{ + width: 234px; + } + button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; + .fa { + display: flex; + margin-left: auto; + margin-right: auto; + } +} +button.close:active { + background-color: @color-clear-blue ; + color: #fff; +} +} + +.card-report-tooltip-body{ + height: calc(~"100% - 65px"); + display: flex; + flex-flow: row; + background-color: @color-white2; +} +.card-report-tooltip-body-left, .card-report-tooltip-body-right{ + display: flex; + flex-flow: column; + width: 50%; + align-items: center; + justify-content: center; + label:first-child{ + font-size: 18px; + font-weight: normal; + color: @color-warm-grey; + } + label{ + font-size: 18px; + font-weight: 800; + color: @color-greyish-brown; + } +} + .card-report-events{ width: 100%; @@ -2656,7 +2775,7 @@ display: none; } .checkboxesView, .checkboxesViewUser{ - width: calc(~"100% - 8px");; + width: calc(~"100% - 8px"); background-color: #fff; display: block; z-index: 100; diff --git a/Step/wwwroot/assets/styles/style.css b/Step/wwwroot/assets/styles/style.css index ddf326f3..0a558cad 100644 --- a/Step/wwwroot/assets/styles/style.css +++ b/Step/wwwroot/assets/styles/style.css @@ -8831,7 +8831,7 @@ footer .container button.big:before { line-height: 0.38; color: #1791ff; } -.card-report-tooltip { +.card-report-tooltip-top { opacity: 1; position: absolute; width: 288px; @@ -8839,6 +8839,120 @@ footer .container button.big:before { border: solid 2px #1791ff; border-radius: 2px; background-color: #fff; + z-index: 100; +} +.card-report-tooltip-top:before { + content: ''; + display: block; + position: absolute; + left: 138px; + bottom: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-bottom-color: #1791ff; +} +.card-report-tooltip-top:after { + content: ''; + display: block; + position: absolute; + left: 141px; + bottom: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-bottom-color: white; +} +.card-report-tooltip-bottom { + opacity: 1; + position: absolute; + width: 288px; + height: 185px; + border: solid 2px #1791ff; + border-radius: 2px; + background-color: #fff; + z-index: 100; +} +.card-report-tooltip-bottom:before { + content: ''; + display: block; + position: absolute; + left: 132px; + top: 100%; + width: 4px; + height: 0px; + border: 14px solid transparent; + border-top-color: #1791ff; +} +.card-report-tooltip-bottom:after { + content: ''; + display: block; + position: absolute; + left: 135px; + top: 100%; + width: 0; + height: 0; + border: 13px solid transparent; + border-top-color: #f1f1f1; +} +.card-report-tooltip-header { + height: 63px; + border-bottom: 2px solid #d8d8d8; + display: flex; + align-items: center; + padding-left: 16px; + font-size: 20px; + color: #002680; +} +.card-report-tooltip-header label { + width: 234px; +} +.card-report-tooltip-header button.close { + display: flex; + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background-color: #002680; + color: #fff; + font-size: 16px; + float: right; + cursor: pointer; +} +.card-report-tooltip-header button.close .fa { + display: flex; + margin-left: auto; + margin-right: auto; +} +.card-report-tooltip-header button.close:active { + background-color: #1791ff; + color: #fff; +} +.card-report-tooltip-body { + height: calc(100% - 65px); + display: flex; + flex-flow: row; + background-color: #f1f1f1; +} +.card-report-tooltip-body-left, +.card-report-tooltip-body-right { + display: flex; + flex-flow: column; + width: 50%; + align-items: center; + justify-content: center; +} +.card-report-tooltip-body-left label:first-child, +.card-report-tooltip-body-right label:first-child { + font-size: 18px; + font-weight: normal; + color: #878787; +} +.card-report-tooltip-body-left label, +.card-report-tooltip-body-right label { + font-size: 18px; + font-weight: 800; + color: #4b4b4b; } .card-report-events { width: 100%; diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts index 248849fa..ad6003fb 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-machine-status.ts @@ -14,6 +14,7 @@ import Chart from "chart.js"; declare var JustGage: any; import { reportService } from "../../../services/reportService"; +import { Watch } from "vue-property-decorator"; declare let $: any; @Component({ components: { datePicker: DatePicker, cardReport: cardReport, accordionDropdown: accordionDropdown, accordion: Accordion } }) @@ -74,6 +75,14 @@ export default class CardReportMachineStatus extends Vue { return this.$store.state.currentUser; } + @Watch("filter", { deep: true }) + async filterChanged(n, o) { + debugger + await reportService.PieChart(this.filter.interval); + this.buildChart(); + + } + async mounted() { this.users = await loginService.getAllUsers(); this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); @@ -166,9 +175,9 @@ export default class CardReportMachineStatus extends Vue { datasets: [{ data: dataNumber, backgroundColor: [ - "#f5ec45", '#d62e42', - '#6cb432' + '#6cb432', + "#f5ec45" ] }], labels: dataString diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts index c73c0b8b..62f89de2 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.ts @@ -16,6 +16,7 @@ import { reportService } from "../../../services/reportService"; import { awaiter } from "../../../_base"; import test from "./test.vue"; +import { toolingStore } from "@/src/store/tooling.store"; declare var JustGage: any; @@ -103,16 +104,10 @@ export default class CardReportProduction extends Vue { get currentUser() { return this.$store.state.currentUser; } - - // @Watch("searchText") - // async applyFilter(n) { - // this.filter.nameProgram = n.toLowerCase(); - // await reportService.ProgramsReport(this.filter.nameProgram,this.filter.interval); - // } @Watch("filter", { deep: true }) async filterChanged(n, o) { - this.resultPrograms = await awaiter(reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval)); + this.resultPrograms = await reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval); this.paginationData.pages = this.resultPrograms.pages; this.buildChart(); @@ -123,11 +118,10 @@ export default class CardReportProduction extends Vue { this.users = await loginService.getAllUsers(); this.users.unshift({ id: -1, username: this.$options.filters.localize("alarm_history_users_not_user", "Nessun utente") }); this.filter.multiUser.push(this.currentUser.username); - this.resultPrograms = await awaiter(reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval)); + this.resultPrograms = await reportService.ProgramsReport(9,this.selectedPage,this.filter.nameProgram, this.filter.interval); this.paginationData.pages = this.resultPrograms.pages; this.buildChart(); this.buildGage(); - } public selectTab(value) { @@ -209,6 +203,7 @@ export default class CardReportProduction extends Vue { } }); if(this.myBarChart != null){ + debugger this.myBarChart.data.labels.pop(); this.myBarChart.data.datasets.pop(); this.myBarChart = null; @@ -227,98 +222,70 @@ export default class CardReportProduction extends Vue { tooltips:{ enabled: false, custom: function (tooltip) { - // Tooltip Element + let barSelected; + $this.programs.forEach(element => { + if(element.progName == tooltip.title){ + barSelected = element; + } + }) let tooltipEl = document.getElementById("chartjs-tooltip"); - - // if (!tooltipEl) { - // tooltipEl = document.createElement('div'); - // tooltipEl.id = 'chartjs-tooltip'; - // tooltipEl.innerHTML = "
" - // document.body.appendChild(tooltipEl); - // } - - // Hide if no tooltip + let tooltipElH = document.getElementById("chartjs-tooltip-header"); + let tooltipElB = document.getElementById("chartjs-tooltip-body"); + let tooltipElBL = document.getElementById("chartjs-tooltip-body-left"); + let tooltipElBR = document.getElementById("chartjs-tooltip-body-right"); + if (tooltip.opacity === 0) { tooltipEl.style.opacity = '0'; return; } - - // Set caret Position tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltip.yAlign) { tooltipEl.classList.add(tooltip.yAlign); } else { tooltipEl.classList.add('no-transform'); } - - if (tooltip.dataPoints.length) { - var ind = tooltip.dataPoints[0].index; - // $("#spn-leads").text(data.data[ind]); - // $("#spn-meetings").text(data.meetings[ind]); - // $("#spn-mails").text(data.mails[ind]); - // $("#spn-rate").text(data.rate[ind]); + var positionY = this._chart.canvas.offsetTop; + var positionX = this._chart.canvas.offsetLeft; + tooltipEl.classList.add("card-report-tooltip-bottom"); + tooltipElH.classList.add("card-report-tooltip-header"); + tooltipElB.classList.add("card-report-tooltip-body"); + tooltipElBL.classList.add("card-report-tooltip-body-left"); + tooltipElBR.classList.add("card-report-tooltip-body-right"); + + tooltipElH.innerHTML = ""; + tooltipElH.innerHTML += "" + tooltipElBL.innerHTML = ""; + tooltipElBL.innerHTML += ""; + tooltipElBR.innerHTML = ""; + tooltipElBR.innerHTML += ""; + + if(tooltip.caretY > 350){ + tooltipEl.style.top = [(positionY + window.pageYOffset + tooltip.caretY) - (tooltipEl.offsetHeight)] + 'px'; } - - // Display, position, and set styles for font - // tooltipEl.style.opacity = '1'; - tooltipEl.classList.add("card-report-tooltip"); - // var positionY = this._chart.canvas.offsetTop; - // var positionX = this._chart.canvas.offsetLeft; - - // Display, position, and set styles for font - // tooltipEl.style.left = positionX + tooltip.caretX + 'px'; - // tooltipEl.style.top = positionY + tooltip.caretY + 'px'; - // tooltipEl.style.fontSize = tooltip.fontSize; - // tooltipEl.style.fontStyle = tooltip._fontStyle; - // tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; - - var position = this._chart.canvas.getBoundingClientRect(); - - // Display, position, and set styles for font - tooltipEl.style.opacity = '1'; - tooltipEl.style.position = 'absolute'; - tooltipEl.style.left = position.left + window.pageXOffset + tooltip.caretX + 'px'; - tooltipEl.style.top = position.top + window.pageYOffset + tooltip.caretY + 'px'; - tooltipEl.style.fontFamily = tooltip._bodyFontFamily; - tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px'; - tooltipEl.style.fontStyle = tooltip._bodyFontStyle; - tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip.xPadding + 'px'; - tooltipEl.style.pointerEvents = 'none'; + else{ + tooltipEl.style.top = positionY + window.pageYOffset + tooltip.caretY + 'px'; + } + tooltipEl.style.left = positionX + window.pageXOffset + tooltip.caretX - (tooltipEl.offsetWidth / 2) + 'px'; + tooltipEl.style.opacity = '1'; + tooltipEl.style.position = 'absolute'; + tooltipEl.style.fontFamily = tooltip._bodyFontFamily; + tooltipEl.style.fontSize = tooltip.bodyFontSize + 'px'; + tooltipEl.style.fontStyle = tooltip._bodyFontStyle; + tooltipEl.style.pointerEvents = 'none'; } } } - - // let data = { - // datasets: [{ - - // }] - // } + let data = { + labels: dataString, + datasets: [{ + label: $this.filter.yAxis, + data: dataNumber, + borderWidth: 1 + }] + } this.myBarChart = new Chart(ctx, { type: 'bar', - data: { - labels: dataString, - datasets: [{ - label: 'Quantity', - data: dataNumber, - backgroundColor: [ - 'rgba(255, 99, 132, 0.2)', - 'rgba(54, 162, 235, 0.2)', - 'rgba(255, 206, 86, 0.2)', - 'rgba(75, 192, 192, 0.2)', - 'rgba(153, 102, 255, 0.2)', - 'rgba(255, 159, 64, 0.2)' - ], - borderColor: [ - 'rgba(255,99,132,1)', - 'rgba(54, 162, 235, 1)', - 'rgba(255, 206, 86, 1)', - 'rgba(75, 192, 192, 1)', - 'rgba(153, 102, 255, 1)', - 'rgba(255, 159, 64, 1)' - ], - borderWidth: 1 - }] - }, + data: data, options: options }); @@ -327,6 +294,10 @@ export default class CardReportProduction extends Vue { } + close(){ + this.myBarChart.options.toolTip.enabled = false; + } + colorDeviation(deviation){ if(deviation.startsWith("+")){ return "red"; diff --git a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue index b4423d1f..2641e7ea 100644 --- a/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue +++ b/Step/wwwroot/src/app_modules/reports/components/card-report-production.vue @@ -114,8 +114,16 @@
-
- +
+
+
+
+
+
+
+
+
+