@domoinc/titled-sales-marker

TitledSalesMarker - Domo Widget

Stats

StarsIssuesVersionUpdatedCreatedSize
@domoinc/titled-sales-marker
6.0.65 years ago6 years agoMinified + gzip package size for @domoinc/titled-sales-marker in KB

Readme

TitledSalesMarker

Configuration Options

animationDelay

Type: number
Default: 500
Units: ms

Specify the delay for app animations

animationDuration

Type: number
Default: 2000
Units: ms

Specify the length you want the animation to animate for

chartName

Type: string
Default: "TitledSalesMarker"

Name of chart for Reporting.

fontWeight

Type: number
Default: 400
Units: px

The font weight for the names, and numbers

height

Type: number
Default: 250
Units: px

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
Units: px

The letter spacing for the names, and numbers

lineAnimationDuration

Type: number
Default: 500
Units: ms

Specify the length you want the animation to animate for

lineColor

Type: color
Default: "#F68C35"

The line and circle color

lineWidth

Type: number
Default: 2
Units: px

The width of the line

manualTransition

Type: boolean
Default: false

Specify your own circle transition

pulseSetting

Type: string
Default: "function widthPulse(selection) {\n\t selection\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth') * 1.5)\n\t .transition()\n\t .ease('linear')\n\t .duration(_Chart.c('lineAnimationDuration') / 2)\n\t .attr('stroke-width', _Chart.c('lineWidth'));\n\t }"

After the chart update the circle will pulse

radiusSize

Type: number
Default: 10
Units: px

Specify your own circle pulse

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

textColor

Type: color
Default: "#333"

The Color of the names, and numbers

textFontFamily

Type: string
Default: "Open Sans"

Font family for any text.

textSize

Type: number
Default: 12
Units: px

The font size for the names, initials, and numbers

transitionSetting

Type: string
Default: "zoom"

The circle transition

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

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 Number(line[1]); }

Events

Dispatch Events

External Events

Example

// Ideal Data
// var myScale = d3.scale.linear()
//     .domain([0, 50000]) //min and max number of sales
//     .range([0, 500])
//     .clamp(true);
var data = [
    ["Chris Williams", 167, 'https://domo.domo.com/domoweb/avatar/full/domo/857654287']
    // ['Karen Damaso', 16700,123]
];

//Initialze the widget
var chart = d3.select('#vis')
    .append('svg')
    .attr({
        height: '500px',
        width: '1000px'
    })
    .chart('TitledSalesMarker')
    .c({
        width: 0,
        height: 100,
        //'textSize': 40,
        'radiusSize': 10,
        pulseSetting: 'widthPulse',
        'transitionSetting': 'zoom',
        'lineWidth': 2
    });

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.