Small multiples in vis_type_xy plugin

docs/management/advanced-options.asciidoc

@@ -458,7 +458,7 @@ of buckets to try to represent.
 
 [horizontal]
 [[visualization-visualize-chartslibrary]]`visualization:visualize:legacyChartsLibrary`::
-Enables legacy charts library for area, line and bar charts in visualize. Currently, only legacy charts library supports split chart aggregation.
+Enables legacy charts library for area, line and bar charts in visualize.
 
 [[visualization-colormapping]]`visualization:colorMapping`::
 **This setting is deprecated and will not be supported as of 8.0.**

src/plugins/charts/public/static/utils/transform_click_event.ts

@@ -30,6 +30,9 @@ export interface BrushTriggerEvent {
 
 type AllSeriesAccessors = Array<[accessor: Accessor | AccessorFn, value: string | number]>;
 
+// TODO: replace when exported from elastic/charts
+const DEFAULT_SINGLE_PANEL_SM_VALUE = '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__';
+
 /**
  * returns accessor value from string or function accessor
  * @param datum
@@ -82,6 +85,29 @@ const getAllSplitAccessors = (
     value,
   ]);
 
+/**
+ * Gets value from small multiple accessors
+ *
+ * Only handles single small multiple accessor
+ */
+function getSplitChartValue({
+  smHorizontalAccessorValue,
+  smVerticalAccessorValue,
+}: Pick<XYChartSeriesIdentifier, 'smHorizontalAccessorValue' | 'smVerticalAccessorValue'>):
+  | string
+  | number
+  | undefined {
+  if (smHorizontalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE) {
+    return smHorizontalAccessorValue;
+  }
+
+  if (smVerticalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE) {
+    return smVerticalAccessorValue;
+  }
+
+  return;
+}
+
 /**
  * Reduces matching column indexes
  *
@@ -92,7 +118,8 @@ const getAllSplitAccessors = (
 const columnReducer = (
   xAccessor: Accessor | AccessorFn | null,
   yAccessor: Accessor | AccessorFn | null,
-  splitAccessors: AllSeriesAccessors
+  splitAccessors: AllSeriesAccessors,
+  splitChartAccessor?: Accessor | AccessorFn
 ) => (
   acc: Array<[index: number, id: string]>,
   { id }: Datatable['columns'][number],
@@ -101,6 +128,7 @@ const columnReducer = (
   if (
     (xAccessor !== null && validateAccessorId(id, xAccessor)) ||
     (yAccessor !== null && validateAccessorId(id, yAccessor)) ||
+    (splitChartAccessor !== undefined && validateAccessorId(id, splitChartAccessor)) ||
     splitAccessors.some(([accessor]) => validateAccessorId(id, accessor))
   ) {
     acc.push([index, id]);
@@ -121,13 +149,18 @@ const rowFindPredicate = (
   geometry: GeometryValue | null,
   xAccessor: Accessor | AccessorFn | null,
   yAccessor: Accessor | AccessorFn | null,
-  splitAccessors: AllSeriesAccessors
+  splitAccessors: AllSeriesAccessors,
+  splitChartAccessor?: Accessor | AccessorFn,
+  splitChartValue?: string | number
 ) => (row: Datatable['rows'][number]): boolean =>
   (geometry === null ||
     (xAccessor !== null &&
       getAccessorValue(row, xAccessor) === geometry.x &&
       yAccessor !== null &&
-      getAccessorValue(row, yAccessor) === geometry.y)) &&
+      getAccessorValue(row, yAccessor) === geometry.y &&
+      (splitChartAccessor === undefined ||
+        (splitChartValue !== undefined &&
+          getAccessorValue(row, splitChartAccessor) === splitChartValue)))) &&
   [...splitAccessors].every(([accessor, value]) => getAccessorValue(row, accessor) === value);
 
 /**
@@ -142,19 +175,28 @@ export const getFilterFromChartClickEventFn = (
   table: Datatable,
   xAccessor: Accessor | AccessorFn,
   splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  splitChartAccessor?: Accessor | AccessorFn,
   negate: boolean = false
 ) => (points: Array<[GeometryValue, XYChartSeriesIdentifier]>): ClickTriggerEvent => {
   const data: ValueClickContext['data']['data'] = [];
 
   points.forEach((point) => {
     const [geometry, { yAccessor, splitAccessors }] = point;
+    const splitChartValue = getSplitChartValue(point[1]);
     const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
     const columns = table.columns.reduce<Array<[index: number, id: string]>>(
-      columnReducer(xAccessor, yAccessor, allSplitAccessors),
+      columnReducer(xAccessor, yAccessor, allSplitAccessors, splitChartAccessor),
       []
     );
     const row = table.rows.findIndex(
-      rowFindPredicate(geometry, xAccessor, yAccessor, allSplitAccessors)
+      rowFindPredicate(
+        geometry,
+        xAccessor,
+        yAccessor,
+        allSplitAccessors,
+        splitChartAccessor,
+        splitChartValue
+      )
     );
     const newData = columns.map(([column, id]) => ({
       table,
@@ -179,16 +221,20 @@ export const getFilterFromChartClickEventFn = (
  * Helper function to get filter action event from series
  */
 export const getFilterFromSeriesFn = (table: Datatable) => (
-  { splitAccessors }: XYChartSeriesIdentifier,
+  { splitAccessors, ...rest }: XYChartSeriesIdentifier,
   splitSeriesAccessorFnMap?: Map<string | number, AccessorFn>,
+  splitChartAccessor?: Accessor | AccessorFn,
   negate = false
 ): ClickTriggerEvent => {
+  const splitChartValue = getSplitChartValue(rest);
   const allSplitAccessors = getAllSplitAccessors(splitAccessors, splitSeriesAccessorFnMap);
   const columns = table.columns.reduce<Array<[index: number, id: string]>>(
-    columnReducer(null, null, allSplitAccessors),
+    columnReducer(null, null, allSplitAccessors, splitChartAccessor),
     []
   );
-  const row = table.rows.findIndex(rowFindPredicate(null, null, null, allSplitAccessors));
+  const row = table.rows.findIndex(
+    rowFindPredicate(null, null, null, allSplitAccessors, splitChartAccessor, splitChartValue)
+  );
   const data: ValueClickContext['data']['data'] = columns.map(([column, id]) => ({
     table,
     column,

src/plugins/vis_type_vislib/public/vislib/lib/axis/axis_scale.js

@@ -7,7 +7,7 @@
  */
 
 import d3 from 'd3';
-import _ from 'lodash';
+import { isNumber, reduce, times } from 'lodash';
 import moment from 'moment';
 
 import { InvalidLogScaleValues } from '../../errors';
@@ -62,7 +62,7 @@ export class AxisScale {
 
     return d3[extent](
       opts.reduce(function (opts, v) {
-        if (!_.isNumber(v)) v = +v;
+        if (!isNumber(v)) v = +v;
         if (!isNaN(v)) opts.push(v);
         return opts;
       }, [])
@@ -90,7 +90,7 @@ export class AxisScale {
     const y = moment(x);
     const method = n > 0 ? 'add' : 'subtract';
 
-    _.times(Math.abs(n), function () {
+    times(Math.abs(n), function () {
       y[method](interval);
     });
 
@@ -100,7 +100,7 @@ export class AxisScale {
   getAllPoints() {
     const config = this.axisConfig;
     const data = this.visConfig.data.chartData();
-    const chartPoints = _.reduce(
+    const chartPoints = reduce(
       data,
       (chartPoints, chart, chartIndex) => {
         const points = chart.series.reduce((points, seri, seriIndex) => {
@@ -254,6 +254,6 @@ export class AxisScale {
   }
 
   validateScale(scale) {
-    if (!scale || _.isNaN(scale)) throw new Error('scale is ' + scale);
+    if (!scale || Number.isNaN(scale)) throw new Error('scale is ' + scale);
   }
 }

src/plugins/vis_type_xy/public/chart_splitter.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
+ * and the Server Side Public License, v 1; you may not use this file except in
+ * compliance with, at your election, the Elastic License or the Server Side
+ * Public License, v 1.
+ */
+
+import React from 'react';
+import { Accessor, AccessorFn, GroupBy, GroupBySort, SmallMultiples } from '@elastic/charts';
+
+interface ChartSplitterProps {
+  splitColumnAccessor?: Accessor | AccessorFn;
+  splitRowAccessor?: Accessor | AccessorFn;
+  sort?: GroupBySort;
+}
+
+export const ChartSplitter = ({
+  splitColumnAccessor,
+  splitRowAccessor,
+  sort,
+}: ChartSplitterProps) =>
+  splitColumnAccessor || splitRowAccessor ? (
+    <>
+      <GroupBy
+        id="__chart_splitter__"
+        by={(spec, datum) => {
+          const splitTypeAccessor = splitColumnAccessor || splitRowAccessor;
+          if (splitTypeAccessor) {
+            return typeof splitTypeAccessor === 'function'
+              ? splitTypeAccessor(datum)
+              : datum[splitTypeAccessor];
+          }
+          return spec.id;
+        }}
+        sort={sort || 'dataIndex'}
+      />
+      <SmallMultiples
+        splitVertically={splitRowAccessor ? '__chart_splitter__' : undefined}
+        splitHorizontally={splitColumnAccessor ? '__chart_splitter__' : undefined}
+      />
+    </>
+  ) : null;

src/plugins/vis_type_xy/public/components/detailed_tooltip.tsx

@@ -16,19 +16,20 @@ import {
   XYChartSeriesIdentifier,
 } from '@elastic/charts';
 
-import { BUCKET_TYPES } from '../../../data/public';
-
 import { Aspects } from '../types';
 
 import './_detailed_tooltip.scss';
 import { fillEmptyValue } from '../utils/get_series_name_fn';
-import { COMPLEX_SPLIT_ACCESSOR } from '../utils/accessors';
+import { COMPLEX_SPLIT_ACCESSOR, isRangeAggType } from '../utils/accessors';
 
 interface TooltipData {
   label: string;
   value: string;
 }
 
+// TODO: replace when exported from elastic/charts
+const DEFAULT_SINGLE_PANEL_SM_VALUE = '__ECH_DEFAULT_SINGLE_PANEL_SM_VALUE__';
+
 const getTooltipData = (
   aspects: Aspects,
   header: TooltipValue | null,
@@ -37,10 +38,7 @@ const getTooltipData = (
   const data: TooltipData[] = [];
 
   if (header) {
-    const xFormatter =
-      aspects.x.aggType === BUCKET_TYPES.DATE_RANGE || aspects.x.aggType === BUCKET_TYPES.RANGE
-        ? null
-        : aspects.x.formatter;
+    const xFormatter = isRangeAggType(aspects.x.aggType) ? null : aspects.x.formatter;
     data.push({
       label: aspects.x.title,
       value: xFormatter ? xFormatter(header.value) : `${header.value}`,
@@ -80,6 +78,28 @@ const getTooltipData = (
     }
   });
 
+  if (
+    aspects.splitColumn &&
+    valueSeries.smHorizontalAccessorValue !== undefined &&
+    valueSeries.smHorizontalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE
+  ) {
+    data.push({
+      label: aspects.splitColumn.title,
+      value: `${valueSeries.smHorizontalAccessorValue}`,
+    });
+  }
+
+  if (
+    aspects.splitRow &&
+    valueSeries.smVerticalAccessorValue !== undefined &&
+    valueSeries.smVerticalAccessorValue !== DEFAULT_SINGLE_PANEL_SM_VALUE
+  ) {
+    data.push({
+      label: aspects.splitRow.title,
+      value: `${valueSeries.smVerticalAccessorValue}`,
+    });
+  }
+
   return data;
 };
 

src/plugins/vis_type_xy/public/components/index.ts

@@ -11,4 +11,3 @@ export { XYEndzones } from './xy_endzones';
 export { XYCurrentTime } from './xy_current_time';
 export { XYSettings } from './xy_settings';
 export { XYThresholdLine } from './xy_threshold_line';
-export { SplitChartWarning } from './split_chart_warning';

src/plugins/vis_type_xy/public/config/get_aspects.ts

@@ -29,14 +29,19 @@ export function getEmptyAspect(): Aspect {
     },
   };
 }
-export function getAspects(columns: DatatableColumn[], { x, y, z, series }: Dimensions): Aspects {
+export function getAspects(
+  columns: DatatableColumn[],
+  { x, y, z, series, splitColumn, splitRow }: Dimensions
+): Aspects {
   const seriesDimensions = Array.isArray(series) || series === undefined ? series : [series];
 
   return {
     x: getAspectsFromDimension(columns, x) ?? getEmptyAspect(),
     y: getAspectsFromDimension(columns, y) ?? [],
     z: z && z?.length > 0 ? getAspectsFromDimension(columns, z[0]) : undefined,
     series: getAspectsFromDimension(columns, seriesDimensions),
+    splitColumn: splitColumn?.length ? getAspectsFromDimension(columns, splitColumn[0]) : undefined,
+    splitRow: splitRow?.length ? getAspectsFromDimension(columns, splitRow[0]) : undefined,
   };
 }
 

src/plugins/vis_type_xy/public/types/config.ts

@@ -43,6 +43,8 @@ export interface Aspects {
   y: Aspect[];
   z?: Aspect;
   series?: Aspect[];
+  splitColumn?: Aspect;
+  splitRow?: Aspect;
 }
 
 export interface AxisGrid {