Skip to content

Latest commit

 

History

History
157 lines (146 loc) · 7.46 KB

README.md

File metadata and controls

157 lines (146 loc) · 7.46 KB

react-gauge-capacity

A react component used to describe the active progress with respect to target/capacity in the form of a gauge meter.

Inspired by react-gauge-test.

Developed and Maintained at Covalience, LLC

React Gauge Capacity Example

Here C -> Target or Capacity

Installation

$ npm install --save react-gauge-capacity

Example

import React, { Component } from "react";
import ReactGauge from "react-gauge-capacity";

let contWidth = 360;
let contHeight = 200;
let gaugeRadius = 125;
let centerLineHeight = 35;

/***************************
 ** Set following variable to make gauge meter responsive
 */
if (window.innerWidth <= 420 && window.innerWidth > 375) {
  contWidth = 340;
  contHeight = 190;
  gaugeRadius = 120;
  centerLineHeight = 30;
} else if (window.innerWidth <= 375 && window.innerWidth > 320) {
  contWidth = 300;
  contHeight = 170;
  gaugeRadius = 100;
  centerLineHeight = 30;
} else if (window.innerWidth <= 320) {
  contWidth = 260;
  contHeight = 155;
  gaugeRadius = 85;
  centerLineHeight = 20;
}
/****************************/

let options = {
  isInnerNumbers: false,
  aperture: 180,
  radius: gaugeRadius,
  tickOffset: 20,
  arcStrokeWidth: 40,
  miniTickLength: 1,
  miniTickStrokeWidth: 1,
  tickLabelOffset: 12,
  scaleDivisionNumber: 5,
  centralCircleRadius: 10,
  marks: [
    "-100%",
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    "-20%",
    "-10%",
    "C",
    "10%",
    "20%",
    null,
    null,
    null,
    null,
    null,
    null,
    null,
    "100%",
  ],
  contentWidth: contWidth,
  svgContainerWidth: contWidth,
  svgContainerHeight: contHeight,
  arrowValue: 86 / 180,
  arrowColor: "#354357",
  gaugeCenterLineHeight: centerLineHeight,
  viewBox: "30 0 300 200",
  ranges: [
    {
      start: 0,
      end: 72 / 180,
      color: "#f3595b",
    },
    {
      start: 72 / 180,
      end: 81 / 180,
      color: "#ffc875",
    },
    {
      start: 81 / 180,
      end: 90 / 180,
      color: "#83d7c0",
    },
    {
      start: 90 / 180,
      end: 90 / 180,
      color: "#83d7c0",
    },
    {
      start: 90 / 180,
      end: 99 / 180,
      color: "#83d7c0",
    },
    {
      start: 99 / 180,
      end: 108 / 180,
      color: "#ffc875",
    },
    {
      start: 108 / 180,
      end: 180 / 180,
      color: "#f3595b",
    },
  ],
};
<ReactGauge {...options} />;

Options

Param Default Description
radius 175 Main arc radius
arcStrokeWidth 3 Width of main arc
tickOffset 7 Offset between main arc and ticks
tickStrokeWidth 2 Width of big ticks
tickLength 5 Length of big ticks
miniTickLength 1 Length of mini ticks
miniTickStrokeWidth 1 Width of mini ticks
scaleDivisionNumber 10 Number of divisions between big ticks
tickLabelOffset 10 Offset between big tick and tick label
centralCircleRadius 10 Radius of central circle
isInnerNumbers false Tick labels position
arrowValue 0 Value of gauge
arrowColor #354357 Color of arrow
marks [0, 1, 2, 3, 4, 5, 6] Tick labels values
ranges [{ start: 0, end: 4.5/6, color: "#666" }, { start: 4.5/6, end: 5.5/6, color: "#ffa500" }, { start: 5.5/6, end: 1, color: "#ff0000" }] Array of color intervals
aperture 80 Gap on main arc
contentWidth 450 Width and height of inner image
svgContainerWidth 450 Svg container width
svgContainerHeight 450 Svg container height
gaugeCenterLineHeight 35 Svg Center Line Y-axis dimensions
viewBox 30 0 200 200 Svg attribute for responsiveness

NPM