My data has string dates (YYYY-MM-DD) however, when fed into component, they are being rendered as one day prior. Could this be a timezone issue with how the component is handling dates?

<template>
  <div>
    <calendar-heatmap
      :values="values"
      :end-date="values.endDate"
      :tooltip-unit="values.picked" />
  </div>
</template>

<script lang="ts">
  import {computed, defineComponent} from 'vue'
  import {CalendarHeatmap} from 'vue3-calendar-heatmap'

  export default defineComponent({
    components: {
      CalendarHeatmap,
    },
    props: {
      data: {
        type: Array,
        default: () => [
          {
            date: '2018-09-28',
            count: 1,
          },
        ],
      },
    },
    setup(props) {
      const values = computed(() => {
        return {
          values: props.data,
          endDate: new Date('2021-08-01'),
          picked: 'Dings',
        }
      })

      return {
        values,
      }
    },
  })
</script>

props data send

const dataExample = [
  {
    date: '2020-11-30T23:00:00Z',
    count: 635000,
  },
  {
    date: '2020-12-02T23:00:00Z',
    count: 2442000,
  },
]

I am pretty new to Vue, and when I followed the instructions to import the component locally:

<template>
<CalendarHeatmap></CalendarHeatmap>
</template>
import { CalendarHeatmap } from 'vue3-calendar-heatmap'
export default {
    components: {
        CalendarHeatmap
    },
    // ...
}

I got the error Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')?

Thank you for the help in advance :)

https://razorness.github.io/vue3-calendar-heatmap/

In some cases, the last month is being cut off on right:

I'm getting a lot of these errors in my production app, but cannot reproduce locally.

Maybe the stack trace rings a bell?

Hi, Can you improve on this?
:emty-value="0" :emtpy-bg-color="#ffff" etc.

because dark/light website used. default emtpy value and color change

or rangeColor[0] add svg class vch__day__square vch__day__square__null

Hi,

First, thanks for this valuable repository.

We have implemented the heatmap in a project, we provide "values" and "end-date" but can't see the data visualized in the heatmap.

Also, does the "round" attribute work? It seems like doesn't work on my end.

One last thing, is this repo support NuxtJS?

Thanks,
Omer

Might I suggest to repurpose this PR for your component? For a bit less than half the world, the week starts on another day than sunday.

julienr114#14
https://www.timeanddate.com/calendar/days/first-day-of-the-week.html

Getting this error in v2.0.1 with Nuxt 3, v2.0.0 works fine.

Failed to resolve entry for package "vue3-calendar-heatmap". The package may have incorrect main/module/exports specified in its package.json.

I want to use js only, but when I imported and added it to the components, the browser reported an error
TypeError: Cannot read properties of undefined (reading 'map')
the html is
<calendar-heatmap/>

github example

First off, great library! This is exactly what I've been looking for for the last 2 days and it's imo by far and away one of the best out there

Just having an issue turning dark mode on and i'm not sure why...

This is my code:

                <calendar-heatmap
                    :dark-mode="dark"
                    :values="values"
                    :end-date="endDate"
                    :no-data-text="false" />

///////////////////////////

    data() {
        return {
            values: [
                {
                    date: '2020-11-30T23:00:00Z',
                    count: 635000
                }, 
               // ....
            ],
            endDate: new Date('2021-08-01'),
            picked: 'Dings',
            orientation: 'horizontal',
            dark: true
        };
    },

Can't quite figure out what I'm doing wrong. I tried to inspect the code but I couldn't seem to find anything related to dark-mode so I may be misunderstanding the functionality

Alternatively I'll look to just change the theme to suit my required colors :)

Thanks

I think that would be great for this library.

https://repobeats.axiom.co/

I think it does not make much sense to treat 0 and null different like the module currently does.

If one wants to treat them the same using 7-color colorRange, there is a issue in the legend rendering when where the two colors are listed twice and the legend being cut-off because the module can not correctly handle 7 colors in it:

I think the only clean way to solve is to have a boolean option that makes 0 and null equal color so colorRange can be defined using six colors.

See go-gitea/gitea#22157 for more details and a workaround I've added to fix the legend rendering.

So basically even though i give the component the ":end-date" parameter it shows me the dates only between Dec 29, 1968 and Jan 3 1970.

<calendar-heatmap :end-date="2023-12-12" :values="[{ date: '1969-6-6', count: 6 }]" dark-mode/>

Is it possible this is a bug?

It would be useful if one could pass in a height option and the module would lay out the content inside that height as it sees fit. This would allow to reliably reserve content space to avoid a layout shift when the component loads.

Github footer example. Please add :)

• hidden header month title props
• hidden monday/tuesday title props
• footer left right slot
• less/more design left - right slot custom write add etc.

Hello thank you for this great project. I would like to leave a suggestion for improvement: add a prop to allow disabling the legend.

thank you!

It shows 12 months automatically. How can I set the date range I want?

This is an example heatmap from a Gitea instance I am using:

As far as I can tell, Gitea does not specify a max value, but range-color (see https://github.com/go-gitea/gitea/blob/main/web_src/js/components/ActivityHeatmap.vue), but in this heatmap there is no day in the "highest" category (5), only one day in category 4, which seems to be unintended behavior.

Also please consider this example from this project's documentation: https://razorness.github.io/vue3-calendar-heatmap/#example-1

The color for the single day with highest contribution count does not appear in the legend, and the "lowest" color in the legend does not appear in the map.

On the design side, I think you can open special classes for tailwindcss.
example
:bg-color="bg-red-500"