Accounts stats timeline small data

bgv

by b_g_v

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<div id="container"></div>

<script type="application/json" id="data">
[
  {
    "name": "Group-1 items: 120",
    "login": "nikkei_OPINION",
    "start": 1701410402000,
    "end": 1701417602000,
    "pdate": "2023-12-01 06:00:02",
    "pday": "2023-12-01",
    "startDay": 1701388800000
  },
  {
    "name": "Group-1 items: 120",
    "login": "Dldw42",
    "start": 1701418919000,
    "end": 1701426119000,
    "pdate": "2023-12-01 08:21:59",
    "pday": "2023-12-01",
    "startDay": 1701388800000
  },
  {
    "name": "Group-1 items: 120",
    "login": "KanadeAkiyoshi",
    "start": 1701453991000,
    "end": 1701461191000,
    "pdate": "2023-12-01 18:06:31",
    "pday": "2023-12-01",
    "startDay": 1701388800000
  },
  {
    "name": "Group-1 items: 120",
    "login": "I3rYdgf5z2xtzcP",
    "start": 1701465099000,
    "end": 1701472299000,
    "pdate": "2023-12-01 21:11:39",
    "pday": "2023-12-01",
    "startDay": 1701388800000
  },
  {
    "name": "Group-1 items: 120",
    "login": "SnowRudolph",
    "start": 1701478642000,
    "end": 1701485842000,
    "pdate": "2023-12-02 00:57:22",
    "pday": "2023-12-02",
    "startDay": 1701475200000
  },
  {
    "name": "Group-1 items: 120",
    "login": "newssharing1",
    "start": 1701497097000,
    "end": 1701504297000,
    "pdate": "2023-12-02 06:04:57",
    "pday": "2023-12-02",
    "startDay": 1701475200000
  },
  {
    "name": "Group-1 items: 120",
    "login": "MorionMagu",
    "start": 1701504844000,
    "end": 1701512044000,
    "pdate": "2023-12-02 08:14:04",
    "pday": "2023-12-02",
    "startDay": 1701475200000
  },
  {
    "name": "Group-1 items: 120",
    "login":...

CSS

.events-chart{
  width: 100%;
  overflow: scroll;
  border: 0px solid red;
}
#container,#button-container {
    width: 1400px;
    margin: 0;
    border: 0px solid green;
}
text{
  font-size: 0.5em!important;
}
noImg{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==);
}
.highcharts-label-icon {
    opacity: 0.5;
}
.highcharts-figure{
  margin: 0;
}
.highcharts-treegrid-node-level-1 {
  left: 15px!important;
}
.positive {
  color:green;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.negative {
  color:red;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.neutral {
  color:gray;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.similarityIcon {
  background-color: #e1d8fa;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.digestRankIcon {
  background-color: orange;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.trackedIcon {
  background-color: #80FF80;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}

JavaScript

const title = 'Accounts timeline all data unfiltered window size 1 day';
const dataSource = 2;
var url = 'https://events-api.test.grasp.hce-project.com/?request={%22type%22:0,%22from%22:%222023-12-20%22,%22to%22:%222023-12-22%22,%22threshold%22:0.25,%22events_include_bits_mask%22:7,%22filter%22:{%22mode%22:1,%22min_tracked_events%22:3,%22same_date_tracks%22:0},"extend_events_time":1,"@search":{"q":"japan"},"group":{"threshold":0.4,"min":2},"debug":1,"chart":{"pointWidth":{"mode":0,"default":41},"pointColor":{"mode":0},"pointColorSaturation":{"mode":1,"tag":"similarity","min":0.5}}}';

url = 'http://127.0.0.1/aadmin/users/hce/projects/ukr_refugee_01-fact-checking_02a/data/processors/accounts-1_accounts_chart_hichchart_gantt_timeline3.json';


(async () => {
  var dataJson = null;

  if(dataSource == 0){
	  const user = 'hce', passwd = 'events12345';
		const headers = new Headers({
      'Authorization': `Basic ${btoa(user + ':' + passwd)}`,
      'Origin':'https://jsfiddle.net'
    });
    var options = {headers: headers, credentials: "include"};
    dataJson = await fetch(url, options).then(response => response.json());
  }else if(dataSource == 1){
    dataJson = await fetch(url).then(response => response.json());
  }else{
    var dataTag = document.getElementById('data').innerHTML;
    dataJson = JSON.parse(dataTag);
  }

  //dataJson = dataJson['data']['events'];
  drawChart(dataJson);

})();


function drawChart(dataJson){
  Highcharts.ganttChart('container', {
      time: {
          timezone: 'UTC',
      },
      navigator: {
        series:{
            data:[]
        },
        top: 10,
        enabled: true,
        adaptToUpdatedData: true,
        xAxis: {
            currentDateIndicator: {
                color: '#39FF14',
                dashStyle: "ShortDash",
                label: {
                    format: "%d %b %Y"
                },
            },
        },
      },
      chart: {
        marginTop: 180,
      	zoomType: 'x',
       ...