@domoinc/multi-titled-sales-marker NPM

MultiTitledSalesMarker

Configuration Options

animationDelay

Type: number
Default: 500
Units: ms

Duration of time before the animation begins

animationDuration

Type: number
Default: 500
Units: ms

Duration of time for the animation

chartName

Type: string
Default: "MultiTitledSalesMarker"

Name of chart for Reporting

fontWeight

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

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

gaugeFillPrimaryColor

Type: color
Default: "#73B0D7"

Line and border color for the metrics

height

Type: number
Default: 400
Units: px

Height of the widget

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.

letterSpacing

Type: number
Default: 1

Letter spacing for the text

lineWidth

Type: number
Default: 1
Units: px

Width of the lines

manualTransition

Type: boolean
Default: false

Specify your own circle transition

prefix

Type: string
Default: "$"

Text added before the number value

radiusSize

Type: number
Default: 14
Units: px

Radii of the circle images

scale

Type: scale
Default: "function scale(x) {\n\t return output(x);\n\t }"

The scale for the lines

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

suffix

Type: string
Default: ""

Text added after the number value

textColor

Type: color
Default: "#888888"

Font color for the text

textFontFamily

Type: string
Default: "Open Sans"

Font type for the text

transitionSetting

Type: string
Default: "zoom"

The circle transition

updateSizeableConfigs

Type: boolean
Default: true

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

widgetSpacing

Type: number
Default: 35
Units: px

The space between the metrics

width

Type: number
Default: 400
Units: px

Width of the widget

Data Definition

Image

Type: string

Default validate:

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

Default accessor:

function (line) { return String(line[2]); }

Name

Type: string

Default validate:

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

Default accessor:

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

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

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

Events

Dispatch Events

External Events

Example

var data = [
// {"Name":"Karen Damaso","Team":"AE Enterprise","Sales":167000,"OverallRank":2,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Kevin Wilck","Team":"AE Enterprise","Sales":126250,"OverallRank":3,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-19T14:19:06"},
// {"Name":"Tod Bayne","Team":"Executive Team","Sales":117093,"OverallRank":4,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-14T22:31:26"},
// {"Name":"Joe Hawkins","Team":"AE Corporate","Sales":108200,"OverallRank":5,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-05T16:49:36"},
// {"Name":"Bryan Favero","Team":"AE Corporate","Sales":72000,"OverallRank":6,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Ryan Pretnik","Team":"AE Mid Market","Sales":69500,"OverallRank":7,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-03T21:02:42"}

		['Karen Damaso', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
    	['Kevin Wilck', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-10-90.jpg'],
    	['Tod Bayne', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
    	['Joe Hawkins', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
    	['Bryan Favero', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
    	['Ryan Pretnik', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg']
];

var data2 = [
// {"Name":"Karen Damaso","Team":"AE Enterprise","Sales":167000,"OverallRank":2,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Kevin Wilck","Team":"AE Enterprise","Sales":126250,"OverallRank":3,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-19T14:19:06"},
// {"Name":"Tod Bayne","Team":"Executive Team","Sales":117093,"OverallRank":4,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":"2014-11-14T22:31:26"},
// {"Name":"Joe Hawkins","Team":"AE Corporate","Sales":108200,"OverallRank":5,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-05T16:49:36"},
// {"Name":"Bryan Favero","Team":"AE Corporate","Sales":72000,"OverallRank":6,"TeamRank":2,"OverallLeadDate":"","TeamLeadDate":""},
// {"Name":"Ryan Pretnik","Team":"AE Mid Market","Sales":69500,"OverallRank":7,"TeamRank":1,"OverallLeadDate":"","TeamLeadDate":"2014-11-03T21:02:42"}

		['Karen Damas', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
    	['Kevin Wilc', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-10-90.jpg'],
    	['Tod Bayn', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
    	['Joe Hawkin', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
    	['Bryan Faver', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
    	['Ryan Pretni', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg']
];

var sampleData = [
    ['Karen Damaso', 167030, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-10-90.jpg'],
    ['Kevin Wilck', 126250, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-01-90.jpg'],
    ['Tod Bayne', 117093, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-18-90.jpg'],
    ['Melody Hawkins', 108200, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-19-90.jpg'],
    ['Bryan Favero', 72000, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
    ['Ryan Pretnik', 69500, 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-04-90.jpg']
	];
//Initialze the widget

var svg = d3.select("#vis")
	.append("svg");
// 	svg.append("rect").attr({'width':'500px', 'height': '500px'}).style({'stroke-width': '1px', 'stroke':'black', 'fill':'none'});
var chart = svg
	.attr({
		'width': '500px',
		'height': '500px',
	})
	.append("g")
	.attr("transform", "translate(-30,125)")
	.chart('MultiTitledSalesMarker')
	.c({
		'height': 272.6,
		'width': 500,
		'animationDuration': 500,
		'widgetSpacing': 35,
		'radiusSize': 14
	})
	// .a({
	// 	'Name': function (line) { return String(line.Name).toUpperCase(); },
	// 	'Value': function (line) { return Number(line.Sales); },
	// 	'Image': function (line) { return String(line.PhotoURL); },
	// 	'id': function (line) { return String(line.Name); }
	// });

//Render the chart with data
chart.draw(sampleData);
// setTimeout(function() {chart.c('textSize', 20); chart.draw(data);},2000)

domo app

d3 lodash d3.chart @domoinc/da-theme2 @domoinc/base-widget @domoinc/titled-sales-marker

@infinitebrahmanuniverse/nolb-_dom @everything-registry/sub-chunk-251

10 years ago

10 years ago

10 years ago

10 years ago