@domoinc/titled-sales-marker

    6.0.6 • Public • Published

    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);
     

    Keywords

    Install

    npm i @domoinc/titled-sales-marker

    DownloadsWeekly Downloads

    1

    Version

    6.0.6

    License

    SEE LICENSE IN LICENSE

    Last publish

    Collaborators

    • jmnemelka
    • jasonleehodges
    • jonathon.meng
    • th3uiguy
    • mountain01
    • statianzo
    • diazd2
    • congrieb
    • cameronnokes
    • ttingey
    • morganjohn12
    • jeff.smith