@domoinc/ca-steps-with-text

CAStepsWithText

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

Configuration Options

bodyFontSize

Type: number
Default: 20
Units: px

The font size of the body text

bodyTextColor

Type: color
Default: #73B0D7

Color of the body text

chartName

Type: string
Default: CAStepsWithText

Name of chart for Reporting

circleColor

Type: color
Default: #73B0D7

Color of the circles

currentStep

Type: number
Default: 1

The current step on display

headerFontSize

Type: number
Default: 40
Units: px

The font size of the header

height

Type: number
Default: 250
Units: px

Height of the chart

labelFontSize

Type: number
Default: 12
Units: px

The font size of the step label text

previousStep

Type: number
Default: 1

The current step on display

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

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 chart

Data Definition

Copy

Type: string

Default validate:

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

Default accessor:

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

Header

Type: string

Default validate:

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

Default accessor:

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

Events

Dispatch Events

External Events

Example

//Setup some fake data
var data = [
  ['Ask for more', 'Always ask for more than you expect.  You will be surprised at what can be accomplished.  Never be afraid to ask for the impossible.'],
  ['Never say yes at first', 'Always consider all of the facts.  Walk away, take your time, and look at every angle. Make sure your getting everything you expect.'],
  ['State the facts', 'Confrontation is simply an emotional response to a technical problem.  It never helps.  Simply, gather the facts and use them to present your case.'],
  ['Be reluctant', 'Being reluctant is an invitation to sweeten the deal.'],
  ['Be patient', 'Eighty percent of the compromises will be made during the last twenty percent of the negotiation process.'],
  ['Evaluate the competitive landscape', 'Take some time to shop around, get several offers. Take your best offer to the one you like the most and ask them to beat it by an 1/8.'],
  ['Make the deal', 'Evaluate all the facts.  Make the deal.']
];

//Initialze the widget
var svg = d3.select('#vis')
  .append('svg');
//svg.append('rect').style('stroke', 'black').style('fill', 'none').attr('width', 500).attr('height', 500);
var chart = svg.attr({
    height: '500px',
    width: '500px'
  })
  .append('g')
  .chart('CAStepsWithText')
  .c({
    width: 500,
    height: 500
  });
//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);




/*----------------------------------------------------------------------------------
Test Redraw
----------------------------------------------------------------------------------*/

//var data2 = [
//  ['Room for  1', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 1'],
//  ['Room for copy 2', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 2'],
//  ['Room for copy 3', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 3'],
//  ['Room for copy 4', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 4'],
//  ['Room for copy 5', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 5'],
//  ['Room for copy 6', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 6'],
//  ['Room for copy 7', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 7'],
//  ['Room for copy 8', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 8'],
//  ['Room for copy 9', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 9'],
//  ['Room for copy 10', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 10'],
//  ['Room for copy 11', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 11'],
//  ['Room for copy 12', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 12'],
//  ['Room for copy 13', 'Quisque maximus justo eget sem dapibus, ut tempor purus aliquam. Vivamus at sollicitudin libero, vitae gravida nisi. 13'],
//  ['14', null]
//];

/*setTimeout(function() {
  chart.draw(data2);
}, 2000);*/