Visualise changes over time

demo/index.html

@@ -21,6 +21,7 @@ <h1>BODS Data Visualisation Demo</h1>
         <button id="zoom_in">+</button>
         <button id="zoom_out">-</button>
       </div>
+      <div id="slider-container"></div>
       <div id="disclosure-widget"></div>
       <button id="download-svg">Download SVG</button>
       <button id="download-png">Download PNG</button>

demo/script-tag.html

@@ -22,6 +22,7 @@ <h1>BODS Data Visualisation Demo</h1>
         <button id="zoom_in">+</button>
         <button id="zoom_out">-</button>
       </div>
+      <div id="slider-container"></div>
       <div id="disclosure-widget"></div>
       <div class="info-container">
         <p><a href="https://github.com/openownership/visualisation-tool/blob/master/docs/spec.md#data-requirements">Data requirements</a></p>

src/index.js

@@ -17,7 +17,8 @@ import {
   createUnspecifiedNode,
 } from './render/renderD3';
 import { setupGraph, setEdges, setNodes } from './render/renderGraph';
-import { setupUI, renderMessage, renderProperties } from './render/renderUI';
+import { setupUI, renderMessage, renderProperties, renderDateSlider } from './render/renderUI';
+import { getDates } from './utils/bods.js';
 
 import './style.css';
 
@@ -37,6 +38,14 @@ const draw = ({
 
   defineArrowHeads(svg);
 
+  const version = data[0]?.publicationDetails?.bodsVersion || '0.4';
+
+  // TODO: detect dates in data
+  const dates = getDates(data);
+  // TODO: select data for vis; default to most recent
+  // TODO: add event listener to update data according to slider position
+  renderDateSlider(data, dates, version);
+
   // Extract the BODS data that is required for drawing the graph
   const { edges } = getEdges(data);
   const { nodes } = getNodes(data, edges);

src/model/edges/edges.js

@@ -205,7 +205,7 @@ export const getOwnershipEdges = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 export const getEdges = (data) => {

src/model/nodes/nodes.js

@@ -146,7 +146,7 @@ export const getPersonNodes = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 // This builds up the required entity object from the BODS data, using the functions above
@@ -214,7 +214,7 @@ export const getEntityNodes = (bodsData) => {
     };
   });
 
-  return latest(mappedData, closedRecords, version);
+  return mappedData;
 };
 
 export const setUnknownNode = (source) => unknownNode(source);

src/render/renderUI.js

@@ -1,3 +1,4 @@
+import { compareVersions } from 'compare-versions';
 import tippy, { hideAll } from 'tippy.js';
 import 'tippy.js/dist/tippy.css';
 import 'tippy.js/themes/light-border.css';
@@ -207,3 +208,39 @@ export const renderProperties = (inner, g, useTippy) => {
     });
   });
 };
+
+export const renderDateSlider = (data, dates, version) => {
+  const sliderContainer = document.querySelector('#slider-container');
+  if (compareVersions(version, '0.4') >= 0 && dates.length) {
+    sliderContainer.style.display = '';
+    sliderContainer.innerHTML = `
+      <input id="slider-input" type="range" min="${dates[0]}" max="${dates[1]}" value="${dates[1]}" list="markers" step="any"></input>
+      <datalist id="markers">
+      </datalist>
+      <p>Date: <output id="slider-value"></output></p>
+    `;
+    const datalist = document.querySelector('#markers');
+
+    for (let i = 0; i < dates.length - 1; i++) {
+      datalist.innerHTML += `
+        <option value="${dates[i]}"></option>
+      `;
+    }
+
+    const value = document.querySelector('#slider-value');
+    const input = document.querySelector('#slider-input');
+    value.textContent = input.value;
+    input.addEventListener('input', (event) => {
+      value.textContent = event.target.value;
+    });
+
+    // TODO: set slider steps to all dates values
+  } else if (compareVersions(version, '0.4') <= 0 && dates.length) {
+    sliderContainer.style.display = '';
+    sliderContainer.innerHTML = `
+      <input type="range" disabled min="0" max="1" value="1"></input>
+    `;
+  } else {
+    sliderContainer.style.display = 'none';
+  }
+};

src/utils/bods.js

@@ -1,5 +1,42 @@
 import { compareVersions } from 'compare-versions';
 export const closedRecords = new Set();
+export const changedRecords = new Set();
+
+export const getDates = (statements) => {
+  const uniqueDates = new Set();
+
+  for (const statement of statements) {
+    if (!uniqueDates.has(statement.statementDate)) {
+      uniqueDates.add(statement.statementDate);
+    }
+  }
+
+  const arr = Array.from(uniqueDates);
+  return arr.sort((a, b) => {
+    return a - b;
+  });
+};
+
+export const filteredData = (statements, version) => {
+  if (compareVersions(version, '0.4') >= 0) {
+    // get all statements with matching recordId and recordType values
+    const recordIdCount = {};
+
+    for (const statement of statements) {
+      const key = `${statement.recordId}-${statement.recordType}`;
+      recordIdCount[key] = (recordIdCount[key] || 0) + 1;
+    }
+
+    const duplicates = statements.filter((statement) => {
+      const key = `${statement.recordId}-${statement.recordType}`;
+      return recordIdCount[key] > 1;
+    });
+
+    console.log(duplicates);
+  } else {
+    // get all statements with statementID values in replacesStatements array
+  }
+};
 
 export const latest = (statements, closedRecords, version) => {
   if (compareVersions(version, '0.4') >= 0) {