<script>
import { readable, derived } from 'svelte/store';
const getTime = () => new Date().toLocaleTimeString();
const getValue = () => Math.floor(Math.random() * 10);
const datastream = readable(null, set => {
const interval = setInterval(() => set({time: getTime(), value: getValue()}), 1000);
return function stop() {
clearInterval(interval);
};
});
const lastN = 5;
let _plotData = [];
// batch data
const lastNData = derived(datastream, $datastream => {
if ($datastream) {
_plotData.push($datastream);
if (_plotData.length > lastN) _plotData.shift();
}
return _plotData;
});
</script>
<div class='my-chart'>
{#each $lastNData as item}
<li>{item.time} - {item.value}</li>
{/each}
</div>