From e837df08e7398009102e006639e4b2c6bd0332e8 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 12 Dec 2023 14:19:51 -0800 Subject: [PATCH 01/44] test multiple time periods --- .env.development | 2 +- src/components/view/view.vue | 2 ++ src/store/block.module.js | 1 + src/store/chart.module.js | 22 ++++++++++++++++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/.env.development b/.env.development index 5fee36aa..b02de683 100644 --- a/.env.development +++ b/.env.development @@ -1,2 +1,2 @@ -VUE_APP_ROOT_API=http://localhost:3000 +VUE_APP_ROOT_API=https://api.sustainability.oregonstate.edu/v2/energy VUE_APP_HOST_ADDRESS=http://localhost:8080 \ No newline at end of file diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 465d2d9a..68cd5e1d 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -81,6 +81,7 @@ export default { immediate: true, handler: async function ( buildings ) { if ( this.$route.path.includes( 'compare' ) ) { + console.log( this.cards[0] ) if ( this.cards.length > 0 && this.cards[0] ) { await this.$store.dispatch( this.cards[0].path + '/removeAllModifiers' ) await this.$store.dispatch( this.cards[0].path + '/addModifier', 'building_compare' ) @@ -116,6 +117,7 @@ export default { for ( let card of this.cards ) { if ( !card.path ) return this.$nextTick( () => { + console.log( card ) this.$store.commit( card.path + '/dateStart', this.dateStart ) this.$store.commit( card.path + '/dateEnd', this.dateEnd ) this.$store.commit( card.path + '/dateInterval', this.dateInterval ) diff --git a/src/store/block.module.js b/src/store/block.module.js index e0dd2f0f..d68a6be6 100644 --- a/src/store/block.module.js +++ b/src/store/block.module.js @@ -224,6 +224,7 @@ const actions = { await this.getters[payload.group.path + '/meters'][0].promise utilityType = this.getters[this.getters[payload.group.path + '/meters'][0].path + '/type'] } + // something here is important with name assign store.commit( chartSpace + '/name', 'Total ' + utilityType ) const pointMap = { Electricity: 'accumulated_real', diff --git a/src/store/chart.module.js b/src/store/chart.module.js index ae059111..a49610f7 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -35,11 +35,33 @@ const actions = { ...payload, ...store.getters.modifierData } + console.log( store.getters.name ) + let initdatestart = reqPayload.dateStart + if ( store.getters.name === 'Total Electricity' ) { + reqPayload.dateStart = 1700341200 + } + console.log( reqPayload ) const chartModifier = ChartModifiers( payload.graphType, reqPayload.point ) await chartModifier.preGetData( reqPayload, this, store ) let data = await this.dispatch( store.getters.meterGroupPath + '/getData', reqPayload ) + + if ( store.getters.name === 'Total Electricity' ) { + // console.log( data ) + let testmap = new Map() + for ( let newkey of data.keys() ) { + // console.log(newkey) + + // align new key with original datestart + testmap.set( newkey - ( reqPayload.dateStart - initdatestart ), data.get( newkey ) ) + } + console.log( testmap ) + + // comment out the 2 lines below to test experimental moving chart left + // data = testmap + // reqPayload.dateStart = initdatestart + } let chartData = { label: store.getters.name, backgroundColor: store.getters.color, From 3724f5d6ce541de57fadc0d1e8b19f5c17ef4e45 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 18 Dec 2023 15:08:41 -0800 Subject: [PATCH 02/44] commit this.comparebuildings log --- src/components/view/view.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 68cd5e1d..c86bf465 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -183,6 +183,7 @@ export default { compareBuildings: { get () { if ( !this.$route.path.includes( 'compare' ) ) return null + console.log( this.$route.params.buildings ) return JSON.parse( decodeURI( this.$route.params.buildings ) ).map( id => this.$store.getters['map/building']( id ) ) } }, @@ -192,7 +193,9 @@ export default { if ( !this.compareBuildings || this.compareBuildings.length === 0 || !this.compareBuildings[0] ) { return [] } + console.log( this.compareBuildings ) let building = this.$store.getters['map/building']( this.compareBuildings[0].id ) + console.log( building ) if ( !building ) return [] let group = this.$store.getters[building.path + '/primaryGroup']( 'Electricity' ) let block = this.$store.getters[building.path + '/block']( group.id ) From 1fed9d1d0dd3567739523aef64d19474a3d7d581 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 12:01:55 -0800 Subject: [PATCH 03/44] add comments --- src/components/view/view.vue | 5 +++++ src/store/block.module.js | 5 +++-- src/store/block_modifiers/building_compare.mod.js | 10 ++++++++++ 3 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index d86a99f7..4f9f39a2 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -81,9 +81,13 @@ export default { immediate: true, handler: async function (buildings) { if (this.$route.path.includes('compare')) { + // this.cards array only has one element in it console.log(this.cards[0]) if (this.cards.length > 0 && this.cards[0]) { + console.log(buildings.map(building => building.id)) await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers') + // addModifier and updateModifier below call src\store\block_modifiers\building_compare.mod.js + // and src\store\block.module.js to add new charts to comparison / remove old charts (duplicate chart path triggers error) await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare') await this.$store.dispatch(this.cards[0].path + '/updateModifier', { name: 'building_compare', @@ -115,6 +119,7 @@ export default { } } else { for (let card of this.cards) { + console.log(card) if (!card.path) return this.$nextTick(() => { console.log(card) diff --git a/src/store/block.module.js b/src/store/block.module.js index 6501055a..1f11a3f9 100644 --- a/src/store/block.module.js +++ b/src/store/block.module.js @@ -100,6 +100,7 @@ const actions = { async loadCharts (store, charts) { for (let chart of charts) { + // 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) @@ -224,7 +225,7 @@ const actions = { await this.getters[payload.group.path + '/meters'][0].promise utilityType = this.getters[this.getters[payload.group.path + '/meters'][0].path + '/type'] } - // something here is important with name assign + // this defines the "default chart", "Total Electricity" store.commit(chartSpace + '/name', 'Total ' + utilityType) const pointMap = { Electricity: 'accumulated_real', @@ -315,7 +316,7 @@ const actions = { for (let mod of store.getters.modifiers) { await mod.postData(this, store, data) } - // console.log(data, 'is chart data!') + console.log(data, 'is chart data!') return data } } diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js index a70e7d44..a243ae6c 100644 --- a/src/store/block_modifiers/building_compare.mod.js +++ b/src/store/block_modifiers/building_compare.mod.js @@ -54,6 +54,13 @@ 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) { @@ -64,6 +71,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 + console.log(mod.getters) let charts = [] for (let i in ids) { if (parseInt(i) !== 0) { From b6c408ac4e775a2dee2a63761cdf7f43226868d6 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 12:23:42 -0800 Subject: [PATCH 04/44] more comments --- src/components/view/view.vue | 5 ++++- src/store/block_modifiers/building_compare.mod.js | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 4f9f39a2..6b8ff3cc 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -82,13 +82,14 @@ export default { handler: async function (buildings) { if (this.$route.path.includes('compare')) { // this.cards array only has one element in it - console.log(this.cards[0]) if (this.cards.length > 0 && this.cards[0]) { console.log(buildings.map(building => building.id)) await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers') // addModifier and updateModifier below call src\store\block_modifiers\building_compare.mod.js // and src\store\block.module.js to add new charts to comparison / remove old charts (duplicate chart path triggers error) await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare') + + // buildingIds below defines which buildingId are sent to building_compare.mod.js, which also affects chartSpace naming await this.$store.dispatch(this.cards[0].path + '/updateModifier', { name: 'building_compare', data: { @@ -198,6 +199,8 @@ 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 console.log(this.compareBuildings) let building = this.$store.getters['map/building'](this.compareBuildings[0].id) console.log(building) diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js index a243ae6c..091f71c6 100644 --- a/src/store/block_modifiers/building_compare.mod.js +++ b/src/store/block_modifiers/building_compare.mod.js @@ -76,6 +76,9 @@ export default class CompareModifier { console.log(mod.getters) 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 From 1af7a01fb522a42174355b5d31105412e31490f7 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 12:29:40 -0800 Subject: [PATCH 05/44] update comments --- src/components/view/view.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 6b8ff3cc..93f474db 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -85,11 +85,13 @@ export default { if (this.cards.length > 0 && this.cards[0]) { console.log(buildings.map(building => building.id)) await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers') - // addModifier and updateModifier below call src\store\block_modifiers\building_compare.mod.js + // addModifier and updateModifier below call block.module.js, then building_compare.mod.js + // See addModifier and updateModifier functions in block.module.js code // and src\store\block.module.js to add new charts to comparison / remove old charts (duplicate chart path triggers error) await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare') - // buildingIds below defines which buildingId are sent to building_compare.mod.js, which also affects chartSpace naming + // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js, + // which also affects chartSpace naming await this.$store.dispatch(this.cards[0].path + '/updateModifier', { name: 'building_compare', data: { From 590c23d17d6f8900181f97a0fb1fd2fb3432ee20 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 12:32:36 -0800 Subject: [PATCH 06/44] clarify call order --- src/components/view/view.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 93f474db..ca677255 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -85,13 +85,13 @@ export default { if (this.cards.length > 0 && this.cards[0]) { console.log(buildings.map(building => building.id)) await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers') - // addModifier and updateModifier below call block.module.js, then building_compare.mod.js - // See addModifier and updateModifier functions in block.module.js code - // and src\store\block.module.js to add new charts to comparison / remove old charts (duplicate chart path triggers error) + // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js + // See addModifier and updateModifier functions in block.module.js + // See addCharts and RemoveOldCharts in building_compare.mod.js await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare') // buildingIds below defines which buildingId are sent to block.module.js and then building_compare.mod.js, - // which also affects chartSpace naming + // which also affects chartSpace naming (duplicate chart path triggers error) await this.$store.dispatch(this.cards[0].path + '/updateModifier', { name: 'building_compare', data: { From 1ac2954aacb208f02743410f3cf9b079f6f01eff Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 13:32:36 -0800 Subject: [PATCH 07/44] comment update for edit chart labels, vuex --- src/components/view/modals/edit_card.vue | 1 + src/components/view/view.vue | 14 +++++++++----- src/store/block.module.js | 10 ++++++++++ src/store/block_modifiers/building_compare.mod.js | 3 +++ 4 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index 3b4350f6..fb281008 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -369,6 +369,7 @@ export default { const chartPath = charts[index].path this.$store.dispatch(chartPath + '/update', this.form.sets[index]) // update legend name + // line below is what "resets" the chart name, maybe comment it out but needs more testing this.$store.commit(chartPath + '/name', this.$store.getters[chartPath + '/pointString']) } else { this.$store.dispatch(blockPath + '/newChart', this.form.sets[index]) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index ca677255..6cbb8d4a 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -86,15 +86,20 @@ export default { console.log(buildings.map(building => building.id)) await this.$store.dispatch(this.cards[0].path + '/removeAllModifiers') // addModifier and updateModifier below call block.module.js, which then calls building_compare.mod.js - // See addModifier and updateModifier functions in block.module.js - // See addCharts and RemoveOldCharts in building_compare.mod.js await this.$store.dispatch(this.cards[0].path + '/addModifier', 'building_compare') - // 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) + // 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() + 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) } }) @@ -122,7 +127,6 @@ export default { } } else { for (let card of this.cards) { - console.log(card) if (!card.path) return this.$nextTick(() => { console.log(card) diff --git a/src/store/block.module.js b/src/store/block.module.js index 1f11a3f9..eaaae0a3 100644 --- a/src/store/block.module.js +++ b/src/store/block.module.js @@ -89,6 +89,8 @@ 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) } }, @@ -115,6 +117,14 @@ const actions = { ) await this.getters['map/promise'] await this.getters['map/allBuildingPromise'] + console.log(chartSpace) + // 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 (I think), 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()) diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js index 091f71c6..8148f54b 100644 --- a/src/store/block_modifiers/building_compare.mod.js +++ b/src/store/block_modifiers/building_compare.mod.js @@ -39,6 +39,8 @@ 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 @@ -90,6 +92,7 @@ export default class CompareModifier { }) } } + // block.module.js loadCharts function is called here await store.dispatch(mod.getters.path + '/loadCharts', charts) } From 64451eb423f3ca9b5e339f53493fbe11853fa4ce Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 13:45:08 -0800 Subject: [PATCH 08/44] vuex mutation testing --- src/store/block.module.js | 6 +++--- src/store/chart.module.js | 3 +++ 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/store/block.module.js b/src/store/block.module.js index eaaae0a3..3e0d5b31 100644 --- a/src/store/block.module.js +++ b/src/store/block.module.js @@ -120,10 +120,10 @@ const actions = { console.log(chartSpace) // 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, + // 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 (I think), in chart.module file + + // 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) diff --git a/src/store/chart.module.js b/src/store/chart.module.js index fb21dfe0..3e725f20 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -147,6 +147,9 @@ const mutations = { }, building (state, building) { + // example call triggered from block.module.js's updateCharts() + // commented out for now as this triggers many times + // console.log(building) state.building = building }, From 333a32a4f7ae8377e94aa9bb698397890911bf82 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 13:57:56 -0800 Subject: [PATCH 09/44] vuex theory --- src/components/view/view.vue | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 6cbb8d4a..e2b39d6f 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -95,6 +95,11 @@ export default { // 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() + console.log(this.cards[0].path) + // 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: { From 021140a68e125e624878127382c14ee233b217d9 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 15:40:30 -0800 Subject: [PATCH 10/44] updated chart poc --- src/store/chart.module.js | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/src/store/chart.module.js b/src/store/chart.module.js index 3e725f20..020c3317 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -36,15 +36,29 @@ const actions = { ...store.getters.modifierData } console.log(store.getters.name) - let initdatestart = reqPayload.dateStart + + // Reference: https://www.unixtimestamp.com/index.php + // Reference: https://playcode.io/1457582 + let oct = 1697587199 + let nov = 1700265599 + let dec = 1702857599 + + // 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 if (store.getters.name === 'Total Electricity') { - reqPayload.dateStart = 1700341200 + reqPayload.dateStart = nov + reqPayload.dateEnd = dec + } else { + reqPayload.dateStart = oct + reqPayload.dateEnd = nov } console.log(reqPayload) 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') { @@ -54,13 +68,14 @@ const actions = { // console.log(newkey) // align new key with original datestart - testmap.set(newkey - (reqPayload.dateStart - initdatestart), data.get(newkey)) + testmap.set(newkey - (nov - oct), data.get(newkey)) } console.log(testmap) - // comment out the 2 lines below to test experimental moving chart left + // comment out the 3 lines below to test experimental moving chart left // data = testmap - // reqPayload.dateStart = initdatestart + // reqPayload.dateStart = oct + // reqPayload.dateEnd = nov } let chartData = { label: store.getters.name, From 2963856a890fbb8858968f29dee1ce6e904ac1ab Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 16:03:31 -0800 Subject: [PATCH 11/44] more date shift poc --- src/store/chart.module.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/store/chart.module.js b/src/store/chart.module.js index 020c3317..5b18d3a3 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -65,18 +65,18 @@ const actions = { // console.log( data ) let testmap = new Map() for (let newkey of data.keys()) { - // console.log(newkey) - // align new key with original datestart testmap.set(newkey - (nov - oct), data.get(newkey)) } - console.log(testmap) // comment out the 3 lines below to test experimental moving chart left // data = testmap - // reqPayload.dateStart = oct + // reqPayload.dateStart = oct - (nov - oct - (dec - nov)) // shift date start left to account for different month length // reqPayload.dateEnd = nov } + + console.log(data) + let chartData = { label: store.getters.name, backgroundColor: store.getters.color, From d67c1bb0ebb3c80e33c7ca296416346204f79d80 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 19 Dec 2023 17:08:57 -0800 Subject: [PATCH 12/44] more chart label research --- src/components/view/modals/edit_card.vue | 1 + src/store/block_modifiers/building_compare.mod.js | 12 ++++++++++++ src/store/chart.module.js | 4 ++++ 3 files changed, 17 insertions(+) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index fb281008..0e70ecb8 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -363,6 +363,7 @@ export default { } const charts = this.$store.getters[blockPath + '/charts'] + console.log(charts) for (let index in this.form.sets) { if (index < charts.length) { diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js index 8148f54b..e32ab7c0 100644 --- a/src/store/block_modifiers/building_compare.mod.js +++ b/src/store/block_modifiers/building_compare.mod.js @@ -120,8 +120,20 @@ export default class CompareModifier { module is block module, data is new incoming data. */ + console.log(this.data.buildingIds) + console.log(data.datasets) if (this.data.buildingIds[0]) { data.datasets[0].label = this.buildingName(store, this.data.buildingIds[0]) } + // along with the section in edit_card.vue, this also controls how the chart name is updated. + // comment it out for now just in case + /* + 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 5b18d3a3..79f2fd26 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -45,6 +45,10 @@ const actions = { // 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 From aa44cd66f30a1839301a1065eead703dc8ac8679 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Sat, 23 Dec 2023 20:34:46 -0800 Subject: [PATCH 13/44] working proof of concept with edit menu ui --- src/components/extras/heropicture.vue | 4 +- src/components/view/modals/edit_card.vue | 61 ++++++++++++- src/components/view/view.vue | 49 ++++++++-- src/store/block.module.js | 33 ++++++- .../block_modifiers/building_compare.mod.js | 13 ++- src/store/chart.module.js | 91 +++++++++++++++++-- 6 files changed, 228 insertions(+), 23 deletions(-) diff --git a/src/components/extras/heropicture.vue b/src/components/extras/heropicture.vue index 0e762136..edbb726b 100644 --- a/src/components/extras/heropicture.vue +++ b/src/components/extras/heropicture.vue @@ -6,9 +6,9 @@
- +
Ok - Cancel + + Save Time Period {{ this.form.tempMultStart.length + 1 }} + + Cancel + @@ -268,7 +279,9 @@ export default { end: '', intUnit: 1, graphType: 1, - sets: [] + sets: [], + tempMultStart: [], + tempMultEnd: [] } } }, @@ -289,6 +302,12 @@ export default { return this.$route.path.includes('compare') } }, + // Check only one building is in comparison, e.g. for "save time period" button + compareOneBuildingView: { + get () { + return this.$route.path.includes('compare') && JSON.parse(JSON.stringify(this.form.sets)).length === 1 + } + }, personalView: { get () { let viewPath = this.$store.getters['modalController/data'].path @@ -352,6 +371,7 @@ export default { intervalUnit: this.interval(this.form.intUnit) }) } else { + console.log(this.form.start) this.$store.dispatch(blockPath + '/update', { dateStart: this.form.start, dateEnd: this.form.end, @@ -368,7 +388,12 @@ export default { for (let index in this.form.sets) { if (index < charts.length) { 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 this.$store.commit(chartPath + '/name', this.$store.getters[chartPath + '/pointString']) @@ -385,6 +410,18 @@ export default { this.visible = false }, + timeSave: function () { + // Made a dummy temporary state array because directly pushing to this.form.sets[0].multStart caused + // issues with state.getters updating too soon, inconsistencies with converting Unix to English in chart.module.js + this.form.tempMultStart.push(this.form.start) + this.form.tempMultEnd.push(this.form.end) + }, + + cancelTimeSave: function () { + this.form.tempMultStart = [] + this.form.tempMultEnd = [] + }, + deleteChart: function () { this.form.sets.splice(this.currentIndex, 1) this.currentIndex = 0 @@ -406,12 +443,30 @@ export default { this.form.sets = [] for (let chart of this.$store.getters[blockPath + '/charts']) { - const chartSet = { + console.log(chart) + let chartSet = { name: chart.name, building: this.$store.getters[chart.meterGroupPath + '/building'], meter: chart.meterGroupPath, point: chart.point } + if (this.compareOneBuildingView) { + let blockpath = this.$store.getters['modalController/data'].path + // console.log(blockpath) + let searchTerm = 'block_' + let chartIndex = blockpath.indexOf(searchTerm) + // console.log(blockpath.slice(chartIndex + searchTerm.length)) + let blockID = blockpath.slice(chartIndex + searchTerm.length) + // console.log(this.$store.getters[blockpath + '/chart_' + blockID + '/multStart']) + chartSet = { + name: chart.name, + building: this.$store.getters[chart.meterGroupPath + '/building'], + meter: chart.meterGroupPath, + point: chart.point, + multStart: this.$store.getters[blockpath + '/chart_' + blockID + '/multStart'], + multEnd: this.$store.getters[blockpath + '/chart_' + blockID + '/multEnd'] + } + } this.form.sets.push(chartSet) } } else { diff --git a/src/components/view/view.vue b/src/components/view/view.vue index e2b39d6f..71b2f895 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -75,6 +75,23 @@ export default { this.$store.commit(card.path + '/intervalUnit', this.intervalUnit) } } + // Reset multStart and multEnd variables whenever you are on a comparison page for just 1 building + let buildingComparisonNumber = JSON.parse(decodeURI(this.$route.params.buildings)).length + if (this.$route.path.includes('compare') && buildingComparisonNumber === 1) { + for (let card of this.cards) { + if (!card.path) return + this.$nextTick(() => { + let blockpath = this.cards[0].path + let searchTerm = 'block_' + let chartIndex = blockpath.indexOf(searchTerm) + // console.log(blockpath.slice(chartIndex + searchTerm.length)) + let blockID = blockpath.slice(chartIndex + searchTerm.length) + // console.log(blockpath + '/chart_' + blockID + '/multStart') + this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultStart', [this.dateStart]) + this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultEnd', [this.dateEnd]) + }) + } + } } }, compareBuildings: { @@ -83,7 +100,8 @@ export default { if (this.$route.path.includes('compare')) { // this.cards array only has one element in it if (this.cards.length > 0 && this.cards[0]) { - console.log(buildings.map(building => building.id)) + // console.log(buildings.map(building => building.id)) + // console.log(this.cards[0].path) 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') @@ -95,7 +113,7 @@ export default { // 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() - console.log(this.cards[0].path) + // console.log(this.cards[0].path) // 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 > @@ -115,6 +133,7 @@ export default { view: { immediate: true, handler: async function (value) { + console.log(this.cards) if (this.$route.path.includes('building')) { for (let card of this.cards) { if (!card.path) return @@ -134,13 +153,31 @@ export default { for (let card of this.cards) { if (!card.path) return this.$nextTick(() => { - console.log(card) this.$store.commit(card.path + '/dateStart', this.dateStart) this.$store.commit(card.path + '/dateEnd', this.dateEnd) this.$store.commit(card.path + '/dateInterval', this.dateInterval) this.$store.commit(card.path + '/intervalUnit', this.intervalUnit) }) } + // Reset multStart and multEnd variables whenever you are on a comparison page for just 1 building + let buildingComparisonNumber = JSON.parse(decodeURI(this.$route.params.buildings)).length + // console.log(buildingComparisonNumber) + if (this.$route.path.includes('compare') && buildingComparisonNumber === 1) { + for (let card of this.cards) { + if (!card.path) return + this.$nextTick(() => { + let blockpath = this.cards[0].path + let searchTerm = 'block_' + let chartIndex = blockpath.indexOf(searchTerm) + // console.log(blockpath.slice(chartIndex + searchTerm.length)) + let blockID = blockpath.slice(chartIndex + searchTerm.length) + // console.log(blockpath + '/chart_' + blockID + '/multStart') + this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultStart', [this.dateStart]) + this.$store.commit(blockpath + '/chart_' + blockID + '/clearAndSetMultEnd', [this.dateEnd]) + // console.log(this.$store.getters) + }) + } + } } } } @@ -200,7 +237,7 @@ export default { compareBuildings: { get () { if (!this.$route.path.includes('compare')) return null - console.log(this.$route.params.buildings) + // console.log(this.$route.params.buildings) return JSON.parse(decodeURI(this.$route.params.buildings)).map(id => this.$store.getters['map/building'](id)) } }, @@ -212,9 +249,9 @@ export default { } // unintuituively, this.compareBuildings[0].block_ has all the comparison charts in it, and // every other element in this.compareBuildings is ignored - console.log(this.compareBuildings) + // console.log(this.compareBuildings) let building = this.$store.getters['map/building'](this.compareBuildings[0].id) - console.log(building) + // console.log(building) if (!building) return [] let group = this.$store.getters[building.path + '/primaryGroup']('Electricity') let block = this.$store.getters[building.path + '/block'](group.id) diff --git a/src/store/block.module.js b/src/store/block.module.js index 3e0d5b31..fa5ca3ce 100644 --- a/src/store/block.module.js +++ b/src/store/block.module.js @@ -102,6 +102,7 @@ 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 @@ -132,6 +133,8 @@ const actions = { }, async update (store, payload) { + console.log(payload) + console.log(store.getters) if ( payload.name === store.getters.name && payload.dateInterval === store.getters.dateInterval && @@ -153,6 +156,8 @@ const actions = { store.commit('graphType', payload.graphType) store.commit('dateStart', payload.dateStart) store.commit('dateEnd', payload.dateEnd) + console.log(payload) + console.log(store.getters) if (user && user === this.getters['user/onid']) { payload.id = store.getters.id payload.dateStart = new Date(store.getters.dateStart).toISOString() @@ -295,7 +300,7 @@ const actions = { labels: [], datasets: [] } - const reqPayload = { + let reqPayload = { dateStart: parseInt(store.getters.dateStart / 1000), dateEnd: parseInt(store.getters.dateEnd / 1000), intervalUnit: store.getters.intervalUnit, @@ -307,10 +312,34 @@ const actions = { for (let mod of store.getters.modifiers) { await mod.preData(this, store, reqPayload) } + console.log(store.getters) for (let chart of store.getters.charts) { if (!chart.path) continue - chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload)) + // 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) { + for (let i in multStartArray) { + reqPayload = { + dateStart: parseInt(multStartArray[i] / 1000), + dateEnd: parseInt(multEndArray[i] / 1000), + intervalUnit: store.getters.intervalUnit, + 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 + color: store.getters.chartColors[parseInt(i) + 1] + } + chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload)) + } + } else { + chartDataPromises.push(this.dispatch(chart.path + '/getData', reqPayload)) + } } + console.log(chartDataPromises) let chartData = await Promise.all(chartDataPromises) if (store.getters.graphType !== 100) { if (store.getters.graphType === 3 || store.getters.graphType === 4) { diff --git a/src/store/block_modifiers/building_compare.mod.js b/src/store/block_modifiers/building_compare.mod.js index e32ab7c0..487e7b34 100644 --- a/src/store/block_modifiers/building_compare.mod.js +++ b/src/store/block_modifiers/building_compare.mod.js @@ -64,6 +64,7 @@ export default class CompareModifier { // Also, see block.module's unloadChart (this function calls unloadChart) // Consider moving await out of for loop + console.log(mod.getters) for (let i in ids) { if (parseInt(i) !== 0) { let id = ids[i] @@ -75,7 +76,7 @@ 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 - console.log(mod.getters) + // console.log(mod.getters) 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), @@ -125,8 +126,14 @@ export default class CompareModifier { if (this.data.buildingIds[0]) { data.datasets[0].label = this.buildingName(store, this.data.buildingIds[0]) } - // along with the section in edit_card.vue, this also controls how the chart name is updated. - // comment it out for now just in case + // 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]) { diff --git a/src/store/chart.module.js b/src/store/chart.module.js index 79f2fd26..e99b98a9 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -12,6 +12,8 @@ const state = () => { building: null, // String buildingId id: null, // Integer DB ID meterGroupPath: null, + multStart: [], + multEnd: [], path: null, color: '#000000', promise: null, @@ -35,13 +37,18 @@ const actions = { ...payload, ...store.getters.modifierData } - console.log(store.getters.name) + // console.log(store.getters) // Reference: https://www.unixtimestamp.com/index.php // Reference: https://playcode.io/1457582 let oct = 1697587199 let nov = 1700265599 - let dec = 1702857599 + // 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 @@ -49,6 +56,8 @@ const actions = { // 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 @@ -57,7 +66,8 @@ const actions = { reqPayload.dateEnd = nov } console.log(reqPayload) - + */ + console.log(reqPayload) const chartModifier = ChartModifiers(payload.graphType, reqPayload.point) await chartModifier.preGetData(reqPayload, this, store) @@ -81,18 +91,28 @@ const actions = { console.log(data) + let colorPayload = store.getters.color + + if (reqPayload.color) { + colorPayload = reqPayload.color + } + let chartData = { label: store.getters.name, - backgroundColor: store.getters.color, - borderColor: store.getters.color, + backgroundColor: colorPayload, + borderColor: colorPayload, fill: false, showLine: true, spanGaps: false, - data: data + data: data, + multStart: store.getters.multStart, + multEnd: store.getters.multEnd } await chartModifier.postGetData(chartData, reqPayload, this, store) + console.log(chartData) + return chartData }, @@ -108,11 +128,15 @@ const actions = { }, async update (store, payload) { + console.log(payload) + console.log(store.getters) if ( payload.name === store.getters.name && payload.point === store.getters.point && payload.building === store.getters.building && - payload.meter === store.getters.meterGroupPath + payload.meter === store.getters.meterGroupPath && + payload.multStart === store.getters.multStart && + payload.multEnd === store.getters.multEnd ) { return } @@ -137,6 +161,8 @@ const actions = { store.commit('point', payload.point) store.commit('building', payload.building) store.commit('meterGroupPath', payload.meter) + store.commit('multStart', payload.multStart) + store.commit('multEnd', payload.multEnd) } } @@ -178,6 +204,49 @@ const mutations = { meterGroupPath (state, meterGroupPath) { state.meterGroupPath = meterGroupPath + }, + + // Function to convert plain text date format from Edit Form to Unix Timestamps + // See similar dateStart / dateEnd mutation functions in block.module.js + multStart (state, multStart) { + for (let i in multStart) { + if (typeof multStart[i] === 'string') { + console.log('helloooo') + state.multStart[i] = new Date(multStart[i]).getTime() + } else if (typeof multStart[i] === 'number') { + state.multStart[i] = multStart[i] + } else if (multStart[i] instanceof Date) { + state.multStart[i] = multStart[i].getTime() + } else { + throw new Error('Unrecognized format sent to multStart') + } + } + }, + + // Function to remove all elements from VueX state array and insert a placeholder value + // You only need a mutation for this when you are dealing with global state (state.commit, this.store.getters, etc) + clearAndSetMultStart (state, payload) { + state.multStart = [] + state.multStart.push(...payload) + }, + + multEnd (state, multEnd) { + for (let i in multEnd) { + if (typeof multEnd[i] === 'string') { + state.multEnd[i] = new Date(multEnd[i]).getTime() + } else if (typeof multEnd[i] === 'number') { + state.multEnd[i] = multEnd[i] + } else if (multEnd[i] instanceof Date) { + state.multEnd[i] = multEnd[i].getTime() + } else { + throw new Error('Unrecognized format sent to multEnd') + } + } + }, + + clearAndSetMultEnd (state, payload) { + state.multEnd = [] + state.multEnd.push(...payload) } } @@ -218,6 +287,14 @@ const getters = { return state.meterGroupPath }, + multStart (state) { + return state.multStart + }, + + multEnd (state) { + return state.multEnd + }, + pointString (state) { if (state.point) { const map = { From f5932dd19a1378e93e0d36857c28e0b5aa77e9dd Mon Sep 17 00:00:00 2001 From: s-egge Date: Sun, 24 Dec 2023 10:28:58 -0800 Subject: [PATCH 14/44] align charts to the left and fix tooltips --- src/components/charts/chartController.vue | 67 ++++++++++++++++++----- src/components/charts/linechart.js | 4 +- 2 files changed, 55 insertions(+), 16 deletions(-) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index 06b30a1a..570f1623 100644 --- a/src/components/charts/chartController.vue +++ b/src/components/charts/chartController.vue @@ -235,24 +235,42 @@ export default { data.datasets.length >= 1 && data.datasets[0].data.length >= 1 ) { - this.chart.update() - let timeDif = - new Date(data.datasets[0].data[data.datasets[0].data.length - 1].x).getTime() - - new Date(data.datasets[0].data[0].x).getTime() - let dif = 0 - if (timeDif <= 24 * 60 * 60 * 1000) { - dif = 2 - this.chart.options.scales.xAxes[0].time.unit = 'minute' - } else if (timeDif <= 7 * 24 * 60 * 60 * 1000) { - dif = 1 - this.chart.options.scales.xAxes[0].time.unit = 'hour' - } else { - this.chart.options.scales.xAxes[0].time.unit = 'day' - } - this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = (this.height / 200) * 8 - dif + this.chart.update() + + // if multiple chart timeperiods, find chart with largest date range + if (data.datasets.length > 1 && data.datasets[0].multStart.length > 1) { + + // find chart with largest dataset + let largestChart = data.datasets[0] + for (let i in data.datasets) { + if (data.datasets[i].data.length > largestChart.data.length) { + largestChart = data.datasets[i] + } + } + + // map all other datasets to the largest dataset + this.mapXValues(largestChart, data.datasets) + } + + let timeDif = + new Date(data.datasets[0].data[data.datasets[0].data.length - 1].x).getTime() - + new Date(data.datasets[0].data[0].x).getTime() + let dif = 0 + if (timeDif <= 24 * 60 * 60 * 1000) { + dif = 2 + this.chart.options.scales.xAxes[0].time.unit = 'minute' + } else if (timeDif <= 7 * 24 * 60 * 60 * 1000) { + dif = 1 + this.chart.options.scales.xAxes[0].time.unit = 'hour' + } else { + this.chart.options.scales.xAxes[0].time.unit = 'day' + } + this.chart.options.scales.yAxes[0].ticks.maxTicksLimit = (this.height / 200) * 8 - dif } this.chartData = data + console.log(this.path) + console.log(this.chartData) this.loading = false // console.log('done loading!', this.path, data) // this.$store.getters[this.path] @@ -338,6 +356,25 @@ export default { return ' ' } } + }, + // Map x-values of all datasets to the x-values of the largest dataset when dealing with + // multiple time periods so that the charts are overlapped/aligned + mapXValues: function (largestChart, charts) { + for (let chart of charts){ + // check if current chart is the largest chart, don't map if so + // may need a better way to differentiate charts, but this works for now + // and accounts for have two charts that are the same length + if (chart.backgroundColor != largestChart.backgroundColor) { + //loop through all data points in current chart and map x-value to largest chart + //also create a datapoint for the original x-value so that we can display it on tooltip hover + for (let i in chart.data) { + if (chart.data[i].y != null){ + chart.data[i].originalX = chart.data[i].x + chart.data[i].x = largestChart.data[i].x + } + } + } + } } } } diff --git a/src/components/charts/linechart.js b/src/components/charts/linechart.js index 21a0b460..caf08c77 100644 --- a/src/components/charts/linechart.js +++ b/src/components/charts/linechart.js @@ -31,7 +31,9 @@ export default { tooltips: { callbacks: { title: function (item, data) { - let d = new Date(item[0].xLabel) + let originalXlabel = data.datasets[item[0].datasetIndex].data[item[0].index].originalX + // use originalXlabel if it exists, otherwise use the default xLabel + let d = new Date(originalXlabel || item[0].xLabel) let meridiem = 'am' let hours = d.getHours() if (hours > 12) { From 328f433284a99e61d1656d33135778ce49885ec5 Mon Sep 17 00:00:00 2001 From: s-egge Date: Mon, 25 Dec 2023 08:07:09 -0800 Subject: [PATCH 15/44] format --- src/App.vue | 8 +- .../building_list/building_list.vue | 10 +-- src/components/building_list/view_card.vue | 12 +-- .../campaigns/campaign_building_list.vue | 6 +- src/components/campaigns/campaign_list.vue | 4 +- .../campaigns/campaign_list_block.vue | 4 +- .../campaigns/campaign_reduction_tips.vue | 4 +- .../campaigns/main_campaign_view.vue | 18 ++--- src/components/charts/barchart.js | 2 +- src/components/charts/chartController.vue | 77 +++++++++---------- src/components/charts/doughnutchart.js | 2 +- src/components/charts/linechart.js | 2 +- src/components/charts/piechart.js | 2 +- src/components/extras/404.vue | 4 +- src/components/extras/contact.vue | 4 +- src/components/extras/heropicture.vue | 4 +- src/components/extras/media_picker.vue | 4 +- .../get_started/buildingListTab.vue | 2 +- src/components/get_started/commitment.vue | 4 +- src/components/get_started/faq.vue | 2 +- src/components/get_started/feedbackForm.vue | 6 +- .../get_started/getStartedBanner.vue | 4 +- .../get_started/mainDescription.vue | 2 +- src/components/get_started/mapTab.vue | 2 +- src/components/leftBuildingMenu.vue | 10 +-- src/components/map/map.vue | 22 +++--- src/components/map/map_compareside.vue | 14 ++-- src/components/map/sideView.vue | 10 +-- src/components/map/switch_buttons.vue | 4 +- .../map/time_switch_buttons_big.vue | 4 +- src/components/navBar.vue | 4 +- src/components/view/modals/download_data.vue | 12 +-- src/components/view/modals/edit_card.vue | 18 ++--- src/components/view/navdir.vue | 18 ++--- src/components/view/view.vue | 22 +++--- src/store/api.js | 2 +- src/store/block.module.js | 54 ++++++------- src/store/block_modifiers/base.mod.js | 12 +-- .../block_modifiers/building_compare.mod.js | 20 ++--- .../block_modifiers/campaign_linebar.mod.js | 12 +-- src/store/building.module.js | 52 ++++++------- src/store/campaign.module.js | 2 +- src/store/campaigns.module.js | 4 +- src/store/chart.module.js | 58 +++++++------- .../line_bar/accumulated_real.js | 8 +- .../line_bar/avg_accumulated_real.js | 6 +- src/store/chart_modifiers/line_bar/base.js | 6 +- .../chart_modifiers/line_bar/baseline_perc.js | 6 +- .../chart_modifiers/line_bar/energy_change.js | 6 +- .../chart_modifiers/pie_doughnut/base.js | 4 +- src/store/data_layer/data_store.js | 42 +++++----- src/store/map.module.js | 24 +++--- src/store/meter.module.js | 40 +++++----- src/store/meter_group.module.js | 38 ++++----- src/store/modal_controller.module.js | 14 ++-- src/store/user.module.js | 30 ++++---- src/store/view.module.js | 42 +++++----- tests/updateMockData.js | 2 +- 58 files changed, 405 insertions(+), 406 deletions(-) diff --git a/src/App.vue b/src/App.vue index 1abf62ee..029b0525 100644 --- a/src/App.vue +++ b/src/App.vue @@ -24,18 +24,18 @@ export default { components: { navigbar }, - async created () { + async created() { // On load, grab building/meter/map information from the API. await this.$store.dispatch('map/loadMap') // Also check if user is logged in. this.$store.dispatch('user/user') }, - data () { + data() { return { transitionName: 'pageTo' } }, - beforeDestroy () {}, + beforeDestroy() {}, methods: { disableScroll: function () { this.$refs.main.$el.style.overflow = 'hidden' @@ -44,7 +44,7 @@ export default { this.$refs.main.$el.style.overflow = 'auto' } }, - mounted () { + mounted() { // This is the first-timer pop-up window if (!document.cookie.split(';').some(cookieString => cookieString.includes('firstTimer'))) { this.$msgbox({ diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue index feb53ab3..fb1a52a2 100644 --- a/src/components/building_list/building_list.vue +++ b/src/components/building_list/building_list.vue @@ -57,7 +57,7 @@ export default { components: { viewCard }, - data () { + data() { return { search: '', openName: '', @@ -65,7 +65,7 @@ export default { loading: true } }, - async mounted () { + async mounted() { if (this.buildingList) { await this.$store.getters['map/promise'] if (this.$route.params.group && this.groups[this.$route.params.group]) { @@ -81,13 +81,13 @@ export default { }, computed: { buildingList: { - get () { + get() { return this.$route.path.includes('buildings') } }, groups: { - get () { + get() { if (this.buildingList) { let r = {} // await this.$store.getters['map/promise'] @@ -160,7 +160,7 @@ export default { } }, methods: { - resetSearchInput () { + resetSearchInput() { this.search = '' } } diff --git a/src/components/building_list/view_card.vue b/src/components/building_list/view_card.vue index 5db2958b..ed220adb 100644 --- a/src/components/building_list/view_card.vue +++ b/src/components/building_list/view_card.vue @@ -8,12 +8,12 @@ diff --git a/src/components/view/view.vue b/src/components/view/view.vue index bb2ae560..13d0ec7b 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -94,8 +94,7 @@ export default { let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultStart', [this.dateStart]) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultEnd', [this.dateEnd]) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') }) } } @@ -173,8 +172,7 @@ export default { let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultStart', [this.dateStart]) - this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultEnd', [this.dateEnd]) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') }) } } diff --git a/src/store/chart.module.js b/src/store/chart.module.js index b28d0f04..c8f9331d 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -223,13 +223,6 @@ const mutations = { } }, - // Function to remove all elements from VueX state array and insert a placeholder value - // You only need a mutation for this when you are dealing with global state (state.commit, this.store.getters, etc) - resetMultStart (state, payload) { - state.multStart = [] - state.multStart.push(...payload) - }, - multEnd (state, multEnd) { for (let i in multEnd) { if (typeof multEnd[i] === 'string') { @@ -244,10 +237,12 @@ const mutations = { } }, - resetMultEnd (state, payload) { + // 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 = [] - state.multEnd.push(...payload) - } + }, } const getters = { From c8c91901ba579a2775ac07ed4b0bd6b5bf80be7a Mon Sep 17 00:00:00 2001 From: solderq35 Date: Sat, 30 Dec 2023 19:13:09 -0800 Subject: [PATCH 25/44] formatting and fix some issues with saved time period blocks --- src/components/view/modals/edit_card.vue | 8 +++++--- src/store/chart.module.js | 2 +- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index af11089c..476329a4 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -255,7 +255,7 @@ Save Time Period {{ this.form.tempMultStart.length + 1 }} Cancel -
+

