From c49703f7e6d700b3e0e089d2b0942a1484883e59 Mon Sep 17 00:00:00 2001 From: Steven Date: Tue, 12 Sep 2023 17:08:55 +1000 Subject: [PATCH] update time of day layout --- components/Energy/TimeOfDay.vue | 38 +++--- components/Energy/TimeOfDayChartHeader.vue | 1 - components/Energy/TimeOfDaySection.vue | 145 +++++++++------------ components/Energy/TimeOfDaySparkline.vue | 80 +++--------- components/Vis/MultiLine.vue | 5 +- 5 files changed, 106 insertions(+), 163 deletions(-) diff --git a/components/Energy/TimeOfDay.vue b/components/Energy/TimeOfDay.vue index 8c7d45e4..615b825a 100644 --- a/components/Energy/TimeOfDay.vue +++ b/components/Energy/TimeOfDay.vue @@ -2,11 +2,11 @@
@@ -29,6 +29,7 @@ :cursor-type="'line'" :append-datapoint="false" :stroke-dasharray="'2,2'" + :margin-left="0" class="vis-chart" @date-hover="(evt, date) => $emit('date-hover', date)" @domain-hover="handleDomainHover" @@ -50,6 +51,7 @@ :positive-y-bg="'rgba(255,255,255, 0.2)'" :cursor-type="'line'" :append-datapoint="false" + :margin-left="0" class="vis-chart" @date-hover="(evt, date) => $emit('date-hover', date)" @domain-hover="handleDomainHover" @@ -75,6 +77,7 @@ :cursor-type="'line'" :append-datapoint="false" :stroke-dasharray="'2,2'" + :margin-left="0" class="vis-chart" @date-hover="(evt, date) => $emit('date-hover', date)" @domain-hover="handleDomainHover" @@ -98,6 +101,7 @@ :positive-y-bg="'rgba(255,255,255, 0.2)'" :cursor-type="'line'" :append-datapoint="false" + :margin-left="0" class="vis-chart" @date-hover="(evt, date) => $emit('date-hover', date)" @domain-hover="handleDomainHover" @@ -105,24 +109,24 @@ @leave="handleVisLeave" /> -
-
+
- + - + --> @@ -233,7 +237,7 @@ export default { data() { return { - expand: true, + expand: false, xTicks: utcHour.every(2), highlightDomain: null, highlightRow: null @@ -254,21 +258,17 @@ export default { }, chartHeight() { - // return 688 - return 400 + return this.expand ? this.tableRowDomainsCount > 29 ? 692 : 400 : 200 }, chartHeightPrice() { - // return 392 - return 200 + return this.expand ? this.tableRowDomainsCount > 29 ? 392 : 200 : 100 }, chartHeightPositiveLogPrice() { - // return 150 - return 100 + return this.expand ? this.tableRowDomainsCount > 29 ? 150 : 100 : 50 }, chartHeightNegativeLogPrice() { - // return 150 - return 100 + return this.expand ? this.tableRowDomainsCount > 29 ? 150 : 100 : 50 }, domainsWithColour() { @@ -281,6 +281,10 @@ export default { } }) }, + + tableRowDomainsCount() { + return this.tableRowDomains.length + }, tableRowDomains() { return this.expand ? this.allRowsDomains : this.collapsedDomains diff --git a/components/Energy/TimeOfDayChartHeader.vue b/components/Energy/TimeOfDayChartHeader.vue index 13421b1d..73b31897 100644 --- a/components/Energy/TimeOfDayChartHeader.vue +++ b/components/Energy/TimeOfDayChartHeader.vue @@ -60,7 +60,6 @@ $hover-padding: 3px 6px 2px; header { display: flex; justify-content: space-between; - padding-left: 10px; padding-top: 2px; margin-bottom: 2px; } diff --git a/components/Energy/TimeOfDaySection.vue b/components/Energy/TimeOfDaySection.vue index 3c7bf6db..4a167e59 100644 --- a/components/Energy/TimeOfDaySection.vue +++ b/components/Energy/TimeOfDaySection.vue @@ -7,7 +7,7 @@ v-if="showStackedAverages" class="vis-wrapper"> @@ -45,17 +45,38 @@ width: sparklineButtonWidth }" --> -
+ +
+

Time of Day

+
+
+ +
+
+
- +
- -
- -
- -
-
- - -
- -
-
-
@@ -172,7 +139,9 @@ export default { curveSmooth: CHART_CURVE_SMOOTH, curveStep: CHART_CURVE_STEP, selectedToD: null, - selectedToDs: [] + selectedToDs: [], + chartEnergyNetLine: true, + chartEnergyRenewablesLine: true } }, @@ -189,8 +158,8 @@ export default { interval: 'interval', filterPeriod: 'filterPeriod', hiddenFuelTechs: 'hiddenFuelTechs', - chartEnergyRenewablesLine: 'chartOptionsPowerEnergy/chartEnergyRenewablesLine', - chartEnergyNetLine: 'chartOptionsPowerEnergy/chartEnergyNetLine' + // chartEnergyRenewablesLine: 'chartOptionsPowerEnergy/chartEnergyRenewablesLine', + // chartEnergyNetLine: 'chartOptionsPowerEnergy/chartEnergyNetLine' }), sparklineButtonWidth() { @@ -237,11 +206,11 @@ export default { } return [ + ...domainTotalNetGeneration, + ...domainTotalRenewables, ...filtered.reverse(), ...price, - ...this.domainTemperature, - ...domainTotalNetGeneration, - ...domainTotalRenewables + ...this.domainTemperature ] }, @@ -291,8 +260,6 @@ export default { } }) - console.log('datasets', datasets) - return datasets }, @@ -315,8 +282,6 @@ export default { } }) - console.log('datasets', datasets) - return datasets }, @@ -342,8 +307,6 @@ export default { }) } - console.log('average datasets', averagesDs) - return averagesDs }, @@ -398,6 +361,12 @@ export default { } }, + watch: { + allDomains(val) { + console.log('changed', val) + } + }, + created() { this.yTicks = [] this.tickFormat = (d) => getTimeLabel(d) @@ -411,7 +380,8 @@ export default { }, mounted() { - // console.log(this.currentDomainPowerEnergy) + const filtered = this.datasets.filter(d => d.id === '_total' || d.id === '_totalRenewables') + this.selectedToDs = filtered }, methods: { @@ -428,12 +398,12 @@ export default { }, getYMin(dataset) { - let min = 0 + let min = null dataset.forEach((d) => { this.timeDomains.forEach((domain) => { const val = d[domain.id] - if (val < min) { + if (min === null || val < min) { min = val } }) @@ -459,7 +429,7 @@ export default { isSelected(id) { const find = this.selectedToDs.find(d => d.id === id) - return find + return find ? true : false }, toggleSelected(ds) { @@ -476,6 +446,15 @@ export default { \ No newline at end of file diff --git a/components/Energy/TimeOfDaySparkline.vue b/components/Energy/TimeOfDaySparkline.vue index e3855ff4..521ba5b4 100644 --- a/components/Energy/TimeOfDaySparkline.vue +++ b/components/Energy/TimeOfDaySparkline.vue @@ -4,12 +4,12 @@ class="vis-wrapper sparkline-button" :class=" { selected: selected }" > - {{ title }} +
{{ title }}
- @@ -226,17 +195,17 @@ export default { }, chartHeight() { - return this.expand ? 400 : 45 + return 25 }, chartHeightPrice() { - return this.expand ? 160 : 20 + return 10 }, chartHeightPositiveLogPrice() { - return this.expand ? 130 : 15 + return 8 }, chartHeightNegativeLogPrice() { - return this.expand ? 110 : 10 + return 6 }, domainsWithColour() { @@ -293,8 +262,8 @@ export default { methods: { handleDomainHover(domain) { - this.highlightRow = domain - this.highlightDomain = domain + // this.highlightRow = domain + // this.highlightDomain = domain }, handleDateHover(date) { @@ -314,18 +283,18 @@ export default { }, getChartColour(id) { - if (id === '_average') return '#DC3A33' + if (id === '_average') return this.selected ? '#ccc' : '#DC3A33' return this.todayKey === id ? '#333' : this.expand ? '#aaa' : '#ccc'; }, getTextColour(id) { - if (id === '_average') return '#DC3A33' + if (id === '_average') return this.selected ? '#ccc' : '#DC3A33' return this.todayKey === id ? '#333' : this.expand ? '#787878' : '#ddd'; }, getPathStrokeWidth(id) { - if (id === '_average') return 2 - return this.todayKey === id ? 2 : 1; + if (id === '_average') return 1 + return this.todayKey === id ? 1 : 1; }, handleTableToggle() { @@ -333,11 +302,11 @@ export default { }, handleMouseEnter(id) { - this.highlightDomain = id + // this.highlightDomain = id }, handleMouseLeave() { - this.highlightDomain = null + // this.highlightDomain = null } } } @@ -361,14 +330,13 @@ $border-radius: 0.4rem; cursor: pointer; border-radius: $border-radius; background-color: rgba(255,255,255, 0.3); - padding: 0.3rem 0.6rem; .selected { - background-color: $opennem-link-color; + background-color: #c74523; color: #fff; &:hover { - background-color: $opennem-link-color-dark; + background-color: #963f29; } } @@ -377,23 +345,9 @@ $border-radius: 0.4rem; } } -header { - // padding-left: 0.3rem; -} - .sparkline { padding-right: 5px; padding-top: 3px; + padding-bottom: 5px; } - -footer { - padding: 3px 0.3rem 0; - font-size: 11px; - - .tooltip-container { - display: flex; - justify-content: space-between; - } -} - diff --git a/components/Vis/MultiLine.vue b/components/Vis/MultiLine.vue index 2511eaad..da0baa9b 100644 --- a/components/Vis/MultiLine.vue +++ b/components/Vis/MultiLine.vue @@ -623,7 +623,7 @@ export default { this.y2Range = [this.height, 0] this.x = scaleTime().range([0, this.width]) this.y1 = this.y1Log - ? scaleSymlog().range(this.y1Range) + ? scaleSymlog().range(this.y1Range).nice() : scaleLinear().range(this.y1Range).nice() this.y2 = scaleLinear().range(this.y2Range).nice() this.z = scaleOrdinal() @@ -674,6 +674,9 @@ export default { .attr('height', this.height) this.$cursorLineGroup = $svg.select('.cursor-line-group') + this.$cursorLineGroup + .style('clip-path', this.clipPathUrl) + .style('-webkit-clip-path', this.clipPathUrl) if (!this.$cursorRect) { this.$cursorRect = this.$cursorLineGroup.append('rect') }
{{ title }} -