Migrate vis type xy to new unified xy expression

elastic · Jul 15, 2022 · 6d1ba64 · 6d1ba64
1 parent 93dcb5f
commit 6d1ba64
Show file tree

Hide file tree

Showing 19 changed files with 480 additions and 212 deletions.
diff --git a/src/plugins/chart_expressions/expression_xy/common/constants.ts b/src/plugins/chart_expressions/expression_xy/common/constants.ts
@@ -35,6 +35,8 @@ export const FittingFunctions = {
   LINEAR: 'Linear',
   CARRY: 'Carry',
   LOOKAHEAD: 'Lookahead',
+  AVERAGE: 'Average',
+  NEAREST: 'Nearest',
 } as const;
 
 export const EndValues = {
@@ -98,6 +100,7 @@ export const XScaleTypes = {
 export const XYCurveTypes = {
   LINEAR: 'LINEAR',
   CURVE_MONOTONE_X: 'CURVE_MONOTONE_X',
+  CURVE_STEP_AFTER: 'CURVE_STEP_AFTER',
 } as const;
 
 export const ValueLabelModes = {

diff --git a/...ins/chart_expressions/expression_xy/common/expression_functions/common_data_layer_args.ts b/...ins/chart_expressions/expression_xy/common/expression_functions/common_data_layer_args.ts
@@ -7,7 +7,7 @@
  */
 
 import { ArgumentType } from '@kbn/expressions-plugin/common';
-import { SeriesTypes, XScaleTypes, DATA_DECORATION_CONFIG } from '../constants';
+import { SeriesTypes, XScaleTypes, DATA_DECORATION_CONFIG, XYCurveTypes } from '../constants';
 import { strings } from '../i18n';
 import { DataLayerArgs, ExtendedDataLayerArgs } from '../types';
 
@@ -58,6 +58,12 @@ export const commonDataLayerArgs: Omit<
     default: false,
     help: strings.getIsHorizontalHelp(),
   },
+  curveType: {
+    types: ['string'],
+    options: [...Object.values(XYCurveTypes)],
+    help: strings.getCurveTypeHelp(),
+    strict: true,
+  },
   lineWidth: {
     types: ['number'],
     help: strings.getLineWidthHelp(),

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/common_xy_args.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/common_xy_args.ts
@@ -11,7 +11,6 @@ import {
   FittingFunctions,
   LEGEND_CONFIG,
   ValueLabelModes,
-  XYCurveTypes,
   X_AXIS_CONFIG,
   Y_AXIS_CONFIG,
 } from '../constants';
@@ -50,12 +49,6 @@ export const commonXYArgs: CommonXYFn['args'] = {
     strict: true,
     default: ValueLabelModes.HIDE,
   },
-  curveType: {
-    types: ['string'],
-    options: [...Object.values(XYCurveTypes)],
-    help: strings.getCurveTypeHelp(),
-    strict: true,
-  },
   fillOpacity: {
     types: ['number'],
     help: strings.getFillOpacityHelp(),
@@ -110,4 +103,9 @@ export const commonXYArgs: CommonXYFn['args'] = {
     types: ['string'],
     help: strings.getMinTimeBarIntervalHelp(),
   },
+  handleEmptyXAccessor: {
+    types: ['boolean'],
+    default: false,
+    help: strings.getHandleEmptyXAccessorHelp(),
+  },
 };
diff --git a/...lugins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer.ts b/...lugins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer.ts
@@ -20,27 +20,23 @@ export const extendedDataLayerFunction: ExtendedDataLayerFn = {
   args: {
     ...commonDataLayerArgs,
     xAccessor: {
-      types: ['string'],
+      types: ['vis_dimension', 'string'],
       help: strings.getXAccessorHelp(),
     },
     splitAccessors: {
-      types: ['string'],
+      types: ['vis_dimension', 'string'],
       help: strings.getSplitAccessorHelp(),
       multi: true,
     },
     accessors: {
-      types: ['string'],
+      types: ['vis_dimension', 'string'],
       help: strings.getAccessorsHelp(),
       multi: true,
     },
     markSizeAccessor: {
-      types: ['string'],
+      types: ['vis_dimension', 'string'],
       help: strings.getMarkSizeAccessorHelp(),
     },
-    table: {
-      types: ['datatable'],
-      help: strings.getTableHelp(),
-    },
     layerId: {
       types: ['string'],
       help: strings.getLayerIdHelp(),

diff --git a/...ins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer_fn.ts b/...ins/chart_expressions/expression_xy/common/expression_functions/extended_data_layer_fn.ts
@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
 import { validateAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { ExtendedDataLayerArgs, ExtendedDataLayerFn } from '../types';
 import { EXTENDED_DATA_LAYER, LayerTypes } from '../constants';
@@ -19,8 +20,11 @@ import {
 } from './validate';
 
 export const extendedDataLayerFn: ExtendedDataLayerFn['fn'] = async (data, args, context) => {
-  const table = args.table ?? data;
-  const accessors = getAccessors<string, ExtendedDataLayerArgs>(args, table);
+  const table = data;
+  const accessors = getAccessors<string | ExpressionValueVisDimension, ExtendedDataLayerArgs>(
+    args,
+    table
+  );
 
   validateAccessor(accessors.xAccessor, table.columns);
   accessors.splitAccessors?.forEach((accessor) => validateAccessor(accessor, table.columns));

diff --git a/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.ts b/src/plugins/chart_expressions/expression_xy/common/expression_functions/layered_xy_vis.ts
@@ -13,6 +13,7 @@ import {
   REFERENCE_LINE_LAYER,
   LAYERED_XY_VIS,
   EXTENDED_ANNOTATION_LAYER,
+  REFERENCE_LINE,
 } from '../constants';
 import { commonXYArgs } from './common_xy_args';
 import { strings } from '../i18n';
@@ -25,12 +26,20 @@ export const layeredXyVisFunction: LayeredXyVisFn = {
   args: {
     ...commonXYArgs,
     layers: {
-      types: [EXTENDED_DATA_LAYER, REFERENCE_LINE_LAYER, EXTENDED_ANNOTATION_LAYER],
+      types: [EXTENDED_DATA_LAYER, REFERENCE_LINE_LAYER, EXTENDED_ANNOTATION_LAYER, REFERENCE_LINE],
       help: i18n.translate('expressionXY.layeredXyVis.layers.help', {
         defaultMessage: 'Layers of visual series',
       }),
       multi: true,
     },
+    splitColumnAccessor: {
+      types: ['vis_dimension', 'string'],
+      help: strings.getSplitColumnAccessorHelp(),
+    },
+    splitRowAccessor: {
+      types: ['vis_dimension', 'string'],
+      help: strings.getSplitRowAccessorHelp(),
+    },
   },
   async fn(data, args, handlers) {
     const { layeredXyVisFn } = await import('./layered_xy_vis_fn');

diff --git a/src/plugins/chart_expressions/expression_xy/common/i18n/index.tsx b/src/plugins/chart_expressions/expression_xy/common/i18n/index.tsx
@@ -117,6 +117,10 @@ export const strings = {
     i18n.translate('expressionXY.xyVis.splitRowAccessor.help', {
       defaultMessage: 'Specifies split row of the xy chart',
     }),
+  getHandleEmptyXAccessorHelp: () =>
+    i18n.translate('expressionXY.xyVis.splitRowAccessor.help', {
+      defaultMessage: 'Allow handling empty x accessor',
+    }),
   getLayersHelp: () =>
     i18n.translate('expressionXY.layeredXyVis.layers.help', {
       defaultMessage: 'Layers of visual series',

diff --git a/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_xy/common/types/expression_functions.ts
@@ -130,6 +130,7 @@ export interface DataLayerArgs {
   isHorizontal: boolean;
   palette: PaletteOutput;
   decorations?: DataDecorationConfigResult[];
+  curveType?: XYCurveType;
 }
 
 export interface ValidLayer extends DataLayerConfigResult {
@@ -138,12 +139,12 @@ export interface ValidLayer extends DataLayerConfigResult {
 
 export interface ExtendedDataLayerArgs {
   layerId?: string;
-  accessors: string[];
+  accessors: Array<ExpressionValueVisDimension | string>;
   seriesType: SeriesType;
-  xAccessor?: string;
+  xAccessor?: string | ExpressionValueVisDimension;
   simpleView?: boolean;
-  splitAccessors?: string[];
-  markSizeAccessor?: string;
+  splitAccessors?: Array<ExpressionValueVisDimension | string>;
+  markSizeAccessor?: string | ExpressionValueVisDimension;
   lineWidth?: number;
   showPoints?: boolean;
   showLines?: boolean;
@@ -157,7 +158,7 @@ export interface ExtendedDataLayerArgs {
   palette: PaletteOutput;
   // palette will always be set on the expression
   decorations?: DataDecorationConfigResult[];
-  table?: Datatable;
+  curveType?: XYCurveType;
 }
 
 export interface LegendConfig {
@@ -215,7 +216,6 @@ export interface XYArgs extends DataLayerArgs {
   referenceLines: ReferenceLineConfigResult[];
   annotationLayers: AnnotationLayerConfigResult[];
   fittingFunction?: FittingFunction;
-  curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
@@ -230,6 +230,7 @@ export interface XYArgs extends DataLayerArgs {
   detailedTooltip?: boolean;
   orderBucketsBySum?: boolean;
   showTooltip: boolean;
+  handleEmptyXAccessor?: boolean;
 }
 
 export interface LayeredXYArgs {
@@ -239,7 +240,6 @@ export interface LayeredXYArgs {
   valueLabels: ValueLabelMode;
   layers?: XYExtendedLayerConfigResult[];
   fittingFunction?: FittingFunction;
-  curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
@@ -252,6 +252,9 @@ export interface LayeredXYArgs {
   minTimeBarInterval?: string;
   orderBucketsBySum?: boolean;
   showTooltip: boolean;
+  splitRowAccessor?: ExpressionValueVisDimension | string;
+  splitColumnAccessor?: ExpressionValueVisDimension | string;
+  handleEmptyXAccessor?: boolean;
 }
 
 export interface XYProps {
@@ -261,7 +264,6 @@ export interface XYProps {
   valueLabels: ValueLabelMode;
   layers: CommonXYLayerConfig[];
   fittingFunction?: FittingFunction;
-  curveType?: XYCurveType;
   fillOpacity?: number;
   hideEndzones?: boolean;
   valuesInLegend?: boolean;
@@ -276,6 +278,7 @@ export interface XYProps {
   detailedTooltip?: boolean;
   orderBucketsBySum?: boolean;
   showTooltip: boolean;
+  handleEmptyXAccessor?: boolean;
 }
 
 export interface AnnotationLayerArgs {
@@ -317,12 +320,14 @@ export type XYLayerConfig = DataLayerConfig | ReferenceLineConfig | AnnotationLa
 export type XYExtendedLayerConfig =
   | ExtendedDataLayerConfig
   | ReferenceLineLayerConfig
-  | ExtendedAnnotationLayerConfig;
+  | ExtendedAnnotationLayerConfig
+  | ReferenceLineConfig;
 
 export type XYExtendedLayerConfigResult =
   | ExtendedDataLayerConfigResult
   | ReferenceLineLayerConfigResult
-  | ExtendedAnnotationLayerConfigResult;
+  | ExtendedAnnotationLayerConfigResult
+  | ReferenceLineConfigResult;
 
 export interface ExtendedReferenceLineDecorationConfig extends ReferenceLineArgs {
   type: typeof EXTENDED_REFERENCE_LINE_DECORATION_CONFIG;

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/data_layers.tsx b/src/plugins/chart_expressions/expression_xy/public/components/data_layers.tsx
@@ -22,7 +22,6 @@ import {
   EndValue,
   FittingFunction,
   ValueLabelMode,
-  XYCurveType,
   XScaleType,
 } from '../../common';
 import { SeriesTypes, ValueLabelModes, AxisModes } from '../../common/constants';
@@ -42,7 +41,6 @@ interface Props {
   formatFactory: FormatFactory;
   chartHasMoreThanOneBarSeries?: boolean;
   yAxesConfiguration: GroupsConfiguration;
-  curveType?: XYCurveType;
   fittingFunction?: FittingFunction;
   endValue?: EndValue | undefined;
   paletteService: PaletteRegistry;
@@ -55,14 +53,14 @@ interface Props {
   valueLabels: ValueLabelMode;
   defaultXScaleType: XScaleType;
   fieldFormats: LayersFieldFormats;
+  handleEmptyXAccessor?: boolean;
 }
 
 export const DataLayers: FC<Props> = ({
   titles = {},
   layers,
   endValue,
   timeZone,
-  curveType,
   syncColors,
   valueLabels,
   fillOpacity,
@@ -76,6 +74,7 @@ export const DataLayers: FC<Props> = ({
   chartHasMoreThanOneBarSeries,
   defaultXScaleType,
   fieldFormats,
+  handleEmptyXAccessor,
 }) => {
   const colorAssignments = getColorAssignments(layers, titles, fieldFormats, formattedDatatables);
   return (
@@ -118,11 +117,12 @@ export const DataLayers: FC<Props> = ({
             fillOpacity,
             defaultXScaleType,
             fieldFormats,
+            handleEmptyXAccessor,
           });
 
           const index = `${layer.layerId}-${accessorIndex}`;
 
-          const curve = curveType ? CurveType[curveType] : undefined;
+          const curve = layer.curveType ? CurveType[layer.curveType] : undefined;
 
           switch (seriesType) {
             case SeriesTypes.LINE:

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/split_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/split_chart.tsx
@@ -9,41 +9,19 @@
 import React, { useCallback } from 'react';
 import { GroupBy, SmallMultiples, Predicate } from '@elastic/charts';
 import { ExpressionValueVisDimension } from '@kbn/visualizations-plugin/common';
-import {
-  getAccessorByDimension,
-  getColumnByAccessor,
-} from '@kbn/visualizations-plugin/common/utils';
+import { getColumnByAccessor } from '@kbn/visualizations-plugin/common/utils';
 import { Datatable } from '@kbn/expressions-plugin/public';
-import { SerializedFieldFormat } from '@kbn/field-formats-plugin/common';
-import { FormatFactory } from '../types';
 
 interface SplitChartProps {
   splitColumnAccessor?: ExpressionValueVisDimension | string;
   splitRowAccessor?: ExpressionValueVisDimension | string;
   columns: Datatable['columns'];
-  formatFactory: FormatFactory;
-  fieldFormats: Record<string, SerializedFieldFormat | undefined>;
 }
 
 const SPLIT_COLUMN = '__split_column__';
 const SPLIT_ROW = '__split_row__';
 
-export const SplitChart = ({
-  splitColumnAccessor,
-  splitRowAccessor,
-  columns,
-  fieldFormats,
-  formatFactory,
-}: SplitChartProps) => {
-  const format = useCallback(
-    (value: unknown, accessor: ExpressionValueVisDimension | string) => {
-      const formatParams = fieldFormats[getAccessorByDimension(accessor, columns)];
-      const formatter = formatFactory(formatParams);
-      return formatter.convert(value);
-    },
-    [columns, formatFactory, fieldFormats]
-  );
-
+export const SplitChart = ({ splitColumnAccessor, splitRowAccessor, columns }: SplitChartProps) => {
   const getData = useCallback(
     (datum: Record<string, any>, accessor: ExpressionValueVisDimension | string) => {
       const splitColumn = getColumnByAccessor(accessor, columns);
@@ -59,15 +37,13 @@ export const SplitChart = ({
           id={SPLIT_COLUMN}
           by={(spec, datum) => getData(datum, splitColumnAccessor)}
           sort={Predicate.DataIndex}
-          format={(value) => format(value, splitColumnAccessor)}
         />
       )}
       {splitRowAccessor && (
         <GroupBy
           id={SPLIT_ROW}
           by={(spec, datum) => getData(datum, splitRowAccessor)}
           sort={Predicate.DataIndex}
-          format={(value) => format(value, splitRowAccessor)}
         />
       )}
       <SmallMultiples

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.test.tsx b/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.test.tsx
@@ -31,7 +31,7 @@ const getSeriesIdentifier = ({
   splitColumnAccessor?: string;
   seriesSplitAccessors: Map<number | string, number | string>;
 }): XYChartSeriesIdentifier => ({
-  specId: generateSeriesId({ layerId, xAccessor }, splitAccessors, yAccessor),
+  specId: generateSeriesId({ layerId }, splitAccessors, yAccessor, xAccessor),
   yAccessor: yAccessor ?? 'a',
   splitAccessors: seriesSplitAccessors,
   seriesKeys: [],