mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Dark mode fixes for Visualize charts, TSVB, and Timelion (#30478)
* Some quicky changes * Fixes dark vs light coloring for TSVB charts * Fix coloring of tooltips and annotations for TSVB * Fix up TSVB Markdown No uses the same base styles as Visualize and Canvas * More fiddling with spacing around filter bar * Fixing dark mode grid and removing hard-coded hex values where possible and adding an alpha channel to those that can’t * more tweaks * removing more `reversed` props * Skip dark mode test for now Since `.reverse` doesn’t exist unless bg is opposite of theme * SASS linter enabled for TSVB * Fix chrome path * Enable sass-lint on Timelion * Enable sass-lint on vislib * Fix more spacing with query bar and enable sass-lint * temp var name update * A frew more files linted * missed a few more hardcoded colors * Addressed PR comments * Changing #rrggbbaa to rgba() For IE
This commit is contained in:
Caroline Horn
GitHub
parent
1e65ad5ce4
commit
50bea61e91
65 changed files with 357 additions and 380 deletions
|
|
@ -1,5 +1,9 @@
|
|||
files:
|
||||
include:
|
||||
- 'src/legacy/core_plugins/metrics/**/*.s+(a|c)ss'
|
||||
- 'src/legacy/core_plugins/timelion/**/*.s+(a|c)ss'
|
||||
- 'src/legacy/ui/public/query_bar/**/*.s+(a|c)ss'
|
||||
- 'src/legacy/ui/public/vislib/**/*.s+(a|c)ss'
|
||||
- 'x-pack/plugins/rollup/**/*.s+(a|c)ss'
|
||||
- 'x-pack/plugins/security/**/*.s+(a|c)ss'
|
||||
rules:
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@
|
|||
}
|
||||
|
||||
.conApp__resizer {
|
||||
@include kibana-resizer;
|
||||
@include kbnResizer;
|
||||
}
|
||||
|
||||
// SASSTODO: This component seems to not be used anymore?
|
||||
|
|
|
|||
|
|
@ -34,9 +34,6 @@ export default function PointSeriesVisType(Private, i18n) {
|
|||
type: 'area',
|
||||
grid: {
|
||||
categoryLines: false,
|
||||
style: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
categoryAxes: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@ export default function GaugeVisType(Private, i18n) {
|
|||
scale: {
|
||||
show: true,
|
||||
labels: false,
|
||||
color: '#333',
|
||||
color: 'rgba(105,112,125,0.2)',
|
||||
},
|
||||
type: 'meter',
|
||||
style: {
|
||||
|
|
@ -70,7 +70,7 @@ export default function GaugeVisType(Private, i18n) {
|
|||
mask: false,
|
||||
bgMask: false,
|
||||
maskBars: 50,
|
||||
bgFill: '#eee',
|
||||
bgFill: 'rgba(105,112,125,0.2)',
|
||||
bgColor: true,
|
||||
subText: '',
|
||||
fontSize: 60,
|
||||
|
|
|
|||
|
|
@ -60,12 +60,12 @@ export default function GoalVisType(Private, i18n) {
|
|||
scale: {
|
||||
show: false,
|
||||
labels: false,
|
||||
color: '#333',
|
||||
color: 'rgba(105,112,125,0.2)',
|
||||
width: 2
|
||||
},
|
||||
type: 'meter',
|
||||
style: {
|
||||
bgFill: '#000',
|
||||
bgFill: 'rgba(105,112,125,0.2)',
|
||||
bgColor: false,
|
||||
labelColor: false,
|
||||
subText: '',
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@ export default function HeatmapVisType(Private, i18n) {
|
|||
show: false,
|
||||
rotate: 0,
|
||||
overwriteColor: false,
|
||||
color: '#555',
|
||||
color: 'black',
|
||||
}
|
||||
}]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -36,9 +36,6 @@ export default function PointSeriesVisType(Private, i18n) {
|
|||
type: 'histogram',
|
||||
grid: {
|
||||
categoryLines: false,
|
||||
style: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
categoryAxes: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -36,9 +36,6 @@ export default function PointSeriesVisType(Private, i18n) {
|
|||
type: 'histogram',
|
||||
grid: {
|
||||
categoryLines: false,
|
||||
style: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
categoryAxes: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -34,9 +34,6 @@ export default function PointSeriesVisType(Private, i18n) {
|
|||
type: 'line',
|
||||
grid: {
|
||||
categoryLines: false,
|
||||
style: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
categoryAxes: [
|
||||
{
|
||||
|
|
|
|||
71
src/legacy/core_plugins/metrics/common/set_is_reversed.js
Normal file
71
src/legacy/core_plugins/metrics/common/set_is_reversed.js
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
/*
|
||||
* Licensed to Elasticsearch B.V. under one or more contributor
|
||||
* license agreements. See the NOTICE file distributed with
|
||||
* this work for additional information regarding copyright
|
||||
* ownership. Elasticsearch B.V. licenses this file to you under
|
||||
* the Apache License, Version 2.0 (the "License"); you may
|
||||
* not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import color from 'color';
|
||||
import chrome from '../../../ui/public/chrome';
|
||||
const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
|
||||
|
||||
/**
|
||||
* Returns true if the color that is passed has low luminosity
|
||||
*/
|
||||
const isColorDark = (c) => {
|
||||
return color(c).luminosity() < 0.45;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks to see if the `currentTheme` is dark in luminosity.
|
||||
* Defaults to checking `theme:darkMode`.
|
||||
*/
|
||||
export const isThemeDark = (currentTheme) => {
|
||||
let themeIsDark = currentTheme || IS_DARK_THEME;
|
||||
|
||||
// If passing a string, check the luminosity
|
||||
if (typeof currentTheme === 'string') {
|
||||
themeIsDark = isColorDark(currentTheme);
|
||||
}
|
||||
|
||||
return themeIsDark;
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks to find if the ultimate `backgroundColor` is dark.
|
||||
* Defaults to returning if the `currentTheme` is dark.
|
||||
*/
|
||||
export const isBackgroundDark = (backgroundColor, currentTheme) => {
|
||||
const themeIsDark = isThemeDark(currentTheme);
|
||||
|
||||
// If a background color doesn't exist or it inherits, pass back if it's a darktheme
|
||||
if (backgroundColor === undefined || backgroundColor === 'inherit') {
|
||||
return themeIsDark;
|
||||
}
|
||||
|
||||
// Otherwise return if the background color has low luminosity
|
||||
return isColorDark(backgroundColor);
|
||||
};
|
||||
|
||||
/**
|
||||
* Checks to see if `backgroundColor` is the the same lightness spectrum as `currentTheme`.
|
||||
*/
|
||||
export const isBackgroundInverted = (backgroundColor, currentTheme) => {
|
||||
const backgroundIsDark = isBackgroundDark(backgroundColor, currentTheme);
|
||||
const themeIsDark = isThemeDark(currentTheme);
|
||||
return backgroundIsDark !== themeIsDark;
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
// EUITODO: Create our own Markdown styles
|
||||
.tvbMarkdown__content {
|
||||
color: rgba(0,0,0,1);
|
||||
|
||||
pre, code, tt {
|
||||
border-radius: 0;
|
||||
font: 1em/1.5em 'Andale Mono', 'Lucida Console', monospace;
|
||||
}
|
||||
|
||||
h1 { font-size: 30px; }
|
||||
h2 { font-size: 26px; }
|
||||
h3 { font-size: 22px; }
|
||||
h4 { font-size: 18px; }
|
||||
h5 { font-size: 16px; }
|
||||
h6 { font-size: 16px; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6, b, strong {
|
||||
margin:0 0 15px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
em, i, dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
dfn {
|
||||
font-weight:bold;
|
||||
}
|
||||
p, code, pre, kbd {
|
||||
margin:0 0 15px 0;
|
||||
}
|
||||
blockquote {
|
||||
margin:0 15px 15px 15px;
|
||||
}
|
||||
cite {
|
||||
font-style: italic;
|
||||
}
|
||||
li ul, li ol {
|
||||
margin:0 15px;
|
||||
}
|
||||
ul, ol {
|
||||
margin:0 15px 15px 15px;
|
||||
}
|
||||
ul {
|
||||
list-style-type:disc;
|
||||
}
|
||||
ol {
|
||||
list-style-type:decimal;
|
||||
}
|
||||
ol ol {
|
||||
list-style: upper-alpha;
|
||||
}
|
||||
ol ol ol {
|
||||
list-style: lower-roman;
|
||||
}
|
||||
ol ol ol ol {
|
||||
list-style: lower-alpha;
|
||||
}
|
||||
dl {
|
||||
margin:0 0 15px 0;
|
||||
}
|
||||
dl dt {
|
||||
font-weight:bold;
|
||||
}
|
||||
dd {
|
||||
margin-left:1.5em;
|
||||
}
|
||||
table {
|
||||
margin-bottom:1.4em;
|
||||
width:100%;
|
||||
}
|
||||
th {
|
||||
font-weight:bold;
|
||||
}
|
||||
th, td, caption {
|
||||
padding:4px 15px 4px 5px;
|
||||
}
|
||||
tfoot {
|
||||
font-style:italic;
|
||||
}
|
||||
sup, sub {
|
||||
line-height:0;
|
||||
}
|
||||
abbr, acronym {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
address {
|
||||
margin:0 0 15px;
|
||||
font-style:italic;
|
||||
}
|
||||
del {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
pre {
|
||||
margin: 15px 0;
|
||||
white-space: pre;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
pre, code, tt {
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
color: red;
|
||||
code {
|
||||
color: rgba(0,0,0,1);
|
||||
background-color: transparent;
|
||||
}
|
||||
border: none;
|
||||
}
|
||||
|
||||
.tvbMarkdown.reversed & {
|
||||
.table > thead > tr > th {
|
||||
color: rgba(255,255,255,0.5);
|
||||
border-bottom: 2px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
.table > tbody > tr > td {
|
||||
border-top: 1px solid rgba(255,255,255,0.2);
|
||||
}
|
||||
color: rgba(255,255,255,1);
|
||||
pre, code, tt {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
color: #ffa5a8;
|
||||
code {
|
||||
color: rgba(255,255,255,1);
|
||||
background-color: transparent;
|
||||
}
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,8 @@
|
|||
@import 'node_modules/@elastic/eui/src/components/form/variables';
|
||||
@import 'node_modules/@elastic/eui/src/components/form/mixins';
|
||||
|
||||
@mixin tvbEditor__repeatingRow {
|
||||
@mixin tvbEditorRepeatingRow {
|
||||
background-color: $euiColorLightestShade;
|
||||
padding: $euiSizeS;
|
||||
margin-bottom: $euiSizeS;
|
||||
}
|
||||
|
||||
// SASSTODO: These need to be converted to EUI,
|
||||
// but they have type errors
|
||||
@mixin tvbEditor__input {
|
||||
@include euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: false);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
&.visible {
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
$tvbLineColor: transparentize($euiColorFullShade,0.8);
|
||||
$tvbLineColorReversed: transparentize($euiColorEmptyShade,0.6);
|
||||
$tvbLineColor: transparentize($euiColorFullShade, .8);
|
||||
$tvbLineColorReversed: transparentize($euiColorEmptyShade, .6);
|
||||
|
||||
$tvbTextColor: transparentize($euiColorFullShade,0.6);
|
||||
$tvbTextColorReversed: transparentize($euiColorEmptyShade,0.4);
|
||||
$tvbTextColor: transparentize($euiColorFullShade, .6);
|
||||
$tvbTextColorReversed: transparentize($euiColorEmptyShade, .4);
|
||||
|
||||
$tvbValueColor: transparentize($euiColorFullShade,0.3);
|
||||
$tvbValueColorReversed: transparentize($euiColorEmptyShade,0.2);
|
||||
$tvbValueColor: transparentize($euiColorFullShade, .3);
|
||||
$tvbValueColorReversed: transparentize($euiColorEmptyShade, .2);
|
||||
|
||||
$tvbHoverBackgroundColor: transparentize($euiColorFullShade,0.9);
|
||||
$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade,0.9);
|
||||
$tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9);
|
||||
$tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9);
|
||||
|
|
|
|||
|
|
@ -10,6 +10,8 @@
|
|||
|
||||
.tvbColorPicker__swatch-empty,
|
||||
.tvbColorPicker__swatch {
|
||||
// SASSTODO: Replace with EUI component
|
||||
// sass-lint:disable-block placeholder-in-extend
|
||||
@extend .euiColorPicker__swatch;
|
||||
}
|
||||
|
||||
|
|
@ -37,8 +39,8 @@
|
|||
|
||||
.tvbColorPicker__cover {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.tvbColorRules__rule {
|
||||
@include tvbEditor__repeatingRow;
|
||||
@include tvbEditorRepeatingRow;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// to SASS, but it should be in EUI.
|
||||
// Also, some pixel values were kept as is to match inline styles from react-color
|
||||
.tvbColorPickerPopUp {
|
||||
@include euiBottomShadowMedium();
|
||||
@include euiBottomShadowMedium;
|
||||
background-color: $euiColorEmptyShade;
|
||||
border-radius: $euiBorderRadius;
|
||||
box-sizing: initial;
|
||||
|
|
@ -52,22 +52,22 @@
|
|||
.tvbColorPickerPopUp__swatch-disableAlpha {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin: 0px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tvbColorPickerPopUp__active {
|
||||
@include euiBottomShadowMedium;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
border-radius: $euiSizeS;
|
||||
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.tvbColorPickerPopUp__toggles {
|
||||
flex: 1
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tvbColorPickerPopUp__hue {
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
}
|
||||
|
||||
.tvbColorPickerPopUp__hue-disableAlpha {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tvbColorPickerPopUp__alpha {
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
background-color: $tempBackgroundColor;
|
||||
|
||||
.tvbNoData__title {
|
||||
@include euiTitle("xs");
|
||||
@include euiTitle('xs');
|
||||
color: makeHighContrastColor($euiColorPrimary, $tempBackgroundColor);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,5 +15,5 @@
|
|||
}
|
||||
|
||||
.tvbEditorVisualization__draghandle {
|
||||
@include kibana-resizer($size: ($euiSizeM + 2px), $direction: vertical);
|
||||
@include kbnResizer($direction: vertical);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.tvbAggRow {
|
||||
@include tvbEditor__repeatingRow;
|
||||
@include tvbEditorRepeatingRow;
|
||||
}
|
||||
|
||||
.tvbAggRow--split {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,6 @@ import { extractIndexPatterns } from '../lib/extract_index_patterns';
|
|||
import { fetchFields } from '../lib/fetch_fields';
|
||||
import chrome from 'ui/chrome';
|
||||
|
||||
const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
|
||||
|
||||
class VisEditor extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -117,7 +115,6 @@ class VisEditor extends Component {
|
|||
return (
|
||||
<Visualization
|
||||
dateFormat={this.props.config.get('dateFormat')}
|
||||
reversed={IS_DARK_THEME}
|
||||
onBrush={this.onBrush}
|
||||
onUiState={this.handleUiState}
|
||||
uiState={this.props.vis.getUiState()}
|
||||
|
|
|
|||
|
|
@ -24,7 +24,6 @@ import tickFormatter from '../../lib/tick_formatter';
|
|||
import _ from 'lodash';
|
||||
import Gauge from '../../../visualizations/components/gauge';
|
||||
import getLastValue from '../../../../common/get_last_value';
|
||||
import color from 'color';
|
||||
|
||||
function getColors(props) {
|
||||
const { model, visData } = props;
|
||||
|
|
@ -60,11 +59,15 @@ function GaugeVisualization(props) {
|
|||
if (i === 0 && colors.gauge) newProps.color = colors.gauge;
|
||||
return _.assign({}, row, newProps);
|
||||
});
|
||||
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
const params = {
|
||||
metric: series[0],
|
||||
type: model.gauge_style || 'half',
|
||||
reversed: props.reversed,
|
||||
additionalLabel: props.additionalLabel
|
||||
additionalLabel: props.additionalLabel,
|
||||
backgroundColor: panelBackgroundColor,
|
||||
};
|
||||
|
||||
if (colors.text) {
|
||||
|
|
@ -76,13 +79,6 @@ function GaugeVisualization(props) {
|
|||
if (model.gauge_inner_width) params.innerLine = model.gauge_inner_width;
|
||||
if (model.gauge_max != null) params.max = model.gauge_max;
|
||||
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
|
||||
if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
|
||||
params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
|
||||
}
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
return (
|
||||
<div className="tvbVis" style={style}>
|
||||
<Gauge {...params} />
|
||||
|
|
@ -97,7 +93,6 @@ GaugeVisualization.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
getConfig: PropTypes.func
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
}
|
||||
|
||||
.tvbMarkdown__content {
|
||||
@include euiScrollBar;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 0 auto;
|
||||
|
|
@ -16,13 +17,15 @@
|
|||
bottom: 0;
|
||||
overflow: hidden;
|
||||
|
||||
&.middle {
|
||||
&--middle {
|
||||
justify-content: center;
|
||||
}
|
||||
&.bottom {
|
||||
|
||||
&--bottom {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&.scrolling {
|
||||
|
||||
&-isScrolling {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,9 @@
|
|||
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { isBackgroundInverted } from '../../../../common/set_is_reversed';
|
||||
import _ from 'lodash';
|
||||
import color from 'color';
|
||||
import Markdown from 'react-markdown';
|
||||
import replaceVars from '../../lib/replace_vars';
|
||||
import convertSeriesToVars from '../../lib/convert_series_to_vars';
|
||||
|
|
@ -33,15 +34,11 @@ function MarkdownVisualization(props) {
|
|||
const { backgroundColor, model, visData, dateFormat } = props;
|
||||
const series = _.get(visData, `${model.id}.series`, []);
|
||||
const variables = convertSeriesToVars(series, model, dateFormat, props.getConfig);
|
||||
const style = {};
|
||||
const markdownElementId = getMarkdownId(uuid.v1());
|
||||
|
||||
let reversed = props.reversed;
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
if (panelBackgroundColor) {
|
||||
style.backgroundColor = panelBackgroundColor;
|
||||
reversed = color(panelBackgroundColor).luminosity() < 0.45;
|
||||
}
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
let markdown;
|
||||
let markdownCss = '';
|
||||
|
||||
|
|
@ -60,16 +57,23 @@ function MarkdownVisualization(props) {
|
|||
.replace(new RegExp(getMarkdownId(model.id), 'g'), markdownElementId);
|
||||
}
|
||||
|
||||
let className = 'tvbMarkdown';
|
||||
let contentClassName = `tvbMarkdown__content ${model.markdown_vertical_align}`;
|
||||
if (model.markdown_scrollbars) contentClassName += ' scrolling';
|
||||
if (reversed) className += ' reversed';
|
||||
const markdownClasses = classNames('kbnMarkdown__body', {
|
||||
'kbnMarkdown__body--reversed': isBackgroundInverted(panelBackgroundColor),
|
||||
});
|
||||
|
||||
const contentClasses = classNames('tvbMarkdown__content',
|
||||
`tvbMarkdown__content--${model.markdown_vertical_align}`,
|
||||
{ 'tvbMarkdown__content-isScrolling': model.markdown_scrollbars, },
|
||||
markdownClasses,
|
||||
);
|
||||
|
||||
const markdownError = markdownSource instanceof Error ? markdownSource : null;
|
||||
|
||||
markdown = (
|
||||
<div className={className} data-test-subj="tsvbMarkdown">
|
||||
<div className="tvbMarkdown" data-test-subj="tsvbMarkdown">
|
||||
{markdownError && <ErrorComponent error={markdownError} />}
|
||||
<style type="text/css">{markdownCss}</style>
|
||||
<div className={contentClassName}>
|
||||
<div className={contentClasses}>
|
||||
<div id={markdownElementId}>{!markdownError && <Markdown escapeHtml={true} source={markdownSource} />}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,7 +92,6 @@ MarkdownVisualization.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string,
|
||||
getConfig: PropTypes.func
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ import tickFormatter from '../../lib/tick_formatter';
|
|||
import _ from 'lodash';
|
||||
import Metric from '../../../visualizations/components/metric';
|
||||
import getLastValue from '../../../../common/get_last_value';
|
||||
import color from 'color';
|
||||
import { isBackgroundInverted } from '../../../../common/set_is_reversed';
|
||||
|
||||
function getColors(props) {
|
||||
const { model, visData } = props;
|
||||
|
|
@ -59,23 +59,20 @@ function MetricVisualization(props) {
|
|||
if (i === 0 && colors.color) newProps.color = colors.color;
|
||||
return _.assign({}, _.pick(row, ['label', 'data']), newProps);
|
||||
});
|
||||
|
||||
const panelBackgroundColor = colors.background || backgroundColor;
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
const params = {
|
||||
metric: series[0],
|
||||
reversed: props.reversed,
|
||||
additionalLabel: props.additionalLabel
|
||||
additionalLabel: props.additionalLabel,
|
||||
reversed: isBackgroundInverted(panelBackgroundColor),
|
||||
};
|
||||
|
||||
if (series[1]) {
|
||||
params.secondary = series[1];
|
||||
}
|
||||
|
||||
const panelBackgroundColor = colors.background || backgroundColor;
|
||||
|
||||
if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
|
||||
params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
|
||||
}
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
params.backgroundColor = panelBackgroundColor;
|
||||
|
||||
return (
|
||||
<div className="tvbVis" style={style}>
|
||||
<Metric {...params}/>
|
||||
|
|
@ -91,7 +88,6 @@ MetricVisualization.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
getConfig: PropTypes.func
|
||||
};
|
||||
|
|
|
|||
|
|
@ -175,11 +175,6 @@ class TableVis extends Component {
|
|||
const { visData, model } = this.props;
|
||||
const header = this.renderHeader();
|
||||
let rows;
|
||||
let reversedClass = '';
|
||||
|
||||
if (this.props.reversed) {
|
||||
reversedClass = 'reversed';
|
||||
}
|
||||
|
||||
if (_.isArray(visData.series) && visData.series.length) {
|
||||
rows = visData.series.map(this.renderRow);
|
||||
|
|
@ -204,7 +199,7 @@ class TableVis extends Component {
|
|||
);
|
||||
}
|
||||
return(
|
||||
<div className={`tvbVis ${reversedClass}`} data-test-subj="tableView">
|
||||
<div className="tvbVis" data-test-subj="tableView">
|
||||
<table className="table">
|
||||
<thead>
|
||||
{header}
|
||||
|
|
@ -231,7 +226,6 @@ TableVis.propTypes = {
|
|||
onUiState: PropTypes.func,
|
||||
uiState: PropTypes.object,
|
||||
pageNumber: PropTypes.number,
|
||||
reversed: PropTypes.bool,
|
||||
getConfig: PropTypes.func
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -25,7 +25,6 @@ import { MarkdownSimple } from 'ui/markdown';
|
|||
import tickFormatter from '../../lib/tick_formatter';
|
||||
import _ from 'lodash';
|
||||
import Timeseries from '../../../visualizations/components/timeseries';
|
||||
import color from 'color';
|
||||
import replaceVars from '../../lib/replace_vars';
|
||||
import { getAxisLabelString } from '../../lib/get_axis_label_string';
|
||||
import { createXaxisFormatter } from '../../lib/create_xaxis_formatter';
|
||||
|
|
@ -209,15 +208,18 @@ class TimeseriesVisualization extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
const params = {
|
||||
dateFormat: this.props.dateFormat,
|
||||
crosshair: true,
|
||||
tickFormatter: formatter,
|
||||
legendPosition: model.legend_position || 'right',
|
||||
backgroundColor: panelBackgroundColor,
|
||||
series,
|
||||
annotations,
|
||||
yaxes,
|
||||
reversed: this.props.reversed,
|
||||
showGrid: Boolean(model.show_grid),
|
||||
legend: Boolean(model.show_legend),
|
||||
xAxisFormatter: this.xaxisFormatter,
|
||||
|
|
@ -225,15 +227,11 @@ class TimeseriesVisualization extends Component {
|
|||
if (this.props.onBrush) this.props.onBrush(ranges);
|
||||
}
|
||||
};
|
||||
|
||||
if (interval) {
|
||||
params.xaxisLabel = getAxisLabelString(interval);
|
||||
}
|
||||
const style = { };
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
if (panelBackgroundColor) {
|
||||
style.backgroundColor = panelBackgroundColor;
|
||||
params.reversed = color(panelBackgroundColor || backgroundColor).luminosity() < 0.45;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tvbVis" style={style}>
|
||||
<Timeseries {...params}/>
|
||||
|
|
@ -250,7 +248,6 @@ TimeseriesVisualization.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string,
|
||||
getConfig: PropTypes.func
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
import tickFormatter from '../../lib/tick_formatter';
|
||||
import TopN from '../../../visualizations/components/top_n';
|
||||
import getLastValue from '../../../../common/get_last_value';
|
||||
import color from 'color';
|
||||
import { isBackgroundInverted } from '../../../../common/set_is_reversed';
|
||||
import replaceVars from '../../lib/replace_vars';
|
||||
import PropTypes from 'prop-types';
|
||||
import React from 'react';
|
||||
|
|
@ -76,22 +76,20 @@ function TopNVisualization(props) {
|
|||
return item;
|
||||
});
|
||||
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
const params = {
|
||||
series: series,
|
||||
reversed: props.reversed
|
||||
reversed: isBackgroundInverted(panelBackgroundColor),
|
||||
};
|
||||
const panelBackgroundColor = model.background_color || backgroundColor;
|
||||
|
||||
if (panelBackgroundColor && panelBackgroundColor !== 'inherit') {
|
||||
params.reversed = color(panelBackgroundColor).luminosity() < 0.45;
|
||||
}
|
||||
|
||||
if (model.drilldown_url) {
|
||||
params.onClick = (item) => {
|
||||
window.location = replaceVars(model.drilldown_url, {}, { key: item.label });
|
||||
};
|
||||
}
|
||||
const style = { backgroundColor: panelBackgroundColor };
|
||||
|
||||
return (
|
||||
<div className="tvbVis" style={style}>
|
||||
<TopN {...params}/>
|
||||
|
|
@ -106,7 +104,6 @@ TopNVisualization.propTypes = {
|
|||
model: PropTypes.object,
|
||||
onBrush: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
getConfig: PropTypes.func
|
||||
};
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@ function Visualization(props) {
|
|||
return (
|
||||
React.createElement(component, {
|
||||
dateFormat: props.dateFormat,
|
||||
reversed: props.reversed,
|
||||
backgroundColor: props.backgroundColor,
|
||||
model: props.model,
|
||||
onBrush: props.onBrush,
|
||||
|
|
@ -89,7 +88,6 @@ Visualization.propTypes = {
|
|||
onChange: PropTypes.func,
|
||||
onUiState: PropTypes.func,
|
||||
uiState: PropTypes.object,
|
||||
reversed: PropTypes.bool,
|
||||
visData: PropTypes.object,
|
||||
dateFormat: PropTypes.string,
|
||||
getConfig: PropTypes.func
|
||||
|
|
|
|||
|
|
@ -10,9 +10,6 @@
|
|||
@import './variables';
|
||||
@import './mixins';
|
||||
|
||||
// Hacks (mostly todo's)
|
||||
@import './hacks';
|
||||
|
||||
// Library overrides
|
||||
@import './ui_sortable';
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,8 @@
|
|||
}
|
||||
|
||||
.tvbVisAnnotation__tooltip {
|
||||
@include euiBottomShadow($color: $euiColorFullShade);
|
||||
@include euiFontSizeXS;
|
||||
padding: $euiSizeS;
|
||||
animation-duration: .0s;
|
||||
animation-delay: .0;
|
||||
}
|
||||
|
||||
.tvbVisAnnotation__timestamp {
|
||||
color: $euiColorLightShade;
|
||||
animation-duration: 0s;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,13 +26,13 @@
|
|||
|
||||
.tvbVisHalfGauge__metrics {
|
||||
height: 70px;
|
||||
padding: 0px $euiSizeM $euiSizeS;
|
||||
padding: 0 $euiSizeM $euiSizeS;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.tvbVisGauge__label {
|
||||
color: $tvbTextColor;
|
||||
font-size: 0.5em; /* 1 */
|
||||
font-size: .5em; /* 1 */
|
||||
line-height: 1em; /* 1 */
|
||||
text-align: center;
|
||||
padding: 0 $euiSizeS $euiSizeXS;
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
.tvbVisGauge__additionalLabel {
|
||||
@include euiTextTruncate;
|
||||
font-size: 0.4em; /* 1 */
|
||||
font-size: .4em; /* 1 */
|
||||
line-height: 1.2em; /* 1 */
|
||||
width: 100%;
|
||||
padding: 2px $euiSizeXS;
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
max-width: 170px;
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
@ -48,8 +48,8 @@
|
|||
}
|
||||
|
||||
.tvbLegend__itemLabel {
|
||||
flex-grow: 1;
|
||||
@include euiTextTruncate;
|
||||
flex-grow: 1;
|
||||
|
||||
span {
|
||||
color: $euiTextColor;
|
||||
|
|
|
|||
|
|
@ -34,10 +34,12 @@
|
|||
.tvbVisMetric__label--primary {
|
||||
color: $tvbTextColor;
|
||||
text-align: center;
|
||||
font-size: 0.5em; /* 1 */
|
||||
margin-bottom: 0.25em; /* 1 */
|
||||
font-size: .5em; /* 1 */
|
||||
margin-bottom: .25em; /* 1 */
|
||||
line-height: 1em; /* 1 */
|
||||
|
||||
// sass-lint:disable-block mixins-before-declarations
|
||||
// these need to come after the base/normal styles
|
||||
@include tvbVisMetricReversedColor {
|
||||
color: $tvbTextColorReversed;
|
||||
}
|
||||
|
|
@ -50,6 +52,8 @@
|
|||
font-weight: $euiFontWeightBold;
|
||||
line-height: 1em; /* 1 */
|
||||
|
||||
// sass-lint:disable-block mixins-before-declarations
|
||||
// these need to come after the base/normal styles
|
||||
@include tvbVisMetricReversedColor {
|
||||
color: $tvbValueColorReversed;
|
||||
}
|
||||
|
|
@ -59,25 +63,29 @@
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 0.05em; /* 1 */
|
||||
margin-top: .05em; /* 1 */
|
||||
}
|
||||
|
||||
.tvbVisMetric__label--secondary {
|
||||
font-size: 0.35em; /* 1 */
|
||||
margin-right: 0.3em; /* 1 */
|
||||
font-size: .35em; /* 1 */
|
||||
margin-right: .3em; /* 1 */
|
||||
color: $tvbTextColor;
|
||||
line-height: 1em; /* 1 */
|
||||
|
||||
// sass-lint:disable-block mixins-before-declarations
|
||||
// these need to come after the base/normal styles
|
||||
@include tvbVisMetricReversedColor {
|
||||
color: $tvbTextColorReversed;
|
||||
}
|
||||
}
|
||||
|
||||
.tvbVisMetric__value--secondary {
|
||||
font-size: 0.35em; /* 1 */
|
||||
font-size: .35em; /* 1 */
|
||||
color: $tvbValueColor;
|
||||
line-height: 1em; /* 1 */
|
||||
|
||||
// sass-lint:disable-block mixins-before-declarations
|
||||
// these need to come after the base/normal styles
|
||||
@include tvbVisMetricReversedColor {
|
||||
color: $tvbValueColorReversed;
|
||||
}
|
||||
|
|
@ -90,12 +98,14 @@
|
|||
|
||||
.tvbVisMetric__label--additional {
|
||||
@include euiTextTruncate;
|
||||
font-size: 0.25em; /* 1 */
|
||||
padding: $euiSizeXS/2 0 0 0;
|
||||
font-size: .25em; /* 1 */
|
||||
padding: ($euiSizeXS / 2) 0 0;
|
||||
text-align: center;
|
||||
color: $tvbValueColor;
|
||||
line-height: 1.2; // Ensure the descenders don't get cut off
|
||||
|
||||
// sass-lint:disable-block mixins-before-declarations
|
||||
// these need to come after the base/normal styles
|
||||
@include tvbVisMetricReversedColor {
|
||||
color: $tvbValueColorReversed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
@import '@elastic/eui/src/components/tool_tip/mixins';
|
||||
|
||||
.tvbVisTimeSeries {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
@ -32,6 +34,7 @@
|
|||
}
|
||||
|
||||
.tvbVisTimeSeries__container {
|
||||
@include euiFontSizeXS;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -39,7 +42,7 @@
|
|||
}
|
||||
|
||||
.tvbVisTimeSeries__axisLabel {
|
||||
@include euiFontSizeXS;
|
||||
font-weight: $euiFontWeightBold;
|
||||
color: $tvbTextColor;
|
||||
text-align: center;
|
||||
min-height: 1.2em;
|
||||
|
|
@ -67,31 +70,26 @@
|
|||
}
|
||||
|
||||
.tvbTooltip {
|
||||
background-color: tintOrShade($euiColorFullShade, 25%, 90%);
|
||||
@include euiBottomShadow($color: $euiColorFullShade);
|
||||
@include euiToolTipStyle;
|
||||
@include euiFontSizeXS;
|
||||
padding: $euiSizeS;
|
||||
border-radius: $euiBorderRadius;
|
||||
color: $euiColorGhost;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.tvbTooltip__caret {
|
||||
$temp-arrowSize: $euiSizeM;
|
||||
width: $temp-arrowSize;
|
||||
height: $temp-arrowSize;
|
||||
color: tintOrShade($euiColorFullShade, 25%, 90%);
|
||||
border-radius: 2px;
|
||||
$tempArrowSize: $euiSizeM;
|
||||
width: $tempArrowSize;
|
||||
height: $tempArrowSize;
|
||||
border-radius: $euiBorderRadius / 2;
|
||||
background-color: tintOrShade($euiColorFullShade, 25%, 90%);
|
||||
transform-origin: center;
|
||||
transform: rotateZ(45deg);
|
||||
|
||||
.tvbTooltip__container--left & {
|
||||
margin-right: (($temp-arrowSize/2) + 1px) * -1;
|
||||
margin-right: (($tempArrowSize/2) + 1px) * -1;
|
||||
}
|
||||
|
||||
.tvbTooltip__container--right & {
|
||||
margin-left: (($temp-arrowSize/2) + 1px) * -1;
|
||||
margin-left: (($tempArrowSize/2) + 1px) * -1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,6 +109,6 @@
|
|||
}
|
||||
|
||||
.tvbTooltip__timestamp {
|
||||
color: $euiColorLightShade;
|
||||
color: transparentize($euiColorGhost, .3);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ class Annotation extends Component {
|
|||
});
|
||||
return (
|
||||
<div>
|
||||
<div className={`tvbVisAnnotation__timestamp`}>{ moment(timestamp).format('lll') }</div>
|
||||
<div className="tvbTooltip__timestamp">{ moment(timestamp).format('lll') }</div>
|
||||
{ messages }
|
||||
</div>
|
||||
);
|
||||
|
|
@ -81,7 +81,6 @@ Annotation.propTypes = {
|
|||
icon: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
plot: PropTypes.object,
|
||||
reversed: PropTypes.bool
|
||||
};
|
||||
|
||||
export default Annotation;
|
||||
|
|
|
|||
|
|
@ -154,7 +154,7 @@ class FlotChart extends Component {
|
|||
getOptions(props) {
|
||||
const yaxes = props.yaxes || [{}];
|
||||
|
||||
const lineColor = props.reversed ? colors.lineColorReversed : colors.lineColor;
|
||||
const lineColor = colors.lineColor;
|
||||
const textColor = props.reversed ? colors.textColorReversed : colors.textColor;
|
||||
|
||||
const borderWidth = { bottom: 1, top: 0, left: 0, right: 0 };
|
||||
|
|
@ -176,7 +176,7 @@ class FlotChart extends Component {
|
|||
}),
|
||||
yaxis: {
|
||||
color: lineColor,
|
||||
font: { color: textColor },
|
||||
font: { color: textColor, size: 11 },
|
||||
tickFormatter: props.tickFormatter
|
||||
},
|
||||
xaxis: {
|
||||
|
|
@ -184,7 +184,7 @@ class FlotChart extends Component {
|
|||
color: lineColor,
|
||||
timezone: 'browser',
|
||||
mode: 'time',
|
||||
font: { color: textColor },
|
||||
font: { color: textColor, size: 11 },
|
||||
ticks: this.calculateTicks()
|
||||
},
|
||||
series: {
|
||||
|
|
@ -202,7 +202,7 @@ class FlotChart extends Component {
|
|||
if (props.crosshair) {
|
||||
_.set(opts, 'crosshair', {
|
||||
mode: 'x',
|
||||
color: props.reversed ? '#FFF' : '#000',
|
||||
color: '#C66',
|
||||
lineWidth: 1
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@
|
|||
import _ from 'lodash';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { isBackgroundInverted, isBackgroundDark } from '../../../common/set_is_reversed';
|
||||
import getLastValue from '../../../common/get_last_value';
|
||||
import getValueBy from '../lib/get_value_by';
|
||||
import GaugeVis from './gauge_vis';
|
||||
|
|
@ -96,8 +98,8 @@ class Gauge extends Component {
|
|||
}, this.props);
|
||||
|
||||
const gaugeProps = {
|
||||
reversed: this.props.reversed,
|
||||
value,
|
||||
reversed: isBackgroundDark(this.props.backgroundColor),
|
||||
gaugeLine: this.props.gaugeLine,
|
||||
innerLine: this.props.innerLine,
|
||||
innerColor: this.props.innerColor,
|
||||
|
|
@ -158,10 +160,15 @@ class Gauge extends Component {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
let className = type === 'half' ? 'tvbVisHalfGauge' : 'tvbVisCircleGauge';
|
||||
if (this.props.reversed) className = `${className} tvbVisGauge--reversed`;
|
||||
|
||||
const classes = classNames({
|
||||
'tvbVisHalfGauge': type === 'half',
|
||||
'tvbVisCircleGauge': type === 'circle',
|
||||
'tvbVisGauge--reversed': isBackgroundInverted(this.props.backgroundColor),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={className}>
|
||||
<div className={classes}>
|
||||
<div
|
||||
ref={(el) => this.resize = el}
|
||||
className={`tvbVisGauge__resize`}
|
||||
|
|
@ -187,7 +194,7 @@ Gauge.propTypes = {
|
|||
innerLine: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
metric: PropTypes.object,
|
||||
reversed: PropTypes.bool,
|
||||
backgroundColor: PropTypes.string,
|
||||
type: PropTypes.oneOf(['half', 'circle']),
|
||||
valueColor: PropTypes.string,
|
||||
additionalLabel: PropTypes.string
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import React, { Component } from 'react';
|
|||
import _ from 'lodash';
|
||||
import reactcss from 'reactcss';
|
||||
import calculateCoordinates from '../lib/calculate_coordinates';
|
||||
import colors from '../lib/colors';
|
||||
|
||||
class GaugeVis extends Component {
|
||||
|
||||
|
|
@ -124,7 +125,7 @@ class GaugeVis extends Component {
|
|||
cx: 60,
|
||||
cy: 60,
|
||||
fill: 'rgba(0,0,0,0)',
|
||||
stroke: this.props.reversed ? 'rgba(255,255,255,0.2)' : 'rgba(0,0,0,0.2)',
|
||||
stroke: colors.lineColor,
|
||||
strokeDasharray: `${sliceSize * size} ${size}`,
|
||||
strokeWidth: this.props.innerLine
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,8 +19,10 @@
|
|||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import _ from 'lodash';
|
||||
import getLastValue from '../../../common/get_last_value';
|
||||
import { isBackgroundInverted } from '../../../common/set_is_reversed';
|
||||
import TimeseriesChart from './timeseries_chart';
|
||||
import Legend from './legend';
|
||||
import eventBus from '../lib/events';
|
||||
|
|
@ -125,10 +127,10 @@ class Timeseries extends Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
let className = 'tvbVisTimeSeries';
|
||||
if (this.props.reversed) {
|
||||
className += ' tvbVisTimeSeries--reversed';
|
||||
}
|
||||
const classes = classNames('tvbVisTimeSeries', {
|
||||
'tvbVisTimeSeries--reversed': isBackgroundInverted(this.props.backgroundColor),
|
||||
});
|
||||
|
||||
const styles = reactcss({
|
||||
bottomLegend: {
|
||||
content: {
|
||||
|
|
@ -137,7 +139,7 @@ class Timeseries extends Component {
|
|||
}
|
||||
}, { bottomLegend: this.props.legendPosition === 'bottom' });
|
||||
return (
|
||||
<div className={className} data-test-subj="timeseriesChart">
|
||||
<div className={classes} data-test-subj="timeseriesChart">
|
||||
<div style={styles.content} className="tvbVisTimeSeries__content">
|
||||
<div className="tvbVisTimeSeries__visualization">
|
||||
<TimeseriesChart
|
||||
|
|
@ -145,7 +147,7 @@ class Timeseries extends Component {
|
|||
crosshair={this.props.crosshair}
|
||||
onBrush={this.props.onBrush}
|
||||
plothover={this.plothover}
|
||||
reversed={this.props.reversed}
|
||||
backgroundColor={this.props.backgroundColor}
|
||||
series={this.props.series}
|
||||
annotations={this.props.annotations}
|
||||
show={this.state.show}
|
||||
|
|
@ -187,7 +189,7 @@ Timeseries.propTypes = {
|
|||
onFilter: PropTypes.func,
|
||||
series: PropTypes.array,
|
||||
annotations: PropTypes.array,
|
||||
reversed: PropTypes.bool,
|
||||
backgroundColor: PropTypes.string,
|
||||
options: PropTypes.object,
|
||||
tickFormatter: PropTypes.func,
|
||||
showGrid: PropTypes.bool,
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@
|
|||
|
||||
import PropTypes from 'prop-types';
|
||||
import React, { Component } from 'react';
|
||||
import classNames from 'classnames';
|
||||
import { isBackgroundInverted, isBackgroundDark } from '../../../common/set_is_reversed';
|
||||
import moment from 'moment';
|
||||
import reactcss from 'reactcss';
|
||||
import FlotChart from './flot_chart';
|
||||
|
|
@ -115,7 +117,6 @@ class TimeseriesChart extends Component {
|
|||
plot={annotation.plot}
|
||||
key={annotation.key}
|
||||
icon={annotation.icon}
|
||||
reversed={this.props.reversed}
|
||||
color={annotation.color}
|
||||
/>
|
||||
);
|
||||
|
|
@ -150,12 +151,12 @@ class TimeseriesChart extends Component {
|
|||
<div className={`tvbTooltip__container tvbTooltip__container--${right ? 'right' : 'left'}`} style={styles.tooltipContainer}>
|
||||
<span className="tvbTooltip__caret"/>
|
||||
<div className="tvbTooltip">
|
||||
<div className="tvbTooltip__timestamp">{ moment(item.datapoint[0]).format(this.props.dateFormat) }</div>
|
||||
<div className="tvbTooltip__item">
|
||||
<EuiIcon className="tvbTooltip__icon" type="dot" color={item.series.color} />
|
||||
<div className="tvbTooltip__label">{ item.series.label }</div>
|
||||
<div className="tvbTooltip__value">{ formatter(value) }</div>
|
||||
</div>
|
||||
<div className="tvbTooltip__timestamp">{ moment(item.datapoint[0]).format(this.props.dateFormat) }</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -170,7 +171,7 @@ class TimeseriesChart extends Component {
|
|||
onDraw: this.handleDraw,
|
||||
options: this.props.options,
|
||||
plothover: this.props.plothover,
|
||||
reversed: this.props.reversed,
|
||||
reversed: isBackgroundDark(this.props.backgroundColor),
|
||||
series: this.props.series,
|
||||
annotations: this.props.annotations,
|
||||
showGrid: this.props.showGrid,
|
||||
|
|
@ -181,10 +182,9 @@ class TimeseriesChart extends Component {
|
|||
};
|
||||
|
||||
const annotations = this.state.annotations.map(this.renderAnnotations);
|
||||
let axisLabelClass = 'tvbVisTimeSeries__axisLabel';
|
||||
if (this.props.reversed) {
|
||||
axisLabelClass += ' tvbVisTimeSeries__axisLabel--reversed';
|
||||
}
|
||||
const axisLabelClass = classNames('tvbVisTimeSeries__axisLabel', {
|
||||
'tvbVisTimeSeries__axisLabel--reversed': isBackgroundInverted(this.props.backgroundColor),
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref={(el) => this.container = el} className="tvbVisTimeSeries__container">
|
||||
|
|
@ -209,7 +209,7 @@ TimeseriesChart.propTypes = {
|
|||
onBrush: PropTypes.func,
|
||||
options: PropTypes.object,
|
||||
plothover: PropTypes.func,
|
||||
reversed: PropTypes.bool,
|
||||
backgroundColor: PropTypes.string,
|
||||
series: PropTypes.array,
|
||||
annotations: PropTypes.array,
|
||||
show: PropTypes.array,
|
||||
|
|
|
|||
|
|
@ -18,10 +18,9 @@
|
|||
*/
|
||||
|
||||
export default {
|
||||
lineColor: 'rgba(0,0,0,0.2)',
|
||||
lineColorReversed: 'rgba(255,255,255,0.4)',
|
||||
lineColor: 'rgba(105,112,125,0.2)',
|
||||
textColor: 'rgba(0,0,0,0.4)',
|
||||
textColorReversed: 'rgba(255,255,255,0.6)',
|
||||
textColorReversed: 'rgba(255,255,255,0.5)',
|
||||
valueColor: 'rgba(0,0,0,0.7)',
|
||||
valueColorReversed: 'rgba(255,255,255,0.8)'
|
||||
};
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ export default props => (row) => {
|
|||
onClick={event => props.onToggle(event, row.id)}
|
||||
className="tvbLegend__button"
|
||||
>
|
||||
<div className="tvbLegend__itemLabel" title={`${row.label}: ${value}`}>
|
||||
<EuiIcon type="dot" color={row.color} />
|
||||
<span className="tvbLegend__itemLabel" title={`${row.label}: ${value}`}>
|
||||
<EuiIcon size="m" type="dot" color={row.color} />
|
||||
<span>{ row.label }</span>
|
||||
</div>
|
||||
<div className="tvbLegend__itemValue">{ value }</div>
|
||||
</span>
|
||||
<span className="tvbLegend__itemValue">{ value }</span>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -16,5 +16,5 @@
|
|||
|
||||
.timApp__stats {
|
||||
font-weight: $euiFontWeightRegular;
|
||||
color: $euiColorMediumShade
|
||||
color: $euiColorMediumShade;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,5 @@
|
|||
}
|
||||
|
||||
.timExpressionInput {
|
||||
cursor: text !important;
|
||||
min-height: 70px; // Matches buttons on the right with new vertical rhythm sizing
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 2px dashed transparent;
|
||||
padding-left: 0px !important;
|
||||
padding-right: 0px !important;
|
||||
// sass-lint:disable-block no-important
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
margin-bottom: $euiSizeM;
|
||||
|
||||
&.active {
|
||||
|
|
@ -14,7 +15,7 @@
|
|||
}
|
||||
|
||||
.timCell.running {
|
||||
opacity: 0.50;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -33,7 +34,7 @@
|
|||
width: $euiSizeL;
|
||||
height: $euiSizeL;
|
||||
line-height: $euiSizeL;
|
||||
border-radius: $euiSizeL/2;
|
||||
border-radius: $euiSizeL / 2;
|
||||
border: $euiBorderThin;
|
||||
background-color: $euiColorLightestShade;
|
||||
z-index: $euiZLevel1;
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
}
|
||||
|
||||
.flot-tick-label {
|
||||
font-size: $euiFontSizeXS;
|
||||
color: $euiColorDarkShade;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.timSuggestions {
|
||||
@include euiBottomShadowMedium;
|
||||
background-color: $euiColorLightestShade;
|
||||
color: $euiTextColor;
|
||||
border: $euiBorderThin;
|
||||
border-radius: 0px 0px $euiBorderRadius $euiBorderRadius !important;
|
||||
// sass-lint:disable-block no-important
|
||||
border-radius: 0 0 $euiBorderRadius $euiBorderRadius !important;
|
||||
z-index: $euiZLevel9;
|
||||
max-height: $euiSizeXL * 10;
|
||||
overflow-y: auto;
|
||||
@include euiBottomShadowMedium;
|
||||
|
||||
&.timSuggestions-isPopover {
|
||||
position: absolute;
|
||||
|
|
@ -30,6 +31,6 @@
|
|||
border-radius: $euiBorderRadius;
|
||||
|
||||
> table {
|
||||
margin-bottom: 0px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,5 +20,6 @@
|
|||
*/
|
||||
.timHelp__functionsTableRow:hover,
|
||||
.timHelp__functionDetailsTable {
|
||||
// sass-lint:disable-block no-important
|
||||
background-color: $euiColorLightestShade !important; /* 1 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
><select
|
||||
id="timelionInterval"
|
||||
aria-label="{{ ::'timelion.intervals.selectIntervalAriaLabel' | i18n: { defaultMessage: 'Select interval' } }}"
|
||||
class="kuiSelect timInterval__presets"
|
||||
class="form-control timInterval__presets"
|
||||
ng-class="{ 'timInterval__presets--compact': interval === 'other'}"
|
||||
ng-model="interval"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ export default function timechartFn(Private, config, $rootScope, $compile) {
|
|||
autoHighlight: false
|
||||
},
|
||||
legend: {
|
||||
backgroundColor: null,
|
||||
backgroundColor: 'rgb(255,255,255,0)',
|
||||
position: 'nw',
|
||||
labelBoxBorderColor: 'rgb(255,255,255,0)',
|
||||
labelFormatter: function (label, series) {
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
}
|
||||
|
||||
.globalFilterGroup__filterBar {
|
||||
margin-top: $euiSizeM;
|
||||
margin-top: $euiSizeS;
|
||||
}
|
||||
|
||||
// sass-lint:disable quotes
|
||||
.globalFilterGroup__branch {
|
||||
padding: $euiSize $euiSize 0 $euiSizeS;
|
||||
padding: $euiSizeM $euiSizeM 0 0;
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-position: $euiSizeM ($euiSizeXS * -1);
|
||||
background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
|
|
@ -20,3 +20,11 @@
|
|||
overflow: hidden;
|
||||
transition: height $euiAnimSpeedNormal $euiAnimSlightResistance;
|
||||
}
|
||||
|
||||
@include euiBreakpoint('xs', 's') {
|
||||
.globalFilterGroup__wrapper-isVisible {
|
||||
// EUI Flexbox adds too much margin between responded items, this just moves it up
|
||||
margin-top: $euiSize * -1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,9 +34,18 @@ $kbnDefaultFontSize: 14px;
|
|||
$kbnMarkdownSizeXXS: canvasToEm(4px);
|
||||
|
||||
// Grayscale variables
|
||||
$kbnMarkdownAlphaLightestShade: rgba(0,0,0,.05);
|
||||
$kbnMarkdownAlphaLightShade: rgba(0,0,0,.15);
|
||||
$kbnMarkdownAlphaDarkShade: rgba(0,0,0,.65);
|
||||
$kbnMarkdownAlphaLightestShade: rgba($euiColorFullShade,.05);
|
||||
$kbnMarkdownAlphaLightShade: rgba($euiColorFullShade,.15);
|
||||
$kbnMarkdownAlphaDarkShade: rgba($euiColorFullShade,.65);
|
||||
|
||||
// Reverse grayscale for opposite of theme
|
||||
$kbnMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade,.05);
|
||||
$kbnMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade,.15);
|
||||
$kbnMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade,.65);
|
||||
|
||||
&--reversed {
|
||||
color: $euiColorLightestShade;
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
margin-top: 0 !important;
|
||||
|
|
@ -142,6 +151,9 @@ $kbnDefaultFontSize: 14px;
|
|||
padding: 0 1em;
|
||||
border-left: $kbnMarkdownSizeXXS solid $kbnMarkdownAlphaLightShade;
|
||||
}
|
||||
&--reversed blockquote {
|
||||
border-left-color: $kbnMarkdownAlphaLightShadeReversed;
|
||||
}
|
||||
|
||||
// 5. Horizontal rules
|
||||
hr {
|
||||
|
|
@ -153,6 +165,9 @@ $kbnDefaultFontSize: 14px;
|
|||
background-color: $kbnMarkdownAlphaLightShade;
|
||||
border: 0;
|
||||
}
|
||||
&--reversed hr {
|
||||
background-color: $kbnMarkdownAlphaLightShadeReversed;
|
||||
}
|
||||
|
||||
hr::before {
|
||||
display: table;
|
||||
|
|
@ -230,6 +245,9 @@ $kbnDefaultFontSize: 14px;
|
|||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
&--reversed table {
|
||||
border-left-color: $kbnMarkdownAlphaLightShadeReversed;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
|
|
@ -246,11 +264,18 @@ $kbnDefaultFontSize: 14px;
|
|||
border-right: 1px solid $kbnMarkdownAlphaLightShade;
|
||||
}
|
||||
}
|
||||
&--reversed table th,
|
||||
&--reversed table td {
|
||||
border-color: $kbnMarkdownAlphaLightShadeReversed;
|
||||
}
|
||||
|
||||
table tr {
|
||||
background-color: transparent;
|
||||
border-top: 1px solid $kbnMarkdownAlphaLightShade;
|
||||
}
|
||||
&--reversed table tr {
|
||||
border-top-color: $kbnMarkdownAlphaLightShadeReversed;
|
||||
}
|
||||
|
||||
// 8. Code blocks
|
||||
code,
|
||||
|
|
@ -266,6 +291,9 @@ $kbnDefaultFontSize: 14px;
|
|||
background-color: $kbnMarkdownAlphaLightestShade;
|
||||
border-radius: $kbnMarkdownSizeXXS;
|
||||
}
|
||||
&--reversed code {
|
||||
background-color: $kbnMarkdownAlphaLightestShadeReversed;
|
||||
}
|
||||
|
||||
code::before,
|
||||
code::after {
|
||||
|
|
@ -282,6 +310,9 @@ $kbnDefaultFontSize: 14px;
|
|||
border-radius: $kbnMarkdownSizeXXS;
|
||||
word-wrap: normal;
|
||||
}
|
||||
&--reversed pre {
|
||||
background-color: $kbnMarkdownAlphaLightestShadeReversed;
|
||||
}
|
||||
|
||||
pre code {
|
||||
display: inline;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
@include euiBreakpoint('xs', 's') {
|
||||
.kbnQueryBar--withDatePicker {
|
||||
> :last-child {
|
||||
// EUI Flexbox adds too much margin between responded items, this just moves the last one up
|
||||
margin-top: -$euiSize;
|
||||
> :first-child {
|
||||
// Change the order of the query bar and date picker so that the date picker is top and the query bar still aligns with filters
|
||||
order: 1;
|
||||
// EUI Flexbox adds too much margin between responded items, this just moves it up
|
||||
margin-top: $euiSizeS * -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,12 +44,12 @@ $kbnTypeaheadTypes: (
|
|||
}
|
||||
|
||||
.kbnTypeahead__item:last-child {
|
||||
border-bottom: 0px;
|
||||
border-bottom: none;
|
||||
border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
|
||||
}
|
||||
|
||||
.kbnTypeahead__item:first-child {
|
||||
border-bottom: 0px;
|
||||
border-bottom: none;
|
||||
border-radius: $euiBorderRadius $euiBorderRadius 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -82,7 +82,6 @@ $kbnTypeaheadTypes: (
|
|||
|
||||
.kbnSuggestionItem {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
font-size: $euiFontSizeXS;
|
||||
|
|
@ -109,7 +108,9 @@ $kbnTypeaheadTypes: (
|
|||
}
|
||||
}
|
||||
|
||||
.kbnSuggestionItem__text, .kbnSuggestionItem__type, .kbnSuggestionItem__description {
|
||||
.kbnSuggestionItem__text,
|
||||
.kbnSuggestionItem__type,
|
||||
.kbnSuggestionItem__description {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0%;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin kibana-resizer($size: ($euiSizeM + 2px), $direction: horizontal) {
|
||||
// Standardizes the look and layout of resizable area handles
|
||||
@mixin kbnResizer($size: ($euiSizeM + 2px), $direction: horizontal) {
|
||||
display: flex;
|
||||
flex: 0 0 $size;
|
||||
background-color: $euiPageBackgroundColor;
|
||||
|
|
@ -40,7 +41,7 @@
|
|||
height: $size;
|
||||
width: 100%;
|
||||
} @else {
|
||||
@warn("Direction unknown for kibana-resizer");
|
||||
@warn("Direction unknown for kbnResizer");
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
//## Customizes the `.table` component with basic values, each used across all table variations.
|
||||
|
||||
//** Background color used for `.table-striped`.
|
||||
@table-bg-accent: #F5F7FA;
|
||||
@table-bg-accent: @gray-lighter;
|
||||
//** Background color used for `.table-hover`.
|
||||
@table-bg-hover: @gray-lighter;
|
||||
//** Border color for table and cell borders.
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
*/
|
||||
|
||||
.visEditor__resizer {
|
||||
@include kibana-resizer($vis-editor-resizer-width);
|
||||
@include kbnResizer($vis-editor-resizer-width);
|
||||
|
||||
@include euiBreakpoint('xs', 's', 'm') {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// 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);
|
||||
$visLineColor: transparentize($euiColorDarkShade, .8);
|
||||
$visTextColor: $euiColorDarkShade;
|
||||
$visHoverBackgroundColor: transparentize($euiColorFullShade, .9);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
.visAlerts__tray {
|
||||
position: absolute;
|
||||
bottom: ($euiSizeXS+1px);
|
||||
bottom: ($euiSizeXS + 1px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
list-style: none;
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ export function VislibGridProvider() {
|
|||
|
||||
const defaults = {
|
||||
style: {
|
||||
color: '#eee'
|
||||
color: 'rgba(105,112,125,0.2)',
|
||||
},
|
||||
categoryLines: false,
|
||||
valueAxis: undefined,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
.visWrapper__column {
|
||||
display: flex;
|
||||
flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
min-width: 0;
|
||||
|
|
@ -51,8 +51,8 @@
|
|||
min-width: 0;
|
||||
|
||||
.visWrapper__chart {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,14 +64,14 @@
|
|||
min-width: 0;
|
||||
|
||||
.visWrapper__chart {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.visWrapper__chart {
|
||||
display: flex;
|
||||
flex: 1 0 0px;
|
||||
flex: 1 0 0;
|
||||
overflow: visible;
|
||||
margin: 5px;
|
||||
min-height: 0;
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
}
|
||||
|
||||
.visAxis__spacer--y {
|
||||
min-height: 0px;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.visAxis__column--y {
|
||||
|
|
@ -154,6 +154,8 @@
|
|||
// At least wrapping selectors inside .visWrapper will narrow scope.
|
||||
|
||||
|
||||
// sass-lint:disable-block no-mergeable-selectors
|
||||
// Keep SVG and non-renamable selectors separately
|
||||
.visWrapper {
|
||||
svg {
|
||||
overflow: visible;
|
||||
|
|
@ -164,7 +166,7 @@
|
|||
opacity: 1;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -174,10 +176,14 @@
|
|||
&:hover {
|
||||
opacity: 1;
|
||||
stroke-width: $euiSizeS;
|
||||
stroke-opacity: 0.8;
|
||||
stroke-opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
.grid > path {
|
||||
stroke: $visLineColor;
|
||||
}
|
||||
|
||||
.label-line {
|
||||
fill: none;
|
||||
stroke-width: 2px;
|
||||
|
|
@ -197,9 +203,9 @@
|
|||
}
|
||||
|
||||
.x-axis-div {
|
||||
min-height: 0px;
|
||||
min-height: 0;
|
||||
min-width: 1px;
|
||||
margin: 0px ($euiSizeXS + 1px);
|
||||
margin: 0 ($euiSizeXS + 1px);
|
||||
width: 100%;
|
||||
|
||||
svg {
|
||||
|
|
@ -209,7 +215,7 @@
|
|||
|
||||
.tick text {
|
||||
@include fontSize($euiFontSizeXS - 1px);
|
||||
fill: $visValueColor;
|
||||
fill: $visTextColor;
|
||||
}
|
||||
|
||||
.axis-title text {
|
||||
|
|
@ -259,20 +265,21 @@
|
|||
|
||||
// Needs to come after .y-axis-div
|
||||
.visWrapper__chart--first {
|
||||
margin-top: 0px;
|
||||
margin-left: 0px
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.visWrapper__chart--last {
|
||||
margin-bottom: 0px;
|
||||
margin-right: 0px;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.axis {
|
||||
shape-rendering: crispEdges;
|
||||
stroke-width: 1px;
|
||||
|
||||
line, path {
|
||||
line,
|
||||
path {
|
||||
stroke: $euiBorderColor;
|
||||
fill: none;
|
||||
shape-rendering: crispEdges;
|
||||
|
|
@ -282,7 +289,7 @@
|
|||
.chart-label,
|
||||
.label-text,
|
||||
.chart-text {
|
||||
fill: $visValueColor;
|
||||
fill: $visTextColor;
|
||||
}
|
||||
|
||||
/* Brush Styling */
|
||||
|
|
@ -292,26 +299,27 @@
|
|||
}
|
||||
|
||||
.visAreaChart__overlapArea {
|
||||
opacity: 0.8;
|
||||
opacity: .8;
|
||||
}
|
||||
|
||||
.series > path,
|
||||
.series > rect {
|
||||
fill-opacity: 0.8;
|
||||
fill-opacity: .8;
|
||||
stroke-opacity: 1;
|
||||
stroke-width: 0;
|
||||
}
|
||||
|
||||
.blur_shape {
|
||||
opacity: 0.3 !important;
|
||||
// sass-lint:disable-block no-important
|
||||
opacity: .3 !important;
|
||||
}
|
||||
|
||||
.slice {
|
||||
stroke-width: $euiSizeXS/2;
|
||||
stroke-width: $euiSizeXS / 2;
|
||||
stroke: $euiColorEmptyShade;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8
|
||||
opacity: .8;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -321,7 +329,7 @@
|
|||
|
||||
&:hover {
|
||||
stroke-width: $euiSizeS;
|
||||
stroke-opacity: 0.8;
|
||||
stroke-opacity: .8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
* that it disappears entirely.
|
||||
*/
|
||||
.visChart__container {
|
||||
@include euiScrollBar;
|
||||
min-height: 0;
|
||||
flex: 1 1 0; /* 1 */
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -249,7 +249,7 @@ export default function ({ getService, getPageObjects }) {
|
|||
});
|
||||
});
|
||||
|
||||
describe('dark mode', () => {
|
||||
describe.skip('dark mode', () => {
|
||||
it('uses dark mode flag', async () => {
|
||||
await kibanaServer.uiSettings.update({
|
||||
'theme:darkMode': true
|
||||
|
|
|
|||
|
|
@ -17,6 +17,10 @@
|
|||
refresh-interval="refreshConfig.interval"
|
||||
on-refresh-change="onRefreshChange"
|
||||
></query-bar>
|
||||
|
||||
<div class="eui-hideFor--xs eui-hideFor--s">
|
||||
<div class="euiSpacer euiSpacer--s"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue