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

[Maps] EUI Visual Refresh Integration (#204434)

Browse source
This commit is contained in:
Catherine Liu 2025-01-23 14:41:40 -08:00 • committed by GitHub
parent 1a878daa4b
commit 849ec61b44
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 364 additions and 695 deletions
Download patch file Download diff file Expand all files Collapse all files

23
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/color/other_category_color_picker.tsx
View file

@ -6,19 +6,10 @@
*/
import React from 'react';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiFormRow, EuiToolTip } from '@elastic/eui';
import { EuiFormRow, EuiToolTip, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { MbValidatedColorPicker } from './mb_validated_color_picker';
import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../../style_util';
const OTHER_CATEGORY_SWATCHES = [
euiThemeVars.euiColorLightestShade,
euiThemeVars.euiColorLightShade,
euiThemeVars.euiColorMediumShade,
euiThemeVars.euiColorDarkShade,
euiThemeVars.euiColorDarkestShade,
];
import { OTHER_CATEGORY_DEFAULT_COLOR, OTHER_CATEGORY_LABEL } from '../../style_util';
interface Props {
onChange: (color: string) => void;
@ -26,6 +17,16 @@ interface Props {
}
export function OtherCategoryColorPicker(props: Props) {
const { euiTheme } = useEuiTheme();
const OTHER_CATEGORY_SWATCHES = [
euiTheme.colors.textInverse,
euiTheme.colors.textDisabled,
euiTheme.colors.textSubdued,
euiTheme.colors.textParagraph,
euiTheme.colors.textHeading,
];
return (
<EuiFormRow>
<EuiToolTip

901
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/__snapshots__/marker_size_legend.test.tsx.snap generated
View file

@ -38,123 +38,54 @@ exports[`Should invert legend 1`] = `
height={55}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="7"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={25}
circleCenterY={47}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={25}
x2={56.25}
y1={40}
y2={40}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={40}
formattedValue="19KB"
onWidthChange={[Function]}
radius={7}
textOffset={5}
textY={45}
/>
<MapMarker
circleCenterX={25}
circleCenterY={38.5}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="19KB"
x={61.25}
y={45}
/>
<circle
cx={25}
cy={47}
r={7}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
circleTopY={23}
formattedValue="14.25KB"
onWidthChange={[Function]}
radius={15.5}
textOffset={5}
textY={28}
/>
<MapMarker
circleCenterX={25}
circleCenterY={30}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
/>
</g>
<g
key="15.5"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={25}
x2={56.25}
y1={23}
y2={23}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="14.25KB"
x={61.25}
y={28}
/>
<circle
cx={25}
cy={38.5}
r={15.5}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="24"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={25}
x2={56.25}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="0KB"
x={61.25}
y={11}
/>
<circle
cx={25}
cy={30}
r={24}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="0KB"
onWidthChange={[Function]}
radius={24}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -197,201 +128,86 @@ exports[`Should render legend 1`] = `
height={71}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="7"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={33}
circleCenterY={63}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={33}
x2={74.25}
y1={56}
y2={56}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={56}
formattedValue="0KB"
onWidthChange={[Function]}
radius={7}
textOffset={5}
textY={61}
/>
<MapMarker
circleCenterX={33}
circleCenterY={56.75}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="0KB"
x={79.25}
y={61}
/>
<circle
cx={33}
cy={63}
r={7}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
circleTopY={43.5}
formattedValue="1.188KB"
onWidthChange={[Function]}
radius={13.25}
textOffset={5}
textY={48.5}
/>
<MapMarker
circleCenterX={33}
circleCenterY={50.5}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
/>
</g>
<g
key="13.25"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
circleTopY={31}
formattedValue="4.75KB"
onWidthChange={[Function]}
radius={19.5}
textOffset={5}
textY={36}
/>
<MapMarker
circleCenterX={33}
circleCenterY={44.25}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={33}
x2={74.25}
y1={43.5}
y2={43.5}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={18.5}
formattedValue="10.688KB"
onWidthChange={[Function]}
radius={25.75}
textOffset={5}
textY={23.5}
/>
<MapMarker
circleCenterX={33}
circleCenterY={38}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="1.188KB"
x={79.25}
y={48.5}
/>
<circle
cx={33}
cy={56.75}
r={13.25}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="19.5"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={33}
x2={74.25}
y1={31}
y2={31}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="4.75KB"
x={79.25}
y={36}
/>
<circle
cx={33}
cy={50.5}
r={19.5}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="25.75"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={33}
x2={74.25}
y1={18.5}
y2={18.5}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="10.688KB"
x={79.25}
y={23.5}
/>
<circle
cx={33}
cy={44.25}
r={25.75}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="32"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={33}
x2={74.25}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="19KB"
x={79.25}
y={11}
/>
<circle
cx={33}
cy={38}
r={32}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="19KB"
onWidthChange={[Function]}
radius={32}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -434,84 +250,38 @@ exports[`Should render legend with 2 markers when size difference does not provi
height={37}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="7"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={16}
circleCenterY={29}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={16}
x2={36}
y1={22}
y2={22}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={22}
formattedValue="0KB"
onWidthChange={[Function]}
radius={7}
textOffset={5}
textY={27}
/>
<MapMarker
circleCenterX={16}
circleCenterY={21}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="0KB"
x={41}
y={27}
/>
<circle
cx={16}
cy={29}
r={7}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="15"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={16}
x2={36}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="19KB"
x={41}
y={11}
/>
<circle
cx={16}
cy={21}
r={15}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="19KB"
onWidthChange={[Function]}
radius={15}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -554,123 +324,54 @@ exports[`Should render legend with 3 markers when size difference does not provi
height={55}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="7"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={25}
circleCenterY={47}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={25}
x2={56.25}
y1={40}
y2={40}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={40}
formattedValue="0KB"
onWidthChange={[Function]}
radius={7}
textOffset={5}
textY={45}
/>
<MapMarker
circleCenterX={25}
circleCenterY={38.5}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="0KB"
x={61.25}
y={45}
/>
<circle
cx={25}
cy={47}
r={7}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
circleTopY={23}
formattedValue="4.75KB"
onWidthChange={[Function]}
radius={15.5}
textOffset={5}
textY={28}
/>
<MapMarker
circleCenterX={25}
circleCenterY={30}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
/>
</g>
<g
key="15.5"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={25}
x2={56.25}
y1={23}
y2={23}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="4.75KB"
x={61.25}
y={28}
/>
<circle
cx={25}
cy={38.5}
r={15.5}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="24"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={25}
x2={56.25}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="19KB"
x={61.25}
y={11}
/>
<circle
cx={25}
cy={30}
r={24}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="19KB"
onWidthChange={[Function]}
radius={24}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -713,45 +414,22 @@ exports[`Should render legend with only max marker when size difference does not
height={29}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="11"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={12}
circleCenterY={17}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={12}
x2={27}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="19KB"
x={32}
y={11}
/>
<circle
cx={12}
cy={17}
r={11}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="19KB"
onWidthChange={[Function]}
radius={11}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -794,84 +472,38 @@ exports[`Should render legend without label cutoff when min size is 1 1`] = `
height={21}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="1"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={8}
circleCenterY={19}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={8}
x2={18}
y1={18}
y2={18}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
circleTopY={18}
formattedValue="0KB"
onWidthChange={[Function]}
radius={1}
textOffset={5}
textY={21}
/>
<MapMarker
circleCenterX={8}
circleCenterY={13}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
value="0KB"
x={23}
y={21}
/>
<circle
cx={8}
cy={19}
r={1}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
<g
key="7"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
}
x1={8}
x2={18}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="19KB"
x={23}
y={11}
/>
<circle
cx={8}
cy={13}
r={7}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="19KB"
onWidthChange={[Function]}
radius={7}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;
@ -914,45 +546,22 @@ exports[`Should render max label with std clamp notification 1`] = `
height={29}
xmlns="http://www.w3.org/2000/svg"
>
<g
key="11"
>
<line
style={
Object {
"stroke": "#d3dae6",
}
<MapMarker
circleCenterX={12}
circleCenterY={17}
circleStyle={
Object {
"fillOpacity": 0,
"strokeWidth": 1,
}
x1={12}
x2={27}
y1={6}
y2={6}
/>
<RightAlignedText
setWidth={[Function]}
style={
Object {
"fill": "#343741",
"fontSize": 10,
}
}
value="> 16KB"
x={32}
y={11}
/>
<circle
cx={12}
cy={17}
r={11}
style={
Object {
"fillOpacity": 0,
"stroke": "#343741",
"strokeWidth": 1,
}
}
/>
</g>
}
circleTopY={6}
formattedValue="> 16KB"
onWidthChange={[Function]}
radius={11}
textOffset={5}
textY={11}
/>
</svg>
</div>
`;

67
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/map_marker.tsx Normal file
View file

@ -0,0 +1,67 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import React, { FC, CSSProperties } from 'react';
import { useEuiTheme } from '@elastic/eui';
import { RightAlignedText } from '../right_aligned_text';
const FONT_SIZE = 10;
interface Props {
radius: number;
circleCenterX: number;
circleTopY: number;
textOffset: number;
textY: number;
formattedValue: string | number;
circleCenterY: number;
circleStyle: CSSProperties;
onWidthChange: (width: number) => void;
}
export const MapMarker: FC<Props> = ({
circleCenterX,
circleCenterY,
circleTopY,
formattedValue,
radius,
textOffset,
textY,
onWidthChange,
}) => {
const { euiTheme } = useEuiTheme();
const circleStyle = {
fillOpacity: 0,
stroke: euiTheme.colors.textParagraph,
strokeWidth: 1,
};
return (
<g key={radius}>
<line
style={{ stroke: euiTheme.border.color }}
x1={circleCenterX}
y1={circleTopY}
x2={circleCenterX * 2.25}
y2={circleTopY}
/>
<RightAlignedText
setWidth={onWidthChange}
style={{ fontSize: FONT_SIZE, fill: euiTheme.colors.textParagraph }}
x={circleCenterX * 2.25 + textOffset}
y={textY}
value={formattedValue}
/>
<circle
style={{ ...circleStyle, stroke: euiTheme.colors.textParagraph }}
cx={circleCenterX}
cy={circleCenterY}
r={radius}
/>
</g>
);
};

33
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/size/marker_size_legend.tsx
View file

@ -7,13 +7,12 @@
import React, { Component } from 'react';
import _ from 'lodash';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiFlexGroup, EuiFlexItem, EuiText, EuiToolTip } from '@elastic/eui';
import { RangeFieldMeta } from '../../../../../../../common/descriptor_types';
import { DynamicSizeProperty } from '../../../properties/dynamic_size_property';
import { RightAlignedText } from '../right_aligned_text';
import { getMaxLabel, getMinLabel } from './get_ordinal_label';
import { type Marker, MarkerList } from './marker_list';
import { MapMarker } from './map_marker';
const FONT_SIZE = 10;
const HALF_FONT_SIZE = FONT_SIZE / 2;
@ -96,7 +95,6 @@ export class MarkerSizeLegend extends Component<Props, State> {
const circleStyle = {
fillOpacity: 0,
stroke: euiThemeVars.euiTextColor,
strokeWidth: 1,
};
@ -110,25 +108,20 @@ export class MarkerSizeLegend extends Component<Props, State> {
const textOffset = this.state.maxLabelWidth + HALF_FONT_SIZE;
const rawTextY = circleTopY + HALF_FONT_SIZE;
const textY = rawTextY > svgHeight ? svgHeight : rawTextY;
return {
svg: (
<g key={radius}>
<line
style={{ stroke: euiThemeVars.euiBorderColor }}
x1={circleCenterX}
y1={circleTopY}
x2={circleCenterX * 2.25}
y2={circleTopY}
/>
<RightAlignedText
setWidth={this._onRightAlignedWidthChange}
style={{ fontSize: FONT_SIZE, fill: euiThemeVars.euiTextColor }}
x={circleCenterX * 2.25 + textOffset}
y={textY}
value={formattedValue}
/>
<circle style={circleStyle} cx={circleCenterX} cy={circleCenterY} r={radius} />
</g>
<MapMarker
circleCenterX={circleCenterX}
circleCenterY={circleCenterY}
circleTopY={circleTopY}
circleStyle={circleStyle}
radius={radius}
textOffset={textOffset}
textY={textY}
formattedValue={formattedValue}
onWidthChange={this._onRightAlignedWidthChange}
/>
),
textY,
};

9
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/components/legend/vector_style_legend.tsx
View file

@ -6,8 +6,7 @@
*/
import React from 'react';
import { EuiText } from '@elastic/eui';
import { euiThemeVars } from '@kbn/ui-theme';
import { EuiText, useEuiTheme } from '@elastic/eui';
import { StyleError } from './style_error';
import {
DynamicStyleProperty,
@ -36,6 +35,7 @@ export function VectorStyleLegend({
svg,
}: Props) {
const legendRows = [];
const { euiTheme } = useEuiTheme();
for (let i = 0; i < styles.length; i++) {
const styleMetaDataRequest = styles[i].isDynamic()
@ -89,10 +89,7 @@ export function VectorStyleLegend({
</EuiText>
<ul>
{masksByFieldOrigin.map((mask) => (
<li
key={mask.getEsAggField().getMbFieldName()}
style={{ marginLeft: euiThemeVars.euiSizeS }}
>
<li key={mask.getEsAggField().getMbFieldName()} style={{ marginLeft: euiTheme.size.s }}>
<MaskLegend
esAggField={mask.getEsAggField()}
onlyShowLabelAndValue={true}

11
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.test.tsx
View file

@ -26,6 +26,7 @@ import { mockField, MockLayer, MockStyle } from './test_helpers/test_util';
import { ColorDynamicOptions } from '../../../../../common/descriptor_types';
import { IVectorLayer } from '../../../layers/vector_layer';
import { IField } from '../../../fields/field';
import { OTHER_CATEGORY_DEFAULT_COLOR } from '../style_util';
const makeProperty = (options: ColorDynamicOptions, style?: MockStyle, field?: IField) => {
return new DynamicColorProperty(
@ -575,7 +576,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
fieldMetaOptions,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBe('#d3dae6');
expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
});
test('should return "other category" color when field name is not provided', async () => {
@ -586,7 +587,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
};
// @ts-expect-error - test is verifing behavior when field is invalid.
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBe('#d3dae6');
expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
});
describe('pre-defined color palette', () => {
@ -596,7 +597,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
fieldMetaOptions,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBe('#d3dae6');
expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
});
test('should return mapbox expression for color palette', async () => {
@ -627,7 +628,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
fieldMetaOptions,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBe('#d3dae6');
expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
});
test('should return "other category" color when customColorPalette is empty', async () => {
@ -638,7 +639,7 @@ describe('get mapbox color expression (via internal _getMbColor)', () => {
fieldMetaOptions,
};
const colorProperty = makeProperty(dynamicStyleOptions);
expect(colorProperty._getMbColor()).toBe('#d3dae6');
expect(colorProperty._getMbColor()).toBe(OTHER_CATEGORY_DEFAULT_COLOR);
});
test('should return mapbox expression for custom color palette', async () => {

8
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/properties/dynamic_color_property.tsx
View file

@ -10,7 +10,12 @@ import React from 'react';
import { EuiTextColor } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { DynamicStyleProperty, OTHER_CATEGORY_KEY } from './dynamic_style_property';
import { makeMbClampedNumberExpression, dynamicRound } from '../style_util';
import {
makeMbClampedNumberExpression,
dynamicRound,
OTHER_CATEGORY_DEFAULT_COLOR,
OTHER_CATEGORY_LABEL,
} from '../style_util';
import {
getOrdinalMbColorRampStops,
getPercentilesMbColorRampStops,
@ -23,7 +28,6 @@ import {
VECTOR_STYLES,
} from '../../../../../common/constants';
import { isCategoricalStopsInvalid } from '../components/color/color_stops_utils';
import { OTHER_CATEGORY_LABEL, OTHER_CATEGORY_DEFAULT_COLOR } from '../style_util';
import { Break, BreakedLegend } from '../components/legend/breaked_legend';
import { ColorDynamicOptions, OrdinalColorStop } from '../../../../../common/descriptor_types';
import { LegendProps } from './style_property';

3
x-pack/platform/plugins/shared/maps/public/classes/styles/vector/style_util.ts
View file

@ -5,7 +5,6 @@
* 2.0.
*/
import { euiThemeVars } from '@kbn/ui-theme';
import { i18n } from '@kbn/i18n';
import { ICON_SOURCE, MB_LOOKUP_FUNCTION, VECTOR_STYLES } from '../../../../common/constants';
import { Category } from '../../../../common/descriptor_types';
@ -19,7 +18,7 @@ export const OTHER_CATEGORY_LABEL = i18n.translate(
}
);
export const OTHER_CATEGORY_DEFAULT_COLOR = euiThemeVars.euiColorLightShade;
export const OTHER_CATEGORY_DEFAULT_COLOR = '#cad3e2'; // Defaulting to a light grey color that works in both dark and light mode
export function getComputedFieldName(styleName: VECTOR_STYLES, fieldName: string) {
return `${getComputedFieldNamePrefix(fieldName)}__${styleName as string}`;

3
x-pack/platform/plugins/shared/maps/public/reducers/map/default_map_settings.ts
View file

@ -5,14 +5,13 @@
* 2.0.
*/
import { euiThemeVars } from '@kbn/ui-theme';
import { INITIAL_LOCATION, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
import { MapSettings } from '../../../common/descriptor_types';
export function getDefaultMapSettings(): MapSettings {
return {
autoFitToDataBounds: false,
backgroundColor: euiThemeVars.euiColorEmptyShade,
backgroundColor: 'transparent',
customIcons: [],
disableInteractive: false,
disableTooltipControl: false,

1
x-pack/platform/plugins/shared/maps/tsconfig.json
View file

@ -54,7 +54,6 @@
"@kbn/mapbox-gl",
"@kbn/core-execution-context-common",
"@kbn/chart-icons",
"@kbn/ui-theme",
"@kbn/monaco",
"@kbn/safer-lodash-set",
"@kbn/custom-integrations-plugin",