Example Enumeration Card

Demonstration of an enumeration card

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="card summary" style="opacity: 0; display: none;">
    <div class="header">
        <div class="content">
            <span class="title">
                <span data-bind="text: element"></span>
                <span class="symbol">></span>
                <span data-bind="text: attribute"></span>
            </span>
            <span class="count" data-bind="text: count"></span>
            <div class="menu">
                <span class="menu-item selected">Summary</span>
                <span class="menu-item">Details</span>
                <div class="add">+</div>
            </div>
        </div>
    </div>
    <div class="main">
        <div class="table-header">
            <div class="col-xs-6">
                <input type="checkbox" id="checkbox1"></input>
                <label for="checkbox1">Include</label>
            </div>
            <div class="col-xs-6">
                <label>Distribution (%)</label>
            </div>
        </div>
        <div class="table-content" data-bind="foreach: values">
            <div class="state">
                <input type="checkbox"></input>                
                <span class="col-xs-6">
                    <div class="circle" data-bind="style: { background: color }"></div>
                    <span class="name" data-bind="text: name"></span>
                </span>
                <span class="col-xs-6">
                    <span class="value"><span data-bind="text: value"></span>%</span>
                </span>
            </div>          
        </div>
    </div>
    <div class="footer"></div>
</div>

<div class="cards">
<div class="card"> <span class="title" data-bind="text: element + ' ' +attribute">Budget Signoff</span>
    <div class="content">
        <div class="states" data-bind="foreach: values">
 ...

CSS

body {
    background: rgb(40, 40, 40);
}

.spacer {
    height: 230px;
}

.cards {
    float: right;
}

/* Small Card */
.card {
    margin-bottom: 3px;
    background: white;
    border-radius: 3px;
    width: 196px;
    float: right;
    clear: both;
    min-height: 100px;
    padding: 10px 5px 15px 5px;
    font-family:'Open Sans', Arial, sans-serif; 
}
.title {
    color: rgb(105, 161, 36);
    font-size: 16px;
}

.states {
    padding-top: 10px;
}

.state {
    font-size: 12px;
    color: rgb(67, 88, 98);
    padding: 0px 5px 2px 5px;
    clear: both;
}

.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    float: left;
    margin: 1px 5px 5px 0px;
}

.value {
    float: right;
}

.graph {
    padding: 10px 5px 0px 5px;
}

.bar {
    float: left;
    height: 15px;
}

.start {
    border-top-left-radius: 7px;
    border-bottom-left-radius: 7px;
}

.end {
    border-top-right-radius: 7px;
    border-bottom-right-radius: 7px;
}


/* Large Card */
.summary {
  border-radius: 0px;
  width: 620px;
  height: 842px;
  padding-left: 0px;
    padding-right: 0px;
}

.header .content {
    margin: 20px 30px 0px 20px;
    padding: 0px 0px 8px 0px;
}

.header {
    box-shadow: 0px 5px 5px #CCCCCC;
}

.header .title {
    font-size: 26px;
    color: #546e7a;    
}

.header .count {
    float: right;
    color: #4180cf;
    font-size: 18px;
}

checkbox {
    min-height: 30px;
}

.main {
    padding: 20px;
    color: #aaaaaa;
}

.menu {
    margin-top: 20px;
    font-size: 13px;
    text-align: middle;
}

.symbol {
    margin: 0px 10px 0px 10px;
}

.main {
    height: 510px;
}

.add {
    float: right;
    height: 54px;
    width: 54px;
    background: #78b728;
    border-radius: 50%;
    margin-right: 30px;
    color: white;
    font-size: 48px;
    text-align: center;
    box-shadow: 4px 4px 10px #CCCCCC;
}

.col-xs-6 {
    float: left;
    width: 40%;
}

.table-header {
    padding-bottom: 5px;
    padding-top: 5px;
    min-height: 25px;
   ...

JavaScript

var data = {
    element: "Budget",
    attribute: "Sign-off",
    count: 9000,
    values: [
        { name: "Signed-off", value: 70, color: "#5fb5cc" },
        { name: "Submitted", value: 20, color: "#75d181" },
        { name: "Not Submitted", value: 10, color: "#f8a25b" }
    ]
};

function addGraph(target) {
    
    var group = d3.selectAll(target);
    var join = group.selectAll("div").data(data.values);
    
    join.enter()
        .append("div")
        .attr("class", function(d, i) {
            if(i === 0) return "bar start";
            if(i === data.values.length - 1) return "bar end";
            return "bar";        
        })
        .style("width", function(d) { return d.value + "%"; })
        .style("background", function(d) { return d.color; });
};    

function clicks() {
    function show(s, e) {
      s.transition()
       .style("width", "620px")
       .style("height", "842px");
       
        var h = $('.card.summary').html(); 
        s.select(".title").transition().style("opacity", 0);       
        s.select(".content").transition().style("opacity", 0).each("end", function() {
        $(e).html(h);
        d3.select(e)
          .style("display", null)
          .transition()
          .style("opacity", 1);    
        });
    };
    
    function hide(s, e) {
      s.transition()
       .style("width", "196px")
       .style("height", "100px");
       
       var h = $('.card').not('.summary').first().html();
       s.select(".content").transition().style("opacity", 1);    
       s.select(".title").transition().style("opacity", 1).each("end", function() {
           $(e).html(h); 
           d3.select(e).transition().style("opacity", 1);    
       });
        
    };
    
    d3.selectAll(".card").on("click", function(d) {
       
        var width = d3.select(this).style("width");
        console.log(width);
        var vis = width !== "620px";
        if(vis) { show(d3.select(this), this); }
        else{...