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.

Example Project on GitHub

Animations

• Horizontal Bars

• Vertical Bars

• Pie Chart

Screenshots

• Horizontal Bars

  

  • Vertical Bars

  

  • Pie Chart