Skip to content
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

Jump to bottom

Do not refresh color scale on each lookup #57792

Merged
merged 5 commits into from
Feb 21, 2020
Merged

Do not refresh color scale on each lookup #57792

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e9dae3a
do not refresh color scale on each lookup
flash1293 Feb 17, 2020
2b3d054
extend karma mock
flash1293 Feb 17, 2020
8c15453
fix tagcloud tests
flash1293 Feb 17, 2020
3982594
Merge branch 'master' into tagcloud-color-fix
elasticmachine Feb 19, 2020
446229a
Merge branch 'master' into tagcloud-color-fix
elasticmachine Feb 19, 2020
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
26 changes: 12 additions & 14 deletions src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,6 @@ import simpleloadPng from './simpleload.png';
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';

const colors = {
seedColors,
};

describe('tag cloud tests', function() {
const minValue = 1;
const maxValue = 9;
Expand Down Expand Up @@ -102,6 +98,8 @@ describe('tag cloud tests', function() {
let domNode;
let tagCloud;

const colorScale = d3.scale.ordinal().range(seedColors);

function setupDOM() {
domNode = document.createElement('div');
domNode.style.top = '0';
Expand Down Expand Up @@ -132,7 +130,7 @@ describe('tag cloud tests', function() {
)}`, function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(test.data);
tagCloud.setOptions(test.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand Down Expand Up @@ -164,7 +162,7 @@ describe('tag cloud tests', function() {

//TagCloud takes at least 600ms to complete (due to d3 animation)
//renderComplete should only notify at the last one
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);

Expand Down Expand Up @@ -196,7 +194,7 @@ describe('tag cloud tests', function() {
describe('should use the latest state before notifying (when modifying options multiple times)', function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
tagCloud.setOptions(logScaleTest.options);
Expand All @@ -223,7 +221,7 @@ describe('tag cloud tests', function() {
describe('should use the latest state before notifying (when modifying data multiple times)', function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
tagCloud.setData(trimDataTest.data);
Expand Down Expand Up @@ -253,7 +251,7 @@ describe('tag cloud tests', function() {
counter = 0;
setupDOM();
return new Promise((resolve, reject) => {
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);

Expand Down Expand Up @@ -299,7 +297,7 @@ describe('tag cloud tests', function() {
describe('should show correct data when state-updates are interleaved with resize event', function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(logScaleTest.data);
tagCloud.setOptions(logScaleTest.options);

Expand Down Expand Up @@ -337,7 +335,7 @@ describe('tag cloud tests', function() {
setupDOM();
domNode.style.width = '1px';
domNode.style.height = '1px';
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand All @@ -363,7 +361,7 @@ describe('tag cloud tests', function() {
domNode.style.width = '1px';
domNode.style.height = '1px';

tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand All @@ -388,7 +386,7 @@ describe('tag cloud tests', function() {
describe(`tags should no longer fit after making container smaller`, function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand Down Expand Up @@ -420,7 +418,7 @@ describe('tag cloud tests', function() {
});

it('should render simple image', async function() {
tagCloud = new TagCloud(domNode, colors);
tagCloud = new TagCloud(domNode, colorScale);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);

Expand Down
7 changes: 3 additions & 4 deletions src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const D3_SCALING_FUNCTIONS = {
};

export class TagCloud extends EventEmitter {
constructor(domNode, colors) {
constructor(domNode, colorScale) {
super();

//DOM
Expand All @@ -54,7 +54,6 @@ export class TagCloud extends EventEmitter {
this._spiral = 'archimedean'; //layout shape
this._timeInterval = 1000; //time allowed for layout algorithm
this._padding = 5;
this._seedColors = colors.seedColors;

//OPTIONS
this._orientation = 'single';
Expand All @@ -67,6 +66,7 @@ export class TagCloud extends EventEmitter {
this._words = null;

//UTIL
this._colorScale = colorScale;
this._setTimeoutId = null;
this._pendingJob = null;
this._layoutIsUpdating = null;
Expand Down Expand Up @@ -371,8 +371,7 @@ export class TagCloud extends EventEmitter {
}

getFill(tag) {
const colorScale = d3.scale.ordinal().range(this._seedColors);
return colorScale(tag.text);
return this._colorScale(tag.text);
}
}

Expand Down
4 changes: 3 additions & 1 deletion src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud_visualization.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,12 @@ import { getFormat } from '../legacy_imports';
import { Label } from './label';
import { TagCloud } from './tag_cloud';
import { FeedbackMessage } from './feedback_message';
import d3 from 'd3';

const MAX_TAG_COUNT = 200;

export function createTagCloudVisualization({ colors }) {
const colorScale = d3.scale.ordinal().range(colors.seedColors);
return class TagCloudVisualization {
constructor(node, vis) {
this._containerNode = node;
Expand All @@ -48,7 +50,7 @@ export function createTagCloudVisualization({ colors }) {

this._vis = vis;
this._truncated = false;
this._tagCloud = new TagCloud(cloudContainer, colors);
this._tagCloud = new TagCloud(cloudContainer, colorScale);
this._tagCloud.on('select', event => {
if (!this._visParams.bucket) {
return;
Expand Down
3 changes: 3 additions & 0 deletions src/legacy/ui/public/new_platform/new_platform.karma_mock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,6 +218,9 @@ export const npSetup = {
chartsTheme$: mockObservable,
useChartsTheme: sinon.fake(),
},
colors: {
seedColors: ['white', 'black'],
},
},
management: {
sections: {
Expand Down