Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create vis_type_xy plugin to replace histogram, area and line charts #78154

Merged
merged 158 commits into from
Dec 18, 2020
Merged
Show file tree
Hide file tree
Changes from 117 commits
Commits
Show all changes
158 commits
Select commit Hold shift + click to select a range
49b95fc
refactor endzone, current time and interval logic into chart plugin
nickofthyme Sep 21, 2020
ab2dc84
refactor vislib editor components, collections and types to xy plugin
nickofthyme Sep 21, 2020
72bf93f
enable xy plugin and upgrade elastic charts
nickofthyme Sep 21, 2020
1ee0ccd
refactor build pipeline to move vislib expression into plugin
nickofthyme Sep 21, 2020
8132244
Update charts plugin
nickofthyme Sep 21, 2020
767067a
update vislib plugin setup with latest replacement vis types
nickofthyme Sep 21, 2020
7440a85
Add implementation for area, line and bar charts
nickofthyme Sep 21, 2020
41723e8
Add vis migration to add properties for vislib replacement
nickofthyme Sep 21, 2020
e89596b
update metrics axes tests with update position logic
nickofthyme Sep 21, 2020
fbba7e3
add detailedTooltip and fittingFunctions for xy plugin
nickofthyme Sep 22, 2020
b7b51d5
fix endzones for line and area charts and combined with bars
nickofthyme Sep 23, 2020
ce2ad79
show fitting function option when any line/area chart is enabled
nickofthyme Sep 23, 2020
e18757b
move vis_type_xy enable config to advanced setting
nickofthyme Sep 28, 2020
42eb7b9
refactor toExpresstion to use toExpressionAst
nickofthyme Sep 28, 2020
4255b8c
fix date range aggType to format on xAccessor not tickFormatter
nickofthyme Sep 30, 2020
99c9b45
fix default x axis label rotation
nickofthyme Sep 30, 2020
95527c0
update elastic charts
nickofthyme Oct 1, 2020
9c1cc1e
fix render count to update vis container
nickofthyme Oct 1, 2020
c88e285
refactor visualize functional tests, pageObjects and services
nickofthyme Oct 1, 2020
fc2a4b3
Update getting started functional tests
nickofthyme Oct 1, 2020
d89fac6
convert discover functional tests and pageObjects to typescript
nickofthyme Oct 1, 2020
4194315
convert functional tests, services and pageObjects to typescript
nickofthyme Oct 1, 2020
80b8e37
show option for values on chart only when bar chart exists
nickofthyme Oct 1, 2020
9f5842b
fix detailed tooltip header and styles
nickofthyme Oct 1, 2020
1312c27
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 1, 2020
64306bd
apply new vis types
nickofthyme Oct 1, 2020
56f65cc
fix tooltip visibility
nickofthyme Oct 1, 2020
650fe78
allow gridlines on histograms
nickofthyme Oct 1, 2020
1b4e826
update dashboard functional tests for newChartUi
nickofthyme Oct 1, 2020
48256a9
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 2, 2020
b6b6288
fix vis types and add default label rotation
nickofthyme Oct 2, 2020
3fb0754
add dimming advanced setting to new chart
nickofthyme Oct 2, 2020
1359f50
update kibana dev docs
nickofthyme Oct 2, 2020
2d204e5
fix new chart config toggle, disable in vislib
nickofthyme Oct 2, 2020
b6b8338
fix i18n errors
nickofthyme Oct 2, 2020
17fcf1b
fix jest tests and type errors
nickofthyme Oct 5, 2020
deb9bd4
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 5, 2020
d3e7bea
update jest screenshot
nickofthyme Oct 5, 2020
c256e77
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 6, 2020
b1675e4
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 7, 2020
be3133f
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 12, 2020
13e97dd
refactor vis_type_xy to use async expression renderer
nickofthyme Oct 13, 2020
d4e1ab3
refactor vis_type_vislib to use async expression renderer
nickofthyme Oct 14, 2020
614ba58
remove unused combined vis type
nickofthyme Oct 14, 2020
6b1f5ff
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 14, 2020
70edfad
fix chart type dom attribute
nickofthyme Oct 14, 2020
26f30f3
remove schemas from toExpressionAst function parameters
nickofthyme Oct 14, 2020
083d5a0
fix type errors and jest test errors
nickofthyme Oct 14, 2020
a0e91c9
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 16, 2020
f97d291
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 16, 2020
ddc9aac
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Oct 29, 2020
c257260
left over merge changes
nickofthyme Oct 29, 2020
25853ff
fix vis params defaults
nickofthyme Oct 30, 2020
c4e09fa
use existing vislib color funtion in xy plugin
nickofthyme Oct 30, 2020
1b91293
fix vislib vis migration logic
nickofthyme Oct 30, 2020
279e11b
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 2, 2020
05c11c7
revert changes to dashboard_page defaults
nickofthyme Nov 2, 2020
1e62b3d
fix type errors
nickofthyme Nov 2, 2020
c017095
update plugin limits
nickofthyme Nov 2, 2020
aa3c6ae
fix jest tests
nickofthyme Nov 2, 2020
09e3410
remove category axis label rotation defaults
nickofthyme Nov 2, 2020
1f27e0a
fix eui api change
nickofthyme Nov 2, 2020
e4ed382
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 3, 2020
048b8e0
fix discover error test
nickofthyme Nov 3, 2020
5d70de3
change newChartUi ci group
nickofthyme Nov 3, 2020
b809e82
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 3, 2020
21446ee
enable brushinig for only charts with interval param
nickofthyme Nov 3, 2020
3d86b3d
set ordinal scale type value based on format
nickofthyme Nov 3, 2020
f3fcf55
fix expected dates area
nickofthyme Nov 3, 2020
76683c7
Use EuiButtonIcon, misc CSS changes (#3)
Nov 5, 2020
125f9fd
update split chart warning
nickofthyme Nov 4, 2020
503c6da
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 5, 2020
a592650
fix merge issues with chart.colors service changes
nickofthyme Nov 5, 2020
70edc6b
fix comment issue and link gh issues
nickofthyme Nov 5, 2020
232369f
address pr comments on types, naming, logic and config
nickofthyme Nov 5, 2020
8558993
address new pr comments on types and lodash
nickofthyme Nov 5, 2020
2c4d351
add disable and tooltip to editor schema, update xy vis types
nickofthyme Nov 5, 2020
4a91edb
refactor split chart warning to callout, update wording
nickofthyme Nov 5, 2020
9f26fe1
fix bar value sizing and alignment
nickofthyme Nov 6, 2020
5a6383e
fix color picker
nickofthyme Nov 6, 2020
0a481de
wip color picker clearing
nickofthyme Nov 6, 2020
16a8cd6
fix i18n error
nickofthyme Nov 10, 2020
11cacef
fix more pr comments
nickofthyme Nov 11, 2020
50949a1
fix range agg chart errors
nickofthyme Nov 12, 2020
58a7ae8
fix non-stacking bar charts
nickofthyme Nov 12, 2020
1d25939
fix fill color for mark accessors
nickofthyme Nov 12, 2020
64385e6
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 14, 2020
d9667ca
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 16, 2020
cab7b10
remove unused vistype check
nickofthyme Nov 16, 2020
17fed8a
fix type check
nickofthyme Nov 16, 2020
eb93966
update plugin limit
nickofthyme Nov 16, 2020
4f9cd5c
fix split chart disabled for vislib charts
nickofthyme Nov 17, 2020
9286049
update line functional tests for split charts
nickofthyme Nov 17, 2020
5bd35de
fix failing functional tests
nickofthyme Nov 17, 2020
9753767
fix api integration tests
nickofthyme Nov 17, 2020
9ea0219
update chart library advanced setting
nickofthyme Nov 17, 2020
7469928
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 17, 2020
903e2d5
fix api test again
nickofthyme Nov 17, 2020
44f8ba0
fix i18n checks
nickofthyme Nov 17, 2020
5011c25
fix duplciate naming test issue
nickofthyme Nov 17, 2020
f44f76e
fix expected labels on split series tests
nickofthyme Nov 17, 2020
bfeaece
fix expected labels on split series tests - 2
nickofthyme Nov 17, 2020
5de8056
fix expected labels on split series tests - 3
nickofthyme Nov 17, 2020
62815a8
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 18, 2020
c683cc7
update text copy in docs
nickofthyme Nov 18, 2020
8cb658d
default to detailed tooltip for new xy charts
nickofthyme Nov 18, 2020
7362f93
update sample data saved objects with migration changes
nickofthyme Nov 18, 2020
dba184b
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 18, 2020
2d3360b
fix plugin docs error
nickofthyme Nov 18, 2020
49535bd
fix endzones for multiple non-stacked bars
nickofthyme Nov 20, 2020
fe63fd9
fix linting issues and minor cleanup
nickofthyme Nov 20, 2020
4ba0e68
hide unassigned axis on chart
nickofthyme Nov 20, 2020
628e051
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 20, 2020
67fd680
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 23, 2020
ff11193
fix linting issues
nickofthyme Nov 23, 2020
0210e16
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 23, 2020
0f3f81a
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 24, 2020
e4bf1a0
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 24, 2020
c68b234
fix stacked and non-stacked bars
nickofthyme Nov 25, 2020
c037826
improve bundle sizes (#4)
flash1293 Nov 25, 2020
293e426
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 25, 2020
5a00028
fix collection imports
nickofthyme Nov 25, 2020
46c1671
fix tsvb axis grouping
nickofthyme Nov 25, 2020
74550ce
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 30, 2020
8dfe963
update fit function defaults
nickofthyme Nov 30, 2020
c965e8e
fix color picker clear logic
nickofthyme Nov 30, 2020
ae25ef7
fix metrics external link
nickofthyme Nov 30, 2020
de2d04a
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 30, 2020
f6b23be
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Nov 30, 2020
7b65ea0
fix uiState sync updates
nickofthyme Nov 30, 2020
f7e2fc6
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 1, 2020
657ecb1
refactor formatters to fallback to '(empty)' value for all '' values
nickofthyme Dec 1, 2020
9cffe34
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 1, 2020
2aea4f4
fix ci module error
nickofthyme Dec 1, 2020
0b88d65
update time chart functional tests labels
nickofthyme Dec 1, 2020
b56f8e4
config integer only axis ticks for count aggregations
nickofthyme Dec 2, 2020
a333f22
filter duplicate values when multiple geoms are highlighted
nickofthyme Dec 4, 2020
80f4479
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 4, 2020
c39e844
fix error related to ranges
nickofthyme Dec 4, 2020
dece4aa
fix functional test failure
nickofthyme Dec 5, 2020
024203e
add jest config to xy plugin
nickofthyme Dec 7, 2020
719273b
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 7, 2020
bbcce8c
fix jest config roots
nickofthyme Dec 7, 2020
d815ac3
Update endzone message
nickofthyme Dec 8, 2020
75fc44f
fix color picker clearing issues
nickofthyme Dec 9, 2020
f42c4fd
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 10, 2020
2e637ae
assert correct visible labels on functional tests
nickofthyme Dec 10, 2020
b85ab2c
Merge remote-tracking branch 'origin/vislib-replacement-pt-1' into vi…
nickofthyme Dec 16, 2020
59bc795
Fix scrolling bug when the legend has big height (#5)
stratoula Dec 16, 2020
29a216f
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 16, 2020
1e750f0
remove changed translation string
nickofthyme Dec 16, 2020
57ed86d
fix type error in functional tests
nickofthyme Dec 16, 2020
8e7b5d0
Allow functional accessors (range) accessors on split series
nickofthyme Dec 17, 2020
9ef8717
add value to filterBucket event data
nickofthyme Dec 17, 2020
8f9b440
fix stacked/normal area/line series groupings
nickofthyme Dec 17, 2020
6417be1
fix minInterval error on date histogram values
nickofthyme Dec 17, 2020
30c2d13
Merge branch 'master' into vislib-replacement-pt-1
nickofthyme Dec 17, 2020
03e93de
fix title padding and chart margins
nickofthyme Dec 17, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/developer/plugin-list.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,7 @@ heatmap charts.

|{kib-repo}blob/{branch}/src/plugins/vis_type_xy/README.md[visTypeXy]
|Contains the new xy-axis chart using the elastic-charts library, which will eventually
replace the vislib xy-axis (bar, area, line) charts.
replace the vislib xy-axis charts including bar, area, and line.


|{kib-repo}blob/{branch}/src/plugins/visualizations/README.md[visualizations]
Expand Down
3 changes: 3 additions & 0 deletions docs/management/advanced-options.asciidoc
Original file line number Diff line number Diff line change
Expand Up @@ -453,6 +453,9 @@ of buckets to try to represent.
==== Visualization

[horizontal]
[[visualization-visualize-chartslibrary]]`visualization:visualize:chartsLibrary`::
Enables the new charts library for area, line, and bar charts in visualization panels. Does *not* support the split chart aggregation.

[[visualization-colormapping]]`visualization:colorMapping`::
**This setting is deprecated and will not be supported as of 8.0.**
Maps values to specific colors in *Visualize* charts and *TSVB*. This setting does not apply to *Lens*.
Expand Down
4 changes: 2 additions & 2 deletions packages/kbn-optimizer/limits.yml
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ pageLoadAssetSize:
beatsManagement: 188135
bfetch: 41874
canvas: 1066647
charts: 159211
charts: 195358
cloud: 21076
console: 46091
core: 692106
Expand Down Expand Up @@ -98,7 +98,7 @@ pageLoadAssetSize:
visTypeTimeseries: 155203
visTypeVega: 153573
visTypeVislib: 242838
visTypeXy: 20255
visTypeXy: 113478
visualizations: 295025
visualize: 57431
watcher: 43598
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,14 +62,17 @@ describe('Vislib Color Service', () => {

it('should throw an error if input is not an array', () => {
expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(200);
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction('help');
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(true);
}).toThrowError();

Expand All @@ -78,25 +81,30 @@ describe('Vislib Color Service', () => {
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(nullValue);
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(emptyObject);
}).toThrowError();
});

describe('when array is not composed of numbers, strings, or undefined values', () => {
it('should throw an error', () => {
expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(arrayOfObjects);
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(arrayOfBooleans);
}).toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(arrayOfNullValues);
}).toThrowError();
});
Expand All @@ -113,6 +121,7 @@ describe('Vislib Color Service', () => {
}).not.toThrowError();

expect(() => {
// @ts-expect-error
colors.createColorLookupFunction(arrayOfUndefinedValues);
}).not.toThrowError();
});
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/charts/public/services/legacy_colors/colors.ts
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export class LegacyColorsService {
}

