Yearrecord NPM

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:

API

API 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.

API 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.

API of Tooltip

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

yearrecord year data dispay record tooltip

@floating-ui/react react tslib

1 year ago

1 year ago

1 year ago

1 year ago