Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue-calendar-heatmap

Package Overview
Dependencies
Maintainers
1
Versions
29
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-calendar-heatmap

A calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph

  • 0.8.3
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

vue-calendar-heatmap

npm npm vue2

A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph. With vertical mode, tooltip powered by v-tooltip.

Table of contents

Installation

npm install --save vue-calendar-heatmap

Default import

Global Install:

import Vue from 'vue'
import VueCalendarHeatmap from 'vue-calendar-heatmap'

Vue.use(VueCalendarHeatmap)

Use specific components:

import Vue from 'vue'
import { CalendarHeatmap } from 'vue-calendar-heatmap'

Vue.component('calendarHeatmap', CalendarHeatmap)

or in a parent components .vue file

<script>
  import { CalendarHeatmap } from 'vue-calendar-heatmap'

  export default {
    components: {
      CalendarHeatmap
    },
    // ...
  }
</script>

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Distribution import

Global Install:

import 'vue-calendar-heatmap/dist/vue-calendar-heatmap.css'
import VueCalendarHeatmap from 'vue-calendar-heatmap/dist/vue-calendar-heatmap.common'

Vue.use(VueCalendarHeatmap)

Use specific components:

import 'vue-calendar-heatmap/dist/vue-calendar-heatmap.css'
import { CalendarHeatmap } from 'vue-calendar-heatmap/dist/vue-calendar-heatmap.common'

Vue.component('calendarHeatmap', CalendarHeatmap)

⚠️ You may have to setup your bundler to embed the css file in your page.

Browser

<link rel="stylesheet" href="vue-calendar-heatmap/dist/vue-calendar-heatmap.css"/>

<script src="vue.js"></script>
<script src="vue-calendar-heatmap/dist/vue-calendar-heatmap.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(VueCalendarHeatmap)

Use specific components:

Vue.component('calendarHeatmap', VueCalendarHeatmap.CalendarHeatmap)

Usage

Availables props

values - values - required

Array of objects with date and count keys. date values can be a date parseable string, a millisecond timestamp, or a Date object. count value should be a number.

 <calendar-heatmap :values="[{ date: '2018-9-22', count: 6 }, ...]" ... />

endDate - end-date - required

Can be a date parseable string, a millisecond timestamp, or a Date object. The calendar will start automatically one year before this date.

 <calendar-heatmap endDate="2018-9-22" ... />

colorRange - color-range

A Array of 5 strings which represents the colors of the progression. The color at colorRange[0] will always represent the values for a count: 0. The others are automatically distributed over the maximum value of count, unless you specify max props. Default value is equal to the example.

 <calendar-heatmap :range-color="['ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />

max - max

Any number which should be the max color.

 <calendar-heatmap :max="10" ... />

tooltip - tooltip

Boolean for enabble/disable tooltip on square hover. true by default.

 <calendar-heatmap :tooltip="false" ... />

tooltipUnit - tooltip-unit

String representing heatmap's unit of measure. His value is "contributions" by default.

 <calendar-heatmap tooltip-unit="stars" ... />

vertical - vertical

Boolean to switch to vertical mode. false by default.

 <calendar-heatmap :vertical="true" ... />

License

MIT

Keywords

FAQs

Package last updated on 01 Jun 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc