better reactivity

Author: razorness

dev/serve.vue

@@ -1,5 +1,16 @@
 <template>
 	<div>
+		<h4>Unit Select</h4>
+		<div>
+			<input type="radio" id="one" value="Dings" v-model="picked"/>
+			<label for="one">Dings</label>
+			<br/>
+			<input type="radio" id="two" value="Da" v-model="picked"/>
+			<label for="two">Da</label>
+			<br/>
+			<span>Current Unit: {{ picked }}</span>
+		</div>
+		<br>
 		<h4>None</h4>
 		<calendar-heatmap :values="[]" :end-date="endDate" style="max-width: 675px"/>
 		<br>
@@ -15,14 +26,17 @@
 			more  : 'Mehr'
 		}"/>
 		<br>
+		<h4>Tooltip Unit</h4>
+		<calendar-heatmap :values="values" :end-date="endDate" style="max-width: 675px" :tooltip-unit="picked"/>
+		<br>
 		<h4>TooltipFormatter</h4>
 		<calendar-heatmap
 			:values="values"
 			:end-date="endDate"
 			style="max-width: 675px"
-			:tooltip-formatter="(c) => c.count ? c.count / 3600 / 1000 : 'NÖX'"
+			:tooltip-formatter="(c, u) => c.count ? (c.count / 3600 / 1000) + ' ' + u: 'NÖX'"
 			no-data-text="NIX"
-			tooltip-unit="Dings"
+			:tooltip-unit="picked"
 		/>
 	</div>
 </template>
@@ -42,7 +56,8 @@
 		data() {
 			return {
 				values : data,
-				endDate: new Date('2021-08-01')
+				endDate: new Date('2021-08-01'),
+				picked : 'Dings'
 			};
 		}
 	});

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-calendar-heatmap",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "A lightweight calendar heatmap Vue 3 component built on SVG, inspired by julienr114's vue-calendar-heatmap ans github's contribution calendar graph",
   "keywords": [
     "vue",

src/CalendarHeatmap.vue

@@ -75,8 +75,8 @@
 </template>
 
 <script lang="ts">
-	import { defineComponent, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from 'vue';
-	import { CalendarItem, Heatmap, Locale, Month, Position, Value } from '@/Heatmap';
+	import { defineComponent, nextTick, onBeforeUnmount, onMounted, PropType, ref, toRefs, watch } from 'vue';
+	import { CalendarItem, Heatmap, Locale, Month, Position, TooltipFormatter, Value } from '@/Heatmap';
 	import tippy, { createSingleton, CreateSingletonInstance, Instance } from 'tippy.js';
 	import 'tippy.js/dist/tippy.css';
 	import 'tippy.js/dist/svg-arrow.css';
@@ -112,7 +112,7 @@
 				default: Heatmap.DEFAULT_TOOLTIP_UNIT
 			},
 			tooltipFormatter: {
-				type: Function as PropType<(day: CalendarItem) => string>
+				type: Function as PropType<TooltipFormatter>
 			},
 			vertical        : {
 				type   : Boolean,
@@ -201,7 +201,7 @@
 				if (this.tooltip) {
 					if (day.count !== undefined) {
 						if (this.tooltipFormatter) {
-							return this.tooltipFormatter(day);
+							return this.tooltipFormatter(day, this.tooltipUnit);
 						}
 						return `<b>${day.count} ${this.tooltipUnit}</b> ${this.lo.on} ${this.lo.months[ day.date.getMonth() ]} ${day.date.getDate()}, ${day.date.getFullYear()}`;
 					} else if (this.noDataText) {
@@ -256,7 +256,7 @@
 				() => {
 					heatmap.value = new Heatmap(props.endDate as Date, props.values, props.max);
 					tippyInstances?.map(i => i.destroy());
-					initTippy();
+					nextTick(initTippy);
 				}
 			);
 

src/Heatmap.ts

@@ -36,6 +36,8 @@ export enum Position {
 	VERTICAL   = 'vertical'
 }
 
+export type TooltipFormatter = (item: CalendarItem, unit: string) => string;
+
 export class Heatmap {
 
 	static readonly DEFAULT_RANGE_COLOR    = [ '#ebedf0', '#dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e' ];