github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

Vis public UI LESS to SASS (#25333)

Browse source
This commit is contained in:
Caroline Horn 2018-11-19 16:05:52 -05:00 • committed by GitHub
parent 0958e1d1d9
commit a5076b5172
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
87 changed files with 864 additions and 981 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/core_plugins/kibana/public/dashboard/_index.scss
View file

@ -41,8 +41,7 @@
@import 'panel/index';
@import 'viewport/index';
// Vis imports -- will have some duplicate styling
// because they will be imported via ui/public as well
// (without .theme-[] prefix)
@import 'src/ui/public/vis/map/index';
// Vis imports
@import 'src/ui/public/vis/index';
@import 'src/ui/public/vislib/index';
}

2
src/core_plugins/kibana/public/dashboard/panel/_dashboard_panel.scss
View file

@ -35,7 +35,7 @@
@include euiScrollBar; /* 3 */
}
.visualization .vis-container {
.visualization .visChart__container {
overflow: visible; /* 2 */
}
}

5
src/core_plugins/kibana/public/index.scss
View file

@ -1,6 +1,7 @@
@import 'ui/public/styles/styling_constants';
@import 'ui/public/query_bar/index';
// Public UI styles
@import 'ui/public/index';
// Context styles
@import './context/index';
@ -16,6 +17,8 @@
// Visualize styles
@import './visualize/index';
// Has to come after visualize because of some
// bad cascading in the Editor layout
@import 'ui/public/vis/index';
// Management styles

4
src/core_plugins/region_map/public/tooltip.html
View file

@ -1,8 +1,8 @@
<table>
<tbody>
<tr ng-repeat="detail in details" >
<td class="tooltip-label"><b>{{detail.label}}</b></td>
<td class="tooltip-value">{{detail.value}}</td>
<td class="visTooltip__label"><b>{{detail.label}}</b></td>
<td class="visTooltip__value">{{detail.value}}</td>
</tr>
</tbody>
</table>

4
src/core_plugins/tile_map/public/editors/_tooltip.html
View file

@ -1,8 +1,8 @@
<table>
<tbody>
<tr ng-repeat="detail in details" >
<td class="tooltip-label">{{detail.label}}</td>
<td class="tooltip-value">{{detail.value}}</td>
<td class="visTooltip__label">{{detail.label}}</td>
<td class="visTooltip__value">{{detail.value}}</td>
</tr>
</tbody>
</table>

2
src/fixtures/vislib/_vis_fixture.js
View file

@ -41,7 +41,7 @@ const visHeight = $visCanvas.height();
$visCanvas.new = function () {
count += 1;
if (count > 1) $visCanvas.height(visHeight * count);
return $('<div>').addClass('visualize-chart').appendTo($visCanvas);
return $('<div>').addClass('visChart').appendTo($visCanvas);
};
afterEach(function () {

5
src/ui/public/_index.scss Normal file
View file

@ -0,0 +1,5 @@
@import './query_bar/index';
// Can't import vis folder here because of cascading issues, it's imported in core_plugins/kibana
// @import './vis/index';
@import './vislib/index';
@import './visualize/index';

8
src/ui/public/agg_response/hierarchical/_tooltip.html
View file

@ -1,15 +1,15 @@
<table>
<table class="visTooltip__table">
<thead>
<tr class="tooltip-label">
<tr class="eui-textLeft visTooltip__label">
<th scope="col">field</th>
<th scope="col">value</th>
<th scope="col">{{metricCol.label}}</th>
</tr>
</thead>
<tbody>
<tr class="tooltip-value" ng-repeat="row in rows track by $index">
<tr class="visTooltip__value" ng-repeat="row in rows track by $index">
<td><span ng-bind-html="row.spacer"></span>{{row.field}}</td>
<td class="row-bucket">{{row.bucket}}</td>
<td>{{row.bucket}}</td>
<td>{{row.metric}}</td>
</tr>
</tbody>

4
src/ui/public/agg_response/point_series/_tooltip.html
View file

@ -1,8 +1,8 @@
<table>
<tbody>
<tr ng-repeat="detail in details" >
<td class="tooltip-label">{{detail.label}}</td>
<td class="tooltip-value">
<td class="visTooltip__label">{{detail.label}}</td>
<td class="visTooltip__value">
{{detail.value}}
<span ng-if="detail.percent"> ({{detail.percent}})</span>
</td>

4
src/ui/public/styles/table.less
View file

@ -79,8 +79,4 @@ table {
}
}
}
.slice {
stroke: #272727;
}
}

36
src/ui/public/styles/variables/for-theme.less
View file

@ -193,32 +193,7 @@
@alert-color: @white;
// Truncate ====================================================================
@truncate-color: @body-bg;
// Typeahead ===================================================================
@typeahead-items-border: @globalColorLightGray;
@typeahead-items-color: @text-color;
@typeahead-items-bg: @body-bg;
@typeahead-item-color: @text-color;
@typeahead-item-border: @globalColorLightGray;
@typeahead-item-bg: @body-bg;
@typeahead-item-active-bg: @globalColorBlue;
// Alerts ======================================================================
@alert-vis-alert-color: @white;
@alert-vis-alert-border: @white;
// Legend ======================================================================
@legend-item-color: #666;
// Tooltip =====================================================================
@tooltip-space: 8px;
@tooltip-space-tight: @tooltip-space / 2;
@tooltip-bg: fadeout(darken(@globalColorBlue, 30%), 10%);
@tooltip-color: @globalColorWhite;
@ -227,17 +202,6 @@
@tooltip-bold: 600;
// Svg =========================================================================
@svg-axis-color: #ddd;
@svg-tick-text-color: #848e96;
@svg-brush-color: @white;
@svg-endzone-bg: @black;
@vis-axis-title-color: #848e96;
@vis-chart-title-color: #848e96;
// Saved Object Finder =========================================================
@saved-object-finder-link-color: @link-color;
@saved-object-finder-icon-color: darken(@saved-object-finder-link-color, 10%);

5
src/ui/public/vis/_index.scss
View file

@ -1,3 +1,4 @@
@import './editors/components/index';
@import './editors/default/index';
@import './components/index';
@import './editors/index';
@import './map/index';
@import './vis_types/index';

1
src/ui/public/vis/components/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './tooltip/index';

1
src/ui/public/vis/components/tooltip/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './tooltip';

66
src/ui/public/vis/components/tooltip/_tooltip.scss Normal file
View file

@ -0,0 +1,66 @@
// EUITODO: Use EuiTooltip or create a tooltip mixin
.visTooltip,
.visTooltip__sizingClone {
@include euiBottomShadow($color: $euiColorFullShade);
@include euiFontSizeXS;
visibility: hidden;
pointer-events: none;
position: fixed;
z-index: $euiZLevel9;
background-color: tintOrShade($euiColorFullShade, 25%, 90%);
color: $euiColorGhost;
border-radius: $euiBorderRadius;
max-width: $euiSizeXL * 10;
overflow: hidden;
overflow-wrap: break-word;
> :last-child {
margin-bottom: $euiSizeS;
}
> * {
margin: $euiSizeS $euiSizeS 0;
}
table {
td,
th {
padding: $euiSizeXS;
}
}
}
.visTooltip__header {
margin: 0 0 $euiSizeS 0;
padding: $euiSizeXS $euiSizeS;
display: flex;
align-items: center;
&:last-child {
margin-bottom: 0;
}
+ * {
margin-top: $euiSizeS;
}
}
.visTooltip__headerIcon {
flex: 0 0 auto;
padding-right: $euiSizeS;
}
.visTooltip__headerText {
flex: 1 1 100%;
}
.visTooltip__label {
// max-width: $euiSizeXL * 3;
font-weight: $euiFontWeightMedium;
color: shade($euiColorGhost, 20%);
}
.visTooltip__sizingClone {
top: -500px;
left: -500px;
}

6
src/ui/public/vis/components/tooltip/tooltip.js
View file

@ -44,9 +44,9 @@ export function Tooltip(id, el, formatter, events) {
this.order = 100; // higher ordered contents are rendered below the others
this.formatter = formatter;
this.events = events;
this.containerClass = 'vis-wrapper';
this.tooltipClass = 'vis-tooltip';
this.tooltipSizerClass = 'vis-tooltip-sizing-clone';
this.containerClass = 'visWrapper';
this.tooltipClass = 'visTooltip';
this.tooltipSizerClass = 'visTooltip__sizingClone';
this.showCondition = _.constant(true);
this.binder = new Binder();

2
src/ui/public/vis/editors/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './components/index';
@import './default/index';

2
src/ui/public/vis/editors/default/_default.scss
View file

@ -106,7 +106,7 @@
flex: 1 1 100%;
}
.visualize-chart {
.visChart {
position: relative;
}
}

13
src/ui/public/vis/map/_leaflet_overrides.scss
View file

