npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2020 – Pkg Stats / Ryan Hefner

@antv/calendar-heatmap

v1.1.2

Published

The Calendar heatmap implemented by G2.

Downloads

201

Readme

Calendar heatmap

@antv/calendar-heatmap

  • 仓库地址:https://github.com/antvis/calendar-heatmap

The Calendar heatmap implemented by G2.

Demo

详见 demo

API

| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 | | --- | --- | --- | --- | --- | --- | | autoFit | 是否自适应宽高,默认为 true | 否 | boolean | true | - | | partition | 是否按月为单位分区绘制 | 否 | boolean | false | - | | width | 图表宽度 | 否 | number | - | - | | height | 图表高度 | 否 | number | - | - | | data | 绘制数据 | 是 | object[] | - | - | | dateField | 数据中代表时间的字段 | 是 | string | - | - | | valueField | 数据中需要可视化的数值字段 | 是 | string | - | - | | colors | 颜色映射 | 否 | string[] | - | - | | condition | 颜色映射条件 | 否 | Function | - | 当声明 condition 时,必须同时声明 colors | | squareStyle | 方块的样式 | 否 | object | - | - | | size | 方块的大小 | 否 | number | 16 | - | | axis | 坐标轴样式 | 否 | object | - | 可配置属性:1. visible 是否展示2. tickCount 刻度数量3. style 文本样式 | | title | 图表各个月份的标题配置 | 否 | object | - | 可配置属性:1. visible 是否展示2. style 文本样式 | | start | 开始月份 | 否 | string | - | 声明日历开始的月份,格式必须为 'YYYY-MM',无论用户数据中是否有该月份的值,都会以 start 为准 | | end | 结束月份 | 否 | string | - | 声明日历结束的月份,格式必须为 'YYYY-MM',无论用户数据中是否有该月份的值,都会以 start 为准 |

数据结构说明

标准的 JSON 数组,每条记录需要包含 'YYYY-MM-DD' 的日期以及数值字段。

如下所示:

[
  { date: '2017-06-01', commits: 20 },
  { date: '2017-06-02', commits: 0 },
  { date: '2017-06-03', commits: 1 },
  { date: '2017-05-16', commits: 18 },
  { date: '2017-10-16', commits: 4 },
];

几点说明:

  1. 时间格式建议使用 'YYYY-MM-DD',但是不要求排序
  2. 程序会为每个月自动补齐月份的应有的天数,比如上述数据只包含了 '2017-06',只有三天数据,但是在日历图中我们需要可视化整个月份,所以程序会自动将 2017-06-01 ~ 2019-06-30 每一天的数据补齐,用户无需自己处理
  3. 另外如果想要指定一定的时间区间,那么可以声明 startend 属性

实例代码

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CalendarHeatmap from '@antv/calendar-heatmap';

class App extends Component {
  render() {
    const data = [
      { date: '2017-06-01', commits: 20 },
      { date: '2017-06-02', commits: 0 },
      { date: '2017-06-03', commits: 1 },
      { date: '2017-05-16', commits: 18 },
      { date: '2017-10-16', commits: 4 },
    ];

    const chartCfg = {
      start: '2016-10',
      end: '2017-10',
      data,
      height: 180,
      size: 10,
      dateField: 'date',
      valueField: 'commits',
      condition: val => {
        if (val === 0) {
          return '#F2F3F5';
        }

        if (val > 0 && val <= 1) {
          return '#BAE7FF';
        }

        if (val > 1 && val <= 10) {
          return '#1890FF';
        }

        if (val > 10) {
          return '#0050B3';
        }
      },
    };
    return (
      <div>
        <CalendarHeatmap {...chartCfg} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);