Fill Bar 2

In this example below you will see how to do a Fill Bar 2 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jacobharasimo, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jacobharasimo ©
  • HTML
  • CSS
  • JavaScript
        
    

/*Downloaded from https://www.codeseek.co/jacobharasimo/fill-bar-2-qxKQYd */
        text {
  fill: #595858;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:.9em;
}

.empty_guage{
  fill: #c4cad3;
}
.guage{
   fill: #de5626; 
}
.usage-text{
  text-transform:uppercase;
  fill: black;  
  font-weight:bold;  
}
.limit-text{
    text-transform:uppercase;
}
.limit-line{
  stroke-width:1px;
  stroke:#c4cad3;
}
.combination-symbol{
  fill:#468847;
  font-weight:bold;
}
.addon-guage{
  fill:#468847;
}
.addon-limit{
  fill:white;
  font-weight:bold;
  text-transform:uppercase;  
  text-anchor:middle;
}
.overlay-line{
  stroke:black;
  stroke-width:2px;
}

.combined-allotment{
  fill:black;
  text-transform:uppercase;  
  text-anchor:middle;
  font-weight:bold;
}

    

/*Downloaded from https://www.codeseek.co/jacobharasimo/fill-bar-2-qxKQYd */
        // props that will be sent into the graph
var value = 200;
var limit = 500;
var dataUnit = 'gb';
var height = 50;
var width = 370;
var addonSize = 3;
var addonUnitType = 'gb'


// constants
if (dataUnit === 'gb') {
      value = value * 1024;
      limit = limit * 1024;
    }
    if (addonUnitType === 'gb') {
      addonSize = addonSize * 1024;
    }

const maxBarWidth = width * .7;
const addonBarWidth = width *.3;
const barHeight = '1em';
const fillAmount = (value / limit) * maxBarWidth; 
const minValue = 0;
const animationTiming = 750;
const remainder = limit - value;
// private functions
    const formatText = (val, dataUnit) => {
      let dataFormat = d3.format('.1f');
      if (dataUnit.toLowerCase() === 'mb') {
        dataFormat = d3.format('.0f');
      }
      return `${dataFormat(val)}${dataUnit}`;
    };

    const usageXOffset = () => {
      let result = fillAmount / 2;
      if (result < maxBarWidth / 2) {
        result = maxBarWidth / 2;
      }
      return result;
    };

    const combinedXOffset = () => {
      return fillAmount + ((width - fillAmount) / 2);
    };

    const fadeIn = (node) => {
      node
        .transition()
        .delay(animationTiming / 2)
        .duration(animationTiming / 2)
        .style('opacity', 1);
    };

    const displayData = (value, desiredUnit) => {
      let result = value;      
      if (value > 1024) {
        result = (value / 1024).toFixed(2);        
      }
      console.log('origional ', value,' converted ', result, ' display ', formatText(result, desiredUnit));
      return formatText(result, desiredUnit);
    };

const canvas = d3
  .select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const group = canvas
  .append("g")
  .attr("class","usage")
  .attr("width", maxBarWidth)
  .attr("height", height);
  
  /* Add empty gauge */
  group
  .append("rect")  
  .attr("class", "empty_guage")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", maxBarWidth)
  .attr("height", barHeight);

/* Add fill gauge */
  group
  .append("rect")  
  .attr("class", "guage")
  .attr("x", 0)
  .attr("y", 0)
  .attr("height", barHeight)
  .transition()
  .duration(animationTiming)
  .attrTween("width", function() { return d3.interpolateNumber(0, fillAmount)})

  /* Add Usage Text */
const usageText = group
  .append("text")
  .style("opacity",0)
  .attr("dy", ".91em")
  .attr("x", usageXOffset())
  .attr("class", "usage-text")
  .text(displayData(value, dataUnit));

const addonGroup = canvas
  .append("g")
  .attr("class","addons")
  .attr("width", addonBarWidth)
  .attr("height", height);

addonGroup
  .append("text")
  .attr("dy", ".91em")
  .attr("x", maxBarWidth+5)
  .attr("class", "combination-symbol")
  .text('+');

addonGroup
  .append("rect")  
  .attr("class", "addon-guage")
  .attr("x", maxBarWidth+20)
  .attr("y", 0)
  .attr("height", barHeight)
  .attr("width",addonBarWidth-20)

const addonAmount = addonGroup
  .append("text")
  .style("opacity",0)
  .attr("dy", ".91em")
  .attr("x", maxBarWidth+((addonBarWidth+20)/2))
  .attr("class", "addon-limit")
  .text(displayData(addonSize, addonUnitType));

const overlayGroup = canvas
  .append("g")
  .style("opacity", 0)
  .attr("class","overlay")
  .attr("width", width)
  .attr("height", height);

overlayGroup
  .append('line')
  .attr("class", "overlay-line")
  .attr("x1",width-1)
  .attr("y1",barHeight)
  .attr("x2",width-1)
  .attr("y2",height-8);

overlayGroup
  .append('line')
  .attr("class", "overlay-line")
  .attr("x1",fillAmount+1)
  .attr("y1",barHeight)
  .attr("x2",fillAmount+1)
  .attr("y2",height-8);

overlayGroup
  .append('line')
  .attr("class", "overlay-line")
  .attr("x1",fillAmount)
  .attr("y1",height-8)
  .attr("x2",width)
  .attr("y2",height-8);

const overageTextMask = overlayGroup
  .append("rect")  
  .attr("y",height-16)
  .attr("x",combinedXOffset())
  .attr("height", barHeight)
  .attr("width",addonBarWidth-20)
  .attr("fill","white");

let combinedUnit = dataUnit;
if(dataUnit!==addonUnitType){
  combinedUnit = 'gb';
}
if(combinedUnit === 'mb' && (remainder+addonSize > 1024)){
  combinedUnit = 'gb';
}
const overageText = overlayGroup
  .append("text")
  .attr("y",height-16)
  .attr("x",combinedXOffset())
  .attr("dy", ".91em")  
  .attr("class", "combined-allotment")
  .text(displayData((remainder+addonSize), combinedUnit));


overageTextMask
  .attr("x",combinedXOffset() - (overageText.node().getComputedTextLength()+20)/2)
  .attr("width", (overageText.node().getComputedTextLength())+20);

fadeIn(overlayGroup);
fadeIn(usageText);
fadeIn(addonAmount);
    

Comments