[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

@@ -88,6 +88,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,19 @@
+.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;
+  max-width: 1024px;
+  margin-left: auto;
+  margin-right: auto;
+}