diff --git a/docs/canvas/canvas-function-reference.asciidoc b/docs/canvas/canvas-function-reference.asciidoc
index 8cc7f64adc3a..df4b17e90577 100644
--- a/docs/canvas/canvas-function-reference.asciidoc
+++ b/docs/canvas/canvas-function-reference.asciidoc
@@ -1209,17 +1209,23 @@ Aliases: `label`, `text`, `description`
Default: `""`
+|`labelFont`
+|`style`
+|The CSS font properties for the label. For example, `font-family` or `font-weight`.
+
+Default: `{font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center}`.
+
|`metricFont`
|`style`
|The CSS font properties for the metric. For example, `font-family` or `font-weight`.
Default: `{font size=48 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center lHeight=48}`.
-|`labelFont`
-|`style`
-|The CSS font properties for the label. For example, `font-family` or `font-weight`.
+|`metricFormat`
-Default: `{font size=14 family="'Open Sans', Helvetica, Arial, sans-serif" color="#000000" align=center}`.
+Alias: `format`
+|`string`
+|A NumeralJS format string. For example, `"0.0a"` or `"0%"`. See http://numeraljs.com/#format.
|===
*Returns:* `render`
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
index acbd1b7c6b1a..def16f2a4b23 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/elements/metric/index.ts
@@ -6,6 +6,7 @@
import { openSans } from '../../../common/lib/fonts';
import header from './header.png';
+import { AdvancedSettings } from '../../../public/lib/kibana_advanced_settings';
import { ElementFactory } from '../../../types';
export const metric: ElementFactory = () => ({
@@ -22,5 +23,6 @@ export const metric: ElementFactory = () => ({
| metric "Countries"
metricFont={font size=48 family="${openSans.value}" color="#000000" align="center" lHeight=48}
labelFont={font size=14 family="${openSans.value}" color="#000000" align="center"}
+ metricFormat="${AdvancedSettings.get('format:number:defaultPattern')}"
| render`,
});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
index bed30182a2a2..50a952d83625 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.test.js
@@ -38,7 +38,7 @@ describe('metric', () => {
});
});
- describe('metricStyle', () => {
+ describe('metricFont', () => {
it('sets the font style for the metric', () => {
const result = fn(null, {
metricFont: fontStyle,
@@ -51,7 +51,7 @@ describe('metric', () => {
// it("sets a default style for the metric when not provided, () => {});
});
- describe('labelStyle', () => {
+ describe('labelFont', () => {
it('sets the font style for the label', () => {
const result = fn(null, {
labelFont: fontStyle,
@@ -63,5 +63,15 @@ describe('metric', () => {
// TODO: write test when using an instance of the interpreter
// it("sets a default style for the label when not provided, () => {});
});
+
+ describe('metricFormat', () => {
+ it('sets the number format of the metric value', () => {
+ const result = fn(null, {
+ metricFormat: '0.0%',
+ });
+
+ expect(result.value).toHaveProperty('metricFormat', '0.0%');
+ });
+ });
});
});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
index f27749dbe9fc..02d212f12fde 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/functions/common/metric.ts
@@ -14,6 +14,7 @@ type Context = number | string | null;
interface Arguments {
label: string;
metricFont: Style;
+ metricFormat: string;
labelFont: Style;
}
@@ -35,26 +36,32 @@ export function metric(): ExpressionFunction<'metric', Context, Arguments, Rende
help: argHelp.label,
default: '""',
},
- metricFont: {
- types: ['style'],
- help: argHelp.metricFont,
- default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
- },
labelFont: {
types: ['style'],
help: argHelp.labelFont,
default: `{font size=14 family="${openSans.value}" color="#000000" align=center}`,
},
+ metricFont: {
+ types: ['style'],
+ help: argHelp.metricFont,
+ default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
+ },
+ metricFormat: {
+ types: ['string'],
+ aliases: ['format'],
+ help: argHelp.metricFormat,
+ },
},
- fn: (context, { label, metricFont, labelFont }) => {
+ fn: (context, { label, labelFont, metricFont, metricFormat }) => {
return {
type: 'render',
as: 'metric',
value: {
metric: context === null ? '?' : context,
label,
- metricFont,
labelFont,
+ metricFont,
+ metricFormat,
},
};
},
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot
new file mode 100644
index 000000000000..22b235bcd797
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/__snapshots__/metric.examples.storyshot
@@ -0,0 +1,263 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots renderers/Metric with formatted string metric and a specified format 1`] = `
+
+
+
+ $10m
+
+
+ Total Revenue
+
+
+
+`;
+
+exports[`Storyshots renderers/Metric with invalid metricFont 1`] = `
+
+
+
+ $10m
+
+
+ Total Revenue
+
+
+
+`;
+
+exports[`Storyshots renderers/Metric with label 1`] = `
+
+
+
+ $12.34
+
+
+ Average price
+
+
+
+`;
+
+exports[`Storyshots renderers/Metric with null metric 1`] = `
+
+`;
+
+exports[`Storyshots renderers/Metric with number metric 1`] = `
+
+`;
+
+exports[`Storyshots renderers/Metric with number metric and a specified format 1`] = `
+
+`;
+
+exports[`Storyshots renderers/Metric with string metric 1`] = `
+
+`;
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx
new file mode 100644
index 000000000000..3ab6363ea7dd
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/__examples__/metric.examples.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React, { CSSProperties } from 'react';
+import { Metric } from '../metric';
+
+const labelFontSpec: CSSProperties = {
+ fontFamily: "Baskerville, Georgia, Garamond, 'Times New Roman', Times, serif",
+ fontWeight: 'normal',
+ fontStyle: 'italic',
+ textDecoration: 'none',
+ textAlign: 'center',
+ fontSize: '24px',
+ lineHeight: '1',
+ color: '#000000',
+};
+
+const metricFontSpec: CSSProperties = {
+ fontFamily:
+ "Optima, 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Helvetica, Arial, sans-serif",
+ fontWeight: 'bold',
+ fontStyle: 'normal',
+ textDecoration: 'none',
+ textAlign: 'center',
+ fontSize: '48px',
+ lineHeight: '1',
+ color: '#b83c6f',
+};
+
+storiesOf('renderers/Metric', module)
+ .addDecorator(story => (
+
+ {story()}
+
+ ))
+ .add('with null metric', () => )
+ .add('with number metric', () => (
+
+ ))
+ .add('with string metric', () => (
+
+ ))
+ .add('with label', () => (
+
+ ))
+ .add('with number metric and a specified format', () => (
+
+ ))
+ .add('with formatted string metric and a specified format', () => (
+
+ ))
+ .add('with invalid metricFont', () => (
+
+ ));
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/index.ts
new file mode 100644
index 000000000000..d830090249d5
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/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 { Metric } from './metric';
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx
new file mode 100644
index 000000000000..8d2df8bf2233
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/component/metric.tsx
@@ -0,0 +1,40 @@
+/*
+ * 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, { FunctionComponent, CSSProperties } from 'react';
+import numeral from '@elastic/numeral';
+
+interface Props {
+ /** The text to display under the metric */
+ label?: string;
+ /** CSS font properties for the label */
+ labelFont: CSSProperties;
+ /** Value of the metric to display */
+ metric: string | number | null;
+ /** CSS font properties for the metric */
+ metricFont: CSSProperties;
+ /** NumeralJS format string */
+ metricFormat?: string;
+}
+
+export const Metric: FunctionComponent = ({
+ label,
+ metric,
+ labelFont,
+ metricFont,
+ metricFormat,
+}) => (
+
+
+ {metricFormat ? numeral(metric).format(metricFormat) : metric}
+
+ {label && (
+
+ {label}
+
+ )}
+
+);
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js
deleted file mode 100644
index 688b183f9a61..000000000000
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.js
+++ /dev/null
@@ -1,34 +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 from 'react';
-import ReactDOM from 'react-dom';
-
-export const metric = () => ({
- name: 'metric',
- displayName: 'Metric',
- help: 'Render HTML Markup for the Metric element',
- reuseDomNode: true,
- render(domNode, config, handlers) {
- const metricFontStyle = config.metricFont ? config.metricFont.spec : {};
- const labelFontStyle = config.labelFont ? config.labelFont.spec : {};
-
- ReactDOM.render(
-
-
- {config.metric}
-
-
- {config.label}
-
-
,
- domNode,
- () => handlers.done()
- );
-
- handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
- },
-});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx
new file mode 100644
index 000000000000..dd4d36aa7229
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/metric/index.tsx
@@ -0,0 +1,45 @@
+/*
+ * 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, { CSSProperties } from 'react';
+import ReactDOM from 'react-dom';
+import { RendererFactory, Style } from '../../../types';
+import { Metric } from './component/metric';
+
+export interface Config {
+ /** The text to display under the metric */
+ label: string;
+ /** Font settings for the label */
+ labelFont: Style;
+ /** Value of the metric to display */
+ metric: string | number | null;
+ /** Font settings for the metric */
+ metricFont: Style;
+ /** NumeralJS format string */
+ metricFormat: string;
+}
+
+export const metric: RendererFactory = () => ({
+ name: 'metric',
+ displayName: 'Metric',
+ help: 'Render HTML Markup for the Metric element',
+ reuseDomNode: true,
+ render(domNode, config, handlers) {
+ ReactDOM.render(
+ ,
+ domNode,
+ () => handlers.done()
+ );
+
+ handlers.onDestroy(() => ReactDOM.unmountComponentAtNode(domNode));
+ },
+});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
index 8e92cd9efa9b..77bf71800d38 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/strings/functions/metric.ts
@@ -8,7 +8,7 @@ import { i18n } from '@kbn/i18n';
import { metric } from '../../functions/common/metric';
import { FunctionHelp } from '.';
import { FunctionFactory } from '../../../types';
-import { FONT_FAMILY, FONT_WEIGHT, CSS } from '../constants';
+import { FONT_FAMILY, FONT_WEIGHT, CSS, NUMERALJS } from '../constants';
export const help: FunctionHelp> = {
help: i18n.translate('xpack.canvas.functions.metricHelpText', {
@@ -18,15 +18,6 @@ export const help: FunctionHelp> = {
label: i18n.translate('xpack.canvas.functions.metric.args.labelHelpText', {
defaultMessage: 'The text describing the metric.',
}),
- metricFont: i18n.translate('xpack.canvas.functions.metric.args.metricFontHelpText', {
- defaultMessage:
- 'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
- values: {
- CSS,
- FONT_FAMILY,
- FONT_WEIGHT,
- },
- }),
labelFont: i18n.translate('xpack.canvas.functions.metric.args.labelFontHelpText', {
defaultMessage:
'The {CSS} font properties for the label. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
@@ -36,5 +27,24 @@ export const help: FunctionHelp> = {
FONT_WEIGHT,
},
}),
+ metricFont: i18n.translate('xpack.canvas.functions.metric.args.metricFontHelpText', {
+ defaultMessage:
+ 'The {CSS} font properties for the metric. For example, {FONT_FAMILY} or {FONT_WEIGHT}.',
+ values: {
+ CSS,
+ FONT_FAMILY,
+ FONT_WEIGHT,
+ },
+ }),
+ metricFormat: i18n.translate('xpack.canvas.functions.metric.args.metricFormatHelpText', {
+ defaultMessage:
+ 'A {NUMERALJS} format string. For example, {example1} or {example2}. See {url}.',
+ values: {
+ example1: `"0.0a"`,
+ example2: `"0%"`,
+ NUMERALJS,
+ url: 'http://numeraljs.com/#format',
+ },
+ }),
},
};
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
index db13083c9738..b714cdcaab09 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/index.js
@@ -9,6 +9,7 @@ import { datacolumn } from './datacolumn';
import { filterGroup } from './filter_group';
import { imageUpload } from './image_upload';
import { number } from './number';
+import { numberFormat } from './number_format';
import { palette } from './palette';
import { percentage } from './percentage';
import { range } from './range';
@@ -24,6 +25,7 @@ export const args = [
filterGroup,
imageUpload,
number,
+ numberFormat,
palette,
percentage,
range,
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot
new file mode 100644
index 000000000000..6fcfc922e5d0
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/__snapshots__/number_format.examples.storyshot
@@ -0,0 +1,242 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots arguments/NumberFormat with custom format 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
,
+ ,
+ ,
+]
+`;
+
+exports[`Storyshots arguments/NumberFormat with no format 1`] = `
+Array [
+
+
+
+
+
+
+
+
+
+
,
+ ,
+ ,
+]
+`;
+
+exports[`Storyshots arguments/NumberFormat with preset format 1`] = `
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx
new file mode 100644
index 000000000000..4a078a38c4a3
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/__examples__/number_format.examples.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 { storiesOf } from '@storybook/react';
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { NumberFormatArgInput } from '../number_format';
+
+const numberFormats = [
+ { value: '0.0[000]', text: 'Number' },
+ { value: '0.0%', text: 'Percent' },
+ { value: '$0.00', text: 'Currency' },
+ { value: '00:00:00', text: 'Duration' },
+ { value: '0.0b', text: 'Bytes' },
+];
+
+storiesOf('arguments/NumberFormat', module)
+ .add('with no format', () => (
+
+ ))
+ .add('with preset format', () => (
+
+ ))
+ .add('with custom format', () => (
+
+ ));
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
new file mode 100644
index 000000000000..4eca6e41bd3f
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/index.ts
@@ -0,0 +1,38 @@
+/*
+ * 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 { compose, withProps } from 'recompose';
+import { NumberFormatArgInput as Component, Props as ComponentProps } from './number_format';
+import { AdvancedSettings } from '../../../../public/lib/kibana_advanced_settings';
+// @ts-ignore untyped local lib
+import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
+
+const formatMap = {
+ NUMBER: AdvancedSettings.get('format:number:defaultPattern'),
+ PERCENT: AdvancedSettings.get('format:percent:defaultPattern'),
+ CURRENCY: AdvancedSettings.get('format:currency:defaultPattern'),
+ DURATION: '00:00:00',
+ BYTES: AdvancedSettings.get('format:bytes:defaultPattern'),
+};
+
+const numberFormats = [
+ { value: formatMap.NUMBER, text: 'Number' },
+ { value: formatMap.PERCENT, text: 'Percent' },
+ { value: formatMap.CURRENCY, text: 'Currency' },
+ { value: formatMap.DURATION, text: 'Duration' },
+ { value: formatMap.BYTES, text: 'Bytes' },
+];
+
+export const NumberFormatArgInput = compose(withProps({ numberFormats }))(
+ Component
+);
+
+export const numberFormat = () => ({
+ name: 'numberFormat',
+ displayName: 'Number Format',
+ help: 'Select or enter a valid NumeralJS format',
+ simpleTemplate: templateFromReactComponent(NumberFormatArgInput),
+});
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx
new file mode 100644
index 000000000000..b9d122dcf03d
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/number_format/number_format.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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, ChangeEvent, FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import { EuiSelect, EuiFieldText, EuiSpacer } from '@elastic/eui';
+
+interface NumberFormatOption {
+ /** A NumeralJS format string */
+ value: string;
+ /** The name to display for the format */
+ text: string;
+}
+
+export interface Props {
+ /** An array of number formats options */
+ numberFormats: NumberFormatOption[];
+ /** The handler to invoke when value changes */
+ onValueChange: (value: string) => void;
+ /** The value of the argument */
+ argValue: string;
+ /** The ID for the argument */
+ argId: string;
+}
+
+export const NumberFormatArgInput: FunctionComponent = ({
+ numberFormats,
+ onValueChange,
+ argValue,
+ argId,
+}) => {
+ const formatOptions = numberFormats.concat({ value: '', text: 'Custom' });
+ const handleTextChange = (ev: ChangeEvent) => onValueChange(ev.target.value);
+ const handleSelectChange = (ev: ChangeEvent) => {
+ const { value } = formatOptions[ev.target.selectedIndex];
+ return onValueChange(value || '0.0a');
+ };
+
+ // checks if the argValue is one of the preset formats
+ const isCustomFormat = !argValue || !formatOptions.map(({ value }) => value).includes(argValue);
+
+ return (
+
+
+ {isCustomFormat && (
+
+
+
+
+ )}
+
+ );
+};
+
+NumberFormatArgInput.propTypes = {
+ onValueChange: PropTypes.func.isRequired,
+ argValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]).isRequired,
+ argId: PropTypes.string.isRequired,
+};
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
index 15da536c56e4..5df400361511 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/views/metric.js
@@ -5,6 +5,7 @@
*/
import { openSans } from '../../../common/lib/fonts';
+import { AdvancedSettings } from '../../../public/lib/kibana_advanced_settings';
export const metric = () => ({
name: 'metric',
@@ -19,6 +20,13 @@ export const metric = () => ({
argType: 'string',
default: '""',
},
+ {
+ name: 'labelFont',
+ displayName: 'Label text settings',
+ help: 'Fonts, alignment and color',
+ argType: 'font',
+ default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
+ },
{
name: 'metricFont',
displayName: 'Metric text settings',
@@ -27,11 +35,10 @@ export const metric = () => ({
default: `{font size=48 family="${openSans.value}" color="#000000" align=center lHeight=48}`,
},
{
- name: 'labelFont',
- displayName: 'Label text settings',
- help: 'Fonts, alignment and color',
- argType: 'font',
- default: `{font size=18 family="${openSans.value}" color="#000000" align=center}`,
+ name: 'metricFormat',
+ displayName: 'Metric Format',
+ argType: 'numberFormat',
+ default: `"${AdvancedSettings.get('format:number:defaultPattern')}"`,
},
],
});
diff --git a/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts b/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts
new file mode 100644
index 000000000000..33f3d801c22d
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/public/lib/kibana_advanced_settings.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 chrome from 'ui/chrome';
+
+export const AdvancedSettings = chrome.getUiSettingsClient();
diff --git a/x-pack/legacy/plugins/canvas/types/renderers.ts b/x-pack/legacy/plugins/canvas/types/renderers.ts
index 2167c542c354..282a1c820e34 100644
--- a/x-pack/legacy/plugins/canvas/types/renderers.ts
+++ b/x-pack/legacy/plugins/canvas/types/renderers.ts
@@ -7,19 +7,32 @@
type GenericCallback = (callback: () => void) => void;
export interface RendererHandlers {
+ /** Handler to invoke when an element has finished rendering */
done: () => void;
- getFilter: () => string;
+ /** Handler to invoke when an element is deleted or changes to a different render type */
onDestroy: GenericCallback;
+ /** Handler to invoke when an element's dimensions have changed*/
onResize: GenericCallback;
+ /** Retrieves the value of the filter property on the element object persisted on the workpad */
+ getFilter: () => string;
+ /** Sets the value of the filter property on the element object persisted on the workpad */
setFilter: (filter: string) => void;
}
export interface RendererSpec {
+ /** The render type */
name: string;
+ /** The name to display */
displayName: string;
+ /** A description of what is rendered */
help: string;
+ /** Indicate whether the element should reuse the existing DOM element when re-rendering */
reuseDomNode: boolean;
- height: number;
+ /** The default width of the element in pixels */
+ width?: number;
+ /** The default height of the element in pixels */
+ height?: number;
+ /** A function that renders an element into the specified DOM element */
render: (domNode: HTMLElement, config: RendererConfig, handlers: RendererHandlers) => void;
}