[Pie] New implementation of the vislib pie chart with es-charts

.github/CODEOWNERS

@@ -24,6 +24,7 @@
 /src/plugins/vis_type_vega/ @elastic/kibana-app
 /src/plugins/vis_type_vislib/ @elastic/kibana-app
 /src/plugins/vis_type_xy/ @elastic/kibana-app
+/src/plugins/vis_type_pie/ @elastic/kibana-app
 /src/plugins/visualize/ @elastic/kibana-app
 /src/plugins/visualizations/ @elastic/kibana-app
 /packages/kbn-tinymath/ @elastic/kibana-app

.i18nrc.json

@@ -61,6 +61,7 @@
     "visTypeVega": "src/plugins/vis_type_vega",
     "visTypeVislib": "src/plugins/vis_type_vislib",
     "visTypeXy": "src/plugins/vis_type_xy",
+    "visTypePie": "src/plugins/vis_type_pie",
     "visualizations": "src/plugins/visualizations",
     "visualize": "src/plugins/visualize",
     "apmOss": "src/plugins/apm_oss",

docs/developer/plugin-list.asciidoc

@@ -261,6 +261,10 @@ The plugin exposes the static DefaultEditorController class to consume.
 |Contains the metric visualization.
 
 
+|{kib-repo}blob/{branch}/src/plugins/vis_type_pie/README.md[visTypePie]
+|Contains the pie chart implementation using the elastic-charts library. The goal is to eventually deprecate the old implementation and keep only this. Until then, the library used is defined by the Legacy charts library advanced setting.
+
+
 |{kib-repo}blob/{branch}/src/plugins/vis_type_table/README.md[visTypeTable]
 |Contains the data table visualization, that allows presenting data in a simple table format.
 

packages/kbn-optimizer/limits.yml

@@ -89,6 +89,7 @@ pageLoadAssetSize:
   visDefaultEditor: 50178
   visTypeMarkdown: 30896
   visTypeMetric: 42790
+  visTypePie: 34051
   visTypeTable: 94934
   visTypeTagcloud: 37575
   visTypeTimelion: 68883

src/plugins/charts/public/index.ts

@@ -14,6 +14,7 @@ export { ChartsPluginSetup, ChartsPluginStart } from './plugin';
 
 export * from './static';
 export * from './services/palettes/types';
+export { lightenColor } from './services/palettes/lighten_color';
 export {
   PaletteOutput,
   CustomPaletteArguments,

src/plugins/charts/public/static/components/color_picker.tsx

@@ -18,7 +18,7 @@ import {
   EuiFlexGroup,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-
+import { lightenColor } from '../../services/palettes/lighten_color';
 import './color_picker.scss';
 
 export const legacyColors: string[] = [
@@ -105,6 +105,14 @@ interface ColorPickerProps {
    * Callback for onKeyPress event
    */
   onKeyDown?: (e: React.KeyboardEvent<HTMLElement>) => void;
+  /**
+   * Optional define the series maxDepth
+   */
+  maxDepth?: number;
+  /**
+   * Optional define the layer index
+   */
+  layerIndex?: number;
 }
 const euiColors = euiPaletteColorBlind({ rotations: 4, order: 'group' });
 
@@ -115,6 +123,8 @@ export const ColorPicker = ({
   useLegacyColors = true,
   colorIsOverwritten = true,
   onKeyDown,
+  maxDepth,
+  layerIndex,
 }: ColorPickerProps) => {
   const legendColors = useLegacyColors ? legacyColors : euiColors;
 
@@ -159,13 +169,18 @@ export const ColorPicker = ({
           ))}
         </EuiFlexGroup>
       </fieldset>
-      {legendColors.some((c) => c === selectedColor) && colorIsOverwritten && (
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty size="s" onClick={(e: any) => onChange(null, e)}>
-            <FormattedMessage id="charts.colorPicker.clearColor" defaultMessage="Reset color" />
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-      )}
+      {legendColors.some(
+        (c) =>
+          c === selectedColor ||
+          (layerIndex && maxDepth && lightenColor(c, layerIndex, maxDepth) === selectedColor)
+      ) &&
+        colorIsOverwritten && (
+          <EuiFlexItem grow={false}>
+            <EuiButtonEmpty size="s" onClick={(e: any) => onChange(null, e)}>
+              <FormattedMessage id="charts.colorPicker.clearColor" defaultMessage="Reset color" />
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+        )}
     </div>
   );
 };

src/plugins/home/server/services/sample_data/data_sets/ecommerce/saved_objects.ts

@@ -45,7 +45,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[eCommerce] Sales by Gender',
       }),
       visState:
