Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
calendar-heatmap-mini
Advanced tools
Readme
This code was originally forked from https://github.com/DKirwan/calendar-heatmap
and modified. This
serves to publish the package to npm
as calendar-heatmap-mini
along with a few key differences.
Key Differences
singleSelection
thanks to @remyvhw.npm
installable as well as importable as a module.d3@4.8.0
d3
packages.max
size is not used.text
for tooltips.calendar-heatmap-mini
).A d3.js heatmap representing time series data. Inspired by Github's contribution chart.
Property | Usage | Default | Required |
---|---|---|---|
data | Chart data | none | no |
selector | DOM selector to attach the chart to | body | no |
max | Maximum count | max found in data | no |
startDate | Date to start heatmap at | 1 year ago | no |
colorRange | Minimum and maximum chart gradient colors | ['#D8E6E7', '#218380'] | no |
tooltipEnabled | Option to render a tooltip | true | no |
tooltipUnit | Unit to render on the tooltip, can be object for pluralization control | 'contributions' | no |
legendEnabled | Option to render a legend | true | no |
onClick | callback function on day click events (see example below) | null | no |
singleSelection | Option to only be able to select a single date | false | no |
locale | Object to translate every word used, except for tooltipUnit | see below | no |
{
months: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
days: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
No: 'No',
on: 'on',
Less: 'Less',
More: 'More'
}
1: Add d3.js
and moment.js
2: Include calendar-heatmap-mini.js
and calendar-heatmap-mini.css
.
<link rel="stylesheet" type="text/css" href="path/tocalendar-heatmap-mini.css">
<script src="path/to/calendar-heatmap-mini.js"></script>
3: Format the data so each array item has a date
and count
property.
As long as new Date()
can parse the date string it's ok. Note - there all data should be rolled up into daily bucket granularity.
4: Configure the chart and render it
// chart data example
var chartData = [{
date: new Date(),
count: 100
}];
var chart1 = calendarHeatmap()
.data(chartData)
.selector('#chart-one')
.colorRange(['#D8E6E7', '#218380'])
.tooltipEnabled(true)
.onClick(function (data) {
console.log('onClick callback. Data:', data);
});
// render the chart
chart1();
1: Add package dependency.
npm install calendar-heatmap-mini --save
import CalendarHeatMap from 'calendar-heatmap-mini'
import CalendarHeatMap from 'calendar-heatmap-mini'
// chart data example
var chartData = [{
date: new Date(),
count: 100
}];
const chart1 = new CalendarHeatMap()
.data(chartData)
.selector('#chart-one')
.colorRange(['#D8E6E7', '#218380'])
.tooltipEnabled(true)
.onClick(function (data) {
console.log('onClick callback. Data:', data);
});
// render the chart
chart1();
var chart1 = calendarHeatmap()
.data(chartData)
.tooltipUnit(
[
{min: 0, unit: 'contribution'},
{min: 1, max: 1, unit: 'contribution'},
{min: 2, max: 'Infinity', unit: 'contributions'}
]
);
chart1(); // render the chart
...are very welcome!
FAQs
A d3.js heatmap representing time series data. Inspired by Github's contribution chart.
The npm package calendar-heatmap-mini receives a total of 11 weekly downloads. As such, calendar-heatmap-mini popularity was classified as not popular.
We found that calendar-heatmap-mini demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.