Fix tooltip label name rendering in pie charts. (#40105) (#40318)

src/legacy/ui/public/agg_response/hierarchical/__tests__/collect_branch.js

@@ -1,84 +0,0 @@
-/*
- * 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 _ from 'lodash';
-import collectBranch from '../_collect_branch';
-import expect from '@kbn/expect';
-describe('collectBranch()', function () {
-  let results;
-  const convert = function (name) {
-    return 'converted:' + name;
-  };
-
-  beforeEach(function () {
-    results = collectBranch({
-      name: 'bucket3',
-      depth: 3,
-      size: 6,
-      field: { format: { convert: convert } },
-      aggConfig: {
-        getFieldDisplayName: _.constant('field3'),
-        fieldFormatter: _.constant(String),
-        makeLabel: () => {},
-      },
-      parent: {
-        name: 'bucket2',
-        depth: 2,
-        size: 12,
-        aggConfig: {
-          fieldFormatter: _.constant(String),
-          getFieldDisplayName: _.constant('field2'),
-          makeLabel: () => {},
-        },
-        parent: {
-          name: 'bucket1',
-          depth: 1,
-          size: 24,
-          parent: {}
-        }
-      }
-    });
-  });
-
-  it('should return an array with bucket objects', function () {
-    expect(results).to.be.an(Array);
-    expect(results).to.have.length(3);
-
-    expect(results[0]).to.have.property('metric', 24);
-    expect(results[0]).to.have.property('depth', 0);
-    expect(results[0]).to.have.property('bucket', 'bucket1');
-    expect(results[0]).to.have.property('field', 'level 1');
-    expect(results[0]).to.have.property('aggConfig');
-
-    expect(results[1]).to.have.property('metric', 12);
-    expect(results[1]).to.have.property('depth', 1);
-    expect(results[1]).to.have.property('bucket', 'bucket2');
-    expect(results[1]).to.have.property('field', 'level 2');
-    expect(results[1]).to.have.property('aggConfig');
-
-    expect(results[2]).to.have.property('metric', 6);
-    expect(results[2]).to.have.property('depth', 2);
-    expect(results[2]).to.have.property('bucket', 'bucket3');
-    expect(results[2]).to.have.property('field', 'level 3');
-    expect(results[2]).to.have.property('aggConfig');
-
-  });
-
-});

src/legacy/ui/public/agg_response/hierarchical/build_hierarchical_data.js

@@ -30,7 +30,6 @@ export const buildHierarchicalData = (table, { metric, buckets = [] }) => {
     slices = [{
       name: metricColumn.name,
       size: table.rows[0][metricColumn.id],
-      aggConfig: metricColumn.aggConfig
     }];
     names[metricColumn.name] = metricColumn.name;
   } else {
@@ -54,7 +53,6 @@ export const buildHierarchicalData = (table, { metric, buckets = [] }) => {
             size,
             parent,
             children: [],
-            aggConfig: bucketColumn.aggConfig,
             rawData: {
               table,
               row: rowIndex,

src/legacy/ui/public/vis/components/tooltip/_collect_branch.js

@@ -17,26 +17,28 @@
  * under the License.
  */
 
-// eslint-disable-next-line import/no-default-export
-export default function (leaf) {
+export function collectBranch(leaf) {
   // walk up the branch for each parent
   function walk(item, memo) {
     // record the the depth
     const depth = item.depth - 1;
 
-    // Using the aggConfig determine what the field name is. If the aggConfig
-    // doesn't exist (which means it's an _all agg) then use the level for
-    // the field name
-    const { aggConfig } = item;
-    const field = (aggConfig && aggConfig.makeLabel())
-      || (aggConfig && aggConfig.label)
-      || ('level ' + item.depth);
+    // For buckets, we use the column name to determine what the field name is.
+    // If item.rawData doesn't exist, it is a metric in which case we use the
+    // value of item.name. If neither exists, we fall back to the leve for the
+    // field name.
+    function getFieldName(i) {
+      if (i.rawData && i.rawData.column > -1) {
+        const { column, table } = i.rawData;
+        return table.columns[column].name;
+      }
+      return i.name || `level ${i.depth}`;
+    }
 
     // Add the row to the tooltipScope.rows
     memo.unshift({
-      aggConfig,
       depth: depth,
-      field: field,
+      field: getFieldName(item),
       bucket: item.name,
       metric: item.size,
       item: item

src/legacy/ui/public/vis/components/tooltip/_collect_branch.test.js

@@ -0,0 +1,110 @@
+/*
+ * 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 { collectBranch } from './_collect_branch';
+
+describe('collectBranch()', () => {
+  let item;
+  let itemWithBuckets;
+  const table = {
+    columns: [
+      { id: 'col1', name: 'Bucket1 Formatted Name' },
+      { id: 'col2', name: 'Bucket2 Formatted Name' },
+      { id: 'col3', name: 'Bucket3 Formatted Name' },
+    ],
+    rows: [
+      { col1: 'bucket1', col2: 'bucket2', col3: 'bucket3' },
+    ],
+  };
+
+  beforeEach(() => {
+    item = {
+      name: 'Count',
+      depth: 1,
+      size: 3,
+    };
+    itemWithBuckets = {
+      name: 'bucket3',
+      depth: 3,
+      size: 6,
+      rawData: {
+        column: 2,
+        row: 0,
+        value: 'bucket3',
+        table,
+      },
+      parent: {
+        name: 'bucket2',
+        depth: 2,
+        size: 12,
+        rawData: {
+          column: 1,
+          row: 0,
+          value: 'bucket2',
+          table,
+        },
+        parent: {
+          name: 'bucket1',
+          depth: 1,
+          size: 24,
+          rawData: {
+            column: 0,
+            row: 0,
+            value: 'bucket1',
+            table,
+          },
+          parent: {},
+        },
+      },
+    };
+  });
+
+  it('should return an array with bucket objects', () => {
+    const results = collectBranch(itemWithBuckets);
+    expect(results).toHaveLength(3);
+
+    expect(results[0]).toHaveProperty('metric', 24);
+    expect(results[0]).toHaveProperty('depth', 0);
+    expect(results[0]).toHaveProperty('bucket', 'bucket1');
+    expect(results[0]).toHaveProperty('field', 'Bucket1 Formatted Name');
+
+    expect(results[1]).toHaveProperty('metric', 12);
+    expect(results[1]).toHaveProperty('depth', 1);
+    expect(results[1]).toHaveProperty('bucket', 'bucket2');
+    expect(results[1]).toHaveProperty('field', 'Bucket2 Formatted Name');
+
+    expect(results[2]).toHaveProperty('metric', 6);
+    expect(results[2]).toHaveProperty('depth', 2);
+    expect(results[2]).toHaveProperty('bucket', 'bucket3');
+    expect(results[2]).toHaveProperty('field', 'Bucket3 Formatted Name');
+  });
+
+  it('should fall back to item name when no rawData exists', () => {
+    const results = collectBranch(item);
+    expect(results).toHaveLength(1);
+    expect(results[0]).toHaveProperty('field', 'Count');
+  });
+
+  it('should fall back to printing the depth level when neither rawData nor name exists', () => {
+    delete item.name;
+    const results = collectBranch(item);
+    expect(results).toHaveLength(1);
+    expect(results[0]).toHaveProperty('field', 'level 1');
+  });
+});

src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip_formatter.js

@@ -19,7 +19,7 @@
 
 import _ from 'lodash';
 import $ from 'jquery';
-import collectBranch from './_collect_branch';
+import { collectBranch } from './_collect_branch';
 import numeral from 'numeral';
 
 export function HierarchicalTooltipFormatterProvider($rootScope, $compile, $sce) {

src/legacy/ui/public/vislib/visualizations/_chart.js

@@ -22,8 +22,8 @@ import _ from 'lodash';
 import { dataLabel } from '../lib/_data_label';
 import { VislibLibDispatchProvider } from '../lib/dispatch';
 import { TooltipProvider } from '../../vis/components/tooltip';
+import { HierarchicalTooltipFormatterProvider } from '../../vis/components/tooltip/_hierarchical_tooltip_formatter';
 import { getFormat } from '../../visualize/loader/pipeline_helpers/utilities';
-import { HierarchicalTooltipFormatterProvider } from '../../agg_response/hierarchical/_hierarchical_tooltip_formatter';
 import { PointSeriesTooltipFormatter } from '../../agg_response/point_series/_tooltip_formatter';
 
 export function VislibVisualizationsChartProvider(Private) {