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

…tic#83929)

* es lint fix

* Add formatter on the buckets labels

* Config the new plugin, toggle tooltip

* Aff filtering on slice click

* minor fixes

* fix eslint error

* use legacy palette for now

* Add color picker to legend colors

* Fix ts error

* Add legend actions

* Fix bug on Color Picker and remove local state as it is unecessary

* Fix some bugs on colorPicker

* Add setting for the user to select between the legacy palette or the eui ones

* small enhancements, treat empty labels with (empty)

* Fix color picker bugs with multiple layers

* fixes on internationalization

* Create migration script for pie chart and legacy palette

* Add unit tests (wip) and a small refactoring

* Add unit tests and move some things to utils, useMemo and useCallback where it should

* Add jest config file

* Fix jest test

* fix api integration failure

* Fix to_ast_esaggs for new pie plugin

* Close legendColorPicker popover when user clicks outside

* Fix warning

* Remove getter/setters and refactor

* Remove kibanaUtils from pie plugin as it is not needed

* Add new values to the migration script

* Fix bug on not changing color for expty string

* remove from migration script as they don't need it

* Fix editor settings for old and new implementation

* fix uistate type

* Disable split chart for the new plugin for now

* Remove temp folder

* Move translations to the pie plugin

* Fix CI failures

* Add unit test for the editor config

* Types cleanup

* Fix types vol2

* Minor improvements

* Display data on the inspector

* Cleanup translations

* Add telemetry for new editor pie options

* Fix missing translation

* Use Eui component to detect click outside the color picker popover

* Retrieve color picker from editor and syncColors on dashboard

* Lazy load palette service

* Add the new plugin to ts references, fix tests, refactor

* Fix ci failure

* Move charts library switch to vislib plugin

* Remove cyclic dependencies

* Modify license headers

* Move charts library switch to visualizations plugin

* Fix i18n on the switch moved to visualizations plugin

* Update license

* Fix tests

* Fix bugs created by new charts version

* Fix the i18n switch problem

* Update the migration script

* Identify if colorIsOverwritten or not

* Small multiples, missing the click event

* Fixes the UX for small multiples part1

* Distinct colors per slice implementation

* Fix ts references problem

* Fix some small multiples bugs

* Add unit tests

* Fix ts ref problem

* Fix TS problems caused by es-charts new version

* Update the sample pie visualizations with the new eui palette

* Allows filtering by the small multiples value

* Apply sortPredicate on partition layers

* Fix vilib test

* Enable functional tests for new plugin

* Fix some functional tests

* Minor fix

* Fix functional tests

* Fix dashboard tests

* Fix all dashboard tests

* Apply some improvements

* Explicit params instead of visConfig Json

* Fix i18n failure

* Add top level setting

* Minor fix

* Fix jest tests

* Address PR comments

* Fix i18n error

* fix functional test

* Add an icon tip on the distinct colors per slice switch

* Fix some of the PR comments

* Address more PR comments

* Small fix

* Functional test

* address some PR comments

* Add padding to the pie container

* Add a max width to the container

* Improve dashboard functional test

* Move the labels expression function to the pie plugin

* Fix i18n

* Fix functional test

* Apply PR comments

* Do not forget to also add the migration to them embeddable too :D

* Fix distinct colors for IP range layer

* Remove console errors

* Fix small mulitples colors with multiple layers

* Fix lint problem

* Fix problems created from merging with master

* Address PR comments

* Change the config in order the pie chart to not appear so huge on the editor

* Address PR comments

* Change the max percentage digits to 4

* Change the max size to 1000

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
# Conflicts:
#	.github/CODEOWNERS
#	packages/kbn-optimizer/limits.yml
#	test/functional/apps/visualize/_pie_chart.ts

.i18nrc.json

@@ -56,6 +56,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

@@ -88,6 +88,7 @@ pageLoadAssetSize:
   visTypeMarkdown: 30896
   visTypeMetric: 42790
   visTypeTable: 95078
+  visTypePie: 34051
   visTypeTagcloud: 37575
   visTypeTimelion: 68883
   visTypeTimeseries: 55347

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,18 @@
+.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;
+  padding: $euiSizeS;
+  margin-left: auto;
+  margin-right: auto;
+}