react-native-visualization-tools

Welcome to react-native-visualization-tools!

react-native-visualization-tools is a lightweight library for React Native developers to easily create and customize interactive components. Designed to simplify data visualization tasks, this library provides a collection of components with high performance and flexibility. Ideal for developers who need to integrate data visualization features into their React Native applications in a fast and easy way.

Features

1. Customizable Area Graphs for displaying simple temporal data trends.

2. Stylish Progress Bars with customizable colors and animations.

3. Easy-to-use API for seamless integration into React Native projects.

Target Audience

React Native developers seeking easy, efficient and customizable data visualization solutions.

Requirements

This library uses:

• react-native-svg

  • Version 14.1.0

• react-native-svg-charts

  • Version 5.4.0

• moment

  • Any version

Installation Guide

1. Install Node.js and npm

Before installing react-native-visualization-tools, make sure you have Node.js and npm installed on your machine.

2. Create a Project

2.1 Install Expo CLI

If you need a project to test these components, I suggest using Expo CLI to create one in a short time.

To install Expo CLI globally on your system run the following command in your terminal:

npm install -g expo-cli

2.2 Create a React Native Project

You can then create a new React Native project with the following command:

npx create-expo-app --template

You will be prompted with a template which will ask you to choose a template, Blank will work fine, and the name of your app, which will correspond to the name of the folder that will store your project.

2.3 Check that your Project is running fine

You can start a development server with the following commands:

cd projectName
npx expo start

Make sure you are using Expo Go, if this is not the case press s to switch to this version.

Install the Expo Go app on your iOS or Android phone and connect to the same wireless network as your computer. On Android, use the Expo Go app to scan the QR code from your terminal to open your project. On iOS, use the built-in QR code scanner of the default iOS Camera app.

If you need more information, please check React Native Official Website.

Make sure your project starts succesfully before going any further.

3. Install Dependencies

When you have a running project, you can continue with the installation of the required dependencies. Move into the project's folder and perform the following commands.

1. Install react-native-svg:

npm install [email protected]

This package is required for react-native-svg-charts to function properly.

2. Install react-native-svg-charts:

npm install --save react-native-svg-charts --legacy-peer-deps

This package provides SVG chart components for React Native.

3. Install react-native-visualization-tools:

npm install react-native-visualization-tools --legacy-peer-deps

This is the command to install the library provided in this repository.

4. Install moment:

npm install moment --legacy-peer-deps

This is a JavaScript library for parsing, validating, manipulating, and displaying dates, used by react-native-visualization-tools.

Components

This library currently provides the following components:

• AreaGraph
• ProgressBar

AreaGraph

AreaGraph is a React Native component designed for visualizing data trends over time. It provides an intuitive way to display data points along a temporal axis, allowing users to easily track changes and patterns. With the ability to interactively tap on individual data points to view their corresponding date and value, AreaGraph offers a streamlined user experience and minimize screen usage. Ideal for applications requiring dynamic and space-efficient data visualization, AreaGraph empowers developers to create engaging and informative charts with minimal effort.

Input

Required input is an array of items that contains 3 properties:

1. id used to be able to map the array and perform calculations

2. date used to display data points chronologically

3. score value that represents a certain amount on the Y-axis

You can find an example later on.

Functionalities

1. Array is automatically sorted using the date property.

2. Possibility to click on every single data point, to show date and score values.

3. Highly customizable, check properties.

Example

import { StyleSheet, View } from 'react-native';
import { AreaGraph } from 'react-native-visualization-tools'

export default function App() {

  const data = [
    { id: 1, date: '2019-01-26T22:37:01Z', score: 3 },
    { id: 2, date: '2019-01-06T06:03:09Z', score: 5 },
    { id: 3, date: '2019-01-28T14:10:00Z', score: 7 },
    { id: 4, date: '2019-01-22T14:10:00Z', score: 6 },
  ]

  return (
    <View style={styles.container}>
      <AreaGraph data={data} yMin={0} yMax={10} description={'Graph'}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 50,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
});

Output

Props

| Property | Default | Description | | ------------------| ---------------| ---------------------------------------------------------------------------- | | data | null | Array of items that contains a property date for X axis, and a score for Y axis | | contentInset | { left: 10, right: 10, top: 10, bottom: 10 } | Space between grap and its container | | yMin | undefined | Minimum value of Y axis to display, if non-specified minimum score is considered | | yMax | undefined | Maximum value of Y axis to display, if non-specified maximum score is considered | | description | 'Description' | Short title to display under the graph | | numberOfTicks | 10 | Number of ticks to display under the graph | | chartStyle | {} | StyleSheet object for further personalization | | chartColor | 'darkblue' | Main color of the chart | | gridColor | 'lightgrey' | Color of ticks | | circleBorderColor | 'black' | Color of the circles' borders | | circleFillColor | 'white' | Color to use to fill circles | | tipColor | 'red' | Main color of the tip |

ProgressBar

ProgressBar is a React Native component designed to visually represent the completion of a specific task or process. It offers dynamic progress completion effects, enhancing the visual feedback for users as tasks are completed. With the ability to tap on the progress bar to reveal a customizable text tooltip, developers can provide additional context or information to users, simplifying the user experience and ensuring clarity of displayed information. Whether tracking the progress of file uploads, form submissions, or any other task, ProgressBar empowers developers to create intuitive and informative progress indicators within their React Native applications.

Input

No input is needed in order to make the component work. However, if you are planning to use it to present a progress, you can use the associated property presented below.

Functionalities

1. User can click on the ProgressBar and a customizable text will appear in the middle of the bar to present valuable information to the user.

2. Highly customizable, check properties.

Example

import { StyleSheet, View } from 'react-native';
import { ProgressBar } from 'react-native-visualization-tools'

export default function App() {
  return (
    <View style={styles.container}>
      <ProgressBar progress={10} barWidthPercent={'80%'}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    margin: 50,
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
});

Output

Props

| Property | Default | Description | | --------------------| ---------------| ---------------------------------------------------------------------------- | | progress | 50 | Value between 0 and 100 to represent completion | | backgroundColor | 'lightgrey' | Color of the background | | fillColor | 'green' | Main color that shows progress | | borderRadius | 5 | Custizable aspect of the bar | | barWidthPercent | '100%' | In relation to container | | barHeightPercent | '5%' | In relation to container | | animationDuration | 500 | Milliseconds that represent animation duration | | labelText | 'Progress' | Text to show inside the progress bar, should be as short as possible | | fontSize | 16 | Of the text shown inside the progress bar | | fontColor | 'white' | Of the text shown inside the progress bar |

CHANGELOG.md

1.0.4 - 2024-05-11

Removed

• Removed images from the repository, used link instead

1.0.3 - 2024-05-11

Fixed

• Fixed reference to images to make them show correctly in NPM website

Added

• More steps in the installation guide to install base project if missing

1.0.2 - 2024-05-05

Fixed

• Fixed dependencies

Added

• Added information about input values and functionalities for components: AreaGraph and ProgressBar

• Added images to enrich documentation

1.0.1 - 2024-05-05

Fixed

• Fixed deployment mistake in file naming

1.0.0 - 2024-05-05

Added

• First release

License

ISC

Copyright <2024> <Enea_Carlini>

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED “AS IS” AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.