@ -18,6 +18,13 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
min-height: 1px !important;
}
.leaflet-clickable {
&:hover {
stroke-width: $euiSizeS;
stroke-opacity: 0.8;
}
}
/**
* 1. Since Leaflet is an external library, we also have to provide EUI variables
* to non-override colors for darkmode.
@ -56,7 +63,7 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
padding: 0;
background: $temp-euiTooltipBackground;
color: $temp-euiTooltipText;
border-radius: $euiBorderRadius;
border-radius: $euiBorderRadius !important; // Override all positions the popup might be at
}
.leaflet-popup {
@ -82,10 +89,6 @@ $visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/s
table {
td,th {
padding: $euiSizeXS;
&.row-bucket {
word-break: break-all;
}
}
}
}

2
src/ui/public/vis/vis_types/_index.scss Normal file
View file

@ -0,0 +1,2 @@
@import './vislib_vis_type';
@import './vislib_vis_legend';

112
src/ui/public/vis/vis_types/_vislib_vis_legend.scss Normal file
View file

@ -0,0 +1,112 @@
@import '../../vislib/variables';
// NOTE: Some of the styles attempt to align with the TSVB legend
.visLegend__toggle {
align-self: flex-start;
// Override .kuiCollapseButton
color: $visValueColor !important;
}
.visLegend {
@include euiFontSizeXS;
display: flex;
flex-direction: row;
padding: $euiSizeXS 0;
overflow: auto;
min-height: 0;
height: 100%;
overflow: hidden;
// flex-direction re-aligns toggle button
.visLib--legend-left & {
flex-direction: row-reverse;
}
.visLib--legend-right & {
flex-direction: row;
}
.visLib--legend-top & {
flex-direction: column-reverse;
width: 100%;
padding-left: $euiSizeL;
}
.visLib--legend-bottom & {
flex-direction: column;
width: 100%;
padding-left: $euiSizeL;
}
.visLegend__list {
width: 150px; // Must be a hard-coded width for the chart to get its correct dimensions
flex: 1 1 auto;
flex-direction: column;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
.visLib--legend-top &,
.visLib--legend-bottom & {
width: auto;
overflow-y: hidden;
.visLegend__value {
display: inline-block;
}
}
&.hidden {
visibility: hidden;
}
}
}
.visLegend__value {
cursor: pointer;
padding: $euiSizeXS;
display: flex;
> * {
max-width: 100%;
}
&.disabled {
opacity: 0.5;
}
}
.visLegend__valueTitle {
color: $visTextColor;
&:hover {
text-decoration: underline;
}
}
.visLegend__valueTitle--truncate {
@include euiTextTruncate;
}
.visLegend__valueTitle--full {
word-break: break-all;
}
.visLegend__valueDetails {
border-bottom: 1px solid $euiColorLightShade;
padding-bottom: $euiSizeXS;
}
.visLegend__valueColorPicker {
width: $euiSizeM * 10;
margin: auto;
.visLegend__valueColorPickerDot {
margin: $euiSizeXS / 2;
&:hover {
transform: scale(1.4);
}
}
}

26
src/ui/public/vis/vis_types/_vislib_vis_type.scss Normal file
View file

@ -0,0 +1,26 @@
.visLib {
flex: 1 1 0;
display: flex;
flex-direction: row;
overflow: auto;
&.visLib--legend-left {
flex-direction: row-reverse;
}
&.visLib--legend-right {
flex-direction: row;
}
&.visLib--legend-top {
flex-direction: column-reverse;
}
&.visLib--legend-bottom {
flex-direction: column;
}
}
.visLib__chart {
display: flex;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}

20
src/ui/public/vis/vis_types/vislib_vis_legend.html
View file

@ -1,8 +1,8 @@
<div class="legend-col-wrapper" ng-if="labels.length">
<div class="visLegend" ng-if="labels.length">
<button
type="button"
ng-click="toggleLegend()"
class="kuiCollapseButton legend-collapse-button"
class="kuiCollapseButton visLegend__toggle"
aria-label="{{::'common.ui.vis.visTypes.legend.toggleLegendButtonAriaLabel' | i18n: { defaultMessage: 'Toggle legend' } }}"
aria-expanded="{{!!open}}"
aria-controls="{{::legendId}}"
@ -10,25 +10,25 @@
>
<span class="kuiIcon {{getToggleLegendClasses()}}"></span>
</button>
<ul class="legend-ul" ng-show="open" id="{{::legendId}}">
<ul class="visLegend__list" ng-show="open" id="{{::legendId}}">
<li
ng-repeat="legendData in labels track by legendData.label"
ng-mouseenter="highlight($event)"
ng-mouseleave="unhighlight($event)"
data-label="{{legendData.label}}"
class="legend-value color"
class="visLegend__value color"
>
<div class="legend-value-container" ng-keydown="onLegendEntryKeydown($event, this)">
<div ng-keydown="onLegendEntryKeydown($event, this)">
<div
kbn-accessible-click
data-label="{{legendData.label}}"
ng-focus="highlight($event)"
ng-blur="unhighlight($event)"
ng-click="showDetails = !showDetails"
ng-class="showDetails ? 'legend-value-full' : 'legend-value-truncate'"
class="legend-value-title"
ng-class="showDetails ? 'visLegend__valueTitle--full' : 'visLegend__valueTitle--truncate'"
class="visLegend__valueTitle"
tooltip="{{legendData.label}}"
tooltip-animation="false"
aria-label="{{::'common.ui.vis.visTypes.legend.toggleOptionsButtonAriaLabel' | i18n: { defaultMessage: '{legendDataLabel}, toggle options', values: { legendDataLabel: legendData.label } } }}"
@ -42,7 +42,7 @@
{{legendData.label}}
</div>
<div ng-if="showDetails" class="legend-value-details">
<div ng-if="showDetails" class="visLegend__valueDetails">
<div
class="kuiButtonGroup kuiButtonGroup--united kuiButtonGroup--fullWidth"
ng-show="canFilter(legendData)"
@ -66,7 +66,7 @@
</button>
</div>
<div class="legend-value-color-picker" role="listbox">
<div class="visLegend__valueColorPicker" role="listbox">
<span
id="{{legendId}}ColorPickerDesc"
class="kuiScreenReaderOnly"
@ -84,7 +84,7 @@
aria-selected="{{choice === getColor(legendData.label)}}"
ng-click="setColor(legendData.label, choice)"
ng-class="choice == getColor(legendData.label) ? 'fa-circle-o' : 'fa-circle'"
ng-style="{color: choice}" class="fa dot"
ng-style="{color: choice}" class="fa dot visLegend__valueColorPickerDot"
data-test-subj="legendSelectColor-{{choice}}"
>
</i>

14
src/ui/public/vis/vis_types/vislib_vis_type.js
View file

@ -38,10 +38,10 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
const BaseVisType = Private(BaseVisTypeProvider);
const legendClassName = {
top: 'vislib-container--legend-top',
bottom: 'vislib-container--legend-bottom',
left: 'vislib-container--legend-left',
right: 'vislib-container--legend-right',
top: 'visLib--legend-top',
bottom: 'visLib--legend-bottom',
left: 'visLib--legend-left',
right: 'visLib--legend-right',
};
class VislibVisController {
@ -51,11 +51,11 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
this.$scope = null;
this.container = document.createElement('div');
this.container.className = 'vislib-container';
this.container.className = 'visLib';
this.el.appendChild(this.container);
this.chartEl = document.createElement('div');
this.chartEl.className = 'vislib-chart';
this.chartEl.className = 'visLib__chart';
this.container.appendChild(this.chartEl);
}
@ -72,7 +72,7 @@ export function VislibVisTypeProvider(Private, $rootScope, $timeout, $compile) {
if (this.vis.params.addLegend) {
$(this.container).attr('class', (i, cls) => {
return cls.replace(/vislib-container--legend-\S+/g, '');
return cls.replace(/visLib--legend-\S+/g, '');
}).addClass(legendClassName[this.vis.params.legendPosition]);
this.$scope = $rootScope.$new();

1
src/ui/public/vislib/__tests__/index.js
View file

@ -21,7 +21,6 @@
import _ from 'lodash';
import expect from 'expect.js';
import ngMock from 'ng_mock';
import '../styles/main.less';
import VislibProvider from '..';
describe('Vislib Index Test Suite', function () {

2
src/ui/public/vislib/__tests__/lib/axis/axis.js
View file

@ -109,7 +109,7 @@ describe('Vislib Axis Class Test Suite', function () {
VisConfig = Private(VislibVisConfigProvider);
el = d3.select('body').append('div')
.attr('class', 'x-axis-wrapper')
.attr('class', 'visAxis--x')
.style('height', '40px');
fixture = el.append('div')

6
src/ui/public/vislib/__tests__/lib/axis_title.js
View file

@ -107,17 +107,17 @@ describe('Vislib AxisTitle Class Test Suite', function () {
PersistedState = $injector.get('PersistedState');
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper');
.attr('class', 'visWrapper');
el.append('div')
.attr('class', 'axis-wrapper-bottom')
.attr('class', 'visAxis__column--bottom')
.append('div')
.attr('class', 'axis-title y-axis-title')
.style('height', '20px')
.style('width', '20px');
el.append('div')
.attr('class', 'axis-wrapper-left')
.attr('class', 'visAxis__column--left')
.append('div')
.attr('class', 'axis-title x-axis-title')
.style('height', '20px')

2
src/ui/public/vislib/__tests__/lib/chart_title.js
View file

@ -97,7 +97,7 @@ describe('Vislib ChartTitle Class Test Suite', function () {
persistedState = new ($injector.get('PersistedState'))();
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper')
.attr('class', 'visWrapper')
.datum(data);
el.append('div')

20
src/ui/public/vislib/__tests__/lib/layout/layout.js
View file

@ -73,16 +73,16 @@ dateHistogramArray.forEach(function (data, i) {
describe('createLayout Method', function () {
it('should append all the divs', function () {
expect($(vis.el).find('.vis-wrapper').length).to.be(1);
expect($(vis.el).find('.y-axis-col-wrapper').length).to.be(2);
expect($(vis.el).find('.vis-col-wrapper').length).to.be(1);
expect($(vis.el).find('.y-axis-col').length).to.be(2);
expect($(vis.el).find('.visWrapper').length).to.be(1);
expect($(vis.el).find('.visAxis--y').length).to.be(2);
expect($(vis.el).find('.visWrapper__column').length).to.be(1);
expect($(vis.el).find('.visAxis__column--y').length).to.be(2);
expect($(vis.el).find('.y-axis-title').length).to.be.above(0);
expect($(vis.el).find('.y-axis-div-wrapper').length).to.be(2);
expect($(vis.el).find('.y-axis-spacer-block').length).to.be(4);
expect($(vis.el).find('.chart-wrapper').length).to.be(numberOfCharts);
expect($(vis.el).find('.x-axis-wrapper').length).to.be(2);
expect($(vis.el).find('.x-axis-div-wrapper').length).to.be(2);
expect($(vis.el).find('.visAxis__splitAxes--y').length).to.be(2);
expect($(vis.el).find('.visAxis__spacer--y').length).to.be(4);
expect($(vis.el).find('.visWrapper__chart').length).to.be(numberOfCharts);
expect($(vis.el).find('.visAxis--x').length).to.be(2);
expect($(vis.el).find('.visAxis__splitAxes--x').length).to.be(2);
expect($(vis.el).find('.x-axis-title').length).to.be.above(0);
});
});
@ -147,7 +147,7 @@ dateHistogramArray.forEach(function (data, i) {
describe('appendElem Method', function () {
beforeEach(function () {
vis.handler.layout.appendElem(vis.el, 'svg', 'column');
vis.handler.layout.appendElem('.visualize-chart', 'div', 'test');
vis.handler.layout.appendElem('.visChart', 'div', 'test');
});
it('should append DOM element to el with a class name', function () {

26
src/ui/public/vislib/__tests__/lib/layout/splits/column_chart/splits.js
View file

@ -186,7 +186,7 @@ describe('Vislib Split Function Test Suite', function () {
});
it('should add the correct class name', function () {
expect(!!$('.chart-wrapper-row').length).to.be(true);
expect(!!$('.visWrapper__splitCharts--row').length).to.be(true);
});
});
@ -196,20 +196,20 @@ describe('Vislib Split Function Test Suite', function () {
let fixture;
beforeEach(ngMock.inject(function () {
visEl = el.append('div').attr('class', 'vis-wrapper');
visEl.append('div').attr('class', 'x-axis-chart-title');
visEl.append('div').attr('class', 'y-axis-chart-title');
visEl.select('.x-axis-chart-title').call(chartTitleSplit);
visEl.select('.y-axis-chart-title').call(chartTitleSplit);
visEl = el.append('div').attr('class', 'visWrapper');
visEl.append('div').attr('class', 'visAxis__splitTitles--x');
visEl.append('div').attr('class', 'visAxis__splitTitles--y');
visEl.select('.visAxis__splitTitles--x').call(chartTitleSplit);
visEl.select('.visAxis__splitTitles--y').call(chartTitleSplit);
newEl = d3.select('body').append('div')
.attr('class', 'vis-wrapper')
.attr('class', 'visWrapper')
.datum({ series: [] });
newEl.append('div').attr('class', 'x-axis-chart-title');
newEl.append('div').attr('class', 'y-axis-chart-title');
newEl.select('.x-axis-chart-title').call(chartTitleSplit);
newEl.select('.y-axis-chart-title').call(chartTitleSplit);
newEl.append('div').attr('class', 'visAxis__splitTitles--x');
newEl.append('div').attr('class', 'visAxis__splitTitles--y');
newEl.select('.visAxis__splitTitles--x').call(chartTitleSplit);
newEl.select('.visAxis__splitTitles--y').call(chartTitleSplit);
fixture = newEl.selectAll(this.childNodes)[0].length;
}));
@ -223,8 +223,8 @@ describe('Vislib Split Function Test Suite', function () {
});
it('should remove the correct div', function () {
expect($('.y-axis-chart-title').length).to.be(1);
expect($('.x-axis-chart-title').length).to.be(0);
expect($('.visAxis__splitTitles--y').length).to.be(1);
expect($('.visAxis__splitTitles--x').length).to.be(0);
});
it('should remove all chart title divs when only one chart is rendered', function () {

16
src/ui/public/vislib/__tests__/lib/layout/splits/gauge_chart/splits.js
View file

@ -180,7 +180,7 @@ describe('Vislib Gauge Split Function Test Suite', function () {
});
it('should add the correct class name', function () {
expect(!!$('.chart-wrapper-row').length).to.be(true);
expect(!!$('.visWrapper__splitCharts--row').length).to.be(true);
});
});
@ -188,11 +188,11 @@ describe('Vislib Gauge Split Function Test Suite', function () {
let visEl;
beforeEach(ngMock.inject(function () {
visEl = el.append('div').attr('class', 'vis-wrapper');
visEl.append('div').attr('class', 'x-axis-chart-title');
visEl.append('div').attr('class', 'y-axis-chart-title');
visEl.select('.x-axis-chart-title').call(chartTitleSplit);
visEl.select('.y-axis-chart-title').call(chartTitleSplit);
visEl = el.append('div').attr('class', 'visWrapper');
visEl.append('div').attr('class', 'visAxis__splitTitles--x');
visEl.append('div').attr('class', 'visAxis__splitTitles--y');
visEl.select('.visAxis__splitTitles--x').call(chartTitleSplit);
visEl.select('.visAxis__splitTitles--y').call(chartTitleSplit);
}));
@ -201,8 +201,8 @@ describe('Vislib Gauge Split Function Test Suite', function () {
});
it('should append the correct number of divs', function () {
expect($('.x-axis-chart-title .chart-title').length).to.be(2);
expect($('.y-axis-chart-title .chart-title').length).to.be(2);
expect($('.visAxis__splitTitles--x .chart-title').length).to.be(2);
expect($('.visAxis__splitTitles--y .chart-title').length).to.be(2);
});

2
src/ui/public/vislib/__tests__/lib/vis_config.js
View file

@ -90,7 +90,7 @@ describe('Vislib VisConfig Class Test Suite', function () {
const VisConfig = Private(VislibVisConfigProvider);
const PersistedState = $injector.get('PersistedState');
el = d3.select('body').append('div')
.attr('class', 'vis-wrapper')
.attr('class', 'visWrapper')
.node();
visConfig = new VisConfig({

2
src/ui/public/vislib/__tests__/lib/x_axis.js
View file

@ -102,7 +102,7 @@ describe('Vislib xAxis Class Test Suite', function () {
VisConfig = Private(VislibVisConfigProvider);
el = d3.select('body').append('div')
.attr('class', 'x-axis-wrapper')
.attr('class', 'visAxis--x')
.style('height', '40px');
fixture = el.append('div')

4
src/ui/public/vislib/__tests__/vis.js
View file

@ -105,11 +105,11 @@ dataArray.forEach(function (data, i) {
});
it('should remove all DOM elements from el', function () {
expect($(secondVis.el).find('.vis-wrapper').length).to.be(0);
expect($(secondVis.el).find('.visWrapper').length).to.be(0);
});
it('should not remove visualizations that have not been destroyed', function () {
expect($(vis.el).find('.vis-wrapper').length).to.be(1);
expect($(vis.el).find('.visWrapper').length).to.be(1);
});
});

4
src/ui/public/vislib/__tests__/visualizations/gauge_chart.js
View file

@ -77,7 +77,7 @@ describe('Vislib Gauge Chart Test Suite', function () {
const config = _.defaultsDeep({}, opts, visLibParams);
if (vis) {
vis.destroy();
$('.visualize-chart').remove();
$('.visChart').remove();
}
vis = vislibVis(config);
persistedState = new PersistedState();
@ -95,7 +95,7 @@ describe('Vislib Gauge Chart Test Suite', function () {
afterEach(function () {
vis.destroy();
$('.visualize-chart').remove();
$('.visChart').remove();
});
it('creates meter gauge', function () {

4
src/ui/public/vislib/__tests__/visualizations/pie_chart.js
View file

@ -143,8 +143,8 @@ describe('No global chart settings', function () {
});
it('should render chart titles for all charts', function () {
expect($(chart1.el).find('.y-axis-chart-title').length).to.be(1);
expect($(chart2.el).find('.x-axis-chart-title').length).to.be(1);
expect($(chart1.el).find('.visAxis__splitTitles--y').length).to.be(1);
expect($(chart2.el).find('.visAxis__splitTitles--x').length).to.be(1);
});
describe('_validatePieData method', function () {

3
src/ui/public/vislib/_index.scss Normal file
View file

@ -0,0 +1,3 @@
@import './variables';
@import './lib/index';

5
src/ui/public/vislib/_variables.scss Normal file
View file

@ -0,0 +1,5 @@
// TODO: Use the same styles for TSVB and Vislib vis'
$visLineColor: transparentize($euiColorFullShade,0.8);
$visTextColor: transparentize($euiColorFullShade,0.6);
$visValueColor: transparentize($euiColorFullShade,0.3);
$visHoverBackgroundColor: transparentize($euiColorFullShade,0.9);

55
src/ui/public/vislib/lib/_alerts.scss Normal file
View file

@ -0,0 +1,55 @@
.visAlerts__tray {
position: absolute;
bottom: ($euiSizeXS+1px);
left: 0;
right: 0;
list-style: none;
padding: 0;
transition-property: opacity;
transition-delay: $euiAnimSpeedExtraFast;
transition-duration: $euiAnimSpeedExtraFast;
}
.visAlerts__icon {
margin: 0;
padding: 0 $euiSizeS;
flex: 0 0 auto;
align-self: center;
}
.visAlerts__text {
flex: 1 1 auto;
margin: 0;
padding: 0;
}
.visAlerts__close {
cursor: pointer;
}
.visAlert {
margin: 0 $euiSizeS $euiSizeS;
padding: $euiSizeXS $euiSizeS $euiSizeXS $euiSizeXS;
display: flex;
}
// Modifier naming and colors.
$visAlertTypes: (
info: $euiColorPrimary,
success: $euiColorSecondary,
warning: $euiColorWarning,
danger: $euiColorDanger,
);
// Create button modifiders based upon the map.
@each $name, $color in $visAlertTypes {
.visAlert--#{$name} {
$backgroundColor: tintOrShade($color, 90%, 70%);
$textColor: makeHighContrastColor($color, $backgroundColor);
background-color: $backgroundColor;
color: $textColor;
}
}

21
src/ui/public/vislib/lib/_handler.scss Normal file
View file

@ -0,0 +1,21 @@
.visError {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
// From ML
.top { align-self: flex-start; }
.bottom { align-self: flex-end; }
p {
margin-top: 15%;
@include euiFontSizeL;
}
}
// Prevent large request errors from overflowing the container
.visError--request {
max-width: 100%;
max-height: 100%;
}

4
src/ui/public/vislib/lib/_index.scss Normal file
View file

@ -0,0 +1,4 @@
@import './alerts';
@import './handler';
@import './layout/index';

16
src/ui/public/vislib/lib/alerts.js
View file

@ -49,12 +49,12 @@ export function VislibLibAlertsProvider() {
const icon = alertDef.icon || type;
const msg = alertDef.msg;
// alert container
const $icon = $('<i>').addClass('vis-alerts-icon fa fa-' + icon);
const $text = $('<p>').addClass('vis-alerts-text').text(msg);
const $icon = $('<i>').addClass('visAlerts__icon fa fa-' + icon);
const $text = $('<p>').addClass('visAlerts__text').text(msg);
const $closeIcon = $('<i>').addClass('fa fa-close');
const $closeDiv = $('<div>').addClass('vis-alerts-close').append($closeIcon);
const $closeDiv = $('<div>').addClass('visAlerts__close').append($closeIcon);
const $alert = $('<div>').addClass('vis-alert vis-alert-' + type).append([$icon, $text, $closeDiv]);
const $alert = $('<div>').addClass('visAlert visAlert--' + type).append([$icon, $text, $closeDiv]);
$closeDiv.on('click', () => {
$alert.remove();
});
@ -67,9 +67,9 @@ export function VislibLibAlertsProvider() {
const alerts = this.alerts;
const vis = this.vis;
$(vis.el).find('.vis-alerts').append($('<div>').addClass('vis-alerts-tray'));
$(vis.el).find('.visWrapper__alerts').append($('<div>').addClass('visAlerts__tray'));
if (!alerts.size()) return;
$(vis.el).find('.vis-alerts-tray').append(alerts.value());
$(vis.el).find('.visAlerts__tray').append(alerts.value());
}
// shows new alert
@ -81,13 +81,13 @@ export function VislibLibAlertsProvider() {
};
if (this.alertDefs.find(alertDef => alertDef.msg === alert.msg)) return;
this.alertDefs.push(alert);
$(vis.el).find('.vis-alerts-tray').append(
$(vis.el).find('.visAlerts__tray').append(
this._addAlert(alert)
);
}
destroy() {
$(this.vis.el).find('.vis-alerts').remove();
$(this.vis.el).find('.visWrapper__alerts').remove();
}
}

4
src/ui/public/vislib/lib/axis/axis.js
View file

@ -164,8 +164,8 @@ export function VislibLibAxisProvider(Private) {
.attr('transform', 'translate(1,0)');
}
if (config.get('type') === 'value') {
const spacerNodes = $(chartEl).find(`.y-axis-spacer-block-${position}`);
const elHeight = $(chartEl).find(`.axis-wrapper-${position}`).height();
const spacerNodes = $(chartEl).find(`.visAxis__spacer--y-${position}`);
const elHeight = $(chartEl).find(`.visAxis__column--${position}`).height();
spacerNodes.height(elHeight);
}
} else {

4
src/ui/public/vislib/lib/axis/axis_config.js
View file

@ -26,7 +26,7 @@ export function VislibLibAxisConfigProvider() {
const defaults = {
show: true,
type: 'value',
elSelector: '.axis-wrapper-{pos} .axis-div',
elSelector: '.visAxis__column--{pos} .axis-div',
position: 'left',
scale: {
type: 'linear',
@ -61,7 +61,7 @@ export function VislibLibAxisConfigProvider() {
},
title: {
text: '',
elSelector: '.axis-wrapper-{pos} .axis-div',
elSelector: '.visAxis__column--{pos} .axis-div',
}
};

2
src/ui/public/vislib/lib/handler.js
View file

@ -217,7 +217,7 @@ export function VisHandlerProvider(Private) {
.append('div')
// class name needs `chart` in it for the polling checkSize function
// to continuously call render on resize
.attr('class', 'visualize-error chart error')
.attr('class', 'visError chart error')
.attr('data-test-subj', 'visLibVisualizeError');
div.append('h4').text(markdownIt.renderInline(message));

1
src/ui/public/vislib/lib/layout/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './layout';

332
src/ui/public/vislib/lib/layout/_layout.scss Normal file
View file

@ -0,0 +1,332 @@
// Typical layout
// .visWrapper
// .visAxis--y
// .visAxis__spacer--y.visAxis__spacer--y-[position]
// .visAxis__column--y.visAxis__column--[position]
// .visAxis__splitTitles--y
// .visAxis__splitAxes--y
// .visAxis__spacer--y.visAxis__spacer--y-[position]
// .visWrapper__column
// .visAxis--x.visAxis__column--[position]
// .visAxis__splitAxes--x
// .visWrapper__chart
// .visWrapper__alerts
// .visAxis--x.visAxis__column--[position]
// .visAxis__splitAxes--x
// .visAxis__splitTitles--x
// .visAxis--y
// .visAxis__spacer--y.visAxis__spacer--y-[position]
// .visAxis__column--y.visAxis__column--[position]
// .visAxis__splitAxes--y
// .visAxis__spacer--y.visAxis__spacer--y-[position]
//
// LAYOUT ONLY
// Numbers in here are brittle
//
.visWrapper {
display: flex;
flex: 1 1 100%;
flex-direction: row;
min-height: 0;
min-width: 0;
overflow: hidden;
padding: ($euiSizeS + 2px) 0;
}
.visWrapper__column {
display: flex;
flex: 1 0 0px;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.visWrapper__splitCharts--column {
display: flex;
flex: 1 0 20px;
flex-direction: row;
min-height: 0;
min-width: 0;
.visWrapper__chart {
margin-top: 0px;
margin-bottom: 0px;
}
}
.visWrapper__splitCharts--row {
display: flex;
flex-direction: column;
flex: 1 1 100%;
min-height: 0;
min-width: 0;
.visWrapper__chart {
margin-left: 0px;
margin-right: 0px;
}
}
.visWrapper__chart {
display: flex;
flex: 1 0 0px;
overflow: visible;
margin: 5px;
min-height: 0;
min-width: 0;
}
.visWrapper__alerts {
position: relative;
}
// General Axes
.visAxis__column--top .axis-div svg {
margin-bottom: -5px;
}
// Y Axes
.visAxis--x,
.visAxis--y {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.visAxis--x {
overflow: visible;
}
.visAxis__spacer--y {
min-height: 0px;
}
.visAxis__column--y {
display: flex;
flex-direction: row;
flex: 1 0 ($euiSizeXL + $euiSizeXS);
min-height: 0;
min-width: 0;
}
.visAxis__splitTitles--y {
display: flex;
flex-direction: column;
min-height: $euiSizeM;
min-width: 0;
}
.visAxis__splitTitles--x {
display: flex;
flex-direction: row;
min-height: 1px;
max-height: $euiSize;
min-width: $euiSize;
}
.visAxis__splitAxes--x,
.visAxis__splitAxes--y {
display: flex;
flex-direction: column;
min-height: ($euiSize + $euiSizeXS);
min-width: 0;
}
.visAxis__splitAxes--x {
flex-direction: row;
min-height: 0;
}
//
// STYLE
//
// BEM NOTE: These selectors could not be renamed.
// Most come from an external libray, others are too general for
// search and replace. The SVG itself doesn't have a class, nor
// could it be easily found to apply to all chart types.
// At least wrapping selectors inside .visWrapper will narrow scope.
.visWrapper {
svg {
overflow: visible;
}
// SVG Element Default Styling
rect {
opacity: 1;
&:hover {
opacity: 0.8;
}
}
circle {
opacity: 0;
&:hover {
opacity: 1;
stroke-width: $euiSizeS;
stroke-opacity: 0.8;
}
}
.label-line {
fill: none;
stroke-width: 2px;
stroke: $visLineColor;
}
.label-text {
@include fontSize($euiFontSizeXS);
font-weight: $euiFontWeightRegular;
}
.y-axis-div {
flex: 1 1 $euiSizeL;
min-width: 1px;
min-height: $euiSizeM;
margin: ($euiSizeXS + 1px) 0;
}
.x-axis-div {
min-height: 0px;
min-width: 1px;
margin: 0px ($euiSizeXS + 1px);
width: 100%;
svg {
float: left; /* for some reason svg wont get positioned in top left corner of container div without this */
}
}
.tick text {
@include fontSize($euiFontSizeXS - 1px);
fill: $visValueColor;
}
.axis-title text {
@include fontSize($euiFontSizeXS);
font-weight: $euiFontWeightBold;
fill: $visTextColor;
}
.y-axis-title {
min-height: ($euiSizeM + 2px);
min-width: 1px;
}
.x-axis-title {
min-width: $euiSize;
}
.chart-title {
flex: 1 1 100%;
min-height: ($euiSizeM + 2px);
min-width: ($euiSizeM + 2px);
text {
@include fontSize($euiFontSizeXS - 1px);
fill: $visTextColor;
}
}
.chart {
flex: 1 1 100%;
min-height: 0;
min-width: 0;
overflow: visible;
> svg {
display: block;
}
}
.chart-row,
.chart-column {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
// Needs to come after .y-axis-div
.visWrapper__chart--first {
margin-top: 0px;
margin-left: 0px
}
.visWrapper__chart--last {
margin-bottom: 0px;
margin-right: 0px;
}
.axis {
shape-rendering: crispEdges;
stroke-width: 1px;
line, path {
stroke: $euiBorderColor;
fill: none;
shape-rendering: crispEdges;
}
}
.chart-label,
.label-text,
.chart-text {
fill: $visValueColor;
}
/* Brush Styling */
.brush .extent {
shape-rendering: crispEdges;
fill: $visHoverBackgroundColor;
}
.visAreaChart__overlapArea {
opacity: 0.8;
}
.series > path,
.series > rect {
fill-opacity: 0.8;
stroke-opacity: 1;
stroke-width: 0;
}
.blur_shape {
opacity: 0.3 !important;
}
.slice {
stroke-width: $euiSizeXS/2;
stroke: $euiColorEmptyShade;
&:hover {
opacity: 0.8
}
}
.line {
circle {
opacity: 1;
&:hover {
stroke-width: $euiSizeS;
stroke-opacity: 0.8;
}
}
}
.endzone {
pointer-events: none;
fill: $visHoverBackgroundColor;
}
}

