Merge branch 'main' into 9761-store-time-with-search

src/plugins/chart_expressions/expression_partition_vis/common/expression_functions/i18n.ts

@@ -123,9 +123,10 @@ export const strings = {
 export const errors = {
   moreThanNBucketsAreNotSupportedError: (maxLength: number) =>
     i18n.translate('expressionPartitionVis.reusable.function.errors.moreThenNumberBuckets', {
-      defaultMessage: 'More than {maxLength} buckets are not supported',
+      defaultMessage: 'More than {maxLength} buckets are not supported.',
       values: { maxLength },
     }),
+
   splitRowAndSplitColumnAreSpecifiedError: () =>
     i18n.translate('expressionPartitionVis.reusable.function.errors.splitRowAndColumnSpecified', {
       defaultMessage:

x-pack/plugins/canvas/canvas_plugin_src/elements/heatmap/index.ts

@@ -12,7 +12,8 @@ export const heatmap: ElementFactory = () => ({
   type: 'chart',
   help: 'Heatmap visualization',
   icon: 'heatmap',
-  expression: `filters
+  expression: `kibana
+| selectFilter
 | demodata
 | head 10
 | heatmap xAccessor={visdimension "age"} yAccessor={visdimension "project"} valueAccessor={visdimension "cost"}

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

@@ -38,6 +38,7 @@ import { heatmap } from './heatmap';
 
 import { SetupInitializer } from '../plugin';
 import { ElementFactory } from '../../types';
+import { pieVis } from './pie_vis';
 
 const elementSpecs = [
   areaChart,
@@ -68,6 +69,8 @@ const elementSpecs = [
   heatmap,
 ];
 
+const notExposedElementsSpecs = [metricVis, legacyMetricVis, pieVis];
+
 const initializeElementFactories = [metricElementInitializer];
 
 export const initializeElements: SetupInitializer<ElementFactory[]> = (core, plugins) => {
@@ -78,8 +81,8 @@ export const initializeElements: SetupInitializer<ElementFactory[]> = (core, plu
   return applyElementStrings(specs);
 };
 
-// For testing purpose. Will be removed after exposing `metricVis` element.
+// For testing purpose. Will be removed after exposing `metricVis`, pieVis elements.
 export const initializeElementsSpec: SetupInitializer<ElementFactory[]> = (core, plugins) => {
   const specs = initializeElements(core, plugins);
-  return [...applyElementStrings([metricVis, legacyMetricVis]), ...specs];
+  return [...applyElementStrings(notExposedElementsSpecs), ...specs];
 };

x-pack/plugins/canvas/canvas_plugin_src/elements/pie_vis/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import { ElementFactory } from '../../../types';
+
+export const pieVis: ElementFactory = () => ({
+  name: 'pieVis',
+  displayName: '(New) Pie Vis',
+  type: 'chart',
+  help: 'Pie visualization',
+  icon: 'visPie',
+  expression: `kibana
+| selectFilter
+| demodata
+| head 10
+| pieVis metric={visdimension "age"} buckets={visdimension "project"} buckets={visdimension "cost"} legendDisplay="default"
+| render`,
+});

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/index.ts

@@ -34,6 +34,7 @@ import { toggle } from './toggle';
 import { visdimension } from './vis_dimension';
 import { colorPicker } from './color_picker';
 import { editor } from './editor';
+import { partitionLabels } from './partition_labels';
 
 import { SetupInitializer } from '../../plugin';
 
@@ -55,6 +56,7 @@ export const args = [
   visdimension,
   colorPicker,
   editor,
+  partitionLabels,
 ];
 
 export const initializers = [dateFormatInitializer, numberFormatInitializer];

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/default_expression.ts

@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { ExpressionAstExpression } from '@kbn/expressions-plugin/common';
+
+export const defaultExpression = (): ExpressionAstExpression => ({
+  type: 'expression',
+  chain: [
+    {
+      type: 'function',
+      function: 'partitionLabels',
+      arguments: {
+        show: [true],
+        position: ['default'],
+        values: [true],
+        percentDecimals: [2],
+        valuesFormat: ['percent'],
+      },
+    },
+  ],
+});

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx

@@ -0,0 +1,154 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React, { ChangeEvent, MouseEvent, FunctionComponent, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import {
+  EuiFormRow,
+  EuiRange,
+  EuiSelect,
+  EuiSelectOption,
+  EuiSpacer,
+  EuiSwitch,
+  EuiSwitchEvent,
+  EuiText,
+} from '@elastic/eui';
+import { ExpressionAstExpression } from '@kbn/expressions-plugin/common';
+import { set } from 'lodash';
+import { defaultExpression } from './default_expression';
+import { Fields } from './types';
+import { getFieldPath, getFieldValue } from './utils';
+import { ArgumentStrings } from '../../../../i18n';
+
+const { PartitionLabels: strings } = ArgumentStrings;
+
+export interface Props {
+  onValueChange: (argValue: ExpressionAstExpression) => void;
+  argValue: null | ExpressionAstExpression;
+}
+
+const SHOW_FIELD = 'show';
+const POSITION_FIELD = 'position';
+const VALUES_FIELD = 'values';
+const VALUES_FORMAT_FIELD = 'valuesFormat';
+const PERCENT_DECIMALS_FIELD = 'percentDecimals';
+
+export const ExtendedTemplate: FunctionComponent<Props> = ({ onValueChange, argValue }) => {
+  const showLabels = getFieldValue(argValue, SHOW_FIELD);
+  const showValues = getFieldValue(argValue, VALUES_FIELD);
+  const valueFormat = getFieldValue(argValue, VALUES_FORMAT_FIELD);
+  const percentDecimals = getFieldValue(argValue, PERCENT_DECIMALS_FIELD);
+
+  const positions: EuiSelectOption[] = [
+    { text: strings.getPositionDefaultLabel(), value: 'default' },
+    { text: strings.getPositionInsideLabel(), value: 'inside' },
+  ];
+
+  const valuesFormats: EuiSelectOption[] = [
+    { text: strings.getValuesFormatValueLabel(), value: 'value' },
+    { text: strings.getValuesFormatPercentLabel(), value: 'percent' },
+  ];
+
+  useEffect(() => {
+    if (!argValue) {
+      onValueChange(defaultExpression());
+    }
+  }, [argValue, onValueChange]);
+
+  const onChangeField = useCallback(
+    (field: Fields, value: unknown) => {
+      const path = getFieldPath(field);
+      const oldArgValue = argValue ?? defaultExpression();
+      const newArgValue = set(oldArgValue, path, value);
+
+      onValueChange(newArgValue);
+    },
+    [argValue, onValueChange]
+  );
+
+  const onToggleFieldChange = useCallback(
+    (field: Fields) => (event: EuiSwitchEvent) => {
+      onChangeField(field, event.target.checked);
+    },
+    [onChangeField]
+  );
+
+  const onCommonFieldChange = useCallback(
+    (field: Fields) =>
+      (
+        event: ChangeEvent<HTMLInputElement | HTMLSelectElement> | MouseEvent<HTMLButtonElement>
+      ) => {
+        onChangeField(field, event.currentTarget.value);
+      },
+    [onChangeField]
+  );
+
+  if (!showLabels) {
+    return (
+      <EuiText color="subdued" size="xs">
+        <p>{strings.getSwitchedOffShowLabelsLabel()}</p>
+      </EuiText>
+    );
+  }
+
+  return (
+    <>
+      <EuiFormRow label={strings.getPositionLabel()} display="columnCompressed">
+        <EuiSelect
+          compressed
+          value={getFieldValue(argValue, POSITION_FIELD)}
+          options={positions}
+          onChange={onCommonFieldChange(POSITION_FIELD)}
+        />
+      </EuiFormRow>
+      <EuiSpacer size="s" />
+      <EuiFormRow label={strings.getValuesLabel()} display="columnCompressedSwitch">
+        <EuiSwitch
+          compressed
+          checked={showValues}
+          onChange={onToggleFieldChange(VALUES_FIELD)}
+          label={strings.getValuesToggle()}
+        />
+      </EuiFormRow>
+      {showValues && (
+        <EuiFormRow label={strings.getValuesFormatLabel()} display="columnCompressed">
+          <EuiSelect
+            compressed
+            value={valueFormat}
+            options={valuesFormats}
+            onChange={onCommonFieldChange(VALUES_FORMAT_FIELD)}
+          />
+        </EuiFormRow>
+      )}
+      {showValues && valueFormat === 'percent' && (
+        <EuiFormRow label={strings.getPercentDecimalsLabel()} display="columnCompressed">
+          <EuiRange
+            compressed
+            min={0}
+            max={10}
+            step={1}
+            showLabels
+            showInput
+            value={percentDecimals}
+            onChange={(e, isValid) => {
+              if (isValid) {
+                onCommonFieldChange(PERCENT_DECIMALS_FIELD)(e);
+              }
+            }}
+          />
+        </EuiFormRow>
+      )}
+    </>
+  );
+};
+
+ExtendedTemplate.propTypes = {
+  onValueChange: PropTypes.func.isRequired,
+  argValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).isRequired,
+};
+
+ExtendedTemplate.displayName = 'PartitionLabelsExtendedArg';

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { templateFromReactComponent } from '../../../../public/lib/template_from_react_component';
+import { ExtendedTemplate } from './extended_template';
+import { SimpleTemplate } from './simple_template';
+import { ArgumentStrings } from '../../../../i18n';
+
+const { PartitionLabels: strings } = ArgumentStrings;
+
+export const partitionLabels = () => ({
+  name: 'partitionLabels',
+  displayName: strings.getDisplayName(),
+  help: strings.getHelp(),
+  simpleTemplate: templateFromReactComponent(SimpleTemplate),
+  template: templateFromReactComponent(ExtendedTemplate),
+});