Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@domoinc/multi-titled-sales-marker

jaxry19SEE LICENSE IN LICENSE3.1.2

MultiTitledSalesMarker - Domo Widget

domo, app

readme

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

textSize

Type: number
Default: 12
Units: px

Font size 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)