A Lightweight Calendar Heatmap Vuejs Component Built on SVG

vue-calendar-heatmap

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
• Usage

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 :end-date="2018-9-22" ... />

rangeColor - range-color

Array of 6 strings which represents the colors of the progression.

• The color at rangeColor[0] will always represent the values for a count: null
• The color at rangeColor[1] 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', 'dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />

max - max

Any number which should be the max color.

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

noDataText - no-data-text

Tooltip text to display on days without data. null by default (shows no tooltip at all).

 <calendar-heatmap :no-data-text="no data for this day" ... />

tooltip - tooltip

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

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

tooltipUnit - tooltip-unit

String representing heatmap’s unit of measure. 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" ... />

Download Details:

Author: julienr114

Source Code: https://github.com/julienr114/vue-calendar-heatmap

#vue #vuejs #javascript

What is GEEK

Buddha Community

A Lightweight Calendar Heatmap Vuejs Component Built on SVG

vue-calendar-heatmap

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
• Usage

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 :end-date="2018-9-22" ... />

rangeColor - range-color

Array of 6 strings which represents the colors of the progression.

• The color at rangeColor[0] will always represent the values for a count: null
• The color at rangeColor[1] 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', 'dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />

max - max

Any number which should be the max color.

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

noDataText - no-data-text

Tooltip text to display on days without data. null by default (shows no tooltip at all).

 <calendar-heatmap :no-data-text="no data for this day" ... />

tooltip - tooltip

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

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

tooltipUnit - tooltip-unit

String representing heatmap’s unit of measure. 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" ... />

Download Details:

Author: julienr114

Source Code: https://github.com/julienr114/vue-calendar-heatmap

#vue #vuejs #javascript

Hire Dedicated VueJS Developers

Want to Hire VueJS Developer to develop an amazing app?

Hire Dedicated VueJS Developers on the contract (time/project) basis providing regular reporting about your app. We, at HourlyDeveloper.io, implement the right strategic approach to offer a wide spectrum of vue.js development services to suit your requirements at most competitive prices.

Consult with us:- https://bit.ly/2C5M6cz

#hire dedicated vuejs developers #vuejs developer #vuejs development company #vuejs development services #vuejs development #vuejs developer

Building a Calendar Heatmap with React.js and SVG

In 2016, I had put my academic plans on hold after my first year and a half of college in order to take care of my younger sibling when our mother was unable to. Some really amazing friends of mine stepped in to help me out and eventually ended up adopting her (and effectively me too!).

After we stabilized, I felt the urge to return learning something other than dance, and I eventually ended up attending Flatiron School. It had been about five years since I had been in a school-like environment, so managing stress and self-care was difficult. My struggles with my awareness around my self-care inspired me to make an app to help people manage their care better.

While pre-planning for my app, I reached out to my friends on Facebook and asked them what they would like and dislike out of a self-care app. I got over 60 responses in minutes. These responses helped to form some user stories for my app. One particular response was:

It would be cool to have some sort of simple data visualization for how you feel every day so you could track it and learn when you need to take more time for yourself. Something as simple as a calendar you color code for feelings like yellow = anxious, etc.

I thought this would be super cool, at the time of reading this suggestion, I didn’t quite know how I would do it, and I dreaded working with dates in programming, but I set out to accomplish it, so let’s do it!

MVP

In order to make this happen I know I needed to keep track of a few things:

• A user can pick from a list of feelings
• Each feeling is mapped to a display color for that feeling
• A dynamic, functional calendar to display the colors of a feeling on the given day when the feeling was reported

I decided that the minimum viable product, or “skateboard”, version of this would group my feelings into categories of “Needs Satisfied” and “Needs Unsatisfied” → then categories of parent words → then highly specific feeling words. I did it this way to support a user deepening their emotional granularity (read: specific understanding). For example, it’s more useful and specific to report that you felt empowered than confident. I did some research and came away with 217 feeling words to start with.

#react #javascript #calendar #svg

How to Publish a Vuejs Component on NPM

In this post, I will explain you now how to publish your own VueJs component on npm with a minify and ES5 build.

#vuejs-development #vuejs-2 #vuejs #github #npm

How to Integrate Interactive SVG Map in Vuejs

In this post, we will see how to integrate interactive maps in vuejs. first I will clarify that what is interactive map then we will jump on the coding side

Interactive Map Means?

Interactive means we can select a particular part of the map and perform some operation on it. For example, The given map represents the Maharashtra state of India in which there are many districts so on mouse hover I can see the district name as a tooltip or we can show any information related to that district.

You need to write some API and fetch the data of that district but we are not talking about that in this tutorial we will see how to populate that data

#javascript #maps #svg #web-development #vuejs