package-lock.json

 {
   "name": "i4-js-commons",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

 {
   "name": "i4-js-commons",
-  "version": "3.9.7",
+  "version": "3.9.8",
   "description": "Just a load of common stuff for i4 front-ends and some probably usable in back-end as well",
   "dependencies": {
     "@material-ui/core": "^4.8.0",
@@ -66,8 +66,8 @@
   "scripts": {
     "docgen": "jsdoc2md src/* > docs/lib.md",
     "lint": "eslint --cache src",
-    "prettier": "prettier --ignore-path .gitignore --write --list-different \"**/*.{js,ts,md,json,yml}\"",
-    "prettier:check": "prettier --ignore-path .gitignore --check \"**/*.{js,ts,md,json,yml}\"",
+    "prettier": "prettier --ignore-path .gitignore --write --list-different \"**/*.{js,mjs}\"",
+    "prettier:check": "prettier --ignore-path .gitignore --check \"**/*.{js,mjs}\"",
     "build": "npx babel src -d dist",
     "test": "node --experimental-modules ./test"
   },

src/ui/Chart.js

@@ -2,6 +2,7 @@ import React, { useRef, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import ChartJS from 'chart.js';
 import * as R from 'ramda';
+import subSeconds from 'date-fns/fp/subSeconds';
 import { nilOrEmpty } from '../transforms';
 // import { generateString } from '../data-utils';
 
@@ -12,7 +13,9 @@ const propTypes = {
   options: PropTypes.objectOf(PropTypes.any),
   values: PropTypes.arrayOf(PropTypes.any),
   point: PropTypes.objectOf(PropTypes.any),
+  points: PropTypes.arrayOf(PropTypes.object),
   length: PropTypes.number,
+  ttl: PropTypes.number,
 };
 const defaultProps = {
   style: {},
@@ -21,7 +24,9 @@ const defaultProps = {
   type: 'line',
   options: {},
   point: {},
-  length: 10,
+  points: undefined,
+  length: undefined,
+  ttl: undefined,
 };
 
 const pointRadius = 1.3;
@@ -107,16 +112,26 @@ const adjustDatasetsToPayload = (datasets, payload) => {
   }
 };
 
-const pointIntoChart = R.curry((chart, length, point) => {
+const pointIntoChart = R.curry((chart, { length, ttl }, point) => {
   const x = point.x || point.ts || point.timestamp || point.time || new Date();
   const ys = point.payload || point.pl || point.data || [null];
   // Add or remove datasets depending on number of ys:
   adjustDatasetsToPayload(chart.data.datasets, ys);
   // Calculate if we should cut the tail
-  let remove = true;
-  const chronologic = nilOrEmpty(chart.data.labels) || x > chart.data.labels[0];
-  if (chronologic && chart.data.labels.length < length) remove = false;
-  // Add the new data point (to labels & datasets)
+  const chronologicStart = nilOrEmpty(chart.data.labels) || x > chart.data.labels[0];
+  // let remove = true;
+  let remove = 0;
+  if (ttl) {
+    remove = R.findIndex(R.lt(subSeconds(ttl)(x)))(chart.data.labels);
+    console.log('ttl present:', ttl, length, chart.data.labels);
+    console.log('Remove count:', remove);
+    chart.data.labels.splice(0, remove);
+  } else if (length) {
+    remove = 1;
+    if (chronologicStart && chart.data.labels.length < length) remove = 0;
+  }
+  // if (length && chronologicStart && chart.data.labels.length < length) remove = false;
+  // Add the new data point (to labels & datasets) and remove if necessary
   if (remove) chart.data.labels.shift();
   chart.data.labels.push(x);
   chart.data.datasets.forEach((ds, ix) => {
@@ -124,7 +139,8 @@ const pointIntoChart = R.curry((chart, length, point) => {
     // if (!R.is(Object, val) && !R.is(Number, val) && !R.isNil(val)) val = { data: val };
     // if (R.is(Object, val)) val.valueOf = () => 0;
     ds.data.push(val);
-    if (remove) ds.data.shift();
+    ds.data.splice(0, remove);
+    // if (remove) ds.data.shift();
   });
 });
 
@@ -148,6 +164,7 @@ export const Chart = ({
   points,
   length,
   values,
+  ttl,
   ...rest
 }) => {
   const canvasRef = useRef(null);
@@ -172,7 +189,7 @@ export const Chart = ({
   useEffect(() => {
     console.log('Chart update on points:', length, points);
     if (nilOrEmpty(points)) return;
-    R.map(pointIntoChart(chart.current, length))(points);
+    R.map(pointIntoChart(chart.current, { length, ttl }))(points);
     // console.log('Chart datasets:', chart.current.data.datasets);
     // console.log('Chart labels:', chart.current.data.labels);
     chart.current.update();
@@ -183,7 +200,7 @@ export const Chart = ({
     if (nilOrEmpty(point)) return;
     // if (Array.isArray(point)) {
     //   R.map(payloadIntoChart(chart.current, length))(payload);
-    pointIntoChart(chart.current, length, point);
+    pointIntoChart(chart.current, { length: length || 10, ttl }, point);
     // console.log('Chart datasets:', chart.current.data.datasets);
     // console.log('Chart labels:', chart.current.data.labels);
     chart.current.update();