Skip to content

Commit

Permalink
Fix consumers and tests for Charts#color service
Browse files Browse the repository at this point in the history
  • Loading branch information
@nickofthyme
nickofthyme committed Jan 23, 2020
1 parent efccb73 commit 6cca596
Show file tree
Hide file tree
Showing 18 changed files with 201 additions and 159 deletions.
28 changes: 18 additions & 10 deletions src/legacy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,14 @@ import { fromNode, delay } from 'bluebird';
import { ImageComparator } from 'test_utils/image_comparator';
import simpleloadPng from './simpleload.png';

// Replace with mock when converting to jest tests
// 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 @@ -124,7 +132,7 @@ describe('tag cloud tests', function() {
)}`, function() {
beforeEach(async function() {
setupDOM();
tagCloud = new TagCloud(domNode);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(test.data);
tagCloud.setOptions(test.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand Down Expand Up @@ -156,7 +164,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);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);

Expand Down Expand Up @@ -188,7 +196,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);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
tagCloud.setOptions(logScaleTest.options);
Expand All @@ -215,7 +223,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);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
tagCloud.setData(trimDataTest.data);
Expand Down Expand Up @@ -245,7 +253,7 @@ describe('tag cloud tests', function() {
counter = 0;
setupDOM();
return new Promise((resolve, reject) => {
tagCloud = new TagCloud(domNode);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);

Expand Down Expand Up @@ -291,7 +299,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);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(logScaleTest.data);
tagCloud.setOptions(logScaleTest.options);

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

tagCloud = new TagCloud(domNode);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand All @@ -380,7 +388,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);
tagCloud = new TagCloud(domNode, colors);
tagCloud.setData(baseTest.data);
tagCloud.setOptions(baseTest.options);
await fromNode(cb => tagCloud.once('renderComplete', cb));
Expand Down Expand Up @@ -412,7 +420,7 @@ describe('tag cloud tests', function() {
});

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

Expand Down
11 changes: 10 additions & 1 deletion ...acy/core_plugins/vis_type_tagcloud/public/components/__tests__/tag_cloud_visualization.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,15 @@ import ngMock from 'ng_mock';
import LogstashIndexPatternStubProvider from 'fixtures/stubbed_logstash_index_pattern';
import { Vis } from 'ui/vis';
import { ImageComparator } from 'test_utils/image_comparator';
import { TagCloudVisualization } from '../tag_cloud_visualization';
import { createTagCloudVisualization } from '../tag_cloud_visualization';
import basicdrawPng from './basicdraw.png';
import afterresizePng from './afterresize.png';
import afterparamChange from './afterparamchange.png';

// Replace with mock when converting to jest tests
// eslint-disable-next-line @kbn/eslint/no-restricted-paths
import { seedColors } from '../../../../../../plugins/charts/public/services/colors/seed_colors';

const THRESHOLD = 0.65;
const PIXEL_DIFF = 64;

Expand Down Expand Up @@ -55,6 +59,11 @@ describe('TagCloudVisualizationTest', function() {
{ 'col-0': 'BR', 'col-1': 3 },
],
};
const TagCloudVisualization = createTagCloudVisualization({
colors: {
seedColors,
},
});

beforeEach(ngMock.module('kibana'));
beforeEach(
Expand Down
16 changes: 8 additions & 8 deletions src/legacy/core_plugins/vis_type_tagcloud/public/components/tag_cloud.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@

import d3 from 'd3';
import d3TagCloud from 'd3-cloud';
import { seedColors } from 'ui/vis/components/color/seed_colors';
import { EventEmitter } from 'events';

const ORIENTATIONS = {
Expand All @@ -38,7 +37,7 @@ const D3_SCALING_FUNCTIONS = {
};

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

//DOM
Expand All @@ -55,6 +54,7 @@ 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 Down Expand Up @@ -208,7 +208,7 @@ export class TagCloud extends EventEmitter {
enteringTags.style('font-style', this._fontStyle);
enteringTags.style('font-weight', () => this._fontWeight);
enteringTags.style('font-family', () => this._fontFamily);
enteringTags.style('fill', getFill);
enteringTags.style('fill', this.getFill.bind(this));
enteringTags.attr('text-anchor', () => 'middle');
enteringTags.attr('transform', affineTransform);
enteringTags.attr('data-test-subj', getDisplayText);
Expand Down Expand Up @@ -369,6 +369,11 @@ export class TagCloud extends EventEmitter {
};
return debug;
}

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

TagCloud.STATUS = { COMPLETE: 0, INCOMPLETE: 1 };
Expand Down Expand Up @@ -402,11 +407,6 @@ function getSizeInPixels(tag) {
return `${tag.size}px`;
}

const colorScale = d3.scale.ordinal().range(seedColors);
function getFill(tag) {
return colorScale(tag.text);
}

function hashWithinRange(str, max) {
str = JSON.stringify(str);
let hash = 0;
Expand Down
Loading

0 comments on commit 6cca596

Please sign in to comment.