@domoinc/ca-trend-number

CATrendNumber

Configuration Options

abbrNumber

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

Set the format of the number to be default or abbreviated when the value is 1000 or greater (i.g. if abbreviated, 1000 will be 1K)

alignment

Type: select
Default: {"name":"Center","value":"center"}

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

animationDuration

Type: number
Default: 1500
Units: ms

Duration of time for the animation

arrowOffset

Type: number
Default: -6

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

chartName

Type: string
Default: "CATrendNumber"

Name of chart for Reporting

decTrendColor

Type: color
Default: "#E4584F"

Indicator color meant to indicate something bad, like negative sales

drawCircle

Type: boolean
Default: false

Allows user to determine if circle is drawn

drawFromCenter

Type: boolean
Default: true

Draws line chart from center of its height box

endPointRadius

Type: number
Default: 3
Units: px

Radius of the endpoint circle

fillOpacity

Type: number
Default: 40
Units: %

Transparency factor of the circle (0 is transparent, 100 is full color)

fontSize

Type: number
Default: 32
Units: px

Font size for the indicator

fontWeight

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

Font boldness for the indicator

generalFillBadColor

Type: color
Default: "#E4584F"

Fill color that indicates something is bad

generalFillGoodColor

Type: color
Default: "#91D0BC"

Fill color that indicates something is good

generalFillNeutralColor

Type: color
Default: "#E5E5E5"

Fill color that indicates something is neutral

generalStrokeBadColor

Type: color
Default: "#C92E25"

Line color meant to indicate something bad, like negative sales

generalStrokeGoodColor

Type: color
Default: "#559E38"

Line color meant to indicate something good, like positive sales

generalStrokeNeutralColor

Type: color
Default: "#D7D9DA"

Line color meant to indicate something neutral

height

Type: number
Default: "250"

Height of chart

hoverEvent

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

Enable or disable the animation

incTrendColor

Type: color
Default: "#80C25D"

Indicator color meant to indicate something good, like positive sales

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.

lineWidth

Type: number
Default: 2
Units: px

Width of the trendline

magnitudeFontSize

Type: number
Default: null
Units: px

Font size for the abbrevation symbol for large numbers (i.g. for 1,000, if it abbreviates to '1K', the symbol is 'K')

noTrendColor

Type: color
Default: "#E5E5E5"

Indicator color meant to indicate something 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

postfixString

Type: string
Default: ""

Text added after the indicator

prefixFontSize

Type: number
Default: null
Units: px

Font size for the prefix

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

textFontFamily

Type: string
Default: "Open Sans"

Font type for the indicator

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: "250"

Width of chart

Data Definition

Label

Type: string

Default validate:

function validate(d) {
	          return this.accessor(d) !== undefined;
	        }

Default accessor:

function accessor(line) {
	          return String(line[0]);
	        }

Value

Type: number

Default validate:

function validate(d) {
	          return !isNaN(this.accessor(d));
	        }

Default accessor:

function accessor(line) {
	          return parseFloat(line[1]);
	        }

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['2014-01-01', 1],
  ['2014-02-01', 2],
  ['2014-03-01', 4],
  ['2014-04-01', 3],
  ['2014-05-01', 1],
  ['2014-06-01', 2],
  ['2014-07-01', 3],
  ['2014-08-01', 6],
  ['2014-09-01', 4],
  ['2014-10-01', 3],
  ['2014-11-01', 4],
  ['2014-12-01', 7]
];

//Initialze the widget
var chart = d3.select('#vis')
  .select('[id^=DomoWidgetLockDomo]')
  .attr('transform', 'translate(0,171)')
  .chart('CATrendNumber')
  .c({
    width: 250,
    height: 250,
    postfixString: '%'
  });

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