[Lens] Adjust Lens Visualization Padding in Dashboards (#81911)
* reduce padding on lens visualizations in dashboard
* tweak padding and axes title colors to match lens
* remove faux padding (border) to match lens padding
* update snapshots
* Revert "update snapshots"
This reverts commit c63cf2bf1c
.
* update functional test baseline screenshot
This commit is contained in:
parent
0094f7ea8e
commit
2a38461817
|
@ -3,29 +3,23 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1 1 100%;
|
flex: 1 1 100%;
|
||||||
|
|
||||||
// border used in lieu of padding to prevent overlapping background-color
|
|
||||||
border-width: $euiSizeS;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent;
|
|
||||||
|
|
||||||
.tvbVisTimeSeries {
|
.tvbVisTimeSeries {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.tvbVisTimeSeriesDark {
|
.tvbVisTimeSeriesDark {
|
||||||
.echReactiveChart_unavailable {
|
.echReactiveChart_unavailable {
|
||||||
color: #DFE5EF;
|
color: #dfe5ef;
|
||||||
}
|
}
|
||||||
.echLegendItem {
|
.echLegendItem {
|
||||||
color: #DFE5EF;
|
color: #dfe5ef;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.tvbVisTimeSeriesLight {
|
.tvbVisTimeSeriesLight {
|
||||||
.echReactiveChart_unavailable {
|
.echReactiveChart_unavailable {
|
||||||
color: #343741;
|
color: #343741;
|
||||||
}
|
}
|
||||||
.echLegendItem {
|
.echLegendItem {
|
||||||
color: #343741;
|
color: #343741;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -19,7 +19,6 @@
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import reactCSS from 'reactcss';
|
|
||||||
|
|
||||||
import { startsWith, get, cloneDeep, map } from 'lodash';
|
import { startsWith, get, cloneDeep, map } from 'lodash';
|
||||||
import { htmlIdGenerator } from '@elastic/eui';
|
import { htmlIdGenerator } from '@elastic/eui';
|
||||||
|
@ -150,13 +149,6 @@ export class TimeseriesVisualization extends Component {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { model, visData, onBrush } = this.props;
|
const { model, visData, onBrush } = this.props;
|
||||||
const styles = reactCSS({
|
|
||||||
default: {
|
|
||||||
tvbVis: {
|
|
||||||
borderColor: get(model, 'background_color'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
const series = get(visData, `${model.id}.series`, []);
|
const series = get(visData, `${model.id}.series`, []);
|
||||||
const interval = getInterval(visData, model);
|
const interval = getInterval(visData, model);
|
||||||
const yAxisIdGenerator = htmlIdGenerator('yaxis');
|
const yAxisIdGenerator = htmlIdGenerator('yaxis');
|
||||||
|
@ -231,7 +223,7 @@ export class TimeseriesVisualization extends Component {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="tvbVis" style={styles.tvbVis}>
|
<div className="tvbVis">
|
||||||
<TimeSeries
|
<TimeSeries
|
||||||
series={series}
|
series={series}
|
||||||
yAxis={yAxis}
|
yAxis={yAxis}
|
||||||
|
|
|
@ -32,7 +32,7 @@
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
padding: ($euiSizeS + 2px) 0;
|
padding: $euiSizeS 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.visWrapper__column {
|
.visWrapper__column {
|
||||||
|
@ -142,7 +142,6 @@
|
||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
// STYLE
|
// STYLE
|
||||||
//
|
//
|
||||||
|
@ -153,7 +152,6 @@
|
||||||
// could it be easily found to apply to all chart types.
|
// could it be easily found to apply to all chart types.
|
||||||
// At least wrapping selectors inside .visWrapper will narrow scope.
|
// At least wrapping selectors inside .visWrapper will narrow scope.
|
||||||
|
|
||||||
|
|
||||||
// sass-lint:disable-block no-mergeable-selectors
|
// sass-lint:disable-block no-mergeable-selectors
|
||||||
// Keep SVG and non-renamable selectors separately
|
// Keep SVG and non-renamable selectors separately
|
||||||
.visWrapper {
|
.visWrapper {
|
||||||
|
@ -221,7 +219,7 @@
|
||||||
.axis-title text {
|
.axis-title text {
|
||||||
@include fontSize($euiFontSizeXS);
|
@include fontSize($euiFontSizeXS);
|
||||||
font-weight: $euiFontWeightBold;
|
font-weight: $euiFontWeightBold;
|
||||||
fill: $visTextColor;
|
fill: $euiTextColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.y-axis-title {
|
.y-axis-title {
|
||||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 120 KiB |
|
@ -50,7 +50,7 @@ export function ExpressionWrapper({
|
||||||
<div className="lnsExpressionRenderer">
|
<div className="lnsExpressionRenderer">
|
||||||
<ExpressionRendererComponent
|
<ExpressionRendererComponent
|
||||||
className="lnsExpressionRenderer__component"
|
className="lnsExpressionRenderer__component"
|
||||||
padding="m"
|
padding="s"
|
||||||
expression={expression}
|
expression={expression}
|
||||||
searchContext={searchContext}
|
searchContext={searchContext}
|
||||||
searchSessionId={searchSessionId}
|
searchSessionId={searchSessionId}
|
||||||
|
|
Loading…
Reference in a new issue