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 {
    // Is well, the container around it
    &-container {

    }

    // Week day display at the top
    &-week-day {

    }

    // The individual calender days
    &-day {

    }

    // the pagination
    &-pagination {
        //  Month date
        h5 {

        }

        // The arrow icons
        .icon {

        }
    }

// The tooltip
    &-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>