@domoinc/ca-process-circle v1.0.4

CAProcessCircle

Configuration Options

animationDuration

Type: number
Default: 1200
Units: ms

Duration of the animation

arrowColor

Type: color
Default: "#72b0d7"

Fill color for the arrows

arrowStroke

Type: number
Default: 10
Units: px

Stroke of the arrow

arrowheadHeight

Type: number
Default: 26
Units: px

Height of the points on the arrows

arrowheadWidth

Type: number
Default: 15
Units: px

Width of the points on the arrows

centerIcon

Type: d3Selection
Default: null

d3 selection of the DOM element to place in the center

chartName

Type: string
Default: "CAProcessCircle"

Name of chart for Reporting.

circleSpacing

Type: number
Default: 45
Units: px

Amount of space between each step circlee

firstStepColor

Type: color
Default: "#dcecf7"

Fill color for the first circle (the circle colors will change from this color to the End Circle Fill Color)

height

Type: undefined
Default: undefined

undefined

iconCircleRadius

Type: number
Default: 65
Units: px

Radius of the center circle

iconCircleStrokeColor

Type: color
Default: "#99cbed"

Border color for the center circle

iconCircleStrokeWidth

Type: number
Default: "5"
Units: px

Stroke width of the center icon circle

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.

lastStepColor

Type: color
Default: "#b0d8f2"

Fill color for the last circle (the circle colors will change from the Start Circle Fill Color to this color)

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

stepLabelColor

Type: color
Default: "#4e8cba"

Color of the step labels

stepLabelFontFamily

Type: string
Default: "Open Sans"

Font family of the step labels

stepLabelFontSize

Type: number
Default: 14
Units: px

Font size of the step labels

stepLabelFontWeight

Type: select
Default: {"name":"600","value":600}

Font weight of the step labels

stepLabelLetterSpacing

Type: number
Default: "1"
Units: px

Letter spacing of the step labels

stepLabelTextTransform

Type: select
Default: {"name":"Capitalize","value":"uppercase"}

Set the labels to be capitalized or lowercase

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color of the tooltip

tooltipDescriptionTextColor

Type: color
Default: "#FFFFFF"

Color of the tooltip text

tooltipDescriptionTextSize

Type: number
Default: "12"
Units: px

Size of the tooltip text

tooltipFontFamily

Type: string
Default: "Open Sans"

Font family of the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: undefined
Default: undefined

undefined

x

Type: number
Default: 0
Units: px

undefined

y

Type: number
Default: 0
Units: px

undefined

Data Definition

Completed

Type: string

Default validate:

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

Default accessor:

function (line) {
	                    return line[2] === undefined ? undefined : String(line[2]).toLowerCase();
	                }

Details

Type: string

Default validate:

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

Default accessor:

function (line) {
	                    return line[1] === undefined ? undefined : String(line[1]);
	                }

Title

Type: string

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

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

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

//Setup some fake data
var data = [
  ['Think Awesome', 'Thinking awesome thoughts will put your brain in an awesome mood.', 'true'],
  ['Do awesome', 'Doing awesome things will make you feel super awesome.', 'true'],
  ['Become awesome', "You've made it!  You are awesome personified!", 'false']
];

var iconGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
d3.select(iconGroup).append('circle').attr('r', 5).style('fill', 'purple');

var svg = d3.select("#vis")
  .append("svg");

//Initialze the widget
var chart = svg
  .attr({
    height: '500px',
    width: '500px'
  })
  .append("g")
  .chart("CAProcessCircle")
  .c({
    width: 500,
    height: 500,
    centerIcon: d3.select(iconGroup)
  });

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

setTimeout(function() {
  chart.c('width', 400);
  chart.draw(data);
}, 3000);