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

[Lens] Use EUI Chart theme and other design fixes (#46658)

Browse source 
* Passing EUI theme to XY chart

* Remove legend if only single series

* Fix height of config link

* Remove clearing icon from field select

* Better scroll position in config panel

* Changed styles of popover editor operations list

* Reduce spacing between icon and text in no results found

* Manually import EUI Charts theme

… instead of using NP

* Add EUI Chart theme to field item

* Use `core` instead of `chrome` for field data

* Made “drop field here” clickable as well

* “Level of detail” to “Time interval”

* Update snap

* Remove `isHorizontal` from functional test

* Fix functional test
This commit is contained in:
Caroline Horn 2019-10-04 12:07:55 -04:00 • committed by Wylie Conlon
parent cc9876c1c0
commit 2ae7915810
13 changed files with 706 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_frame_layout.scss
View file

@ -42,8 +42,7 @@
@include euiScrollBar;
min-width: $lnsPanelMinWidth + $euiSize;
overflow-x: hidden;
overflow-y: auto;
overflow-y: scroll;
padding-top: $euiSize;
padding-right: $euiSize;
max-height: 100%;
}

3
x-pack/legacy/plugins/lens/public/editor_frame_plugin/editor_frame/_workspace_panel_wrapper.scss
View file

@ -10,7 +10,8 @@
.lnsWorkspacePanelWrapper__pageContentHeader {
padding: $euiSizeS;
border-bottom: $euiBorderThin;
margin-bottom: 0;
// override EuiPage
margin-bottom: 0 !important; // sass-lint:disable-line no-important
}
.lnsWorkspacePanelWrapper__pageContentBody {

4
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_dimension_panel.scss
View file

@ -1,9 +1,9 @@
.lnsIndexPatternDimensionPanel {
@include euiFontSizeS;
background: $euiColorEmptyShade;
background-color: $euiColorEmptyShade;
border-radius: $euiBorderRadius;
display: flex;
align-items: center;
margin-top: $euiSizeXS;
padding: $euiSizeS;
overflow: hidden;
}

18
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/_popover.scss
View file

@ -13,6 +13,8 @@
width: 100%;
display: flex;
align-items: center;
padding: $euiSizeS;
min-height: $euiSizeXXL;
}
.lnsPopoverEditor__left,
@ -22,7 +24,7 @@
.lnsPopoverEditor__left {
padding-top: 0;
background-color: $euiColorLightestShade;
background-color: $euiPageBackgroundColor;
}
.lnsPopoverEditor__right {
@ -30,14 +32,20 @@
}
.lnsPopoverEditor__operation {
padding: $euiSizeXS;
font-size: .875rem;
@include euiFontSizeS;
color: $euiColorPrimary;
// TODO: Fix in EUI or don't use EuiSideNav
.euiSideNavItemButton__label {
color: inherit;
}
}
.lnsPopoverEditor__operation--selected {
background-color: $euiColorLightShade;
font-weight: bold;
color: $euiTextColor;
}
.lnsPopoverEditor__operation--incompatible {
opacity: .7;
color: $euiColorMediumShade;
}

1
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/field_select.tsx
View file

