Feat: Progress Elements

x-pack/plugins/canvas/canvas_plugin_src/elements/horizontal_progress_bar/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { openSans } from '../../../common/lib/fonts';
+import header from './header.png';
+
+export const horizontalProgressBar = () => ({
+  name: 'horizontalProgressBar',
+  displayName: 'Horizontal Progress Bar',
+  help: 'Displays progress as a portion of a horizontal bar',
+  width: 200,
+  height: 50,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="horizontalBar" label={formatnumber 0%} font={font size=24 family="${
+    openSans.value
+  }" color="#000000" align=center}
+| render`,
+});

x-pack/plugins/canvas/canvas_plugin_src/elements/index.js

@@ -11,18 +11,22 @@ import { donut } from './donut';
 import { dropdownFilter } from './dropdown_filter';
 import { image } from './image';
 import { horizontalBarChart } from './horiz_bar_chart';
+import { horizontalProgressBar } from './horizontal_progress_bar';
 import { lineChart } from './line_chart';
 import { markdown } from './markdown';
 import { metric } from './metric';
 import { pie } from './pie';
 import { plot } from './plot';
+import { progressGauge } from './progress_gauge';
+import { progressWheel } from './progress_wheel';
 import { repeatImage } from './repeatImage';
 import { revealImage } from './revealImage';
 import { shape } from './shape';
 import { table } from './table';
 import { tiltedPie } from './tilted_pie';
 import { timeFilter } from './time_filter';
 import { verticalBarChart } from './vert_bar_chart';
+import { verticalProgressBar } from './vertical_progress_bar';
 
 export const elementSpecs = [
   areaChart,
@@ -32,16 +36,20 @@ export const elementSpecs = [
   dropdownFilter,
   image,
   horizontalBarChart,
+  horizontalProgressBar,
   lineChart,
   markdown,
   metric,
   pie,
   plot,
+  progressGauge,
+  progressWheel,
   repeatImage,
   revealImage,
   shape,
   table,
   tiltedPie,
   timeFilter,
   verticalBarChart,
+  verticalProgressBar,
 ];

x-pack/plugins/canvas/canvas_plugin_src/elements/progress_gauge/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { openSans } from '../../../common/lib/fonts';
+import header from './header.png';
+
+export const progressGauge = () => ({
+  name: 'progressGauge',
+  displayName: 'Progress Gauge',
+  help: 'Displays progress as a portion of a gauge',
+  width: 200,
+  height: 200,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="gauge" label={formatnumber 0%} font={font size=24 family="${
+    openSans.value
+  }" color="#000000" align=center}
+| render`,
+});

x-pack/plugins/canvas/canvas_plugin_src/elements/progress_wheel/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { openSans } from '../../../common/lib/fonts';
+import header from './header.png';
+
+export const progressWheel = () => ({
+  name: 'progressWheel',
+  displayName: 'Progress Wheel',
+  help: 'Displays progress as a portion of a wheel',
+  width: 200,
+  height: 200,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="wheel" label={formatnumber 0%} font={font size=24 family="${
+    openSans.value
+  }" color="#000000" align=center}
+| render`,
+});

x-pack/plugins/canvas/canvas_plugin_src/elements/revealImage/index.js

@@ -13,7 +13,7 @@ export const revealImage = () => ({
   image: header,
   expression: `filters
 | demodata
-| math "sum(min(cost) / max(cost))"
+| math "mean(percent_uptime)"
 | revealImage origin=bottom image=null
 | render`,
 });

x-pack/plugins/canvas/canvas_plugin_src/elements/vertical_progress_bar/index.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { openSans } from '../../../common/lib/fonts';
+import header from './header.png';
+
+export const verticalProgressBar = () => ({
+  name: 'verticalProgressBar',
+  displayName: 'Vertical Progress Bar',
+  help: 'Displays progress as a portion of a vertical bar',
+  width: 50,
+  height: 200,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="verticalBar" label={formatnumber 0%} font={font size=24 family="${
+    openSans.value
+  }" color="#000000" align=center}
+| render`,
+});

x-pack/plugins/canvas/canvas_plugin_src/functions/common/__tests__/progress.js

