React-ui-gauge-component NPM

Gauge Component for React

A library that provides basic gauge styles and widgets to create gauges efficiently for React projects.

screen shot

Installation and usage

The easiest way to use react-ui-gauge-component is to install it from npm.

npm i react-ui-gauge-component

Then use it in your app

import React, { Fragment } from 'react';
import withGauge, { HeartBeat, Needle } from 'react-ui-gauge-component';

const defaultTitleColor = "black";
const defaultValueColor = "black";

const Gauge1 = withGauge({
    WrappedComponent: Needle({value:data[0], min: 0, max: 100}),
    fields: [{title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge2 = withGauge({
    WrappedComponent: HeartBeat,
    colorArray: ["#eb001e", "#000", "#3aff20", "#53a5fd", "#aaaaaa"],
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge3 = withGauge({
    WrappedComponent: HeartBeat,
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 3", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const Gauge4 = withGauge({
    WrappedComponent: HeartBeat,
    fields: [
        {title: "Label 1", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 2", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 3", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor},
        {title: "Label 4", value: "100", titleColor: defaultTitleColor, valueColor: defaultValueColor}]
});

const DashboardExample = () => {
    return (
        <Fragment>
            <Gauge1/>
            <Gauge2/>
            <Gauge3/>
            <Gauge4/>
        <Fragment/>
    )
}

export default DashboardExample;

Example for using react-ui-gauge-component with Redux

Props

withGauge

WrappedComponent - Put a react component as a widget to compose a new gauge. The default widget is the heartbeat icon.
colorArray - Put an array of color for the gauge border.

colorArray: ["#eb001e", "#f35120", "#3aff20", "#53a5fd", "#aaaaaa"]

fields - Put an array of key, value pairs for the gauge's contents.

fields: [
        {title: "Gauge 1", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 2", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 3", value: "100", titleColor: "black", valueColor: "black"},
        {title: "Gauge 4", value: "100", titleColor: "black", valueColor: "black"}]