PackingChart

by riaanc

HTML

<div class="packing-chart">
  
</div>

TODO: clamp values, css class for color

CSS

:root{
  --packing-chart-width: 150px;
  --packing-chart-height: 35px;
}

.packing-chart{
  width: var(--packing-chart-width);
  height: var(--packing-chart-height);
  position: relative;
}

.packing-chart .middle-line{
  position: absolute;
  width:1px;
  height: var(--packing-chart-height);
  left: calc(var(--packing-chart-width)/2);
  border-left: 1px solid #ccc;
  z-index: 9;
}

.packing-chart .mean-line{
  position: absolute;
  width:1px;
  height: var(--packing-chart-height);
  left: 40px;
  border-left: 1px dashed #ccc;
  z-index: 8;
}

.packing-chart .bar{
  position: absolute;
  height: calc(var(--packing-chart-height) - 0px);
  top: 0px;
  background-color: green;
}

.packing-chart .border{
  width: var(--packing-chart-width);
  box-sizing: border-box;
  border: 1px solid #ccc;
  height: var(--packing-chart-height);
  position: relative;
  z-index: 10;
}

JavaScript

(function( $ ){

    var methods = {
        init : function(options) {
          let dividerLine = $(`<div class="middle-line"></div>`);
          $(this).append(dividerLine);
          let meanLine = $(`<div class="mean-line"></div>`);
          $(this).append(meanLine);

          let bar = $(`<div class="bar"></div>`);
          $(this).append(bar);

          let border = $(`<div class="border"></div>`);
          $(this).append(border);
          
          let rootStyles = getComputedStyle(document.documentElement);
          let chartWidth = rootStyles.getPropertyValue('--packing-chart-width');

        },
        update : function( data ) {  
            let deviation = data.ActualPackingRate - data.ExpectedPackingRate;
            let pxWidthHalf = $(this).width()/2;
            let pxRatio = pxWidthHalf / data.Range;
            let barWidth = Math.abs(deviation * pxRatio);
            let meanX = ((data.AveragePackingRate - data.ExpectedPackingRate) * pxRatio) + pxWidthHalf;
            
            $(".bar", this).css("width", barWidth);
            $(".mean-line", this).css("left", meanX);
            
            if (deviation < 0){
                $(".bar", this).css("left", pxWidthHalf-barWidth);
            } else {
                $(".bar", this).css("left", pxWidthHalf);
            }


        }
    };

    $.fn.packingChart = function(methodOrOptions) {
        console.log(this);
        if ( methods[methodOrOptions] ) {
            return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
            // Default to "init"
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  methodOrOptions + ' does not exist on jQuery.tooltip' );
        }    
    };


})( jQuery );


$(function() {
   ...