React-Offcharts-KPI

A Set of KPI Components to help out with the dashboard creation.

These Components will be included in the Offcharts Library.

Examples

You can check this out. Also there are a couple of examples in the directory

Disclaimer

This is a work in progress and will change/improve

Install

install -S react-offcharts-kpis

Usage

The KPI Library has three components.

• DoubleArcKPI
• ArcKpi
• HalfArcKPI

To Include

import { DoubleArcKpi, ArcKpi, HalfArcKpi } from 'react-offcharts-kpi';

Example

A super simple doublearc example

import React, { Component } from 'react';
import { render } from 'react-dom';
// include all but you could leave out the components you are not going to use
import { DoubleArcKpi, ArcKpi, HalfArcKpi } from 'react-offcharts-kpi';


const value = {
  value: 87,
  label: 'Revenue Per Hour',
  outer: 0.9,
  inner: 0.8,
  fill: '#811',
  domain: [0, 5000]
};

const bench = {
  value: 47,
  domain: [0, 100],
  label: 'Revenue Margin',
  outer: 0.95,
  inner: 0.93,
  fill: '#118',
};


const DashboardStrip = () => (
    <div className="col-lg-3">
        <DoubleArcKpi
          responsive
          startAngle={-Math.PI / 2}
          endAngle={Math.PI / 1.33}
          value={value}
          benchmark={bench}
          backgroundBenchmark={{
            fill: 'rgb(200, 200, 200)',
            stroke: 'rgb(170, 170, 170)',
          }}
          backgroundValue={{
            fill: 'rgb(200, 200, 200)',
            stroke: 'rgb(170, 170, 170)',
          }}
          animationEase="easeCubicInOu"
          animationTime={2250}
            topPostfix="$"
            bottomPostfix="%"
            seperator={{
              stroke: 'black',
              strokeWidth: '4px',
            }}
            topValueText={{
              fontSize: 0.6,
            }}
            topPostfixText={{
              fontSize: 0.3,
            }}
            bottomValueText={{
              fontSize: 0.3,
            }}
            bottomPostfixText={{
              fontSize: 0.15,
            }}
            legendFontsize={0.09}
        />
    </div>
);

render(<DashboardStrip />, document.getElementById('app'));

Props Common

Name|Type|Default|Description| ---|---|---|--- Width|number|null| The width of the chart, used if responsive is false height|number|null|The width of the chart, used if responsive is false responsive|bool|true|If set to true then the element will fill out into parent container, and resize on window dimension change id|string|null|Sets the id for the Component className|string|null|Sets the class for the component decimal|bool|null|If set then show decimals

Props DoubleArcKpi

Name|Type|Default|Description| ---|---|---|--- animationTime|number|null| milliseconds for animation when updating value paths animationEase|number|null| The name of the d3 easing function, other values like, easeBack, easeBackInOut, easeSinInOut, easeExpInOut. See d3 easing page for more ideas. value|Datahape|null| The shape of the value object benchmark|Datahape|null| The shape of the value object startAngle|number|null|Start angle endAngle|number|null|End angle backgroundBenchmark|shape|null| The fill and stroke of the background benchmark backgroundValue|shape|null|The fill and stroke of the background value topValueText|TextShape|null|text props for the top value text topFractionText|TextShape|null|text props for the top fraction text topPostfixText|TextShape|null|Sets the class for the component bottomValueText|TextShape|null|Sets the id for the Component bottomPostfixText|TextShape|null|Sets the class for the component bottomPostfix|string|null|Sets the id for the Component topPostfix|string|null|Sets the class for the component seperator|shape|null|Sets the id for the Component legendFontsize|number|null|Sets the class for the component

Props ArcKpi

Name|Type|Default|Description| ---|---|---|--- animationTime|number|null| milliseconds for animation when updating value paths animationEase|number|null| The name of the d3 easing function, other values like, easeBack, easeBackInOut, easeSinInOut, easeExpInOut. See d3 easing page for more ideas. value|Datahape|null| The shape of the value object startAngle|number|null|Start angle endAngle|number|null|End angle backgroundValue|shape|null|The fill and stroke of the background value background|shape|null| The shape of the fill, stroke and shape of the background valueText|TextShape|null|text props for the value text fractionText|TextShape|null|text props for the fraction text postfixText|TextShape|null|Sets the postfix props postfix|string|null|Sets the the postfix letter seperator|shape|null|Sets the seperator line shape legendText|TextShape|null|Sets the text props for the legendText

The only difference in value in ArcKpi is that you need to set the startAngle and endAngle props in that object too.

The Datahape Prop

This prop controles the path.

Name|Type|Default|Description| ---|---|---|--- fill|string|null| The color fill, '#123' or 'rgba(50,50,50,.3)' stroke|string|null| The color stroke, '#123' or 'rgba(50,50,50,.3)' value|number|null| The value of the path outer|number|null| The percentage of radius, a value of one would mean 100% of the raidus inner|number|null| The inner value, also a percentage of the radius domain|array|[0, 100]| The domain of the values, if you are working with percentages it would be [0, 100],

NOTE: The ArcKpi Datashap also holds the start- and endangle so the user can set where the path should start.

If you prefer you can style the component with css, all the parts in the component have classnames so they can be targeted very easily.

The TextShape Prop

This props allows the user to set the style of the text

Name|Type|Default|Description| ---|---|---|--- fontSize|number|null| A percentage of the radius, where 1 would be 100% of the radius and 0.5 50% of the radius, fill|string|null| The color fill, '#123' or 'rgba(50,50,50,.3)' stroke|string|null| The color stroke, '#123' or 'rgba(50,50,50,.3)'

As with other parts of the components the text elements have classnames on them so you can style them with css as well.

Note: The text anchor is always set to "middle"

CSS

All the elements in the components have classNames either on them or in the parent so it should be easy to target each element and customize styles.

Licence

MIT, Copyright 2017, Arnthor Agustsson