1611845340
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github’s contribution calendar graph. With vertical mode, tooltip powered by v-tooltip.
npm install --save vue-calendar-heatmap
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.**
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.**
<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)
values
- requiredArray 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 }, ...]" ... />
end-date
- requiredCan 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" ... />
range-color
Array of 6 strings which represents the colors of the progression.
rangeColor[0]
will always represent the values for a count: null
rangeColor[1]
will always represent the values for a count: 0
max
props.Default value is equal to the example.
<calendar-heatmap :range-color="['ebedf0', 'dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />
max
Any number which should be the max color.
<calendar-heatmap :max="10" ... />
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
Boolean for enable/disable tooltip on square hover. true
by default.
<calendar-heatmap :tooltip="false" ... />
tooltip-unit
String representing heatmap’s unit of measure. Value is "contributions"
by default.
<calendar-heatmap tooltip-unit="stars" ... />
vertical
Boolean to switch to vertical mode. false
by default.
<calendar-heatmap :vertical="true" ... />
Author: julienr114
Source Code: https://github.com/julienr114/vue-calendar-heatmap
#vue #vuejs #javascript
1617787696
The default year is 1969, how do I customize that with dynamic data?
1611845340
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github’s contribution calendar graph. With vertical mode, tooltip powered by v-tooltip.
npm install --save vue-calendar-heatmap
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.**
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.**
<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)
values
- requiredArray 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 }, ...]" ... />
end-date
- requiredCan 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" ... />
range-color
Array of 6 strings which represents the colors of the progression.
rangeColor[0]
will always represent the values for a count: null
rangeColor[1]
will always represent the values for a count: 0
max
props.Default value is equal to the example.
<calendar-heatmap :range-color="['ebedf0', 'dae2ef', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e']" ... />
max
Any number which should be the max color.
<calendar-heatmap :max="10" ... />
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
Boolean for enable/disable tooltip on square hover. true
by default.
<calendar-heatmap :tooltip="false" ... />
tooltip-unit
String representing heatmap’s unit of measure. Value is "contributions"
by default.
<calendar-heatmap tooltip-unit="stars" ... />
vertical
Boolean to switch to vertical mode. false
by default.
<calendar-heatmap :vertical="true" ... />
Author: julienr114
Source Code: https://github.com/julienr114/vue-calendar-heatmap
#vue #vuejs #javascript
1594024630
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
1596422611
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!
In order to make this happen I know I needed to keep track of a few things:
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
1589190180
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
1594794811
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 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