react-offcharts-kpis v0.1.0
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