<div class="container">
  <div class="card">
    <div class="head">
      <div class="mask">
        <div class="radial">
          <div class="radial-content">
            <div class="header">
              <button class="back">
                <i class="material-icons">arrow_back</i>
              </button>
              <span>Revenue Time</span>
            </div>
            <svg class="chart"></svg>
          </div>
        </div>
      </div>
    </div>
      <button class="action-button depth-1">
        <i class="material-icons">equalizer</i>
      </button>
    <div class="foot">
    </div>
  </div>
</div>

@card-height: 372px;
@card-width: 288px;
@head-height: 229px;
@foot-height: @card-height - @head-height;
@button-size: 48px;
@arc-radius: min(@card-height, @card-width) * 0.5;
@button-color: #2196F3;
body {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: 'Roboto', sans-serif;
}

.card {
  position: relative;
  border-radius: 2px;
  width: @card-width;
  height: @card-height;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.foot {
  border-radius: 0px 0px 2px 2px;
  height: @card-height - @head-height;
}

.head {
  border-radius: 2px 2px 0px 0px;
  background-color: #607D8B;
  height: @head-height;
}

button {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: none;
}

.action-button {
  position: absolute;
  right: 8px;
  top: @head-height - @button-size * 0.5;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: @button-size;
  height: @button-size;
  background-color: @button-color;
  i {
    font-size: 32px;
    color: white;
  }
}

button:focus,
button:active {
  outline: 0;
}

.mask {
  border-radius: inherit;
  overflow: hidden;
  position: absolute;
  width: @card-width;
  height: @head-height;
  background-color: rgba(0, 0, 0, 0);
}

.radial {
  background-color: @button-color;
  position: absolute;
  border-radius: 100%;
  transform: scale(0);
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart {
  margin: 8px;
}

.chart rect {
  fill: white;
  rx: 2px;
  ry: 2px;
}

.chart text {
  font: 10px sans-serif;
  fill: white;
}

.header {
  height: 50px;
  width: inherit;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  span {
    margin-left: 2.5em;
  }
}

.back {
  cursor: pointer;
  border-radius: 50%;
  height: 48px;
  width: 48px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

.radial-content {
  height: @head-height;
  width: @card-width;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  color: white;
}

.scale-up {
  transition: transform 300ms ease-out 250ms;
}

.scale-down {
  transition: transform 150ms ease-out;
}

.ascend {
  transition: transform 150ms ease-in-out 200ms, box-shadow 150ms ease-in-out 200ms;
}

.descend {
  transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

.depth-0 {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0px 0px 0px rgba(0, 0, 0, 0);
}

.depth-1 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

function animateRadialTransform($mask, $radial, reverse) {
  var radialSize = Math.max($mask.width(), $mask.height()) * 1.414;
  if (reverse) {
    $radial.removeClass('scale-up').addClass('scale-down')
      .one('transitionend', () => $mask.css({'z-index': '0'}));
  } else {
    $mask.css({'z-index': '2'});
    $radial.removeClass('scale-down').addClass('scale-up');
  }
  $radial.css({
    'top': ($mask.height() - radialSize) / 2,
    'left': ($mask.width() - radialSize) / 2,
    'width': radialSize,
    'height': radialSize,
    'transform': 'scale(' + (reverse ? 0 : 1) + ')'
  });
}

function translateButton ($button, $mask, reverse) {
  var start = center($button),
      end = center($mask),
      dx = start.x - end.x,
      dy = start.y - end.y;
  if (reverse) {
    $button.removeClass('descend depth-0')
      .addClass('ascend').addClass('depth-1');
    $button.css({'transform': 'translate(' + 0 + 'px, ' + 0 + 'px)'});
  } else {
    $button.removeClass('ascend depth-1')
      .addClass('descend').addClass('depth-0');
    $button.css({'transform': 'translate(' + -dy + 'px, ' + -dy + 'px)'});
  }
}

function hookActionButtonClick() {
  $('.action-button').click(function() {
    var $this = $(this),
      $mask = $('.mask'),
      $radial = $('.radial');
    translateButton($this, $mask);
    animateRadialTransform($mask, $radial);
  });
}

function hookBackButtonClick() {
  $('.back').click(() => {
    var $button = $('.action-button'),
      $mask = $('.mask'),
      $radial = $('.radial');
    animateRadialTransform($mask, $radial, true);
    translateButton($button, $mask, true);
  });
}

function center($elem) {
  let offset = $elem.offset();
  return {
    x: offset.left + 0.5 * $elem.width(),
    y: offset.top + 0.5 * $elem.height()
  };
}

function createChart() {
  var data = [18, 24, 30, 20, 28, 23, 32, 28],
    width = 200,
    height = 152,
    barWidth = width / data.length,
    y = d3.scaleLinear()
    .domain([0, d3.max(data)])
    .range([height, 0]),
    chart = d3.select('.chart')
    .attr('width', width)
    .attr('height', height),
    bar = chart.selectAll('g')
    .data(data)
    .enter().append('g')
    .attr('transform', (d, i) => 'translate(' + (i * barWidth + 4) + ', 0)');
  bar.append('rect')
    .attr('y', (d) => y(d))
    .attr('height', (d) => height - y(d))
    .attr('width', barWidth - 8);
}

$(document).ready(() => {
  createChart();
  hookActionButtonClick();
  hookBackButtonClick();
});