🚀 Usage

Use the following steps to use the Calendar Heatmap in your Vue project.

Import

Import NxCalendarHeatmap component in your component.

App.vue

<template>
  <section>
    <span> Yearly </span>

    <NxCalendarHeatmap :options="options" :data="heatmapData">
      <template #footerContent>
        <a href="#"> Footer hint </a>
      </template>
    </NxCalendarHeatmap>
  </section>
</template>

<script setup lang="ts">
// vue
import { onMounted, ref, watch } from "vue";

// calendar libs
import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
import {
  IHeatmapDay,
  HeatMapCalendarType,
  ICalendarHeatmapOptions,
  IHeatmapColor,
  HeatmapLevelsDirection,
} from "@ngeenx/nx-calendar-heatmap-utils";

// third party
import { DateTime } from "luxon";

// ...
</script>

<style lang="scss">
@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
@import "tippy.js/dist/tippy.css";
</style>

Data Source

data property is an array of IHeatmapDay objects. Each object represents a day in the heatmap (dates must sort in ascending order).

Data Source

Data must be provided by the parent component. There is no internal API call to fetch the data or date ordering features. In this case provided data must cover the selected calendar type and day order.

App.vue

<template>
  <section>
    <span> Yearly </span>

    <NxCalendarHeatmap :options="options" :data="heatmapData">
      <template #footerContent>
        <a href="#"> Footer hint </a>
      </template>
    </NxCalendarHeatmap>
  </section>
</template>

<script setup lang="ts">
// vue
import { onMounted, ref, watch } from "vue";

// calendar libs
import { NxCalendarHeatmap } from "@ngeenx/nx-vue-calendar-heatmap";
import {
  IHeatmapDay,
  HeatMapCalendarType,
  ICalendarHeatmapOptions,
  IHeatmapColor,
  HeatmapLevelsDirection,
} from "@ngeenx/nx-calendar-heatmap-utils";

// third party
import { DateTime } from "luxon";

const startDate = ref(DateTime.now().startOf("year"));
const heatmapData = ref<IHeatmapDay[]>([]);

const options = ref<ICalendarHeatmapOptions>({
  type: HeatMapCalendarType.YEARLY,
  startDate: startDate.value,
  onClick: onDayClick,
});

// ...

const generateHeatmapData = (startDate: DateTime) => {
  let endDate: DateTime = startDate.endOf("year");

  const daysBetween = Math.floor(endDate.diff(startDate, "days").days);
  const heatmap = [];

  let currentDate = startDate;

  for (let i = 0; i <= daysBetween; i++) {
    const day: IHeatmapDay = {
      date: currentDate,
      count: Math.floor(Math.random() * 101),
    };

    heatmap.push(day);

    currentDate = currentDate.plus({ days: 1 });
  }

  return heatmap;
};

const onDayClick = (day: IHeatmapDay) => {
  console.log(`Clicked on ${day.date} with value ${day.count}`);
};

// ...

onMounted(() => {
  heatmapData.value = generateHeatmapData(startDate.value);
});
</script>

<style lang="scss">
@import "@ngeenx/nx-calendar-heatmap-utils/styles.css";
@import "tippy.js/dist/tippy.css";
</style>

note

generateHeatmapData is a helper function to generate random data for the heatmap. You can replace this function with your own data source.