<!-- Animates the numbers, add classes "odometer odometer-theme-default" and id "odometer"
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<link rel="stylesheet" href="odometer-theme-default.css" />
-->

<div class="frame">
  <div class="card">
    <div class="header">
      <span class="title big">Weekly report</span>
      <span class="date small">01. Feb - 07. Feb</span>
      <span class="type small">Revenue</span>
      <span class="value">3621.79</span>
    </div>
    <div class="clearfix"></div>
    <div class="parameter">
      <span class="red">Views</span>
      <span class="blue">Purchases</span>
    </div>
    <div class="statistic">
      <div class="line-1"></div>
      <div class="line-2"></div>
      <div class="line-3"></div>
      <div class="data red">
        <svg>
          <polyline points="9,46 50,12 90,23 130,11 171,38 211,48 251,19"></polyline>    
        </svg>
        <div class="points">
          <div class="point-1">
            <div class="tooltip">458</div>
          </div>
          <div class="point-2">
            <div class="tooltip">812</div>
          </div>
          <div class="point-3">
            <div class="tooltip">746</div>
          </div>
          <div class="point-4">
            <div class="tooltip">877</div>
          </div>
          <div class="point-5">
            <div class="tooltip">517</div>
          </div>
          <div class="point-6">
            <div class="tooltip">434</div>
          </div>
          <div class="point-7">
            <div class="tooltip">458</div>
          </div>
        </div>
      </div>
      <div class="data blue">
        <svg>
          <polyline points="9,61 50,50 90,65 130,55 171,61 211,74 251,64"></polyline>    
        </svg>
        <div class="points">
          <div class="point-1">
            <div class="tooltip">26</div>
          </div>
          <div class="point-2">
            <div class="tooltip">41</div>
          </div>
          <div class="point-3">
            <div class="tooltip">22</div>
          </div>
          <div class="point-4">
            <div class="tooltip">36</div>
          </div>
          <div class="point-5">
            <div class="tooltip">25</div>
          </div>
          <div class="point-6">
            <div class="tooltip">13</div>
          </div>
          <div class="point-7">
            <div class="tooltip">20</div>
          </div>
        </div>
      </div>
    </div>
    <div class="days">
      <span class="day">Mon</span>
      <span class="day">Tue</span>
      <span class="day">Wed</span>
      <span class="day">Thu</span>
      <span class="day">Fri</span>
      <span class="day">Sat</span>
      <span class="day">Sun</span>
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Satisfy|Zilla+Slab');

$red:  #643a7a;
$blue: #547496;
$main-color: #643a7a;

body {
  background: $main-color;
}
.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: .5rem .5rem 1rem rgba(0,0,0,0.6);
  background: #201c29;
  font-family: 'Zilla Slab', serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.card {
  position: absolute;
  top: 90px;
  left: 60px;
  height: 220px;
  width: 280px;
  background: #fff;
  border-radius: 5px;
  box-shadow: .5rem .5rem 1rem rgba(0,0,0,0.6);
  overflow: hidden;

  .header {
    position: relative;
    height: 60px;
    width: 100%;
    background: $main-color;
    color: #fff;

    .big {
      position: absolute;
      font-family: Satisfy, fantasy;
      font-size: 1.5rem;
    }

    .small {
      position: absolute;
      font-size: 1rem;
    }

    .title {
      top: 12px;
      left: 15px;
    }

    .date {
      top: 2.5rem;
      left: 15px;
    }

    .type {
      top: 14px;
      right: 15px;
    }

    .value {
      position: absolute;
      font-size: 1.5rem;
      top: 2rem;
      right: 15px;
    }
  }

  .parameter {
    text-align: right;
    padding: 10px 0 14px 0;
    span {
      position: relative;
      font-size: .85rem;
      color: #606060;
      line-height: 13px;
      padding: 0 10px 0 25px;
    }
    span:before {
      position: absolute;
      left: 6px;
      top: 6px;
      display: block;
      content: '';
      width: 11px;
      height: 4px;
      border-radius: 3px;
    }

    .red:before {
      background: $main-color;
    }

    .blue:before {
      background: $blue;
    }
  }

  .statistic {
    position: relative;
    height: 81px;
    width: 260px;
    margin: 0 auto;
    .line-1 {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 2px; 
      background: fade-out(pink, .7); 
    }
    .line-2 {
      @extend .line-1;
      top: 40px;
    }

    .line-3 {
      @extend .line-1;
      top: inherit;
      bottom: 0;
    }

    .data {
      svg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        stroke-dasharray: 1000;
        stroke-dashoffset: 1000;
        animation: 4s dash .5s linear forwards;
      }
      @keyframes dash {
        to {
          stroke-dashoffset: 0;
        }
      }
      polyline {
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
      }
      &.red polyline {
        stroke: $main-color;
      }

      &.blue polyline {
        stroke: $blue;
      }

      .tooltip {
        position: absolute;
        bottom: 13px;
        left: 50%;
        transform: translate3d(-50%, 10px, 0);
        font-weight: 600;
        font-size: 11px;
        line-height: 11px;
        color: #fff;
        padding: 8px 6px;
        border-radius: 3px;
        visibility: hidden;
        opacity: 0;
        transition: transform 0.4s ease-out 0s, opacity 0.4s ease-out 0s;

        &:after {
          position: absolute;
          display: block;
          content: '';
          height: 6px;
          width: 6px;
          left: 50%;
          margin-left: -3px;
          bottom: -3px;
          transform: rotate(45deg);
        }
      }

      [class^="point-"] {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 3px;
        cursor: pointer;
        z-index: 10;

        &:hover .tooltip {
          visibility: visible;
          opacity: 1;
          transform: translate3d(-50%, 0, 0);
        }
      }

      &.red {

        [class^="point-"], .tooltip, .tooltip:after {
          background: $main-color;
        }

        .point-1 { left: 7px; top: 43px; }
        .point-2 { left: 48px; top: 9px; }
        .point-3 { left: 88px; top: 20px; }
        .point-4 { left: 128px; top: 8px; }
        .point-5 { left: 169px; top: 35px; }
        .point-6 { left: 209px; top: 45px; }
        .point-7 { left: 249px; top: 16px; }

      }

      &.blue {

        [class^="point-"], .tooltip, .tooltip:after {
          background: $blue;
        }

        .point-1 { left: 7px; top: 58px; }
        .point-2 { left: 48px; top: 47px; }
        .point-3 { left: 88px; top: 62px; }
        .point-4 { left: 128px; top: 52px; }
        .point-5 { left: 169px; top: 58px; }
        .point-6 { left: 209px; top: 71px; }
        .point-7 { left: 249px; top: 61px; }

      }

    }

  }

  .days {
    width: 280px;
    margin: 0 auto;

    .day {
      display: block;
      float: left;
      width: (100% / 7);
      font-size: 9px;
      color: #949494;
      line-height: 30px;
      text-transform: uppercase;
      text-align: center;
    }
  }
}

// jQuery v3.3.1 is supported
/* setTimeout( function(){
    odometer.innerHTML = 3621.79;
}, 1);
*/