Fix Percentile aggragtion

elastic · Aug 9, 2022 · 99ae23f · 99ae23f
1 parent 4a5d053
commit 99ae23f
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 39 deletions.
diff --git a/...ns/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap b/...ns/chart_expressions/expression_xy/public/components/__snapshots__/xy_chart.test.tsx.snap
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
@@ -110,10 +110,22 @@ export const DataLayers: FC<Props> = ({
     : getColorAssignments(layers, titles, fieldFormats, formattedDatatables);
   return (
     <>
-      {layers.flatMap((layer) =>
-        layer.accessors.map((accessor, accessorIndex) => {
-          const { seriesType, columnToLabel, layerId, table } = layer;
-          const yColumnId = getAccessorByDimension(accessor, table.columns);
+      {layers.flatMap((layer) => {
+        const yPercentileAccessors: string[] = [];
+        const yAccessors: string[] = [];
+        layer.accessors.forEach((accessor) => {
+          const columnId = getAccessorByDimension(accessor, layer.table.columns);
+          if (columnId.includes('.')) {
+            yPercentileAccessors.push(columnId);
+          } else {
+            yAccessors.push(columnId);
+          }
+        });
+        return (
+          yPercentileAccessors.length ? [...yAccessors, yPercentileAccessors] : [...yAccessors]
+        ).map((accessor, accessorIndex) => {
+          const { seriesType, columnToLabel, layerId } = layer;
+          const yColumnId = Array.isArray(accessor) ? accessor[0] : accessor;
           const columnToLabelMap: Record<string, string> = columnToLabel
             ? JSON.parse(columnToLabel)
             : {};
@@ -134,7 +146,7 @@ export const DataLayers: FC<Props> = ({
           const seriesProps = getSeriesProps({
             layer,
             titles: titles[layer.layerId],
-            accessor: yColumnId,
+            accessor,
             chartHasMoreThanOneBarSeries,
             colorAssignments,
             formatFactory,
@@ -194,8 +206,8 @@ export const DataLayers: FC<Props> = ({
                 />
               );
           }
-        })
-      )}
+        });
+      })}
     </>
   );
 };
diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_action.tsx
@@ -24,7 +24,8 @@ export const getLegendAction = (
   onFilter: (data: FilterEvent['data']) => void,
   fieldFormats: LayersFieldFormats,
   formattedDatatables: DatatablesWithFormatInfo,
-  titles: LayersAccessorsTitles
+  titles: LayersAccessorsTitles,
+  singleTable?: boolean
 ): LegendAction =>
   React.memo(({ series: [xySeries] }) => {
     const series = xySeries as XYChartSeriesIdentifier;
@@ -35,6 +36,7 @@ export const getLegendAction = (
         )
       )
     );
+    const allYAccessors = dataLayers.flatMap((dataLayer) => dataLayer.accessors);
 
     if (layerIndex === -1) {
       return null;
@@ -78,7 +80,7 @@ export const getLegendAction = (
             series,
             {
               splitAccessors: layer.splitAccessors,
-              accessorsCount: layer.accessors.length,
+              accessorsCount: singleTable ? allYAccessors.length : layer.accessors.length,
               columns: table.columns,
               splitAccessorsFormats: fieldFormats[layer.layerId].splitSeriesAccessors,
               alreadyFormattedColumns: formattedDatatables[layer.layerId].formattedColumns,

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/legend_color_picker.tsx b/src/plugins/chart_expressions/expression_xy/public/components/legend_color_picker.tsx
@@ -43,6 +43,7 @@ export interface LegendColorPickerWrapperContextType {
   formattedDatatables: DatatablesWithFormatInfo;
   titles: LayersAccessorsTitles;
   fieldFormats: LayersFieldFormats;
+  singleTable?: boolean;
 }
 
 export const LegendColorPickerWrapperContext = createContext<
@@ -73,16 +74,18 @@ export const LegendColorPickerWrapper: LegendColorPicker = ({
     titles,
     formattedDatatables,
     fieldFormats,
+    singleTable,
   } = colorPickerWrappingContext;
   const { layerId } = getMetaFromSeriesId(seriesIdentifier.specId);
 
   const layer = dataLayers.find((dataLayer) => dataLayer.layerId === layerId);
+  const allYAccessors = dataLayers.flatMap((dataLayer) => dataLayer.accessors);
   const seriesName = layer
     ? getSeriesName(
         seriesIdentifier as XYChartSeriesIdentifier,
         {
           splitAccessors: layer.splitAccessors ?? [],
-          accessorsCount: layer.accessors.length,
+          accessorsCount: singleTable ? allYAccessors.length : layer.accessors.length,
           columns: formattedDatatables[layer.layerId].table.columns,
           splitAccessorsFormats: fieldFormats[layer.layerId].splitSeriesAccessors,
           alreadyFormattedColumns: formattedDatatables[layer.layerId].formattedColumns,

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx b/src/plugins/chart_expressions/expression_xy/public/components/tooltip/tooltip.tsx
@@ -56,7 +56,7 @@ export const Tooltip: FC<Props> = ({
 
   const data: TooltipData[] = [];
   const seriesIdentifier = pickedValue.seriesIdentifier as XYChartSeriesIdentifier;
-  const { layerId, xAccessor, yAccessor } = getMetaFromSeriesId(seriesIdentifier.specId);
+  const { layerId, xAccessor, yAccessors } = getMetaFromSeriesId(seriesIdentifier.specId);
   const { formattedColumns, table } = formattedDatatables[layerId];
   const layerTitles = titles[layerId];
   const layerFormats = fieldFormats[layerId];
@@ -75,7 +75,9 @@ export const Tooltip: FC<Props> = ({
     });
   }
 
-  const tooltipYAccessor = yAccessor === seriesIdentifier.yAccessor ? yAccessor : null;
+  const tooltipYAccessor = yAccessors.includes(seriesIdentifier.yAccessor as string)
+    ? (seriesIdentifier.yAccessor as string)
+    : null;
   if (tooltipYAccessor) {
     const yFormatter = formatFactory(layerFormats.yAccessors[tooltipYAccessor]);
     data.push({

diff --git a/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx b/src/plugins/chart_expressions/expression_xy/public/components/xy_chart.tsx
@@ -737,6 +737,7 @@ export function XYChart({
           formattedDatatables,
           titles,
           fieldFormats,
+          singleTable,
         }}
       >
         <Chart ref={chartRef}>
@@ -827,7 +828,8 @@ export function XYChart({
                     onClickValue,
                     fieldFormats,
                     formattedDatatables,
-                    titles
+                    titles,
+                    singleTable
                   )
                 : undefined
             }

diff --git a/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx b/src/plugins/chart_expressions/expression_xy/public/helpers/data_layers.tsx
@@ -38,7 +38,7 @@ type SeriesSpec = LineSeriesProps & BarSeriesProps & AreaSeriesProps;
 type GetSeriesPropsFn = (config: {
   layer: CommonXYDataLayerConfig;
   titles?: LayerAccessorsTitles;
-  accessor: string;
+  accessor: string | string[];
   chartHasMoreThanOneBarSeries?: boolean;
   formatFactory: FormatFactory;
   colorAssignments: ColorAssignments;
@@ -74,7 +74,6 @@ type GetColorFn = (
   seriesIdentifier: XYChartSeriesIdentifier,
   config: {
     layer: CommonXYDataLayerConfig;
-    accessor: string;
     colorAssignments: ColorAssignments;
     paletteService: PaletteRegistry;
     getSeriesNameFn: (d: XYChartSeriesIdentifier) => SeriesName;
@@ -309,11 +308,11 @@ const getLineConfig: GetLineConfigFn = ({ showLines, lineWidth }) => ({
 
 const getColor: GetColorFn = (
   series,
-  { layer, accessor, colorAssignments, paletteService, syncColors, getSeriesNameFn },
+  { layer, colorAssignments, paletteService, syncColors, getSeriesNameFn },
   uiState,
   singleTable
 ) => {
-  const overwriteColor = getSeriesColor(layer, accessor);
+  const overwriteColor = getSeriesColor(layer, series.yAccessor as string);
   if (overwriteColor !== null) {
     return overwriteColor;
   }
@@ -348,6 +347,7 @@ const getColor: GetColorFn = (
 
 const EMPTY_ACCESSOR = '-';
 const SPLIT_CHAR = ':';
+const SPLIT_Y_ACCESSORS = '|';
 
 export const generateSeriesId = (
   { layerId }: Pick<CommonXYDataLayerConfig, 'layerId'>,
@@ -360,11 +360,11 @@ export const generateSeriesId = (
   );
 
 export const getMetaFromSeriesId = (seriesId: string) => {
-  const [layerId, xAccessor, yAccessor, ...splitAccessors] = seriesId.split(SPLIT_CHAR);
+  const [layerId, xAccessor, yAccessors, ...splitAccessors] = seriesId.split(SPLIT_CHAR);
   return {
     layerId,
     xAccessor: xAccessor === EMPTY_ACCESSOR ? undefined : xAccessor,
-    yAccessor,
+    yAccessors: yAccessors.split(SPLIT_Y_ACCESSORS),
     splitAccessor: splitAccessors[0] === EMPTY_ACCESSOR ? undefined : splitAccessors,
   };
 };
@@ -411,7 +411,9 @@ export const getSeriesProps: GetSeriesPropsFn = ({
     (isStacked || !splitColumnIds.length) &&
     (isStacked || !isBarChart || !chartHasMoreThanOneBarSeries);
 
-  const formatter = table?.columns.find((column) => column.id === accessor)?.meta?.params;
+  const formatter = table?.columns.find(
+    (column) => column.id === (Array.isArray(accessor) ? accessor[0] : accessor)
+  )?.meta?.params;
 
   const markSizeColumnId = markSizeAccessor
     ? getAccessorByDimension(markSizeAccessor, table.columns)
@@ -433,7 +435,9 @@ export const getSeriesProps: GetSeriesPropsFn = ({
       !(xColumnId && row[xColumnId] === undefined) &&
       !(
         splitColumnIds.some((splitColumnId) => row[splitColumnId] === undefined) &&
-        row[accessor] === undefined
+        (Array.isArray(accessor)
+          ? accessor.some((a) => row[a] === undefined)
+          : row[accessor] === undefined)
       )
   );
 
@@ -471,11 +475,11 @@ export const getSeriesProps: GetSeriesPropsFn = ({
     id: generateSeriesId(
       layer,
       splitColumnIds.length ? splitColumnIds : [EMPTY_ACCESSOR],
-      accessor,
+      Array.isArray(accessor) ? accessor.join(SPLIT_Y_ACCESSORS) : accessor,
       xColumnId
     ),
     xAccessor: xColumnId || 'unifiedX',
-    yAccessors: [accessor],
+    yAccessors: Array.isArray(accessor) ? accessor : [accessor],
     markSizeAccessor: markSizeColumnId,
     markFormat: (value) => markFormatter.convert(value),
     data: rows,
@@ -489,7 +493,6 @@ export const getSeriesProps: GetSeriesPropsFn = ({
         series,
         {
           layer,
-          accessor,
           colorAssignments,
           paletteService,
           getSeriesNameFn,

diff --git a/src/plugins/vis_types/xy/public/to_ast.ts b/src/plugins/vis_types/xy/public/to_ast.ts
@@ -423,23 +423,35 @@ export const toExpressionAst: VisToExpressionAst<VisParams> = async (vis, params
     });
   }
 
+  const series = finalSeriesParams.reduce<Record<string, any>>((acc, param) => {
+    if (param.show && yAccessors[param.data.id]) {
+      if (param.valueAxis && acc[param.valueAxis]) {
+        acc[param.valueAxis].yAccessors.push(...yAccessors[param.data.id]);
+      } else {
+        acc[param.valueAxis] = {
+          ...param,
+          yAccessors: [...yAccessors[param.data.id]],
+        };
+      }
+    }
+    return acc;
+  }, {});
+
   const visTypeXy = buildExpressionFunction('layeredXyVis', {
     layers: [
-      ...finalSeriesParams
-        .filter((seriesParam) => seriesParam.show && yAccessors[seriesParam.data.id])
-        .map((seriesParam) =>
-          prepareLayers(
-            seriesParam,
-            isHistogram,
-            vis.params.valueAxes,
-            yAccessors[seriesParam.data.id],
-            dimensions.x,
-            dimensions.series,
-            dimensions.z ? dimensions.z[0] : undefined,
-            vis.params.palette,
-            xScale
-          )
-        ),
+      ...Object.keys(series).map((key) =>
+        prepareLayers(
+          series[key],
+          isHistogram,
+          vis.params.valueAxes,
+          series[key].yAccessors,
+          dimensions.x,
+          dimensions.series,
+          dimensions.z ? dimensions.z[0] : undefined,
+          vis.params.palette,
+          xScale
+        )
+      ),
       ...(vis.params.thresholdLine.show
         ? [prepareReferenceLine(vis.params.thresholdLine, vis.params.valueAxes[0].id)]
         : []),