Funnels Chart

SketchSystems.spec

Funnels Chart
  First Step
    Create Cohort -> Create Cohort Modal
  Second Step
    Create Cohort -> Create Cohort Modal
  Third Step
    Create Cohort -> Create Cohort Modal
  Create Cohort Modal 
    Save Cohort -> Confirmation Toast
    Cancel -> First Step
  Confirmation Toast
    Dismiss -> Funnels Chart

SketchSystems_prototype.js

function bar(model, height) {
  return $("div", {
    style: { 
      width: '40px', 
      height: `${height}px`, 
      background: 'blue',
      marginRight: '10px',
    },
    onClick: function () {
      model.emit('Create Cohort')
    }
  })
}

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("div", {
            style: {
              display: 'flex', 
              alignItems: 'bottom'
            }
           },
           bar(model, 100),
           bar(model, 30),
           bar(model, 60),
           bar(model, 20),
           model.active_states[0].name);
}