Currently Saved Times:

- {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} + + {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} to + {{ convertTimeStamps(new Date(form.tempMultEnd[index])) }}
@@ -473,7 +475,7 @@ export default { meridiem ) }, - + savedTimeButtonFirst: function (i) { let style = {} diff --git a/src/store/chart.module.js b/src/store/chart.module.js index c8f9331d..0b8b5c19 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -242,7 +242,7 @@ const mutations = { resetMultTimeStamps (state) { state.multStart = [] state.multEnd = [] - }, + } } const getters = { From 6835595d78553b9fb599c4349a7d317fef4eb314 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Sat, 30 Dec 2023 19:20:33 -0800 Subject: [PATCH 26/44] remove cancel button functionality from time blocks --- src/components/view/modals/edit_card.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index 476329a4..797c8777 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -259,7 +259,6 @@

Currently Saved Times:

Date: Sat, 30 Dec 2023 20:52:37 -0800 Subject: [PATCH 27/44] fix map page comparison popup navigation issue --- src/components/map/map_compareside.vue | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/src/components/map/map_compareside.vue b/src/components/map/map_compareside.vue index 790faf20..f76d3f04 100644 --- a/src/components/map/map_compareside.vue +++ b/src/components/map/map_compareside.vue @@ -113,6 +113,16 @@ export default { return buildingIds.map(id => this.$store.getters['map/building'](id)) } }, + buildingBlocks: { + get () { + let buildingBlockArray = [] + for (let i in this.buildings) { + // Use spread syntax (...) to create an array of objects, instead of 2d array + buildingBlockArray.push(...this.$store.getters[this.buildings[i].path + '/blocks']) + } + return buildingBlockArray + } + }, mediaArray: { get () { if (!this.buildings) return @@ -154,6 +164,22 @@ export default { return 'slantImage' } } + }, + // Refer to "buildings" and "buildingBlocks" in "computed" section above + // Use buildings > blocks > charts as far as global vuex store getter calls + watch: { + buildings: { + immediate: true, + handler: async function (value) { + for (let buildingBlock of this.buildingBlocks) { + let blockpath = buildingBlock.path + let searchTerm = 'block_' + let chartIndex = blockpath.indexOf(searchTerm) + let blockID = blockpath.slice(chartIndex + searchTerm.length) + this.$store.commit(blockpath + '/chart_' + blockID + '/resetMultTimeStamps') + } + } + } } } From 8a0b664b1374327ee20154a2980967621a42109a Mon Sep 17 00:00:00 2001 From: solderq35 Date: Sat, 30 Dec 2023 22:14:31 -0800 Subject: [PATCH 28/44] more consistent syntax --- src/components/map/map_compareside.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/map/map_compareside.vue b/src/components/map/map_compareside.vue index f76d3f04..c5b7bcf6 100644 --- a/src/components/map/map_compareside.vue +++ b/src/components/map/map_compareside.vue @@ -116,9 +116,9 @@ export default { buildingBlocks: { get () { let buildingBlockArray = [] - for (let i in this.buildings) { + for (let building of this.buildings) { // Use spread syntax (...) to create an array of objects, instead of 2d array - buildingBlockArray.push(...this.$store.getters[this.buildings[i].path + '/blocks']) + buildingBlockArray.push(...this.$store.getters[building.path + '/blocks']) } return buildingBlockArray } From 1511f04c612472c2fae7fa64fa22624d78e3b77a Mon Sep 17 00:00:00 2001 From: s-egge Date: Tue, 9 Jan 2024 11:18:43 -0800 Subject: [PATCH 29/44] 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 | 2 +- src/components/view/modals/edit_card.vue | 33 +++++++++++++++++------ 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index a4926a62..e54f0161 100644 --- a/src/components/charts/chartController.vue +++ b/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 diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index a499440f..a6540852 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -268,6 +268,9 @@ {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} to {{ convertTimeStamps(new Date(form.tempMultEnd[index])) }} + + +
@@ -392,9 +395,12 @@ 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 @@ -402,13 +408,6 @@ export default { // 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; +} From b17ea401ef1d2553b713fde67f9c89025a0928d9 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 9 Jan 2024 12:31:17 -0800 Subject: [PATCH 30/44] fix delete issue --- src/store/chart.module.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/store/chart.module.js b/src/store/chart.module.js index 0b8b5c19..26e0bb3e 100644 --- a/src/store/chart.module.js +++ b/src/store/chart.module.js @@ -209,6 +209,7 @@ const mutations = { // Function to convert plain text date format from Edit Form to Unix Timestamps // See similar dateStart / dateEnd mutation functions in block.module.js multStart (state, multStart) { + state.multStart = [] for (let i in multStart) { if (typeof multStart[i] === 'string') { console.log('helloooo') @@ -224,6 +225,7 @@ const mutations = { }, multEnd (state, multEnd) { + state.multEnd = [] for (let i in multEnd) { if (typeof multEnd[i] === 'string') { state.multEnd[i] = new Date(multEnd[i]).getTime() From 7244d76619490adc0ce18e54443468c97542d8cb Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 9 Jan 2024 14:12:22 -0800 Subject: [PATCH 31/44] edited time period block ui, fixed cancel function --- src/components/charts/chartController.vue | 7 +- src/components/view/modals/edit_card.vue | 78 ++++++++++++----------- 2 files changed, 46 insertions(+), 39 deletions(-) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index e54f0161..d2a4b464 100644 --- a/src/components/charts/chartController.vue +++ b/src/components/charts/chartController.vue @@ -364,7 +364,12 @@ 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() + ', ' + this.buildLabel('y') + chart.label = + chart.data[0].x.toDateString() + + ' to ' + + chart.data[chart.data.length - 1].x.toDateString() + + ', ' + + this.buildLabel('y') } // find chart with largest dataset diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index a6540852..be094585 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -251,27 +251,18 @@ Delete Ok - - Save Time Period {{ this.form.tempMultStart.length + 1 }} + Add Time Period Cancel
-

Currently Saved Times:

+

Time Periods to be Compared (click "Ok" to save):

- + {{ index + 1 }}: {{ convertTimeStamps(new Date(item)) }} to {{ convertTimeStamps(new Date(form.tempMultEnd[index])) }} - - +
@@ -398,8 +389,11 @@ export default { console.log(this.form.sets) for (let index in this.form.sets) { - if (index < charts.length || (this.form.sets[0].multStart && this.form.sets[0].multStart.length < charts[0].multStart.length)) { - console.log("Conditions met") + 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) @@ -432,13 +426,13 @@ export default { }, // Called whenever the edit modal is closed (cancel or x button) - // Checks what is in global state for multStart and multEnd (saved time periods), and removes any unsaved time periods + // Resets tempMultStart and tempMultEnd to match what's currently in global state (store > getters > chart > multStart/End) cancelTimeSave: function () { let blockPath = this.$store.getters['modalController/data'].path const charts = this.$store.getters[blockPath + '/charts'] const chartPath = charts[0].path - this.form.tempMultStart.splice(this.$store.getters[chartPath + '/multStart'].length) - this.form.tempMultEnd.splice(this.$store.getters[chartPath + '/multEnd'].length) + this.form.tempMultStart = JSON.parse(JSON.stringify(this.$store.getters[chartPath + '/multStart'])) + this.form.tempMultEnd = JSON.parse(JSON.stringify(this.$store.getters[chartPath + '/multEnd'])) }, // convert Unix time to English (to nearest minute), taken from src\components\charts\linechart.js @@ -474,29 +468,13 @@ export default { ) }, - savedTimeButtonFirst: function (i) { - let style = {} - - // insert left margin on first "Saved Time Button" to ensure all buttons get same margin behavior - if (i === 0) { - style.marginLeft = '10px' - } - - return style - }, - deleteTimePeriod: function (index) { - - console.log("Form: " , this.form); + 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); + console.log('Form: ', this.form) }, deleteChart: function () { @@ -711,16 +689,40 @@ export default { font-weight: bold; margin-left: 10px; margin-bottom: -5px; + margin-top: 10px; } .savedTimesDiv { text-align: left; } .savedTimesButton { display: inline-block; + line-height: 1; + white-space: nowrap; + background-color: #1a1a1a; + border: 1px solid #dcdfe6; + border-color: #dcdfe6; + color: #fff; + text-align: center; + box-sizing: border-box; + outline: none; + margin-left: 10px; margin-top: 10px; + transition: 0.1s; + font-weight: 700; + padding: 12px 20px; + font-size: 16px; + border-radius: 4px; +} +.savedTimesButton:hover { + background-color: #46484a; +} +.deleteTimeButton { + scale: 1.5; + margin-right: -5px; + margin-left: 8px; } - .deleteTimeButton:hover { - color: #d76740; + color: #d73f09; + cursor: pointer; } From fa13eb99e82b8db7e2251236ce09bc76539ef46d Mon Sep 17 00:00:00 2001 From: s-egge Date: Fri, 12 Jan 2024 10:17:07 -0800 Subject: [PATCH 32/44] Compare meters other than Total Electricity --- src/components/view/modals/edit_card.vue | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index be094585..93383cac 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -104,7 +104,7 @@ @@ -614,6 +614,12 @@ export default { meter: '', point: '' }) + }, + // change measurement selection and update card name based on meter type + meterChange: function(index) { + this.form.sets[index].point = this.meterPoints[0].value + let energyType = this.$store.getters[this.form.sets[index].meter + '/meters'][0].type + this.form.name = energyType } }, watch: { From 2fd2f76acaa00116a6eb7c7ba9cfa1cf8a229fca Mon Sep 17 00:00:00 2001 From: s-egge Date: Mon, 15 Jan 2024 07:36:53 -0800 Subject: [PATCH 33/44] Remove energy type string from top chart label --- src/components/charts/chartController.vue | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index d2a4b464..d3a8b3fe 100644 --- a/src/components/charts/chartController.vue +++ b/src/components/charts/chartController.vue @@ -367,9 +367,7 @@ export default { chart.label = chart.data[0].x.toDateString() + ' to ' + - chart.data[chart.data.length - 1].x.toDateString() + - ', ' + - this.buildLabel('y') + chart.data[chart.data.length - 1].x.toDateString() } // find chart with largest dataset From 974a178494eccf4cd21650091e9e7695a99c2de1 Mon Sep 17 00:00:00 2001 From: s-egge Date: Mon, 15 Jan 2024 07:37:58 -0800 Subject: [PATCH 34/44] Formatting --- src/components/charts/chartController.vue | 5 +---- src/components/view/modals/edit_card.vue | 6 +++--- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/components/charts/chartController.vue b/src/components/charts/chartController.vue index d3a8b3fe..a4926a62 100644 --- a/src/components/charts/chartController.vue +++ b/src/components/charts/chartController.vue @@ -364,10 +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() } // find chart with largest dataset diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index 93383cac..3f243ba6 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -117,7 +117,7 @@ ref="submeters" v-model="form.sets[currentIndex].meter" style="width: 100%" - @change=meterChange(currentIndex) + @change="meterChange(currentIndex)" > @@ -214,7 +214,7 @@ ref="submeters" v-model="form.sets[currentIndex].meter" style="width: 100%" - @change=meterChange(currentIndex) + @change="meterChange(currentIndex)" > @@ -616,7 +616,7 @@ export default { }) }, // change measurement selection and update card name based on meter type - meterChange: function(index) { + meterChange: function (index) { this.form.sets[index].point = this.meterPoints[0].value let energyType = this.$store.getters[this.form.sets[index].meter + '/meters'][0].type this.form.name = energyType From be15fcdea46a447059d544f331a33973e2fa687b Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 15 Jan 2024 23:39:26 -0800 Subject: [PATCH 35/44] move prompt about ok button to tooltip --- src/components/view/modals/edit_card.vue | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index 3f243ba6..4234f346 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -251,10 +251,19 @@ Delete Ok - Add Time Period + + Add Time Period + + Cancel
-

Time Periods to be Compared (click "Ok" to save):

+

Time Periods to be Compared

@@ -689,6 +698,9 @@ export default { .pad-bottom { padding: 1em; } +.top { + text-align: center; +} .savedTimesP { display: block; font-size: 16px; From 269ffd5ec66c814c6eb07a2e6c9a9299f002be58 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Mon, 15 Jan 2024 23:41:15 -0800 Subject: [PATCH 36/44] fix map prompt for mobile --- src/components/map/map_prompt.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index e07ee39e..84af189b 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -80,7 +80,7 @@ export default { top: 100px; width: 330px; left: 250px; - height: 200px; + height: 360px; } } From ccb54fee61e778a1f88806fa384601e30f806157 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 16 Jan 2024 10:36:05 -0800 Subject: [PATCH 37/44] multiple energy type graphs for one building multiple time periods. Fix map prompt number of buildings --- src/components/map/map.vue | 11 ++- src/components/map/map_prompt.vue | 31 +++++-- src/components/map/prompt_error.vue | 8 +- src/components/view/modals/edit_card.vue | 3 +- src/components/view/navdir.vue | 15 ++-- src/components/view/view.vue | 107 ++++++++++++++++------- 6 files changed, 120 insertions(+), 55 deletions(-) diff --git a/src/components/map/map.vue b/src/components/map/map.vue index 42b97886..731dd407 100644 --- a/src/components/map/map.vue +++ b/src/components/map/map.vue @@ -375,6 +375,11 @@ export default { try { if (this.building_compare_error === false) { let path = this.$store.getters['map/building'](this.compareStories[0]).path + if (target !== 'q' && this.compareStories.length === 1) { + this.$router.push({ + path: `/compare/${encodeURI(JSON.stringify(this.compareStories))}/2` + }) + } let mgId = this.$store.getters[path + '/primaryGroup']('Electricity').id let blockSpace = this.$store.getters[path + '/block'](mgId).path await this.$store.dispatch(blockSpace + '/removeAllModifiers') @@ -391,7 +396,7 @@ export default { name: 'map_compare_side', path: path }) - } else { + } else if (target !== 'q' && this.compareStories.length > 1) { this.$router.push({ path: `/compare/${encodeURI(JSON.stringify(this.compareStories))}/2` }) @@ -410,7 +415,9 @@ export default { this.showSide = false this.askingForComparison = true this.compareStories = [] - this.compareStories.push(buildingId) + if (buildingId !== undefined) { + this.compareStories.push(buildingId) + } const data = " " diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index 84af189b..942ae648 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -11,23 +11,36 @@ - Select buildings by clicking on map or using building menu search bar.

- Select a single building to compare multiple time periods for that building.

- NOTE: Only buildings with Electricity data are valid for comparison! + Select buildings by clicking on map or using building menu search bar.

+ Select one building (Any Energy Type) for comparison across multiple time periods

+ Select multiple buildings (Electricity) to be compared across a single time period

 - - Compare + + Compare ({{ Math.min(4, compareStories.length) }} Buildings) Quick Compare Compare in FullScreen - Compare Multiple Time Periods - + + Compare (1 Building) + Cancel @@ -80,7 +93,7 @@ export default { top: 100px; width: 330px; left: 250px; - height: 360px; + height: 380px; } } diff --git a/src/components/map/prompt_error.vue b/src/components/map/prompt_error.vue index df42e780..541e20b4 100644 --- a/src/components/map/prompt_error.vue +++ b/src/components/map/prompt_error.vue @@ -5,8 +5,8 @@ ERROR
You have either not selected any buildings for comparison, or you have included a non-electric - building.You have either not selected any buildings for comparison, or you have included a non-electric building + (for multiple buildings comparison). @@ -24,7 +24,7 @@ export default {} diff --git a/src/components/view/modals/edit_card.vue b/src/components/view/modals/edit_card.vue index 4234f346..f616e2b7 100644 --- a/src/components/view/modals/edit_card.vue +++ b/src/components/view/modals/edit_card.vue @@ -255,7 +255,7 @@ v-if="compareOneBuildingView" class="item" effect="dark" - content='Click to add time period (not saved until you click "Ok")' + content='Add at least 2 time periods to compare. Not saved until you click "Ok"' placement="top" > Add Time Period @@ -492,6 +492,7 @@ export default { }, updateForm: function () { + this.cancelTimeSave() const blockPath = this.$store.getters['modalController/data'].path if (blockPath) { this.form.new = false diff --git a/src/components/view/navdir.vue b/src/components/view/navdir.vue index d34aa605..46ca62d0 100644 --- a/src/components/view/navdir.vue +++ b/src/components/view/navdir.vue @@ -50,7 +50,7 @@   - + @@ -168,14 +168,15 @@ export default { return false } }, - // this checks if the building has electricity data or not - electricBuilding: { + // this checks if page is in /building path + isBuilding: { get () { try { - let path = this.$store.getters['map/building'](this.$route.params.id).path - // eslint-disable-next-line - let mgId = this.$store.getters[path + '/primaryGroup']('Electricity').id - return true + if (this.$store.getters['map/building'](this.$route.params.id).path) { + return true + } else { + return false + } } catch (err) { return false } diff --git a/src/components/view/view.vue b/src/components/view/view.vue index 13d0ec7b..1b8d65b6 100644 --- a/src/components/view/view.vue +++ b/src/components/view/view.vue @@ -90,7 +90,7 @@ export default { for (let card of this.cards) { if (!card.path) return this.$nextTick(() => { - let blockpath = this.cards[0].path + let blockpath = card.path let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) @@ -104,33 +104,66 @@ export default { handler: async function (buildings) { if (this.$route.path.includes('compare')) { // this.cards array only has one element in it - if (this.cards.length > 0 && this.cards[0]) { - // console.log(buildings.map(building => building.id)) - // console.log(this.cards[0].path) - 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') + if (buildings.length > 1) { + if (this.cards.length > 0 && this.cards[0]) { + // console.log(buildings.map(building => building.id)) + // console.log(this.cards[0].path) + 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() + // 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() + // 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() - // console.log(this.cards[0].path) - // Example this.cards[0].path: map/building_29/block_79 + // console.log(this.cards[0].path) + // 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) + // 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) + } + }) + } + } else { + for (let i in this.cards) { + if (this.cards.length > 0 && this.cards[i]) { + // console.log(buildings.map(building => building.id)) + // console.log(this.cards[0].path) + 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() + + // console.log(this.cards[0].path) + // 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[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) + } + }) } - }) + } } } } @@ -168,7 +201,7 @@ export default { for (let card of this.cards) { if (!card.path) return this.$nextTick(() => { - let blockpath = this.cards[0].path + let blockpath = card.path let searchTerm = 'block_' let chartIndex = blockpath.indexOf(searchTerm) let blockID = blockpath.slice(chartIndex + searchTerm.length) @@ -238,14 +271,24 @@ export default { } // unintuituively, this.compareBuildings[0].block_ has all the comparison charts in it, and // every other element in this.compareBuildings is ignored - // console.log(this.compareBuildings) - let building = this.$store.getters['map/building'](this.compareBuildings[0].id) - // console.log(building) - 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 [] - return [this.$store.getters[building.path + '/block'](group.id)] + console.log(this.compareBuildings) + if (this.compareBuildings.length > 1) { + let building = this.$store.getters['map/building'](this.compareBuildings[0].id) + // console.log(building) + 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 [] + return [this.$store.getters[building.path + '/block'](group.id)] + } else { + let building = this.$store.getters['map/building'](this.compareBuildings[0].id) + // console.log(building) + 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 [] + return this.$store.getters[building.path + '/blocks'] + } } else { if (!this.view || !this.view.id) return [] return this.$store.getters[this.view.path + '/blocks'] From a2b3023ed24c9fe155d5b5a1d8df9819de5fe271 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 16 Jan 2024 10:44:58 -0800 Subject: [PATCH 38/44] mobile map prompt adjustments --- src/components/map/map_prompt.vue | 2 +- src/components/map/prompt_error.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index 942ae648..ac14d66a 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -93,7 +93,7 @@ export default { top: 100px; width: 330px; left: 250px; - height: 380px; + height: 280px; } } diff --git a/src/components/map/prompt_error.vue b/src/components/map/prompt_error.vue index 541e20b4..f4b1508e 100644 --- a/src/components/map/prompt_error.vue +++ b/src/components/map/prompt_error.vue @@ -53,7 +53,7 @@ export default {} top: 80px; width: 330px; left: 250px; - height: 200px; + height: 210px; } } From 717c5bbcb024ae2e2a90b1c7b05a12e1fed9218a Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 16 Jan 2024 10:50:10 -0800 Subject: [PATCH 39/44] mobile prompt adjustment --- src/components/map/map_prompt.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index ac14d66a..ba0d7a0f 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -93,7 +93,7 @@ export default { top: 100px; width: 330px; left: 250px; - height: 280px; + height: 290px; } } From f690a5d9b33d1318f54d007c91779f22ad7cdc44 Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 16 Jan 2024 10:52:49 -0800 Subject: [PATCH 40/44] prompt height for mobile --- src/components/map/map_prompt.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/map/map_prompt.vue b/src/components/map/map_prompt.vue index ba0d7a0f..29df8bce 100644 --- a/src/components/map/map_prompt.vue +++ b/src/components/map/map_prompt.vue @@ -93,7 +93,7 @@ export default { top: 100px; width: 330px; left: 250px; - height: 290px; + height: 300px; } } From 341e6f8e36ce95caa6748e2eb1a903b9cfbbd97f Mon Sep 17 00:00:00 2001 From: solderq35 Date: Tue, 16 Jan 2024 16:57:51 -0800 Subject: [PATCH 41/44] update comment on navdir --- src/components/view/navdir.vue | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/view/navdir.vue b/src/components/view/navdir.vue index 46ca62d0..4dd47773 100644 --- a/src/components/view/navdir.vue +++ b/src/components/view/navdir.vue @@ -3,14 +3,16 @@ Info: From README: "This component is the small navigation bar underneath the heroPicture. It offers quick routing between stories and groups." --> +