Legend elements position

index.html

<div class='container'>
  <div class='header'>1 — 25 февраля</div>
  <div id='totalUsers' class='item'>
    <div class='marker' style='background:#d2dbff'></div>
    <div class='name'>Общая аудитория:</div>
    <div class='value'>1,934</div>
  </div>
  <div id='uniqUsers' class='item'>
    <div class='marker' style='background:#d8b2b9'></div>
    <div class='desc'>Уникальные пользователи:</div>
    <div class='value'>784</div>
  </div>
  <div id='bots' class='item'>
    <div class='marker' style='background:#e0ffd7'></div>
    <div class='name'>Запросы роботов:</div>
    <div class='value'>253</div>
  </div>
  <hr />
  <div id='total' class='item'>
    <div class='name'>Всего событий:</div>
    <div class='value'>2,971</div>
  </div>
</div>

legend-elements-position.markdown

Legend elements position

A Pen by creadone on CodePen.

License.

script.js

var root  = document.querySelector('.container');
var slice = Array.prototype.slice;
var store = [];

// Extracted from https://github.com/npm-dom/dom-walk/blob/master/index.js
function walk(nodes, cb){
  if( !('length' in nodes) ) nodes = [nodes];
  nodes = slice.call(nodes);
  while(nodes.length){
    var node = nodes.shift();
    var ret = cb(node);
    if(ret) return ret;
    if (node.childNodes && node.childNodes.length){
      nodes = slice.call(node.childNodes).concat(nodes)
    }
  }
};

walk(root, node => {
  if(node.nodeName === 'DIV'){
    var { x, y, width, height } = node.getBoundingClientRect();
    var type = node.classList[0];

    if(!node.firstChild){
      var value = node.style.background
        ? { background: node.style.background }
        : { text: node.textContent };
    } else {
      value = null;
    }
    
    store.push({
      type: type,
      position: {
        x: x,
        y: y,
        width: width,
        height: height
      },
      value: value,
    });
  }
});

console.log(store);

style.css

body {
  font-family: sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,0.8);
  font-weight: 300;
  letter-spacing: 0.05rem;
}

.container div {
  outline: 1px solid lightgray;
}

.container {
  padding: 20px;
  margin: 10px;
  max-width: 300px;
  background: rgba(30,30,30,0.9);
  border-radius: 2px;
}

.header {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.item {
  font-size: .9rem;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

.item:not(:last-child) {
  margin-bottom: 5px;
}

.marker {
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 20px;
}

.value {
  flex-grow: 1;
  text-align: right;
}

hr {
  margin: 15px 0;
  height: 1px;
  background: rgba(255,255,255,0.2);
  border: none;
}