Add current time component

elements/time.js

@@ -0,0 +1,43 @@
+import { withComponent, props } from 'skatejs';
+import dateformat from 'dateformat';
+
+const Component = withComponent();
+class Time extends Component {
+  static props = {
+    format: props.string,
+    time: props.number,
+    interval: props.number,
+  };
+
+  connected() {
+    if (!this.time) {
+      this.time = Date.now();
+    }
+    console.log(this.time, this.interval);
+    if (!this.interval) {
+      return;
+    }
+    this.runInterval = window.setInterval(() => {
+      this.time = Date.now();
+    }, this.interval * 1000);
+  }
+
+  disconnecting() {
+    if (this.runInterval) {
+      window.clearInterval(this.runInterval);
+      delete this.runInterval;
+    }
+  }
+
+  renderer(renderRoot, render) {
+    const root = renderRoot;
+    root.innerHTML = render();
+  }
+
+  render({ time, format }) {
+    let useFormat = format || 'ddd ddS HH:MM:ss';
+    return dateformat(new Date(time), useFormat);
+  }
+}
+
+customElements.define('cbase-time', Time);

index.js

@@ -1,9 +1,11 @@
+import currentstate from './elements/currentstate';
 import heatmap from './elements/heatmap';
 import polar from './elements/polar';
-import currentstate from './elements/currentstate';
+import time from './elements/time';
 
 export default {
+  currentstate,
   heatmap,
   polar,
-  currentstate,
+  time,
 };

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^1.0.19",
     "d3": "^4.12.0",
+    "dateformat": "^3.0.2",
     "msgflo-browser": "^0.2.0",
     "plotly.js": "^1.31.2",
     "skatejs": "^5.0.0-beta.4"