Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@antv/calendar-heatmap

Package Overview
Dependencies
Maintainers
27
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@antv/calendar-heatmap

The Calendar heatmap implemented by G2.

  • 1.1.2
  • latest
  • npm
  • Socket score

Version published
Weekly downloads
9
decreased by-30.77%
Maintainers
27
Weekly downloads
 
Created
Source

Calendar heatmap

@antv/calendar-heatmap

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

The Calendar heatmap implemented by G2.

Demo

详见 demo

API

参数名说明必填类型默认值备注
autoFit是否自适应宽高,默认为 truebooleantrue-
partition是否按月为单位分区绘制booleanfalse-
width图表宽度number--
height图表高度number--
data绘制数据object[]--
dateField数据中代表时间的字段string--
valueField数据中需要可视化的数值字段string--
colors颜色映射string[]--
condition颜色映射条件Function-当声明 condition 时,必须同时声明 colors
squareStyle方块的样式object--
size方块的大小number16-
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);

Keywords

FAQs

Package last updated on 01 Aug 2020

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc