Canvas function/argument/value autocomplete

x-pack/plugins/canvas/__tests__/fixtures/function_specs.js

@@ -0,0 +1,6 @@
+import { Fn } from '../../common/lib/fn';
+import { functions as browserFns } from '../../canvas_plugin_src/functions/browser';
+import { functions as commonFns } from '../../canvas_plugin_src/functions/common';
+import { functions as serverFns } from '../../canvas_plugin_src/functions/server/src';
+
+export const functionSpecs = [...browserFns, ...commonFns, ...serverFns].map(fn => new Fn(fn()));

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

@@ -160,9 +160,9 @@ describe('font', () => {
         expect(result.spec).to.have.property('textAlign', 'right');
         expect(result.css).to.contain('text-align:right');
 
-        result = fn(null, { align: 'justified' });
-        expect(result.spec).to.have.property('textAlign', 'justified');
-        expect(result.css).to.contain('text-align:justified');
+        result = fn(null, { align: 'justify' });
+        expect(result.spec).to.have.property('textAlign', 'justify');
+        expect(result.css).to.contain('text-align:justify');
       });
 
       it(`defaults to 'left'`, () => {

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

@@ -23,6 +23,7 @@ export const alterColumn = () => ({
       types: ['string'],
       help: 'The type to convert the column to. Leave blank to not change type',
       default: null,
+      options: ['null', 'boolean', 'number', 'string'],
     },
     name: {
       types: ['string'],

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

@@ -22,6 +22,7 @@ export const axisConfig = () => ({
     position: {
       types: ['string'],
       help: 'Position of the axis labels - top, bottom, left, and right',
+      options: ['top', 'bottom', 'left', 'right'],
       default: '',
     },
     min: {

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

@@ -22,6 +22,7 @@ export const compare = () => ({
       help:
         'The operator to use in the comparison: ' +
         ' eq (equal), ne (not equal), lt (less than), gt (greater than), lte (less than equal), gte (greater than eq)',
+      options: ['eq', 'ne', 'lt', 'gt', 'lte', 'gte'],
     },
     to: {
       aliases: ['this', 'b'],

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

@@ -41,19 +41,22 @@ export const containerStyle = () => ({
       types: ['string'],
       help: 'Valid CSS background size string',
       default: 'contain',
+      options: ['contain', 'cover', 'auto'],
     },
     backgroundRepeat: {
       types: ['string'],
       help: 'Valid CSS background repeat string',
       default: 'no-repeat',
+      options: ['repeat-x', 'repeat', 'space', 'round', 'no-repeat', 'space'],
     },
     opacity: {
       types: ['number', 'null'],
       help: 'A number between 0 and 1 representing the degree of transparency of the element',
     },
     overflow: {
       types: ['string'],
-      help: `Sets overflow of the container`,
+      help: 'Sets overflow of the container',
+      options: ['visible', 'hidden', 'scroll', 'auto'],
     },
   },
   fn: (context, args) => {

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

@@ -7,6 +7,23 @@
 import inlineStyle from 'inline-style';
 import { openSans } from '../../../common/lib/fonts';
 
+const weights = [
+  'normal',
+  'bold',
+  'bolder',
+  'lighter',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+];
+const alignments = ['center', 'left', 'right', 'justify'];
+
 export const font = () => ({
   name: 'font',
   aliases: [],
@@ -40,41 +57,28 @@ export const font = () => ({
       help:
         'Set the font weight, e.g. normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900',
       default: 'normal',
+      options: weights,
     },
     underline: {
       types: ['boolean'],
       default: false,
       help: 'Underline the text, true or false',
+      options: [true, false],
     },
     italic: {
       types: ['boolean'],
       default: false,
       help: 'Italicize, true or false',
+      options: [true, false],
     },
     align: {
       types: ['string'],
       help: 'Horizontal text alignment',
       default: 'left',
+      options: alignments,
     },
   },
   fn: (context, args) => {
-    const weights = [
-      'normal',
-      'bold',
-      'bolder',
-      'lighter',
-      '100',
-      '200',
-      '300',
-      '400',
-      '500',
-      '600',
-      '700',
-      '800',
-      '900',
-    ];
-    const alignments = ['center', 'left', 'right', 'justified'];
-
     if (!weights.includes(args.weight)) throw new Error(`Invalid font weight: ${args.weight}`);
     if (!alignments.includes(args.align)) throw new Error(`Invalid text alignment: ${args.align}`);
 

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

@@ -4,10 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { includes } from 'lodash';
 import { resolveWithMissingImage } from '../../../common/lib/resolve_dataurl';
 import { elasticLogo } from '../../lib/elastic_logo';
 
+const modes = ['contain', 'cover', 'stretch'];
+
 export const image = () => ({
   name: 'image',
   aliases: [],
@@ -31,11 +32,11 @@ export const image = () => ({
         '"cover" will fill the container with the image, cropping from the sides or bottom as needed.' +
         '"stretch" will resize the height and width of the image to 100% of the container',
       default: 'contain',
+      options: modes,
     },
   },
   fn: (context, { dataurl, mode }) => {
-    if (!includes(['contain', 'cover', 'stretch'], mode))
-      throw '"mode" must be "contain", "cover", or "stretch"';
+    if (!modes.includes(mode)) throw '"mode" must be "contain", "cover", or "stretch"';
 
     const modeStyle = mode === 'stretch' ? '100% 100%' : mode;
 

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

@@ -24,11 +24,13 @@ export const palette = () => ({
       types: ['boolean'],
       default: false,
       help: 'Prefer to make a gradient where supported and useful?',
+      options: [true, false],
     },
     reverse: {
       type: ['boolean'],
       default: false,
       help: 'Reverse the palette',
+      options: [true, false],
     },
   },
   fn: (context, args) => {

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

@@ -42,6 +42,7 @@ export const pie = () => ({
       types: ['boolean'],
       default: true,
       help: 'Show pie labels',
+      options: [true, false],
     },
     labelRadius: {
       types: ['number'],
@@ -57,6 +58,7 @@ export const pie = () => ({
       types: ['string', 'boolean'],
       help: 'Legend position, nw, sw, ne, se or false',
       default: false,
+      options: ['nw', 'sw', 'ne', 'se', false],
     },
     tilt: {
       types: ['number'],

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

@@ -47,6 +47,7 @@ export const plot = () => ({
       types: ['string', 'boolean'],
       help: 'Legend position, nw, sw, ne, se or false',
       default: 'ne',
+      options: ['nw', 'sw', 'ne', 'se', false],
     },
     yaxis: {
       types: ['boolean', 'axisConfig'],

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

@@ -6,7 +6,17 @@
 
 import { get } from 'lodash';
 import { openSans } from '../../../common/lib/fonts';
-import { shapes } from '../../renderers/progress/shapes';
+
+const shapes = [
+  'gauge',
+  'horizontalBar',
+  'horizontalPill',
+  'semicircle',
+  'unicorn',
+  'verticalBar',
+  'verticalPill',
+  'wheel',
+];
 
 export const progress = () => ({
   name: 'progress',
@@ -20,9 +30,8 @@ export const progress = () => ({
     shape: {
       type: ['string'],
       alias: ['_'],
-      help: `Select ${Object.keys(shapes)
-        .map((key, i, src) => (i === src.length - 1 ? `or ${shapes[key].name}` : shapes[key].name))
-        .join(', ')}`,
+      help: `Select ${shapes.slice(0, -1).join(', ')}, or ${shapes.slice(-1)[0]}`,
+      options: shapes,
       default: 'gauge',
     },
     max: {

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

@@ -17,6 +17,7 @@ export const render = () => ({
       types: ['string', 'null'],
       help:
         'The element type to use in rendering. You probably want a specialized function instead, such as plot or grid',
+      options: ['debug', 'error', 'image', 'pie', 'plot', 'shape', 'table', 'text'],
     },
     css: {
       types: ['string', 'null'],

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

@@ -30,6 +30,7 @@ export const revealImage = () => ({
       types: ['string'],
       help: 'Where to start from. Eg, top, left, bottom or right',
       default: 'bottom',
+      options: ['top', 'left', 'bottom', 'right'],
     },
   },
   fn: (percent, args) => {

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

@@ -45,6 +45,8 @@ export const seriesStyle = () => ({
       types: ['number', 'boolean'],
       displayName: 'Fill points',
       help: 'Should we fill points?',
+      default: false,
+      options: [true, false],
     },
     stack: {
       types: ['number', 'null'],
@@ -56,6 +58,7 @@ export const seriesStyle = () => ({
       types: ['boolean'],
       displayName: 'Horizontal bars orientation',
       help: 'Sets the orientation of bars in the chart to horizontal',
+      options: [true, false],
     },
   },
   fn: (context, args) => ({ type: name, ...args }),

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

@@ -18,6 +18,24 @@ export const shape = () => ({
       help: 'Pick a shape',
       aliases: ['_'],
       default: 'square',
+      options: [
+        'arrow',
+        'arrowMulti',
+        'bookmark',
+        'cross',
+        'circle',
+        'hexagon',
+        'kite',
+        'pentagon',
+        'rhombus',
+        'semicircle',
+        'speechBubble',
+        'square',
+        'star',
+        'tag',
+        'triangle',
+        'triangleRight',
+      ],
     },
     fill: {
       types: ['string', 'null'],
@@ -39,6 +57,7 @@ export const shape = () => ({
       types: ['boolean'],
       help: 'Select true to maintain aspect ratio',
       default: false,
+      options: [true, false],
     },
   },
   fn: (context, { shape, fill, border, borderWidth, maintainAspect }) => ({

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

@@ -25,6 +25,7 @@ export const sort = () => ({
       types: ['boolean'],
       help:
         'Reverse the sort order. If reverse is not specified, the datatable will be sorted in ascending order.',
+      options: [true, false],
     },
   },
   fn: (context, args) => {

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

@@ -22,6 +22,7 @@ export const table = () => ({
       types: ['boolean'],
       default: true,
       help: 'Show pagination controls. If set to false only the first page will be displayed',
+      options: [true, false],
     },
     perPage: {
       types: ['number'],
@@ -32,6 +33,7 @@ export const table = () => ({
       types: ['boolean'],
       default: true,
       help: 'Show or hide the header row with titles for each column',
+      options: [true, false],
     },
   },
   fn: (context, args) => {

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

@@ -22,6 +22,7 @@ export const timefilterControl = () => ({
       type: ['boolean'],
       help: 'Show the time filter as a button that triggers a popover',
       default: true,
+      options: [true, false],
     },
   },
   fn: (context, args) => {

x-pack/plugins/canvas/canvas_plugin_src/functions/server/src/demodata/index.js

@@ -22,6 +22,7 @@ export const demodata = () => ({
       aliases: ['_'],
       help: 'The name of the demo data set to use',
       default: 'ci',
+      options: ['ci', 'shirts'],
     },
   },
   fn: (context, args) => {