mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Caroline Horn
GitHub
parent
caefd65862
commit
7bdfd93e36
78 changed files with 665 additions and 719 deletions
|
|
@ -22,7 +22,8 @@ export default function (kibana) {
|
|||
uiExports: {
|
||||
visTypes: [
|
||||
'plugins/input_control_vis/register_vis'
|
||||
]
|
||||
],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
.icvControlEditor__panel {
|
||||
z-index: 1;
|
||||
margin-bottom: $euiSize;
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
@import './control_editor';
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './control_editor.less';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import { RangeControlEditor } from './range_control_editor';
|
||||
|
|
@ -152,7 +151,7 @@ class ControlEditorUi extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<EuiPanel grow={false} className="controlEditorPanel">
|
||||
<EuiPanel grow={false} className="icvControlEditor__panel">
|
||||
|
||||
<EuiAccordion
|
||||
id="controlEditorAccordion"
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
.controlEditorPanel {
|
||||
z-index: 1;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
|
||||
<div
|
||||
className="inputControlVis"
|
||||
className="icvContainer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
|
|
@ -141,7 +141,7 @@ exports[`Apply and Cancel change btns enabled when there are changes 1`] = `
|
|||
|
||||
exports[`Clear btns enabled when there are values 1`] = `
|
||||
<div
|
||||
className="inputControlVis"
|
||||
className="icvContainer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
|
|
@ -280,7 +280,7 @@ exports[`Clear btns enabled when there are values 1`] = `
|
|||
|
||||
exports[`Renders list control 1`] = `
|
||||
<div
|
||||
className="inputControlVis"
|
||||
className="icvContainer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
|
|
@ -419,7 +419,7 @@ exports[`Renders list control 1`] = `
|
|||
|
||||
exports[`Renders range control 1`] = `
|
||||
<div
|
||||
className="inputControlVis"
|
||||
className="icvContainer"
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
|
|
|
|||
|
|
@ -38,10 +38,10 @@ exports[`renders RangeControl 1`] = `
|
|||
isInvalid={false}
|
||||
>
|
||||
<EuiFlexGroup
|
||||
alignItems="stretch"
|
||||
alignItems="center"
|
||||
component="div"
|
||||
direction="row"
|
||||
gutterSize="l"
|
||||
gutterSize="s"
|
||||
justifyContent="flexStart"
|
||||
responsive={true}
|
||||
wrap={false}
|
||||
|
|
@ -63,9 +63,9 @@ exports[`renders RangeControl 1`] = `
|
|||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem
|
||||
className="inputRangeContainer"
|
||||
className="icvInputRange__container"
|
||||
component="div"
|
||||
grow={true}
|
||||
grow={false}
|
||||
>
|
||||
<InputRange
|
||||
allowSameValues={false}
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import './vis';
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
.icvContainer {
|
||||
width: 100%;
|
||||
margin: 0 $euiSizeXS;
|
||||
|
||||
// Removes the browser's number stepper
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// hide slider labels since they are displayed in inputs
|
||||
.input-range__track .input-range__label-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// do not center min/max labels - otherwise the overflow slider sides
|
||||
.input-range__label-container {
|
||||
left: 0% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.icvInputRange__container {
|
||||
min-width: $euiSize * 10 !important; // !important needed for IE
|
||||
}
|
||||
|
|
@ -144,7 +144,7 @@ export class InputControlVis extends Component {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="inputControlVis">
|
||||
<div className="icvContainer">
|
||||
<EuiFlexGroup wrap>
|
||||
{this.renderControls()}
|
||||
</EuiFlexGroup>
|
||||
|
|
|
|||
|
|
@ -144,7 +144,7 @@ class RangeControlUi extends Component {
|
|||
error={this.state.errorMessage ? [this.state.errorMessage] : []}
|
||||
data-test-subj="rangeControlFormRow"
|
||||
>
|
||||
<EuiFlexGroup>
|
||||
<EuiFlexGroup alignItems="center" gutterSize="s">
|
||||
<EuiFlexItem grow={false}>
|
||||
<input
|
||||
id={`${this.props.control.id}_min`}
|
||||
|
|
@ -158,7 +158,7 @@ class RangeControlUi extends Component {
|
|||
onChange={this.handleMinChange}
|
||||
/>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem className="inputRangeContainer">
|
||||
<EuiFlexItem grow={false} className="icvInputRange__container">
|
||||
<InputRange
|
||||
maxValue={this.props.control.max}
|
||||
minValue={this.props.control.min}
|
||||
|
|
@ -209,4 +209,4 @@ RangeControlUi.propTypes = {
|
|||
stageFilter: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
export const RangeControl = injectI18n(RangeControlUi);
|
||||
export const RangeControl = injectI18n(RangeControlUi);
|
||||
|
|
|
|||
11
src/core_plugins/input_control_vis/public/index.scss
Normal file
11
src/core_plugins/input_control_vis/public/index.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "icv" to avoid conflicts.
|
||||
// Examples
|
||||
// icvChart
|
||||
// icvChart__legend
|
||||
// icvChart__legend--small
|
||||
// icvChart__legend-isLoading
|
||||
|
||||
@import './components/editor/index';
|
||||
@import './components/vis/index';
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './vis.less';
|
||||
import { CATEGORY } from 'ui/vis/vis_category';
|
||||
import { VisFactoryProvider } from 'ui/vis/vis_factory';
|
||||
import { VisTypesRegistryProvider } from 'ui/registry/vis_types';
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
@import (reference) "~ui/styles/mixins.less";
|
||||
|
||||
.inputControlVis {
|
||||
width: 100%;
|
||||
margin: 0 5px;
|
||||
|
||||
.inputRangeContainer {
|
||||
display: inline-block;
|
||||
margin: 30px 0 0 0;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
input.kuiTextInput {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-inner-spin-button,
|
||||
input[type=number]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// hide slider labels since they are displayed in inputs
|
||||
.input-range__track {
|
||||
.input-range__label-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// do not center min/max labels - otherwise the overflow slider sides
|
||||
.input-range__label-container {
|
||||
left: 0% !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
// dshChart__legend-isLoading
|
||||
|
||||
/**
|
||||
* 1. Don't duplicate styles in dark mode
|
||||
*/
|
||||
* 1. Don't duplicate styles in dark mode
|
||||
*/
|
||||
.tab-dashboard.theme-light { /* 1 */
|
||||
@import 'dashboard_app';
|
||||
@import 'grid/index';
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
// DARK THEME
|
||||
// EUI global scope -- dark
|
||||
@import './../../../../../node_modules/@elastic/eui/src/themes/k6/k6_colors_dark';
|
||||
@import '@elastic/eui/src/themes/k6/k6_colors_dark';
|
||||
|
||||
.tab-dashboard.theme-dark {
|
||||
background-color: $euiColorEmptyShade;
|
||||
|
|
@ -40,4 +40,7 @@
|
|||
@import 'grid/index';
|
||||
@import 'panel/index';
|
||||
@import 'viewport/index';
|
||||
|
||||
// Vis imports
|
||||
@import 'src/ui/public/vis/map/index';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,6 +53,8 @@
|
|||
width: 100% !important; /* 1 */
|
||||
top: 0 !important; /* 1 */
|
||||
left: 0 !important; /* 1 */
|
||||
|
||||
// Altered panel styles can be found in ../panel
|
||||
}
|
||||
|
||||
// REACT-GRID
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ export default function (kibana) {
|
|||
uiExports: {
|
||||
visTypes: [
|
||||
'plugins/markdown_vis/markdown_vis'
|
||||
]
|
||||
],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.markdown-vis {
|
||||
padding: 1em;
|
||||
.mkdVis {
|
||||
padding: $euiSizeM;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
10
src/core_plugins/markdown_vis/public/index.scss
Normal file
10
src/core_plugins/markdown_vis/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "mkd" to avoid conflicts.
|
||||
// Examples
|
||||
// mkdChart
|
||||
// mkdChart__legend
|
||||
// mkdChart__legend--small
|
||||
// mkdChart__legend-isLoading
|
||||
|
||||
@import './markdown_vis';
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './markdown_vis.less';
|
||||
import { MarkdownVisWrapper } from './markdown_vis_controller';
|
||||
import { VisFactoryProvider } from 'ui/vis/vis_factory';
|
||||
import { CATEGORY } from 'ui/vis/vis_category';
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@ class MarkdownVisComponent extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className="markdown-vis"
|
||||
className="mkdVis"
|
||||
style={{ fontSize: `${this.props.fontSize}pt` }}
|
||||
>
|
||||
<Markdown
|
||||
|
|
|
|||
|
|
@ -24,7 +24,8 @@ export default function (kibana) {
|
|||
uiExports: {
|
||||
visTypes: [
|
||||
'plugins/metric_vis/metric_vis'
|
||||
]
|
||||
],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
32
src/core_plugins/metric_vis/public/_metric_vis.scss
Normal file
32
src/core_plugins/metric_vis/public/_metric_vis.scss
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
.mtrVis {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mtrVis__value {
|
||||
@include euiTextTruncate;
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
.mtrVis__container {
|
||||
text-align: center;
|
||||
padding: $euiSize;
|
||||
}
|
||||
|
||||
.mtrVis__container--light {
|
||||
color: $euiColorEmptyShade;
|
||||
}
|
||||
|
||||
.mtrVis__container-isFilterable {
|
||||
cursor: pointer;
|
||||
transition: transform $euiAnimSpeedNormal $euiAnimSlightResistance;
|
||||
transform: translate(0, 0);
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: none;
|
||||
transform: translate(0, -2px);
|
||||
}
|
||||
}
|
||||
|
|
@ -40,9 +40,9 @@ class MetricVisValue extends Component {
|
|||
color: metric.color,
|
||||
};
|
||||
|
||||
const containerClassName = classNames('metric-container', {
|
||||
'metric-container--light': metric.lightText,
|
||||
'metric-container--filterable': hasFilter
|
||||
const containerClassName = classNames('mtrVis__container', {
|
||||
'mtrVis__container--light': metric.lightText,
|
||||
'mtrVis__container-isfilterable': hasFilter
|
||||
});
|
||||
|
||||
const metricComponent = (
|
||||
|
|
@ -54,7 +54,7 @@ class MetricVisValue extends Component {
|
|||
role={hasFilter ? 'button' : null}
|
||||
>
|
||||
<div
|
||||
className="metric-value"
|
||||
className="mtrVis__value"
|
||||
style={metricValueStyle}
|
||||
/*
|
||||
* Justification for dangerouslySetInnerHTML:
|
||||
|
|
|
|||
10
src/core_plugins/metric_vis/public/index.scss
Normal file
10
src/core_plugins/metric_vis/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "mtr" to avoid conflicts.
|
||||
// Examples
|
||||
// mtrChart
|
||||
// mtrChart__legend
|
||||
// mtrChart__legend--small
|
||||
// mtrChart__legend-isLoading
|
||||
|
||||
@import './metric_vis';
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './metric_vis.less';
|
||||
import './metric_vis_params';
|
||||
import { VisFactoryProvider } from 'ui/vis/vis_factory';
|
||||
import { CATEGORY } from 'ui/vis/vis_category';
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
@import (reference) "~ui/styles/mixins.less";
|
||||
|
||||
.metric-vis {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.metric-value {
|
||||
font-weight: bold;
|
||||
.ellipsis();
|
||||
}
|
||||
|
||||
.metric-container {
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.metric-container--light {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.metric-container--filterable {
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
transform: translate(0, 0);
|
||||
|
||||
&:hover, &:focus {
|
||||
box-shadow: none;
|
||||
transform: translate(0, -2px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -180,7 +180,7 @@ export class MetricVisComponent extends Component {
|
|||
const metrics = this._processTableGroups(this.props.visData);
|
||||
metricsHtml = metrics.map(this._renderMetric);
|
||||
}
|
||||
return (<div className="metric-vis">{metricsHtml}</div>);
|
||||
return (<div className="mtrVis">{metricsHtml}</div>);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ export default function (kibana) {
|
|||
|
||||
return new kibana.Plugin({
|
||||
uiExports: {
|
||||
visTypes: ['plugins/region_map/region_map_vis']
|
||||
visTypes: ['plugins/region_map/region_map_vis'],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
3
src/core_plugins/region_map/public/_region_map.scss
Normal file
3
src/core_plugins/region_map/public/_region_map.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.rgmEMSLink {
|
||||
font-size: $euiFontSizeXS;
|
||||
}
|
||||
|
|
@ -143,7 +143,7 @@ export default class ChoroplethLayer extends KibanaMapLayer {
|
|||
|
||||
let errorMessage;
|
||||
if (e.status === 404) {
|
||||
errorMessage = `Server responding with '404' when attempting to fetch ${geojsonUrl}.
|
||||
errorMessage = `Server responding with '404' when attempting to fetch ${geojsonUrl}.
|
||||
Make sure the file exists at that location.`;
|
||||
} else {
|
||||
errorMessage = `Cannot download ${geojsonUrl} file. Please ensure the
|
||||
|
|
@ -323,7 +323,7 @@ CORS configuration of the server permits requests from the Kibana application on
|
|||
}
|
||||
|
||||
const titleText = this._metricsAgg.makeLabel();
|
||||
const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
|
||||
const $title = $('<div>').addClass('visMapLegend__title').text(titleText);
|
||||
jqueryDiv.append($title);
|
||||
|
||||
this._legendColors.forEach((color) => {
|
||||
|
|
|
|||
10
src/core_plugins/region_map/public/index.scss
Normal file
10
src/core_plugins/region_map/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "rgm" to avoid conflicts.
|
||||
// Examples
|
||||
// rgmChart
|
||||
// rgmChart__legend
|
||||
// rgmChart__legend--small
|
||||
// rgmChart__legend-isLoading
|
||||
|
||||
@import './region_map';
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
.region-map-vis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
|
||||
region_map-vis-params {
|
||||
.ems-hotlink {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './region_map.less';
|
||||
import './region_map_vis_params';
|
||||
import { VisFactoryProvider } from 'ui/vis/vis_factory';
|
||||
import { CATEGORY } from 'ui/vis/vis_category';
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
<div class="form-group clearfix" ng-hide="!editorState.params.emsHotLink">
|
||||
<a
|
||||
class="ems-hotlink pull-right"
|
||||
class="rgmEMSLink pull-right"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
ng-href="{{editorState.params.emsHotLink}}"
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ export default function (kibana) {
|
|||
uiExports: {
|
||||
visTypes: [
|
||||
'plugins/table_vis/table_vis'
|
||||
]
|
||||
],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
30
src/core_plugins/table_vis/public/_table_vis.scss
Normal file
30
src/core_plugins/table_vis/public/_table_vis.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
// SASSTODO: Update naming to BEM
|
||||
// This chart is actively being re-written to React and EUI
|
||||
// Putting off renaming to avoid conflicts
|
||||
.table-vis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.table-vis-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1 0 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-vis-container {
|
||||
kbn-agg-table-group > .table > tbody > tr > td {
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.pagination-other-pages {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination-size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
10
src/core_plugins/table_vis/public/index.scss
Normal file
10
src/core_plugins/table_vis/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "tbv" to avoid conflicts.
|
||||
// Examples
|
||||
// tbvChart
|
||||
// tbvChart__legend
|
||||
// tbvChart__legend--small
|
||||
// tbvChart__legend-isLoading
|
||||
|
||||
@import './table_vis';
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './table_vis.less';
|
||||
import './table_vis_controller';
|
||||
import './table_vis_params';
|
||||
import 'ui/agg_table';
|
||||
|
|
|
|||
|
|
@ -1,27 +0,0 @@
|
|||
.table-vis {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.table-vis-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
flex: 1 0 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.table-vis-container {
|
||||
kbn-agg-table-group > .table > tbody > tr > td {
|
||||
border-top: 0px;
|
||||
}
|
||||
|
||||
.pagination-other-pages {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.pagination-size {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -21,7 +21,8 @@ export default function (kibana) {
|
|||
|
||||
return new kibana.Plugin({
|
||||
uiExports: {
|
||||
visTypes: ['plugins/tagcloud/tag_cloud_vis']
|
||||
visTypes: ['plugins/tagcloud/tag_cloud_vis'],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
47
src/core_plugins/tagcloud/public/_tag_cloud.scss
Normal file
47
src/core_plugins/tagcloud/public/_tag_cloud.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
.tgcVis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tgcVisFeedback {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tgcVisFeedback__message {
|
||||
display: none;
|
||||
text-align: center;
|
||||
padding: $euiSizeS;
|
||||
font-weight: $euiFontWeightBold;
|
||||
$color: $euiColorWarning;
|
||||
$backgroundColor: tintOrShade($color, 90%, 70%);
|
||||
background-color: transparentize($backgroundColor, .5);
|
||||
color: makeHighContrastColor($color, $backgroundColor);
|
||||
}
|
||||
|
||||
.tgcVisLabel {
|
||||
position: absolute;
|
||||
bottom: 2px; // Bringing it up 2px removes the vertical scrollbar
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
.tgcFontSizeSlider {
|
||||
margin: $euiSize;
|
||||
|
||||
.noUi-connect {
|
||||
background: $euiColorLightShade;
|
||||
}
|
||||
}
|
||||
|
||||
.tgcFontSizeSlider__input {
|
||||
width: $euiSizeXXL * 2;
|
||||
}
|
||||
|
|
@ -29,14 +29,14 @@ export class FeedbackMessage extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<div className="tagcloud-notifications" >
|
||||
<div className="tagcloud-truncated-message" style={{ display: this.state.shouldShowTruncate ? 'block' : 'none' }}>
|
||||
<div className="tgcVisFeedback" >
|
||||
<div className="tgcVisFeedback__message" style={{ display: this.state.shouldShowTruncate ? 'block' : 'none' }}>
|
||||
<FormattedMessage
|
||||
id="tagCloud.feedbackMessage.truncatedTagsDescription"
|
||||
defaultMessage="The number of tags has been truncated to avoid long draw times."
|
||||
/>
|
||||
</div>
|
||||
<div className="tagcloud-incomplete-message" style={{ display: this.state.shouldShowIncomplete ? 'block' : 'none' }}>
|
||||
<div className="ttgcVisFeedback__message" style={{ display: this.state.shouldShowIncomplete ? 'block' : 'none' }}>
|
||||
<FormattedMessage
|
||||
id="tagCloud.feedbackMessage.tooSmallContainerDescription"
|
||||
defaultMessage="The container is too small to display the entire cloud. Tags might be cropped or omitted."
|
||||
|
|
|
|||
10
src/core_plugins/tagcloud/public/index.scss
Normal file
10
src/core_plugins/tagcloud/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "tgc" to avoid conflicts.
|
||||
// Examples
|
||||
// tgcChart
|
||||
// tgcChart__legend
|
||||
// tgcChart__legend--small
|
||||
// tgcChart__legend-isLoading
|
||||
|
||||
@import './tag_cloud';
|
||||
|
|
@ -28,7 +28,7 @@ export class Label extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div
|
||||
className="tagcloud-custom-label"
|
||||
className="tgcVisLabel"
|
||||
style={{ display: this.state.shouldShowLabel ? 'block' : 'none' }}
|
||||
>{this.state.label}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,51 +0,0 @@
|
|||
.tagcloud-vis {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tagcloud-notifications {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.tagcloud-incomplete-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tagcloud-truncated-message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tagcloud-custom-label {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tag-cloud-fontsize-slider {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 14px;
|
||||
margin-left: 12px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.tag-cloud-fontsize-slider__input {
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
.tag-cloud-fontsize-slider .noUi-connect {
|
||||
background: #e4e4e4;
|
||||
}
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
* under the License.
|
||||
*/
|
||||
|
||||
import './tag_cloud.less';
|
||||
import './tag_cloud_vis_params';
|
||||
import { VisFactoryProvider } from 'ui/vis/vis_factory';
|
||||
import { CATEGORY } from 'ui/vis/vis_category';
|
||||
|
|
|
|||
|
|
@ -10,14 +10,14 @@
|
|||
</div>
|
||||
<div class="form-group">
|
||||
<label i18n-id="tagCloud.visParams.fontSizeLabel" i18n-default-message="Font Size"></label>
|
||||
<div class="tag-cloud-fontsize-slider"></div>
|
||||
<div class="tgcFontSizeSlider"></div>
|
||||
<div class="kuiBar">
|
||||
<div class="kuiBarSection">
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="{{editorState.params.maxFontSize}}"
|
||||
class="kuiTextInput tag-cloud-fontsize-slider__input"
|
||||
class="kuiTextInput tgcFontSizeSlider__input"
|
||||
ng-model="editorState.params.minFontSize"
|
||||
aria-label="{{ ::'tagCloud.visParams.minFontSizeAriaLabel' | i18n: { defaultMessage: 'Minimum tag font size' } }}"
|
||||
aria-describedby="tagCloudFontSliderMinUnit"
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
type="number"
|
||||
min="{{editorState.params.minFontSize}}"
|
||||
max="100"
|
||||
class="kuiTextInput tag-cloud-fontsize-slider__input"
|
||||
class="kuiTextInput tgcFontSizeSlider__input"
|
||||
ng-model="editorState.params.maxFontSize"
|
||||
aria-label="{{ ::'tagCloud.visParams.maxFontSizeAriaLabel' | i18n: { defaultMessage: 'Maximum tag font size' } }}"
|
||||
aria-describedby="tagCloudFontSliderMaxUnit"
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ uiModules.get('kibana/table_vis')
|
|||
template: tagCloudVisParamsTemplate,
|
||||
link: function ($scope, $element) {
|
||||
const sliderContainer = $element[0];
|
||||
const slider = sliderContainer.querySelector('.tag-cloud-fontsize-slider');
|
||||
const slider = sliderContainer.querySelector('.tgcFontSizeSlider');
|
||||
$scope.config = $scope.vis.type.editorConfig;
|
||||
noUiSlider.create(slider, {
|
||||
start: [$scope.editorState.params.minFontSize, $scope.editorState.params.maxFontSize],
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ export class TagCloudVisualization {
|
|||
this._containerNode = node;
|
||||
|
||||
const cloudContainer = document.createElement('div');
|
||||
cloudContainer.classList.add('tagcloud-vis');
|
||||
cloudContainer.classList.add('tgcVis');
|
||||
cloudContainer.setAttribute('data-test-subj', 'tagCloudVisualization');
|
||||
this._containerNode.appendChild(cloudContainer);
|
||||
|
||||
|
|
|
|||
|
|
@ -21,7 +21,8 @@ export default function (kibana) {
|
|||
|
||||
return new kibana.Plugin({
|
||||
uiExports: {
|
||||
visTypes: ['plugins/tile_map/tile_map_vis']
|
||||
visTypes: ['plugins/tile_map/tile_map_vis'],
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
|
|||
15
src/core_plugins/tile_map/public/_tile_map.scss
Normal file
15
src/core_plugins/tile_map/public/_tile_map.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
// SASSTODO: Does this selector exist today?
|
||||
.tilemap {
|
||||
margin-bottom: 6px;
|
||||
border: $euiBorderThin;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Visualizations have some padding by default but tilemaps look nice flush against the edge to maximize viewing
|
||||
* space.
|
||||
*/
|
||||
// SASSTODO: Does this selector exist today?
|
||||
.tile_map {
|
||||
padding: 0; /* 1. */
|
||||
}
|
||||
|
|
@ -21,7 +21,6 @@ import _ from 'lodash';
|
|||
import { GeohashLayer } from './geohash_layer';
|
||||
import { BaseMapsVisualizationProvider } from './base_maps_visualization';
|
||||
import { AggConfig } from 'ui/vis/agg_config';
|
||||
import './styles/_tilemap.less';
|
||||
import { TileMapTooltipFormatterProvider } from './editors/_tooltip_formatter';
|
||||
import { toastNotifications } from 'ui/notify';
|
||||
|
||||
|
|
|
|||
|
|
@ -43,10 +43,11 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-show="options.enabled" class="well">
|
||||
<div class="vis-option-item form-group">
|
||||
<div ng-show="options.enabled">
|
||||
<div class="form-group">
|
||||
<p>WMS is an OGC standard for map image services. For more information, go <a
|
||||
href="http://www.opengeospatial.org/standards/wms">here</a>.</p>
|
||||
<br>
|
||||
<label>
|
||||
WMS url*
|
||||
<icon-tip
|
||||
|
|
@ -59,7 +60,7 @@
|
|||
ng-model="options.url">
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item form-group">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
WMS layers*
|
||||
<icon-tip
|
||||
|
|
@ -73,7 +74,7 @@
|
|||
ng-model="options.options.layers">
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item form-group">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
WMS version*
|
||||
<icon-tip
|
||||
|
|
@ -86,7 +87,7 @@
|
|||
ng-model="options.options.version">
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item form-group">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
WMS format*
|
||||
<icon-tip
|
||||
|
|
@ -99,7 +100,7 @@
|
|||
ng-model="options.options.format">
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item form-group">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
WMS attribution
|
||||
<icon-tip
|
||||
|
|
@ -112,7 +113,7 @@
|
|||
ng-model="options.options.attribution">
|
||||
</div>
|
||||
|
||||
<div class="vis-option-item form-group">
|
||||
<div class="form-group">
|
||||
<label>
|
||||
WMS styles*
|
||||
<icon-tip
|
||||
|
|
|
|||
10
src/core_plugins/tile_map/public/index.scss
Normal file
10
src/core_plugins/tile_map/public/index.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "tlm" to avoid conflicts.
|
||||
// Examples
|
||||
// tlmChart
|
||||
// tlmChart__legend
|
||||
// tlmChart__legend--small
|
||||
// tlmChart__legend-isLoading
|
||||
|
||||
@import './tile_map';
|
||||
|
|
@ -99,7 +99,7 @@ export class ScaledCirclesMarkers extends EventEmitter {
|
|||
}
|
||||
|
||||
const titleText = this.getLabel();
|
||||
const $title = $('<div>').addClass('tilemap-legend-title').text(titleText);
|
||||
const $title = $('<div>').addClass('visMapLegend__title').text(titleText);
|
||||
jqueryDiv.append($title);
|
||||
|
||||
this._legendColors.forEach((color) => {
|
||||
|
|
|
|||
|
|
@ -1,294 +0,0 @@
|
|||
@import (reference) "~ui/styles/variables";
|
||||
|
||||
/* _tilemap */
|
||||
|
||||
.tilemap {
|
||||
margin-bottom: 6px;
|
||||
border: 1px solid;
|
||||
border-color: @tilemap-border;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Visualizations have some padding by default but tilemaps look nice flush against the edge to maximize viewing
|
||||
* space.
|
||||
*/
|
||||
.tile_map {
|
||||
padding: 0; /* 1. */
|
||||
}
|
||||
|
||||
/* leaflet Dom Util div for map label */
|
||||
|
||||
.tilemap-legend {
|
||||
padding: 5px 7px 5px 7px;
|
||||
margin: 0;
|
||||
font: 11px/13px Arial, Helvetica, sans-serif;
|
||||
background: @tilemap-legend-base-bg;
|
||||
background: @tilemap-legend-bg;
|
||||
box-shadow: 0 0 12px rgba(0,0,0,0.3);
|
||||
border-radius: 5px;
|
||||
text-align: left;
|
||||
line-height: 15px;
|
||||
color: @tilemap-color;
|
||||
}
|
||||
|
||||
.tilemap-legend-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tilemap-legend i {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
float: left;
|
||||
margin: 2px 4px 0 0;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: @tilemap-legend-i-border;
|
||||
background: @tilemap-legend-i-bg;
|
||||
}
|
||||
|
||||
/* top left needs some more styles */
|
||||
.leaflet-top.leaflet-left .tilemap-legend-wrapper {
|
||||
position: absolute;
|
||||
left: 50px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.leaflet-top.leaflet-left .tilemap-legend-wrapper span {
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
/* leaflet Dom Util div for map legend */
|
||||
|
||||
.tilemap-info {
|
||||
padding: 3px 7px 3px 7px;
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
background: @tilemap-info-base-bg;
|
||||
background: fade(@tilemap-info-bg, 92%);
|
||||
box-shadow: 0 0 12px rgba(0,0,0,0.3);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.tilemap-info h2 {
|
||||
font-size: 12px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0;
|
||||
color: @tilemap-info-header-color;
|
||||
}
|
||||
|
||||
.leaflet-bar {
|
||||
border: none !important;
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.65) !important;
|
||||
}
|
||||
|
||||
.leaflet-control-fit {
|
||||
text-align: center;
|
||||
background: @tilemap-leaflet-control-bg;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
outline: 1px @tilemap-leaflet-control-outline;
|
||||
}
|
||||
|
||||
/* over-rides leaflet popup styles to look like kibana tooltip */
|
||||
|
||||
.leaflet-container {
|
||||
background: @tilemap-leaflet-container-bg !important;
|
||||
outline: 0 !important;
|
||||
|
||||
//the heatmap layer plugin logs an error to the console when the map is in a 0-sized container
|
||||
min-width: 1px !important;
|
||||
min-height: 1px !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
margin-bottom: 16px !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: @tooltip-bg !important;
|
||||
color: @tooltip-color !important;
|
||||
border-radius: 4px !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0 !important;
|
||||
line-height: 24px !important;
|
||||
font-size: @font-size-base;
|
||||
font-weight: normal;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: @tooltip-space;
|
||||
}
|
||||
|
||||
> * {
|
||||
margin: @tooltip-space @tooltip-space 0;
|
||||
}
|
||||
|
||||
table {
|
||||
td,th {
|
||||
padding: @tooltip-space-tight;
|
||||
|
||||
&.row-bucket {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-tip-container, .leaflet-popup-close-button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font: 12px/13px Arial, Helvetica, sans-serif;
|
||||
line-height: 14px !important;
|
||||
}
|
||||
|
||||
.leaflet-control-layers-expanded label {
|
||||
font-weight: normal !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.leaflet-draw-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background-color: @tilemap-leaflet-footer-bg !important;
|
||||
color: @tilemap-leaflet-footer-color !important;
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-left {
|
||||
.leaflet-control {
|
||||
a,
|
||||
a:hover {
|
||||
color: @tilemap-leaflet-control-color;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-draw-actions a {
|
||||
background-color: @tilemap-leaflet-control-draw-action-bg;
|
||||
}
|
||||
}
|
||||
|
||||
/* filter to desaturate mapquest tiles */
|
||||
|
||||
img.leaflet-tile {
|
||||
filter: @tilemap-filter;
|
||||
}
|
||||
|
||||
img.leaflet-tile.filters-off {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
// SASSTODO: Make sure these colors convert to theme variables
|
||||
.tab-dashboard.theme-dark {
|
||||
@tilemap-border: @gray13;
|
||||
@tilemap-legend-base-bg: @gray3;
|
||||
@tilemap-legend-bg: fade(@tilemap-legend-base-bg, 100%);
|
||||
@tilemap-color: @gray12;
|
||||
@tilemap-legend-i-border: @gray9;
|
||||
@tilemap-legend-i-bg: @gray10;
|
||||
@tilemap-info-base-bg: @white;
|
||||
@tilemap-info-bg: fade(@tilemap-info-base-bg, 92%);
|
||||
@tilemap-info-header-color: @gray4;
|
||||
@tilemap-leaflet-control-bg: @white;
|
||||
@tilemap-leaflet-control-outline: @black;
|
||||
@tilemap-leaflet-control-color: @black;
|
||||
@tilemap-leaflet-control-draw-action-bg: @gray11;
|
||||
@tilemap-leaflet-container-bg: @body-bg;
|
||||
@tilemap-leaflet-popup-border: @gray9;
|
||||
@tilemap-leaflet-footer-bg: fade(@gray3, 80%);
|
||||
@tilemap-leaflet-footer-color: @gray12;
|
||||
@tilemap-filter: invert(1) brightness(1.75) grayscale(1) contrast(1);
|
||||
|
||||
.tilemap {
|
||||
border-color: @tilemap-border;
|
||||
}
|
||||
|
||||
.tilemap-legend {
|
||||
background: @tilemap-legend-base-bg;
|
||||
background: @tilemap-legend-bg;
|
||||
color: @tilemap-color;
|
||||
}
|
||||
|
||||
.tilemap-legend i {
|
||||
border-color: @tilemap-legend-i-border;
|
||||
background: @tilemap-legend-i-bg;
|
||||
}
|
||||
|
||||
.tilemap-info {
|
||||
background: @tilemap-info-base-bg;
|
||||
background: fade(@tilemap-info-bg, 92%);
|
||||
}
|
||||
|
||||
.tilemap-info h2 {
|
||||
color: @tilemap-info-header-color;
|
||||
}
|
||||
|
||||
.leaflet-control-fit {
|
||||
background: @tilemap-leaflet-control-bg;
|
||||
outline: 1px @tilemap-leaflet-control-outline;
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
background: @tilemap-leaflet-container-bg !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: fadeout(@gray4, 7%) !important;
|
||||
color: @gray14 !important;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
table {
|
||||
thead tr {
|
||||
border-bottom-color: @tilemap-leaflet-popup-border;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-top-color: @tilemap-leaflet-popup-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img.leaflet-tile {
|
||||
filter: @tilemap-filter;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background-color: @tilemap-leaflet-footer-bg !important;
|
||||
color: @tilemap-leaflet-footer-color !important;
|
||||
}
|
||||
|
||||
.leaflet-left {
|
||||
.leaflet-control,
|
||||
.leaflet-draw-actions {
|
||||
a,
|
||||
a:hover {
|
||||
color: @white;
|
||||
background-color: @gray7;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -24,6 +24,7 @@ export default kibana => new kibana.Plugin({
|
|||
uiExports: {
|
||||
visTypes: ['plugins/vega/vega_type'],
|
||||
injectDefaultVars: server => ({ vegaConfig: server.config().get('vega') }),
|
||||
styleSheetPaths: `${__dirname}/public/index.scss`,
|
||||
},
|
||||
|
||||
config: (Joi) => Joi.object({
|
||||
|
|
|
|||
46
src/core_plugins/vega/public/_vega_editor.scss
Normal file
46
src/core_plugins/vega/public/_vega_editor.scss
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
.visEditor--vega {
|
||||
.visEditorSidebar__config {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// The following is necessary for the Vega editor to expand to full height of the editor panel
|
||||
.visEditorSidebar__config,
|
||||
.visEditorSidebar__options {
|
||||
@include flex-parent(1, 1, auto);
|
||||
|
||||
> * {
|
||||
@include flex-parent(1, 1, auto);
|
||||
}
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xs', 's', 'm') {
|
||||
.visEditor__collapsibleSidebar {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vgaEditor {
|
||||
@include flex-parent(1, 1, auto);
|
||||
position: relative;
|
||||
|
||||
@include euiBreakpoint('xs', 's', 'm') {
|
||||
min-height: $euiSize * 15;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.vgaEditor__aceEditor {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.vgaEditor__aceEditorActions {
|
||||
position: absolute;
|
||||
z-index: $euiZLevel1;
|
||||
top: 0;
|
||||
// Adjust for possible scrollbars
|
||||
right: $euiSize;
|
||||
line-height: 1;
|
||||
}
|
||||
129
src/core_plugins/vega/public/_vega_vis.scss
Normal file
129
src/core_plugins/vega/public/_vega_vis.scss
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
.vgaVis {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
position: relative;
|
||||
// flex-direction determined by js
|
||||
}
|
||||
|
||||
.vgaVis__view {
|
||||
z-index: 0;
|
||||
flex: 1 1 100%;
|
||||
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
// BUG #23514: Make sure Vega doesn't display the controls in two places
|
||||
.vega-bindings {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.vgaVis__controls {
|
||||
@include euiFontSizeS;
|
||||
display: flex;
|
||||
|
||||
&:not(:empty) {
|
||||
padding: $euiSizeS 0; // Adding a little bit of padding helps with the unnecessary scrollbars
|
||||
}
|
||||
|
||||
&.vgaVis__controls--column {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
&.vgaVis__controls--row {
|
||||
flex-direction: row;
|
||||
|
||||
> .vega-bind {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
> .vega-bind {
|
||||
.vega-bind-name {
|
||||
display: inline-block;
|
||||
width: $euiSizeM * 10 - $euiSize;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: $euiSizeM * 10;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0 0 0 $euiSizeS;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: $euiSize * 10;
|
||||
}
|
||||
|
||||
.vega-bind-radio label {
|
||||
margin: 0 $euiSizeS 0 $euiSizeXS;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Messages
|
||||
|
||||
.vgaVis__messages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.vgaVis__message {
|
||||
margin: $euiSizeS;
|
||||
|
||||
.vgaVis__messageCode {
|
||||
white-space: pre-wrap;
|
||||
padding: $euiSizeS;
|
||||
}
|
||||
}
|
||||
|
||||
.vgaVis__message--warn .vgaVis__messageCode {
|
||||
$calculatedBackgroundColor: tintOrShade($euiColorWarning, 90%, 70%);
|
||||
background-color: $calculatedBackgroundColor;
|
||||
color: makeHighContrastColor($euiColorWarning, $calculatedBackgroundColor);
|
||||
}
|
||||
|
||||
.vgaVis__message--err .vgaVis__messageCode {
|
||||
$calculateBackgroundColor: tintOrShade($euiColorDanger, 90%, 70%);
|
||||
background-color: $calculateBackgroundColor;
|
||||
color: makeHighContrastColor($euiColorDanger, $calculateBackgroundColor);
|
||||
}
|
||||
|
||||
|
||||
// Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis)
|
||||
// Adapted from https://github.com/vega/vega-tooltip
|
||||
|
||||
.vgaVis__tooltip {
|
||||
h2 {
|
||||
margin-bottom: $euiSizeS;
|
||||
}
|
||||
|
||||
td {
|
||||
@include euiTextTruncate;
|
||||
padding-top: $euiSizeXS;
|
||||
padding-bottom: $euiSizeXS;
|
||||
}
|
||||
|
||||
td.key {
|
||||
color: $euiColorMediumShade;
|
||||
max-width: $euiSize * 10;
|
||||
text-align: right;
|
||||
padding-right: $euiSizeXS;
|
||||
}
|
||||
td.value {
|
||||
max-width: $euiSizeL * 10;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
11
src/core_plugins/vega/public/index.scss
Normal file
11
src/core_plugins/vega/public/index.scss
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
@import 'src/ui/public/styles/styling_constants';
|
||||
|
||||
// Prefix all styles with "vga" to avoid conflicts.
|
||||
// Examples
|
||||
// vgaChart
|
||||
// vgaChart__legend
|
||||
// vgaChart__legend--small
|
||||
// vgaChart__legend-isLoading
|
||||
|
||||
@import './vega_vis';
|
||||
@import './vega_editor';
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
.vega-main {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
position: relative;
|
||||
// align-self: flex-start;
|
||||
|
||||
> .vega-messages {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
opacity: 0.8;
|
||||
z-index: 1;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.vega-message-warn pre {
|
||||
background: #ffff83;
|
||||
}
|
||||
|
||||
.vega-message-err pre {
|
||||
background: #ffdddd;
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
padding: 0.7em;
|
||||
}
|
||||
}
|
||||
|
||||
.vega-view-container {
|
||||
z-index: 0;
|
||||
flex: 1 1 100%;
|
||||
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vega-controls-container {
|
||||
display: flex;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
|
||||
> .vega-bind {
|
||||
flex: 1; /*grow*/
|
||||
|
||||
.vega-bind-name {
|
||||
display: inline-block;
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
width: 120px;
|
||||
color: rgb(157, 150, 142);
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
label {
|
||||
margin: 0 0 0 0.6em;
|
||||
}
|
||||
|
||||
select {
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.vega-bind-radio label {
|
||||
margin: 0 0.6em 0 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Style tooltip popup (gets created dynamically at the top level if dashboard has a Vega vis
|
||||
Adapted from https://github.com/vega/vega-tooltip
|
||||
*/
|
||||
#vega-kibana-tooltip {
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
}
|
||||
td {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-top: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
td.key {
|
||||
color: #808080;
|
||||
max-width: 150px;
|
||||
text-align: right;
|
||||
padding-right: 4px;
|
||||
}
|
||||
td.value {
|
||||
max-width: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
@import (reference) "~ui/styles/variables";
|
||||
|
||||
.visEditor--vega {
|
||||
.visEditorSidebar__config {
|
||||
// Vega controls its own padding, no need for additional padding
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
visualization-editor {
|
||||
|
||||
.vegaEditor {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
position: relative;
|
||||
|
||||
// If the screen too small, make sure the editor has some height
|
||||
min-height: 18em;
|
||||
@media (min-width: @screen-md-min) {
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
#editor_actions {
|
||||
position: absolute;
|
||||
margin: 0.6em 1.3em;
|
||||
z-index: 80;
|
||||
|
||||
ul.dropdown-menu {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#vegaAceEditor {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div class="vegaEditor" ng-controller="VegaEditorController">
|
||||
<div class="vgaEditor" ng-controller="VegaEditorController">
|
||||
<div
|
||||
kbn-ui-ace-keyboard-mode
|
||||
ui-ace="{
|
||||
|
|
@ -15,9 +15,10 @@
|
|||
id="vegaAceEditor"
|
||||
ng-model="editorState.params.spec"
|
||||
data-test-subj="vega-editor"
|
||||
class="vgaEditor__aceEditor"
|
||||
></div>
|
||||
|
||||
<div id="editor_actions">
|
||||
<div class="vgaEditor__aceEditorActions">
|
||||
<span dropdown>
|
||||
<button
|
||||
id="vegaHelp"
|
||||
|
|
|
|||
|
|
@ -27,12 +27,9 @@ import { defaultFeedbackMessage } from 'ui/vis/default_feedback_message';
|
|||
import { VegaRequestHandlerProvider } from './vega_request_handler';
|
||||
import { VegaVisualizationProvider } from './vega_visualization';
|
||||
|
||||
import './vega.less';
|
||||
|
||||
// Editor-specific code
|
||||
import 'brace/mode/hjson';
|
||||
import 'brace/ext/searchbox';
|
||||
import './vega_editor.less';
|
||||
import './vega_editor_controller';
|
||||
import vegaEditorTemplate from './vega_editor_template.html';
|
||||
import defaultSpec from '!!raw-loader!./default.spec.hjson';
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ export class VegaBaseView {
|
|||
|
||||
try {
|
||||
this._$parentEl.empty()
|
||||
.addClass('vega-main')
|
||||
.addClass(`vgaVis`)
|
||||
.css('flex-direction', this._parser.containerDir);
|
||||
|
||||
// bypass the onWarn warning checks - in some cases warnings may still need to be shown despite being disabled
|
||||
|
|
@ -95,10 +95,11 @@ export class VegaBaseView {
|
|||
return;
|
||||
}
|
||||
|
||||
this._$container = $('<div class="vega-view-container">')
|
||||
this._$container = $('<div class="vgaVis__view">')
|
||||
// Force a height here because css is not loaded in mocha test
|
||||
.css('height', '100%')
|
||||
.appendTo(this._$parentEl);
|
||||
this._$controls = $('<div class="vega-controls-container">')
|
||||
.css('flex-direction', this._parser.controlsDir)
|
||||
this._$controls = $(`<div class="vgaVis__controls vgaVis__controls--${this._parser.controlsDir}">`)
|
||||
.appendTo(this._$parentEl);
|
||||
|
||||
this._addDestroyHandler(() => {
|
||||
|
|
@ -165,11 +166,11 @@ export class VegaBaseView {
|
|||
|
||||
_addMessage(type, text) {
|
||||
if (!this._$messages) {
|
||||
this._$messages = $(`<ul class="vega-messages">`).appendTo(this._$parentEl);
|
||||
this._$messages = $(`<ul class="vgaVis__messages">`).appendTo(this._$parentEl);
|
||||
}
|
||||
this._$messages.append(
|
||||
$(`<li class="vega-message-${type}">`).append(
|
||||
$(`<pre>`).text(text)
|
||||
$(`<li class="vgaVis__message vgaVis__message--${type}">`).append(
|
||||
$(`<pre class="vgaVis__messageCode">`).text(text)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export class TooltipHandler {
|
|||
|
||||
const el = document.createElement('div');
|
||||
el.setAttribute('id', tooltipId);
|
||||
el.classList.add('euiToolTipPopover', 'euiToolTip', `euiToolTip--${this.position}`);
|
||||
el.classList.add('vgaVis__tooltip', 'euiToolTipPopover', 'euiToolTip', `euiToolTip--${this.position}`);
|
||||
|
||||
// Sanitized HTML is created by the tooltip library,
|
||||
// with a large number of tests, hence suppressing eslint here.
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@tilemap-leaflet-footer-bg: red;
|
||||
@font-size-smaller: ceil((@font-size-base * 0.75));
|
||||
@input-border-width: 1px;
|
||||
|
||||
|
|
@ -217,37 +216,6 @@
|
|||
// Legend ======================================================================
|
||||
@legend-item-color: #666;
|
||||
|
||||
|
||||
// Tilemap =====================================================================
|
||||
@tilemap-border: #ddd;
|
||||
@tilemap-legend-base-bg: @white;
|
||||
@tilemap-legend-bg: fade(@tilemap-legend-base-bg, 8%);
|
||||
@tilemap-color: #666;
|
||||
|
||||
@tilemap-legend-i-border: #999;
|
||||
@tilemap-legend-i-bg: #aaa;
|
||||
|
||||
|
||||
@tilemap-info-base-bg: @white;
|
||||
@tilemap-info-bg: fade(@tilemap-info-base-bg, 92%);
|
||||
@tilemap-info-header-color: #444;
|
||||
|
||||
@tilemap-leaflet-control-bg: @white;
|
||||
@tilemap-leaflet-control-outline: @black;
|
||||
@tilemap-leaflet-control-color: @black;
|
||||
|
||||
@tilemap-leaflet-control-draw-action-bg: #ddd;
|
||||
|
||||
@tilemap-leaflet-container-bg: @white;
|
||||
|
||||
@tilemap-leaflet-popup-border: @gray;
|
||||
|
||||
@tilemap-leaflet-footer-bg: fade(#fff, 30%);
|
||||
@tilemap-leaflet-footer-color: #333;
|
||||
|
||||
@tilemap-filter: brightness(1.03) grayscale(0.83) contrast(1.07);
|
||||
|
||||
|
||||
// Tooltip =====================================================================
|
||||
@tooltip-space: 8px;
|
||||
@tooltip-space-tight: @tooltip-space / 2;
|
||||
|
|
|
|||
|
|
@ -1,2 +1,3 @@
|
|||
@import './editors/components/index';
|
||||
@import './editors/default/index';
|
||||
@import './map/index';
|
||||
|
|
|
|||
|
|
@ -101,7 +101,8 @@
|
|||
}
|
||||
|
||||
.visualize {
|
||||
@include flex-parent();
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@
|
|||
|
||||
<div class="visEditorSidebar__config" ng-repeat="tab in vis.type.editorConfig.optionTabs" ng-show="sidebar.section == tab.name">
|
||||
<vis-editor-vis-options
|
||||
class="visEditorSidebar__options"
|
||||
editor-state="state"
|
||||
vis="vis"
|
||||
vis-data="visData"
|
||||
|
|
|
|||
2
src/ui/public/vis/map/_index.scss
Normal file
2
src/ui/public/vis/map/_index.scss
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import './leaflet_overrides';
|
||||
@import './legend';
|
||||
126
src/ui/public/vis/map/_leaflet_overrides.scss
Normal file
126
src/ui/public/vis/map/_leaflet_overrides.scss
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
// SASSTODO: Create these tooltip variables in EUI
|
||||
// And/Or create a tooltip mixin
|
||||
$temp-euiTooltipBackground: tintOrShade($euiColorFullShade, 25%, 90%);
|
||||
$temp-euiTooltipText: $euiColorGhost;
|
||||
|
||||
// Converted leaflet icon sprite into background svg for custom coloring (dark mode)
|
||||
$visMapLeafletSprite: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 540 60' height='60' width='540'%3E%3Cg fill='#{hexToRGB($euiTextColor)}'%3E%3Cg%3E%3Cpath d='M18 36v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M36 18v6h6v-6h-6zm4 4h-2v-2h2v2z'/%3E%3Cpath d='M23.142 39.145l-2.285-2.29 16-15.998 2.285 2.285z'/%3E%3C/g%3E%3Cpath d='M100 24.565l-2.096 14.83L83.07 42 76 28.773 86.463 18z'/%3E%3Cpath d='M140 20h20v20h-20z'/%3E%3Cpath d='M221 30c0 6.078-4.926 11-11 11s-11-4.922-11-11c0-6.074 4.926-11 11-11s11 4.926 11 11z'/%3E%3Cpath d='M270,19c-4.971,0-9,4.029-9,9c0,4.971,5.001,12,9,14c4.001-2,9-9.029,9-14C279,23.029,274.971,19,270,19z M270,31.5c-2.484,0-4.5-2.014-4.5-4.5c0-2.484,2.016-4.5,4.5-4.5c2.485,0,4.5,2.016,4.5,4.5C274.5,29.486,272.485,31.5,270,31.5z'/%3E%3Cg%3E%3Cpath d='M337,30.156v0.407v5.604c0,1.658-1.344,3-3,3h-10c-1.655,0-3-1.342-3-3v-10c0-1.657,1.345-3,3-3h6.345 l3.19-3.17H324c-3.313,0-6,2.687-6,6v10c0,3.313,2.687,6,6,6h10c3.314,0,6-2.687,6-6v-8.809L337,30.156'/%3E%3Cpath d='M338.72 24.637l-8.892 8.892H327V30.7l8.89-8.89z'/%3E%3Cpath d='M338.697 17.826h4v4h-4z' transform='rotate(-134.99 340.703 19.817)'/%3E%3C/g%3E%3Cg%3E%3Cpath d='M381 42h18V24h-18v18zm14-16h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26zm-4 0h2v14h-2V26z'/%3E%3Cpath d='M395 20v-4h-10v4h-6v2h22v-2h-6zm-2 0h-6v-2h6v2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A";
|
||||
|
||||
.leaflet-bar {
|
||||
@include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: .2)
|
||||
}
|
||||
|
||||
.leaflet-container {
|
||||
background: $euiColorEmptyShade;
|
||||
|
||||
//the heatmap layer plugin logs an error to the console when the map is in a 0-sized container
|
||||
min-width: 1px !important;
|
||||
min-height: 1px !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Since Leaflet is an external library, we also have to provide EUI variables
|
||||
* to non-override colors for darkmode.
|
||||
*/
|
||||
|
||||
.leaflet-control {
|
||||
a {
|
||||
background-color: lightOrDarkTheme($euiColorEmptyShade, $euiColorLightShade); /* 1 */
|
||||
border-color: lightOrDarkTheme($euiColorLightShade, $euiColorMediumShade); /* 1 */
|
||||
color: $euiTextColor; /* 1 */
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-retina .leaflet-draw-toolbar a {
|
||||
background-image: url($visMapLeafletSprite); /* 1 */
|
||||
}
|
||||
|
||||
.leaflet-control-layers-expanded {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
@include fontSize(11px);
|
||||
font-family: $euiFontFamily;
|
||||
font-weight: $euiFontWeightMedium;
|
||||
line-height: $euiLineHeight;
|
||||
|
||||
label {
|
||||
font-weight: $euiFontWeightMedium;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* over-rides leaflet popup styles to look like kibana tooltip */
|
||||
.leaflet-popup-content-wrapper {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: $temp-euiTooltipBackground;
|
||||
color: $temp-euiTooltipText;
|
||||
border-radius: $euiBorderRadius;
|
||||
}
|
||||
|
||||
.leaflet-popup {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
margin: 0;
|
||||
@include euiFontSizeS;
|
||||
font-weight: $euiFontWeightRegular;
|
||||
word-wrap: break-word;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
> * {
|
||||
margin: $euiSizeS $euiSizeS 0;
|
||||
}
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: $euiSizeS;
|
||||
}
|
||||
|
||||
table {
|
||||
td,th {
|
||||
padding: $euiSizeXS;
|
||||
|
||||
&.row-bucket {
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-tip-container,
|
||||
.leaflet-popup-close-button,
|
||||
.leaflet-draw-tooltip {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.leaflet-control-attribution {
|
||||
background-color: transparentize($euiColorEmptyShade, .7);
|
||||
color: $euiColorDarkShade;
|
||||
|
||||
// attributions are appended in blocks of <p> tags, this will allow them to display in one line
|
||||
p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-draw-actions a {
|
||||
background-color: $euiColorLightShade;
|
||||
color: $euiColorFullShade;
|
||||
}
|
||||
|
||||
// Filter to desaturate mapquest tiles
|
||||
|
||||
img.leaflet-tile {
|
||||
@if (lightness($euiTextColor) < 50) {
|
||||
filter: brightness(1.03) grayscale(0.73);
|
||||
} @else {
|
||||
filter: invert(1) brightness(1.75) grayscale(1);
|
||||
}
|
||||
}
|
||||
|
||||
img.leaflet-tile.filters-off {
|
||||
filter: none;
|
||||
}
|
||||
33
src/ui/public/vis/map/_legend.scss
Normal file
33
src/ui/public/vis/map/_legend.scss
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
.visMapLegend {
|
||||
@include fontSize(11px);
|
||||
@include euiBottomShadowMedium($color: $euiShadowColorLarge, $opacity: .1);
|
||||
font-family: $euiFontFamily;
|
||||
font-weight: $euiFontWeightMedium;
|
||||
line-height: $euiLineHeight;
|
||||
color: $euiColorDarkShade;
|
||||
padding: $euiSizeS;
|
||||
background: transparentize($euiColorEmptyShade, .8);
|
||||
border-radius: $euiBorderRadius;
|
||||
|
||||
i {
|
||||
@include size($euiSizeS + 2px);
|
||||
display: inline-block;
|
||||
margin: 3px $euiSizeXS 0 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid $euiColorDarkShade;
|
||||
background: $euiColorDarkShade;
|
||||
}
|
||||
}
|
||||
|
||||
.visMapLegend__title {
|
||||
font-weight: $euiFontWeightBold;
|
||||
}
|
||||
|
||||
// Wrapper/Position
|
||||
|
||||
// top left needs some more styles
|
||||
.leaflet-top.leaflet-left .visMapLegend__wrapper {
|
||||
position: absolute;
|
||||
left: $euiSizeXXL;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -69,7 +69,7 @@ function makeLegendControl(container, kibanaMap, position) {
|
|||
|
||||
updateContents() {
|
||||
this._legendContainer.empty();
|
||||
const $div = $('<div>').addClass('tilemap-legend');
|
||||
const $div = $('<div>').addClass('visMapLegend');
|
||||
this._legendContainer.append($div);
|
||||
const layers = this._kibanaMap.getLayers();
|
||||
layers.forEach((layer) =>layer.appendLegendContents($div));
|
||||
|
|
@ -497,7 +497,7 @@ export class KibanaMap extends EventEmitter {
|
|||
if (this._leafletLegendControl) {
|
||||
this._leafletMap.removeControl(this._leafletLegendControl);
|
||||
}
|
||||
const $wrapper = $('<div>').addClass('tilemap-legend-wrapper');
|
||||
const $wrapper = $('<div>').addClass('visMapLegend__wrapper');
|
||||
this._leafletLegendControl = makeLegendControl($wrapper, this, this._legendPosition);
|
||||
this._leafletMap.addControl(this._leafletLegendControl);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
});
|
||||
|
||||
it.skip('vega chart renders', async () => {
|
||||
const tsvb = await find.existsByCssSelector('.vega-view-container');
|
||||
const tsvb = await find.existsByCssSelector('.vgaVis__view');
|
||||
expect(tsvb).to.be(true);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -236,11 +236,11 @@ export function VisualizePageProvider({ getService, getPageObjects }) {
|
|||
}
|
||||
|
||||
async getVegaViewContainer() {
|
||||
return await find.byCssSelector('div.vega-view-container');
|
||||
return await find.byCssSelector('div.vgaVis__view');
|
||||
}
|
||||
|
||||
async getVegaControlContainer() {
|
||||
return await find.byCssSelector('div.vega-controls-container');
|
||||
return await find.byCssSelector('div.vgaVis__controls');
|
||||
}
|
||||
|
||||
async setFromTime(timeString) {
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ export function DashboardExpectProvider({ getService, getPageObjects }) {
|
|||
|
||||
async metricValuesExist(values) {
|
||||
log.debug(`DashboardExpect.metricValuesExist(${values})`);
|
||||
await this.textWithinCssElementExists(values, '.metric-value');
|
||||
await this.textWithinCssElementExists(values, '.mtrVis__value');
|
||||
}
|
||||
|
||||
async tsvbMetricValuesExist(values) {
|
||||
|
|
@ -188,12 +188,12 @@ export function DashboardExpectProvider({ getService, getPageObjects }) {
|
|||
|
||||
async vegaTextsExist(values) {
|
||||
log.debug(`DashboardExpect.vegaTextsExist(${values})`);
|
||||
await this.textWithinCssElementExists(values, '.vega-view-container text');
|
||||
await this.textWithinCssElementExists(values, '.vgaVis__view text');
|
||||
}
|
||||
|
||||
async vegaTextsDoNotExist(values) {
|
||||
log.debug(`DashboardExpect.vegaTextsDoNotExist(${values})`);
|
||||
await this.textWithinCssElementDoNotExist(values, '.vega-view-container text');
|
||||
await this.textWithinCssElementDoNotExist(values, '.vgaVis__view text');
|
||||
}
|
||||
|
||||
async tsvbMarkdownWithValuesExists(values) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue