Controller Allocations
diff --git a/ui/stories/charts/gauge-chart.stories.js b/ui/stories/charts/gauge-chart.stories.js
new file mode 100644
index 00000000000..b902b3ba570
--- /dev/null
+++ b/ui/stories/charts/gauge-chart.stories.js
@@ -0,0 +1,115 @@
+import hbs from 'htmlbars-inline-precompile';
+import DelayedArray from '../utils/delayed-array';
+import DelayedTruth from '../utils/delayed-truth';
+
+export default {
+ title: 'Charts|Gauge Chart',
+};
+
+let totalVariations = [
+ { value: 0, total: 10 },
+ { value: 1, total: 10 },
+ { value: 2, total: 10 },
+ { value: 3, total: 10 },
+ { value: 4, total: 10 },
+ { value: 5, total: 10 },
+ { value: 6, total: 10 },
+ { value: 7, total: 10 },
+ { value: 8, total: 10 },
+ { value: 9, total: 10 },
+ { value: 10, total: 10 },
+];
+
+let complementVariations = [
+ { value: 0, complement: 10 },
+ { value: 1, complement: 9 },
+ { value: 2, complement: 8 },
+ { value: 3, complement: 7 },
+ { value: 4, complement: 6 },
+ { value: 5, complement: 5 },
+ { value: 6, complement: 4 },
+ { value: 7, complement: 3 },
+ { value: 8, complement: 2 },
+ { value: 9, complement: 1 },
+ { value: 10, complement: 0 },
+];
+
+let colorVariations = ['is-info', 'is-warning', 'is-success', 'is-danger'];
+
+export let Total = () => {
+ return {
+ template: hbs`
+
+ {{#each variations as |v|}}
+
+ {{gauge-chart value=v.value total=v.total label="Total" chartClass="is-info"}}
+
+ {{/each}}
+
+ `,
+ context: {
+ variations: DelayedArray.create(totalVariations),
+ },
+ };
+};
+
+export let Complement = () => {
+ return {
+ template: hbs`
+
+ {{#each variations as |v|}}
+
+ {{gauge-chart value=v.value complement=v.complement label="Complement" chartClass="is-info"}}
+
+ {{/each}}
+
+ `,
+ context: {
+ variations: DelayedArray.create(complementVariations),
+ },
+ };
+};
+
+export let Colors = () => {
+ return {
+ template: hbs`
+
+ {{#each variations as |color|}}
+
+ {{gauge-chart value=7 total=10 label=color chartClass=color}}
+
+ {{/each}}
+
+ `,
+ context: {
+ variations: DelayedArray.create(colorVariations),
+ },
+ };
+};
+
+export let Sizing = () => {
+ return {
+ template: hbs`
+ {{#if delayedTruth.complete}}
+
+
+ {{gauge-chart value=7 total=10 label="Small"}}
+
+
+ {{gauge-chart value=7 total=10 label="Regular"}}
+
+
+ {{gauge-chart value=7 total=10 label="Large"}}
+
+
+ {{gauge-chart value=7 total=10 label="X-Large"}}
+
+
+ {{/if}}
+
GaugeCharts fill the width of their container and have a dynamic height according to the height of the arc. However, the text within a gauge chart is fixed. This can create unsightly overlap or whitespace, so be careful about responsiveness when using this chart type.
+ `,
+ context: {
+ delayedTruth: DelayedTruth.create(),
+ },
+ };
+};
diff --git a/ui/tests/integration/gauge-chart-test.js b/ui/tests/integration/gauge-chart-test.js
new file mode 100644
index 00000000000..aa3ddd06a82
--- /dev/null
+++ b/ui/tests/integration/gauge-chart-test.js
@@ -0,0 +1,53 @@
+import { find, render } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import hbs from 'htmlbars-inline-precompile';
+import { create } from 'ember-cli-page-object';
+import gaugeChart from 'nomad-ui/tests/pages/components/gauge-chart';
+
+const GaugeChart = create(gaugeChart());
+
+module('Integration | Component | gauge chart', function(hooks) {
+ setupRenderingTest(hooks);
+
+ const commonProperties = () => ({
+ value: 5,
+ total: 10,
+ label: 'Gauge',
+ });
+
+ test('presents as an svg, a formatted percentage, and a label', async function(assert) {
+ const props = commonProperties();
+ this.setProperties(props);
+
+ await render(hbs`
+ {{gauge-chart
+ value=value
+ total=total
+ label=label}}
+ `);
+
+ assert.equal(GaugeChart.label, props.label);
+ assert.equal(GaugeChart.percentage, '50%');
+ assert.ok(GaugeChart.svgIsPresent);
+ });
+
+ test('the width of the chart is determined based on the container and the height is a function of the width', async function(assert) {
+ const props = commonProperties();
+ this.setProperties(props);
+
+ await render(hbs`
+
+ {{gauge-chart
+ value=value
+ total=total
+ label=label}}
+
+ `);
+
+ const svg = find('[data-test-gauge-svg]');
+
+ assert.equal(window.getComputedStyle(svg).width, '100px');
+ assert.equal(svg.getAttribute('height'), 50);
+ });
+});
diff --git a/ui/tests/pages/components/gauge-chart.js b/ui/tests/pages/components/gauge-chart.js
new file mode 100644
index 00000000000..04b59287c18
--- /dev/null
+++ b/ui/tests/pages/components/gauge-chart.js
@@ -0,0 +1,9 @@
+import { isPresent, text } from 'ember-cli-page-object';
+
+export default scope => ({
+ scope,
+
+ svgIsPresent: isPresent('[data-test-gauge-svg]'),
+ label: text('[data-test-label]'),
+ percentage: text('[data-test-percentage]'),
+});
diff --git a/ui/tests/unit/components/gauge-chart-test.js b/ui/tests/unit/components/gauge-chart-test.js
new file mode 100644
index 00000000000..771da46a114
--- /dev/null
+++ b/ui/tests/unit/components/gauge-chart-test.js
@@ -0,0 +1,27 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Component | gauge-chart', function(hooks) {
+ setupTest(hooks);
+
+ hooks.beforeEach(function() {
+ this.subject = this.owner.factoryFor('component:gauge-chart');
+ });
+
+ test('percent is a function of value and total OR complement', function(assert) {
+ const chart = this.subject.create();
+ chart.setProperties({
+ value: 5,
+ total: 10,
+ });
+
+ assert.equal(chart.percent, 0.5);
+
+ chart.setProperties({
+ total: null,
+ complement: 15,
+ });
+
+ assert.equal(chart.percent, 0.25);
+ });
+});