fix merge

package-lock.json

@@ -1822,6 +1822,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.18.1.tgz",
+      "integrity": "sha512-xBhuEegV8RK1q3UVC/jezdN/bwTvCAcmjuOu+UutO+pFdM9qy6RifB4jKU/8Ek7ZPucmnDRDI2YJ0iXTKbzzYg==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "app-root-path": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz",
@@ -2750,28 +2763,21 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
     "chart.js": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.8.0.tgz",
-      "integrity": "sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-2.9.3.tgz",
+      "integrity": "sha512-+2jlOobSk52c1VU6fzkh3UwqHMdSlgH1xFv9FKMqHiNCpXsGPQa/+81AFa+i3jZ253Mq9aAycPwDjnn1XbRNNw==",
       "requires": {
         "chartjs-color": "^2.1.0",
         "moment": "^2.10.2"
       }
     },
     "chartjs-color": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.3.0.tgz",
-      "integrity": "sha512-hEvVheqczsoHD+fZ+tfPUE+1+RbV6b+eksp2LwAhwRTVXEjCSEavvk+Hg3H6SZfGlPh/UfmWKGIvZbtobOEm3g==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.4.1.tgz",
+      "integrity": "sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==",
       "requires": {
         "chartjs-color-string": "^0.6.0",
-        "color-convert": "^0.5.3"
-      },
-      "dependencies": {
-        "color-convert": {
-          "version": "0.5.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
-          "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
-        }
+        "color-convert": "^1.9.3"
       }
     },
     "chartjs-color-string": {
@@ -4942,6 +4948,11 @@
         "pinkie-promise": "^2.0.0"
       }
     },