-        '{"title":"[eCommerce] Sales by Gender","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"customer_gender","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[eCommerce] Sales by Gender","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100},"palette":{"type":"palette","name":"default"}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"customer_gender","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,

src/plugins/home/server/services/sample_data/data_sets/flights/saved_objects.ts

@@ -100,7 +100,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Flights] Airline Carrier',
       }),
       visState:
-        '{"title":"[Flights] Airline Carrier","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Carrier","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
+        '{"title":"[Flights] Airline Carrier","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100},"palette":{"type":"palette","name":"default"}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"Carrier","size":5,"order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing"}}]}',
       uiStateJSON: '{"vis":{"legendOpen":false}}',
       description: '',
       version: 1,

src/plugins/home/server/services/sample_data/data_sets/logs/saved_objects.ts

@@ -234,7 +234,7 @@ export const getSavedObjects = (): SavedObject[] => [
         defaultMessage: '[Logs] Visitors by OS',
       }),
       visState:
-        '{"title":"[Logs] Visitors by OS","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"machine.os.keyword","otherBucket":true,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","size":10,"order":"desc","orderBy":"1"}}]}',
+        '{"title":"[Logs] Visitors by OS","type":"pie","params":{"type":"pie","addTooltip":true,"addLegend":true,"legendPosition":"right","isDonut":true,"labels":{"show":true,"values":true,"last_level":true,"truncate":100},"palette":{"type":"palette","name":"default"}},"aggs":[{"id":"1","enabled":true,"type":"count","schema":"metric","params":{}},{"id":"2","enabled":true,"type":"terms","schema":"segment","params":{"field":"machine.os.keyword","otherBucket":true,"otherBucketLabel":"Other","missingBucket":false,"missingBucketLabel":"Missing","size":10,"order":"desc","orderBy":"1"}}]}',
       uiStateJSON: '{}',
       description: '',
       version: 1,

src/plugins/vis_type_pie/README.md

@@ -0,0 +1 @@
+Contains the pie chart implementation using the elastic-charts library. The goal is to eventually deprecate the old implementation and keep only this. Until then, the library used is defined by the Legacy charts library advanced setting.

src/plugins/vis_type_xy/server/index.ts → src/plugins/vis_type_pie/common/index.ts

@@ -6,6 +6,4 @@
  * Side Public License, v 1.
  */
 
-import { VisTypeXyServerPlugin } from './plugin';
-
-export const plugin = () => new VisTypeXyServerPlugin();
+export const DEFAULT_PERCENT_DECIMALS = 2;

src/plugins/vis_type_pie/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../../..',
+  roots: ['<rootDir>/src/plugins/vis_type_pie'],
+};

src/plugins/vis_type_pie/kibana.json

@@ -0,0 +1,8 @@
+{
+    "id": "visTypePie",
+    "version": "kibana",
+    "ui": true,
+    "requiredPlugins": ["charts", "data", "expressions", "visualizations", "usageCollection"],
+    "requiredBundles": ["visDefaultEditor"]
+  }
+

src/plugins/vis_type_pie/public/chart.scss

@@ -0,0 +1,15 @@
+.pieChart__wrapper,
+.pieChart__container {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  min-width: 0;
+}
+
+.pieChart__container {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}

src/plugins/vis_type_pie/public/components/chart_split.tsx