@@ -0,0 +1,190 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import expect from 'expect.js';
+import { progress } from '../progress';
+import { functionWrapper } from '../../../../__tests__/helpers/function_wrapper';
+import { fontStyle } from './fixtures/test_styles';
+
+describe('progress', () => {
+  const fn = functionWrapper(progress);
+  const value = 0.33;
+
+  it('returns a render as progress', () => {
+    const result = fn(0.2);
+    expect(result)
+      .to.have.property('type', 'render')
+      .and.to.have.property('as', 'progress');
+  });
+
+  it('sets the progress to context', () => {
+    const result = fn(0.58);
+    expect(result.value).to.have.property('value', 0.58);
+  });
+
+  it(`throws when context is outside of the valid range`, () => {
+    expect(fn)
+      .withArgs(3)
+      .to.throwException(e => {
+        expect(e.message).to.be('Context must be between 0 and 1');
+      });
+  });
+
+  describe('args', () => {
+    describe('shape', () => {
+      it('sets the progress element shape', () => {
+        const result = fn(value, {
+          shape: 'wheel',
+        });
+        expect(result.value).to.have.property('shape', 'wheel');
+      });
+
+      it(`defaults to 'gauge'`, () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('shape', 'gauge');
+      });
+    });
+
+    describe('max', () => {
+      it('sets the maximum value', () => {
+        const result = fn(value, {
+          max: 2,
+        });
+        expect(result.value).to.have.property('max', 2);
+      });
+
+      it('defaults to 1', () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('max', 1);
+      });
+
+      it('throws if max <= 0', () => {
+        expect(fn)
+          .withArgs(value, { max: -0.5 })
+          .to.throwException(e => {
+            expect(e.message).to.be(`'max' must be greater than 0`);
+          });
+      });
+    });
+
+    describe('valueColor', () => {
+      it('sets the color of the progress bar', () => {
+        const result = fn(value, {
+          valueColor: '#000000',
+        });
+        expect(result.value).to.have.property('valueColor', '#000000');
+      });
+
+      it(`defaults to '#1785b0'`, () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('valueColor', '#1785b0');
+      });
+    });
+
+    describe('barColor', () => {
+      it('sets the color of the background bar', () => {
+        const result = fn(value, {
+          barColor: '#FFFFFF',
+        });
+        expect(result.value).to.have.property('barColor', '#FFFFFF');
+      });
+
+      it(`defaults to '#f0f0f0'`, () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('barColor', '#f0f0f0');
+      });
+    });
+
+    describe('weight', () => {
+      it('sets the thickness of the bars', () => {
+        const result = fn(value, {
+          weight: 100,
+        });
+
+        expect(result.value).to.have.property('weight', 100);
+      });
+
+      it(`defaults to 20`, () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('weight', 20);
+      });
+    });
+
+    describe('label', () => {
+      it('sets the label of the progress', () => {
+        const result = fn(value, { label: 'foo' });
+
+        expect(result.value).to.have.property('label', 'foo');
+      });
+
+      it('hides the label if false', () => {
+        const result = fn(value, {
+          label: false,
+        });
+        expect(result.value).to.have.property('label', '');
+      });
+
+      it('defaults to true which sets the context as the label', () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('label', '0.33');
+      });
+    });
+
+    describe('labelPosition', () => {
+      it('sets the position of the label', () => {
+        let result = fn(value, { labelPosition: 'center' });
+        expect(result.value).to.have.property('labelPosition', 'center');
+
+        result = fn(value, { labelPosition: 'above' });
+        expect(result.value).to.have.property('labelPosition', 'above');
+
+        result = fn(value, { labelPosition: 'below' });
+        expect(result.value).to.have.property('labelPosition', 'below');
+
+        result = fn(value, { labelPosition: 'left' });
+        expect(result.value).to.have.property('labelPosition', 'left');
+
+        result = fn(value, { labelPosition: 'right' });
+        expect(result.value).to.have.property('labelPosition', 'right');
+      });
+
+      it(`defaults to 'center'`, () => {
+        const result = fn(value);
+        expect(result.value).to.have.property('labelPosition', 'center');
+      });
+
+      it('throws if given an invalid position', () => {
+        expect(fn)
+          .withArgs(value, { labelPosition: 'foo' })
+          .to.throwException(e => {
+            expect(e.message).to.be(`'labelPosition' must be center, above, below, left, or right`);
+          });
+      });
+    });
+
+    describe('font', () => {
+      it('sets the font style for the label', () => {
+        const result = fn(value, {
+          font: fontStyle,
+        });
+
+        expect(result.value).to.have.property('font');
+        expect(result.value.font).to.have.keys(Object.keys(fontStyle));
+        expect(result.value.font.spec).to.have.keys(Object.keys(fontStyle.spec));
+      });
+
+      it('sets fill to color', () => {
+        const result = fn(value, {
+          font: fontStyle,
+        });
+        expect(result.value.font.spec).to.have.property('fill', fontStyle.spec.color);
+      });
+
+      // TODO: write test when using an instance of the interpreter
+      // it("sets a default style for the label when not provided", () => {});
+    });
+  });
+});

x-pack/plugins/canvas/canvas_plugin_src/functions/common/index.js

@@ -40,6 +40,7 @@ import { palette } from './palette';
 import { pie } from './pie';
 import { plot } from './plot';
 import { ply } from './ply';
+import { progress } from './progress';
 import { render } from './render';
 import { replace } from './replace';
 import { rounddate } from './rounddate';
@@ -95,6 +96,7 @@ export const functions = [
   pie,
   plot,
   ply,
+  progress,
   render,
   repeatImage,
   replace,