Merge remote-tracking branch 'origin/feature/grafici_wp10' into feature/grafici_wp10

Step/wwwroot/assets/styles/base/card.less

@@ -3176,24 +3176,168 @@
           }
         }
 
-        tbody {
-          display: block;
-          height: 598px;
-          width: 1431px;
+.card-report-tooltip-top{
+  opacity: 1;
+  position: absolute;
+  width: 288px;
+  height: 219px;
+  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;
+}
 
-          tr {
-            // cursor: pointer;
-            height: 64px;
-            padding: 10px;
-            font-size: 14px;
-            line-height: 1.29;
-            color: @color-greyish-brown;
+.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;
+}
 
-            td {
-              text-align: center;
 
-              &.green {
-                color: @color-apple-green;
+.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%;
+    height: 100%;
+    display: flex;
+    .reports-box-body-left {
+        width: 1455px;
+        height: 100%;
+        .body-left-header, .body-left-header-machinestatus{
+            width: 100%;
+            height: 70px;
+            display: flex;
+            flex-flow: row;
+            margin-top: 18px;
+            border-right: solid 2px @color-whitegrey;
+            position: relative;
+            margin-bottom: 16px;
+            .mx-datepicker-range{
+              width: 170px;
+              height: 70px;
+              .mx-input-wrapper{
+                margin-right: 24px;
+                width: 253px;
+                .mx-input{
+                  width: 253px;
+                  height: 48px;
+                  border-radius: 2px;
+                  box-shadow: 0 1px 2px 0 @color-black-40;
+                  border: solid 1px @color-silver;
+                  font-size: 18px;
+                  line-height: 1.11;
+                  color: @color-greyish-brown;
+                  padding-left: 16px;
+                }
               }
 
               &.red {
@@ -3211,7 +3355,47 @@
               color: @color-white;
               font-weight: 600;
             }
-          }
+            .selectBoxU select{
+              width: 100%;
+              padding: 8px;
+              cursor: pointer;
+              height: 48px;
+              font-size: 18px;
+              line-height: 1.11;
+              color: @color-greyish-brown;
+              box-shadow: 0 1px 2px @color-black-40;
+              border-radius: 2px;
+                option{
+                    display: none;
+                }
+            }
+              .overSelect{
+                  position: absolute;
+                  left: 0;
+                  right: 0;
+                  top: 0;
+                  bottom: 0;
+              }
+              .checkboxes, .checkboxesU{
+                  display: none;
+              }
+              .checkboxesView, .checkboxesViewUser{
+                  width: calc(~"100% - 8px");
+                  background-color: #fff;
+                  display: block;
+                  z-index: 100;
+                  padding: 6px 4px;
+                  box-shadow: 0 3px 5px 0 @color-black-40;
+                  label{
+                      font-size: 18px;
+                      margin:2px;
+                      display: flex;
+                      flex-flow: row;
+                  }
+                  .label-state{
+                      margin-left: 12px;
+                  }
+              }
         }
 
         .pagination {

Step/wwwroot/assets/styles/style.css

@@ -8835,6 +8835,129 @@ footer .container button.big:before {
   line-height: 0.38;
   color: #1791ff;
 }
+.card-report-tooltip-top {
+  opacity: 1;
+  position: absolute;
+  width: 288px;
+  height: 219px;
+  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%;
   height: 100%;

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

Step/wwwroot/src/app_modules/reports/components/card-report-production.ts

@@ -16,11 +16,12 @@ 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;
 
 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 = {
@@ -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;
@@ -220,44 +215,77 @@ 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) {
+            let barSelected;
+            $this.programs.forEach(element => {
+              if(element.progName == tooltip.title){
+                barSelected = element;
+              }
+            })
+            let tooltipEl = document.getElementById("chartjs-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;
+            }
+            tooltipEl.classList.remove('above', 'below', 'no-transform');
+            if (tooltip.yAlign) {
+                tooltipEl.classList.add(tooltip.yAlign);
+            } else {
+                tooltipEl.classList.add('no-transform');
+            }
+            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 = "<label>" + barSelected.progName + "</label>";
+            tooltipElH.innerHTML += "<button class='close' onclick='close()'><i class='fa fa-remove'></i></button>"
+            tooltipElBL.innerHTML = "<label>Quantity</label>";
+            tooltipElBL.innerHTML += "<label>" + barSelected.quantity + "</label>";
+            tooltipElBR.innerHTML = "<label>Frequency</label>";
+            tooltipElBR.innerHTML += "<label>" + barSelected.frequency + "</label>";
+
+            if(tooltip.caretY > 350){
+              tooltipEl.style.top = [(positionY + window.pageYOffset + tooltip.caretY) - (tooltipEl.offsetHeight)] + 'px';
+            }
+            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
       });
 
@@ -266,6 +294,10 @@ export default class CardReportProduction extends Vue {
 
   }
 
+  close(){
+    this.myBarChart.options.toolTip.enabled = false;
+  }
+
   colorDeviation(deviation){
     if(deviation.startsWith("+")){
       return "red";

Step/wwwroot/src/app_modules/reports/components/card-report-production.vue

@@ -114,6 +114,16 @@
             <div class="body-left-center-container">
                 <canvas ref="barChart" id="myBarChart" width="1405px" height="681px"></canvas>
             </div>
+            <div id="chartjs-tooltip">
+                <div id="chartjs-tooltip-header">   
+                </div>
+                <div id="chartjs-tooltip-body">
+                    <div id="chartjs-tooltip-body-left">
+                    </div>
+                    <div id="chartjs-tooltip-body-right">
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     <div class="reports-box-body-right">