Skip to content

[ZEPPELIN-4516] Fix pie chart does not color by key #3574

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hsuanxyz wants to merge 1 commit into from
Closed

[ZEPPELIN-4516] Fix pie chart does not color by key #3574

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 40 additions & 9 deletions zeppelin-web-angular/projects/zeppelin-visualization/src/pivot-transformation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -101,6 +102,7 @@ export class PivotTransformation extends Transformation {
groups = group ? [group] : [];
}

// try coercion to number type
dv.transform({
type: 'map',
callback: row => {
Expand All @@ -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),
Expand All @@ -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 => {
Expand Down Expand Up @@ -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()
});
});
});
Expand All @@ -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: {
Expand Down