Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
react-punchcard
Advanced tools
A dead-simple React component for visualizing data using a punch card chart, without charting library dependencies.
A dead-simple React component for visualizing data using a punch card chart, without charting library dependencies.
Currently a work in progress.
Install using npm:
npm install react-punchcard
A Punch Card chart is composed of punch card rows. Each row represents a set of data.
The PunchCard
component takes a value
prop which is an array of rows:
import {PunchCard} from 'react-punchcard';
...
render () {
const rows = [
{id: 'row-1', label: 'Row 1', points: [{x: 1, y: 10}, {x: 2, y: 50}, {x: 3, y: 100}]},
{id: 'row-2', label: 'Row 2', points: [{x: 1, y: 200}, {x: 2, y: 10}, {x: 3, y: 700}]}
];
return (
<PunchCard value={rows}/>
);
}
The object representing a single row should be in the following format:
const row = {
id: 'unique-row-id', // The id of the row
points: [], // Array of points where a point is: {x: number, y: number}
label: 'Hey There!' // An optional string which is the label of the row
}
Note: Every row should have the same number of points, with the same, consistent domain. Meaning, the x
values across rows should be consistent while 'y' values may vary.
The component takes a few optional props:
className: string
- A string of additional class names that will be added to the component
renderAxisTick: (p: Point) => string
- A function that returns a string, rendering a x-axis tick label at the bottom of the punch card.
minDotScale: number
- The minimal scale value for a dot in the punch card. Default: 6
maxDotScale: number
- The maximal scale value for a dot in the punch card. Default: 0.5
As the use cases and applications of most charting / graphing components may be very different, this project provides minimal styling as a starting point to fit into your own project.
Use the built css
as a baseline for your own styling needs, or create your own from scratch and ignore it altogether.
FAQs
A dead-simple React component for visualizing data using a punch card chart, without charting library dependencies.
We found that react-punchcard demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.