diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue
index f1b3a52c..426e35f4 100644
--- a/src/components/charts/chartController.vue
+++ b/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)
}
diff --git a/src/components/charts/linechart.js b/src/components/charts/linechart.js
index 42aa5a3e..84f9d9fc 100644
--- a/src/components/charts/linechart.js
+++ b/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,
diff --git a/src/components/extras/heropicture.vue b/src/components/extras/heropicture.vue
index edbb726b..a986b394 100644
--- a/src/components/extras/heropicture.vue
+++ b/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"
>
-
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_
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 {
diff --git a/src/store/block.module.js b/src/store/block.module.js
index 9d95fed7..bdc3609a 100644
--- a/src/store/block.module.js
+++ b/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_`) will go to src\store\chart.module.js,
- // store.commit('map/') 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))
diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js
index 4be99cdf..f3d801fa 100644
--- a/src/store/block_modifiers/building_compare.mod.js
+++ b/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_ to chart__, 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
- }
- }
- */
}
}
diff --git a/src/store/chart.module.js b/src/store/chart.module.js
index 450b6ade..b2d02416 100644
--- a/src/store/chart.module.js
+++ b/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 = []