Vue Heatmap
Simple vue calender heatmap
Installation
npm i @script-development/heatmap
// or for pnpm
pnpm i @script-development/heatmap
In ur main.ts import the styling ( or add ur own )
import '@script-development/heatmap/style.css';
If you'd like to add ur own styling, everything is prefixed with heatmap-
.heatmap {
&-container {
}
&-week-day {
}
&-day {
}
&-pagination {
h5 {
}
.icon {
}
}
&-tooltip {
}
}
Supported props
Type definitions can be found here
values: {
type: Object as PropType<HeatmapValues>,
required: true,
},
locale: {
type: String as PropType<keyof Locales>,
default: 'en-US',
},
color: {
type: String,
default: '153, 27, 27',
},
enablePagination: {
type: Boolean,
default: true,
}
Usage example
Add it like you would any other component
<script lang="ts" setup>
import Heatmap from '@script-development/heatmap';
</script>
<template>
<Heatmap color="30, 134, 151" values="{max: 10, '2022-06-25': 17, '2022-06-26': 24}"/>
</template>