@domoinc/carousel

Carousel

Slider with an image and/or text

<img src=media/widget.png height=500 width=500>

Configuration Options

arrowHeight

Type: number
Default: 20
Units: px

Width of the arrow

arrowWidth

Type: number
Default: 10
Units: px

Width of the arrow

captionFontColor

Type: color
Default: #FFFFFF

Text color when there is a caption under the image

captionImagePadding

Type: number
Default: 16
Units: px

Padding between the image and the caption

captionRectColor

Type: color
Default: #666666

captionTextMaxHeight

Type: number
Default: 100
Units: px

Maximum height of the caption text when there is a picture

chartName

Type: string
Default: Carousel

Name of chart for reporting

height

Type: number
Default: 250
Units: px

pageFontColor

Type: color
Default: #333333

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

slidePadding

Type: number
Default: 200
Units: px

Padding between each slide to fit the arrows

textFontColor

Type: color
Default: #333333

textFontFamily

Type: string
Default: Open Sans

textFontSize

Type: number
Default: 18
Units: px

textFontWeight

Type: select
Default: [object Object]

Note: Not all weights are supported by every font family.

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 line[1] === undefined || line[1] === null ? '' : String(line[1]); }

Text

Type: string

Default validate:

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

Default accessor:

function (line) { return line[0] === undefined || line[0] === null ? '' : String(line[0]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['Moe Rogerson is the sales leader of the month!', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-15-90.jpg'],
  ['Lyle Simpson closed the most deals for this quarter. He has acheived employee of the year status.', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-male-20-90.jpg'],
  ['', 'http://s3.amazonaws.com/Domo_infographic/fauxmosapiens/fauxmosapien-female-20-90.jpg'],
  ['Collaborative vortals leverage, interactive unleash cross-platform incubate incentivize real-time bricks-and-clicks intuitive value-added. 24/365, magnetic transparent A-list matrix customized implement, enterprise user-contributed, experiences leverage optimize channels e-business recontextualize end-to-end supply-chains synthesize bandwidth deliver', ''],
  ['Stock prices for the company increased 5% this year.', ''],
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    width: '500px',
    height: '500px',
  })
  .append('g')
  .chart('Carousel')
  .c({
    width: 250,
    height: 250,
    // textFontSize: 5
  });

//Render the chart with data
chart.draw(data);