github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 17:28:26 -04:00
Code Issues Projects Releases Packages Wiki Activity

Backport PR #8448

Browse source 
---------

**Commit 1:**
Add highlight opacity as global setting

The opacity of the items that are dimmed on a chart can now be configured. This is useful for users who want to increase or decrease the contrast between the element under focus and the other elements.

* Original sha: b02bbad6c8
* Authored by Thomas Neirynck <thomas@elastic.co> on 2016-09-23T05:12:59Z

**Commit 2:**
coerce opacity to valid value

* Original sha: 8d10852a73
* Authored by Thomas Neirynck <thomas@elastic.co> on 2016-09-23T17:09:31Z

**Commit 3:**
improve code style

* Original sha: 807cc1b491
* Authored by Thomas Neirynck <thomas@elastic.co> on 2016-09-23T17:41:47Z
This commit is contained in:
Elastic Jasper 2016-10-07 18:36:28 -04:00
parent 251dce699f
commit 4ef443401e
2 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

35
src/ui/public/vislib/lib/dispatch.js
View file

@ -2,8 +2,9 @@ import d3 from 'd3';
import _ from 'lodash';
import $ from 'jquery';
import SimpleEmitter from 'ui/utils/simple_emitter';
import VislibComponentsTooltipProvider from 'ui/vislib/components/tooltip';
export default function DispatchClass(Private) {
export default function DispatchClass(Private, config) {
/**
* Handles event responses
*
@ -214,33 +215,33 @@ export default function DispatchClass(Private) {
* Mouseover Behavior
*
* @method addMousePointer
* @returns {D3.Selection}
* @returns {d3.Selection}
*/
addMousePointer() {
return d3.select(this).style('cursor', 'pointer');
};
/**
* Mouseover Behavior
*
* @param element {D3.Selection}
* Highlight the element that is under the cursor
* by reducing the opacity of all the elements on the graph.
* @param element {d3.Selection}
* @method highlight
*/
highlight(element) {
const label = this.getAttribute('data-label');
if (!label) return;
//Opacity 1 is needed to avoid the css application
$('[data-label]', element.parentNode).css('opacity', 1).not(
function (els, el) {
return `${$(el).data('label')}` === label;
}
).css('opacity', 0.5);
};
const dimming = config.get('visualization:dimmingOpacity');
$(element).parent().find('[data-label]')
.css('opacity', 1)//Opacity 1 is needed to avoid the css application
.not((els, el) => $(el).data('label') === label)
.css('opacity', justifyOpacity(dimming));
}
/**
* Mouseout Behavior
*
* @param element {D3.Selection}
* @param element {d3.Selection}
* @method unHighlight
*/
unHighlight(element) {
@ -310,5 +311,11 @@ export default function DispatchClass(Private) {
}
function justifyOpacity(opacity) {
const decimalNumber = parseFloat(opacity, 10);
const fallbackOpacity = 0.5;
return (0 <= decimalNumber && decimalNumber <= 1) ? decimalNumber : fallbackOpacity;
}
return Dispatch;
};

7
src/ui/settings/defaults.js
View file

@ -135,6 +135,13 @@ export default function defaultSettingsProvider() {
value: '2s',
description: 'Time to wait before dimming visualizations during query'
},
'visualization:dimmingOpacity': {
type: 'number',
value: 0.5,
description: 'The opacity of the chart items that are dimmed when highlighting another element of the chart. ' +
'The lower this number, the more the highlighted element will stand out.' +
'This must be a number between 0 and 1.'
},
'csv:separator': {
value: ',',
description: 'Separate exported values with this string',