let chart; let timebar; function timeElapsed(stepMessage, startTime){ console.log(stepMessage + ' - Time elapsed: ' + (new Date().getTime() - startTime) + ' ms'); }; function clickHandler({ id }) { if (chart.getItem(id)) { const neighbours = chart.graph().neighbours(id).nodes; chart.foreground(node => node.id === id || neighbours.includes(node.id)); updateTimebarRx(id); } else { chart.foreground(node => true); } console.log(`You clicked on ${id}`); } const chartData = { type: 'LinkChart', items: [ { type: 'node', id: 'sale', u: 'icons/data-transfer-horizontal.svg', t: 'Sale', fbc:'#2D383F'}, { type: 'node', id: 'visit', u: 'icons/network-browser.svg', t: 'Visit', fbc:'#2D383F' }, { type: 'node', id: 'spot', u: 'icons/signal-antenna-2.svg', t: 'Spot', fbc:'#2D383F' }, { type: 'node', id: 'keyword', u: 'icons/type-cursor-1.svg', t: 'Keyword', fbc:'#2D383F' } ] }; const timebarData = { items: [ { id: '8723', dt: [1627016400000,1627016400000,1627016400000], d: {type:'sale'} }, { id: '8723', dt: [1627020000000,1626998400000], d: {type:'purchase'}, v: [2,1] }, { id: '8723', dt: [1627020000000], d: {type:'deposit'}, v: [2] } ] }; const initialTimeBarData = { items: [] }; const timebarOptions = { histogram:{colour:'green'}, controlBarTheme:'dark', backColour:'#2D383F', groups: { groupBy:'type', categories: ['sale','purchase','deposit'], colours: ['red','yellow','blue'] } } window.onload = () => { KeyLines.promisify(); KeyLines.create({container: 'chart', type : 'chart'}).then((loadedChart) => { chart = loadedChart; chart.load(chartData); chart.layout('organic', {mode: 'adaptive', animate: false}); chart.on('click', clickHandler); chart.options({watermark: { a: 'middle', fb: true, fs: 84, fc: '#374147', t: 'BDS Lab' }, controlTheme:'dark', backColour: '#2D383F'}) }); KeyLines.create({ container: 'timebar', type: 'timebar' }).then((loadedTimebar) => { timebar = loadedTimebar; timebar.options(timebarOptions); timebar.load(initialTimeBarData); timebar.zoom('fit', { animate: false }); timebar.on('click', clickHandler); }); }; function updateTimebar(entity) { start = new Date().getTime(); readTimebarData(entity) .then((entity) => { timeElapsed('Data consumed after: ', start); timebar.load(entity).then(timeElapsed('Timebar loaded after: ', start)); console.log(entity); timebar.zoom('fit', { animate: false }); }) } async function updateTimebarRx(entity) { timebar.clear(); readTimebarDataReactive(entity,timebar); }