# @domoinc/single-value-gauge

> SingleValueGauge - Domo Widget

Latest version **0.1.1** (published 2016-04-13) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @domoinc/single-value-gauge
pnpm add @domoinc/single-value-gauge
yarn add @domoinc/single-value-gauge
bun add @domoinc/single-value-gauge
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2016-04-13 |
| First published | 2016-03-17 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Domo Inc. |
| Maintainers | aharris88, andrewjensen, bkingery, bmbarker-domo, clm, dallasnorton, excrispy, freakaziod210, jaxry, jgalb, jmstewart, jonathan-law, k4paul, lcwright21, morganjohn12, nicksrandall, scott.davidson.domo, whitney.rosenberg |
| Keywords | domo, app |

## Links

- npm: https://www.npmjs.com/package/@domoinc/single-value-gauge
- npm.io page: https://npm.io/package/@domoinc/single-value-gauge

## Dependencies (5)

- [d3](https://npm.io/package/d3.md) ^3.5.16
- [d3.chart](https://npm.io/package/d3.chart.md) ^0.3.0
- [@domoinc/da-theme2](https://npm.io/package/@domoinc/da-theme2.md) ^2.3.1
- [@domoinc/base-widget](https://npm.io/package/@domoinc/base-widget.md) ^1.5.2
- [@domoinc/arrow-single-value-indicator](https://npm.io/package/@domoinc/arrow-single-value-indicator.md) ^5.1.1

## Recent versions

- 0.1.1 (latest) — 2016-04-13
- 0.1.0 — 2016-03-18
- 0.0.5 — 2016-03-18
- 0.0.4 — 2016-03-18
- 0.0.3 — 2016-03-17
- 0.0.2 — 2016-03-17

## README

# SingleValueGauge

A single value indicator inside a color gauge



## Configuration Options


#### abbrNumber
Type: `select`  
Default: `{"name":"Abbreviate","value":true}`  

Set the format of the number to be fully written out or abbreviated when the value is 1000 or greater (e.g. if abbreviated, 1000 will be 1K)

#### alignment
Type: `select`  
Default: `{"name":"Align Text Left","value":"left"}`  

The horizontal alignment of the text relative to the widget's chart bounds

#### animationDuration
Type: `number`  
Default: `500`  
Units: `ms`

Duration of time for the initial animation

#### arrowOffset
Type: `number`  
Default: `-6`  

Distance of arrow from the text (negative is further away)

#### badRangeValue
Type: `number`  
Default: `40`  

Any value below this number indicates something is bad

#### chartName
Type: `string`  
Default: `"templateChart"`  

Name of chart for reporting

#### decTrendColor
Type: `color`  
Default: `"#E4584F"`  

Fill color that indicates something is bad

#### fontSize
Type: `number`  
Default: `48`  
Units: `px`

Font size for the text

#### fontWeight
Type: `select`  
Default: `{"name":"300 - Light","value":300}`  

Greater values correspond to increased font boldness (some fonts do not support every value)

#### gaugeBadStroke
Type: `color`  
Default: `"#C92E25"`  

Border color that indicates something is bad

#### gaugeGoodStroke
Type: `color`  
Default: `"#559E38"`  

Border color that indicates something is good

#### gaugeNeutralStroke
Type: `color`  
Default: `"#D7D9DA"`  

Border color that indicates something is neutral

#### goodRangeValue
Type: `number`  
Default: `70`  

Any value above this number indicates something is good

#### height
Type: `number`  
Default: `400`  
Units: `px`

Height of the widget

#### hoverEvent
Type: `select`  
Default: `{"name":"Enable","value":true}`  

Enable or disable the animation triggered by moving the mouse over the widget

#### incTrendColor
Type: `color`  
Default: `"#80C25D"`  

Fill color that indicates something is good

#### indicatorColor
Type: `color`  
Default: `"#333333"`  

Font color for the text

#### isOnMobile
Type: `boolean`  
Default: `false`  

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

#### magnitudeFontSize
Type: `number`  
Default: `null`  
Units: `px`

Font size for the abbreviation symbol for large numbers (e.g. if 1000 abbreviates to '1K', the symbol is 'K')

#### noTrendColor
Type: `color`  
Default: `"#E5E5E5"`  

Fill color that indicates something is neutral

#### numDecimal
Type: `select`  
Default: `{"name":"Default"}`  

Set the number of decimal places to be displayed

#### offsetArrowHeadWidth
Type: `number`  
Default: `0`  
Units: `px`

Width of the arrowhead (0 is default, negative and positive is narrower and wider respectively)

#### offsetArrowLength
Type: `number`  
Default: `0`  
Units: `px`

Length of the arrow (0 is default, negative and positive is shorter and longer respectively)

#### offsetArrowWidth
Type: `number`  
Default: `0`  
Units: `px`

Width of the arrow (0 is default, negative and positive is narrower and wider respectively)

#### postfixFontSize
Type: `number`  
Default: `null`  
Units: `px`

Font size for the suffix (if empty, the font size will be the same as the font size above)

#### postfixString
Type: `string`  
Default: `""`  

Text added after the indicator

#### prefixFontSize
Type: `number`  
Default: `null`  
Units: `px`

Font size for the prefix (if empty, the font size will be the same as the font size above)

#### prefixString
Type: `string`  
Default: `""`  

Text added before the indicator

#### shouldValidate
Type: `boolean`  
Default: `true`  

Flag for turning off data validation

#### showArrow
Type: `select`  
Default: `{"name":"Show","value":true}`  

Flag that dictates if the trend arrow is drawn

#### symbolAlignment
Type: `select`  
Default: `{"name":"Align Text Bottom","value":"bottom"}`  

The vertical alignment of the prefix, suffix, and abbreviation symbol relative to the number value

#### textFontFamily
Type: `string`  
Default: `"Open Sans"`  

Font type for the text

#### updateSizeableConfigs
Type: `boolean`  
Default: `true`  

Flag for turning off the mimic of illustrator's scale functionality

#### useContrastColors
Type: `boolean`  
Default: `false`  

Flag that dictates whether or not to use the good and bad color configs

#### width
Type: `number`  
Default: `400`  
Units: `px`

Width of the widget

## Data Definition


#### Label
Type: `string`

Default validate:  
```js
function validate(d) {
	          return this.accessor(d) || this.accessor(d) === 0;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return line[0];
	        }
```

#### Value
Type: `number`

Default validate:  
```js
function validate(d) {
	          return (this.accessor(d) || this.accessor(d) === 0) && this.accessor(d) >= 0;
	        }
```

Default accessor:  
```js
function accessor(line) {
	          return parseFloat(line[1]);
	        }
```

## Events


#### Dispatch Events

#### External Events


## Example

```js  
/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['Gauge Value', 87]
];

//Initialze the widget
var chartGroup = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .attr('transform', 'translate(125,125)');
  
var chart = new SingleValueGauge(chartGroup)
  .c({
    width: 250,
    height: 250
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);

```

---
_Source: https://npm.io/package/@domoinc/single-value-gauge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._