https://github.com/keyvaluesoftwaresystems/react-dot-matrix-chart
A customizable, ready to use Dot Matrix Chart Component
https://github.com/keyvaluesoftwaresystems/react-dot-matrix-chart
Last synced: 11 months ago
JSON representation
A customizable, ready to use Dot Matrix Chart Component
- Host: GitHub
- URL: https://github.com/keyvaluesoftwaresystems/react-dot-matrix-chart
- Owner: KeyValueSoftwareSystems
- License: mit
- Created: 2023-03-09T07:30:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-03-28T21:47:45.000Z (almost 2 years ago)
- Last Synced: 2024-11-01T23:04:25.046Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 1010 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# React Dot Matrix Chart
> A customizable ready to use Dot Matrix Chart Component for React
Try tweaking a dot matrix using this codesandbox link here
## Installation
The easiest way to use react-dot-matrix-chart is to install it from npm and build it into your app with Webpack.
```bash
npm install @keyvaluesystems/react-dot-matrix-chart
```
You’ll need to install React separately since it isn't included in the package.
Note for **Next.js** users, if you are using Next.js version 13 or later, you will have to use the `use client` feature to ensure proper compatibility.
## Usage
React Dot Matrix Chart can run in a very basic mode by just providing the `dataPoints` like given below:
```jsx
import DotMatrix from "@keyvaluesystems/react-dot-matrix-chart";
;
```
The datapoints is an array of objects with the following keys:
- `name` - a string that represents each category
- `count` - a number to specify the count of each category present(used to find the number of dots to be displayed)
- `color` - a string to specify which colour to be used to represent the category in the dot matrix
An example for dataPoints array is shown below:
```jsx
const dataPointsArray = [
{
name: "Category 1",
count: 10,
color: "gray"
},
{
name: "Category 2",
count: 10,
color: "black"
},
{
name: "Category 3",
count: 10,
color: "green"
}
];
```
You can specify the number of rows or columns to be present in the chart as well using the dimensions prop.
```jsx
```
If the count given in the dataPoints array results in a partial percentage (decimal value), a gradient dot will be displayed as shown below
## Props
Props that can be passed to the component are listed below:
Prop
Description
Default
dataPoints: object[]
An array of category objects to specifying the count and name of each section
undefined
dimensions?: object
To specify the number of rows and columns to be present in the chart
{ rows: 5, columns: 12 }
spaceBetweenDots?: number
To specify the distance between each dot
4
showLegend?: boolean
To specify whether to show the legend or not
false
legendPosition?: 'left' | 'left-start' | 'left-end | 'right' | 'right-start' | 'right-end' | 'top'| 'top-start' | 'top-bottom' | 'bottom' | 'bottom-start' | 'bottom-end'
To specify the position of the legend.
right-end
styles?: object
Provides you with a bunch of callback functions to override the default styles.
undefined
## Style Customizations
All the default styles provided by this package are overridable using the `styles` prop.
the below code shows all the overridable styles:
```jsx
({ ...styles }),
DotsContainer: () => ({ ...styles }),
Dot: () => ({ ...styles }),
LegendContainer: () => ({ ...styles }),
LegendName: () => ({ ...styles }),
LegendDot: () => ({ ...styles })
}}
/>
```
- `Container` - Overrides the dot matrix chart container style
- `DotsContainer` - Overrides the dot matrix chart dots container style
- `Dot` - Overrides the style of each dot in the chart
- `LegendContainer` - Overrides the legend (details) container style
- `LegendName` - Overrides the legend name style
- `LegendDot` - Overrides the legend dot style