From 67d6d184485633736e60983c31975fc9fe88421f Mon Sep 17 00:00:00 2001 From: solderq35 Date: Thu, 18 Jan 2024 02:31:39 -0800 Subject: [PATCH] comment cleanup --- src/components/charts/chartController.vue | 2 +- src/components/charts/linechart.js | 2 +- src/components/extras/heropicture.vue | 1 - src/components/view/view.vue | 42 +++------------- src/store/block.module.js | 17 +------ .../block_modifiers/building_compare.mod.js | 30 ------------ src/store/chart.module.js | 49 ++----------------- 7 files changed, 13 insertions(+), 130 deletions(-) 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 = []