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.
- Install 'ngx-liquid-gauge' with npm
npm install ngx-liquid-gauge
- Import 'NgxLiquidGaugeModule' in your Angular Module
import { NgxLiquidGaugeModule } from 'ngx-liquid-gauge';
imports: [ ...... , NgxLiquidGaugeModule ],- 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 gauge 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>| 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 |
- Angular (@angular/common and @angular/core, version 6 and above)
- D3 (
npm install d3 --save)
BSD 3-Clause https://opensource.org/licenses/BSD-3-Clause