comment cleanup

src/components/charts/chartController.vue

@@ -237,7 +237,7 @@ export default {
  ) {
  this.chart.update()
 
- // format charts if there are multiple time peridods
+ // format charts if there are multiple time periods
  if (this.multipleTimePeriods(data.datasets)) {
  this.formatMultipleTimePeriods(data.datasets)
  }

src/components/charts/linechart.js

@@ -145,7 +145,7 @@ export default {
  autoSkip: true,
  stepSize: 10,
  source: 'data',
- // the following three settinsg change the x-ticks if there are multiple time periods,
+ // the following three settings change the x-ticks if there are multiple time periods,
  // otherwise the default settings are used
  autoSkipPadding: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 10 : 3,
  maxRotation: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 0 : 50,

src/components/extras/heropicture.vue

@@ -8,7 +8,6 @@
  :style="`background-image:linear-gradient(to right bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2)),url(https://osu-energy-images.s3-us-west-2.amazonaws.com/thumbnails/${this.media}); width:calc(100%); height:100%`"
  :key="media + 1"
  ></div>
- <!-- Add ":key="media + 1" above to prevent compiler warning -->
  <div
  v-else-if="this.mediaArray.length === 2"
  v-for="(media, index) in this.media"

src/components/view/view.vue

@@ -50,7 +50,6 @@ export default {
  // this.otherView (or whatever) in navdir.vue file.
  // However, this.navVis is still needed here as it guarantees the navbar is not shown before
  // await this.$store.dispatch('map/loadMap') completes, preventing errors in navdir file.
- // this.navVis = true
  this.navVis = this.$route.path.includes('building')
  await this.$store.dispatch('user/user')
  if (!this.view.id) {
@@ -101,29 +100,13 @@ export default {
  immediate: true,
  handler: async function (buildings) {
  if (this.$route.path.includes('compare')) {
- // this.cards array only has one element in it
  if (buildings.length > 1) {
  if (this.cards.length > 0 && this.cards[0]) {
  await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers')
- // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js
  await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare')
-
- // Full call order: view.vue's compareBuildings() > block.module.js's updateModifier >
- // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() > block.module.js's loadCharts()
-
- // Alternatively (building_compare_mod.js's updateData calls two things):
- // view.vue's compareBuildings() > block.module.js's updateModifier > building_compare.mod.js's updateData() >
- // building_compare.mod.js's removeOldCharts() > block.module.js's unloadChart()
-
- // Example this.cards[0].path: map/building_29/block_79
-
- // Example call order: map.module.js's map() getter > building.module.js's building() getter >
- // block.module's updateModifier function (I think)
  await this.$store.dispatch(this.cards[0].path + '/updateModifier', {
  name: 'building_compare',
  data: {
- // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js,
- // which also affects chartSpace naming (duplicate chart path triggers error)
  buildingIds: buildings.map(building => building.id)
  }
  })
@@ -132,25 +115,17 @@ export default {
  for (let i in this.cards) {
  if (this.cards.length > 0 && this.cards[i]) {
  await this.$store.dispatch(this.cards[i].path + '/removeAllModifiers')
- // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js
  await this.$store.dispatch(this.cards[i].path + '/addModifier', 'building_compare')
 
- // Full call order: view.vue's compareBuildings() > block.module.js's updateModifier >
- // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() > block.module.js's loadCharts()
-
- // Alternatively (building_compare_mod.js's updateData calls two things):
- // view.vue's compareBuildings() > block.module.js's updateModifier > building_compare.mod.js's updateData() >
- // building_compare.mod.js's removeOldCharts() > block.module.js's unloadChart()
-
- // Example this.cards[0].path: map/building_29/block_79
+ // Example this.cards[i].path: map/building_29/block_79
+ // Example call order: view.vue's compareBuildings() > map.module.js's map() getter >
+ // building.module.js's building() getter >block.module.js's updateModifier >
+ // building_compare.mod.js's updateData() > building_compare.mod.js's addCharts() >
+ // block.module.js's loadCharts()
 
- // Example call order: map.module.js's map() getter > building.module.js's building() getter >
- // block.module's updateModifier function (I think)
  await this.$store.dispatch(this.cards[i].path + '/updateModifier', {
  name: 'building_compare',
  data: {
- // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js,
- // which also affects chartSpace naming (duplicate chart path triggers error)
  buildingIds: buildings.map(building => building.id)
  }
  })
@@ -259,21 +234,18 @@ export default {
  if (!this.compareBuildings || this.compareBuildings.length === 0 || !this.compareBuildings[0]) {
  return []
  }
- // unintuituively, this.compareBuildings[0].block_<some number> has all the comparison charts in it, and
- // every other element in this.compareBuildings is ignored
  if (this.compareBuildings.length > 1) {
  let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
  if (!building) return []
  let group = this.$store.getters[building.path + '/primaryGroup']('Electricity')
  let block = this.$store.getters[building.path + '/block'](group.id)
  if (!block) return []
+ // Load only one (electricity) card for multiple buildings, one time period comparison
  return [this.$store.getters[building.path + '/block'](group.id)]
  } else {
  let building = this.$store.getters['map/building'](this.compareBuildings[0].id)
  if (!building) return []
- // let group = this.$store.getters[building.path + '/primaryGroup']('Electricity')
- // let block = this.$store.getters[building.path + '/block'](group.id)
- // if (!block) return []
+ // Load one or more cards (one for each energy type) for one building, multiple time period comparison
  return this.$store.getters[building.path + '/blocks']
  }
  } else {

src/store/block.module.js

@@ -89,8 +89,6 @@ const actions = {
  throw new Error('Modifier not found on block')
  } else {
  const updatingMod = store.getters.modifiers[modIndex]
-
- // I think this calls building_compare.mod.js's updateData function
  await updatingMod.updateData(this, store, payload.data)
  }
  },
@@ -102,8 +100,6 @@ const actions = {
 
  async loadCharts (store, charts) {
  for (let chart of charts) {
- // 12/23/2023 edit: We can bypass the chartSpace issue by using block.module.js's getData() function.
- // Duplicate chartSpace values trigger VueX getter error, need to fix this to support multiple charts
  let chartSpace = 'chart_' + chart.id
  let moduleSpace = store.getters.path + '/' + chartSpace
  this.registerModule(moduleSpace.split('/'), Chart)
@@ -118,13 +114,6 @@ const actions = {
  )
  await this.getters['map/promise']
  await this.getters['map/allBuildingPromise']
- // Example chartSpace: chart_29
- // As a generalization, the first part of whatever is the input of store.commit determines where it goes. Check src/store
- // Example: store.commit('chart_<something>`) will go to src\store\chart.module.js,
- // store.commit('map/<something>') will go to src\store\map.module.js
-
- // Example: store.commit(chartSpace/building) > search "buildings" in "mutations" section, in chart.module file
- // Mutations = change store value, getters = retrieve value. https://vuex.vuejs.org/guide/mutations
  store.commit(chartSpace + '/building', this.getters['map/meterGroup'](chart.meters).building)
  store.commit(chartSpace + '/meterGroupPath', this.getters['map/meterGroup'](chart.meters).path)
  store.commit(chartSpace + '/promise', Promise.resolve())
@@ -309,10 +298,6 @@ const actions = {
  }
  for (let chart of store.getters.charts) {
  if (!chart.path) continue
- // Section below is called whenever you press "Ok" on the Edit Menu or whenever
- // you load / reload a page with a graph on it.
- // This allows putting multiple graphs on the same screen without worrying about the
- // chartSpace issue
  let multStartArray = JSON.parse(JSON.stringify(chart.multStart))
  let multEndArray = JSON.parse(JSON.stringify(chart.multEnd))
  if (multStartArray.length > 1 && multEndArray.length > 1) {
@@ -324,7 +309,7 @@ const actions = {
  dateInterval: store.getters.dateInterval,
  graphType: store.getters.graphType,
  timeZoneOffset: store.getters.timeZoneOffset,
- // See chart.module.js file for rest of color stuff. Might be a better way to do this
+ // See chart.module.js file for rest of color stuff
  color: store.getters.chartColors[parseInt(i) + 1]
  }
  chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload))

src/store/block_modifiers/building_compare.mod.js

@@ -39,8 +39,6 @@ export default class CompareModifier {
  await this.removeOldCharts(store, module, this.data.buildingIds)
  }
 
- // I *think* updateModifier function from block.module.js lands here, not sure.
- // updateData function below calls addCharts and removeOldCharts
  async updateData (store, mod, data) {
  /*
  Function is called when a block
@@ -56,14 +54,6 @@ export default class CompareModifier {
  }
 
  async removeOldCharts (store, mod, ids) {
- // If we change the chartspace / chart id to support duplicate charts of the same building, we need to update this function
- // E.g. if we make the chartspace from chart_<number> to chart_<number>_<another number>, the function below needs to support
- // new syntax
-
- // Also, see updateData function right above this, as well as view.vue line 90ish for call order
-
- // Also, see block.module's unloadChart (this function calls unloadChart)
- // Consider moving await out of for loop
  for (let i in ids) {
  if (parseInt(i) !== 0) {
  let id = ids[i]
@@ -73,13 +63,9 @@ export default class CompareModifier {
  }
 
  async addCharts (store, mod, ids) {
- // where adding new charts for comparison is handled. Either here or maybe in view.vue we need to rework
- // to handle multiple charts of the same building via different chartname or something
  let charts = []
  for (let i in ids) {
  // they ignore index of 0 here due to loadDefault function in block.module.js ("Total Electricity" default block),
- // which is called every time in addition to whatever is in loadCharts function of block.module.js (all charts in
- // comparison after the first one)
  if (parseInt(i) !== 0) {
  let id = ids[i]
  let mgId = store.getters[store.getters['map/building'](id).path + '/primaryGroup']('Electricity').id
@@ -122,21 +108,5 @@ export default class CompareModifier {
  if (this.data.buildingIds[0]) {
  data.datasets[0].label = this.buildingName(store, this.data.buildingIds[0])
  }
- // 12/23/2023 EDIT: The below commented out code as is will throw errors, as one building with multiple time periods
- // means that this.datasets and this.data.buildingIDs will be different lengths.
- // Need to handle: multiple buildings same timestamps, one building multiple timestamps, one building same timestamps
- // Need to add: energy labels (e.g. "Net Energy"), timestamp labels (Date X to Date Y)
- // For energy labels, you can alter chart.module's chartData object in getData(), to change what is sent to data.datatsets
- // For timestamp labels, to convert Unix timestamp to English, see chartController toDateString()
- // Also don't know why block.module.js's loadDefault uses "Total Electricity", which is the same thing as
- // "Net Energy", but named different.
- /*
- for (let i = 0; i < data.datasets.length;) {
- if (this.data.buildingIds[i]) {
- data.datasets[i].label = this.buildingName(store, this.data.buildingIds[i])
- i += 1
- }
- }
- */
  }
 }

src/store/chart.module.js

@@ -30,6 +30,9 @@ const actions = {
  // "dateInterval": 1,
  // "graphType": 1
  // }
+
+ // see getData function in src\store\block.module.js for potential changes to the input payload's multStart, multEnd, color
+
  async getData (store, payload) {
  if (!store.getters.meterGroupPath) return
  const reqPayload = {
@@ -38,53 +41,11 @@ const actions = {
  ...store.getters.modifierData
  }
 
- // Reference: https://www.unixtimestamp.com/index.php
- // Reference: https://playcode.io/1457582
- let oct = 1697587199
- let nov = 1700265599
- // let dec = 1702857599
-
- // UPDATE (12/23/2023)
-
- // Need to update stuff below. Just changing the chart dates can now be done via
- // the Edit Menu UI, but need to update function for aligning the charts / shift charts left
-
- // Grab the default value. Building page URL = `http://localhost:8080/#/compare/["16","29"] > building 16 is default
- // Need a better way of doing this in future
-
- // As noted in edit_card.vue line 371 ish, the chart name will change after editing the timeframe via the edit card
- // web UI component. So we need a better way of distinguishing charts from each other, or rework how the rename
- // system works.
-
- /*
- if (store.getters.name === 'Total Electricity') {
- reqPayload.dateStart = nov
- reqPayload.dateEnd = dec
- } else {
- reqPayload.dateStart = oct
- reqPayload.dateEnd = nov
- }
- */
  const chartModifier = ChartModifiers(payload.graphType, reqPayload.point)
  await chartModifier.preGetData(reqPayload, this, store)
 
- // This is the only API call you need for the data (avoid chart going to zero after shifting left).
- // I just forgot to set the dateEnd for both scenarios earlier
  let data = await this.dispatch(store.getters.meterGroupPath + '/getData', reqPayload)
 
- if (store.getters.name === 'Total Electricity') {
- let testmap = new Map()
- for (let newkey of data.keys()) {
- // align new key with original datestart
- testmap.set(newkey - (nov - oct), data.get(newkey))
- }
-
- // comment out the 3 lines below to test experimental moving chart left
- // data = testmap
- // reqPayload.dateStart = oct - (nov - oct - (dec - nov)) // shift date start left to account for different month length
- // reqPayload.dateEnd = nov
- }
-
  let colorPayload = store.getters.color
 
  if (reqPayload.color) {
@@ -182,8 +143,6 @@ const mutations = {
  },
 
  building (state, building) {
- // example call triggered from block.module.js's updateCharts()
- // commented out for now as this triggers many times
  state.building = building
  },
 
@@ -227,8 +186,6 @@ const mutations = {
  }
  },
 
- // Function to remove all elements from VueX state array
- // You only need a mutation for this when you are dealing with global state (state.commit, this.store.getters, etc)
  resetMultTimeStamps (state) {
  state.multStart = []
  state.multEnd = []