+    "hidpi-canvas": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/hidpi-canvas/-/hidpi-canvas-1.0.10.tgz",
+      "integrity": "sha1-0OmZlr9LkaTeETfod8rPF0cWYU0="
+    },
     "hmac-drbg": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6111,7 +6122,8 @@
             "code-point-at": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -6122,7 +6134,8 @@
             "console-control-strings": {
               "version": "1.1.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -6239,7 +6252,8 @@
             "inherits": {
               "version": "2.0.3",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "ini": {
               "version": "1.3.5",
@@ -6251,6 +6265,7 @@
               "version": "1.0.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -6280,6 +6295,7 @@
               "version": "2.3.5",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -6298,6 +6314,7 @@
               "version": "0.5.1",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -6378,7 +6395,8 @@
             "number-is-nan": {
               "version": "1.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -6390,6 +6408,7 @@
               "version": "1.4.0",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -6511,6 +6530,7 @@
               "version": "1.0.2",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -7609,8 +7629,7 @@
             },
             "ansi-regex": {
               "version": "2.1.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "aproba": {
               "version": "1.2.0",
@@ -7647,8 +7666,7 @@
             },
             "code-point-at": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "concat-map": {
               "version": "0.0.1",
@@ -7657,8 +7675,7 @@
             },
             "console-control-strings": {
               "version": "1.1.0",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "core-util-is": {
               "version": "1.0.2",
@@ -7761,8 +7778,7 @@
             },
             "inherits": {
               "version": "2.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "ini": {
               "version": "1.3.5",
@@ -7772,7 +7788,6 @@
             "is-fullwidth-code-point": {
               "version": "1.0.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "number-is-nan": "^1.0.0"
               }
@@ -7798,7 +7813,6 @@
             "minipass": {
               "version": "2.3.5",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "safe-buffer": "^5.1.2",
                 "yallist": "^3.0.0"
@@ -7815,7 +7829,6 @@
             "mkdirp": {
               "version": "0.5.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "minimist": "0.0.8"
               }
@@ -7888,8 +7901,7 @@
             },
             "number-is-nan": {
               "version": "1.0.1",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "object-assign": {
               "version": "4.1.1",
@@ -7899,7 +7911,6 @@
             "once": {
               "version": "1.4.0",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "wrappy": "1"
               }
@@ -7975,8 +7986,7 @@
             },
             "safe-buffer": {
               "version": "5.1.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -8006,7 +8016,6 @@
             "string-width": {
               "version": "1.0.2",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "code-point-at": "^1.0.0",
                 "is-fullwidth-code-point": "^1.0.0",
@@ -8024,7 +8033,6 @@
             "strip-ansi": {
               "version": "3.0.1",
               "bundled": true,
-              "optional": true,
               "requires": {
                 "ansi-regex": "^2.0.0"
               }
@@ -8063,13 +8071,11 @@
             },
             "wrappy": {
               "version": "1.0.2",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             },
             "yallist": {
               "version": "3.0.3",
-              "bundled": true,
-              "optional": true
+              "bundled": true
             }
           }
         },
@@ -9129,11 +9135,6 @@
       "integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
       "dev": true
     },
-    "perfect-scrollbar": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.4.0.tgz",
-      "integrity": "sha512-/2Sk/khljhdrsamjJYS5NjrH+GKEHEwh7zFSiYyxROyYKagkE4kSn2zDQDRTOMo8mpT2jikxx6yI1dG7lNP/hw=="
-    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11165,6 +11166,70 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "sweetalert2": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-8.17.1.tgz",
@@ -12789,6 +12854,7 @@
               "version": "1.1.11",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -12957,6 +13023,7 @@
               "version": "3.0.4",
               "bundled": true,
               "dev": true,
+              "optional": true,
               "requires": {
                 "brace-expansion": "^1.1.7"
               }

package.json

@@ -31,18 +31,20 @@
     "angular-bootstrap-md": "^8.1.1",
     "angular-datatables": "^8.0.0",
     "angular-mydatepicker": "^0.1.9",
+    "apexcharts": "^3.18.1",
     "arrive": "^2.4.1",
     "bootstrap": "^4.3.1",
     "bootstrap-material-design": "^4.1.2",
     "bootstrap-select": "^1.13.12",
     "c": "^0.1.0",
-    "chart.js": "^2.8.0",
+    "chart.js": "^2.9.3",
     "classlist.js": "^1.1.20150312",
     "crypto-js": "^3.1.9-1",
     "datatables.net": "^1.10.19",
     "datatables.net-dt": "^1.10.19",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
+    "hidpi-canvas": "^1.0.10",
     "jquery": "^3.4.1",
     "leaflet": "^1.5.1",
     "leaflet-routing-machine": "^3.2.12",

src/app/components/assets/assets.component.html

@@ -76,7 +76,7 @@
         <div class="row p-0">
           <div class="col-xl-6 col-md-6 col-sm-12 p-1">
             <div class="widget energy-stats">
-              <div class="mini-stats ">
+              <div class="mini-stats">
                 <span class="sky-skin"><i class="fa fa-bolt"></i></span>
                 <h3 *ngIf="eProduced">
                   {{ energyDay }}
@@ -89,7 +89,7 @@
 
           <div class="col-xl-6 col-md-6 col-sm-12 p-1">
             <div class="widget energy-stats">
-              <div class="mini-stats ">
+              <div class="mini-stats">
                 <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
                 <h3 *ngIf="eProduced">
                   {{ energyWeek }}
@@ -102,7 +102,7 @@
 
           <div class="col-xl-6 col-md-6 col-sm-12 p-1">
             <div class="widget energy-stats">
-              <div class="mini-stats ">
+              <div class="mini-stats">
                 <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
                 <h3 *ngIf="eProduced">
                   {{ energyMonth }}
@@ -115,7 +115,7 @@
 
           <div class="col-xl-6 col-md-6 col-sm-12 p-1">
             <div class="widget energy-stats">
-              <div class="mini-stats ">
+              <div class="mini-stats">
                 <span class="green-skin"><i class="fa fa-bolt"></i></span>
                 <h3 *ngIf="eProduced">
                   {{ energyYear }}
@@ -154,7 +154,7 @@
                 </span>
               </div>
               <div class="cdo-items">
-                <i class="material-icons ">
+                <i class="material-icons">
                   money
                 </i>
                 Monto total por CdO generados:
@@ -178,7 +178,7 @@
                 </p>
 
                 <div class="visualization">
-                  <div class=" action-buttons">
+                  <div class="action-buttons">
                     <button
                       class="btn btn-link"
                       [class.btn-success]="isActive[0]"
@@ -262,7 +262,7 @@
                       </div>
                     </div>
                   </div>
-                  <div class=" action-buttons">
+                  <div class="action-buttons">
                     <button
                       title="Barra"
                       [ngClass]="[
@@ -306,7 +306,16 @@
             </div>
 
             <div class="chart-container" id="chart-wrapper">
-              <canvas id="canvas">{{ chart1 }}</canvas>
+              <canvas
+                baseChart
+                *ngIf="barChartData"
+                id="canvas"
+                [datasets]="barChartData"
+                [labels]="barChartLabels"
+                [options]="barChartOptions"
+                [plugins]="barChartPlugins"
+                [chartType]="barChartType"
+              ></canvas>
             </div>
             <div class="no-data">
               <h2>

src/app/components/assets/assets.component.scss

@@ -358,7 +358,7 @@ table {
 
 .chart-container {
   display: block;
-  height: 48vh;
+  height: 420px;
   @media screen and (max-width: 960px) {
     height: 350px;
   }

src/app/components/assets/assets.component.ts

@@ -110,7 +110,7 @@ export class AssetsComponent implements OnInit {
 
   // For MatDataTable
   metersData: any;
-  initialDate: any;
+  initialDate: string;
   tableData: any;
   showTable: boolean;
   displayedColumns: any;
@@ -126,7 +126,7 @@ export class AssetsComponent implements OnInit {
   // For chartjs
   chartjs: boolean;
   chart1: Chart;
-  chart1Type: string;
+  chart1Type;
   barChartColors: any = [
     "#5f86b0",
     "#a9d0ea",
@@ -153,6 +153,7 @@ export class AssetsComponent implements OnInit {
   public barChartOptions: ChartOptions;
   public barChartData: ChartDataSets[];
   @ViewChild("baseChart", null) chart: BaseChartDirective;
+
   city: any;
   total_savings: any;
   last_day_savings: number;
@@ -317,7 +318,8 @@ export class AssetsComponent implements OnInit {
           this.chart1.destroy();
         }
         this.chart1 = undefined;
-        this.chart1 = new Chart("canvas", {});
+        const ctx = new CanvasRenderingContext2D();
+        this.chart1 = new Chart(ctx, {});
       }, 3000);
     }
   }
@@ -575,7 +577,9 @@ export class AssetsComponent implements OnInit {
             this.totalCertificates = res["data"]["cantidad"];
             this.lastGeneratedDateCertificate =
               formatDate(
-                res["data"]["ultimo_generado"],
+                res["data"]["ultimo_generado"]
+                  .replace(/-/g, "/")
+                  .replace("T", " "),
                 "dd/MM/yyyy",
                 "es-Es",
                 "-0600"
@@ -689,34 +693,56 @@ export class AssetsComponent implements OnInit {
               case "day":
                 this.barChartLabels = this.metersValues[0]["data"]
                   .map((obj) =>
-                    formatDate(obj.dateMin, "HH:mm ", "es-Es", "-0600")
+                    formatDate(
+                      obj.dateMin.replace(/-/g, "/").replace("T", " "),
+                      "HH:mm ",
+                      "es-Es",
+                      "-0600"
+                    )
                   )
                   .reverse();
                 break;
               case "week":
                 this.barChartLabels = this.metersValues[0]["data"]
                   .map((obj) =>
-                    formatDate(obj.dateMax, "EEEE dd", "es-Es", "-0600")
+                    formatDate(
+                      obj.dateMax.replace(/-/g, "/").replace("T", " "),
+                      "EEEE dd",
+                      "es-Es",
+                      "-0600"
+                    )
                   )
                   .reverse();
                 break;
               case "year":
                 this.barChartLabels = this.metersValues[0]["data"]
                   .map((obj) =>
-                    formatDate(obj.dateMax, "MM/yyyy", "es-Es", "-0600")
+                    formatDate(
+                      obj.dateMax.replace(/-/g, "/").replace("T", " "),
+                      "MM/yyyy",
+                      "es-Es",
+                      "-0600"
+                    )
                   )
                   .reverse();
                 break;
               default:
                 this.barChartLabels = this.metersValues[0]["data"]
                   .map((obj) =>
-                    formatDate(obj.dateMax, "dd/MM", "es-Es", "-0600")
+                    formatDate(
+                      obj.dateMax.replace(/-/g, "/").replace("T", " "),
+                      "dd/MM",
+                      "es-Es",
+                      "-0600"
+                    )
                   )
                   .reverse();
             }
 
             // Push the values to the chart object
-            this.tableData.push({ headers: "Ahorro[US$]" });
+            this.tableData.push({
+              headers: "Ahorro[US$]",
+            });
             this.tableData.push({
               headers: "Fecha/Hora",
               dataValues: this.barChartLabels,
@@ -741,7 +767,81 @@ export class AssetsComponent implements OnInit {
             this.dataSourcePrint.data = this.tableData2;
 
             this.showTable = true;
-            this.chart1 = new Chart("canvas", {
+
+            this.barChartType = this.chart1Type;
+            this.barChartLabels;
+            this.barChartOptions = {
+              title: {
+                display: true,
+              },
+              tooltips: {
+                mode: "index",
+                callbacks: {
+                  // Get the total of the energy produced in every point and show it in the hover tooltip
+                  label: function (tooltipItem, data) {
+                    var label =
+                      data.datasets[tooltipItem.datasetIndex].label || "";
+                    var value =
+                      data.datasets[tooltipItem.datasetIndex].data[
+                        tooltipItem.index
+                      ];
+                    var total = 0;
+
+                    for (var i = 1; i < data.datasets.length; i++)
+                      total += +data.datasets[i].data[tooltipItem.index];
+
+                    if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+                      return label + " : " + value;
+                    } else {
+                      return [
+                        label + " : " + value,
+                        "TOTAL[kWh] : " + Math.round(total),
+                      ];
+                    }
+                  },
+                },
+              },
+              responsive: true,
+              maintainAspectRatio: false,
+              scales: {
+                xAxes: [
+                  {
+                    stacked: true,
+                  },
+                ],
+                yAxes: [
+                  {
+                    stacked: true,
+                    position: "left",
+                    scaleLabel: {
+                      display: true,
+                      labelString: "Kilowatts hora [kWh]",
+                    },
+                  },
+                  {
+                    display: true,
+                    stacked: true,
+                    position: "right",
+                    id: "y-axis-ahorro",
+                    scaleLabel: {
+                      display: true,
+                      labelString: "Ahorro [US$]",
+                    },
+                    gridLines: {
+                      drawOnChartArea: false,
+                    },
+                  },
+                ],
+              },
+            };
+
+            this.barChartLegend = true;
+            this.barChartData = this.metersData;
+
+            /*
+            const ctx = new CanvasRenderingContext2D();
+
+            this.chart1 = new Chart(ctx, {
               type: this.chart1Type,
               options: {
                 title: {
@@ -816,7 +916,7 @@ export class AssetsComponent implements OnInit {
                 labels: this.barChartLabels,
                 datasets: this.metersData,
               },
-            });
+            }); */
             this.chartjs = true;
           });
       });
@@ -829,16 +929,36 @@ export class AssetsComponent implements OnInit {
     let dateT;
     switch (view) {
       case "day":
-        dateT = formatDate(date, "HH:mm", "es-Es", "-0600");
+        dateT = formatDate(
+          date.replace(/-/g, "/").replace("T", " "),
+          "HH:mm",
+          "es-Es",
+          "-0600"
+        );
         break;
       case "week":
-        dateT = formatDate(date, "EEEE dd", "es-Es", "-0600");
+        dateT = formatDate(
+          date.replace(/-/g, "/").replace("T", " "),
+          "EEEE dd",
+          "es-Es",
+          "-0600"
+        );
         break;
       case "year":
-        dateT = formatDate(date, "MM/yyyy", "es-Es", "-0600");
+        dateT = formatDate(
+          date.replace(/-/g, "/").replace("T", " "),
+          "MM/yyyy",
+          "es-Es",
+          "-0600"
+        );
         break;
       default:
-        dateT = formatDate(date, "dd/MM", "es-Es", "-0600");
+        dateT = formatDate(
+          date.replace(/-/g, "/").replace("T", " "),
+          "dd/MM",
+          "es-Es",
+          "-0600"
+        );
     }
     return dateT;
   }
@@ -894,12 +1014,83 @@ export class AssetsComponent implements OnInit {
     }
 
     this.chart1Type = chartType;
-
+    /*
     if (this.chart1 != undefined || this.chart1 == undefined) {
       this.chart1.destroy();
     }
-    this.chart1 = undefined;
-    this.chart1 = new Chart("canvas", {
+    this.chart1 = undefined;*/
+
+    this.barChartType = this.chart1Type;
+    this.barChartLabels;
+    this.barChartOptions = {
+      title: {
+        display: true,
+      },
+      tooltips: {
+        mode: "index",
+        callbacks: {
+          // Get the total of the energy produced in every point and show it in the hover tooltip
+          label: function (tooltipItem, data) {
+            var label = data.datasets[tooltipItem.datasetIndex].label || "";
+            var value =
+              data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
+            var total = 0;
+
+            for (var i = 1; i < data.datasets.length; i++)
+              total += +data.datasets[i].data[tooltipItem.index];
+
+            if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
+              return label + " : " + value;
+            } else {
+              return [
+                label + " : " + value,
+                "TOTAL[kWh] : " + Math.round(total),
+              ];
+            }
+          },
+        },
+      },
+      responsive: true,
+      maintainAspectRatio: false,
+      scales: {
+        xAxes: [
+          {
+            stacked: true,
+          },
+        ],
+        yAxes: [
+          {
+            stacked: true,
+            position: "left",
+            scaleLabel: {
+              display: true,
+              labelString: "Kilowatts hora [kWh]",
+            },
+          },
+          {
+            display: true,
+            stacked: true,
+            position: "right",
+            id: "y-axis-ahorro",
+            scaleLabel: {
+              display: true,
+              labelString: "Ahorro [US$]",
+            },
+            gridLines: {
+              drawOnChartArea: false,
+            },
+          },
+        ],
+      },
+    };
+
+    this.barChartLegend = true;
+    this.barChartData = this.metersData;
+
+    /*
+    var canvas = document.getElementById("canvas");
+    const ctx = new CanvasRenderingContext2D();
+    this.chart1 = new Chart(ctx, {
       type: this.chart1Type,
 
       options: {
@@ -965,6 +1156,6 @@ export class AssetsComponent implements OnInit {
         labels: this.barChartLabels,
         datasets: this.metersData,
       },
-    });
+    });*/
   }
 }