Big update to deploy scripts, and deploy prosecss

client/src/components/Metrictracking/PillCalendarGraph.vue

@@ -81,6 +81,13 @@
 
 	}
 
+	.days-since {
+		padding: 0.75em 0.5em 0.25em 0.5em;
+		font-size: 0.95em;
+	}
+	.days-since-row {
+		padding: 0.15em 0;
+	}
 	.pill-container {
 		width: 100%;
 	}
@@ -229,36 +236,47 @@
 
 				
 				
-				<span class="pill-container" v-for="(entry, dateCode) in getChartData" v-if="dateCode == `${day}.${calendar.month}.${calendar.year}`">
+				<template v-for="(entry, dateCode) in getChartData" :key="dateCode">
+				<span class="pill-container" v-if="dateCode == `${day}.${calendar.month}.${calendar.year}`">
+					<template v-for="(dayData, fieldId) in entry" :key="fieldId">
 					<span 
-						v-for="(dayData, fieldId) in entry" 
 						v-if="showZeroValuesCheck(dayData.value, fieldId)"
 						class="pill" 
-						:class="[$parent.$parent.getFieldColor(fieldId), { 
+						:class="[getFieldColor(fieldId), { 
 							'did-next':dayData.didNext, 
 							'did-last':dayData.didLast,
 							'last-high':dayData.lastHigh,
 							'next-high':dayData.nextHigh,
 							}]">
 						<!-- 'zero-day':dayData.value == lowestGraphValue, -->
-						<!-- <i v-if="dayData.value != 0" :class="`tiny ${$parent.$parent.getFieldColor(fieldId)} ${$parent.$parent.getFieldIcon(fieldId)} icon`"></i> -->
+						<!-- <i v-if="dayData.value != 0" :class="`tiny ${getFieldColor(fieldId)} ${getFieldIcon(fieldId)} icon`"></i> -->
 						<!-- <span v-else class="icon-spacer"></span> 
 							:style="{height:(Math.round(dayData.value*5)+'px')}"
 
 						-->
 						<span v-if="dayData.value > lowestGraphValue-1" class="big-day">
-							<i v-if="!hideIcons" :class="`tiny white ${$parent.$parent.getFieldIcon(fieldId)} icon`"></i>
+							<i v-if="!hideIcons" :class="`tiny white ${getFieldIcon(fieldId)} icon`"></i>
 							<span v-if="!hideValues">
 								{{ getDayValue(fieldId, dayData.value) }}
 							</span>
 						</span>
 					</span>
+					</template>
 				</span>
+				</template>
 				<!-- <span v-for="fieldId in graph.fieldIds"></span> -->
 
 			</div>
 		</div>
 
+		<!-- time since each metric was last recorded -->
+		<div class="days-since" v-if="daysSince.length > 0">
+			<div class="days-since-row" v-for="entry in daysSince" :key="entry.fieldId">
+				<i :class="`${entry.color} ${entry.icon} icon`"></i>
+				<span v-if="entry.days === null">Days Since {{ entry.label }} - no entries yet</span>
+				<span v-else>Days Since {{ entry.label }} - {{ entry.days }} {{ entry.days === 1 ? 'day' : 'days' }}.</span>
+			</div>
+		</div>
 
 	</div>
 </template>
@@ -269,6 +287,7 @@
 	// let chartData = {}
 
 	export default {
+		inject: ['getFieldColor', 'getFieldIcon', 'getFieldLabel'],
 		props: [
 			'graph', // options associated with this graph
 			'userFields', // all field attributes
@@ -309,6 +328,53 @@
 			this.setupCalendar(new Date())
 		},
 		computed: {
+			// "Days Since <metric> - <n> days" for every field on this graph.
+			// Counts a day as recorded only if it passes the same
+			// showZeroValuesCheck the pills use, so the "Show/Hide Lowest Value"
+			// toggle moves these numbers too.
+			daysSince(){
+
+				// showZeroValuesCheck reads lowestGraphValue, which getChartData
+				// assigns as a side effect -- touch it so the threshold is current
+				// and so this recomputes whenever the chart data does.
+				void this.getChartData
+
+				const dayMs = 86400000
+				const midnight = (time) => {
+					const date = new Date(time)
+					date.setHours(0, 0, 0, 0)
+					return date.getTime()
+				}
+				const today = midnight(Date.now())
+
+				return (this.graph?.fieldIds || []).map(fieldId => {
+
+					let latest = null
+
+					Object.keys(this.cycleData || {}).forEach(dateCode => {
+
+						const value = this.cycleData[dateCode]?.[fieldId]
+						if(value === undefined || value === null || value === ''){ return }
+
+						// honour the Lowest Value toggle
+						if(!this.showZeroValuesCheck(value, fieldId)){ return }
+
+						const time = this.dateCodeToTime(dateCode)
+						// ignore unparseable codes and anything dated ahead of today
+						if(time === null || time > today){ return }
+
+						if(latest === null || time > latest){ latest = time }
+					})
+
+					return {
+						fieldId,
+						label: this.getFieldLabel(fieldId),
+						icon: this.getFieldIcon(fieldId),
+						color: this.getFieldColor(fieldId),
+						days: latest === null ? null : Math.round((today - latest) / dayMs),
+					}
+				})
+			},
 			getChartData(){
 
 				let chartData = {}
@@ -389,11 +455,26 @@
 			},
 		},
 		methods: {
+			// Date codes are stored unpadded as D.M.YYYY
+			dateCodeToTime(dateCode){
+
+				const parts = String(dateCode).split('.').map(Number)
+				if(parts.length !== 3 || parts.some(isNaN)){ return null }
+
+				const [day, month, year] = parts
+				const date = new Date(year, month - 1, day)
+				date.setHours(0, 0, 0, 0)
+
+				return isNaN(date.getTime()) ? null : date.getTime()
+			},
 			showZeroValuesCheck(dayValue, fieldId){
 
+				// Optional chaining: a graph can reference a default field (BT,
+				// CM, ...) that was never customised, so it has no userFields
+				// entry and the bare lookup threw.
 				// if graph type is boolean or there are two options
-				let isBooleanField = this.userFields[fieldId].type == 'boolean'
-				if(this.userFields[fieldId].customOptions){
+				let isBooleanField = this.userFields[fieldId]?.type == 'boolean'
+				if(this.userFields[fieldId]?.customOptions){
 					let options = this.userFields[fieldId].customOptions
 					
 					isBooleanField = options.split(',').length == 2
@@ -411,6 +492,13 @@
 				}
 
 
+				// lowestGraphValue comes from Math.min of the charted values, so
+				// it is Infinity when the window holds no data -- without the
+				// finite guard nothing would ever clear the threshold.
+				if(!isFinite(this.lowestGraphValue)){
+					return true
+				}
+
 				return this.showZeroValues || dayValue > this.lowestGraphValue
 			},
 			getDayValue(fieldId, value){