6
src/ui/public/vislib/lib/layout/layout.js
View file

@ -90,7 +90,7 @@ export function VislibLibLayoutLayoutProvider(Private) {
const position = axis.axisConfig.get('position');
const chartTitle = new ChartTitle(visConfig);
const axisWrapperElement = $(this.el).find(`.axis-wrapper-${position}`);
const axisWrapperElement = $(this.el).find(`.visAxis__column--${position}`);
axisWrapperElement.css('visibility', 'hidden');
axis.render();
@ -103,10 +103,10 @@ export function VislibLibLayoutLayoutProvider(Private) {
if (axis.axisConfig.isHorizontal()) {
const spacerNodes = $(this.el).find(`.y-axis-spacer-block-${position}`);
const spacerNodes = $(this.el).find(`.visAxis__spacer--y-${position}`);
spacerNodes.height(`${height}px`);
} else {
axisWrapperElement.find('.y-axis-div-wrapper').width(`${width}px`);
axisWrapperElement.find('.visAxis__splitAxes--y').width(`${width}px`);
}
}

16
src/ui/public/vislib/lib/layout/splits/column_chart/chart_split.js
View file

@ -21,7 +21,7 @@ import d3 from 'd3';
export function VislibLibLayoutSplitsColumnChartChartSplitProvider() {
/*
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
* Adds div DOM elements to the `.visWrapper__chart` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart` elements as row objects.
*/
@ -30,14 +30,14 @@ export function VislibLibLayoutSplitsColumnChartChartSplitProvider() {
const div = d3.select(this)
.attr('class', function () {
if (data.rows) {
return 'chart-wrapper-row';
return 'visWrapper__splitCharts--row';
} else if (data.columns) {
return 'chart-wrapper-column';
return 'visWrapper__splitCharts--column';
} else {
if (parent) {
return 'chart-first chart-last chart-wrapper';
return 'visWrapper__chart--first visWrapper__chart--last visWrapper__chart';
}
return this.className + ' chart-wrapper';
return this.className + ' visWrapper__chart';
}
});
let divClass = '';
@ -65,12 +65,12 @@ export function VislibLibLayoutSplitsColumnChartChartSplitProvider() {
if (fullDivClass !== 'chart') {
if (chartsNumber > 1) {
if (i === 0) {
fullDivClass += ' chart-first';
fullDivClass += ' visWrapper__chart--first';
} else if (i === chartsNumber - 1) {
fullDivClass += ' chart-last';
fullDivClass += ' visWrapper__chart--last';
}
} else {
fullDivClass += ' chart-first chart-last';
fullDivClass += ' visWrapper__chart--first visWrapper__chart--last';
}
}
return fullDivClass;

10
src/ui/public/vislib/lib/layout/splits/column_chart/chart_title_split.js
View file

@ -22,8 +22,8 @@ import $ from 'jquery';
export function VislibLibLayoutSplitsColumnChartChartTitleSplitProvider() {
/*
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
* `.x-axis-chart-title` element based on the data layout.
* Adds div DOM elements to either the `.visAxis__splitTitles--y` element or the
* `.visAxis__splitTitles--x` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart-title` elements as row objects.
* if not data.rows or data.columns, return no chart titles
@ -31,7 +31,7 @@ export function VislibLibLayoutSplitsColumnChartChartTitleSplitProvider() {
return function (selection) {
selection.each(function (data) {
const div = d3.select(this);
const parent = $(this).parents('.vis-wrapper');
const parent = $(this).parents('.visWrapper');
if (!data.series) {
div.selectAll('.chart-title')
@ -43,9 +43,9 @@ export function VislibLibLayoutSplitsColumnChartChartTitleSplitProvider() {
.attr('class', 'chart-title');
if (data.rows) {
parent.find('.x-axis-chart-title').remove();
parent.find('.visAxis__splitTitles--x').remove();
} else {
parent.find('.y-axis-chart-title').remove();
parent.find('.visAxis__splitTitles--y').remove();
}
return div;

6
src/ui/public/vislib/lib/layout/splits/column_chart/x_axis_split.js
View file

@ -22,7 +22,7 @@ import d3 from 'd3';
export function VislibLibLayoutSplitsColumnChartXAxisSplitProvider() {
/*
* Adds div DOM elements to the `.x-axis-div-wrapper` element based on the data layout.
* Adds div DOM elements to the `.visAxis__splitAxes--x` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.x-axis-div` elements as row objects.
*/
@ -42,10 +42,10 @@ export function VislibLibLayoutSplitsColumnChartXAxisSplitProvider() {
.attr('class', (d, i) => {
let divClass = '';
if (i === 0) {
divClass += ' chart-first';
divClass += ' visWrapper__chart--first';
}
if (i === columns - 1) {
divClass += ' chart-last';
divClass += ' visWrapper__chart--last';
}
return 'x-axis-div axis-div' + divClass;
});

6
src/ui/public/vislib/lib/layout/splits/column_chart/y_axis_split.js
View file

@ -21,7 +21,7 @@ import d3 from 'd3';
export function VislibLibLayoutSplitsColumnChartYAxisSplitProvider() {
/*
* Adds div DOM elements to the `.y-axis-div-wrapper` element based on the data layout.
* Adds div DOM elements to the `.visAxis__splitAxes--y` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.y-axis-div` elements as row objects.
*/
@ -44,10 +44,10 @@ export function VislibLibLayoutSplitsColumnChartYAxisSplitProvider() {
.attr('class', (d, i) => {
let divClass = '';
if (i === 0) {
divClass += ' chart-first';
divClass += ' visWrapper__chart--first';
}
if (i === rows - 1) {
divClass += ' chart-last';
divClass += ' visWrapper__chart--last';
}
return 'y-axis-div axis-div' + divClass;
});

8
src/ui/public/vislib/lib/layout/splits/gauge_chart/chart_split.js
View file

@ -23,7 +23,7 @@ import d3 from 'd3';
export default function ChartSplitFactory() {
/*
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
* Adds div DOM elements to the `.visWrapper__chart` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart` elements as row objects.
*/
@ -33,11 +33,11 @@ export default function ChartSplitFactory() {
const div = d3.select(this)
.attr('class', function () {
if (data.rows) {
return 'chart-wrapper-row';
return 'visWrapper__splitCharts--row';
} else if (data.columns) {
return 'chart-wrapper-column';
return 'visWrapper__splitCharts--column';
} else {
return 'chart-wrapper';
return 'visWrapper__chart';
}
});
let divClass;

8
src/ui/public/vislib/lib/layout/splits/gauge_chart/chart_title_split.js
View file

@ -23,8 +23,8 @@ import d3 from 'd3';
export default function ChartTitleSplitFactory() {
/*
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
* `.x-axis-chart-title` element based on the data layout.
* Adds div DOM elements to either the `.visAxis__splitTitles--y` element or the
* `.visAxis__splitTitles--x` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart-title` elements as row objects.
* if not data.rows or data.columns, return no chart titles
@ -45,9 +45,9 @@ export default function ChartTitleSplitFactory() {
.attr('class', 'chart-title');
if (data.rows) {
d3.select(parent).select('.x-axis-chart-title').remove();
d3.select(parent).select('.visAxis__splitTitles--x').remove();
} else {
d3.select(parent).select('.y-axis-chart-title').remove();
d3.select(parent).select('.visAxis__splitTitles--y').remove();
}
return div;

8
src/ui/public/vislib/lib/layout/splits/pie_chart/chart_split.js
View file

@ -21,7 +21,7 @@ import d3 from 'd3';
export function VislibLibLayoutSplitsPieChartChartSplitProvider() {
/*
* Adds div DOM elements to the `.chart-wrapper` element based on the data layout.
* Adds div DOM elements to the `.visWrapper__chart` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart` elements as row objects.
*/
@ -31,11 +31,11 @@ export function VislibLibLayoutSplitsPieChartChartSplitProvider() {
const div = d3.select(this)
.attr('class', function () {
if (data.rows) {
return 'chart-wrapper-row';
return 'visWrapper__splitCharts--row';
} else if (data.columns) {
return 'chart-wrapper-column';
return 'visWrapper__splitCharts--column';
} else {
return 'chart-wrapper';
return 'visWrapper__chart';
}
});
let divClass;

8
src/ui/public/vislib/lib/layout/splits/pie_chart/chart_title_split.js
View file

@ -21,8 +21,8 @@ import d3 from 'd3';
export function VislibLibLayoutSplitsPieChartChartTitleSplitProvider() {
/*
* Adds div DOM elements to either the `.y-axis-chart-title` element or the
* `.x-axis-chart-title` element based on the data layout.
* Adds div DOM elements to either the `.visAxis__splitTitles--y` element or the
* `.visAxis__splitTitles--x` element based on the data layout.
* For example, if the data has rows, it returns the same number of
* `.chart-title` elements as row objects.
* if not data.rows or data.columns, return no chart titles
@ -43,9 +43,9 @@ export function VislibLibLayoutSplitsPieChartChartTitleSplitProvider() {
.attr('class', 'chart-title');
if (data.rows) {
d3.select(parent).select('.x-axis-chart-title').remove();
d3.select(parent).select('.visAxis__splitTitles--x').remove();
} else {
d3.select(parent).select('.y-axis-chart-title').remove();
d3.select(parent).select('.visAxis__splitTitles--y').remove();
}
return div;

40
src/ui/public/vislib/lib/layout/types/column_layout.js
View file

@ -54,75 +54,75 @@ export function VislibLibLayoutTypesColumnLayoutProvider(Private) {
{
parent: el,
type: 'div',
class: 'vis-wrapper',
class: 'visWrapper',
datum: data,
children: [
{
type: 'div',
class: 'y-axis-col-wrapper',
class: 'visAxis--y',
children: [
{
type: 'div',
class: 'y-axis-spacer-block y-axis-spacer-block-top'
class: 'visAxis__spacer--y visAxis__spacer--y-top'
},
{
type: 'div',
class: 'y-axis-col axis-wrapper-left',
class: 'visAxis__column--y visAxis__column--left',
children: [
{
type: 'div',
class: 'y-axis-chart-title',
class: 'visAxis__splitTitles--y',
splits: chartTitleSplit
},
{
type: 'div',
class: 'y-axis-div-wrapper',
class: 'visAxis__splitAxes--y',
splits: yAxisSplit
}
]
},
{
type: 'div',
class: 'y-axis-spacer-block y-axis-spacer-block-bottom'
class: 'visAxis__spacer--y visAxis__spacer--y-bottom'
}
]
},
{
type: 'div',
class: 'vis-col-wrapper',
class: 'visWrapper__column',
children: [
{
type: 'div',
class: 'x-axis-wrapper axis-wrapper-top',
class: 'visAxis--x visAxis__column--top',
children: [
{
type: 'div',
class: 'x-axis-div-wrapper',
class: 'visAxis__splitAxes--x',
splits: xAxisSplit
}
]
},
{
type: 'div',
class: 'chart-wrapper',
class: 'visWrapper__chart',
splits: chartSplit
},
{
type: 'div',
class: 'vis-alerts'
class: 'visWrapper__alerts'
},
{
type: 'div',
class: 'x-axis-wrapper axis-wrapper-bottom',
class: 'visAxis--x visAxis__column--bottom',
children: [
{
type: 'div',
class: 'x-axis-div-wrapper',
class: 'visAxis__splitAxes--x',
splits: xAxisSplit
},
{
type: 'div',
class: 'x-axis-chart-title',
class: 'visAxis__splitTitles--x',
splits: chartTitleSplit
}
]
@ -131,26 +131,26 @@ export function VislibLibLayoutTypesColumnLayoutProvider(Private) {
},
{
type: 'div',
class: 'y-axis-col-wrapper',
class: 'visAxis--y',
children: [
{
type: 'div',
class: 'y-axis-spacer-block y-axis-spacer-block-top'
class: 'visAxis__spacer--y visAxis__spacer--y-top'
},
{
type: 'div',
class: 'y-axis-col axis-wrapper-right',
class: 'visAxis__column--y visAxis__column--right',
children: [
{
type: 'div',
class: 'y-axis-div-wrapper',
class: 'visAxis__splitAxes--y',
splits: yAxisSplit
}
]
},
{
type: 'div',
class: 'y-axis-spacer-block y-axis-spacer-block-bottom'
class: 'visAxis__spacer--y visAxis__spacer--y-bottom'
}
]
}

12
src/ui/public/vislib/lib/layout/types/gauge_layout.js
View file

@ -49,30 +49,30 @@ export function GaugeLayoutProvider(Private) {
{
parent: el,
type: 'div',
class: 'vis-wrapper',
class: 'visWrapper',
datum: data,
children: [
{
type: 'div',
class: 'y-axis-chart-title',
class: 'visAxis__splitTitles--y',
//splits: chartTitleSplit
},
{
type: 'div',
class: 'vis-col-wrapper',
class: 'visWrapper__column',
children: [
{
type: 'div',
class: 'chart-wrapper',
class: 'visWrapper__chart',
splits: chartSplit
},
{
type: 'div',
class: 'vis-alerts'
class: 'visWrapper__alerts'
},
{
type: 'div',
class: 'x-axis-chart-title',
class: 'visAxis__splitTitles--x',
//splits: chartTitleSplit
}
]

10
src/ui/public/vislib/lib/layout/types/pie_layout.js
View file

@ -50,26 +50,26 @@ export function VislibLibLayoutTypesPieLayoutProvider(Private) {
{
parent: el,
type: 'div',
class: 'vis-wrapper',
class: 'visWrapper',
datum: data,
children: [
{
type: 'div',
class: 'y-axis-chart-title',
class: 'visAxis__splitTitles--y',
splits: chartTitleSplit
},
{
type: 'div',
class: 'vis-col-wrapper',
class: 'visWrapper__column',
children: [
{
type: 'div',
class: 'chart-wrapper',
class: 'visWrapper__chart',
splits: chartSplit
},
{
type: 'div',
class: 'x-axis-chart-title',
class: 'visAxis__splitTitles--x',
splits: chartTitleSplit
}
]

10
src/ui/public/vislib/partials/touchdown.tmpl.html
View file

@ -1,7 +1,7 @@
<p class="vis-tooltip-header bg-info">
<i class="fa fa-info-circle vis-tooltip-header-icon"></i>
<span class="vis-tooltip-header-text">
<p class="visTooltip__header">
<i class="fa fa-info-circle visTooltip__headerIcon"></i>
<span class="visTooltip__headerText">
<%= wholeBucket ? 'Part of this bucket' : 'This area' %>
may contain partial data. <br> The selected time range does not fully cover it.
may contain partial data. The selected time range does not fully cover it.
</span>
</p>
</p>

61
src/ui/public/vislib/styles/_alerts.less
View file

@ -1,61 +0,0 @@
@import "~ui/styles/variables";
.vis-alerts {
position: relative;
}
.vis-alerts-tray {
position: absolute;
bottom: 5px;
left: 0px;
right: 0px;
list-style: none;
padding: 0;
transition-property: opacity;
transition-delay: 50ms;
transition-duration: 50ms;
}
.vis-alerts-icon {
margin: 0;
padding: 0 10px;
flex: 0 0 auto;
align-self: center;
}
.vis-alerts-text {
flex: 1 1 auto;
margin: 0;
padding: 0;
}
.vis-alerts-close {
cursor: pointer;
}
.vis-alert {
margin: 0 10px 10px;
padding: 5px 10px 5px 5px;
color: @alert-vis-alert-color;
border-radius: @alert-border-radius;
border: 1px solid;
border-color: @alert-vis-alert-border;
display: flex;
}
.vis-alert-success {
.alert-variant(fade(@alert-success-bg, 75%); @alert-success-border; @alert-success-text);
}
.vis-alert-info {
.alert-variant(fade(@alert-info-bg, 75%); @alert-info-border; @alert-info-text);
}
.vis-alert-warning {
.alert-variant(fade(@alert-warning-bg, 75%); @alert-warning-border; @alert-warning-text);
}
.vis-alert-danger {
.alert-variant(fade(@alert-danger-bg, 75%); @alert-danger-border; @alert-danger-text);
}

10
src/ui/public/vislib/styles/_error.less
View file

@ -1,10 +0,0 @@
.error {
flex: 1 1 100%;
text-align: center;
p {
margin-top: 15%;
font-size: 18px;
text-wrap: wrap;
}
}

272
src/ui/public/vislib/styles/_layout.less
View file

@ -1,272 +0,0 @@
.vislib-container {
flex: 1 1 0; /* 1 */
display: flex;
flex-direction: row;
overflow: auto;
&.vislib-container--legend-left {
flex-direction: row-reverse;
}
&.vislib-container--legend-right {
flex-direction: row;
}
&.vislib-container--legend-top {
flex-direction: column-reverse;
}
&.vislib-container--legend-bottom {
flex-direction: column;
}
}
.vislib-chart {
display: flex;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.visualize-chart {
display: flex;
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.vis-wrapper {
display: flex;
flex: 1 1 100%;
flex-direction: row;
min-height: 0;
min-width: 0;
overflow: hidden;
padding: 10px 0;
}
.vis-wrapper svg {
overflow: visible;
}
/* SVG Element Default Styling */
.vis-wrapper {
rect {
opacity: 1;
&:hover {
opacity: @vis-hover-opacity;
}
}
circle {
opacity: 0;
&:hover {
opacity: 1;
stroke-width: 10px;
stroke-opacity: @vis-hover-opacity;
}
}
}
/* YAxis logic */
.y-axis-col-wrapper {
display: flex;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.y-axis-col {
display: flex;
flex-direction: row;
flex: 1 0 36px;
min-height: 0;
min-width: 0;
}
.y-axis-spacer-block {
min-height: 0px;
}
.y-axis-div-wrapper {
display: flex;
flex-direction: column;
min-height: 20px;
min-width: 0;
}
.y-axis-div {
flex: 1 1 25px;
min-width: 1px;
min-height: 14px;
margin: 5px 0px;
}
.y-axis-title {
min-height: 14px;
min-width: 1px;
}
.y-axis-chart-title {
display: flex;
flex-direction: column;
min-height: 14px;
min-width: 0;
}
.y-axis-title text, .x-axis-title text {
font-size: 9pt;
fill: @vis-axis-title-color;
font-weight: bold;
}
.chart-title {
flex: 1 1 100%;
min-height: 14px;
min-width: 14px;
}
.chart-title text {
font-size: 11px;
fill: @vis-chart-title-color;
}
.vis-col-wrapper {
display: flex;
flex: 1 0 0px;
flex-direction: column;
min-height: 0;
min-width: 0;
}
.chart-wrapper {
display: flex;
flex: 1 0 0px;
overflow: visible;
margin: 5px;
min-height: 0;
min-width: 0;
}
.chart-wrapper-row .chart-wrapper {
margin-left: 0px;
margin-right: 0px;
}
.chart-wrapper-column .chart-wrapper {
margin-top: 0px;
margin-bottom: 0px;
}
.chart-wrapper-column {
display: flex;
flex: 1 0 20px;
flex-direction: row;
min-height: 0;
min-width: 0;
}
.chart-wrapper-row {
display: flex;
flex-direction: column;
flex: 1 1 100%;
min-height: 0;
min-width: 0;
}
.chart {
flex: 1 1 100%;
min-height: 0;
min-width: 0;
> svg {
display: block;
}
overflow: visible;
}
.chart-row {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.chart-column {
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
.x-axis-wrapper {
display: flex;
flex-direction: column;
min-height: 0px;
min-width: 0;
overflow: visible;
}
.x-axis-div-wrapper {
display: flex;
flex-direction: row;
min-height: 0px;
min-width: 0;
}
.x-axis-chart-title {
display: flex;
flex-direction: row;
min-height: 1px;
max-height: 15px;
min-width: 20px;
}
.x-axis-title {
min-width: 20px;
}
.x-axis-div {
min-height: 0px;
min-width: 1px;
margin: 0px 5px;
width: 100%;
}
.x-axis-div svg {
float: left; /* for some reason svg wont get positioned in top left corner of container div without this */
}
.axis-wrapper-top .axis-div svg {
margin-bottom: -5px;
}
.chart-first {
margin-top: 0px;
margin-left: 0px
}
.chart-last {
margin-bottom: 0px;
margin-right: 0px;
}
.label-line {
opacity: .3;
stroke: black;
stroke-width: 2px;
fill: none;
}
.label-text {
font-size: 130%;
font-weight: normal;
}
// SASSTODO: Make sure these colors convert to theme variables
.tab-dashboard.theme-dark {
.y-axis-title text, .x-axis-title text {
fill: @gray10;
}
.chart-title text {
fill: @gray10;
}
}

153
src/ui/public/vislib/styles/_legend.less
View file

@ -1,153 +0,0 @@
@import "~ui/styles/mixins";
@import "~ui/styles/variables";
visualize-legend {
display: flex;
flex-direction: row;
}
.legend-collapse-button {
align-self: flex-start;
}
.legend-col-wrapper {
.flex-parent(0, 0, auto);
z-index: 10;
min-height: 0;
overflow: hidden;
flex-direction: row;
padding-top: 5px;
height: 100%;
.vislib-container--legend-left & {
flex-direction: row-reverse;
}
.vislib-container--legend-right & {
flex-direction: row;
}
.vislib-container--legend-top & {
flex-direction: column-reverse;
width: 100%;
padding-left: 25px;
}
.vislib-container--legend-bottom & {
flex-direction: column;
width: 100%;
padding-left: 25px;
}
.header {
cursor: pointer;
width: 15px;
}
.legend-ul {
width: 150px;
flex: 1 1 auto;
overflow-x: hidden;
overflow-y: auto;
color: @legend-item-color;
list-style-type: none;
padding: 0;
margin-bottom: 0;
visibility: visible;
min-height: 0;
font-size: 12px;
line-height: 13px;
text-align: left;
flex-direction: column;
.vislib-container--legend-top &,
.vislib-container--legend-bottom & {
width: auto;
overflow-y: hidden;
.legend-value {
display: inline-block;
}
}
}
.legend-ul.hidden {
visibility: hidden;
}
}
.legend-value {
&:hover {
cursor: pointer;
}
}
.legend-value-title {
padding: 3px;
&:hover {
background-color: @sidebar-hover-bg;
}
}
.legend-value-truncate {
overflow-x: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.legend-value-full {
white-space: normal;
word-break: break-all;
background-color: @sidebar-hover-bg;
}
.legend-value-details {
border-bottom: 1px solid @sidebar-bg;
}
.legend-value-color-picker {
width: 130px;
margin: auto;
.dot {
line-height: 14px;
margin: 2px;
font-size: 14px;
}
.dot:hover {
margin: 0px;
font-size: 18px
}
}
// SASSTODO: Make sure these colors convert to theme variables
.tab-dashboard.theme-dark {
.legend {
background-color: #272727;
}
.legend-col-wrapper {
.legend-ul {
border-left-color: @gray7;
color: @gray10;
}
}
.legend-value-title {
padding: 3px;
&:hover {
background-color: darken(@gray7, 5%);
}
}
.legend-value-full {
background-color: @gray3;
}
.legend-value-details {
border-bottom: 1px solid @gray7;
}
}

114
src/ui/public/vislib/styles/_svg.less
View file

@ -1,114 +0,0 @@
@import (reference) "~ui/styles/variables";
/* Axis Styles */
.axis {
shape-rendering: crispEdges;
stroke-width: 1px;
line, path {
stroke: @svg-axis-color;
fill: none;
shape-rendering: crispEdges;
}
}
.tick text {
font-size: 8pt;
fill: @svg-tick-text-color;
}
.chart-text {
fill: @svg-tick-text-color;
}
.label-line {
stroke: @svg-tick-text-color;
}
.label-text {
fill: @svg-tick-text-color;
}
/* Brush Styling */
.brush .extent {
stroke: @svg-brush-color;
fill-opacity: .125;
shape-rendering: crispEdges;
}
@vis-hover-opacity: 0.8;
.overlap_area {
opacity: 0.8;
}
.series > path,
.series > rect {
fill-opacity: 0.8;
stroke-opacity: 1;
stroke-width: 0;
}
.blur_shape {
opacity: 0.3 !important;
}
.slice {
stroke: white;
stroke-width: 2px;
&:hover {
opacity: @vis-hover-opacity;
}
}
.leaflet-clickable {
&:hover {
stroke-width: 10px;
stroke-opacity: @vis-hover-opacity;
}
}
/* Visualization Styling */
.line {
circle {
opacity: 1;
&:hover {
stroke-width: 10px;
stroke-opacity: @vis-hover-opacity;
}
}
}
.endzone {
opacity: 0.05;
fill: @svg-endzone-bg;
pointer-events: none;
}
// SASSTODO: Make sure these colors convert to theme variables
.tab-dashboard.theme-dark {
.axis {
line, path {
stroke: @gray8;
}
}
.tick text {
fill: @gray10;
}
.chart-label {
fill: @gray10;
}
.brush .extent {
stroke: @white;
}
.endzone {
fill: @white;
}
}

82
src/ui/public/vislib/styles/_tooltip.less
View file

@ -1,82 +0,0 @@
@import (reference) "~ui/styles/variables";
.vis-tooltip,
.vis-tooltip-sizing-clone {
visibility: hidden;
line-height: 1.1;
font-size: @font-size-base;
font-weight: normal;
background: @tooltip-bg !important;
color: @tooltip-color !important;
border-radius: 4px;
position: fixed;
z-index: 120;
word-wrap: break-word;
max-width: 40%;
overflow: hidden;
pointer-events: none;
> :last-child {
margin-bottom: @tooltip-space;
}
> * {
margin: @tooltip-space @tooltip-space 0;
}
.bsTooltip-label {
font-family: @font-family-sans-serif;
color: tint(@globalColorBlue, 40%);
font-weight: normal;
th {
font-weight: @tooltip-bold;
}
}
.bsTooltip-value {
font-family: @font-family-sans-serif;
}
table {
td,th {
padding: @tooltip-space-tight;
&.row-bucket {
word-break: break-all;
}
}
}
}
.vis-tooltip-header {
margin: 0 0 @tooltip-space 0;
padding: @tooltip-space-tight @tooltip-space;
display: flex;
align-items: center;
line-height: 1.5;
&:last-child {
margin-bottom: 0;
}
+ * {
margin-top: @tooltip-space;
}
}
.vis-tooltip-header-icon {
flex: 0 0 auto;
padding-right: @tooltip-space;
}
.vis-tooltip-header-text {
flex: 1 1 200px;
}
.vis-tooltip-sizing-clone {
visibility: hidden;
position: fixed;
top: -500px;
left: -500px;
}

8
src/ui/public/vislib/styles/main.less
View file

@ -1,8 +0,0 @@
@import (reference) "~ui/styles/variables";
@import "./_error";
@import "./_layout";
@import "./_legend";
@import "./_svg";
@import "./_tooltip";
@import "./_alerts";

3
src/ui/public/vislib/vis.js
View file

@ -21,7 +21,6 @@ import _ from 'lodash';
import d3 from 'd3';
import { KbnError } from '../errors';
import { EventsProvider } from '../events';
import './styles/main.less';
import { VislibVisConfigProvider } from './lib/vis_config';
import { VisHandlerProvider } from './lib/handler';
@ -105,7 +104,7 @@ export function VislibVisProvider(Private) {
* @method destroy
*/
destroy() {
const selection = d3.select(this.el).select('.vis-wrapper');
const selection = d3.select(this.el).select('.visWrapper');
if (this.handler) this._runOnHandler('destroy');

1
src/ui/public/vislib/vislib.js
View file

@ -23,7 +23,6 @@ import './lib/types';
import './lib/layout/layout_types';
import './lib/data';
import './visualizations/vis_types';
import './styles/main.less';
import { VislibVisProvider } from './vis';
// prefetched for faster optimization runs

2
src/ui/public/vislib/visualizations/point_series/area_chart.js
View file

@ -100,7 +100,7 @@ export function VislibVisualizationsAreaChartProvider(Private) {
.attr('data-label', data.label)
.style('fill', () => color(data.label))
.style('stroke', () => color(data.label))
.classed('overlap_area', function () {
.classed('visAreaChart__overlapArea', function () {
return isOverlapping;
})
.attr('clip-path', 'url(#' + this.baseChart.clipPathId + ')');

1
src/ui/public/visualize/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './components/index';

2
src/ui/public/visualize/components/__snapshots__/visualization_noresults.test.js.snap
View file

@ -2,7 +2,7 @@
exports[`VisualizationNoResults should render according to snapshot 1`] = `
<div
class="text-center visualize-error visualize-chart"
class="text-center visError visChart"
>
<div
class="item top"

4
src/ui/public/visualize/components/__snapshots__/visualization_requesterror.test.js.snap
View file

@ -2,10 +2,10 @@
exports[`VisualizationRequestError should render according to snapshot 1`] = `
<div
class="visualize-error visualize-chart"
class="visError visChart"
>
<div
class="euiText euiText--extraSmall visualize-request-error"
class="euiText euiText--extraSmall visError--request"
>
<div
class="euiTextColor euiTextColor--danger"

1
src/ui/public/visualize/components/_index.scss Normal file
View file

@ -0,0 +1 @@
@import './visualization';

45
src/ui/public/visualize/components/visualization.less → src/ui/public/visualize/components/_visualization.scss
View file

@ -1,11 +1,11 @@
@import (reference) "~ui/styles/variables";
// SASSTODO: Too risky to change to BEM naming
.visualize {
display: flex;
flex: 1 1 100%;
overflow: hidden;
overflow-x: hidden;
}
// SASSTODO: Too risky to change to BEM naming
.visualization {
display: flex;
flex-direction: column;
@ -13,22 +13,18 @@
width: 100%;
overflow: auto;
position: relative;
padding: 8px 8px 8px 8px;
padding: $euiSizeS;
flex: 1 1 100%;
.k4tip {
white-space: pre-line;
}
/**
* 1. Expand to fill the container but accept being squeezed smaller by the spy, even so small
* that it disappears entirely.
*/
.vis-container {
.visChart__container {
flex: 1 1 0; /* 1 */
display: flex;
flex-direction: row;
overflow: auto;
-webkit-transition: opacity 0.01s;
transition: opacity 0.01s;
// IE11 Hack
@ -36,43 +32,32 @@
// Normally we would just set flex: 1 1 0%, which works as expected in IE11.
// Unfortunately, a recent bug in Firefox causes this rule to be ignored, so we
// have to use an IE-specific hack instead.
_:-ms-fullscreen, :root & {
@include internetExplorerOnly(){
flex: 1 0;
}
}
// SASSTODO: Can't find exact usage
.loading {
opacity: @loading-opacity;
opacity: 0.5;
}
// SASSTODO: Can't find exact usage
.spinner {
position: absolute;
top: 40%;
left: 0;
right: 0;
z-index: 20;
opacity: @loading-opacity;
opacity: 0.5;
}
}
/**
* 1. Expand to fill the container and accept being squeezed smaller by the spy.
*/
.visualize-error {
flex: 1 1 0;
.visChart {
display: flex;
align-items: center;
justify-content: center;
.top { align-self: flex-start; }
.item { }
.bottom { align-self: flex-end; }
flex: 1 1 auto;
min-height: 0;
min-width: 0;
}
/**
* 1. Prevent large request errors from overflowing the container
*/
.visualize-request-error {
max-width: 100%;
max-height: 100%;
}

2
src/ui/public/visualize/components/visualization.tsx
View file

@ -27,8 +27,6 @@ import { VisualizationChart } from './visualization_chart';
import { VisualizationNoResults } from './visualization_noresults';
import { VisualizationRequestError } from './visualization_requesterror';
import './visualization.less';
function shouldShowNoResultsMessage(vis: Vis, visData: any): boolean {
const requiresSearch = get(vis, 'type.requiresSearch');
const rows: object[] | undefined = get(visData, 'rows');

4
src/ui/public/visualize/components/visualization_chart.test.js
View file

@ -79,7 +79,7 @@ describe('<VisualizationChart/>', () => {
const wrapper = mount(<VisualizationChart vis={vis} />);
jest.runAllTimers();
await renderPromise;
expect(wrapper.find('.visualize-chart').text()).toMatch(/markdown/);
expect(wrapper.find('.visChart').text()).toMatch(/markdown/);
});
it('should re-render on param change', async () => {
@ -96,7 +96,7 @@ describe('<VisualizationChart/>', () => {
jest.runAllTimers();
await renderPromise;
expect(wrapper.find('.visualize-chart').text()).toBe('new text');
expect(wrapper.find('.visChart').text()).toBe('new text');
expect(renderComplete).toHaveBeenCalledTimes(2);
});
});

4
src/ui/public/visualize/components/visualization_chart.tsx
View file

@ -87,13 +87,13 @@ class VisualizationChart extends React.Component<VisualizationChartProps> {
public render() {
return (
<div className="vis-container" tabIndex={0} ref={this.containerDiv}>
<div className="visChart__container" tabIndex={0} ref={this.containerDiv}>
<span className="kuiScreenReaderOnly">
{this.props.vis.type.title} visualization, not yet accessible
</span>
<div
aria-hidden={!this.props.vis.type.isAccessible}
className="visualize-chart"
className="visChart"
ref={this.chartDiv}
/>
</div>

2
src/ui/public/visualize/components/visualization_noresults.tsx
View file

@ -29,7 +29,7 @@ export class VisualizationNoResults extends React.Component<VisualizationNoResul
public render() {
return (
<div className="text-center visualize-error visualize-chart" ref={this.containerDiv}>
<div className="text-center visError visChart" ref={this.containerDiv}>
<div className="item top" />
<div className="item">
<h2 aria-hidden="true">

4
src/ui/public/visualize/components/visualization_requesterror.tsx
View file

@ -35,8 +35,8 @@ export class VisualizationRequestError extends React.Component<VisualizationRequ
const errorMessage = (error && error.message) || error;
return (
<div className="visualize-error visualize-chart" ref={this.containerDiv}>
<EuiText className="visualize-request-error" color="danger" size="xs">
<div className="visError visChart" ref={this.containerDiv}>
<EuiText className="visError--request" color="danger" size="xs">
{errorMessage}
</EuiText>
</div>

6
test/functional/page_objects/discover_page.js
View file

@ -138,7 +138,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
return PageObjects.header.waitUntilLoadingHasFinished()
.then(() => {
return getRemote()
.findByCssSelector('div.y-axis-div-wrapper > div > svg > g > g:last-of-type');
.findByCssSelector('div.visAxis__splitAxes--y > div > svg > g > g:last-of-type');
})
.then(function setYAxisLabel(y) {
return y
@ -163,10 +163,10 @@ export function DiscoverPageProvider({ getService, getPageObjects }) {
});
});
})
// 3). get the chart-wrapper elements
// 3). get the visWrapper__chart elements
.then(function () {
return getRemote()
// #kibana-body > div.content > div > div > div > div.visEditor__canvas > visualize > div.visualize-chart > div > div.vis-col-wrapper > div.chart-wrapper > div > svg > g > g.series.\30 > rect:nth-child(1)
// #kibana-body > div.content > div > div > div > div.visEditor__canvas > visualize > div.visChart > div > div.visWrapper__column > div.visWrapper__chart > div > svg > g > g.series.\30 > rect:nth-child(1)
.findAllByCssSelector('svg > g > g.series > rect') // rect
.then(function (chartTypes) {
function getChartType(chart) {

2
test/functional/page_objects/point_series_page.js
View file

@ -69,7 +69,7 @@ export function PointSeriesPageProvider({ getService }) {
getRightValueAxes() {
return remote
.setFindTimeout(defaultFindTimeout)
.findAllByCssSelector('.axis-wrapper-right g.axis')
.findAllByCssSelector('.visAxis__column--right g.axis')
.then(all => all.length);
}

12
test/functional/page_objects/visualize_page.js
View file

@ -846,10 +846,10 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
// 2). find and save the y-axis pixel size (the chart height)
const rectangle = await find.byCssSelector('clipPath rect');
const yAxisHeight = await rectangle.getAttribute('height');
// 3). get the chart-wrapper elements
// 3). get the visWrapper__chart elements
const chartTypes = await retry.try(
async () => await find
.allByCssSelector(`.chart-wrapper circle[data-label="${dataLabel}"][fill-opacity="1"]`, defaultFindTimeout * 2));
.allByCssSelector(`.visWrapper__chart circle[data-label="${dataLabel}"][fill-opacity="1"]`, defaultFindTimeout * 2));
// 5). for each chart element, find the green circle, then the cy position
async function getChartType(chart) {
@ -868,7 +868,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
async getBarChartData(dataLabel = 'Count', axis = 'ValueAxis-1') {
// 1). get the range/pixel ratio
const yAxisRatio = await this.getChartYAxisRatio(axis);
// 3). get the chart-wrapper elements
// 3). get the visWrapper__chart elements
const chartTypes = await find.allByCssSelector(`svg > g > g.series > rect[data-label="${dataLabel}"]`);
async function getChartType(chart) {
@ -884,7 +884,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
async getChartYAxisRatio(axis = 'ValueAxis-1') {
// 1). get the maximum chart Y-Axis marker value and Y position
const maxYAxisChartMarker = await retry.try(
async () => await find.byCssSelector(`div.y-axis-div-wrapper > div > svg > g.${axis} > g:last-of-type.tick`)
async () => await find.byCssSelector(`div.visAxis__splitAxes--y > div > svg > g.${axis} > g:last-of-type.tick`)
);
const maxYLabel = (await maxYAxisChartMarker.getVisibleText()).replace(/,/g, '');
const maxYLabelYPosition = (await maxYAxisChartMarker.getPosition()).y;
@ -892,7 +892,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
// 2). get the minimum chart Y-Axis marker value and Y position
const minYAxisChartMarker = await find.byCssSelector(
'div.y-axis-col.axis-wrapper-left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick'
'div.visAxis__column--y.visAxis__column--left > div > div > svg:nth-child(2) > g > g:nth-child(1).tick'
);
const minYLabel = (await minYAxisChartMarker.getVisibleText()).replace(',', '');
const minYLabelYPosition = (await minYAxisChartMarker.getPosition()).y;
@ -1126,7 +1126,7 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
}
async getLegendEntries() {
const legendEntries = await find.allByCssSelector('.legend-value-title', defaultFindTimeout * 2);
const legendEntries = await find.allByCssSelector('.visLegend__valueTitle', defaultFindTimeout * 2);
return await Promise.all(legendEntries.map(async chart => await chart.getAttribute('data-label')));
}

5
x-pack/plugins/ml/public/explorer/_explorer.scss
View file

@ -3,8 +3,7 @@
display: inline-block;
color: $euiColorDarkShade;
.visualize-error {
// SASSTODO: Make a proper selector, use a proper calc
.visError {
h4 {
margin-top: 50px;
}
@ -132,7 +131,7 @@
}
}
// SASSTODO: This entire selector needs to be rewritten.
// SASSTODO: This entire selector needs to be rewritten.
// It looks extremely brittle with very specific sizing units
.ml-explorer-swimlane {
user-select: none;

2
x-pack/plugins/ml/public/explorer/explorer.html
View file

@ -91,7 +91,7 @@
<ml-explorer-swimlane swimlane-type="viewBy" />
</div>
<div ng-if="!showViewBySwimlane()" class="text-center visualize-error euiText">
<div ng-if="!showViewBySwimlane()" class="text-center visError euiText">
<div class="item top"></div>
<div class="item">
<h4 class="euiTitle euiTitle--small">No {{swimlaneViewByFieldName}} influencers found</h4>

4
x-pack/plugins/reporting/export_types/common/layouts/preserve_layout.css
View file

@ -86,7 +86,7 @@ visualize-app .visEditor__canvas {
*/
/* hide unusable controls */
.visualize .legend-collapse-button,
.visualize .visLegend__toggle,
.visualize .agg-table-controls/* export raw, export formatted, etc. */ ,
.visualize .leaflet-container .leaflet-top.leaflet-left/* tilemap controls */ ,
.visualize paginate-controls /* page numbers */ {
@ -94,7 +94,7 @@ visualize-app .visEditor__canvas {
}
/* slightly increate legend text size for readability */
.visualize visualize-legend .legend-value-title {
.visualize visualize-legend .visLegend__valueTitle {
font-size: 1.2em;
}

4
x-pack/plugins/reporting/export_types/common/layouts/print.css
View file

@ -85,7 +85,7 @@ visualize-app .visEditor__canvas {
*/
/* hide unusable controls */
.visualize .legend-collapse-button,
.visualize .visLegend__toggle,
.visualize .agg-table-controls/* export raw, export formatted, etc. */,
.visualize .leaflet-container .leaflet-top.leaflet-left/* tilemap controls */,
.visualize paginate-controls {
@ -93,7 +93,7 @@ visualize-app .visEditor__canvas {
}
/* slightly increate legend text size for readability */
.visualize visualize-legend .legend-value-title {
.visualize visualize-legend .visLegend__valueTitle {
font-size: 1.2em;
}