docs

Hubble Enterprise Web Dashboard

This web application is built as a Jekyll site and is intended to be hosted using GitHub Pages.

Charts

Each .html page in this directory contains one or more charts. Charts are dynamically created by charts.js from <div class="chart-placeholder"> placeholders.

Structure

Charts generally have the following structure:

<div class="chart-placeholder">
	<h3>Title</h3>
	<canvas
		data-url="{{ site.dataURL }}/chart-data.tsv"
		data-type="history"
		data-config='{...}'
		></canvas>
	<div class="info-box">
		<p>
			Description of the chart.
		</p>
	</div>
</div>

• <h3>: the title of the chart (required)
• <canvas>: used to configure regular charts; change the tag to <table> for tables and <svg> for chord charts
  • data-url: the URL to the .tsv file that shall be rendered by the chart (generated by the updater)
  • data-type: the chart type, supported types are:
    • history: time series charts for tracking metrics over time
    • list: horizontal bar charts for general numeric data
    • table: tables directly rendered from the TSV source
    • chord: chord diagrams used to visualize connections between entities
  • data-config: chart-type-specific configuration options (see option list below)
• <div class="info-box">: zero or more info boxes with descriptive texts

For details on how each kind of chart is rendered, take a look at charts.js.

Configuration Options

History Charts

option	values	description
series	array of strings	only include these data series and drop all others (referenced by TSV table headings)
visibleSeries	array of strings	only show the listed data series and hide all others initially (referenced by TSV table headings)
slice	array [t0, t1]	slice the data from the TSV file as if data.slice(t0, t1) was called
aggregate	dictionary (see below)	defines how data should be aggregated (default: undefined, which leaves the data untouched)
aggregate.period	week, month	specifies the range over which the data shall be aggregated
aggregate.method	sum, mean, min, max, first, last, median	specifies the aggregation method; first and last select the chronologically first or last data point present in each period, respectively
showRawDataLink	true, false	show the link to download the chart’s raw data (default: true)

List Charts

option	values	description
stacked	true, false	render the data series as stacked bars instead of showing multiple bars per row

Development

To run the site locally, install Jekyll. Then, change the _config.yml file and set the dataURL to http://127.0.0.1:4000/demo-data. Finally, run jekyll serve and load http://127.0.0.1:4000 in your browser.

Tests

This web application uses Karma as a test runner (a way to run JavaScript in different browser contexts) and Jasmine as the testing and assertion library. The tests are implemented as .js files inside the spec/ folder and mirror the filenames of JavaScript source files.

Requirements

• Install a recent version of node.js.
• Install a recent version of Google Chrome, a headless instance of which is used to run the tests.
• Install any needed dependencies by running npm install from this folder.

Running the Tests

To run the tests and linter:

npm test

To run just the unit tests once:

npm run unit-test

During local development, it may be nice to keep the test runner running in the background as one makes changes to the JavaScript source files (under assets/js/) or the test files (under spec/) so as to get immediate feedback. This mode will rerun the tests every time a source or test file changes. To run in this mode:

npm run unit-test -- --no-single-run --auto-watch

Linting JavaScript

This project has formalized a JavaScript style using ESLint. To run the linter, ensure you have dependencies installed via npm install, then run:

npm run lint

ESLint allows for cascading rules to be in place, which this project leverages:

• There is one global ESLint config defined in .eslintrc.json, where we house the main stylistic rules.
• We also have a browser-context-specific config defined in assets/js/.eslintrc.json.
• Finally, we have a test-context-specific config defined in spec/.eslintrc.json.

.eslintignore defines what directories and files should not be linted.