Angular Component for Curtis Bratton's D3 Liquid Fill Gauge

I really liked Curtis Bratton's D3 Liquid Fill Gauge (code here: http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6) and wanted to use it in an Angular project, so I turned it to a component and packaged it as a module in case somebody else finds it useful.

In the process I upgraded the D3 API and made minor modifications to Curtis' code along the way as I converted it to Typescript from Javascript. However, all credits go to Curtis! My contribution was just the Angular component wrapper.

Installation and Usage

1. Install 'ngx-liquid-gauge' with npm

npm install ngx-liquid-gauge

2. Import 'NgxLiquidGaugeModule' in your Angular Module

import { NgxLiquidGaugeModule } from 'ngx-liquid-gauge';

imports: [ ...... , NgxLiquidGaugeModule ],

3. Use 'lib-ngx-liquid-gauge' component inside a template

<h1> Demo </h1>
A few demonstrations

<h2>Default Parameters</h2>

<lib-ngx-liquid-gauge></lib-ngx-liquid-gauge>

<h2>Setting just the guage value</h2>

<lib-ngx-liquid-gauge [value]="22"></lib-ngx-liquid-gauge>

<h2>All the settings of the original Liquid Fill Gauge implementation are exposed as optional inputs to the Angular Component</h2>

<lib-ngx-liquid-gauge 
[value]="77" 
[minValue]="0" 
[maxValue]="100" 
[circleThickness]="0.05" 
[circleFillGap]="0.05"
[circleColor]="'#178BCA'" 
[waveHeight]="0.05" 
[waveCount]="1" 
[waveRiseTime]="1000" 
[waveAnimateTime]="18000" 
[waveRise]="true"
[waveHeightScaling]="true" 
[waveAnimate]="true" 
[waveColor]="'#178BCA'" 
[waveOffset]="0" 
[textVertPosition]=".5" 
[textSize]="1"
[valueCountUp]="true" 
[displayPercent]="true" 
[textColor]="'#045681'" 
[waveTextColor]="'#A4DBf8'">
</lib-ngx-liquid-gauge>

Attributes

Property	Usage	Default	Required
value	The gauge value.	0	no
minValue	The gauge minimum value.	0	no
maxValue	The gauge maximum value.	100	no
circleThickness	The outer circle thickness as a percentage of its radius.	0.05	no
circleFillGap	The size of the gap between the outer circle and wave circle as a percentage of the outer circle's radius.	0.05	no
circleColor	The color of the outer circle.	'#178BCA'	no
waveHeight	The wave height as a percentage of the radius of the wave circle.	0.05	no
waveCount	The number of full waves per width of the wave circle.	1	no
waveRiseTime	The amount of time in milliseconds for the wave to rise from 0 to its final height.	1000	no
waveAnimateTime	The amount of time in milliseconds for a full wave to enter the wave circle.	18000	no
waveRise	Control if the wave should rise from 0 to its full height, or start at its full height.	true	no
waveHeightScaling	Controls wave size scaling at low and high fill percentages. When true, wave height reaches its maximum at 50% fill, and minimum at 0% and 100% fill. This helps to prevent the wave from making the wave circle from appearing totally full or empty when near its minimum or maximum fill.	true	no
waveAnimate	Controls if the wave scrolls or is static.	true	no
waveColor	The color of the fill wave.	'#178BCA'	no
waveOffset	The amount to initially offset the wave. 0 = no offset. 1 = offset of one full wave.	0	no
textVertPosition	The height at which to display the percentage text within the wave circle. 0 = bottom, 1 = top.	.5	no
textSize	The relative height of the text to display in the wave circle. 1 = 50%	1	no
valueCountUp	If true, the displayed value counts up from 0 to its final value upon loading. If false, the final value is displayed.	true	no
displayPercent	If true, a % symbol is displayed after the value.	true	no
textColor	The color of the value text when the wave does not overlap it.	'#045681'	no
waveTextColor	The color of the value text when the wave overlaps it.	'#A4DBf8'	no

Module Dependencies

• Angular (@angular/common and @angular/core, version 6 and above)
• D3 (npm install d3 --save)

License

BSD 3-Clause https://opensource.org/licenses/BSD-3-Clause