[Canvas] Adds function reference docs generator (#49402) (#75831)

Co-authored-by: Corey Robertson <corey.robertson@elastic.co> # Conflicts: # x-pack/plugins/canvas/i18n/functions/dict/map_column.ts
2025-04-23 09:19:04 -04:00 · 2020-08-24 17:27:23 -07:00 · 2020-08-24 17:27:23 -07:00 · 5830101068
commit 5830101068
parent 84da659180
62 changed files with 934 additions and 179 deletions
--- a/docs/canvas/canvas-function-reference.asciidoc
+++ b/docs/canvas/canvas-function-reference.asciidoc
@ -897,7 +897,7 @@ Default: `"-_index:.kibana"`
 |`string`
 |An index or index pattern. For example, `"logstash-*"`.

-Default: `_all`
+Default: `"_all"`
 |===

 *Returns:* `number`
@ -965,7 +965,7 @@ Default: `1000`
 |`string`
 |An index or index pattern. For example, `"logstash-*"`.

-Default: `_all`
+Default: `"_all"`

 |`metaFields`
 |`string`
@ -1026,7 +1026,7 @@ Alias: `tz`
 |`string`
 |The timezone to use for date operations. Valid ISO8601 formats and UTC offsets both work.

-Default: `UTC`
+Default: `"UTC"`
 |===

 *Returns:* `datatable`
@ -1238,7 +1238,7 @@ filters
 |`string`
 |The horizontal text alignment.

-Default: `left`
+Default: `"left"`

 |`color`
 |`string`
@ -1280,7 +1280,7 @@ Default: `false`
 |`string`
 |The font weight. For example, `"normal"`, `"bold"`, `"bolder"`, `"lighter"`, `"100"`, `"200"`, `"300"`, `"400"`, `"500"`, `"600"`, `"700"`, `"800"`, or `"900"`.

-Default: `normal`
+Default: `"normal"`
 |===

 *Returns:* `style`
@ -2469,7 +2469,7 @@ Alias: `shape`
 |`string`
 |Pick a shape.

-Default: `square`
+Default: `"square"`

 |`border`

@ -2732,7 +2732,7 @@ Aliases: `c`, `field`
 |`string`
 |The column or field that you want to filter.

-Default: `@timestamp`
+Default: `"@timestamp"`

 |`compact`
 |`boolean`
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/if.ts
@ -20,9 +20,10 @@ export function ifFn(): ExpressionFunctionDefinition<'if', unknown, Arguments, u
    help,
    args: {
      condition: {
-        types: ['boolean', 'null'],
+        types: ['boolean'],
        aliases: ['_'],
        help: argHelp.condition,
+        required: true,
      },
      then: {
        resolve: false,
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/neq.ts
@ -20,6 +20,9 @@ export function neq(): ExpressionFunctionDefinition<'neq', Input, Arguments, boo
    name: 'neq',
    type: 'boolean',
    help,
+    context: {
+      types: ['boolean', 'number', 'string', 'null'],
+    },
    args: {
      value: {
        aliases: ['_'],
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/switch.ts
@ -25,6 +25,7 @@ export function switchFn(): ExpressionFunctionDefinition<'switch', unknown, Argu
        aliases: ['_'],
        resolve: false,
        multi: true,
+        required: true,
        help: argHelp.case,
      },
      default: {
--- a/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/functions/common/tail.ts
@ -26,6 +26,7 @@ export function tail(): ExpressionFunctionDefinition<'tail', Datatable, Argument
        aliases: ['_'],
        types: ['number'],
        help: argHelp.count,
+        default: 1,
      },
    },
    fn: (input, args) => ({
--- a/x-pack/plugins/canvas/i18n/functions/dict/alter_column.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/alter_column.ts
@ -13,14 +13,14 @@ import { DATATABLE_COLUMN_TYPES } from '../../../common/lib/constants';
 export const help: FunctionHelp<FunctionFactory<typeof alterColumn>> = {
  help: i18n.translate('xpack.canvas.functions.alterColumnHelpText', {
    defaultMessage:
-      'Converts between core types, including {list}, and {end}, and rename columns. ' +
+      'Converts between core types, including {list}, and {end}, and renames columns. ' +
      'See also {mapColumnFn} and {staticColumnFn}.',
    values: {
      list: Object.values(DATATABLE_COLUMN_TYPES)
        .slice(0, -1)
        .map((type) => `\`${type}\``)
        .join(', '),
-      end: Object.values(DATATABLE_COLUMN_TYPES).slice(-1)[0],
+      end: `\`${Object.values(DATATABLE_COLUMN_TYPES).slice(-1)[0]}\``,
      mapColumnFn: '`mapColumn`',
      staticColumnFn: '`staticColumn`',
    },
@ -33,7 +33,7 @@ export const help: FunctionHelp<FunctionFactory<typeof alterColumn>> = {
      defaultMessage: 'The resultant column name. Leave blank to not rename.',
    }),
    type: i18n.translate('xpack.canvas.functions.alterColumn.args.typeHelpText', {
-      defaultMessage: 'The type to convert the column to. Leave blank to not change type.',
+      defaultMessage: 'The type to convert the column to. Leave blank to not change the type.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/as.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/as.ts
@ -20,7 +20,7 @@ export const help: FunctionHelp<FunctionFactory<typeof asFn>> = {
  }),
  args: {
    name: i18n.translate('xpack.canvas.functions.as.args.nameHelpText', {
-      defaultMessage: 'A name to give the column.',
+      defaultMessage: 'The name to give the column.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/axis_config.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/axis_config.ts
@ -21,14 +21,14 @@ export const help: FunctionHelp<FunctionFactory<typeof axisConfig>> = {
  args: {
    max: i18n.translate('xpack.canvas.functions.axisConfig.args.maxHelpText', {
      defaultMessage:
-        'The maximum value displayed in the axis. Must be a number or a date in milliseconds since epoch or {ISO8601} string.',
+        'The maximum value displayed in the axis. Must be a number, a date in milliseconds since epoch, or an {ISO8601} string.',
      values: {
        ISO8601,
      },
    }),
    min: i18n.translate('xpack.canvas.functions.axisConfig.args.minHelpText', {
      defaultMessage:
-        'The minimum value displayed in the axis. Must be a number or a date in milliseconds since epoch or {ISO8601} string.',
+        'The minimum value displayed in the axis. Must be a number, a date in milliseconds since epoch, or an {ISO8601} string.',
      values: {
        ISO8601,
      },
@ -40,14 +40,14 @@ export const help: FunctionHelp<FunctionFactory<typeof axisConfig>> = {
          .slice(0, -1)
          .map((position) => `\`"${position}"\``)
          .join(', '),
-        end: Object.values(Position).slice(-1)[0],
+        end: `\`"${Object.values(Position).slice(-1)[0]}"\``,
      },
    }),
    show: i18n.translate('xpack.canvas.functions.axisConfig.args.showHelpText', {
      defaultMessage: 'Show the axis labels?',
    }),
    tickSize: i18n.translate('xpack.canvas.functions.axisConfig.args.tickSizeHelpText', {
-      defaultMessage: 'The increment size between each tick. Use for `number` axes only',
+      defaultMessage: 'The increment size between each tick. Use for `number` axes only.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/case.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/case.ts
@ -34,14 +34,14 @@ export const help: FunctionHelp<FunctionFactory<typeof caseFn>> = {
    }),
    if: i18n.translate('xpack.canvas.functions.case.args.ifHelpText', {
      defaultMessage:
-        'This value indicates whether the condition is met, usually using a sub-expression. The {IF_ARG} argument overrides the {WHEN_ARG} argument when both are provided.',
+        'This value indicates whether the condition is met. The {IF_ARG} argument overrides the {WHEN_ARG} argument when both are provided.',
      values: {
        IF_ARG,
        WHEN_ARG,
      },
    }),
    then: i18n.translate('xpack.canvas.functions.case.args.thenHelpText', {
-      defaultMessage: 'The value to return if the condition is met.',
+      defaultMessage: 'The value returned if the condition is met.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/compare.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/compare.ts
@ -22,20 +22,20 @@ export const help: FunctionHelp<FunctionFactory<typeof compare>> = {
  help: i18n.translate('xpack.canvas.functions.compareHelpText', {
    defaultMessage:
      'Compares the {CONTEXT} to specified value to determine {BOOLEAN_TRUE} or {BOOLEAN_FALSE}. Usually used in combination with `{ifFn}` or `{caseFn}`. ' +
-      'This only works with primitive types, such as {examples}. See also `{eqFn}`, `{gtFn}`, `{gteFn}`, `{ltFn}`, `{lteFn}`, `{neqFn}`',
+      'This only works with primitive types, such as {examples}. See also {eqFn}, {gtFn}, {gteFn}, {ltFn}, {lteFn}, {neqFn}',
    values: {
      CONTEXT,
      BOOLEAN_TRUE,
      BOOLEAN_FALSE,
-      ifFn: 'if',
+      ifFn: '`if`',
      caseFn: 'case',
      examples: [TYPE_NUMBER, TYPE_STRING, TYPE_BOOLEAN, TYPE_NULL].join(', '),
-      eqFn: 'eq',
-      gtFn: 'gt',
-      gteFn: 'gte',
-      ltFn: 'lt',
-      lteFn: 'lte',
-      neqFn: 'neq',
+      eqFn: '`eq`',
+      gtFn: '`gt`',
+      gteFn: '`gte`',
+      ltFn: '`lt`',
+      lteFn: '`lte`',
+      neqFn: '`neq`',
    },
  }),
  args: {
@ -44,13 +44,13 @@ export const help: FunctionHelp<FunctionFactory<typeof compare>> = {
        'The operator to use in the comparison: {eq} (equal to), {gt} (greater than), {gte} (greater than or equal to)' +
        ', {lt} (less than), {lte} (less than or equal to), {ne} or {neq} (not equal to).',
      values: {
-        eq: Operation.EQ,
-        gt: Operation.GT,
-        gte: Operation.GTE,
-        lt: Operation.LT,
-        lte: Operation.LTE,
-        ne: Operation.NE,
-        neq: Operation.NEQ,
+        eq: `\`"${Operation.EQ}"\``,
+        gt: `\`"${Operation.GT}"\``,
+        gte: `\`"${Operation.GTE}"\``,
+        lt: `\`"${Operation.LT}"\``,
+        lte: `\`"${Operation.LTE}"\``,
+        ne: `\`"${Operation.NE}"\``,
+        neq: `\`"${Operation.NEQ}"\``,
      },
    }),
    to: i18n.translate('xpack.canvas.functions.compare.args.toHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/container_style.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/container_style.ts
@ -74,7 +74,7 @@ export const help: FunctionHelp<FunctionFactory<typeof containerStyle>> = {
      },
    }),
    padding: i18n.translate('xpack.canvas.functions.containerStyle.args.paddingHelpText', {
-      defaultMessage: 'The distance of the content, in pixels, from border.',
+      defaultMessage: 'The distance of the content, in pixels, from the border.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/date.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/date.ts
@ -29,7 +29,8 @@ export const help: FunctionHelp<FunctionFactory<typeof date>> = {
      },
    }),
    format: i18n.translate('xpack.canvas.functions.date.args.formatHelpText', {
-      defaultMessage: 'The {MOMENTJS} format used to parse the specified date string. See {url}.',
+      defaultMessage:
+        'The {MOMENTJS} format used to parse the specified date string. For more information, see {url}.',
      values: {
        MOMENTJS,
        url: 'https://momentjs.com/docs/#/displaying/',
--- a/x-pack/plugins/canvas/i18n/functions/dict/dropdown_control.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/dropdown_control.ts
@ -11,7 +11,7 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof dropdownControl>> = {
  help: i18n.translate('xpack.canvas.functions.dropdownControlHelpText', {
-    defaultMessage: 'Configures a drop-down filter control element.',
+    defaultMessage: 'Configures a dropdown filter control element.',
  }),
  args: {
    filterColumn: i18n.translate(
@ -22,7 +22,7 @@ export const help: FunctionHelp<FunctionFactory<typeof dropdownControl>> = {
    ),
    valueColumn: i18n.translate('xpack.canvas.functions.dropdownControl.args.valueColumnHelpText', {
      defaultMessage:
-        'The column or field from which to extract the unique values for the drop-down control.',
+        'The column or field from which to extract the unique values for the dropdown control.',
    }),
    filterGroup: i18n.translate('xpack.canvas.functions.dropdownControl.args.filterGroupHelpText', {
      defaultMessage: 'The group name for the filter.',
--- a/x-pack/plugins/canvas/i18n/functions/dict/eq.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/eq.ts
@ -12,7 +12,7 @@ import { CONTEXT } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof eq>> = {
  help: i18n.translate('xpack.canvas.functions.eqHelpText', {
-    defaultMessage: 'Return whether the {CONTEXT} is equal to the argument.',
+    defaultMessage: 'Returns whether the {CONTEXT} is equal to the argument.',
    values: {
      CONTEXT,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/filterrows.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/filterrows.ts
@ -12,7 +12,7 @@ import { DATATABLE, TYPE_BOOLEAN, BOOLEAN_TRUE, BOOLEAN_FALSE } from '../../cons

 export const help: FunctionHelp<FunctionFactory<typeof filterrows>> = {
  help: i18n.translate('xpack.canvas.functions.filterrowsHelpText', {
-    defaultMessage: 'Filter rows in a {DATATABLE} based on the return value of a sub-expression.',
+    defaultMessage: 'Filters rows in a {DATATABLE} based on the return value of a sub-expression.',
    values: {
      DATATABLE,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/formatdate.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/formatdate.ts
@ -25,7 +25,7 @@ export const help: FunctionHelp<FunctionFactory<typeof formatdate>> = {
      defaultMessage: 'A {MOMENTJS} format. For example, {example}. See {url}.',
      values: {
        MOMENTJS,
-        example: `"MM/DD/YYYY"`,
+        example: '`"MM/DD/YYYY"`',
        url: 'https://momentjs.com/docs/#/displaying/',
      },
    }),
--- a/x-pack/plugins/canvas/i18n/functions/dict/formatnumber.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/formatnumber.ts
@ -12,7 +12,7 @@ import { NUMERALJS } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof formatnumber>> = {
  help: i18n.translate('xpack.canvas.functions.formatnumberHelpText', {
-    defaultMessage: 'Formats a number into a formatted number string using {NUMERALJS}.',
+    defaultMessage: 'Formats a number into a formatted number string using the {NUMERALJS}.',
    values: {
      NUMERALJS,
    },
@ -22,8 +22,8 @@ export const help: FunctionHelp<FunctionFactory<typeof formatnumber>> = {
    format: i18n.translate('xpack.canvas.functions.formatnumber.args.formatHelpText', {
      defaultMessage: 'A {NUMERALJS} format string. For example, {example1} or {example2}.',
      values: {
-        example1: `"0.0a"`,
-        example2: `"0%"`,
+        example1: '`"0.0a"`',
+        example2: '`"0%"`',
        NUMERALJS,
      },
    }),
--- a/x-pack/plugins/canvas/i18n/functions/dict/get_cell.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/get_cell.ts
@ -12,7 +12,7 @@ import { DATATABLE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof getCell>> = {
  help: i18n.translate('xpack.canvas.functions.getCellHelpText', {
-    defaultMessage: 'Fetchs a single cell from a {DATATABLE}.',
+    defaultMessage: 'Fetches a single cell from a {DATATABLE}.',
    values: {
      DATATABLE,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/head.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/head.ts
@ -12,7 +12,7 @@ import { DATATABLE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof head>> = {
  help: i18n.translate('xpack.canvas.functions.headHelpText', {
-    defaultMessage: 'Retrieves the first {n} rows from the {DATATABLE}. See also {tailFn}',
+    defaultMessage: 'Retrieves the first {n} rows from the {DATATABLE}. See also {tailFn}.',
    values: {
      n: 'N',
      DATATABLE,
--- a/x-pack/plugins/canvas/i18n/functions/dict/if.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/if.ts
@ -12,7 +12,7 @@ import { BOOLEAN_TRUE, BOOLEAN_FALSE, CONTEXT } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof ifFn>> = {
  help: i18n.translate('xpack.canvas.functions.ifHelpText', {
-    defaultMessage: 'Perform conditional logic',
+    defaultMessage: 'Performs conditional logic.',
  }),
  args: {
    condition: i18n.translate('xpack.canvas.functions.if.args.conditionHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/join_rows.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/join_rows.ts
@ -11,20 +11,20 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof joinRows>> = {
  help: i18n.translate('xpack.canvas.functions.joinRowsHelpText', {
-    defaultMessage: 'Join values from rows in a datatable into a string',
+    defaultMessage: 'Concatenates values from rows in a `datatable` into a single string.',
  }),
  args: {
    column: i18n.translate('xpack.canvas.functions.joinRows.args.columnHelpText', {
-      defaultMessage: 'The column to join values from',
+      defaultMessage: 'The column or field from which to extract the values.',
    }),
    separator: i18n.translate('xpack.canvas.functions.joinRows.args.separatorHelpText', {
-      defaultMessage: 'The separator to use between row values',
+      defaultMessage: 'The delimiter to insert between each extracted value.',
    }),
    quote: i18n.translate('xpack.canvas.functions.joinRows.args.quoteHelpText', {
-      defaultMessage: 'The quote character around values',
+      defaultMessage: 'The quote character to wrap around each extracted value.',
    }),
    distinct: i18n.translate('xpack.canvas.functions.joinRows.args.distinctHelpText', {
-      defaultMessage: 'Removes duplicate values?',
+      defaultMessage: 'Extract only unique values?',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/location.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/location.ts
@ -14,10 +14,11 @@ export const help: FunctionHelp<FunctionFactory<typeof location>> = {
    defaultMessage:
      'Find your current location using the {geolocationAPI} of the browser. ' +
      'Performance can vary, but is fairly accurate. ' +
-      'See {url}.',
+      'See {url}. Don’t use {locationFn} if you plan to generate PDFs as this function requires user input.',
    values: {
      geolocationAPI: 'Geolocation API',
      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Navigator/geolocation',
+      locationFn: '`location`',
    },
  }),
  args: {},
--- a/x-pack/plugins/canvas/i18n/functions/dict/map_center.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/map_center.ts
@ -11,7 +11,7 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof mapCenter>> = {
  help: i18n.translate('xpack.canvas.functions.mapCenterHelpText', {
-    defaultMessage: `Returns an object with the center coordinates and zoom level of the map`,
+    defaultMessage: `Returns an object with the center coordinates and zoom level of the map.`,
  }),
  args: {
    lat: i18n.translate('xpack.canvas.functions.mapCenter.args.latHelpText', {
@ -21,7 +21,7 @@ export const help: FunctionHelp<FunctionFactory<typeof mapCenter>> = {
      defaultMessage: `Longitude for the center of the map`,
    }),
    zoom: i18n.translate('xpack.canvas.functions.savedMap.args.zoomHelpText', {
-      defaultMessage: `The zoom level of the map`,
+      defaultMessage: `Zoom level of the map`,
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/map_column.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/map_column.ts
@ -15,9 +15,9 @@ export const help: FunctionHelp<FunctionFactory<typeof mapColumn>> = {
    defaultMessage:
      'Adds a column calculated as the result of other columns. ' +
      'Changes are made only when you provide arguments.' +
-      'See also {mapColumnFn} and {staticColumnFn}.',
+      'See also {alterColumnFn} and {staticColumnFn}.',
    values: {
-      mapColumnFn: '`mapColumn`',
+      alterColumnFn: '`alterColumn`',
      staticColumnFn: '`staticColumn`',
    },
  }),
--- a/x-pack/plugins/canvas/i18n/functions/dict/markdown.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/markdown.ts
@ -33,13 +33,13 @@ export const help: FunctionHelp<FunctionFactory<typeof markdown>> = {
        'The {CSS} font properties for the content. For example, {fontFamily} or {fontWeight}.',
      values: {
        CSS,
-        fontFamily: 'font-family',
-        fontWeight: 'font-weight',
+        fontFamily: '"font-family"',
+        fontWeight: '"font-weight"',
      },
    }),
    openLinksInNewTab: i18n.translate('xpack.canvas.functions.markdown.args.openLinkHelpText', {
      defaultMessage:
-        'A true/false value for opening links in a new tab. Default value is false. Setting to true will open all links in a new tab.',
+        'A true or false value for opening links in a new tab. The default value is `false`. Setting to `true` opens all links in a new tab.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/math.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/math.ts
@ -8,12 +8,12 @@ import { i18n } from '@kbn/i18n';
 import { math } from '../../../canvas_plugin_src/functions/common/math';
 import { FunctionHelp } from '../function_help';
 import { FunctionFactory } from '../../../types';
-import { DATATABLE, CONTEXT, TINYMATH, TINYMATH_URL } from '../../constants';
+import { DATATABLE, CONTEXT, TINYMATH, TINYMATH_URL, TYPE_NUMBER } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof math>> = {
  help: i18n.translate('xpack.canvas.functions.mathHelpText', {
    defaultMessage:
-      'Interprets a {TINYMATH} math expression using a number or {DATATABLE} as {CONTEXT}. ' +
+      'Interprets a {TINYMATH} math expression using a {TYPE_NUMBER} or {DATATABLE} as {CONTEXT}. ' +
      'The {DATATABLE} columns are available by their column name. ' +
      'If the {CONTEXT} is a number it is available as {value}.',
    values: {
@ -21,6 +21,7 @@ export const help: FunctionHelp<FunctionFactory<typeof math>> = {
      CONTEXT,
      DATATABLE,
      value: '`value`',
+      TYPE_NUMBER,
    },
  }),
  args: {
--- a/x-pack/plugins/canvas/i18n/functions/dict/metric.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/metric.ts
@ -40,8 +40,8 @@ export const help: FunctionHelp<FunctionFactory<typeof metric>> = {
    metricFormat: i18n.translate('xpack.canvas.functions.metric.args.metricFormatHelpText', {
      defaultMessage: 'A {NUMERALJS} format string. For example, {example1} or {example2}.',
      values: {
-        example1: `"0.0a"`,
-        example2: `"0%"`,
+        example1: '`"0.0a"`',
+        example2: '`"0%"`',
        NUMERALJS,
      },
    }),
--- a/x-pack/plugins/canvas/i18n/functions/dict/pie.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/pie.ts
@ -8,12 +8,12 @@ import { i18n } from '@kbn/i18n';
 import { pie } from '../../../canvas_plugin_src/functions/common/pie';
 import { FunctionHelp } from '../function_help';
 import { FunctionFactory } from '../../../types';
-import { Position } from '../../../types';
+import { Legend } from '../../../types';
 import { CSS, FONT_FAMILY, FONT_WEIGHT, BOOLEAN_FALSE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof pie>> = {
  help: i18n.translate('xpack.canvas.functions.pieHelpText', {
-    defaultMessage: 'Configure a pie chart element.',
+    defaultMessage: 'Configures a pie chart element.',
  }),
  args: {
    font: i18n.translate('xpack.canvas.functions.pie.args.fontHelpText', {
@ -38,20 +38,18 @@ export const help: FunctionHelp<FunctionFactory<typeof pie>> = {
    }),
    legend: i18n.translate('xpack.canvas.functions.pie.args.legendHelpText', {
      defaultMessage:
-        'The legend position. For example, {positions}, or {BOOLEAN_FALSE}. When {BOOLEAN_FALSE}, the legend is hidden.',
+        'The legend position. For example, {legend}, or {BOOLEAN_FALSE}. When {BOOLEAN_FALSE}, the legend is hidden.',
      values: {
-        positions: Object.values(Position)
+        legend: Object.values(Legend)
          .map((position) => `\`"${position}"\``)
          .join(', '),
        BOOLEAN_FALSE,
      },
    }),
    palette: i18n.translate('xpack.canvas.functions.pie.args.paletteHelpText', {
-      defaultMessage:
-        'A {palette} object for describing the colors to use in this pie chart. See {paletteFn}.',
+      defaultMessage: 'A {palette} object for describing the colors to use in this pie chart.',
      values: {
        palette: '`palette`',
-        paletteFn: '`palette`',
      },
    }),
    radius: i18n.translate('xpack.canvas.functions.pie.args.radiusHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/plot.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/plot.ts
@ -8,12 +8,12 @@ import { i18n } from '@kbn/i18n';
 import { plot } from '../../../canvas_plugin_src/functions/common/plot';
 import { FunctionHelp } from '../function_help';
 import { FunctionFactory } from '../../../types';
-import { Position } from '../../../types';
+import { Legend } from '../../../types';
 import { CSS, FONT_FAMILY, FONT_WEIGHT, BOOLEAN_FALSE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof plot>> = {
  help: i18n.translate('xpack.canvas.functions.plotHelpText', {
-    defaultMessage: 'Configure a chart element',
+    defaultMessage: 'Configures a chart element.',
  }),
  args: {
    defaultStyle: i18n.translate('xpack.canvas.functions.plot.args.defaultStyleHelpText', {
@ -30,20 +30,18 @@ export const help: FunctionHelp<FunctionFactory<typeof plot>> = {
    }),
    legend: i18n.translate('xpack.canvas.functions.plot.args.legendHelpText', {
      defaultMessage:
-        'The legend position. For example, {positions}, or {BOOLEAN_FALSE}. When {BOOLEAN_FALSE}, the legend is hidden.',
+        'The legend position. For example, {legend}, or {BOOLEAN_FALSE}. When {BOOLEAN_FALSE}, the legend is hidden.',
      values: {
-        positions: Object.values(Position)
+        legend: Object.values(Legend)
          .map((position) => `\`"${position}"\``)
          .join(', '),
        BOOLEAN_FALSE,
      },
    }),
    palette: i18n.translate('xpack.canvas.functions.plot.args.paletteHelpText', {
-      defaultMessage:
-        'A {palette} object for describing the colors to use in this chart. See {paletteFn}.',
+      defaultMessage: 'A {palette} object for describing the colors to use in this chart.',
      values: {
        palette: '`palette`',
-        paletteFn: '`palette`',
      },
    }),
    seriesStyle: i18n.translate('xpack.canvas.functions.plot.args.seriesStyleHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/ply.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/ply.ts
@ -13,8 +13,8 @@ import { DATATABLE } from '../../constants';
 export const help: FunctionHelp<FunctionFactory<typeof ply>> = {
  help: i18n.translate('xpack.canvas.functions.plyHelpText', {
    defaultMessage:
-      'Subdivides a {DATATABLE} by the unique values of the specified column, ' +
-      'and passes the resulting tables into an expression, then merges the outputs of each expression',
+      'Subdivides a {DATATABLE} by the unique values of the specified columns, ' +
+      'and passes the resulting tables into an expression, then merges the outputs of each expression.',
    values: {
      DATATABLE,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/pointseries.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/pointseries.ts
@ -35,10 +35,10 @@ export const help: FunctionHelp<FunctionFactory<typeof pointseries>> = {
      defaultMessage: 'The text to show on the mark. Only applicable to supported elements.',
    }),
    x: i18n.translate('xpack.canvas.functions.pointseries.args.xHelpText', {
-      defaultMessage: 'The values along the x-axis.',
+      defaultMessage: 'The values along the X-axis.',
    }),
    y: i18n.translate('xpack.canvas.functions.pointseries.args.yHelpText', {
-      defaultMessage: 'The values along the y-axis.',
+      defaultMessage: 'The values along the Y-axis.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/progress.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/progress.ts
@ -34,7 +34,7 @@ export const help: FunctionHelp<FunctionFactory<typeof progress>> = {
    }),
    label: i18n.translate('xpack.canvas.functions.progress.args.labelHelpText', {
      defaultMessage:
-        'To show or hide labels, use {BOOLEAN_TRUE} or {BOOLEAN_FALSE}. Alternatively, provide a string to display as a label.',
+        'To show or hide the label, use {BOOLEAN_TRUE} or {BOOLEAN_FALSE}. Alternatively, provide a string to display as a label.',
      values: {
        BOOLEAN_TRUE,
        BOOLEAN_FALSE,
--- a/x-pack/plugins/canvas/i18n/functions/dict/render.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/render.ts
@ -13,7 +13,7 @@ import { CONTEXT, CSS } from '../../constants';
 export const help: FunctionHelp<FunctionFactory<typeof render>> = {
  help: i18n.translate('xpack.canvas.functions.renderHelpText', {
    defaultMessage:
-      'Render the {CONTEXT} as a specific element and sets element level options, such as background and border styling.',
+      'Renders the {CONTEXT} as a specific element and sets element level options, such as background and border styling.',
    values: {
      CONTEXT,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/repeat_image.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/repeat_image.ts
@ -17,7 +17,7 @@ export const help: FunctionHelp<FunctionFactory<typeof repeatImage>> = {
  args: {
    emptyImage: i18n.translate('xpack.canvas.functions.repeatImage.args.emptyImageHelpText', {
      defaultMessage:
-        'Fills the difference between the {CONTEXT} and {maxArg} parameter for the element with this image' +
+        'Fills the difference between the {CONTEXT} and {maxArg} parameter for the element with this image. ' +
        'Provide an image asset as a {BASE64} data {URL}, or pass in a sub-expression.',
      values: {
        BASE64,
--- a/x-pack/plugins/canvas/i18n/functions/dict/replace.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/replace.ts
@ -12,7 +12,7 @@ import { JS } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof replace>> = {
  help: i18n.translate('xpack.canvas.functions.replaceImageHelpText', {
-    defaultMessage: 'Use a regular expression to replace parts of a string.',
+    defaultMessage: 'Uses a regular expression to replace parts of a string.',
  }),
  args: {
    pattern: i18n.translate('xpack.canvas.functions.replace.args.patternHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/reveal_image.ts
@ -13,7 +13,7 @@ import { BASE64, URL } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof revealImage>> = {
  help: i18n.translate('xpack.canvas.functions.revealImageHelpText', {
-    defaultMessage: 'Configure an image reveal element.',
+    defaultMessage: 'Configures an image reveal element.',
  }),
  args: {
    image: i18n.translate('xpack.canvas.functions.revealImage.args.imageHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/rounddate.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/rounddate.ts
@ -21,7 +21,7 @@ export const help: FunctionHelp<FunctionFactory<typeof rounddate>> = {
  args: {
    format: i18n.translate('xpack.canvas.functions.rounddate.args.formatHelpText', {
      defaultMessage:
-        'The {MOMENTJS} format to use for bucketing. For example, {example} would round each date to months. See {url}.',
+        'The {MOMENTJS} format to use for bucketing. For example, {example} rounds to months. See {url}.',
      values: {
        example: '`"YYYY-MM"`',
        MOMENTJS,
--- a/x-pack/plugins/canvas/i18n/functions/dict/row_count.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/row_count.ts
@ -12,7 +12,7 @@ import { FunctionFactory } from '../../../types';
 export const help: FunctionHelp<FunctionFactory<typeof rowCount>> = {
  help: i18n.translate('xpack.canvas.functions.rowCountHelpText', {
    defaultMessage:
-      'Returns the number of rows. Pair with {plyFn} to get the count of unique column ' +
+      'Returns the number of rows. Pairs with {plyFn} to get the count of unique column ' +
      'values, or combinations of unique column values.',
    values: {
      plyFn: '`ply`',
--- a/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_lens.ts
@ -11,17 +11,17 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof savedLens>> = {
  help: i18n.translate('xpack.canvas.functions.savedLensHelpText', {
-    defaultMessage: `Returns an embeddable for a saved lens object`,
+    defaultMessage: `Returns an embeddable for a saved Lens visualization object.`,
  }),
  args: {
    id: i18n.translate('xpack.canvas.functions.savedLens.args.idHelpText', {
-      defaultMessage: `The ID of the Saved Lens Object`,
+      defaultMessage: `The ID of the saved Lens visualization object`,
    }),
    timerange: i18n.translate('xpack.canvas.functions.savedLens.args.timerangeHelpText', {
      defaultMessage: `The timerange of data that should be included`,
    }),
    title: i18n.translate('xpack.canvas.functions.savedLens.args.titleHelpText', {
-      defaultMessage: `The title for the lens emebeddable`,
+      defaultMessage: `The title for the Lens visualization object`,
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_map.ts
@ -11,11 +11,11 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof savedMap>> = {
  help: i18n.translate('xpack.canvas.functions.savedMapHelpText', {
-    defaultMessage: `Returns an embeddable for a saved map object`,
+    defaultMessage: `Returns an embeddable for a saved map object.`,
  }),
  args: {
    id: i18n.translate('xpack.canvas.functions.savedMap.args.idHelpText', {
-      defaultMessage: `The ID of the Saved Map Object`,
+      defaultMessage: `The ID of the saved map object`,
    }),
    center: i18n.translate('xpack.canvas.functions.savedMap.args.centerHelpText', {
      defaultMessage: `The center and zoom level the map should have`,
--- a/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/saved_visualization.ts
@ -11,22 +11,22 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof savedVisualization>> = {
  help: i18n.translate('xpack.canvas.functions.savedVisualizationHelpText', {
-    defaultMessage: `Returns an embeddable for a saved visualization object`,
+    defaultMessage: `Returns an embeddable for a saved visualization object.`,
  }),
  args: {
    id: i18n.translate('xpack.canvas.functions.savedVisualization.args.idHelpText', {
-      defaultMessage: `The ID of the Saved Visualization Object`,
+      defaultMessage: `The ID of the saved visualization object`,
    }),
    timerange: i18n.translate('xpack.canvas.functions.savedVisualization.args.timerangeHelpText', {
      defaultMessage: `The timerange of data that should be included`,
    }),
    colors: i18n.translate('xpack.canvas.functions.savedVisualization.args.colorsHelpText', {
-      defaultMessage: `Define the color to use for a specific series`,
+      defaultMessage: `Defines the color to use for a specific series`,
    }),
    hideLegend: i18n.translate(
      'xpack.canvas.functions.savedVisualization.args.hideLegendHelpText',
      {
-        defaultMessage: `Should the legend be hidden`,
+        defaultMessage: `Specifies the option to hide the legend`,
      }
    ),
  },
--- a/x-pack/plugins/canvas/i18n/functions/dict/series_style.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/series_style.ts
@ -43,7 +43,7 @@ export const help: FunctionHelp<FunctionFactory<typeof seriesStyle>> = {
      defaultMessage: 'The width of the line.',
    }),
    points: i18n.translate('xpack.canvas.functions.seriesStyle.args.pointsHelpText', {
-      defaultMessage: 'Size of points on line',
+      defaultMessage: 'The size of points on line.',
    }),
    stack: i18n.translate('xpack.canvas.functions.seriesStyle.args.stackHelpText', {
      defaultMessage:
--- a/x-pack/plugins/canvas/i18n/functions/dict/shape.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/shape.ts
@ -12,7 +12,7 @@ import { SVG } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof shape>> = {
  help: i18n.translate('xpack.canvas.functions.shapeHelpText', {
-    defaultMessage: 'Create a shape.',
+    defaultMessage: 'Creates a shape.',
  }),
  args: {
    shape: i18n.translate('xpack.canvas.functions.shape.args.shapeHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/sort.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/sort.ts
@ -12,12 +12,15 @@ import { DATATABLE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof sort>> = {
  help: i18n.translate('xpack.canvas.functions.sortHelpText', {
-    defaultMessage: 'Sorts a datatable by the specified column.',
+    defaultMessage: 'Sorts a {DATATABLE} by the specified column.',
+    values: {
+      DATATABLE,
+    },
  }),
  args: {
    by: i18n.translate('xpack.canvas.functions.sort.args.byHelpText', {
      defaultMessage:
-        'The column to sort by. When unspecified, the `{DATATABLE}` ' +
+        'The column to sort by. When unspecified, the {DATATABLE} ' +
        'is sorted by the first column.',
      values: {
        DATATABLE,
@ -25,7 +28,7 @@ export const help: FunctionHelp<FunctionFactory<typeof sort>> = {
    }),
    reverse: i18n.translate('xpack.canvas.functions.sort.args.reverseHelpText', {
      defaultMessage:
-        'Reverses the sorting order. When unspecified, the `{DATATABLE}` ' +
+        'Reverses the sorting order. When unspecified, the {DATATABLE} ' +
        'is sorted in ascending order.',
      values: {
        DATATABLE,
--- a/x-pack/plugins/canvas/i18n/functions/dict/static_column.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/static_column.ts
@ -12,7 +12,7 @@ import { FunctionFactory } from '../../../types';
 export const help: FunctionHelp<FunctionFactory<typeof staticColumn>> = {
  help: i18n.translate('xpack.canvas.functions.staticColumnHelpText', {
    defaultMessage:
-      'Add a column with the same static value in every row. See also {alterColumnFn} and {mapColumnFn}.',
+      'Adds a column with the same static value in every row. See also {alterColumnFn} and {mapColumnFn}.',
    values: {
      alterColumnFn: '`alterColumn`',
      mapColumnFn: '`mapColumn`',
@ -20,11 +20,11 @@ export const help: FunctionHelp<FunctionFactory<typeof staticColumn>> = {
  }),
  args: {
    name: i18n.translate('xpack.canvas.functions.staticColumn.args.nameHelpText', {
-      defaultMessage: 'The name of the new column column.',
+      defaultMessage: 'The name of the new column.',
    }),
    value: i18n.translate('xpack.canvas.functions.staticColumn.args.valueHelpText', {
      defaultMessage:
-        'The value to insert in each row in the new column. Tip: use a sub-expression to rollup ' +
+        'The value to insert in each row in the new column. TIP: use a sub-expression to rollup ' +
        'other columns into a static value.',
    }),
  },
--- a/x-pack/plugins/canvas/i18n/functions/dict/switch.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/switch.ts
@ -14,7 +14,7 @@ export const help: FunctionHelp<FunctionFactory<typeof switchFn>> = {
  help: i18n.translate('xpack.canvas.functions.switchHelpText', {
    defaultMessage:
      'Performs conditional logic with multiple conditions. ' +
-      'See also {caseFn} which builds a {case} to pass to the {switchFn} function.',
+      'See also {caseFn}, which builds a {case} to pass to the {switchFn} function.',
    values: {
      case: '`case`',
      caseFn: '`case`',
@ -23,7 +23,7 @@ export const help: FunctionHelp<FunctionFactory<typeof switchFn>> = {
  }),
  args: {
    case: i18n.translate('xpack.canvas.functions.switch.args.caseHelpText', {
-      defaultMessage: 'The conditions to check',
+      defaultMessage: 'The conditions to check.',
    }),
    default: i18n.translate('xpack.canvas.functions.switch.args.defaultHelpText', {
      defaultMessage:
--- a/x-pack/plugins/canvas/i18n/functions/dict/table.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/table.ts
@ -12,7 +12,7 @@ import { CSS, FONT_FAMILY, FONT_WEIGHT, BOOLEAN_FALSE } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof table>> = {
  help: i18n.translate('xpack.canvas.functions.tableHelpText', {
-    defaultMessage: 'Configures a table element',
+    defaultMessage: 'Configures a table element.',
  }),
  args: {
    font: i18n.translate('xpack.canvas.functions.table.args.fontHelpText', {
@ -35,7 +35,7 @@ export const help: FunctionHelp<FunctionFactory<typeof table>> = {
      defaultMessage: 'The number of rows to display on each page.',
    }),
    showHeader: i18n.translate('xpack.canvas.functions.table.args.showHeaderHelpText', {
-      defaultMessage: 'Show/hide the header row with titles for each column.',
+      defaultMessage: 'Show or hide the header row with titles for each column.',
    }),
  },
 };
--- a/x-pack/plugins/canvas/i18n/functions/dict/time_range.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/time_range.ts
@ -11,7 +11,7 @@ import { FunctionFactory } from '../../../types';

 export const help: FunctionHelp<FunctionFactory<typeof timerange>> = {
  help: i18n.translate('xpack.canvas.functions.timerangeHelpText', {
-    defaultMessage: `An object that represents a span of time`,
+    defaultMessage: `An object that represents a span of time.`,
  }),
  args: {
    from: i18n.translate('xpack.canvas.functions.timerange.args.fromHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/timefilter.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/timefilter.ts
@ -12,7 +12,7 @@ import { ISO8601, ELASTICSEARCH, DATEMATH } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<typeof timefilter>> = {
  help: i18n.translate('xpack.canvas.functions.timefilterHelpText', {
-    defaultMessage: 'Create a time filter for querying a source.',
+    defaultMessage: 'Creates a time filter for querying a source.',
  }),
  args: {
    column: i18n.translate('xpack.canvas.functions.timefilter.args.columnHelpText', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/timelion.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/timelion.ts
@ -12,7 +12,7 @@ import { ELASTICSEARCH, DATEMATH, MOMENTJS_TIMEZONE_URL } from '../../constants'

 export const help: FunctionHelp<FunctionFactory<ReturnType<typeof timelionFunctionFactory>>> = {
  help: i18n.translate('xpack.canvas.functions.timelionHelpText', {
-    defaultMessage: 'Use Timelion to extract one or more timeseries from many sources.',
+    defaultMessage: 'Uses Timelion to extract one or more time series from many sources.',
  }),
  args: {
    query: i18n.translate('xpack.canvas.functions.timelion.args.query', {
--- a/x-pack/plugins/canvas/i18n/functions/dict/to.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/to.ts
@ -12,7 +12,8 @@ import { CONTEXT } from '../../constants';

 export const help: FunctionHelp<FunctionFactory<ReturnType<typeof toFunctionFactory>>> = {
  help: i18n.translate('xpack.canvas.functions.toHelpText', {
-    defaultMessage: 'Explicitly casts the type of the {CONTEXT} to the specified type.',
+    defaultMessage:
+      'Explicitly casts the type of the {CONTEXT} from one type to the specified type.',
    values: {
      CONTEXT,
    },
--- a/x-pack/plugins/canvas/i18n/functions/dict/urlparam.ts
+++ b/x-pack/plugins/canvas/i18n/functions/dict/urlparam.ts
@ -13,11 +13,11 @@ import { TYPE_STRING, URL } from '../../constants';
 export const help: FunctionHelp<FunctionFactory<typeof urlparam>> = {
  help: i18n.translate('xpack.canvas.functions.urlparamHelpText', {
    defaultMessage:
-      'Retreives a {URL} parameter to use in an expression. ' +
+      'Retrieves a {URL} parameter to use in an expression. ' +
      'The {urlparamFn} function always returns a {TYPE_STRING}. ' +
-      'For example, you can retrieve the value {value} from the parameter {myVar} from the {URL} {example}).',
+      'For example, you can retrieve the value {value} from the parameter {myVar} from the {URL} {example}.',
    values: {
-      example: 'https://localhost:5601/app/canvas?myVar=20',
+      example: '`https://localhost:5601/app/canvas?myVar=20`',
      myVar: '`myVar`',
      TYPE_STRING,
      URL,
--- a/x-pack/plugins/canvas/public/application.tsx
+++ b/x-pack/plugins/canvas/public/application.tsx
@ -22,7 +22,6 @@ import { registerLanguage } from './lib/monaco_language_def';
 import { SetupRegistries } from './plugin_api';
 import { initRegistries, populateRegistries, destroyRegistries } from './registries';
 import { getDocumentationLinks } from './lib/documentation_links';
-// @ts-expect-error untyped component
 import { HelpMenu } from './components/help_menu/help_menu';
 import { createStore } from './store';

@ -128,7 +127,10 @@ export const initializeCanvas = async (
      },
    ],
    content: (domNode) => {
-      ReactDOM.render(<HelpMenu />, domNode);
+      ReactDOM.render(
+        <HelpMenu functionRegistry={services.expressions.getService().getFunctions()} />,
+        domNode
+      );
      return () => ReactDOM.unmountComponentAtNode(domNode);
    },
  });
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_examples.ts
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_examples.ts
@ -0,0 +1,444 @@
+/*
+ * 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.
+ */
+
+export interface FunctionExample {
+  syntax: string;
+  usage: {
+    expression: string;
+    help?: string;
+  };
+}
+
+interface FunctionExampleDict {
+  [key: string]: FunctionExample;
+}
+
+export const getFunctionExamples = (): FunctionExampleDict => ({
+  all: {
+    syntax: `all {neq "foo"} {neq "bar"} {neq "fizz"}
+all condition={gt 10} condition={lt 20}`,
+    usage: {
+      expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| formatnumber "0.0%"
+| metric "Average uptime"
+  metricFont={
+    font size=48 family="'Open Sans', Helvetica, Arial, sans-serif"
+      color={
+        if {all {gte 0} {lt 0.8}} then="red" else="green"
+      }
+      align="center" lHeight=48
+  }
+| render`,
+      help:
+        'This sets the color of the metric text to `"red"` if the context passed into `metric` is greater than or equal to 0 and less than 0.8. Otherwise, the color is set to `"green"`.',
+    },
+  },
+  alterColumn: {
+    syntax: `alterColumn "cost" type="string"
+alterColumn column="@timestamp" name="foo"`,
+    usage: {
+      expression: `filters
+| demodata
+| alterColumn "time" name="time_in_ms" type="number"
+| table
+| render`,
+      help:
+        'This renames the `time` column to `time_in_ms` and converts the type of the column’s values from `date` to `number`.',
+    },
+  },
+  any: {
+    syntax: `any {eq "foo"} {eq "bar"} {eq "fizz"}
+any condition={lte 10} condition={gt 30}`,
+    usage: {
+      expression: `filters
+| demodata
+| filterrows {
+    getCell "project" | any {eq "elasticsearch"} {eq "kibana"} {eq "x-pack"}
+  }
+| pointseries color="project" size="max(price)"
+| pie
+| render`,
+      help:
+        'This filters out any rows that don’t contain `"elasticsearch"`, `"kibana"` or `"x-pack"` in the `project` field.',
+    },
+  },
+  as: {
+    syntax: `as
+as "foo"
+as name="bar"`,
+    usage: {
+      expression: `filters
+| demodata
+| ply by="project" fn={math "count(username)" | as "num_users"} fn={math "mean(price)" | as "price"}
+| pointseries x="project" y="num_users" size="price" color="project"
+| plot
+| render`,
+      help: `\`as\` casts any primitive value (\`string\`, \`number\`, \`date\`, \`null\`) into a \`datatable\` with a single row and a single column with the given name (or defaults to \`"value"\` if no name is provided). This is useful when piping a primitive value into a function that only takes \`datatable\` as an input.
+
+In the example, \`ply\` expects each \`fn\` subexpression to return a \`datatable\` in order to merge the results of each \`fn\` back into a \`datatable\`, but using a \`math\` aggregation in the subexpressions returns a single \`math\` value, which is then cast into a \`datatable\` using \`as\`.`,
+    },
+  },
+  asset: {
+    syntax: `asset "asset-52f14f2b-fee6-4072-92e8-cd2642665d02"
+asset id="asset-498f7429-4d56-42a2-a7e4-8bf08d98d114"`,
+    usage: {
+      expression: `image dataurl={asset "asset-c661a7cc-11be-45a1-a401-d7592ea7917a"} mode="contain"
+| render`,
+      help:
+        'The image asset stored with the ID `"asset-c661a7cc-11be-45a1-a401-d7592ea7917a"` is passed into the `dataurl` argument of the `image` function to display the stored asset.',
+    },
+  },
+  axisConfig: {
+    syntax: `axisConfig show=false
+axisConfig position="right" min=0 max=10 tickSize=1`,
+    usage: {
+      expression: `filters
+| demodata
+| pointseries x="size(cost)" y="project" color="project"
+| plot defaultStyle={seriesStyle bars=0.75 horizontalBars=true}
+  legend=false
+  xaxis={axisConfig position="top" min=0 max=400 tickSize=100}
+  yaxis={axisConfig position="right"}
+| render`,
+      help:
+        'This sets the `x-axis` to display on the top of the chart and sets the range of values to `0-400` with ticks displayed at `100` intervals. The `y-axis` is configured to display on the `right`.',
+    },
+  },
+  case: {
+    syntax: `case 0 then="red"
+case when=5 then="yellow"
+case if={lte 50} then="green"`,
+    usage: {
+      expression: `math "random()"
+| progress shape="gauge" label={formatnumber "0%"}
+  font={
+    font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" align="center"
+      color={
+        switch {case if={lte 0.5} then="green"}
+          {case if={all {gt 0.5} {lte 0.75}} then="orange"}
+          default="red"
+      }
+  }
+  valueColor={
+    switch {case if={lte 0.5} then="green"}
+      {case if={all {gt 0.5} {lte 0.75}} then="orange"}
+      default="red"
+  }
+| render`,
+      help:
+        'This sets the color of the progress indicator and the color of the label to `"green"` if the value is less than or equal to `0.5`, `"orange"` if the value is greater than `0.5` and less than or equal to `0.75`, and `"red"` if `none` of the case conditions are met.',
+    },
+  },
+  columns: {
+    syntax: `columns include="@timestamp, projects, cost"
+columns exclude="username, country, age"`,
+    usage: {
+      expression: `filters
+| demodata
+| columns include="price, cost, state, project"
+| table
+| render`,
+      help:
+        'This only keeps the `price`, `cost`, `state`, and `project` columns from the `demodata` data source and removes all other columns.',
+    },
+  },
+  compare: {
+    syntax: `compare "neq" to="elasticsearch"
+compare op="lte" to=100`,
+    usage: {
+      expression: `filters
+| demodata
+| mapColumn project
+  fn={getCell project |
+    switch
+      {case if={compare eq to=kibana} then=kibana}
+      {case if={compare eq to=elasticsearch} then=elasticsearch}
+      default="other"
+  }
+| pointseries size="size(cost)" color="project"
+| pie
+| render`,
+      help:
+        'This maps all `project` values that aren’t `"kibana"` and `"elasticsearch"` to `"other"`. Alternatively, you can use the individual comparator functions instead of compare.',
+    },
+  },
+  containerStyle: {
+    syntax: `containerStyle backgroundColor="red"’
+containerStyle borderRadius="50px"
+containerStyle border="1px solid black"
+containerStyle padding="5px"
+containerStyle opacity="0.5"
+containerStyle overflow="hidden"
+containerStyle backgroundImage={asset id=asset-f40d2292-cf9e-4f2c-8c6f-a504a25e949c}
+  backgroundRepeat="no-repeat"
+  backgroundSize="cover"`,
+    usage: {
+      expression: `shape "star" fill="#E61D35" maintainAspect=true
+| render containerStyle={
+    containerStyle backgroundColor="#F8D546"
+      borderRadius="200px"
+      border="4px solid #05509F"
+      padding="0px"
+      opacity="0.9"
+      overflow="hidden"
+  }`,
+    },
+  },
+  context: {
+    syntax: `context`,
+    usage: {
+      expression: `date
+| formatdate "LLLL"
+| markdown "Last updated: " {context}
+| render`,
+      help:
+        'Using the `context` function allows us to pass the output, or _context_, of the previous function as a value to an argument in the next function. Here we get the formatted date string from the previous function and pass it as `content` for the markdown element.',
+    },
+  },
+  csv: {
+    syntax: `csv "fruit, stock
+  kiwi, 10
+  Banana, 5"`,
+    usage: {
+      expression: `csv "fruit,stock
+  kiwi,10
+  banana,5"
+| pointseries color=fruit size=stock
+| pie
+| render`,
+      help:
+        'This creates a `datatable` with `fruit` and `stock` columns with two rows. This is useful for quickly mocking data.',
+    },
+  },
+  date: {
+    syntax: `date
+date value=1558735195
+date "2019-05-24T21:59:55+0000"
+date "01/31/2019" format="MM/DD/YYYY"`,
+    usage: {
+      expression: `date
+| formatdate "LLL"
+| markdown {context}
+  font={font family="Arial, sans-serif" size=30 align="left"
+    color="#000000"
+    weight="normal"
+    underline=false
+    italic=false}
+| render`,
+      help: 'Using `date` without passing any arguments will return the current date and time.',
+    },
+  },
+  demodata: {
+    syntax: `demodata
+demodata "ci"
+demodata type="shirts"`,
+    usage: {
+      expression: `filters
+| demodata
+| table
+| render`,
+      help: '`demodata` is a mock data set that you can use to start playing around in Canvas.',
+    },
+  },
+  dropdownControl: {
+    syntax: `dropdownControl valueColumn=project filterColumn=project
+dropdownControl valueColumn=agent filterColumn=agent.keyword filterGroup=group1`,
+    usage: {
+      expression: `demodata
+| dropdownControl valueColumn=project filterColumn=project
+| render`,
+      help:
+        'This creates a dropdown filter element. It requires a data source and uses the unique values from the given `valueColumn` (i.e. `project`) and applies the filter to the `project` column. Note: `filterColumn` should point to a keyword type field for Elasticsearch data sources.',
+    },
+  },
+  eq: {
+    syntax: `eq true
+eq null
+eq 10
+eq "foo"`,
+    usage: {
+      expression: `filters
+| demodata
+| mapColumn project
+  fn={getCell project |
+    switch
+      {case if={eq kibana} then=kibana}
+      {case if={eq elasticsearch} then=elasticsearch}
+      default="other"
+  }
+| pointseries size="size(cost)" color="project"
+| pie
+| render`,
+      help:
+        'This changes all values in the project column that don’t equal `"kibana"` or `"elasticsearch"` to `"other"`.',
+    },
+  },
+  escount: {
+    syntax: `escount index="logstash-*"
+escount "currency:\"EUR\"" index="kibana_sample_data_ecommerce"
+escount query="response:404" index="kibana_sample_data_logs"`,
+    usage: {
+      expression: `filters
+| escount "Cancelled:true" index="kibana_sample_data_flights"
+| math "value"
+| progress shape="semicircle"
+  label={formatnumber 0,0}
+  font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center}
+  max={filters | escount index="kibana_sample_data_flights"}
+| render`,
+      help:
+        'The first `escount` expression retrieves the number of flights that were cancelled. The second `escount` expression retrieves the total number of flights.',
+    },
+  },
+  esdocs: {
+    syntax: `esdocs index="logstash-*"
+esdocs "currency:\"EUR\"" index="kibana_sample_data_ecommerce"
+esdocs query="response:404" index="kibana_sample_data_logs"
+esdocs index="kibana_sample_data_flights" count=100
+esdocs index="kibana_sample_data_flights" sort="AvgTicketPrice, asc"`,
+    usage: {
+      expression: `filters
+| esdocs index="kibana_sample_data_ecommerce"
+  fields="customer_gender, taxful_total_price, order_date"
+  sort="order_date, asc"
+  count=10000
+| mapColumn "order_date"
+  fn={getCell "order_date" | date {context} | rounddate "YYYY-MM-DD"}
+| alterColumn "order_date" type="date"
+| pointseries x="order_date" y="sum(taxful_total_price)" color="customer_gender"
+| plot defaultStyle={seriesStyle lines=3}
+  palette={palette "#7ECAE3" "#003A4D" gradient=true}
+| render`,
+      help:
+        'This retrieves the first 10000 documents data from the `kibana_sample_data_ecommerce` index sorted by `order_date` in ascending order, and only requests the `customer_gender`, `taxful_total_price`, and `order_date` fields.',
+    },
+  },
+  essql: {
+    syntax: `essql query="SELECT * FROM \"logstash*\""
+essql "SELECT * FROM \"apm*\"" count=10000`,
+    usage: {
+      expression: `filters
+| essql query="SELECT Carrier, FlightDelayMin, AvgTicketPrice FROM   \"kibana_sample_data_flights\""
+| table
+| render`,
+      help:
+        'This retrieves the `Carrier`, `FlightDelayMin`, and `AvgTicketPrice` fields from the "kibana_sample_data_flights" index.',
+    },
+  },
+  exactly: {
+    syntax: `exactly "state" value="running"
+exactly "age" value=50 filterGroup="group2"
+exactly column="project" value="beats"`,
+    usage: {
+      expression: `filters
+| exactly column=project value=elasticsearch
+| demodata
+| pointseries x=project y="mean(age)"
+| plot defaultStyle={seriesStyle bars=1}
+| render`,
+      help:
+        'The `exactly` filter here is added to existing filters retrieved by the `filters` function and further filters down the data to only have `"elasticsearch"` data. The `exactly` filter only applies to this one specific element and will not affect other elements in the workpad.',
+    },
+  },
+  filterrows: {
+    syntax: `filterrows {getCell "project" | eq "kibana"}
+filterrows fn={getCell "age" | gt 50}`,
+    usage: {
+      expression: `filters
+| demodata
+| filterrows {getCell "country" | any {eq "IN"} {eq "US"} {eq "CN"}}
+| mapColumn "@timestamp"
+  fn={getCell "@timestamp" | rounddate "YYYY-MM"}
+| alterColumn "@timestamp" type="date"
+| pointseries x="@timestamp" y="mean(cost)" color="country"
+| plot defaultStyle={seriesStyle points="2" lines="1"}
+  palette={palette "#01A4A4" "#CC6666" "#D0D102" "#616161" "#00A1CB" "#32742C" "#F18D05" "#113F8C" "#61AE24" "#D70060" gradient=false}
+| render`,
+      help:
+        'This uses `filterrows` to only keep data from India (`IN`), the United States (`US`), and China (`CN`).',
+    },
+  },
+  filters: {
+    syntax: `filters
+filters group="timefilter1"
+filters group="timefilter2" group="dropdownfilter1" ungrouped=true`,
+    usage: {
+      expression: `filters group=group2 ungrouped=true
+| demodata
+| pointseries x="project" y="size(cost)" color="project"
+| plot defaultStyle={seriesStyle bars=0.75} legend=false
+  font={
+    font size=14
+    family="'Open Sans', Helvetica, Arial, sans-serif"
+    align="left"
+    color="#FFFFFF"
+    weight="lighter"
+    underline=true
+    italic=true
+  }
+| render`,
+      help:
+        '`filters` sets the existing filters as context and accepts a `group` parameter to opt into specific filter groups. Setting `ungrouped` to `true` opts out of using global filters.',
+    },
+  },
+  font: {
+    syntax: `font size=12
+font family=Arial
+font align=middle
+font color=pink
+font weight=lighter
+font underline=true
+font italic=false
+font lHeight=32`,
+    usage: {
+      expression: `filters
+| demodata
+| pointseries x="project" y="size(cost)" color="project"
+| plot defaultStyle={seriesStyle bars=0.75} legend=false
+  font={
+    font size=14
+    family="'Open Sans', Helvetica, Arial, sans-serif"
+    align="left"
+    color="#FFFFFF"
+    weight="lighter"
+    underline=true
+    italic=true
+  }
+| render`,
+    },
+  },
+  formatdate: {
+    syntax: `formatdate format="YYYY-MM-DD"
+formatdate "MM/DD/YYYY"`,
+    usage: {
+      expression: `filters
+| demodata
+| mapColumn "time" fn={getCell time | formatdate "MMM 'YY"}
+| pointseries x="time" y="sum(price)" color="state"
+| plot defaultStyle={seriesStyle points=5}
+| render`,
+      help:
+        'This transforms the dates in the `time` field into strings that look like `"Jan ‘19"`, `"Feb ‘19"`, etc. using a MomentJS format.',
+    },
+  },
+  formatnumber: {
+    syntax: `formatnumber format="$0,0.00"
+formatnumber "0.0a"`,
+    usage: {
+      expression: `filters
+| demodata
+| math "mean(percent_uptime)"
+| progress shape="gauge"
+  label={formatnumber "0%"}
+  font={font size=24 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align="center"}
+| render`,
+      help:
+        'The `formatnumber` subexpression receives the same `context` as the `progress` function, which is the output of the `math` function. It formats the value into a percentage.',
+    },
+  },
+});
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/function_reference_generator.tsx
@ -0,0 +1,36 @@
+/*
+ * 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 React, { FC } from 'react';
+import { ExpressionFunction } from 'src/plugins/expressions';
+import { EuiButtonEmpty } from '@elastic/eui';
+import copy from 'copy-to-clipboard';
+import { notifyService } from '../../services';
+import { generateFunctionReference } from './generate_function_reference';
+
+interface Props {
+  functionRegistry: Record<string, ExpressionFunction>;
+}
+
+export const FunctionReferenceGenerator: FC<Props> = ({ functionRegistry }) => {
+  const functionDefinitions = Object.values(functionRegistry);
+
+  const copyDocs = () => {
+    copy(generateFunctionReference(functionDefinitions));
+    notifyService
+      .getService()
+      .success(
+        `Please paste updated docs into '/kibana/docs/canvas/canvas-function-reference.asciidoc' and commit your changes.`,
+        { title: 'Copied function docs to clipboard' }
+      );
+  };
+
+  return (
+    <EuiButtonEmpty color="danger" flush="left" size="xs" iconType="beaker" onClick={copyDocs}>
+      Generate function reference
+    </EuiButtonEmpty>
+  );
+};
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/generate_function_reference.ts
@ -0,0 +1,259 @@
+/*
+ * 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.
+ */
+
+// @ts-expect-error untyped lib
+import pluralize from 'pluralize';
+import { ExpressionFunction, ExpressionFunctionParameter } from 'src/plugins/expressions';
+import { functions as browserFunctions } from '../../../canvas_plugin_src/functions/browser';
+import { functions as serverFunctions } from '../../../canvas_plugin_src/functions/server';
+import { isValidDataUrl, DATATABLE_COLUMN_TYPES } from '../../../common/lib';
+import { getFunctionExamples, FunctionExample } from './function_examples';
+
+const ALPHABET = 'abcdefghijklmnopqrstuvwxyz'.split('');
+const REQUIRED_ARG_ANNOTATION = '***';
+const MULTI_ARG_ANNOTATION = '†';
+const UNNAMED_ARG = '_Unnamed_';
+const ANY_TYPE = '`any`';
+
+const examplesDict = getFunctionExamples();
+
+const fnList = [
+  ...browserFunctions.map((fn) => fn().name),
+  ...serverFunctions.map((fn) => fn().name),
+  'asset',
+  'filters',
+  'timelion',
+  'to',
+  'font',
+  'var',
+  'var_set',
+  // ignore unsupported embeddables functions for now
+].filter((fn) => !['savedSearch'].includes(fn));
+
+interface FunctionDictionary {
+  [key: string]: ExpressionFunction[];
+}
+
+const wrapInBackTicks = (str: string) => `\`${str}\``;
+const wrapInDoubleQuotes = (str: string) => (str.includes('"') ? str : `"${str}"`);
+const stringSorter = (a: string, b: string) => {
+  if (a < b) {
+    return -1;
+  }
+  if (a > b) {
+    return 1;
+  }
+  return 0;
+};
+
+// Converts reference to another function in a function's help text into an Asciidoc link
+const addFunctionLinks = (help: string, options?: { ignoreList?: string[] }) => {
+  const { ignoreList = [] } = options || {};
+  fnList.forEach((name: string) => {
+    const nameWithBackTicks = wrapInBackTicks(name);
+
+    // ignore functions with the same name as data types, i.e. string, date
+    if (
+      !ignoreList.includes(name) &&
+      !DATATABLE_COLUMN_TYPES.includes(name) &&
+      help.includes(nameWithBackTicks)
+    ) {
+      help = help.replace(nameWithBackTicks, `<<${name}_fn>>`);
+    }
+  });
+
+  return help;
+};
+
+export const generateFunctionReference = (functionDefinitions: ExpressionFunction[]) => {
+  const functionDefs = functionDefinitions.filter((fn: ExpressionFunction) =>
+    fnList.includes(fn.name)
+  );
+  const functionDictionary: FunctionDictionary = {};
+  functionDefs.forEach((fn: ExpressionFunction) => {
+    const firstLetter = fn.name[0];
+
+    if (!functionDictionary[firstLetter]) {
+      functionDictionary[firstLetter] = [];
+    }
+
+    functionDictionary[firstLetter].push(fn);
+  });
+  return `[role="xpack"]
+[[canvas-function-reference]]
+== Canvas function reference
+
+Behind the scenes, Canvas is driven by a powerful expression language,
+with dozens of functions and other capabilities, including table transforms,
+type casting, and sub-expressions.
+
+The Canvas expression language also supports <<canvas-tinymath-functions>>, which
+perform complex math calculations.
+
+A ${REQUIRED_ARG_ANNOTATION} denotes a required argument.
+
+A ${MULTI_ARG_ANNOTATION} denotes an argument can be passed multiple times.
+
+${createAlphabetLinks(functionDictionary)}
+
+${createFunctionDocs(functionDictionary)}`;
+};
+
+const createAlphabetLinks = (functionDictionary: FunctionDictionary) => {
+  return ALPHABET.map((letter: string) =>
+    functionDictionary[letter] ? `<<${letter}_fns>>` : letter.toUpperCase()
+  ).join(' | ');
+};
+
+const createFunctionDocs = (functionDictionary: FunctionDictionary) => {
+  return Object.keys(functionDictionary)
+    .sort()
+    .map(
+      (letter: string) => `[float]
+[[${letter}_fns]]
+== ${letter.toUpperCase()}
+
+${functionDictionary[letter]
+  .sort((a, b) => stringSorter(a.name, b.name))
+  .map(getDocBlock)
+  .join('\n')}`
+    )
+    .join('');
+};
+
+const getDocBlock = (fn: ExpressionFunction) => {
+  const header = `[float]
+[[${fn.name}_fn]]
+=== \`${fn.name}\``;
+
+  const input = fn.inputTypes;
+  const output = fn.type;
+  const args = fn.args;
+  const examples = examplesDict[fn.name];
+  const help = addFunctionLinks(fn.help);
+
+  const argBlock =
+    !args || Object.keys(args).length === 0
+      ? ''
+      : `\n[cols="3*^<"]
+|===
+|Argument |Type |Description
+
+${getArgsTable(args)}
+|===\n`;
+
+  const examplesBlock = !examples ? `` : `${getExamplesBlock(examples)}`;
+
+  return `${header}\n
+${help}
+${examplesBlock}
+*Accepts:* ${input ? input.map(wrapInBackTicks).join(', ') : ANY_TYPE}\n${argBlock}
+*Returns:* ${output ? wrapInBackTicks(output) : 'Depends on your input and arguments'}\n\n`;
+};
+
+const getArgsTable = (args: { [key: string]: ExpressionFunctionParameter }) => {
+  if (!args || Object.keys(args).length === 0) {
+    return 'None';
+  }
+
+  const argNames = Object.keys(args);
+
+  return argNames
+    .sort((a: string, b: string) => {
+      const argA = args[a];
+      const argB = args[b];
+
+      // sorts unnamed arg to the front
+      if (a === '_' || (argA.aliases && argA.aliases.includes('_'))) {
+        return -1;
+      }
+      if (b === '_' || (argB.aliases && argB.aliases.includes('_'))) {
+        return 1;
+      }
+      return stringSorter(a, b);
+    })
+    .map((argName: string) => {
+      const arg = args[argName];
+      const types = arg.types;
+      const aliases = arg.aliases ? [...arg.aliases] : [];
+      let defaultValue = arg.default;
+      const requiredAnnotation = arg.required === true ? ` ${REQUIRED_ARG_ANNOTATION}` : '';
+      const multiAnnotation = arg.multi === true ? ` ${MULTI_ARG_ANNOTATION}` : '';
+
+      if (typeof defaultValue === 'string') {
+        defaultValue = defaultValue.replace('{', '${').replace(/[\r\n/]+/g, '');
+        if (types && types.includes('string')) {
+          defaultValue = wrapInDoubleQuotes(defaultValue);
+        }
+      }
+
+      let displayName = '';
+
+      if (argName === '_') {
+        displayName = UNNAMED_ARG;
+      } else if (aliases && aliases.includes('_')) {
+        displayName = UNNAMED_ARG;
+        aliases[aliases.indexOf('_')] = argName;
+      } else {
+        displayName = wrapInBackTicks(argName);
+      }
+
+      const aliasList =
+        aliases && aliases.length
+          ? `\n\n${pluralize('Alias', aliases.length)}: ${aliases
+              .sort()
+              .map(wrapInBackTicks)
+              .join(', ')}`
+          : '';
+
+      let defaultBlock = '';
+
+      if (isValidDataUrl(arg.default)) {
+        defaultBlock = getDataUrlExampleBlock(displayName, arg.default);
+      } else {
+        defaultBlock =
+          typeof defaultValue !== 'undefined' ? `\n\nDefault: \`${defaultValue}\`` : '';
+      }
+
+      return `|${displayName}${requiredAnnotation}${multiAnnotation}${aliasList}
+|${types && types.length ? types.map(wrapInBackTicks).join(', ') : ANY_TYPE}
+|${arg.help ? addFunctionLinks(arg.help, { ignoreList: argNames }) : ''}${defaultBlock}`;
+    })
+    .join('\n\n');
+};
+
+const getDataUrlExampleBlock = (
+  argName: string,
+  value: string
+) => `\n\nExample value for the ${argName} argument, formatted as a \`base64\` data URL:
+[source, url]
+------------
+${value}
+------------`;
+
+const getExamplesBlock = (examples: FunctionExample) => {
+  const { syntax, usage } = examples;
+  const { expression, help } = usage || {};
+  const syntaxBlock = syntax
+    ? `\n*Expression syntax*
+[source,js]
+----
+${syntax}
+----\n`
+    : '';
+
+  const codeBlock = expression
+    ? `\n*Code example*
+[source,text]
+----
+${expression}
+----\n`
+    : '';
+
+  const codeHelp = help ? `${help}\n` : '';
+
+  return `${syntaxBlock}${codeBlock}${codeHelp}`;
+};
--- a/x-pack/plugins/canvas/public/components/function_reference_generator/index.ts
+++ b/x-pack/plugins/canvas/public/components/function_reference_generator/index.ts
@ -0,0 +1,7 @@
+/*
+ * 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.
+ */
+
+export { FunctionReferenceGenerator } from './function_reference_generator';
--- a/x-pack/plugins/canvas/public/components/help_menu/help_menu.js
+++ b/x-pack/plugins/canvas/public/components/help_menu/help_menu.js
@ -1,45 +0,0 @@
-/*
- * 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 React, { Fragment, PureComponent } from 'react';
-import { EuiButtonEmpty, EuiPortal } from '@elastic/eui';
-import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
-import { ComponentStrings } from '../../../i18n';
-
-const { HelpMenu: strings } = ComponentStrings;
-
-export class HelpMenu extends PureComponent {
-  state = { isFlyoutVisible: false };
-
-  showFlyout = () => {
-    this.setState({ isFlyoutVisible: true });
-  };
-
-  hideFlyout = () => {
-    this.setState({ isFlyoutVisible: false });
-  };
-
-  render() {
-    return (
-      <Fragment>
-        <EuiButtonEmpty
-          size="xs"
-          flush="left"
-          iconType="keyboardShortcut"
-          onClick={this.showFlyout}
-        >
-          {strings.getKeyboardShortcutsLinkLabel()}
-        </EuiButtonEmpty>
-
-        {this.state.isFlyoutVisible && (
-          <EuiPortal>
-            <KeyboardShortcutsDoc onClose={this.hideFlyout} />
-          </EuiPortal>
-        )}
-      </Fragment>
-    );
-  }
-}
--- a/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/help_menu/help_menu.tsx
@ -0,0 +1,59 @@
+/*
+ * 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 React, { FC, useState, lazy, Suspense } from 'react';
+import { EuiButtonEmpty, EuiPortal, EuiSpacer } from '@elastic/eui';
+import { ExpressionFunction } from 'src/plugins/expressions';
+import { ComponentStrings } from '../../../i18n';
+import { KeyboardShortcutsDoc } from '../keyboard_shortcuts_doc';
+
+let FunctionReferenceGenerator: null | React.LazyExoticComponent<any> = null;
+if (process.env.NODE_ENV === 'development') {
+  FunctionReferenceGenerator = lazy(() =>
+    import('../function_reference_generator').then((module) => ({
+      default: module.FunctionReferenceGenerator,
+    }))
+  );
+}
+
+const { HelpMenu: strings } = ComponentStrings;
+
+interface Props {
+  functionRegistry: Record<string, ExpressionFunction>;
+}
+
+export const HelpMenu: FC<Props> = ({ functionRegistry }) => {
+  const [isFlyoutVisible, setFlyoutVisible] = useState(false);
+
+  const showFlyout = () => {
+    setFlyoutVisible(true);
+  };
+
+  const hideFlyout = () => {
+    setFlyoutVisible(false);
+  };
+
+  return (
+    <>
+      <EuiButtonEmpty size="xs" flush="left" iconType="keyboardShortcut" onClick={showFlyout}>
+        {strings.getKeyboardShortcutsLinkLabel()}
+      </EuiButtonEmpty>
+
+      {FunctionReferenceGenerator ? (
+        <Suspense fallback={null}>
+          <EuiSpacer size="s" />
+          <FunctionReferenceGenerator functionRegistry={functionRegistry} />
+        </Suspense>
+      ) : null}
+
+      {isFlyoutVisible && (
+        <EuiPortal>
+          <KeyboardShortcutsDoc onClose={hideFlyout} />
+        </EuiPortal>
+      )}
+    </>
+  );
+};
--- a/x-pack/plugins/canvas/public/components/help_menu/index.ts
+++ b/x-pack/plugins/canvas/public/components/help_menu/index.ts
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -5672,7 +5672,6 @@
    "xpack.canvas.functions.joinRows.args.separatorHelpText": "行の値の間で使用する区切り文字",
    "xpack.canvas.functions.joinRows.columnNotFoundErrorMessage": "列が見つかりません。'{column}'",
    "xpack.canvas.functions.joinRowsHelpText": "データベースの行の値を文字列に結合",
-    "xpack.canvas.functions.locationHelpText": "ブラウザの {geolocationAPI} を使用して現在位置を取得します。パフォーマンスに違いはありますが、比較的正確です。{url} を参照。",
    "xpack.canvas.functions.lt.args.valueHelpText": "{CONTEXT} と比較される値です。",
    "xpack.canvas.functions.lte.args.valueHelpText": "{CONTEXT} と比較される値です。",
    "xpack.canvas.functions.lteHelpText": "{CONTEXT} が引数以下かを戻します。",
@ -5681,7 +5680,6 @@
    "xpack.canvas.functions.mapCenterHelpText": "マップの中央座標とズームレベルのオブジェクトに戻ります。",
    "xpack.canvas.functions.mapColumn.args.expressionHelpText": "単一行 {DATATABLE} として各行に渡される {CANVAS} 表現です。",
    "xpack.canvas.functions.mapColumn.args.nameHelpText": "結果の列の名前です。",
-    "xpack.canvas.functions.mapColumnHelpText": "他の列の結果として計算された列を追加します。引数が提供された場合のみ変更が加えられます。{mapColumnFn} と {staticColumnFn} もご参照ください。",
    "xpack.canvas.functions.markdown.args.contentHelpText": "{MARKDOWN} を含むテキストの文字列です。連結させるには、{stringFn} 関数を複数回渡します。",
    "xpack.canvas.functions.markdown.args.fontHelpText": "コンテンツの {CSS} フォントプロパティです。例: {fontFamily} または {fontWeight}。",
    "xpack.canvas.functions.markdown.args.openLinkHelpText": "新しいタブでリンクを開くための true/false 値。デフォルト値は false です。true に設定するとすべてのリンクが新しいタブで開くようになります。",
@ -5691,7 +5689,6 @@
    "xpack.canvas.functions.math.emptyExpressionErrorMessage": "空の表現",
    "xpack.canvas.functions.math.executionFailedErrorMessage": "数式の実行に失敗しました。列名を確認してください",
    "xpack.canvas.functions.math.tooManyResultsErrorMessage": "表現は 1 つの数字を返す必要があります。表現を {mean} または {sum} で囲んでみてください",
-    "xpack.canvas.functions.mathHelpText": "数字または {DATATABLE} を {CONTEXT} として使用して {TINYMATH} 数式を解釈します。{DATATABLE} 列は列名で表示されます。{CONTEXT} が数字の場合は、{value} と表示されます。",
    "xpack.canvas.functions.metric.args.labelFontHelpText": "ラベルの {CSS} フォントプロパティです。例: {FONT_FAMILY} または {FONT_WEIGHT}。",
    "xpack.canvas.functions.metric.args.labelHelpText": "メトリックを説明するテキストです。",
    "xpack.canvas.functions.metric.args.metricFontHelpText": "メトリックの {CSS} フォントプロパティです。例: {FONT_FAMILY} または {FONT_WEIGHT}。",
@ -5707,16 +5704,12 @@
    "xpack.canvas.functions.pie.args.holeHelpText": "円グラフに穴をあけます、0～100 で円グラフの半径のパーセンテージを指定します。",
    "xpack.canvas.functions.pie.args.labelRadiusHelpText": "ラベルの円の半径として使用する、コンテナーの面積のパーセンテージです。",
    "xpack.canvas.functions.pie.args.labelsHelpText": "円グラフのラベルを表示しますか？",
-    "xpack.canvas.functions.pie.args.legendHelpText": "凡例の配置です。例: {positions}、または {BOOLEAN_FALSE}。{BOOLEAN_FALSE} の場合、凡例は非表示になります。",
-    "xpack.canvas.functions.pie.args.paletteHelpText": "この円グラフに使用されている色を説明する {palette} オブジェクトです。{paletteFn} をご覧ください。",
    "xpack.canvas.functions.pie.args.radiusHelpText": "利用可能なスペースのパーセンテージで示された円グラフの半径です (0 から 1 の間)。半径を自動的に設定するには {auto} を使用します。",
    "xpack.canvas.functions.pie.args.seriesStyleHelpText": "特定の数列のスタイルです",
    "xpack.canvas.functions.pie.args.tiltHelpText": "「1」 が完全に垂直、「0」が完全に水平を表す傾きのパーセンテージです。",
    "xpack.canvas.functions.pieHelpText": "円グラフのエレメントを構成します。",
    "xpack.canvas.functions.plot.args.defaultStyleHelpText": "すべての数列に使用するデフォルトのスタイルです。",
    "xpack.canvas.functions.plot.args.fontHelpText": "表の {CSS} フォントプロパティです。例: {FONT_FAMILY} または {FONT_WEIGHT}。",
-    "xpack.canvas.functions.plot.args.legendHelpText": "凡例の配置です。例: {positions}、または {BOOLEAN_FALSE}。{BOOLEAN_FALSE} の場合、凡例は非表示になります。",
-    "xpack.canvas.functions.plot.args.paletteHelpText": "このチャートに使用される色を説明する {palette} オブジェクトです。{paletteFn} をご覧ください。",
    "xpack.canvas.functions.plot.args.seriesStyleHelpText": "特定の数列のスタイルです",
    "xpack.canvas.functions.plot.args.xaxisHelpText": "軸の構成です。{BOOLEAN_FALSE} の場合、軸は非表示になります。",
    "xpack.canvas.functions.plot.args.yaxisHelpText": "軸の構成です。{BOOLEAN_FALSE} の場合、軸は非表示になります。",
@ -5800,7 +5793,6 @@
    "xpack.canvas.functions.shapeHelpText": "図形を作成します。",
    "xpack.canvas.functions.sort.args.byHelpText": "並べ替えの基準となる列です。指定されていない場合、「{DATATABLE}」は初めの列で並べられます。",
    "xpack.canvas.functions.sort.args.reverseHelpText": "並び順を反転させます。指定されていない場合、「{DATATABLE}」は昇順で並べられます。",
-    "xpack.canvas.functions.sortHelpText": "データ表を指定された列で並べ替えます。",
    "xpack.canvas.functions.staticColumn.args.nameHelpText": "新しい列の名前です。",
    "xpack.canvas.functions.staticColumn.args.valueHelpText": "新しい列の各行に挿入する値です。ヒント: 部分式を使用して他の列を静的値にロールアップします。",
    "xpack.canvas.functions.staticColumnHelpText": "すべての行に同じ静的値の列を追加します。{alterColumnFn} および {mapColumnFn} もご参照ください。",
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -5674,7 +5674,6 @@
    "xpack.canvas.functions.joinRows.args.separatorHelpText": "用于分隔行值的分隔符",
    "xpack.canvas.functions.joinRows.columnNotFoundErrorMessage": "找不到列：“{column}”",
    "xpack.canvas.functions.joinRowsHelpText": "将数据库中的行的值联接成字符串",
-    "xpack.canvas.functions.locationHelpText": "使用浏览器的 {geolocationAPI} 查找您的当前位置。性能可能会因浏览器而异，但相当准确。请参见 {url}。",
    "xpack.canvas.functions.lt.args.valueHelpText": "与 {CONTEXT} 比较的值。",
    "xpack.canvas.functions.lte.args.valueHelpText": "与 {CONTEXT} 比较的值。",
    "xpack.canvas.functions.lteHelpText": "返回 {CONTEXT} 是否小于或等于参数。",
@ -5683,7 +5682,6 @@
    "xpack.canvas.functions.mapCenterHelpText": "返回具有地图中心坐标和缩放级别的对象",
    "xpack.canvas.functions.mapColumn.args.expressionHelpText": "作为单行 {DATATABLE} 传递到每一行的 {CANVAS} 表达式。",
    "xpack.canvas.functions.mapColumn.args.nameHelpText": "结果列的名称。",
-    "xpack.canvas.functions.mapColumnHelpText": "添加计算为其他列的结果的列。只有提供参数时，才会进行更改。另请参见 {mapColumnFn} 和 {staticColumnFn}。",
    "xpack.canvas.functions.markdown.args.contentHelpText": "包含 {MARKDOWN} 的文本字符串。要进行串联，请传递 {stringFn} 函数多次。",
    "xpack.canvas.functions.markdown.args.fontHelpText": "内容的 {CSS} 字体属性。例如：{fontFamily} 或 {fontWeight}。",
    "xpack.canvas.functions.markdown.args.openLinkHelpText": "表示是否在新选项卡中打开链接的 true/false 值。默认值为 false。设置为 true 将在新选项卡中打开所有链接。",
@ -5693,7 +5691,6 @@
    "xpack.canvas.functions.math.emptyExpressionErrorMessage": "空表达式",
    "xpack.canvas.functions.math.executionFailedErrorMessage": "无法执行数学表达式。检查您的列名称",
    "xpack.canvas.functions.math.tooManyResultsErrorMessage": "表达式必须返回单个数字。尝试将您的表达式包装在 {mean} 或 {sum} 中",
-    "xpack.canvas.functions.mathHelpText": "通过将数字或 {DATATABLE} 用作 {CONTEXT} 来解析 {TINYMATH} 数学表达式。{DATATABLE} 列可通过列名来使用。如果 {CONTEXT} 是数字，其可用作 {value}。",
    "xpack.canvas.functions.metric.args.labelFontHelpText": "标签的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。",
    "xpack.canvas.functions.metric.args.labelHelpText": "描述指标的文本。",
    "xpack.canvas.functions.metric.args.metricFontHelpText": "指标的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。",
@ -5709,16 +5706,12 @@
    "xpack.canvas.functions.pie.args.holeHelpText": "在饼图中绘制介于 `0` and `100`（饼图半径的百分比）之间的孔洞。",
    "xpack.canvas.functions.pie.args.labelRadiusHelpText": "要用作标签圆形半径的容器面积百分比。",
    "xpack.canvas.functions.pie.args.labelsHelpText": "显示饼图标签？",
-    "xpack.canvas.functions.pie.args.legendHelpText": "图例位置。例如 {positions} 或 {BOOLEAN_FALSE}。为 {BOOLEAN_FALSE} 时，图例隐藏。",
-    "xpack.canvas.functions.pie.args.paletteHelpText": "用于描述要在饼图上使用的颜色的 {palette} 对象。请参见 {paletteFn}。",
    "xpack.canvas.functions.pie.args.radiusHelpText": "饼图的半径，表示为可用空间的百分比（介于 `0` 和 `1` 之间）。要自动设置半径，请使用 {auto}。",
    "xpack.canvas.functions.pie.args.seriesStyleHelpText": "特定序列的样式",
    "xpack.canvas.functions.pie.args.tiltHelpText": "倾斜百分比，其中 `1` 为完全垂直，`0` 为完全水平。",
    "xpack.canvas.functions.pieHelpText": "配置饼图元素。",
    "xpack.canvas.functions.plot.args.defaultStyleHelpText": "要用于每个序列的默认样式。",
    "xpack.canvas.functions.plot.args.fontHelpText": "标签的 {CSS} 字体属性。例如 {FONT_FAMILY} 或 {FONT_WEIGHT}。",
-    "xpack.canvas.functions.plot.args.legendHelpText": "图例位置。例如 {positions} 或 {BOOLEAN_FALSE}。为 {BOOLEAN_FALSE} 时，图例隐藏。",
-    "xpack.canvas.functions.plot.args.paletteHelpText": "用于描述要在此图表上使用的颜色的 {palette} 对象。请参见 {paletteFn}。",
    "xpack.canvas.functions.plot.args.seriesStyleHelpText": "特定序列的样式",
    "xpack.canvas.functions.plot.args.xaxisHelpText": "轴配置。为 {BOOLEAN_FALSE} 时，轴隐藏。",
    "xpack.canvas.functions.plot.args.yaxisHelpText": "轴配置。为 {BOOLEAN_FALSE} 时，轴隐藏。",
@ -5802,7 +5795,6 @@
    "xpack.canvas.functions.shapeHelpText": "创建形状。",
    "xpack.canvas.functions.sort.args.byHelpText": "排序要依据的列。未指定时，将按第一列排序 `{DATATABLE}`。",
    "xpack.canvas.functions.sort.args.reverseHelpText": "反转排序顺序。未指定时，将升序排序 `{DATATABLE}`。",
-    "xpack.canvas.functions.sortHelpText": "按指定列排序数据库。",
    "xpack.canvas.functions.staticColumn.args.nameHelpText": "新列的名称。",
    "xpack.canvas.functions.staticColumn.args.valueHelpText": "在每一行新列中要插入的值。提示：使用子表达式将其他列汇总为静态值。",
    "xpack.canvas.functions.staticColumnHelpText": "在每一行添加具有相同静态值的列。另见 {alterColumnFn} 和 {mapColumnFn}。",