1.0.2 • Published 5 months ago
d3-graphic v1.0.2
d3-graphic
d3-graphic
is a React Native package that utilizes D3, react-native-svg, react, and lodash to display horizontal bars, vertical bars, and pie charts. This package is designed to make dashboard development in React Native much easier.
Installation
To install this package, you can use npm or yarn:
npm
npm install d3-graphic
yarn
yarn add d3-graphic
Components
The d3-graphic package includes the following components:
- MultipleHorizontalBars
- MultipleVerticalBars
- PieChart
Common Props
The three mentioned components share the same props:
- data: An array of JSON objects containing at least three properties: one for the label, one for the value, and one for the id.
- keyLabel: The JSON property that the component uses for the label.
- keyValue: The JSON property that the component uses for the value.
- primaryKey: The JSON property that acts as the ID.
Optional props:
- loading: Boolean that controls whether a spinner is shown while true.
- error: Boolean that shows an error message.
- withoutDataMessage: String to customize the message displayed when there is no data.
- color: An array of strings with the colors of the bars or sections of the chart.
Usage Example
Below is an example of how to use the MultipleHorizontalBars component:
import React from "react";
import { MultipleHorizontalBars } from "d3-graphic";
const data = [
{ nameProduct: "Apples", value: 100, id: 1 },
{ nameProduct: "Banana", value: 150, id: 2 },
{ nameProduct: "Cactus", value: 45, id: 3 },
{ nameProduct: "Dades", value: 169.48, id: 4 },
{ nameProduct: "Guitar", value: 188.4, id: 5 },
{ nameProduct: "Fruit", value: 90, id: 6 },
{ nameProduct: "Games", value: 25, id: 7 },
];
<MultipleHorizontalBars
data={data}
keyLabel={"nameProduct"}
keyValue={"value"}
primaryKey={"id"}
error={false}
loading={false}
/>;
Example Project
You can find a project using d3-graphic on the following GitHub link. This project provides practical examples of how to use the components included in the package.
Animations
- Horizontal Bars
- Vertical Bars
- Pie Chart
Screenshots
Horizontal Bars
- Vertical Bars
- Pie Chart