Flexible Metric Card

SketchSystems.spec

Flexible Metric Card
  Closed
    clickCard -> Show Chart
    mouseOver -> Show Ellipsis
    requestingData -> Loading
    noData -> Awaiting Data
    scriptNotInstalled -> Install Script
  Show Chart
    clickCard -> Closed
  Show Ellipsis
    clickEllipsis -> Show Options
    mouseOut -> Closed
  Show Options
    clickOutside -> Closed
    clickMoveLeft -> Closed
    clickMoveRight -> Closed
    clickDelete -> No Metric Chosen
  Awaiting Data
    hasData -> Closed
  No Metric Chosen
    choosesMetric -> Closed
  Install Script
    scriptInstalled -> Closed
  Loading
    dataLoaded -> Closed
    dataDidntLoad -> Failed to Load
  Failed to Load
    retrySuccessful -> Closed
    retryFailed -> Failed to Load
    
  

SketchSystems_prototype.js

function render(model){
  let current_state_name = model.active_states[0].name;
  return $("h1",
           {style: {color: "darkBlue"}},
           `The current state is: ${current_state_name}`);
}