[zeppelin] branch web_angular updated: [ZEPPELIN-4516] Fix pie chart does not color by key

[zjffdu]

This is an automated email from the ASF dual-hosted git repository.

zjffdu pushed a commit to branch web_angular
in repository https://gitbox.apache.org/repos/asf/zeppelin.git


The following commit(s) were added to refs/heads/web_angular by this push:
     new 5ac0005  [ZEPPELIN-4516] Fix pie chart does not color by key
5ac0005 is described below

commit 5ac0005de454e6d284d08bf677b2d8358c4422fe
Author: Hsuan Lee <hsua...@gmail.com>
AuthorDate: Fri Dec 27 11:06:20 2019 +0800

    [ZEPPELIN-4516] Fix pie chart does not color by key
    
    ### What is this PR for?
    
    Fix pie chart does not color by key
    
    ### What type of PR is it?
    [Bug Fix]
    
    ### What is the Jira issue?
    
    https://issues.apache.org/jira/browse/ZEPPELIN-4516
    
    ### How should this be tested?
    
    N/A
    
    ### Screenshots (if appropriate)
    
    ![Kapture 2019-12-27 at 11 19 
06](https://user-images.githubusercontent.com/22736418/71499297-ceedff80-289a-11ea-809f-1d2e0a30776f.gif)
    
    ### Questions:
    * Does the licenses files need update? No
    * Is there breaking changes for older versions? No
    * Does this needs documentation? No
    
    Author: Hsuan Lee <hsua...@gmail.com>
    
    Closes #3574 from hsuanxyz/fix/pie-chart and squashes the following commits:
    
    1ca2dc935 [Hsuan Lee] fix: fix the pie chart's color
---
 .../src/pivot-transformation.ts                    | 49 ++++++++++++++++++----
 1 file changed, 40 insertions(+), 9 deletions(-)

diff --git 
a/zeppelin-web-angular/projects/zeppelin-visualization/src/pivot-transformation.ts
 
b/zeppelin-web-angular/projects/zeppelin-visualization/src/pivot-transformation.ts
index cade722..963cc48 100644
--- 
a/zeppelin-web-angular/projects/zeppelin-visualization/src/pivot-transformation.ts
+++ 
b/zeppelin-web-angular/projects/zeppelin-visualization/src/pivot-transformation.ts
@@ -16,7 +16,6 @@ import { get } from 'lodash';
 import { TableData } from './table-data';
 import { Transformation } from './transformation';
 
-// tslint:disable-next-line:no-any
 export class PivotTransformation extends Transformation {
   constructor(config) {
     super(config);
@@ -87,6 +86,8 @@ export class PivotTransformation extends Transformation {
     let groups = [];
     let values = [];
     let aggregates = [];
+
+    // set values from config
     if (config.mode !== 'scatterChart') {
       keys = config.keys.map(e => e.name);
       groups = config.groups.map(e => e.name);
@@ -101,6 +102,7 @@ export class PivotTransformation extends Transformation {
       groups = group ? [group] : [];
     }
 
+    // try coercion to number type
     dv.transform({
       type: 'map',
       callback: row => {
@@ -114,7 +116,10 @@ export class PivotTransformation extends Transformation {
       }
     });
 
+    // not applicable with type scatter chart
     if (config.mode !== 'scatterChart') {
+
+      // aggregate values
       dv.transform({
         type: 'aggregate',
         fields: config.values.map(v => v.name),
@@ -123,19 +128,36 @@ export class PivotTransformation extends Transformation {
         groupBy: [...keys, ...groups]
       });
 
-      // dv.transform({
-      //   type: 'fill-rows',
-      //   groupBy: groups,
-      //   orderBy: keys,
-      //   fillBy: 'order'
-      // });
-
+      // fill the rows to keep the charts is continuity
       dv.transform({
         type: 'fill-rows',
         groupBy: [...keys, ...groups],
         fillBy: 'group'
       });
 
+      /**
+       * fill the field to keep the charts is continuity
+       *
+       * before
+       * ```
+       * [
+       *  { x: 0, y: 1 },
+       *  { x: 0, y: 2 },
+       *  { x: 0, y: 3 },
+       *  { x: 0 }
+       * ]
+       * ```
+       * after
+       * ```
+       * [
+       *  { x: 0, y: 1 },
+       *  { x: 0, y: 2 },
+       *  { x: 0, y: 3 },
+       *  { x: 0, y: 0 }
+       * //      ^^^^^ filled this
+       * ]
+       * ```
+       */
       config.values
         .map(v => `${v.name}(${v.aggr})`)
         .forEach(field => {
@@ -165,9 +187,17 @@ export class PivotTransformation extends Transformation {
     Object.keys(dv.rows).forEach(groupKey => {
       const groupName = groupKey.replace(/^_/, '');
       dv.rows[groupKey].forEach(row => {
+        const getKey = () => {
+          if (config.mode !== 'pieChart') {
+            return groupName ? `${row.__key__}.${groupName}` : row.__key__
+          } else {
+            const keyName = keys.map(k => row[k]).join('.');
+            return groupName ? `${keyName}.${groupName}` : keyName;
+          }
+        };
         groupsData.push({
           ...row,
-          __key__: groupName ? `${row.__key__}.${groupName}` : row.__key__
+          __key__: getKey()
         });
       });
     });
@@ -177,6 +207,7 @@ export class PivotTransformation extends Transformation {
         dv.origin.findIndex(o => o[firstKey] === a[firstKey]) - 
dv.origin.findIndex(o => o[firstKey] === b[firstKey])
     );
 
+    console.log(groupsData);
     dv = ds
       .createView({
         state: {