createColorLookupFunction(
arrayOfStringsOrNumbers?: any,
arrayOfStringsOrNumbers?: Array<string | number>,
colorMapping: Partial<Record<string, string>> = {}
) {
if (!Array.isArray(arrayOfStringsOrNumbers)) {
Expand All @@ -67,7 +67,7 @@ export class LegacyColorsService {

this.mappedColors.mapKeys(arrayOfStringsOrNumbers);

return (value: string) => {
return (value: string | number) => {
return colorMapping[value] || this.mappedColors.get(value);
};
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@
*/

import React from 'react';

import { i18n } from '@kbn/i18n';

import { VisOptionsProps } from 'src/plugins/vis_default_editor/public';
import { VisOptionsProps } from '../../../../vis_default_editor/public';

import { SwitchOption } from './switch';
import { SelectOption } from './select';

Expand Down
25 changes: 15 additions & 10 deletions src/plugins/charts/public/static/components/collections.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,22 @@
*/

import { $Values } from '@kbn/utility-types';
import { i18n } from '@kbn/i18n';

export const ColorModes = Object.freeze({
BACKGROUND: 'Background' as 'Background',
LABELS: 'Labels' as 'Labels',
NONE: 'None' as 'None',
export const ColorMode = Object.freeze({
Background: 'Background' as 'Background',
Labels: 'Labels' as 'Labels',
None: 'None' as 'None',
});
export type ColorModes = $Values<typeof ColorModes>;
export type ColorMode = $Values<typeof ColorMode>;

export const Rotates = Object.freeze({
HORIZONTAL: 0,
VERTICAL: 90,
ANGLED: 75,
export const LabelRotation = Object.freeze({
Horizontal: 0,
Vertical: 90,
Angled: 75,
});
export type LabelRotation = $Values<typeof LabelRotation>;

export const defaultCountLabel = i18n.translate('charts.countText', {
defaultMessage: 'Count',
});
export type Rotates = $Values<typeof Rotates>;
18 changes: 18 additions & 0 deletions src/plugins/charts/public/static/components/color_picker.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
$visColorPickerWidth: $euiSizeL * 8; // 8 columns

.visColorPicker__value {
width: $visColorPickerWidth;
}

.visColorPicker__valueDot {
cursor: pointer;

&:hover {
transform: scale(1.4);
}

&-isSelected {
border: $euiSizeXS solid;
border-radius: 100%;
}
}
138 changes: 138 additions & 0 deletions src/plugins/charts/public/static/components/color_picker.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
/*
* 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 classNames from 'classnames';
import React, { BaseSyntheticEvent } from 'react';

import { EuiButtonEmpty, EuiFlexItem, EuiIcon } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n/react';

import './color_picker.scss';

export const legendColors: string[] = [
'#3F6833',
'#967302',
'#2F575E',
'#99440A',
'#58140C',
'#052B51',
'#511749',
'#3F2B5B',
'#508642',
'#CCA300',
'#447EBC',
'#C15C17',
'#890F02',
'#0A437C',
'#6D1F62',
'#584477',
'#629E51',
'#E5AC0E',
'#64B0C8',
'#E0752D',
'#BF1B00',
'#0A50A1',
'#962D82',
'#614D93',
'#7EB26D',
'#EAB839',
'#6ED0E0',
'#EF843C',
'#E24D42',
'#1F78C1',
'#BA43A9',
'#705DA0',
'#9AC48A',
'#F2C96D',
'#65C5DB',
'#F9934E',
'#EA6460',
'#5195CE',
'#D683CE',
'#806EB7',
'#B7DBAB',
'#F4D598',
'#70DBED',
'#F9BA8F',
'#F29191',
'#82B5D8',
'#E5A8E2',
'#AEA2E0',
'#E0F9D7',
'#FCEACA',
'#CFFAFF',
'#F9E2D2',
'#FCE2DE',
'#BADFF4',
'#F9D9F9',
'#DEDAF7',
];

interface ColorPickerProps {
id?: string;
label: string | number | null;
onChange: (color: string | null, event: BaseSyntheticEvent) => void;
color: string;
}

export const ColorPicker = ({ onChange, color: selectedColor, id, label }: ColorPickerProps) => (
<div className="visColorPicker">
<span id={`${id}ColorPickerDesc`} className="euiScreenReaderOnly">
<FormattedMessage
id="charts.colorPicker.setColor.screenReaderDescription"
defaultMessage="Set color for value {legendDataLabel}"
values={{ legendDataLabel: label }}
/>
</span>
<div className="visColorPicker__value" role="listbox">
{legendColors.map((color) => (
<EuiIcon
role="option"
tabIndex={0}
type="dot"
size="l"
color={selectedColor}
key={color}
aria-label={color}
aria-describedby={`${id}ColorPickerDesc`}
aria-selected={color === selectedColor}
onClick={(e) => onChange(color, e)}
onKeyPress={(e) => onChange(color, e)}
className={classNames('visColorPicker__valueDot', {
// eslint-disable-next-line @typescript-eslint/naming-convention
'visColorPicker__valueDot-isSelected': color === selectedColor,
})}
style={{ color }}
data-test-subj={`visColorPickerColor-${color}`}
/>
))}
</div>
{legendColors.some((c) => c === selectedColor) && (
<EuiFlexItem grow={false}>
<EuiButtonEmpty
size="s"
onClick={(e: any) => onChange(null, e)}
onKeyPress={(e: any) => onChange(null, e)}
>
<FormattedMessage id="charts.colorPicker.clearColor" defaultMessage="Clear color" />
</EuiButtonEmpty>
</EuiFlexItem>
)}
</div>
);
64 changes: 64 additions & 0 deletions src/plugins/charts/public/static/components/current_time.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
/*
* 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 moment, { Moment } from 'moment';
import React, { FC } from 'react';

import { LineAnnotation, AnnotationDomainTypes, LineAnnotationStyle } from '@elastic/charts';
import lightEuiTheme from '@elastic/eui/dist/eui_theme_light.json';
import darkEuiTheme from '@elastic/eui/dist/eui_theme_dark.json';

interface CurrentTimeProps {
isDarkMode: boolean;
domainEnd?: number | Moment;
}

/**
* Render current time line annotation on @elastic/charts `Chart`
*/
export const CurrentTime: FC<CurrentTimeProps> = ({ isDarkMode, domainEnd }) => {
const lineAnnotationStyle: Partial<LineAnnotationStyle> = {
line: {
strokeWidth: 2,
stroke: isDarkMode ? darkEuiTheme.euiColorDanger : lightEuiTheme.euiColorDanger,
opacity: 0.7,
},
};

// Domain end of 'now' will be milliseconds behind current time, so we extend time by 1 minute and check if
// the annotation is within this range; if so, the line annotation uses the domainEnd as its value
const now = moment();
const isAnnotationAtEdge = domainEnd
? moment(domainEnd).add(1, 'm').isAfter(now) && now.isAfter(domainEnd)
: false;
const lineAnnotationData = [
{
dataValue: isAnnotationAtEdge ? domainEnd : now.valueOf(),
},
];

return (
<LineAnnotation
id="__current-time__"
hideTooltips
domainType={AnnotationDomainTypes.XDomain}
dataValues={lineAnnotationData}
style={lineAnnotationStyle}
/>
);
};
Loading