@domoinc/domo-select

DomoSelect

Configuration Options

buttonIcon

Type: d3 selection
Default: null

d3 selection of the element for the button icon

centerText

Type: select
Default: {"name":"Left","value":false}

Set the text position

chartName

Type: string
Default: "Dropdown"

Name of chart for reporting

color

Type: string
Default: "lightGrey"

Color of the dropdown button

disabled

Type: boolean
Default: false

Disables the dropdown

domoScroll

Type: boolean
Default: true

Hides the scroll bar to the right of the dropdown

dropdownLocation

Type: string
Default: "bottom"

Direction that the dropdown extends from

height

Type: string
Default: "250px"

Height of the select

initialIndex

Type: number
Default: 0

Sets the default option to show on the select bar (the number corresponds to the options' order number in the dropdown)

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.

listIconFunction

Type: function
Default: "function () {}"

Function to run on each dropdown list item for icons.

listIconPadding

Type: number
Default: 0

Left padding on the dropdown

marginBottom

Type: string
Default: "0px"

Margin Bottom

orientation

Type: string
Default: "horizontal"

Orientation of the button

popoutHeight

Type: number
Default: "250px"

Height of the dropdown when opened

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

size

Type: string
Default: "small"

Size of the button and the dropdown

staticValue

Type: string
Default: null

Sets a static default value on the select

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

Width of the widget

Data Definition

Label

Type: string

Default validate:

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

Default accessor:

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

Value

Type: string

Default validate:

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

Default accessor:

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

Events

Dispatch Events

dispatch:click
dispatch:focusout
dispatch:blur
dispatch:selection

External Events

Example

var sampleData = [
    ['All', null],
    ['North', 'North'],
    ['East', 'East'],
    ['South', 'South'],
    ['West', 'West'],
  ];

var chart = d3.select("#vis")
    .style({
        width: '500px',
        height: '500px'
    })
    .append('div')
    .style({
        position: 'absolute',
        top: '225px',
        left: '125px',
        width: '250px'
    })
    .chart('DomoSelect')
    .c({
        width: 250,
    });

chart.draw(sampleData);

setTimeout(function () {
  chart.button.trigger('dispatch:click', sampleData[0]);
}, 1000);

setTimeout(function () {
  chart.dropdown.trigger('click', sampleData[1]);
}, 2000);

setTimeout(function () {
  chart.button.trigger('dispatch:click', sampleData[0]);
}, 3000);