Fl0pZz

D3 Based Real Time Chart with Multiple Streams

The real time chart is a resuable Javascript component that accepts real time data. The purpose is to show the arrival time of real time events (or lack thereof), piped to the browser (for example via Websockets). Various attributes of each event can be articulated using size, color and opacity of the object generated for the event.

The component allows multiple asynchronous data streams to be viewed, each in a horizontal band across the SVG. New data streams can be added dynamically (as they are discovered by the caller over time), simply by calling the yDomain method with the new array of data series names. The chart will automatically fit the new data series into the available space in the SVG.

The chart's time domain is moving with the passage of time. That means that any data placed in the chart eventually will age out and leave the chart. Currently, the chart history is capped at five minutes (but can be changed by modifying the comp

Fl0pZz

// browser detect
var BrowserDetect = {
        init: function(userAgent, appVersion) {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(userAgent) || this.searchVersion(appVersion) || "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function(data) {
		for (var i = 0; i < data.length; i++) {
			var dataString = data[i].string;

Fl0pZz

import _ from 'lodash';
import { shallowMount } from '@vue/test-utils';

import PreorderDeadlineStep from '@/components/sell/steps/PreorderDeadlineStep.vue';
import WizardStep from '@/store/sell/wizardStep';

describe('PreorderDeadlineStep.vue', () => {
  global._ = _;

  let defaultWizardStepData;