yearrecord

A react component that displays data for each day of the year

install

npm install yearrecord

use

In a React project, you can use it like this:

import YearRecord from "yearrecord"

function App() {

  return (
    <>
      <YearRecord
        themeColor="green"
        tooltipTitileFunc={item => `${item.year}年${item.month}月${item.day}日, ${item.data}次浏览`}
      ></YearRecord>
    </>
  )
}

export default App

then you will see:

Props

Props of YearRecord

prop	type	default value	description
itemWidth	string	“10px”	width of div of the single day record
itemHeight	string	"10px"	height of div of the single day record
itemBorderRadius	string	"3px"	border-radius of the div of the single day record
gridRowGap	string	"3px"	row gap, used in grid layout
gridColumnGap	string	"3px"	column gap, used in grid layout
year	number	current year	year of the data
data	Array	random generate	the data to display, it's format is up to the prop compact. If compact === true, data is an Array of length n, and the i-th item is the data of month i+1, the length of month data is up to the count of days of that month, then format of a single day record is: {yaer: number, month: number, day:number, data: number}; if compact === false, data will be an Array of length n, it conatins n single day records. In other words, data is a 2-d array if compact === true, else data is a 1-d array.
themeColor	string	"#39d353"	a string representing a color which can be used in css, sunch as: red, rgb(0,0,0), #eee, etc.
tooltipTitileFunc	function	_ => "tooltip title"	this function accept a single day record object as it's parameter, and return a string which will be used as the tooltip title.
tooltipTitlePlacement	string	"top"	the placement of the tooltip title, it is one of ["top", "bottom", "left", "right"]
compact	boolean	false	if compact===true, then there will be no gap among months, and the format of data need to be changed.
onRecordClick	function	_ => undefined	the callback of the click event of a sigle record render element div

Props of MonthRecord

The props of MonthRecord is almost the same as YearRecord, because the props of the later are from the former, in other words, the most props of YearRecord will be directly passed to MonthRecord.The only prop MonthRecord has more than YearRecord is month:

prop	type	default value	description
month	number	current month	it will be displayed as a Chinese string below the component, such as "7月"
compact	boolean	false	if true, the component will ignore prop month, and display nothing below itself.

Props of Tooltip

prop	type	default value	description
title	string	""	tooltip title
placement	string	"top"	the same as yearrecord

Props of Legend

prop	type	default value	description
cnt	number	6	the count of color blocks
minText	string	"Less"	the text which is shown on the left of the color blocks
maxText	string	"More"	the text which is shown on the right of the color blocks
orientation	"horizon" |"vertical"	"horizon"	the orientation of this component
itemWidth	string	"10px"	same as the corresponding prop of YearRecord
itemHeight	string	"10px"	same as the corresponding prop of YearRecord
itemBorderRadius	string	"3px"	same as the corresponding prop of YearRecord
themeColor	string	"#39d353"	same as the corresponding prop of YearRecord