Add chart to Meters inventory Page

seed/static/seed/js/controllers/inventory_detail_meters_controller.js

@@ -133,6 +133,75 @@ angular.module('SEED.controller.inventory_detail_meters', []).controller('invent
       }
     };
 
+    const canvas = document.getElementById('program-overview-chart');
+    const ctx = canvas.getContext('2d');
+
+    $scope.meterReadingsChart = new Chart(ctx, {
+      type: 'line',
+      data: {
+        labels: []
+      },
+      options: {
+        scales: {},
+        plugins: {
+          legend: {
+            onClick: () => {}
+          }
+        }
+      }
+    });
+    $scope.meterReadingsChart.update();
+
+    const colors = [
+      '#a6cee3',
+      '#1f78b4',
+      '#b2df8a',
+      '#33a02c',
+      '#fb9a99',
+      '#e31a1c',
+      '#fdbf6f',
+      '#ff7f00',
+      '#cab2d6',
+      '#6a3d9a'
+    ];
+
+    $scope.reloadChart = () => {
+      if ($scope.interval.selected === 'Exact') return;
+
+      // init empty data obj
+      const dataForChart = {
+        labels: $scope.data.map((d) => d[$scope.interval.selected.toLowerCase()]),
+        datasets: $scope.meterReadGridOptions.columnDefs.slice(1).map((c, i) => ({
+          id: c.field,
+          label: c.displayName,
+          data: [],
+          yAxisID: c.displayName.slice(c.field.length + 2, -1),
+          backgroundColor: colors[i % colors.length],
+          borderColor: colors[i % colors.length]
+        }))
+      };
+
+      // fill data object
+      $scope.data.forEach((readingsForTime) => {
+        dataForChart.datasets.forEach((dataset) => {
+          dataset.data.push(readingsForTime[dataset.id]);
+        });
+      });
+      $scope.meterReadingsChart.data = dataForChart;
+      $scope.meterReadingsChart.update();
+
+      // set scale
+      const yAxisIDs = new Set(dataForChart.datasets.map((d) => d.yAxisID));
+      yAxisIDs.forEach((axis) => {
+        $scope.meterReadingsChart.options.scales[axis].title.text = axis;
+        $scope.meterReadingsChart.options.scales[axis].title.display = true;
+      });
+      Object.keys($scope.meterReadingsChart.options.scales).forEach((k) => {
+        if (!yAxisIDs.has(k)) { delete $scope.meterReadingsChart.options.scales[k]; }
+      });
+      $scope.meterReadingsChart.update();
+    };
+
     $scope.meterReadGridOptions = {
       data: 'data',
       columnDefs: property_meter_usage.column_defs,
@@ -245,6 +314,7 @@ angular.module('SEED.controller.inventory_detail_meters', []).controller('invent
       $scope.has_meters = meters.length > 0;
       $scope.has_readings = $scope.data.length > 0;
       $scope.apply_column_settings();
+      $scope.reloadChart();
     };
 
     // refresh_readings make an API call to refresh the base readings data
@@ -271,6 +341,7 @@ angular.module('SEED.controller.inventory_detail_meters', []).controller('invent
 
           resetSelections();
           $scope.applyFilters();
+          $scope.reloadChart();
           spinner_utility.hide();
         });
     };

seed/static/seed/partials/inventory_detail_meters.html

@@ -90,10 +90,15 @@ <h1>{$:: 'Group Detail' | translate $}</h1>
           Source ID".</span
         >
       </div>
+      <div class="text-info row pull-right">
+        <span translate
+          >Meters Chart available for Month and Year Interval Data</span
+        >
+      </div>
     </div>
   </div>
 
-  <div class="section_content">
+  <div class="section_content" style="margin-left: 20px; margin-right: 20px">
     <h4>Meters</h4>
     <div id="meters-grid-container" ng-show="has_meters">
       <div
@@ -107,6 +112,17 @@ <h4>Meters</h4>
       <div class="jumbotron text-center" translate>No Data</div>
     </div>
 
+    <div class="section_content" ng-hide="interval.selected == 'Exact'">
+      <h4>Meters Chart</h4>
+      <div
+        class="graph"
+        style="margin-left: 5vw; margin-right: 5vw"
+        ng-hide="interval.selected == 'Exact'"
+      >
+        <canvas id="program-overview-chart"></canvas>
+      </div>
+    </div>
+
     <h4>Readings</h4>
     <div id="meters-readings-grid-container" ng-show="has_readings">
       <div