This component will make it possible to create a low-key activity graph based on your own data. You can customize colors and more so fit your needs. The only thing needed is a dataset with dates and amounts. This component is made because no nice alternatives existed. It is currently under development - so some of the planned functionality is yet to be included
npm i date-activity-graph
The only thing you need is to provide an array with objects having a date and the amount of hits (this will determine the color).
The NodeData interface has this structure:
interface NodeData {
date: Date | string;
amount: number;
}
This is an example dataset:
const nodedata: NodeData[] = {
date: "2020/7/1",
amount: 0,
},
{
date: "2020/7/2",
amount: 1,
},
{
date: "2020/7/3",
amount: 10,
},
This shows the usage of a basic DateActivityGraph
import DateActivityGraph from "date-activity-graph";
const Root: React.FC = () => {
return <DateActivityGraph data={nodedata} />;
};
You can also customize the table with props. It is possible to change the colors for every part of the table. This means the default color for the nodes, the background for the table and everything else. See the possible props below:
interface DateActivityGraphProps {
data: NodeData[]; // The data to display
colors?: DateGraphColor[]; // Array of color steps to change color. See below for example
background?: string; // Background of table
defaultColor?: string; // Defaultcolor of nodes
tooltipLabelNames?: string[]; // An array with a length of 2 explaining what to call the hits (default: ["play", "plays"]).
labelColor?: string; // Color of the labels (weekdays, months and tooltip)
onClick?: (data: NodeData) => void; // Callback function
}
The DateGraphColor type has this structure:
type DateGraphColor = {
amount: number;
color: string;
};
import DateActivityGraph from "date-activity-graph";
const Root: React.FC = () => {
return (
<DateActivityGraph background="red" labelColor="blue" data={nodedata} />
);
};
import DateActivityGraph from "date-activity-graph";
const Root: React.FC = () => {
const colors: DateGraphColor[] = [
{ amount: 5, color: "blue" },
{ amount: 10, color: "red" },
];
return (
<DateActivityGraph defaultColor="yellow" colors={colors} data={nodedata} />
);
};
import DateActivityGraph from "date-activity-graph";
const Root: React.FC = () => {
const labels: string[] = ["hit", "hits"]; // The first one will occur when the day only has one hit
return <DateActivityGraph tooltipLabelNames={labels} data={nodedata} />;
};