@@ -0,0 +1,67 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { Accessor, AccessorFn, GroupBy, GroupBySort, SmallMultiples } from '@elastic/charts';
+import { DatatableColumn } from '../../../expressions/public';
+import { SplitDimensionParams } from '../types';
+
+interface ChartSplitProps {
+  splitColumnAccessor?: Accessor | AccessorFn;
+  splitRowAccessor?: Accessor | AccessorFn;
+  splitDimension?: DatatableColumn;
+}
+
+const CHART_SPLIT_ID = '__pie_chart_split__';
+export const SMALL_MULTIPLES_ID = '__pie_chart_sm__';
+
+export const ChartSplit = ({
+  splitColumnAccessor,
+  splitRowAccessor,
+  splitDimension,
+}: ChartSplitProps) => {
+  if (!splitColumnAccessor && !splitRowAccessor) return null;
+  let sort: GroupBySort = 'alphaDesc';
+  if (splitDimension?.meta?.params?.id === 'terms') {
+    const params = splitDimension?.meta?.sourceParams?.params as SplitDimensionParams;
+    sort = params?.order === 'asc' ? 'alphaAsc' : 'alphaDesc';
+  }
+
+  return (
+    <>
+      <GroupBy
+        id={CHART_SPLIT_ID}
+        by={(spec, datum) => {
+          const splitTypeAccessor = splitColumnAccessor || splitRowAccessor;
+          if (splitTypeAccessor) {
+            return typeof splitTypeAccessor === 'function'
+              ? splitTypeAccessor(datum)
+              : datum[splitTypeAccessor];
+          }
+          return spec.id;
+        }}
+        sort={sort}
+      />
+      <SmallMultiples
+        id={SMALL_MULTIPLES_ID}
+        splitVertically={splitRowAccessor ? CHART_SPLIT_ID : undefined}
+        splitHorizontally={splitColumnAccessor ? CHART_SPLIT_ID : undefined}
+        style={{
+          verticalPanelPadding: {
+            outer: 0.1,
+            inner: 0.1,
+          },
+          horizontalPanelPadding: {
+            outer: 0.1,
+            inner: 0.1,
+          },
+        }}
+      />
+    </>
+  );
+};

src/plugins/vis_type_pie/public/editor/collections.ts

@@ -0,0 +1,40 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { i18n } from '@kbn/i18n';
+import { LabelPositions, ValueFormats } from '../types';
+
+export const getLabelPositions = [
+  {
+    text: i18n.translate('visTypePie.labelPositions.insideText', {
+      defaultMessage: 'Inside',
+    }),
+    value: LabelPositions.INSIDE,
+  },
+  {
+    text: i18n.translate('visTypePie.labelPositions.insideOrOutsideText', {
+      defaultMessage: 'Inside or outside',
+    }),
+    value: LabelPositions.DEFAULT,
+  },
+];
+
+export const getValuesFormats = [
+  {
+    text: i18n.translate('visTypePie.valuesFormats.percent', {
+      defaultMessage: 'Show percent',
+    }),
+    value: ValueFormats.PERCENT,
+  },
+  {
+    text: i18n.translate('visTypePie.valuesFormats.value', {
+      defaultMessage: 'Show value',
+    }),
+    value: ValueFormats.VALUE,
+  },
+];

src/plugins/vis_type_pie/public/editor/components/index.tsx

@@ -0,0 +1,26 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { lazy } from 'react';
+import { VisEditorOptionsProps } from '../../../../visualizations/public';
+import { PieVisParams, PieTypeProps } from '../../types';
+
+const PieOptionsLazy = lazy(() => import('./pie'));
+
+export const getPieOptions = ({
+  showElasticChartsOptions,
+  palettes,
+  trackUiMetric,
+}: PieTypeProps) => (props: VisEditorOptionsProps<PieVisParams>) => (
+  <PieOptionsLazy
+    {...props}
+    palettes={palettes}
+    showElasticChartsOptions={showElasticChartsOptions}
+    trackUiMetric={trackUiMetric}
+  />
+);