Pie Timeline

by kelvinau

HTML

<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<body>
  <div id="main" style="width: 1000px;height:600px;"></div>
  <div id="affected-endpoints">
    <div id="header">
    </div>
    <div id="list">
      <div class="ep-container">
        <div class="avatar">
          <img src="https://i.pinimg.com/736x/4c/81/66/4c81665401dc11c53cf8b85c25b35049--lemon-top-a-real-man.jpg">
        </div>
        <div class="ip">
          172.18.37.120
        </div>
      </div>

    </div>
  </div>
</body>

SCSS

#main {
  border: 1px solid #ddd;
}

#affected-endpoints {
  position: absolute;
  top: 150px;
  left: 650px;
}

.avatar img {
  width: 30px;
}

#header {
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}

.ep-container {
  display: flex;
  .ip {
    margin-top: 5px;
    margin-left: 5px;
  }
}

JavaScript

Array.prototype.rotate = (function() {
  var unshift = Array.prototype.unshift,
    splice = Array.prototype.splice;

  return function(count) {
    var len = this.length >>> 0,
      count = count >> 0;

    unshift.apply(this, splice.call(this, count % len, len));
    return this;
  };
})();

var ENDPOINTS = [{
    icon: 'https://i.pinimg.com/736x/4c/81/66/4c81665401dc11c53cf8b85c25b35049--lemon-top-a-real-man.jpg',
    ip: '172.18.37.120',
  },
  {
    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlQKa2jdI5RMs0Le2mfYlgTC-p22RVd1jJ2L-kXIACnI19wJp8kQ',
    ip: '172.18.37.121',
  },
  {
    icon: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQELqsxCsW4ti-9Oe49YpAAsD7JT4gSCEn35Mwhqu-aIfACzlDL',
    ip: '172.18.37.122',
  },
  {
    icon: 'https://beastwatchnews.com/wp-content/uploads/2018/04/icon.png',
    ip: '10.2.13.3',
  },
  {
    icon: 'https://i2.wp.com/www.afflittolawoffices.com/wp-content/uploads/bb-plugin/cache/police-officer-avatar-icon-01--1024x681-square.jpg?w=688',
    ip: '192.195.93.1'
  }
];
var MAX_NUM_OF_ACT = 9;
var myChart = echarts.init(document.getElementById('main'));

var timeline = [{
    year: 2016,
    activities: [
      'TeslaCrypt',
      'Bandar Chor',
      'Job Cryptor',
      'Simplocker'
    ]
  },
  {
    year: 2017,
    activities: [
      'Cryptolocker2015',
      'Pacman',
      'Ginx',
      'Pclock',
      'Troldesh',
      'Threat Finder',
      'Encryptor RaaS',
      'LockDroid',
    ]
  },
]

var i = 10;
var data = timeline.reduce(function(timelineAcc, yearData) {
  return yearData.activities.reduce(function(acc, act) {
    acc.push({
      name: act,
      date: 'Oct ' + i + ', ' + yearData.year,
    });
    i++;
    return acc;
  }, timelineAcc);
}, []);

data = data.map(function(item) {
  item.label = {
    formatter: '{b}\n' + item.date
  }
  return item;
});
// Not a good approach
var affectedIndex = [0, 2, 4, 5, 6, 7, 10];
for (var i = 0; i < affectedIndex.length; i++)...