1.0.2 • Published 1 year ago
active-calendar-chart v1.0.2
Active-Calendar-Chart
contribution calendar component like github (based on vue)
English | 简体中文
Install
npm install active-calendar-chart
Component Props
Prop | Description | Type | Default | Required |
---|---|---|---|---|
value | datasource | {[key:string]: { value: number; color: string}} | {} | No |
text-align | textAlign | left \| right \| center | left | No |
date | date value | number \| { start: string; end: string } | undefined | No |
default-color | set grid default color | string | #ebedf0 | No |
less | less text | string | less | No |
more | more text | string | more | No |
colors | color range | string[] | [] | No |
grid | set grid width and height | { width: string; height: string } | { width: '10px', height: '10px'} | No |
description | set chart description | string | undefined | No |
Component Slots
Name | Description |
---|---|
default | customize default content. |
first-grid | customize first grid content. |
month | customize month grid content. |
week | customize week grid content. |
Usage
Use component
Global Registration
import ActiveCalendarChart from 'active-calendar-chart'
app.use(ActiveCalendarChart)
Local Registration
<script setup>
import ActiveCalendarChart from 'active-calendar-chart'
// import { ActiveCalendarChart } from 'active-calendar-chart'
const data = ref({
'2023-04-05': {
color: '#005dd6',
value: 5.19,
},
'2023-04-04': {
color: '#1e80ff',
value: 5.19,
},
'2023-04-03': {
color: '#1e80ff',
value: 5.2,
},
// ...
})
</script>
<template>
<!-- default -->
<ActiveCalendarChart :value="data" />
<!-- set year -->
<ActiveCalendarChart :date="2022" :value="data" />
<!-- set date range -->
<ActiveCalendarChart
:date="{ start: '2022-04-01', end: '2022-10-10' }"
:value="data"
/>
</template>
Demo Preview
Get generated data
Custom ui
// generate data
import { generateChartData } from 'active-calendar-chart'
// default
console.log(generateChartData())
// set year
console.log(generateChartData(2023))
// set date range
console.log(generateChartData('2022-04-01', '2022-10-08'))