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: 400,
+  height: 30,
+  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/horizontal_progress_pill/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 horizontalProgressPill = () => ({
+  name: 'horizontalProgressPill',
+  displayName: 'Horizontal Progress Pill',
+  help: 'Displays progress as a portion of a horizontal pill',
+  width: 400,
+  height: 30,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="horizontalPill" 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,25 @@ 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 { horizontalProgressPill } from './horizontal_progress_pill';
 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 { progressSemicircle } from './progress_semicircle';
+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';
+import { verticalProgressPill } from './vertical_progress_pill';
 
 export const elementSpecs = [
   areaChart,
@@ -32,16 +39,23 @@ export const elementSpecs = [
   dropdownFilter,
   image,
   horizontalBarChart,
+  horizontalProgressBar,
+  horizontalProgressPill,
   lineChart,
   markdown,
   metric,
   pie,
   plot,
+  progressGauge,
+  progressSemicircle,
+  progressWheel,
   repeatImage,
   revealImage,
   shape,
   table,
   tiltedPie,
   timeFilter,
   verticalBarChart,
+  verticalProgressBar,
+  verticalProgressPill,
 ];

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_semicircle/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 progressSemicircle = () => ({
+  name: 'progressSemicircle',
+  displayName: 'Progress Semicircle',
+  help: 'Displays progress as a portion of a semicircle',
+  width: 200,
+  height: 100,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="semicircle" 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: 80,
+  height: 400,
+  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/elements/vertical_progress_pill/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 verticalProgressPill = () => ({
+  name: 'verticalProgressPill',
+  displayName: 'Vertical Progress Pill',
+  help: 'Displays progress as a portion of a vertical pill',
+  width: 80,
+  height: 400,
+  image: header,
+  expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="verticalPill" label={formatnumber 0%} font={font size=24 family="${
+    openSans.value
+  }" color="#000000" align=center}
+| render`,
+});