@ -140,6 +140,7 @@ export function FieldSelect({
<EuiComboBox
fullWidth
compressed
isClearable={false}
data-test-subj="indexPattern-dimension-field"
placeholder={i18n.translate('xpack.lens.indexPattern.fieldPlaceholder', {
defaultMessage: 'Field',

11
x-pack/legacy/plugins/lens/public/indexpattern_plugin/dimension_panel/popover_editor.tsx
View file

@ -17,8 +17,7 @@ import {
EuiFormRow,
EuiFieldText,
EuiLink,
EuiButtonIcon,
EuiTextColor,
EuiButtonEmpty,
EuiSpacer,
} from '@elastic/eui';
import classNames from 'classnames';
@ -225,7 +224,7 @@ export function PopoverEditor(props: PopoverEditorProps) {
</EuiLink>
) : (
<>
<EuiButtonIcon
<EuiButtonEmpty
iconType="plusInCircleFilled"
data-test-subj="indexPattern-configure-dimension"
aria-label={i18n.translate('xpack.lens.configure.addConfig', {
@ -235,13 +234,13 @@ export function PopoverEditor(props: PopoverEditorProps) {
defaultMessage: 'Add a configuration',
})}
onClick={() => setPopoverOpen(!isPopoverOpen)}
/>{' '}
<EuiTextColor color="subdued">
size="xs"
>
<FormattedMessage
id="xpack.lens.configure.emptyConfig"
defaultMessage="Drop a field here"
/>
</EuiTextColor>
</EuiButtonEmpty>
</>
)
}

12
x-pack/legacy/plugins/lens/public/indexpattern_plugin/field_item.tsx
View file

@ -20,6 +20,7 @@ import {
EuiPopoverTitle,
EuiIconTip,
} from '@elastic/eui';
import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
import {
Chart,
Axis,
@ -210,6 +211,9 @@ export function FieldItem(props: FieldItemProps) {
function FieldItemPopoverContents(props: State & FieldItemProps) {
const { histogram, topValues, indexPattern, field, dateRange, core, sampledValues } = props;
const IS_DARK_THEME = core.uiSettings.get('theme:darkMode');
const chartTheme = IS_DARK_THEME ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
if (props.isLoading) {
return <EuiLoadingSpinner />;
} else if (
@ -371,7 +375,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
<Chart data-test-subj="lnsFieldListPanel-histogram" size={{ height: 200, width: 300 - 32 }}>
<Settings
tooltip={{ type: TooltipType.None }}
theme={{ chartMargins: { top: 0, bottom: 0, left: 0, right: 0 } }}
theme={chartTheme}
xDomain={
fromDate && toDate
? {
@ -409,11 +413,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
} else if (showingHistogram || !topValues || !topValues.buckets.length) {
return wrapInPopover(
<Chart data-test-subj="lnsFieldListPanel-histogram" size={{ height: 200, width: '100%' }}>
<Settings
rotation={90}
tooltip={{ type: TooltipType.None }}
theme={{ chartMargins: { top: 0, bottom: 0, left: 0, right: 0 } }}
/>
<Settings rotation={90} tooltip={{ type: TooltipType.None }} theme={chartTheme} />
<Axis
id={getAxisId('key')}

2
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.test.tsx
View file

@ -354,7 +354,7 @@ describe('date_histogram', () => {
expect(instance.find(EuiRange).prop('value')).toEqual(2);
});
it('should render disabled switch and no level of detail control for auto interval', () => {
it('should render disabled switch and no time intervals control for auto interval', () => {
const instance = shallow(
<InlineOptions
state={state}

6
x-pack/legacy/plugins/lens/public/indexpattern_plugin/operations/definitions/date_histogram.tsx
View file

@ -196,7 +196,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
<EuiFormRow>
<EuiSwitch
label={i18n.translate('xpack.lens.indexPattern.dateHistogram.autoInterval', {
defaultMessage: 'Customize level of detail',
defaultMessage: 'Customize time intervals',
})}
checked={currentColumn.params.interval !== autoInterval}
onChange={onChangeAutoInterval}
@ -206,7 +206,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
{currentColumn.params.interval !== autoInterval && (
<EuiFormRow
label={i18n.translate('xpack.lens.indexPattern.dateHistogram.interval', {
defaultMessage: 'Level of detail',
defaultMessage: 'Time intervals',
})}
>
{intervalIsRestricted ? (
@ -242,7 +242,7 @@ export const dateHistogramOperation: OperationDefinition<DateHistogramIndexPatte
)
}
aria-label={i18n.translate('xpack.lens.indexPattern.dateHistogram.interval', {
defaultMessage: 'Level of detail',
defaultMessage: 'Time intervals',
})}
/>
)}

651
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/__snapshots__/xy_expression.test.tsx.snap generated
View file

@ -9,6 +9,99 @@ exports[`xy_expression XYChart component it renders area 1`] = `
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -71,6 +164,99 @@ exports[`xy_expression XYChart component it renders bar 1`] = `
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -133,6 +319,99 @@ exports[`xy_expression XYChart component it renders horizontal bar 1`] = `
rotation={90}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -195,6 +474,99 @@ exports[`xy_expression XYChart component it renders line 1`] = `
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -257,6 +629,99 @@ exports[`xy_expression XYChart component it renders stacked area 1`] = `
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -323,6 +788,99 @@ exports[`xy_expression XYChart component it renders stacked bar 1`] = `
rotation={0}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"
@ -389,6 +947,99 @@ exports[`xy_expression XYChart component it renders stacked horizontal bar 1`] =
rotation={90}
showLegend={false}
showLegendDisplayValue={false}
theme={
Object {
"areaSeriesStyle": Object {
"area": Object {
"opacity": 0.3,
},
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
"visible": false,
},
},
"axes": Object {
"axisLineStyle": Object {
"stroke": "rgba(239, 241, 244, 1)",
},
"axisTitleStyle": Object {
"fill": "rgba(52, 55, 65, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 12,
"padding": 10,
},
"tickLabelStyle": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 10,
"padding": 8,
},
"tickLineStyle": Object {
"stroke": "rgba(0,0,0,0)",
"strokeWidth": 0,
},
},
"barSeriesStyle": Object {
"displayValue": Object {
"fill": "rgba(105, 112, 125, 1)",
"fontFamily": "'Inter UI', -apple-system, BlinkMacSystemFont,
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
"fontSize": 8,
},
},
"chartMargins": Object {
"bottom": 0,
"left": 0,
"right": 0,
"top": 0,
},
"colors": Object {
"defaultVizColor": "#3185FC",
"vizColors": Array [
"#1EA593",
"#2B70F7",
"#CE0060",
"#38007E",
"#FCA5D3",
"#F37020",
"#E49E29",
"#B0916F",
"#7B000B",
"#34130C",
],
},
"crosshair": Object {
"band": Object {
"fill": "rgba(245, 247, 250, 1)",
},
"line": Object {
"dash": Array [
4,
4,
],
"stroke": "rgba(105, 112, 125, 1)",
"strokeWidth": 1,
},
},
"lineSeriesStyle": Object {
"line": Object {
"strokeWidth": 2,
},
"point": Object {
"fill": "rgba(255, 255, 255, 1)",
"radius": 3,
"strokeWidth": 2,
},
},
}
}
/>
<inject-AxisSpec-with-chartStore
id="x"

17
x-pack/legacy/plugins/lens/public/xy_visualization_plugin/xy_expression.tsx
View file

@ -6,6 +6,7 @@
import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import chrome from 'ui/chrome';
import {
Chart,
Settings,
@ -19,9 +20,10 @@ import {
} from '@elastic/charts';
import { I18nProvider } from '@kbn/i18n/react';
import { ExpressionFunction } from 'src/legacy/core_plugins/interpreter/types';
import { EuiIcon, EuiText, IconType } from '@elastic/eui';
import { EuiIcon, EuiText, IconType, EuiSpacer } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';
import { i18n } from '@kbn/i18n';
import { EUI_CHARTS_THEME_DARK, EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
import { FormatFactory } from '../../../../../../src/legacy/ui/public/visualize/loader/pipeline_helpers/utilities';
import { IInterpreterRenderFunction } from '../../../../../../src/legacy/core_plugins/expressions/public';
import { LensMultiTable } from '../types';
@ -29,6 +31,9 @@ import { XYArgs, SeriesType, visualizationTypes } from './types';
import { VisualizationContainer } from '../visualization_container';
import { isHorizontalChart } from './state_helpers';
const IS_DARK_THEME = chrome.getUiSettingsClient().get('theme:darkMode');
const chartTheme = IS_DARK_THEME ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LIGHT.theme;
export interface XYChartProps {
data: LensMultiTable;
args: XYArgs;
@ -143,9 +148,8 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
const icon: IconType = layers.length > 0 ? getIconForSeriesType(layers[0].seriesType) : 'bar';
return (
<EuiText className="lnsChart__empty" textAlign="center" color="subdued" size="xs">
<p>
<EuiIcon type={icon} color="subdued" size="l" />
</p>
<EuiIcon type={icon} color="subdued" size="l" />
<EuiSpacer size="s" />
<p>
<FormattedMessage
id="xpack.lens.xyVisualization.noDataLabel"
@ -173,14 +177,17 @@ export function XYChart({ data, args, formatFactory, timeZone }: XYChartRenderPr
}
}
const chartHasMoreThanOneSeries =
layers.length > 1 || data.tables[layers[0].layerId].columns.length > 2;
const shouldRotate = isHorizontalChart(layers);
return (
<Chart>
<Settings
showLegend={legend.isVisible}
showLegend={legend.isVisible ? chartHasMoreThanOneSeries : legend.isVisible}
legendPosition={legend.position}
showLegendDisplayValue={false}
theme={chartTheme}
rotation={shouldRotate ? 90 : 0}
/>

13
x-pack/test/functional/apps/lens/smokescreen.ts
View file

@ -79,6 +79,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
dimension:
'[data-test-subj="lnsXY_xDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
operation: 'date_histogram',
field: '@timestamp',
});
await PageObjects.lens.configureDimension({
@ -88,6 +89,13 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
field: 'bytes',
});
await PageObjects.lens.configureDimension({
dimension:
'[data-test-subj="lnsXY_splitDimensionPanel"] [data-test-subj="indexPattern-configure-dimension"]',
operation: 'terms',
field: 'ip',
});
await PageObjects.lens.setTitle('Afancilenstest');
await PageObjects.lens.save();
@ -102,10 +110,7 @@ export default function({ getService, getPageObjects }: FtrProviderContext) {
// .echLegendItem__title is the only viable way of getting the xy chart's
// legend item(s), so we're using a class selector here.
await PageObjects.lens.assertExpectedText(
'.echLegendItem__title',
legendText => !!legendText && legendText.includes('Average of bytes')
);
expect(await find.allByCssSelector('.echLegendItem')).to.have.length(3);
});
});
}

BIN
x-pack/test/functional/es_archives/lens/reporting/data.json.gz
View file

Binary file not shown.