This component based on EventDrops is a quick PoC to add timeline functionality to the UI3. I'm not planning to support it, fell free to adopt it.

1. Run npm install (tested with Node v12)
2. Run npm start
3. Open https://localhost:8080/ the UI will auto refresh as you change the code

Note: The bar is rendered quite low to give space for tooltips, if you don't see it, maximize browser window. After you are done build with: ./node_modules/.bin/rollup -c and copy /dist/* files to /ui3/timeline/ on fork UI3 to test in BI.

Update *.json files with your Blue Iris JSON API responses (alertlist:confirmed, cliplist:new, cliplist:stored) Update URL in demo.js https://10.10.10.105:81 to point to your BI

EventDrops is a time based / event series interactive visualization tool powered by D3.js.

If you want to pan and zoom on previous data on your own, here is the demo.

EventDrops is provided as an npm package. Grab it using the tool of your choice:

yarn add event-drops
npm install --save event-drops

Note you don't need this step if you don't use any module bundler.

Since version 1.0, event-drops follows semantic versionning. Hence, we recommend checking your package.json file and ensure that event-drops version is preceded by a carret:

{
    "event-drops": "^1.0.0"
}

This way, you'll get all bug fixes and non breaking new features.

If you don't use any module bundler such as Webpack, we recommend using EventDrop script available on unpkg.com. Grabbing last versions of the library is as simple as:

<link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />

<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/event-drops"></script>

Then, the code is similar to the one with module bundler (see next paragraph), except you are not forced to specify D3 configuration parameter.

If you use a module bundler, you can import EventDrops the following way:

import * as d3 from 'd3/build/d3';

import eventDrops from 'event-drops';

const chart = eventDrops({ d3 });

const repositoriesData = [
    {
        name: 'admin-on-rest',
        data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],
    },
    {
        name: 'event-drops',
        data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],
    },
    {
        name: 'sedy',
        data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],
    },
];

d3
    .select('#eventdrops-demo')
    .data([repositoriesData])
    .call(chart);

You can either use D3 as a specific import (specifying it in first argument of eventDrops call), or use the global one. By default, it fallbacks to a global defined d3.

eventDrops function takes as a single argument a configuration object, detailed in the:

Configuration Reference

In addition to this configuration object, it also exposes some public members allowing you to customize your application based on filtered data:

• scale() provides the horizontal scale, allowing you to retrieve bounding dates thanks to .scale().domain(),
• filteredData() returns an object with both data and fullData keys containing respectively bounds filtered data and full dataset.
• draw(config, scale) redraws chart using given configuration and d3.scaleTime scale
• destroy() execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.
• currentBreakpointLabel returns current breakpoint (for instance small) among a list of breakpoints.

Hence, if you want to display number of displayed data and time bounds as in the demo, you can use the following code:

const updateCommitsInformation = chart => {
    const filteredData = chart
        .filteredData()
        .reduce((total, repo) => total.concat(repo.data), []);

    numberCommitsContainer.textContent = filteredData.length;
    zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
    zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};

If you want to contribute to EventDrops, first, thank you!

To launch the project locally, grab this repository, install its dependencies, and launch the demo:

git clone [email protected]:marmelab/EventDrops.git
cd EventDrops
make install
make run

Demo will then be available on https://localhost:8080. Source files are watched automatically. Changing one file would automagically reload your browser.

When you are satisfied with your changes, ensure you didn't break anything launching tests:

make test

Finally, if everything is fine, you can then create a pull request.

Feel free to ask some help on GitHub issue tracker. The core team would be glad to help you to contribute.

EventDrops is released under the MIT License, courtesy of marmelab and Canal Plus. It means you can use this tool without any restrictions.