Small multiples in vis_type_xy plugin

docs/management/advanced-options.asciidoc

@@ -454,7 +454,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/vis_type_xy/public/chart_splitter.tsx

@@ -0,0 +1,54 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+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

@@ -27,19 +27,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,
@@ -48,10 +49,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}`,
@@ -91,6 +89,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

@@ -22,4 +22,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

@@ -40,14 +40,23 @@ 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 && splitColumn?.length > 0
+        ? getAspectsFromDimension(columns, splitColumn[0])
+        : undefined,
+    splitRow:
+      splitRow && splitRow?.length > 0 ? getAspectsFromDimension(columns, splitRow[0]) : undefined,
   };
 }
 

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

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

src/plugins/vis_type_xy/public/utils/accessors.tsx

@@ -37,24 +37,23 @@ const getFieldName = (fieldName: string, index?: number) => {
   return `${fieldName}${indexStr}`;
 };
 
+export const isRangeAggType = (type: string | null) =>
+  type === BUCKET_TYPES.DATE_RANGE || type === BUCKET_TYPES.RANGE;
+
 /**
  * Returns accessor function for complex accessor types
  * @param aspect
+ * @param isComplex - forces to be functional/complex accessor
  */
-export const getComplexAccessor = (fieldName: string) => (
+export const getComplexAccessor = (fieldName: string, isComplex: boolean = false) => (
   aspect: Aspect,
   index?: number
 ): Accessor | AccessorFn | undefined => {
   if (!aspect.accessor) {
     return;
   }
 
-  if (
-    !(
-      (aspect.aggType === BUCKET_TYPES.DATE_RANGE || aspect.aggType === BUCKET_TYPES.RANGE) &&
-      aspect.formatter
-    )
-  ) {
+  if (!((isComplex || isRangeAggType(aspect.aggType)) && aspect.formatter)) {
     return aspect.accessor;
   }
 

src/plugins/vis_type_xy/public/vis_component.tsx

@@ -74,6 +74,7 @@ import {
   getComplexAccessor,
   getSplitSeriesAccessorFnMap,
 } from './utils/accessors';
+import { ChartSplitter } from './chart_splitter';
 
 export interface VisComponentProps {
   visParams: VisParams;
@@ -265,6 +266,12 @@ const VisComponent = (props: VisComponentProps) => {
   const splitSeriesAccessors = config.aspects.series
     ? compact(config.aspects.series.map(getComplexAccessor(COMPLEX_SPLIT_ACCESSOR)))
     : [];
+  const splitChartColumnAccessor = config.aspects.splitColumn
+    ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR, true)(config.aspects.splitColumn)
+    : undefined;
+  const splitChartRowAccessor = config.aspects.splitRow
+    ? getComplexAccessor(COMPLEX_SPLIT_ACCESSOR, true)(config.aspects.splitRow)
+    : undefined;
 
   return (
     <div className="xyChart__container" data-test-subj="visTypeXyChart">
@@ -274,6 +281,10 @@ const VisComponent = (props: VisComponentProps) => {
         legendPosition={legendPosition}
       />
       <Chart size="100%">
+        <ChartSplitter
+          splitColumnAccessor={splitChartColumnAccessor}
+          splitRowAccessor={splitChartRowAccessor}
+        />
         <XYSettings
           {...config}
           showLegend={showLegend}

src/plugins/vis_type_xy/public/vis_renderer.tsx

@@ -27,7 +27,6 @@ import { VisualizationContainer } from '../../visualizations/public';
 import type { PersistedState } from '../../visualizations/public';
 
 import { XyVisType } from '../common';
-import { SplitChartWarning } from './components/split_chart_warning';
 import { VisComponentType } from './vis_component';
 import { RenderValue, visName } from './xy_vis_fn';
 
@@ -47,23 +46,19 @@ export const xyVisRenderer: ExpressionRenderDefinition<RenderValue> = {
   reuseDomNode: true,
   render: (domNode, { visData, visConfig, visType }, handlers) => {
     const showNoResult = shouldShowNoResultsMessage(visData, visType);
-    const isSplitChart = Boolean(visConfig.dimensions.splitRow || visConfig.dimensions.splitRow);
 
     handlers.onDestroy(() => unmountComponentAtNode(domNode));
     render(
       <I18nProvider>
-        <>
-          {isSplitChart && <SplitChartWarning />}
-          <VisualizationContainer handlers={handlers} showNoResult={showNoResult || isSplitChart}>
-            <VisComponent
-              visParams={visConfig}
-              visData={visData}
-              renderComplete={handlers.done}
-              fireEvent={handlers.event}
-              uiState={handlers.uiState as PersistedState}
-            />
-          </VisualizationContainer>
-        </>
+        <VisualizationContainer handlers={handlers} showNoResult={showNoResult}>
+          <VisComponent
+            visParams={visConfig}
+            visData={visData}
+            renderComplete={handlers.done}
+            fireEvent={handlers.event}
+            uiState={handlers.uiState as PersistedState}
+          />
+        </VisualizationContainer>
       </I18nProvider>,
       domNode
     );

src/plugins/vis_type_xy/public/vis_types/area.tsx → src/plugins/vis_type_xy/public/vis_types/area.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import React from 'react';
-
 import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
@@ -42,7 +40,6 @@ import { toExpressionAst } from '../to_ast';
 import { ChartType } from '../../common';
 import { getConfigCollections } from '../editor/collections';
 import { getOptionTabs } from '../editor/common_config';
-import { SplitTooltip } from './split_tooltip';
 
 export const getAreaVisTypeDefinition = (
   showElasticChartsOptions = false
@@ -189,12 +186,6 @@ export const getAreaVisTypeDefinition = (
         min: 0,
         max: 1,
         aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-        // TODO: Remove when split chart aggs are supported
-        // https://github.com/elastic/kibana/issues/82496
-        ...(showElasticChartsOptions && {
-          disabled: true,
-          tooltip: <SplitTooltip />,
-        }),
       },
     ]),
   },

src/plugins/vis_type_xy/public/vis_types/histogram.tsx → src/plugins/vis_type_xy/public/vis_types/histogram.ts

@@ -17,8 +17,6 @@
  * under the License.
  */
 
-import React from 'react';
-
 import { i18n } from '@kbn/i18n';
 // @ts-ignore
 import { euiPaletteColorBlind } from '@elastic/eui/lib/services';
@@ -42,7 +40,6 @@ import { ChartType } from '../../common';
 import { getConfigCollections } from '../editor/collections';
 import { getOptionTabs } from '../editor/common_config';
 import { defaultCountLabel, LabelRotation } from '../../../charts/public';
-import { SplitTooltip } from './split_tooltip';
 
 export const getHistogramVisTypeDefinition = (
   showElasticChartsOptions = false
@@ -192,12 +189,6 @@ export const getHistogramVisTypeDefinition = (
         min: 0,
         max: 1,
         aggFilter: ['!geohash_grid', '!geotile_grid', '!filter'],
-        // TODO: Remove when split chart aggs are supported
-        // https://github.com/elastic/kibana/issues/82496
-        ...(showElasticChartsOptions && {
-          disabled: true,
-          tooltip: <SplitTooltip />,
-        }),
       },
     ]),
   },