Label update, delete time period progress

Added energy type to top chart labels. Delete time period is deleting some of the data but not the labels

src/components/charts/chartController.vue

@@ -364,7 +364,7 @@ export default {
  formatMultipleTimePeriods: function (charts) {
  // change the labels to match the time period for each chart
  for (let chart of charts) {
- chart.label = chart.data[0].x.toDateString() + ' to ' + chart.data[chart.data.length - 1].x.toDateString()
+ chart.label = chart.data[0].x.toDateString() + ' to ' + chart.data[chart.data.length - 1].x.toDateString() + ', ' + this.buildLabel('y')
  }
 
  // find chart with largest dataset

src/components/view/modals/edit_card.vue

@@ -268,6 +268,9 @@
  <!-- Since tempMultStart and tempMultEnd share the same array lengths it *should* be fine to call form.tempMultEnd[index]-->
  {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} to
  {{ convertTimeStamps(new Date(form.tempMultEnd[index])) }}
+
+ <i class="el-icon-close deleteTimeButton" @click="deleteTimePeriod(index)"></i>
+
  </el-button>
  </div>
  </span>
@@ -392,23 +395,19 @@ export default {
 
  const charts = this.$store.getters[blockPath + '/charts']
  console.log(charts)
+ console.log(this.form.sets)
 
  for (let index in this.form.sets) {
- if (index < charts.length) {
+ if (index < charts.length || (this.form.sets[0].multStart && this.form.sets[0].multStart.length < charts[0].multStart.length)) {
+ console.log("Conditions met")
+
  const chartPath = charts[index].path
  // console.log(chartPath)
  this.form.sets[0].multStart = this.form.tempMultStart
  this.form.sets[0].multEnd = this.form.tempMultEnd
  // console.log(this.form.sets[0])
  this.$store.dispatch(chartPath + '/update', this.form.sets[index])
  // console.log(this.$store.getters[blockPath + '/charts'])
- // update legend name
- // line below is what "resets" the chart name, maybe comment it out but needs more testing
- /* update 12/28/23:
- moving this line into the if-statement below seems to fix the issue of resetting the
- chart name when comparing two buildings. It still resets when comparing multiple time periods, but
- those are going to be changed manually in chartController.vue anyway
- */
  if (this.$route.path.includes('building')) {
  this.$store.commit(chartPath + '/name', this.$store.getters[chartPath + '/pointString'])
  }
@@ -486,6 +485,20 @@ export default {
  return style
  },
 
+ deleteTimePeriod: function (index) {
+
+ console.log("Form: " , this.form);
+
+ this.form.tempMultStart.splice(index, 1)
+ this.form.tempMultEnd.splice(index, 1)
+ 
+
+ this.form.sets[0].multStart = this.form.tempMultStart
+ this.form.sets[0].multEnd = this.form.tempMultEnd
+
+ console.log("Form: ", this.form);
+ },
+
  deleteChart: function () {
  this.form.sets.splice(this.currentIndex, 1)
  this.currentIndex = 0
@@ -706,4 +719,8 @@ export default {
  display: inline-block;
  margin-top: 10px;
 }
+
+.deleteTimeButton:hover {
+ color: #d76740;
+}
 </style>