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

[8.9] Update dependency @elastic/charts to v58 (main) (#159082) (#160560)

Browse source 
# Backport

This will backport the following commits from `main` to `8.9`:
- [Update dependency @elastic/charts to v58 (main)
(#159082)](https://github.com/elastic/kibana/pull/159082)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"renovate[bot]","email":"29139614+renovate[bot]@users.noreply.github.com"},"sourceCommit":{"committedDate":"2023-06-26T18:41:49Z","message":"Update
dependency @elastic/charts to v58 (main)
(#159082)\n\n[![Mend\r\nRenovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)\r\n\r\nThis
PR contains the following updates:\r\n\r\n| Package | Change | Age |
Adoption | Passing | Confidence |\r\n|---|---|---|---|---|---|\r\n|
[@elastic/charts](https://togithub.com/elastic/elastic-charts)
|\r\n[`57.0.1`
->\r\n`58.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/57.0.1/58.2.0)\r\n|\r\n[![age](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/age-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![adoption](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![passing](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/compatibility-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![confidence](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/confidence-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n\r\n---\r\n\r\n###
Release
Notes\r\n\r\n<details>\r\n<summary>elastic/elastic-charts</summary>\r\n\r\n#\r\n[58.2.0](https://github.com/elastic/elastic-charts/compare/v58.1.0...v58.2.0)\r\n(2023-06-23)\r\n\r\n\r\n###
Bug Fixes\r\n\r\n* `Chart` component `children`
type\r\n([#2071](525c782829))\r\n*
**deps:** update dependency @elastic/eui to
v82\r\n([#2074](69a655f0da))\r\n\r\n\r\n###
Features\r\n\r\n* **flame:** expose search field text and search text
change
listener\r\n([#2068](c339947c39))\r\n*
support native chart title and
description\r\n([#2002](341a990c5d))\r\n\r\n#\r\n[58.1.0](https://github.com/elastic/elastic-charts/compare/v58.0.0...v58.1.0)\r\n(2023-06-08)\r\n\r\n\r\n###
Features\r\n\r\n* **flame:** expose search
control\r\n([#2064](011b56b3f5))\r\n\r\n#\r\n[58.0.0](https://github.com/elastic/elastic-charts/compare/v57.0.1...v58.0.0)\r\n(2023-06-06)\r\n\r\n\r\n###
Bug Fixes\r\n\r\n* **axis:** reduce number of y axis ticks on linear
scale\r\n([#2005](0ef828b535))\r\n*
**deps:** update dependency @elastic/eui to
v81\r\n([#2052](4c55e0119e))\r\n\r\n\r\n###
BREAKING CHANGES\r\n\r\n* **axis:** the default number of desired ticks
in the Y-Axis was\r\nchanged from `10` to
`5`\r\n\r\n</details>\r\n\r\n---\r\n\r\n### Configuration\r\n\r\n📅
**Schedule**: Branch creation - At any time (no schedule
defined),\r\nAutomerge - At any time (no schedule defined).\r\n\r\n🚦
**Automerge**: Disabled by config. Please merge this manually once
you\r\nare satisfied.\r\n\r\n♻ **Rebasing**: Whenever PR becomes
conflicted, or you tick the\r\nrebase/retry checkbox.\r\n\r\n🔕
**Ignore**: Close this PR and you won't be reminded about this
update\r\nagain.\r\n\r\n---\r\n\r\n- [ ] <!-- rebase-check -->If you
want to rebase/retry this PR, check\r\nthis box\r\n\r\n---\r\n\r\nThis
PR has been generated by
[Mend\r\nRenovate](https://www.mend.io/free-developer-tools/renovate/).
View\r\nrepository job
log\r\n[here](https://app.renovatebot.com/dashboard#github/elastic/kibana).\r\n\r\n<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4xMTAuMCIsInVwZGF0ZWRJblZlciI6IjM1LjExMC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->\r\n\r\n---------\r\n\r\nCo-authored-by:
renovate[bot]
<29139614+renovate[bot]@users.noreply.github.com>\r\nCo-authored-by:
nickofthyme <nicholas.partridge@elastic.co>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Nick Partridge <nick.ryan.partridge@gmail.com>\r\nCo-authored-by: Marco
Vettorello
<marco.vettorello@elastic.co>","sha":"b2c6c71a8db689b5dbf7ee1017071732e09afc18","branchLabelMapping":{"^v8.10.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:APM","Team:Visualizations","Team:uptime","release_note:skip","auto-backport","apm:cypress-record","v8.9.0"],"number":159082,"url":"https://github.com/elastic/kibana/pull/159082","mergeCommit":{"message":"Update
dependency @elastic/charts to v58 (main)
(#159082)\n\n[![Mend\r\nRenovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)\r\n\r\nThis
PR contains the following updates:\r\n\r\n| Package | Change | Age |
Adoption | Passing | Confidence |\r\n|---|---|---|---|---|---|\r\n|
[@elastic/charts](https://togithub.com/elastic/elastic-charts)
|\r\n[`57.0.1`
->\r\n`58.2.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/57.0.1/58.2.0)\r\n|\r\n[![age](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/age-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![adoption](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/adoption-slim)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![passing](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/compatibility-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n[![confidence](https://badges.renovateapi.com/packages/npm/@elastic%2fcharts/58.2.0/confidence-slim/57.0.1)](https://docs.renovatebot.com/merge-confidence/)\r\n|\r\n\r\n---\r\n\r\n###
Release
Notes\r\n\r\n<details>\r\n<summary>elastic/elastic-charts</summary>\r\n\r\n#\r\n[58.2.0](https://github.com/elastic/elastic-charts/compare/v58.1.0...v58.2.0)\r\n(2023-06-23)\r\n\r\n\r\n###
Bug Fixes\r\n\r\n* `Chart` component `children`
type\r\n([#2071](525c782829))\r\n*
**deps:** update dependency @elastic/eui to
v82\r\n([#2074](69a655f0da))\r\n\r\n\r\n###
Features\r\n\r\n* **flame:** expose search field text and search text
change
listener\r\n([#2068](c339947c39))\r\n*
support native chart title and
description\r\n([#2002](341a990c5d))\r\n\r\n#\r\n[58.1.0](https://github.com/elastic/elastic-charts/compare/v58.0.0...v58.1.0)\r\n(2023-06-08)\r\n\r\n\r\n###
Features\r\n\r\n* **flame:** expose search
control\r\n([#2064](011b56b3f5))\r\n\r\n#\r\n[58.0.0](https://github.com/elastic/elastic-charts/compare/v57.0.1...v58.0.0)\r\n(2023-06-06)\r\n\r\n\r\n###
Bug Fixes\r\n\r\n* **axis:** reduce number of y axis ticks on linear
scale\r\n([#2005](0ef828b535))\r\n*
**deps:** update dependency @elastic/eui to
v81\r\n([#2052](4c55e0119e))\r\n\r\n\r\n###
BREAKING CHANGES\r\n\r\n* **axis:** the default number of desired ticks
in the Y-Axis was\r\nchanged from `10` to
`5`\r\n\r\n</details>\r\n\r\n---\r\n\r\n### Configuration\r\n\r\n📅
**Schedule**: Branch creation - At any time (no schedule
defined),\r\nAutomerge - At any time (no schedule defined).\r\n\r\n🚦
**Automerge**: Disabled by config. Please merge this manually once
you\r\nare satisfied.\r\n\r\n♻ **Rebasing**: Whenever PR becomes
conflicted, or you tick the\r\nrebase/retry checkbox.\r\n\r\n🔕
**Ignore**: Close this PR and you won't be reminded about this
update\r\nagain.\r\n\r\n---\r\n\r\n- [ ] <!-- rebase-check -->If you
want to rebase/retry this PR, check\r\nthis box\r\n\r\n---\r\n\r\nThis
PR has been generated by
[Mend\r\nRenovate](https://www.mend.io/free-developer-tools/renovate/).
View\r\nrepository job
log\r\n[here](https://app.renovatebot.com/dashboard#github/elastic/kibana).\r\n\r\n<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNS4xMTAuMCIsInVwZGF0ZWRJblZlciI6IjM1LjExMC4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->\r\n\r\n---------\r\n\r\nCo-authored-by:
renovate[bot]
<29139614+renovate[bot]@users.noreply.github.com>\r\nCo-authored-by:
nickofthyme <nicholas.partridge@elastic.co>\r\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Nick Partridge <nick.ryan.partridge@gmail.com>\r\nCo-authored-by: Marco
Vettorello
<marco.vettorello@elastic.co>","sha":"b2c6c71a8db689b5dbf7ee1017071732e09afc18"}},"sourceBranch":"main","suggestedTargetBranches":["8.9"],"targetPullRequestStates":[{"branch":"8.9","label":"v8.9.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2023-06-26 16:42:31 -04:00 • committed by GitHub
parent 8980aa9d03
commit a0c8ee77a0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
98 changed files with 719 additions and 662 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -94,7 +94,7 @@
"@dnd-kit/utilities": "^2.0.0",
"@elastic/apm-rum": "^5.12.0",
"@elastic/apm-rum-react": "^1.4.2",
"@elastic/charts": "57.0.1",
"@elastic/charts": "58.2.0",
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.8.0-canary.2",
"@elastic/ems-client": "8.4.0",

5
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.test.tsx
View file

@ -13,6 +13,7 @@ import {
Heatmap,
GeometryValue,
XYChartSeriesIdentifier,
Tooltip,
} from '@elastic/charts';
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
import { EmptyPlaceholder } from '@kbn/charts-plugin/public';
@ -287,7 +288,7 @@ describe('HeatmapComponent', function () {
it('defaults on displaying the tooltip', () => {
const component = shallowWithIntl(<HeatmapComponent {...wrapperProps} />);
expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.Follow });
expect(component.find(Tooltip).prop('type')).toBe(TooltipType.Follow);
});
it('hides the legend if the showTooltip is false', async () => {
@ -296,7 +297,7 @@ describe('HeatmapComponent', function () {
args: { ...wrapperProps.args, showTooltip: false },
} as unknown as HeatmapRenderProps;
const component = mountWithIntl(<HeatmapComponent {...newProps} />);
expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.None });
expect(component.find(Tooltip).prop('type')).toBe(TooltipType.None);
});
it('not renders the component if no value accessor is given', () => {

3
src/plugins/chart_expressions/expression_heatmap/public/components/heatmap_component.tsx
View file

@ -23,6 +23,7 @@ import {
ESCalendarIntervalUnit,
PartialTheme,
SettingsProps,
Tooltip,
} from '@elastic/charts';
import type { CustomPaletteState } from '@kbn/charts-plugin/public';
import { search } from '@kbn/data-plugin/public';
@ -615,6 +616,7 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
splitColumnAccessor={splitChartColumnAccessor}
splitRowAccessor={splitChartRowAccessor}
/>
<Tooltip {...tooltip} />
<Settings
onRenderChange={onRenderChange}
noResults={
@ -630,7 +632,6 @@ export const HeatmapComponent: FC<HeatmapRenderProps> = memo(
legendSize={LegendSizeToPixels[args.legend.legendSize ?? DEFAULT_LEGEND_SIZE]}
legendColorPicker={uiState ? LegendColorPickerWrapper : undefined}
debugState={window._echDebugStateFlag ?? false}
tooltip={tooltip}
theme={[
themeOverrides,
chartTheme,

48
src/plugins/chart_expressions/expression_partition_vis/public/components/__snapshots__/partition_vis_component.test.tsx.snap generated
View file

@ -222,6 +222,9 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -284,11 +287,6 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={
@ -611,6 +609,9 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -671,11 +672,6 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={
@ -1060,6 +1056,9 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -1122,11 +1121,6 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={
@ -1511,6 +1505,9 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -1573,11 +1570,6 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={
@ -1900,6 +1892,9 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -1960,11 +1955,6 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={
@ -2244,6 +2234,9 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
size="100%"
>
<ChartSplit />
<Tooltip
type="follow"
/>
<Settings
ariaUseDefaultSummary={true}
baseTheme={Object {}}
@ -2307,11 +2300,6 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
Object {},
]
}
tooltip={
Object {
"type": "follow",
}
}
/>
<Partition
data={

6
src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.test.tsx
View file

@ -7,7 +7,7 @@
*/
import React from 'react';
import { Settings, TooltipType, SeriesIdentifier } from '@elastic/charts';
import { Settings, TooltipType, SeriesIdentifier, Tooltip } from '@elastic/charts';
import { chartPluginMock } from '@kbn/charts-plugin/public/mocks';
import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
import { fieldFormatsServiceMock } from '@kbn/field-formats-plugin/public/mocks';
@ -239,14 +239,14 @@ describe('PartitionVisComponent', function () {
it('defaults on displaying the tooltip', () => {
const component = shallow(<PartitionVisComponent {...wrapperProps} />);
expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.Follow });
expect(component.find(Tooltip).prop('type')).toBe(TooltipType.Follow);
});
it('doesnt show the tooltip when the user requests it', () => {
const newParams = { ...visParams, addTooltip: false };
const newProps = { ...wrapperProps, visParams: newParams };
const component = shallow(<PartitionVisComponent {...newProps} />);
expect(component.find(Settings).prop('tooltip')).toStrictEqual({ type: TooltipType.None });
expect(component.find(Tooltip).prop('type')).toBe(TooltipType.None);
});
it('calls filter callback', () => {

3
src/plugins/chart_expressions/expression_partition_vis/public/components/partition_vis_component.tsx
View file

@ -19,6 +19,7 @@ import {
SeriesIdentifier,
PartitionElementEvent,
SettingsProps,
Tooltip,
} from '@elastic/charts';
import { useEuiTheme } from '@elastic/eui';
import type { PaletteRegistry } from '@kbn/coloring';
@ -497,6 +498,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
splitColumnAccessor={splitChartColumnAccessor}
splitRowAccessor={splitChartRowAccessor}
/>
<Tooltip {...tooltip} />
<Settings
noResults={
<VisualizationNoResults chartType={visType} renderComplete={onRenderChange} />
@ -511,7 +513,6 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
flatLegend={flatLegend}
legendSort={customLegendSort}
tooltip={tooltip}
showLegendExtra={visParams.showValuesInLegend}
onElementClick={([elementEvent]) => {
// this cast is safe because we are rendering a partition chart

11
src/plugins/unified_field_list/public/components/field_stats/field_stats.tsx
View file

@ -31,6 +31,7 @@ import {
ScaleType,
Settings,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { buildEsQuery, Query, Filter, AggregateQuery } from '@kbn/es-query';
@ -485,8 +486,8 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
<div data-test-subj="unifiedFieldStats-timeDistribution">
<div data-test-subj={`${dataTestSubject}-histogram`}>
<Chart size={{ height: 200, width: 300 - 32 }}>
<Tooltip type={TooltipType.None} />
<Settings
tooltip={{ type: TooltipType.None }}
theme={customChartTheme}
baseTheme={chartBaseTheme}
xDomain={
@ -535,12 +536,8 @@ const FieldStatsComponent: React.FC<FieldStatsProps> = ({
data-test-subj={`${dataTestSubject}-histogram`}
size={{ height: 200, width: '100%' }}
>
<Settings
rotation={90}
tooltip={{ type: TooltipType.None }}
theme={customChartTheme}
baseTheme={chartBaseTheme}
/>
<Tooltip type={TooltipType.None} />
<Settings rotation={90} theme={customChartTheme} baseTheme={chartBaseTheme} />
<Axis
id="key"

1
src/plugins/vis_types/timelion/public/components/series/area.tsx
View file

@ -75,7 +75,6 @@ export const AreaSeriesComponent = ({ index, groupId, visData }: AreaSeriesCompo
xAccessor={0}
yAccessors={[1]}
data={visData._hide ? [] : visData.data}
sortIndex={index}
color={visData.color}
curve={visData.lines?.steps ? CurveType.CURVE_STEP : CurveType.LINEAR}
stackAccessors={visData.stack ? [0] : undefined}

1
src/plugins/vis_types/timelion/public/components/series/bar.tsx
View file

@ -47,7 +47,6 @@ export const BarSeriesComponent = ({ index, groupId, visData }: BarSeriesCompone
xAccessor={0}
yAccessors={[1]}
data={visData._hide ? [] : visData.data}
sortIndex={index}
enableHistogramMode={false}
color={visData.color}
stackAccessors={visData.stack ? [0] : undefined}

11
src/plugins/vis_types/timelion/public/components/timelion_vis_component.tsx
View file

@ -17,6 +17,7 @@ import {
LegendPositionConfig,
LayoutDirection,
Placement,
Tooltip,
} from '@elastic/charts';
import { EuiTitle } from '@elastic/eui';
import { RangeFilterParams } from '@kbn/es-query';
@ -198,6 +199,11 @@ export const TimelionVisComponent = ({
</EuiTitle>
)}
<Chart ref={chartRef} renderer="canvas" size={{ width: '100%' }}>
<Tooltip
snap={true}
headerFormatter={({ value }) => tickFormat(value)}
type={TooltipType.VerticalCursor}
/>
<Settings
debugState={window._echDebugStateFlag ?? false}
onBrushEnd={brushEndListener}
@ -211,11 +217,6 @@ export const TimelionVisComponent = ({
}}
theme={chartTheme}
baseTheme={chartBaseTheme}
tooltip={{
snap: true,
headerFormatter: ({ value }) => tickFormat(value),
type: TooltipType.VerticalCursor,
}}
ariaLabel={ariaLabel}
ariaUseDefaultSummary={!ariaLabel}
/>

65
src/plugins/vis_types/timeseries/public/application/visualizations/views/timeseries/index.js
View file

@ -24,6 +24,7 @@ import {
TooltipType,
StackMode,
Placement,
Tooltip,
} from '@elastic/charts';
import { EuiIcon } from '@elastic/eui';
import { getTimezone } from '../../../lib/get_timezone';
@ -170,6 +171,16 @@ export const TimeSeries = ({
return (
<Chart ref={chartRef} renderer="canvas" className={classes}>
<Tooltip
snap
type={
tooltipMode === TOOLTIP_MODES.SHOW_FOCUSED
? TooltipType.Follow
: TooltipType.VerticalCursor
}
boundary={document.getElementById('app-fixed-viewport') ?? undefined}
headerFormatter={tooltipFormatter}
/>
<Settings
debugState={window._echDebugStateFlag ?? false}
showLegend={legend}
@ -217,15 +228,6 @@ export const TimeSeries = ({
chartTheme,
]}
baseTheme={baseTheme}
tooltip={{
snap: true,
type:
tooltipMode === TOOLTIP_MODES.SHOW_FOCUSED
? TooltipType.Follow
: TooltipType.VerticalCursor,
boundary: document.getElementById('app-fixed-viewport') ?? undefined,
headerFormatter: tooltipFormatter,
}}
externalPointerEvents={{
tooltip: { visible: syncTooltips, placement: Placement.Right },
}}
@ -249,29 +251,26 @@ export const TimeSeries = ({
})}
{series.map(
(
{
id,
seriesId,
label,
bars,
lines,
data,
hideInLegend,
truncateLegend,
xScaleType,
yScaleType,
groupId,
color,
isSplitByTerms,
stack,
points,
y1AccessorFormat,
y0AccessorFormat,
tickFormat,
},
sortIndex
) => {
({
id,
seriesId,
label,
bars,
lines,
data,
hideInLegend,
truncateLegend,
xScaleType,
yScaleType,
groupId,
color,
isSplitByTerms,
stack,
points,
y1AccessorFormat,
y0AccessorFormat,
tickFormat,
}) => {
const stackAccessors = getStackAccessors(stack);
const isPercentage = stack === STACKED_OPTIONS.PERCENT;
const isStacked = stack !== STACKED_OPTIONS.NONE;
@ -299,7 +298,6 @@ export const TimeSeries = ({
yScaleType={yScaleType}
timeZone={timeZone}
enableHistogramMode={isStacked}
sortIndex={sortIndex}
y1AccessorFormat={y1AccessorFormat}
y0AccessorFormat={y0AccessorFormat}
tickFormat={tickFormat}
@ -326,7 +324,6 @@ export const TimeSeries = ({
yScaleType={yScaleType}
timeZone={timeZone}
enableHistogramMode={isStacked}
sortIndex={sortIndex}
y1AccessorFormat={y1AccessorFormat}
y0AccessorFormat={y0AccessorFormat}
tickFormat={tickFormat}

52
test/functional/apps/visualize/replaced_vislib_chart_types/_line_chart_split_chart.ts
View file

@ -203,18 +203,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -223,18 +212,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -244,18 +222,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
log.debug(labels);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -263,18 +230,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
});

52
test/functional/apps/visualize/replaced_vislib_chart_types/_line_chart_split_series.ts
View file

@ -202,18 +202,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, false);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -221,18 +210,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -242,18 +220,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
log.debug(labels);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
@ -261,18 +228,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.visEditor.changeYAxisFilterLabelsCheckbox(axisId, true);
await PageObjects.visEditor.clickGo(true);
const labels = await PageObjects.visChart.getYAxisLabels(xyChartSelector);
const expectedLabels = [
'0',
'1,000',
'2,000',
'3,000',
'4,000',
'5,000',
'6,000',
'7,000',
'8,000',
'9,000',
];
const expectedLabels = ['0', '2,000', '4,000', '6,000', '8,000'];
expect(labels).to.eql(expectedLabels);
});
});

2
test/functional/apps/visualize/replaced_vislib_chart_types/_timelion.ts
View file

@ -167,7 +167,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
expect(firstAxesLabels).to.eql(['12.2GB', '12.21GB']);
expect(secondAxesLabels).to.eql(['5.59KB', '5.6KB']);
expect(thirdAxesLabels.toString()).to.be(
'BYTES_5722,BYTES_5723,BYTES_5724,BYTES_5725,BYTES_5726,BYTES_5727,BYTES_5728,BYTES_5729,BYTES_5730,BYTES_5731,BYTES_5732,BYTES_5733'
'BYTES_5722,BYTES_5724,BYTES_5726,BYTES_5728,BYTES_5730,BYTES_5732'
);
});

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.test.tsx
View file

@ -60,7 +60,7 @@ const defaultProps: Props = {
patternIndexNames,
patternRollups,
patterns,
theme: DARK_THEME,
baseTheme: DARK_THEME,
updatePatternIndexNames: jest.fn(),
updatePatternRollup: jest.fn(),
};

7
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/index.tsx
View file

@ -9,6 +9,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -52,7 +53,8 @@ export interface Props {
patternIndexNames: Record<string, string[]>;
patternRollups: Record<string, PatternRollup>;
patterns: string[];
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
updatePatternIndexNames: ({
indexNames,
pattern,
@ -76,6 +78,7 @@ const DataQualityDetailsComponent: React.FC<Props> = ({
patternRollups,
patterns,
theme,
baseTheme,
updatePatternIndexNames,
updatePatternRollup,
}) => {
@ -97,6 +100,7 @@ const DataQualityDetailsComponent: React.FC<Props> = ({
onIndexSelected={onIndexSelected}
patterns={patterns}
theme={theme}
baseTheme={baseTheme}
patternRollups={patternRollups}
/>
@ -111,6 +115,7 @@ const DataQualityDetailsComponent: React.FC<Props> = ({
openCreateCaseFlyout={openCreateCaseFlyout}
patterns={patterns}
theme={theme}
baseTheme={baseTheme}
patternIndexNames={patternIndexNames}
patternRollups={patternRollups}
selectedIndex={selectedIndex}

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.test.tsx
View file

@ -62,7 +62,7 @@ const defaultProps: Props = {
patterns,
selectedIndex: null,
setSelectedIndex: jest.fn(),
theme: DARK_THEME,
baseTheme: DARK_THEME,
updatePatternIndexNames: jest.fn(),
updatePatternRollup: jest.fn(),
};

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/indices_details/index.tsx
View file

@ -9,6 +9,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -52,7 +53,8 @@ export interface Props {
patterns: string[];
selectedIndex: SelectedIndex | null;
setSelectedIndex: (selectedIndex: SelectedIndex | null) => void;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
updatePatternIndexNames: ({
indexNames,
pattern,
@ -78,6 +80,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
selectedIndex,
setSelectedIndex,
theme,
baseTheme,
updatePatternIndexNames,
updatePatternRollup,
}) => (
@ -99,6 +102,7 @@ const IndicesDetailsComponent: React.FC<Props> = ({
selectedIndex={selectedIndex}
setSelectedIndex={setSelectedIndex}
theme={theme}
baseTheme={baseTheme}
updatePatternIndexNames={updatePatternIndexNames}
updatePatternRollup={updatePatternRollup}
/>

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/index.test.tsx
View file

@ -39,7 +39,7 @@ const defaultProps: Props = {
onIndexSelected,
patternRollups,
patterns,
theme: DARK_THEME,
baseTheme: DARK_THEME,
};
describe('StorageDetails', () => {

7
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/data_quality_details/storage_details/index.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import type { Theme } from '@elastic/charts';
import type { PartialTheme, Theme } from '@elastic/charts';
import React, { useMemo } from 'react';
import { getFlattenedBuckets } from './helpers';
@ -19,7 +19,8 @@ export interface Props {
onIndexSelected: ({ indexName, pattern }: SelectedIndex) => void;
patternRollups: Record<string, PatternRollup>;
patterns: string[];
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
const StorageDetailsComponent: React.FC<Props> = ({
@ -29,6 +30,7 @@ const StorageDetailsComponent: React.FC<Props> = ({
patternRollups,
patterns,
theme,
baseTheme,
}) => {
const flattenedBuckets = useMemo(
() =>
@ -49,6 +51,7 @@ const StorageDetailsComponent: React.FC<Props> = ({
patterns={patterns}
patternRollups={patternRollups}
theme={theme}
baseTheme={baseTheme}
/>
</StorageTreemapContainer>
);

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.test.tsx
View file

@ -40,7 +40,7 @@ describe('IndexInvalidValues', () => {
openCreateCaseFlyout={jest.fn()}
patterns={[]}
setLastChecked={jest.fn()}
theme={DARK_THEME}
baseTheme={DARK_THEME}
/>
</TestProviders>
);
@ -69,7 +69,7 @@ describe('IndexInvalidValues', () => {
openCreateCaseFlyout={jest.fn()}
patterns={patterns}
setLastChecked={jest.fn()}
theme={DARK_THEME}
baseTheme={DARK_THEME}
/>
</TestProviders>
);
@ -95,7 +95,7 @@ describe('IndexInvalidValues', () => {
openCreateCaseFlyout={jest.fn()}
patterns={patterns}
setLastChecked={jest.fn()}
theme={DARK_THEME}
baseTheme={DARK_THEME}
/>
</TestProviders>
);

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/body/index.tsx
View file

@ -9,6 +9,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -51,7 +52,8 @@ interface Props {
}) => void;
patterns: string[];
setLastChecked: (lastChecked: string) => void;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
const BodyComponent: React.FC<Props> = ({
@ -67,6 +69,7 @@ const BodyComponent: React.FC<Props> = ({
patterns,
setLastChecked,
theme,
baseTheme,
}) => {
const {
onCheckCompleted,
@ -120,6 +123,7 @@ const BodyComponent: React.FC<Props> = ({
patternIndexNames={patternIndexNames}
patternRollups={patternRollups}
theme={theme}
baseTheme={baseTheme}
updatePatternIndexNames={updatePatternIndexNames}
updatePatternRollup={updatePatternRollup}
/>

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.test.tsx
View file

@ -115,7 +115,7 @@ const defaultProps: Props = {
openCreateCaseFlyout: jest.fn(),
pattern,
patternRollup,
theme: DARK_THEME,
baseTheme: DARK_THEME,
updatePatternRollup: jest.fn(),
};

7
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/index_properties/index.tsx
View file

@ -10,6 +10,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -70,7 +71,8 @@ export interface Props {
}) => void;
pattern: string;
patternRollup: PatternRollup | undefined;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
updatePatternRollup: (patternRollup: PatternRollup) => void;
}
@ -88,6 +90,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
pattern,
patternRollup,
theme,
baseTheme,
updatePatternRollup,
}) => {
const { error: mappingsError, indexes, loading: loadingMappings } = useMappings(indexName);
@ -154,6 +157,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
setSelectedTabId,
stats: patternRollup?.stats ?? null,
theme,
baseTheme,
}),
[
addSuccessToast,
@ -171,6 +175,7 @@ const IndexPropertiesComponent: React.FC<Props> = ({
patternRollup?.docsCount,
patternRollup?.stats,
theme,
baseTheme,
]
);

7
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.test.tsx
View file

@ -8,7 +8,7 @@
import { DARK_THEME } from '@elastic/charts';
import numeral from '@elastic/numeral';
import { render, screen } from '@testing-library/react';
import React from 'react';
import React, { ComponentProps } from 'react';
import { EMPTY_STAT } from '../../helpers';
import { TestProviders } from '../../mock/test_providers/test_providers';
@ -38,7 +38,8 @@ jest.mock('../../use_ilm_explain', () => ({
})),
}));
const defaultProps = {
const defaultProps: ComponentProps<typeof Pattern> = {
pattern: '',
addSuccessToast: jest.fn(),
canUserCreateAndReadCases: jest.fn(),
formatBytes,
@ -51,7 +52,7 @@ const defaultProps = {
patternRollup: undefined,
selectedIndex: null,
setSelectedIndex: jest.fn(),
theme: DARK_THEME,
baseTheme: DARK_THEME,
updatePatternIndexNames: jest.fn(),
updatePatternRollup: jest.fn(),
};

7
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/pattern/index.tsx
View file

@ -9,6 +9,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -88,7 +89,8 @@ interface Props {
patternRollup: PatternRollup | undefined;
selectedIndex: SelectedIndex | null;
setSelectedIndex: (selectedIndex: SelectedIndex | null) => void;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
updatePatternIndexNames: ({
indexNames,
pattern,
@ -114,6 +116,7 @@ const PatternComponent: React.FC<Props> = ({
selectedIndex,
setSelectedIndex,
theme,
baseTheme,
updatePatternIndexNames,
updatePatternRollup,
}) => {
@ -157,6 +160,7 @@ const PatternComponent: React.FC<Props> = ({
pattern={pattern}
patternRollup={patternRollup}
theme={theme}
baseTheme={baseTheme}
updatePatternRollup={updatePatternRollup}
/>
</IndexPropertiesContainer>
@ -178,6 +182,7 @@ const PatternComponent: React.FC<Props> = ({
patternRollup,
stats,
theme,
baseTheme,
updatePatternRollup,
]
);

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/storage_treemap/index.test.tsx
View file

@ -54,7 +54,7 @@ const defaultProps: Props = {
onIndexSelected,
patternRollups,
patterns,
theme: DARK_THEME,
baseTheme: DARK_THEME,
};
jest.mock('@elastic/charts', () => {

37
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/storage_treemap/index.tsx
View file

@ -45,7 +45,8 @@ export interface Props {
onIndexSelected: ({ indexName, pattern }: SelectedIndex) => void;
patternRollups: Record<string, PatternRollup>;
patterns: string[];
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
interface GetGroupByFieldsResult {
@ -89,23 +90,25 @@ const StorageTreemapComponent: React.FC<Props> = ({
onIndexSelected,
patternRollups,
patterns,
theme,
theme = {},
baseTheme,
}: Props) => {
const fillColor = useMemo(() => theme.background.color, [theme.background.color]);
const fillColor = useMemo(
() => theme?.background?.color ?? baseTheme.background.color,
[theme?.background?.color, baseTheme.background.color]
);
const treemapTheme: PartialTheme[] = useMemo(
() => [
{
partition: {
fillLabel: { valueFont: { fontWeight: 700 } },
idealFontSizeJump: 1.15,
maxFontSize: 16,
minFontSize: 4,
sectorLineStroke: fillColor, // draws the light or dark "lines" between partitions
sectorLineWidth: 1.5,
},
const treemapTheme = useMemo<PartialTheme>(
() => ({
partition: {
fillLabel: { valueFont: { fontWeight: 700 } },
idealFontSizeJump: 1.15,
maxFontSize: 16,
minFontSize: 4,
sectorLineStroke: fillColor, // draws the light or dark "lines" between partitions
sectorLineWidth: 1.5,
},
],
}),
[fillColor]
);
@ -151,9 +154,9 @@ const StorageTreemapComponent: React.FC<Props> = ({
) : (
<Chart>
<Settings
baseTheme={theme}
baseTheme={baseTheme}
showLegend={false}
theme={treemapTheme}
theme={[treemapTheme, theme]}
onElementClick={onElementClick}
/>
<Partition

2
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.test.tsx
View file

@ -84,7 +84,7 @@ describe('helpers', () => {
patternDocsCount: 57410,
setSelectedTabId: jest.fn(),
stats: mockStatsGreenIndex,
theme: DARK_THEME,
baseTheme: DARK_THEME,
}).map((x) => omit(['append', 'content'], x))
).toEqual([
{

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/helpers.tsx
View file

@ -9,6 +9,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -74,6 +75,7 @@ export const getTabs = ({
setSelectedTabId,
stats,
theme,
baseTheme,
}: {
addSuccessToast: (toast: { title: string }) => void;
addToNewCaseDisabled: boolean;
@ -102,7 +104,8 @@ export const getTabs = ({
patternDocsCount: number;
setSelectedTabId: (tabId: string) => void;
stats: Record<string, IndicesStatsIndicesStats> | null;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}) => [
{
content: (
@ -123,6 +126,7 @@ export const getTabs = ({
setSelectedTabId={setSelectedTabId}
sizeInBytes={getSizeInBytes({ indexName, stats })}
theme={theme}
baseTheme={baseTheme}
/>
),
id: SUMMARY_TAB_ID,

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/data_quality_panel/tabs/summary_tab/index.tsx
View file

@ -11,6 +11,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -49,7 +50,8 @@ interface Props {
patternDocsCount: number;
setSelectedTabId: (tabId: string) => void;
sizeInBytes: number | undefined;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
const SummaryTabComponent: React.FC<Props> = ({
@ -69,6 +71,7 @@ const SummaryTabComponent: React.FC<Props> = ({
setSelectedTabId,
sizeInBytes,
theme,
baseTheme,
}) => (
<>
<CalloutSummary
@ -93,6 +96,7 @@ const SummaryTabComponent: React.FC<Props> = ({
partitionedFieldMetadata={partitionedFieldMetadata}
setSelectedTabId={setSelectedTabId}
theme={theme}
baseTheme={baseTheme}
/>
</>
);

12
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/ecs_summary_donut_chart/index.tsx
View file

@ -84,7 +84,8 @@ interface Props {
height?: number;
partitionedFieldMetadata: PartitionedFieldMetadata;
setSelectedTabId: (tabId: string) => void;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
const EcsSummaryDonutChartComponent: React.FC<Props> = ({
@ -93,7 +94,8 @@ const EcsSummaryDonutChartComponent: React.FC<Props> = ({
height = DEFAULT_HEIGHT,
partitionedFieldMetadata,
setSelectedTabId,
theme,
theme = {},
baseTheme,
}) => {
const summaryData = useMemo(
() => getSummaryData(partitionedFieldMetadata),
@ -163,7 +165,11 @@ const EcsSummaryDonutChartComponent: React.FC<Props> = ({
</DonutTextWrapper>
<Chart size={height}>
<Settings baseTheme={theme} onElementClick={onElementClick} theme={donutTheme} />
<Settings
baseTheme={baseTheme}
onElementClick={onElementClick}
theme={[donutTheme, theme]}
/>
<Partition
data={summaryData}
id="ecs-summary-donut-chart"

4
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.test.tsx
View file

@ -32,7 +32,7 @@ describe('DataQualityPanel', () => {
openCreateCaseFlyout={jest.fn()}
patterns={[]}
setLastChecked={jest.fn()}
theme={DARK_THEME}
baseTheme={DARK_THEME}
/>
</TestProviders>
);
@ -66,7 +66,7 @@ describe('DataQualityPanel', () => {
openCreateCaseFlyout={jest.fn()}
patterns={[]}
setLastChecked={jest.fn()}
theme={DARK_THEME}
baseTheme={DARK_THEME}
/>
</TestProviders>
);

6
x-pack/packages/security-solution/ecs_data_quality_dashboard/impl/data_quality/index.tsx
View file

@ -11,6 +11,7 @@ import type {
FlameElementEvent,
HeatmapElementEvent,
MetricElementEvent,
PartialTheme,
PartitionElementEvent,
Theme,
WordCloudElementEvent,
@ -53,7 +54,8 @@ interface Props {
}) => void;
patterns: string[];
setLastChecked: (lastChecked: string) => void;
theme: Theme;
theme?: PartialTheme;
baseTheme: Theme;
}
/** Renders the `Data Quality` dashboard content */
@ -71,6 +73,7 @@ const DataQualityPanelComponent: React.FC<Props> = ({
patterns,
setLastChecked,
theme,
baseTheme,
}) => {
const formatBytes = useCallback(
(value: number | undefined): string =>
@ -99,6 +102,7 @@ const DataQualityPanelComponent: React.FC<Props> = ({
patterns={patterns}
setLastChecked={setLastChecked}
theme={theme}
baseTheme={baseTheme}
/>
</DataQualityProvider>
);

17
x-pack/plugins/aiops/public/components/mini_histogram/mini_histogram.tsx
View file

@ -8,7 +8,15 @@
import React, { FC } from 'react';
import { css } from '@emotion/react';
import { Chart, BarSeries, PartialTheme, ScaleType, Settings } from '@elastic/charts';
import {
Chart,
BarSeries,
PartialTheme,
ScaleType,
Settings,
Tooltip,
TooltipType,
} from '@elastic/charts';
import { EuiLoadingChart, EuiTextColor } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
@ -96,11 +104,8 @@ export const MiniHistogram: FC<MiniHistogramProps> = ({
return (
<div css={cssChartSize}>
<Chart>
<Settings
theme={[miniHistogramChartTheme, defaultChartTheme]}
showLegend={false}
tooltip="none"
/>
<Tooltip type={TooltipType.None} />
<Settings theme={[miniHistogramChartTheme, defaultChartTheme]} showLegend={false} />
<BarSeries
id="doc_count_overall"
xScaleType={ScaleType.Time}

24
x-pack/plugins/apm/public/components/alerting/ui_components/chart_preview/index.tsx
View file

@ -17,7 +17,7 @@ import {
ScaleType,
Settings,
TickFormatter,
TooltipProps,
Tooltip,
niceTimeFormatter,
} from '@elastic/charts';
import { EuiSpacer } from '@elastic/eui';
@ -57,6 +57,7 @@ export function ChartPreview({
}: ChartPreviewProps) {
const theme = useTheme();
const thresholdOpacity = 0.3;
const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
const style = {
fill: theme.eui.euiColorVis2,
@ -68,17 +69,6 @@ export function ChartPreview({
opacity: thresholdOpacity,
};
const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';
const tooltipProps: TooltipProps = {
headerFormatter: ({ value }) => {
const dateFormat =
(uiSettings && uiSettings.get(UI_SETTINGS.DATE_FORMAT)) ||
DEFAULT_DATE_FORMAT;
return moment(value).format(dateFormat);
},
};
const barSeries = useMemo(() => {
return series.flatMap((serie) =>
serie.data.map((point) => ({ ...point, groupBy: serie.name }))
@ -126,8 +116,16 @@ export function ChartPreview({
}}
data-test-subj="ChartPreview"
>
<Tooltip
type="none"
headerFormatter={({ value }) => {
const dateFormat =
(uiSettings && uiSettings.get(UI_SETTINGS.DATE_FORMAT)) ||
DEFAULT_DATE_FORMAT;
return moment(value).format(dateFormat);
}}
/>
<Settings
tooltip={tooltipProps}
showLegend={true}
legendPosition={'bottom'}
legendSize={legendSize}

3
x-pack/plugins/apm/public/components/app/error_group_details/distribution/index.tsx
View file

@ -13,6 +13,7 @@ import {
Position,
ScaleType,
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiTitle } from '@elastic/eui';
import {
@ -94,9 +95,9 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
id="errorDistribution"
>
<Chart>
<Tooltip stickTo="top" />
<Settings
xDomain={{ min, max }}
tooltip={{ stickTo: 'top' }}
showLegend
showLegendExtra
legendPosition={Position.Bottom}

2
x-pack/plugins/apm/public/components/app/storage_explorer/storage_chart.tsx
View file

@ -113,7 +113,7 @@ export function StorageChart() {
<Axis
id="y-axis"
position={Position.Left}
showGridLines
gridLine={{ visible: true }}
tickFormat={asDynamicBytes}
/>
{storageTimeSeries.map((serie) => (

3
x-pack/plugins/apm/public/components/shared/charts/breakdown_chart/index.tsx
View file

@ -18,6 +18,7 @@ import {
Settings,
TickFormatter,
XYBrushEvent,
Tooltip,
} from '@elastic/charts';
import { EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -106,8 +107,8 @@ export function BreakdownChart({
id={id}
>
<Chart ref={chartRef}>
<Tooltip stickTo="top" showNullValues />
<Settings
tooltip={{ stickTo: 'top', showNullValues: true }}
onBrushEnd={(event) =>
onBrushEnd({ x: (event as XYBrushEvent).x, history })
}

7
x-pack/plugins/apm/public/components/shared/charts/duration_distribution_chart/index.tsx
View file

@ -74,13 +74,6 @@ const getAnnotationsStyle = (color = 'gray'): LineAnnotationStyle => ({
stroke: color,
opacity: 0.8,
},
details: {
fontSize: 8,
fontFamily: 'Arial',
fontStyle: 'normal',
fill: color,
padding: 0,
},
});
// With a log based y axis in combination with the `CURVE_STEP_AFTER` style,

3
x-pack/plugins/apm/public/components/shared/charts/instances_latency_distribution_chart/index.tsx
View file

@ -17,6 +17,7 @@ import {
TooltipInfo,
TooltipProps,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { EuiPanel, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -123,10 +124,10 @@ export function InstancesLatencyDistributionChart({
id="instancesLatencyDistribution"
>
<Chart>
<Tooltip {...tooltip} />
<Settings
legendPosition={Position.Bottom}
onElementClick={handleElementClick}
tooltip={tooltip}
showLegend
theme={chartTheme}
xDomain={xDomain}

3
x-pack/plugins/apm/public/components/shared/charts/spark_plot/index.tsx
View file

@ -14,6 +14,7 @@ import {
PartialTheme,
ScaleType,
Settings,
Tooltip,
} from '@elastic/charts';
import {
EuiFlexGroup,
@ -142,8 +143,8 @@ function SparkPlotItem({
<Settings
theme={[sparkplotChartTheme, ...defaultChartTheme]}
showLegend={false}
tooltip="none"
/>
<Tooltip type="none" />
{type && type === 'bar' ? (
<>
<BarSeries

55
x-pack/plugins/apm/public/components/shared/charts/timeseries_chart.tsx
View file

@ -22,6 +22,7 @@ import {
Settings,
XYBrushEvent,
XYChartSeriesIdentifier,
Tooltip,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -150,34 +151,34 @@ export function TimeseriesChart({
id={id}
>
<Chart ref={chartRef} id={id}>
<Settings
tooltip={{
stickTo: 'top',
showNullValues: false,
headerFormatter: ({ value }) => {
const formattedValue = xFormatter(value);
if (max === value) {
return (
<>
<EuiFlexGroup
alignItems="center"
responsive={false}
gutterSize="xs"
style={{ fontWeight: 'normal' }}
>
<EuiFlexItem grow={false}>
<EuiIcon type="iInCircle" />
</EuiFlexItem>
<EuiFlexItem>{END_ZONE_LABEL}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
{formattedValue}
</>
);
}
return formattedValue;
},
<Tooltip
stickTo="top"
showNullValues={false}
headerFormatter={({ value }) => {
const formattedValue = xFormatter(value);
if (max === value) {
return (
<>
<EuiFlexGroup
alignItems="center"
responsive={false}
gutterSize="xs"
style={{ fontWeight: 'normal' }}
>
<EuiFlexItem grow={false}>
<EuiIcon type="iInCircle" />
</EuiFlexItem>
<EuiFlexItem>{END_ZONE_LABEL}</EuiFlexItem>
</EuiFlexGroup>
<EuiSpacer size="xs" />
{formattedValue}
</>
);
}
return formattedValue;
}}
/>
<Settings
onBrushEnd={(event) =>
onBrushEnd({ x: (event as XYBrushEvent).x, history })
}

43
x-pack/plugins/apm/public/components/shared/critical_path_flamegraph/index.tsx
View file

@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { Chart, Datum, Flame, Settings } from '@elastic/charts';
import { Chart, Datum, Flame, Settings, Tooltip } from '@elastic/charts';
import {
EuiFlexGroup,
EuiFlexItem,
@ -117,6 +117,25 @@ export function CriticalPathFlamegraph(
flameGraph && (
<EuiFlexItem grow>
<Chart key={flameGraph.key} className={chartClassName}>
<Tooltip
customTooltip={(tooltipProps) => {
const valueIndex = tooltipProps.values[0]
.valueAccessor as number;
const operationId = flameGraph.operationId[valueIndex];
const operationMetadata = criticalPath?.metadata[operationId];
const countInclusive = flameGraph.viewModel.value[valueIndex];
const countExclusive = flameGraph.countExclusive[valueIndex];
return (
<CriticalPathFlamegraphTooltip
metadata={operationMetadata}
countInclusive={countInclusive}
countExclusive={countExclusive}
totalCount={flameGraph.viewModel.value[0]}
/>
);
}}
/>
<Settings
theme={[
{
@ -125,28 +144,6 @@ export function CriticalPathFlamegraph(
},
...chartTheme,
]}
tooltip={{
customTooltip: (tooltipProps) => {
const valueIndex = tooltipProps.values[0]
.valueAccessor as number;
const operationId = flameGraph.operationId[valueIndex];
const operationMetadata =
criticalPath?.metadata[operationId];
const countInclusive =
flameGraph.viewModel.value[valueIndex];
const countExclusive =
flameGraph.countExclusive[valueIndex];
return (
<CriticalPathFlamegraphTooltip
metadata={operationMetadata}
countInclusive={countInclusive}
countExclusive={countExclusive}
totalCount={flameGraph.viewModel.value[0]}
/>
);
},
}}
onElementClick={(elements) => {}}
/>
<Flame

27
x-pack/plugins/cloud_security_posture/public/pages/compliance_dashboard/compliance_charts/compliance_score_chart.tsx
View file

@ -13,6 +13,7 @@ import {
niceTimeFormatByDay,
Settings,
timeFormatter,
Tooltip,
} from '@elastic/charts';
import {
useEuiTheme,
@ -80,20 +81,20 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => {
return (
<Chart>
<Tooltip
headerFormatter={({ value }) => (
<>
<FormattedDate value={value} month="short" day="numeric" />
{', '}
<FormattedTime value={value} />
</>
)}
/>
<Settings
theme={charts.theme.useChartsTheme()}
baseTheme={charts.theme.useChartsBaseTheme()}
showLegend={false}
legendPosition="right"
tooltip={{
headerFormatter: ({ value }) => (
<>
<FormattedDate value={value} month="short" day="numeric" />
{', '}
<FormattedTime value={value} />
</>
),
}}
/>
<AreaSeries
// EuiChart is using this id in the tooltip label
@ -109,7 +110,13 @@ const ComplianceTrendChart = ({ trend }: { trend: PostureTrend[] }) => {
tickFormat={timeFormatter(niceTimeFormatByDay(2))}
ticks={4}
/>
<Axis ticks={3} id="left-axis" position="left" showGridLines domain={{ min: 0, max: 100 }} />
<Axis
ticks={3}
id="left-axis"
position="left"
gridLine={{ visible: true }}
domain={{ min: 0, max: 100 }}
/>
</Chart>
);
};

4
x-pack/plugins/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx
View file

@ -18,6 +18,7 @@ import {
ScaleType,
Settings,
TooltipHeaderFormatter,
Tooltip,
} from '@elastic/charts';
import { MetricDistributionChartTooltipHeader } from './metric_distribution_chart_tooltip_header';
@ -82,7 +83,8 @@ export const MetricDistributionChart: FC<Props> = ({
className="dataGridChart__histogram"
>
<Chart size={{ width, height }}>
<Settings theme={theme} tooltip={{ headerFormatter }} />
<Tooltip headerFormatter={headerFormatter} />
<Settings theme={theme} />
<Axis
id="bottom"
position={Position.Bottom}

2
x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_collection_view/analytics_collection_overview/analytics_collection_chart.tsx
View file

@ -18,8 +18,8 @@ import {
Position,
ScaleType,
Settings,
Tooltip,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { XYChartElementEvent } from '@elastic/charts/dist/specs/settings';

4
x-pack/plugins/enterprise_search/public/applications/analytics/components/analytics_overview/analytics_collection_card/analytics_collection_card.tsx
View file

@ -10,7 +10,7 @@ import React, { MouseEvent } from 'react';
import { parsePath } from 'history';
import { useValues } from 'kea';
import { AreaSeries, Chart, CurveType, ScaleType, Settings } from '@elastic/charts';
import { AreaSeries, Chart, CurveType, ScaleType, Settings, Tooltip } from '@elastic/charts';
import {
EuiBadge,
EuiCard,
@ -190,8 +190,8 @@ export const AnalyticsCollectionCard: React.FC<
chartMargins: { bottom: 0, left: 0, right: 0, top: 0 },
}}
showLegend={false}
tooltip="none"
/>
<Tooltip type="none" />
<AreaSeries
id={collection.name}
data={data}

8
x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.test.tsx
View file

@ -11,7 +11,7 @@ import React from 'react';
import { shallow } from 'enzyme';
import { Chart, Settings, LineSeries, Axis } from '@elastic/charts';
import { Chart, LineSeries, Axis, Tooltip } from '@elastic/charts';
import { AnalyticsChart } from '.';
@ -74,8 +74,10 @@ describe('AnalyticsChart', () => {
it('formats tooltip dates correctly', () => {
const wrapper = shallow(<AnalyticsChart lines={[{ id: 'test', data: MOCK_DATA }]} />);
const dateFormatter: Function = (wrapper.find(Settings).prop('tooltip') as any).headerFormatter;
const dateFormatter = wrapper.find(Tooltip).prop('headerFormatter')!;
expect(dateFormatter({ value: '1970-12-03' })).toEqual('December 3, 1970');
expect(dateFormatter({ value: '1970-12-03', formattedValue: '1970-12-03' })).toEqual(
'December 3, 1970'
);
});
});

10
x-pack/plugins/enterprise_search/public/applications/app_search/components/analytics/components/analytics_chart.tsx
View file

@ -11,7 +11,7 @@ import { useValues } from 'kea';
import moment from 'moment';
import { Chart, Settings, LineSeries, CurveType, Axis } from '@elastic/charts';
import { Chart, Settings, LineSeries, CurveType, Axis, Tooltip } from '@elastic/charts';
import { KibanaLogic } from '../../../../shared/kibana';
@ -36,12 +36,10 @@ export const AnalyticsChart: React.FC<Props> = ({ height = 300, lines }) => {
return (
<Chart size={{ height }}>
<Tooltip headerFormatter={(tooltip) => moment(tooltip.value).format(TOOLTIP_DATE_FORMAT)} />
<Settings
theme={charts.theme.useChartsTheme()}
baseTheme={charts.theme.useChartsBaseTheme()}
tooltip={{
headerFormatter: (tooltip) => moment(tooltip.value).format(TOOLTIP_DATE_FORMAT),
}}
/>
{lines.map(({ id, data, isDashed }) => (
<LineSeries
@ -58,9 +56,9 @@ export const AnalyticsChart: React.FC<Props> = ({ height = 300, lines }) => {
id="bottom-axis"
position="bottom"
tickFormat={(d) => moment(d).format(X_AXIS_DATE_FORMAT)}
showGridLines
gridLine={{ visible: true }}
/>
<Axis id="left-axis" position="left" ticks={4} showGridLines />
<Axis id="left-axis" position="left" ticks={4} gridLine={{ visible: true }} />
</Chart>
);
};

5
x-pack/plugins/infra/public/alerting/inventory/components/expression_chart.tsx
View file

@ -4,7 +4,7 @@
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/
import { Axis, Chart, niceTimeFormatter, Position, Settings } from '@elastic/charts';
import { Axis, Chart, niceTimeFormatter, Position, Settings, Tooltip } from '@elastic/charts';
import { EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { first, last } from 'lodash';
@ -192,7 +192,8 @@ export const ExpressionChart: React.FC<Props> = ({
tickFormat={dateFormatter}
/>
<Axis id={'values'} position={Position.Left} tickFormat={yAxisFormater} domain={domain} />
<Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
<Settings theme={getChartTheme(isDarkMode)} />
<Tooltip {...tooltipProps} />
</Chart>
</ChartContainer>
<div style={{ textAlign: 'center' }}>

4
x-pack/plugins/infra/public/alerting/log_threshold/components/alert_details_app_section/components/logs_ratio_chart.tsx
View file

@ -15,6 +15,7 @@ import {
Settings,
Position,
AnnotationDomainType,
Tooltip,
} from '@elastic/charts';
import React, { ReactElement, useEffect, useMemo } from 'react';
import { useIsDarkMode } from '../../../../../hooks/use_is_dark_mode';
@ -227,7 +228,8 @@ const LogsRatioChart: React.FC<ChartProps> = ({
tickFormat={yAxisFormatter}
domain={chartDomain}
/>
<Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
<Settings theme={getChartTheme(isDarkMode)} />
<Tooltip {...tooltipProps} />
</Chart>
</ChartContainer>
);

4
x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
View file

@ -17,6 +17,7 @@ import {
Settings,
RectAnnotation,
LineAnnotation,
Tooltip,
} from '@elastic/charts';
import { EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
@ -330,7 +331,8 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
tickFormat={yAxisFormatter}
domain={chartDomain}
/>
<Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
<Settings theme={getChartTheme(isDarkMode)} />
<Tooltip {...tooltipProps} />
</Chart>
</ChartContainer>
{!executionTimeRange && (

3
x-pack/plugins/infra/public/alerting/metric_threshold/components/expression_chart.tsx
View file

@ -14,6 +14,7 @@ import {
Position,
RectAnnotation,
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
@ -193,9 +194,9 @@ export const ExpressionChart: React.FC<Props> = ({
tickFormat={createFormatterForMetric(metric)}
domain={domain}
/>
<Tooltip {...tooltipProps} />
<Settings
onPointerUpdate={handleCursorUpdate}
tooltip={tooltipProps}
externalPointerEvents={{
tooltip: { visible: true },
}}

18
x-pack/plugins/infra/public/components/asset_details/tabs/metrics/chart_section.tsx
View file

@ -13,7 +13,7 @@ import {
type ChartSizeArray,
type PointerUpdateListener,
type TickFormatter,
type TooltipProps,
Tooltip,
} from '@elastic/charts';
import moment from 'moment';
import React from 'react';
@ -24,7 +24,7 @@ import {
import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
import { MetricExplorerSeriesChart } from '../../../../pages/metrics/metrics_explorer/components/series_chart';
import type { MetricsExplorerSeries } from '../../../../../common/http_api';
import { getTimelineChartTheme } from '../../../../utils/get_chart_theme';
import { getTimelineChartThemes } from '../../../../utils/get_chart_theme';
import { ChartHeader } from './chart_header';
@ -60,9 +60,6 @@ export const ChartSection = ({
}: Props) => {
const isDarkMode = useIsDarkMode();
const metrics = series.map((chartSeries) => chartSeries.metric);
const tooltipProps: TooltipProps = {
headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
};
return (
<>
@ -90,13 +87,12 @@ export const ChartSection = ({
tickFormat={tickFormatter}
domain={domain}
ticks={6}
showGridLines
/>
<Settings
onPointerUpdate={onPointerUpdate}
tooltip={tooltipProps}
theme={getTimelineChartTheme(isDarkMode)}
gridLine={{
visible: true,
}}
/>
<Tooltip headerFormatter={({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS')} />
<Settings {...getTimelineChartThemes(isDarkMode)} onPointerUpdate={onPointerUpdate} />
</Chart>
</>
);

5
x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useMemo } from 'react';
import { Chart, Settings, AreaSeries, ScaleType, TooltipType } from '@elastic/charts';
import { Chart, Settings, AreaSeries, ScaleType, TooltipType, Tooltip } from '@elastic/charts';
import {
EUI_CHARTS_THEME_LIGHT,
EUI_SPARKLINE_THEME_PARTIAL,
@ -54,7 +54,8 @@ export const SingleMetricSparkline: React.FunctionComponent<{
return (
<Chart size={sparklineSize}>
<Settings showLegend={false} theme={theme} tooltip={TooltipType.None} xDomain={xDomain} />
<Tooltip type={TooltipType.None} />
<Settings showLegend={false} theme={theme} xDomain={xDomain} />
<AreaSeries
id="metric"
data={metric}

12
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/metrics/chart_section.tsx
View file

@ -14,12 +14,13 @@ import {
Settings,
TickFormatter,
TooltipProps,
Tooltip,
} from '@elastic/charts';
import moment from 'moment';
import React from 'react';
import { useIsDarkMode } from '../../../../../../../hooks/use_is_dark_mode';
import { MetricsExplorerSeries } from '../../../../../../../../common/http_api';
import { getTimelineChartTheme } from '../../../../../../../utils/get_chart_theme';
import { getTimelineChartThemes } from '../../../../../../../utils/get_chart_theme';
import { MetricExplorerSeriesChart } from '../../../../../metrics_explorer/components/series_chart';
import {
MetricsExplorerChartType,
@ -89,13 +90,10 @@ export const ChartSection = ({
tickFormat={tickFormatter}
domain={domain}
ticks={6}
showGridLines
/>
<Settings
onPointerUpdate={onPointerUpdate}
tooltip={tooltipProps}
theme={getTimelineChartTheme(isDarkMode)}
gridLine={{ visible: true }}
/>
<Tooltip {...tooltipProps} />
<Settings onPointerUpdate={onPointerUpdate} {...getTimelineChartThemes(isDarkMode)} />
</Chart>
</>
);

11
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/node_details/tabs/processes/process_row_charts.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { Axis, Chart, niceTimeFormatter, Position, Settings, TooltipProps } from '@elastic/charts';
import { Axis, Chart, niceTimeFormatter, Position, Settings, Tooltip } from '@elastic/charts';
import {
EuiDescriptionListDescription,
EuiDescriptionListTitle,
@ -95,10 +95,6 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
const yAxisFormatter = createFormatter('percent');
const tooltipProps: TooltipProps = {
headerFormatter: ({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS'),
};
const dataDomain = calculateDomain(timeseries, [chartMetric], false);
const domain = dataDomain
? {
@ -129,9 +125,10 @@ const ProcessChart = ({ timeseries, color, label }: ProcessChartProps) => {
tickFormat={yAxisFormatter}
domain={domain}
ticks={6}
showGridLines
gridLine={{ visible: true }}
/>
<Settings tooltip={tooltipProps} theme={getChartTheme(isDarkMode)} />
<Tooltip headerFormatter={({ value }) => moment(value).format('Y-MM-DD HH:mm:ss.SSS')} />
<Settings theme={getChartTheme(isDarkMode)} />
</Chart>
</ChartContainer>
);

12
x-pack/plugins/infra/public/pages/metrics/inventory_view/components/timeline/timeline.tsx
View file

@ -22,6 +22,7 @@ import {
RectAnnotationDatum,
XYChartElementEvent,
TooltipProps,
Tooltip,
} from '@elastic/charts';
import { EuiFlexItem } from '@elastic/eui';
import { EuiFlexGroup } from '@elastic/eui';
@ -37,7 +38,7 @@ import { useWaffleTimeContext } from '../../hooks/use_waffle_time';
import { useWaffleFiltersContext } from '../../hooks/use_waffle_filters';
import { MetricExplorerSeriesChart } from '../../../metrics_explorer/components/series_chart';
import { MetricsExplorerChartType } from '../../../metrics_explorer/hooks/use_metrics_explorer_options';
import { getTimelineChartTheme } from '../../../../../utils/get_chart_theme';
import { getTimelineChartThemes } from '../../../../../utils/get_chart_theme';
import { calculateDomain } from '../../../metrics_explorer/components/helpers/calculate_domain';
import { InfraFormatter } from '../../../../../lib/lib';
import { useMetricsHostsAnomaliesResults } from '../../hooks/use_metrics_hosts_anomalies';
@ -291,13 +292,10 @@ export const Timeline: React.FC<Props> = ({ interval, yAxisFormatter, isVisible
tickFormat={yAxisFormatter}
domain={domain}
ticks={6}
showGridLines
/>
<Settings
tooltip={tooltipProps}
theme={getTimelineChartTheme(isDarkMode)}
onElementClick={onClickPoint}
gridLine={{ visible: true }}
/>
<Tooltip {...tooltipProps} />
<Settings onElementClick={onClickPoint} {...getTimelineChartThemes(isDarkMode)} />
</Chart>
</TimelineChartContainer>
</TimelineContainer>

3
x-pack/plugins/infra/public/pages/metrics/metric_detail/components/chart_section_vis.tsx
View file

@ -16,6 +16,7 @@ import {
Settings,
BrushEndListener,
TooltipProps,
Tooltip,
} from '@elastic/charts';
import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
import { useIsDarkMode } from '../../../../hooks/use_is_dark_mode';
@ -131,8 +132,8 @@ export const ChartSectionVis = ({
stack={stacked}
/>
))}
<Tooltip {...tooltipProps} />
<Settings
tooltip={tooltipProps}
onBrushEnd={handleTimeChange}
theme={getChartTheme(isDarkMode)}
showLegend

8
x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/chart.tsx
View file

@ -13,6 +13,7 @@ import {
Position,
Settings,
TooltipProps,
Tooltip,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiToolTip } from '@elastic/eui';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
@ -158,11 +159,8 @@ export const MetricsExplorerChart = ({
tickFormat={yAxisFormater}
domain={domain}
/>
<Settings
tooltip={tooltipProps}
onBrushEnd={handleTimeChange}
theme={getChartTheme(isDarkMode)}
/>
<Tooltip {...tooltipProps} />
<Settings onBrushEnd={handleTimeChange} theme={getChartTheme(isDarkMode)} />
</Chart>
) : options.metrics.length > 0 ? (
<MetricsExplorerEmptyChart />

24
x-pack/plugins/infra/public/utils/get_chart_theme.ts
View file

@ -5,23 +5,13 @@
* 2.0.
*/
import {
Theme,
PartialTheme,
LIGHT_THEME,
DARK_THEME,
mergeWithDefaultTheme,
} from '@elastic/charts';
import { Theme, PartialTheme, LIGHT_THEME, DARK_THEME, SettingsProps } from '@elastic/charts';
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
export function getChartTheme(isDarkMode: boolean): Theme {
return isDarkMode ? DARK_THEME : LIGHT_THEME;
}
export function getTimelineChartTheme(isDarkMode: boolean): Theme {
return isDarkMode ? DARK_THEME : mergeWithDefaultTheme(TIMELINE_LIGHT_THEME, LIGHT_THEME);
}
const TIMELINE_LIGHT_THEME: PartialTheme = {
crosshair: {
band: {
@ -36,3 +26,15 @@ const TIMELINE_LIGHT_THEME: PartialTheme = {
},
},
};
export const getTimelineChartThemes = (
isDarkMode: boolean
): Pick<SettingsProps, 'baseTheme' | 'theme'> =>
isDarkMode
? {
baseTheme: DARK_THEME,
}
: {
baseTheme: LIGHT_THEME,
theme: TIMELINE_LIGHT_THEME,
};

18
x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_exploration/components/feature_importance/decision_path_chart.tsx
View file

@ -40,12 +40,6 @@ const baselineStyle: LineAnnotationStyle = {
stroke: euiColorFullShade,
opacity: 0.75,
},
details: {
fontFamily: 'Arial',
fontSize: 10,
fill: euiColorMediumShade,
padding: 0,
},
};
const axes: RecursivePartial<AxisStyle> = {
@ -157,7 +151,9 @@ export const DecisionPathChart = ({
values: { predictionFieldName, xAxisLabel },
}
)}
showGridLines={false}
gridLine={{
visible: false,
}}
position={Position.Top}
showOverlappingTicks
domain={
@ -169,7 +165,13 @@ export const DecisionPathChart = ({
: undefined
}
/>
<Axis showGridLines={true} id="left" position={Position.Left} />
<Axis
gridLine={{
visible: true,
}}
id="left"
position={Position.Left}
/>
<LineSeries
id={'xpack.ml.dataframe.analytics.explorationResults.decisionPathLine'}
name={xAxisLabel}

7
x-pack/plugins/ml/public/application/explorer/swimlane_container.tsx
View file

@ -28,8 +28,9 @@ import {
Position,
ScaleType,
Settings,
TooltipSettings,
TooltipProps,
TooltipValue,
Tooltip,
} from '@elastic/charts';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
@ -368,7 +369,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
[swimlaneType, swimlaneData?.fieldName, swimlaneData?.interval, onCellsSelection]
) as ElementClickListener;
const tooltipOptions: TooltipSettings = useMemo(
const tooltipOptions = useMemo<TooltipProps>(
() => ({
placement: 'auto',
fallbackPlacements: ['left'],
@ -439,6 +440,7 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
>
{showSwimlane && !isLoading && (
<Chart className={'mlSwimLaneContainer'} ref={chartRef}>
<Tooltip {...tooltipOptions} />
<Settings
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
theme={themeOverrides}
@ -447,7 +449,6 @@ export const SwimlaneContainer: FC<SwimlaneProps> = ({
showLegend={showLegend}
legendPosition={Position.Top}
xDomain={xDomain}
tooltip={tooltipOptions}
debugState={window._echDebugStateFlag ?? false}
onBrushEnd={onBrushEnd as BrushEndListener}
/>

4
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/anomaly_chart.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { FC } from 'react';
import { Chart, Settings, TooltipType } from '@elastic/charts';
import { Chart, Settings, TooltipType, Tooltip } from '@elastic/charts';
import { ModelItem, Anomaly } from '../../../../common/results_loader';
import { Anomalies } from '../common/anomalies';
import { ModelBounds } from './model_bounds';
@ -47,10 +47,10 @@ export const AnomalyChart: FC<Props> = ({
<div style={{ width, height }} data-test-subj={`mlAnomalyChart ${CHART_TYPE[chartType]}`}>
<LoadingWrapper height={height} hasData={data.length > 0} loading={loading}>
<Chart>
<Tooltip type={TooltipType.None} />
<Settings
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
xDomain={xDomain}
tooltip={TooltipType.None}
/>
<Axes chartData={data} />
<Anomalies anomalyData={anomalyData} />

3
x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx
View file

@ -14,6 +14,7 @@ import {
TooltipType,
BrushEndListener,
PartialTheme,
Tooltip,
} from '@elastic/charts';
import { css } from '@emotion/react';
import { Axes } from '../common/axes';
@ -72,8 +73,8 @@ export const EventRateChart: FC<Props> = ({
<LoadingWrapper height={height} hasData={eventRateChartData.length > 0} loading={loading}>
<Chart css={overlayRanges !== undefined ? cssOverride : undefined}>
{showAxis === true && <Axes />}
<Tooltip type={TooltipType.None} />
<Settings
tooltip={TooltipType.None}
onBrushEnd={onBrushEnd}
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
theme={theme}

14
x-pack/plugins/ml/public/application/memory_usage/nodes_overview/memory_preview_chart.tsx
View file

@ -17,6 +17,7 @@ import {
Settings,
LineAnnotation,
AnnotationDomainType,
Tooltip,
} from '@elastic/charts';
import { EuiIcon } from '@elastic/eui';
import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
@ -108,15 +109,16 @@ export const MemoryPreviewChart: FC<MemoryPreviewChartProps> = ({ memoryOverview
return (
<Chart size={['100%', 50]}>
<Tooltip
headerFormatter={({ value }) =>
i18n.translate('xpack.ml.trainedModels.nodesList.memoryBreakdown', {
defaultMessage: 'Approximate memory breakdown',
})
}
/>
<Settings
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
rotation={90}
tooltip={{
headerFormatter: ({ value }) =>
i18n.translate('xpack.ml.trainedModels.nodesList.memoryBreakdown', {
defaultMessage: 'Approximate memory breakdown',
}),
}}
/>
<Axis

10
x-pack/plugins/observability/public/components/threshold/components/expression_chart.tsx
View file

@ -14,6 +14,7 @@ import {
Position,
RectAnnotation,
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
@ -190,12 +191,13 @@ export function ExpressionChart({
tickFormat={createFormatterForMetric(metric)}
domain={domain}
/>
<Tooltip
headerFormatter={({ value }) =>
moment(value).format(uiSettings.get(UI_SETTINGS.DATE_FORMAT))
}
/>
<Settings
onPointerUpdate={handleCursorUpdate}
tooltip={{
headerFormatter: ({ value }) =>
moment(value).format(uiSettings.get(UI_SETTINGS.DATE_FORMAT)),
}}
externalPointerEvents={{
tooltip: { visible: true },
}}

5
x-pack/plugins/observability/public/pages/overview/components/sections/metrics/metric_with_sparkline.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { Chart, Settings, AreaSeries } from '@elastic/charts';
import { Chart, Settings, AreaSeries, TooltipType, Tooltip } from '@elastic/charts';
import { EuiFlexItem, EuiFlexGroup, EuiIcon, EuiTextColor } from '@elastic/eui';
import React, { useContext } from 'react';
import {
@ -46,7 +46,8 @@ export function MetricWithSparkline({ id, formatter, value, timeseries, color }:
<EuiFlexGroup gutterSize="m" responsive={false}>
<EuiFlexItem grow={false}>
<Chart size={{ height: 18, width: 40 }}>
<Settings theme={theme} showLegend={false} tooltip="none" />
<Tooltip type={TooltipType.None} />
<Settings theme={theme} showLegend={false} />
<AreaSeries
id={id}
data={timeseries}

4
x-pack/plugins/observability/public/pages/slo_details/components/wide_chart.tsx
View file

@ -14,6 +14,8 @@ import {
Position,
ScaleType,
Settings,
Tooltip,
TooltipType,
} from '@elastic/charts';
import React, { useRef } from 'react';
import { EuiIcon, EuiLoadingChart, useEuiTheme } from '@elastic/eui';
@ -57,11 +59,11 @@ export function WideChart({ chart, data, id, isLoading, state }: Props) {
return (
<Chart size={{ height: 150, width: '100%' }} ref={chartRef}>
<Tooltip type={TooltipType.VerticalCursor} />
<Settings
baseTheme={baseTheme}
showLegend={false}
theme={[theme]}
tooltip="vertical"
noResults={<EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />}
onPointerUpdate={handleCursorUpdate}
externalPointerEvents={{

4
x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import { AreaSeries, Axis, Chart, Position, ScaleType, Settings } from '@elastic/charts';
import { AreaSeries, Axis, Chart, Position, ScaleType, Settings, Tooltip } from '@elastic/charts';
import { EuiFlexItem, EuiIcon, EuiLoadingChart, EuiPanel } from '@elastic/eui';
import numeral from '@elastic/numeral';
import { i18n } from '@kbn/i18n';
@ -39,6 +39,7 @@ export function DataPreviewChart() {
{!isPreviewLoading && !!previewData && (
<EuiPanel hasBorder={true} hasShadow={false}>
<Chart size={{ height: 160, width: '100%' }}>
<Tooltip type="vertical" />
<Settings
baseTheme={baseTheme}
showLegend={false}
@ -50,7 +51,6 @@ export function DataPreviewChart() {
},
},
]}
tooltip="vertical"
noResults={
<EuiIcon type="visualizeApp" size="l" color="subdued" title="no results" />
}

18
x-pack/plugins/observability/public/pages/slos/components/slo_sparkline.tsx
View file

@ -5,7 +5,17 @@
* 2.0.
*/
import { AreaSeries, Axis, Chart, Fit, LineSeries, ScaleType, Settings } from '@elastic/charts';
import {
AreaSeries,
Axis,
Chart,
Fit,
LineSeries,
ScaleType,
Settings,
Tooltip,
TooltipType,
} from '@elastic/charts';
import React from 'react';
import { EuiLoadingChart, useEuiTheme } from '@elastic/eui';
import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
@ -45,7 +55,9 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) {
min: 0,
max: 1,
}}
showGridLines={false}
gridLine={{
visible: false,
}}
/>
) : null;
@ -59,8 +71,8 @@ export function SloSparkline({ chart, data, id, isLoading, state }: Props) {
baseTheme={baseTheme}
showLegend={false}
theme={[theme, EUI_SPARKLINE_THEME_PARTIAL]}
tooltip="none"
/>
<Tooltip type={TooltipType.None} />
{LineAxisComponent}
<ChartComponent
color={color}

82
x-pack/plugins/profiling/public/components/flamegraph/index.tsx
View file

@ -5,7 +5,15 @@
* 2.0.
*/
import { Chart, Datum, Flame, FlameLayerValue, PartialTheme, Settings } from '@elastic/charts';
import {
Chart,
Datum,
Flame,
FlameLayerValue,
PartialTheme,
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, useEuiTheme } from '@elastic/eui';
import { Maybe } from '@kbn/observability-plugin/common/typings';
import React, { useEffect, useMemo, useState } from 'react';
@ -109,45 +117,45 @@ export function FlameGraph({
setHighlightedVmIndex(selectedElement!.vmIndex);
}
}}
tooltip={{
actions: [{ label: '', onSelect: () => {} }],
customTooltip: (props) => {
if (!primaryFlamegraph) {
return <></>;
}
/>
<Tooltip
actions={[{ label: '', onSelect: () => {} }]}
customTooltip={(props) => {
if (!primaryFlamegraph) {
return <></>;
}
const valueIndex = props.values[0].valueAccessor as number;
const label = primaryFlamegraph.Label[valueIndex];
const countInclusive = primaryFlamegraph.CountInclusive[valueIndex];
const countExclusive = primaryFlamegraph.CountExclusive[valueIndex];
const totalSeconds = primaryFlamegraph.TotalSeconds;
const nodeID = primaryFlamegraph.ID[valueIndex];
const valueIndex = props.values[0].valueAccessor as number;
const label = primaryFlamegraph.Label[valueIndex];
const countInclusive = primaryFlamegraph.CountInclusive[valueIndex];
const countExclusive = primaryFlamegraph.CountExclusive[valueIndex];
const totalSeconds = primaryFlamegraph.TotalSeconds;
const nodeID = primaryFlamegraph.ID[valueIndex];
const comparisonNode = columnarData.comparisonNodesById[nodeID];
const comparisonNode = columnarData.comparisonNodesById[nodeID];
return (
<FlameGraphTooltip
isRoot={valueIndex === 0}
label={label}
countInclusive={countInclusive}
countExclusive={countExclusive}
totalSamples={totalSamples}
totalSeconds={totalSeconds}
comparisonCountInclusive={comparisonNode?.CountInclusive}
comparisonCountExclusive={comparisonNode?.CountExclusive}
comparisonTotalSamples={comparisonFlamegraph?.CountInclusive[0]}
comparisonTotalSeconds={comparisonFlamegraph?.TotalSeconds}
baselineScaleFactor={baseline}
comparisonScaleFactor={comparison}
onShowMoreClick={() => {
if (!showInformationWindow) {
toggleShowInformationWindow();
}
setHighlightedVmIndex(valueIndex);
}}
/>
);
},
return (
<FlameGraphTooltip
isRoot={valueIndex === 0}
label={label}
countInclusive={countInclusive}
countExclusive={countExclusive}
totalSamples={totalSamples}
totalSeconds={totalSeconds}
comparisonCountInclusive={comparisonNode?.CountInclusive}
comparisonCountExclusive={comparisonNode?.CountExclusive}
comparisonTotalSamples={comparisonFlamegraph?.CountInclusive[0]}
comparisonTotalSeconds={comparisonFlamegraph?.TotalSeconds}
baselineScaleFactor={baseline}
comparisonScaleFactor={comparison}
onShowMoreClick={() => {
if (!showInformationWindow) {
toggleShowInformationWindow();
}
setHighlightedVmIndex(valueIndex);
}}
/>
);
}}
/>
<Flame

2
x-pack/plugins/profiling/public/components/stacked_bar_chart/index.tsx
View file

@ -141,7 +141,7 @@ export function StackedBarChart({
<Axis
id="left-axis"
position="left"
showGridLines
gridLine={{ visible: true }}
tickFormat={(d) => (asPercentages ? asPercentage(d) : d.toFixed(0))}
/>
</Chart>

11
x-pack/plugins/profiling/public/components/subchart.tsx
View file

@ -16,6 +16,7 @@ import {
ScaleType,
Settings,
timeFormatter,
Tooltip,
} from '@elastic/charts';
import {
EuiBadge,
@ -218,12 +219,8 @@ export function SubChart({
</EuiFlexItem>
<EuiFlexItem grow={false} style={{ position: 'relative' }}>
<Chart size={{ height, width }}>
<Settings
showLegend={false}
tooltip={{ showNullValues: false }}
baseTheme={chartsBaseTheme}
theme={chartsTheme}
/>
<Tooltip showNullValues={false} />
<Settings showLegend={false} baseTheme={chartsBaseTheme} theme={chartsTheme} />
<AreaSeries
id={category}
name={category}
@ -263,7 +260,7 @@ export function SubChart({
<Axis
id="left-axis"
position="left"
showGridLines
gridLine={{ visible: true }}
tickFormat={(d) => (showAxes ? Number(d).toFixed(0) : '')}
style={
showAxes

35
x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.tsx
View file

@ -12,7 +12,7 @@ import { isEmpty } from 'lodash/fp';
import React, { useCallback, useMemo } from 'react';
import styled from 'styled-components';
import { useTheme } from '../charts/common';
import { useThemes } from '../charts/common';
import { DraggableLegend } from '../charts/draggable_legend';
import type { LegendItem } from '../charts/draggable_legend_item';
import type { AlertSearchResponse } from '../../../detections/containers/detection_engine/alerts/types';
@ -59,22 +59,23 @@ const AlertsTreemapComponent: React.FC<Props> = ({
stackByField0,
stackByField1,
}: Props) => {
const theme = useTheme();
const fillColor = useMemo(() => theme.background.color, [theme.background.color]);
const { theme, baseTheme } = useThemes();
const fillColor = useMemo(
() => theme?.background?.color ?? baseTheme.background.color,
[theme?.background?.color, baseTheme.background.color]
);
const treemapTheme: PartialTheme[] = useMemo(
() => [
{
partition: {
fillLabel: { valueFont: { fontWeight: 700 } },
idealFontSizeJump: 1.15,
maxFontSize: 16,
minFontSize: 4,
sectorLineStroke: fillColor, // draws the light or dark "lines" between partitions
sectorLineWidth: 1.5,
},
const treemapTheme: PartialTheme = useMemo(
() => ({
partition: {
fillLabel: { valueFont: { fontWeight: 700 } },
idealFontSizeJump: 1.15,
maxFontSize: 16,
minFontSize: 4,
sectorLineStroke: fillColor, // draws the light or dark "lines" between partitions
sectorLineWidth: 1.5,
},
],
}),
[fillColor]
);
@ -173,9 +174,9 @@ const AlertsTreemapComponent: React.FC<Props> = ({
) : (
<Chart>
<Settings
baseTheme={theme}
baseTheme={baseTheme}
showLegend={false}
theme={treemapTheme}
theme={[treemapTheme, theme]}
onElementClick={onElementClick}
/>
<Partition

10
x-pack/plugins/security_solution/public/common/components/charts/areachart.tsx
View file

@ -6,7 +6,7 @@
*/
import React, { useMemo } from 'react';
import type { AreaSeriesStyle, RecursivePartial } from '@elastic/charts';
import type { AreaSeriesStyle, RecursivePartial, SettingsProps } from '@elastic/charts';
import { Axis, AreaSeries, Chart, Position, ScaleType, Settings } from '@elastic/charts';
import { getOr, get, isNull, isNumber } from 'lodash/fp';
@ -21,7 +21,7 @@ import {
getChartHeight,
getChartWidth,
WrappedByAutoSizer,
useTheme,
useThemes,
Wrapper,
ChartWrapper,
} from './common';
@ -81,15 +81,15 @@ export const AreaChartBaseComponent = ({
height: string | null | undefined;
configs?: ChartSeriesConfigs | undefined;
}) => {
const theme = useTheme();
const themes = useThemes();
const timeZone = useTimeZone();
const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
const xAxisId = `group-${data[0].key}-x`;
const yAxisId = `group-${data[0].key}-y`;
const settings = {
const settings: SettingsProps = {
...chartDefaultSettings,
theme,
...themes,
...get('configs.settings', chartConfigs),
};
return chartConfigs.width && chartConfigs.height ? (

9
x-pack/plugins/security_solution/public/common/components/charts/barchart.tsx
View file

@ -7,6 +7,7 @@
import { EuiFlexItem } from '@elastic/eui';
import React, { useMemo } from 'react';
import type { SettingsProps } from '@elastic/charts';
import { Chart, BarSeries, Axis, Position, ScaleType, Settings } from '@elastic/charts';
import { getOr, get, isNumber } from 'lodash/fp';
import deepmerge from 'deepmerge';
@ -28,7 +29,7 @@ import {
getChartHeight,
getChartWidth,
WrappedByAutoSizer,
useTheme,
useThemes,
Wrapper,
BarChartWrapper,
} from './common';
@ -75,16 +76,16 @@ export const BarChartBaseComponent = ({
configs?: ChartSeriesConfigs | undefined;
forceHiddenLegend?: boolean;
}) => {
const theme = useTheme();
const themes = useThemes();
const timeZone = useTimeZone();
const xTickFormatter = get('configs.axis.xTickFormatter', chartConfigs);
const yTickFormatter = get('configs.axis.yTickFormatter', chartConfigs);
const tickSize = getOr(0, 'configs.axis.tickSize', chartConfigs);
const xAxisId = `stat-items-barchart-${data[0].key}-x`;
const yAxisId = `stat-items-barchart-${data[0].key}-y`;
const settings = {
const settings: SettingsProps = {
...chartDefaultSettings,
...deepmerge(get('configs.settings', chartConfigs), { theme }),
...deepmerge(get('configs.settings', chartConfigs), themes),
};
const xAxisStyle = useMemo(

28
x-pack/plugins/security_solution/public/common/components/charts/common.test.tsx
View file

@ -17,8 +17,9 @@ import {
getChartHeight,
getChartWidth,
WrappedByAutoSizer,
useTheme,
useThemes,
} from './common';
import { LIGHT_THEME, DARK_THEME } from '@elastic/charts';
jest.mock('../../lib/kibana');
@ -169,22 +170,25 @@ describe('checkIfAllValuesAreZero', () => {
});
});
describe('useTheme', () => {
it('merges our spacing with the default theme', () => {
const { result } = renderHook(() => useTheme());
describe('useThemes', () => {
it('should return custom spacing theme', () => {
const { result } = renderHook(() => useThemes());
expect(result.current).toEqual(
expect.objectContaining({ chartMargins: expect.objectContaining({ top: 4, bottom: 0 }) })
);
expect(result.current.theme.chartMargins).toMatchObject({ top: 4, bottom: 0 });
});
it('returns a different theme depending on user settings', () => {
const { result: defaultResult } = renderHook(() => useTheme());
it('should return light baseTheme when isDarkMode false', () => {
(useUiSetting as jest.Mock).mockImplementation(() => false);
const { result } = renderHook(() => useThemes());
expect(result.current.baseTheme).toBe(LIGHT_THEME);
});
it('should return dark baseTheme when isDarkMode true', () => {
(useUiSetting as jest.Mock).mockImplementation(() => true);
const { result } = renderHook(() => useThemes());
const { result: darkResult } = renderHook(() => useTheme());
expect(defaultResult.current).not.toMatchObject(darkResult.current);
expect(result.current.baseTheme).toBe(DARK_THEME);
});
});
});

20
x-pack/plugins/security_solution/public/common/components/charts/common.tsx
View file

@ -15,10 +15,11 @@ import type {
BrushEndListener,
AxisStyle,
BarSeriesStyle,
Theme,
} from '@elastic/charts';
import { DARK_THEME, LIGHT_THEME, mergeWithDefaultTheme, Position } from '@elastic/charts';
import { DARK_THEME, LIGHT_THEME, Position } from '@elastic/charts';
import { EuiFlexGroup } from '@elastic/eui';
import React, { useMemo } from 'react';
import React from 'react';
import styled from 'styled-components';
import { DEFAULT_DARK_MODE } from '../../../../common/constants';
@ -111,20 +112,19 @@ const theme: PartialTheme = {
barsPadding: 0.05,
},
};
export const useTheme = () => {
export const useThemes = (): { baseTheme: Theme; theme: PartialTheme } => {
const isDarkMode = useUiSetting<boolean>(DEFAULT_DARK_MODE);
// TODO use the EUI charts theme see src/plugins/charts/public/services/theme/README.md
const defaultTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
// eslint-disable-next-line react-hooks/exhaustive-deps
const themeValue = useMemo(() => mergeWithDefaultTheme(theme, defaultTheme), []);
return themeValue;
const baseTheme = isDarkMode ? DARK_THEME : LIGHT_THEME;
return {
baseTheme,
theme,
};
};
export const chartDefaultSettings = {
export const chartDefaultSettings: SettingsProps = {
rotation: chartDefaultRotation,
rendering: chartDefaultRendering,
animatedData: false,
showLegend: false,
showLegendExtra: false,
debug: false,

39
x-pack/plugins/security_solution/public/common/components/charts/donutchart.test.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import type { Severity } from '@kbn/securitysolution-io-ts-alerting-types';
import { Partition, Settings } from '@elastic/charts';
import { LIGHT_THEME, Partition, Settings } from '@elastic/charts';
import { parsedMockAlertsData } from '../../../overview/components/detection_response/alerts_by_status/mock_data';
import { render } from '@testing-library/react';
import type { DonutChartProps } from './donutchart';
@ -47,14 +47,12 @@ jest.mock('./draggable_legend', () => {
};
});
const mockBaseTheme = LIGHT_THEME;
jest.mock('./common', () => {
return {
useTheme: jest.fn(() => ({
eui: {
euiScrollBar: 0,
euiColorDarkShade: '#fff',
euiScrollBarCorner: '#ccc',
},
useThemes: jest.fn(() => ({
baseTheme: mockBaseTheme,
theme: {},
})),
};
});
@ -94,25 +92,18 @@ describe('DonutChart', () => {
const { container } = render(<DonutChart {...props} />);
expect(container.querySelector(`[data-test-subj="es-chart-settings"]`)).toBeInTheDocument();
expect((Settings as jest.Mock).mock.calls[0][0]).toEqual({
baseTheme: {
eui: {
euiColorDarkShade: '#fff',
euiScrollBar: 0,
euiScrollBarCorner: '#ccc',
},
const settingsProps = (Settings as jest.Mock).mock.calls[0][0];
expect(settingsProps.baseTheme).toEqual(LIGHT_THEME);
expect(settingsProps.theme[0]).toEqual({
chartMargins: { bottom: 0, left: 0, right: 0, top: 0 },
partition: {
circlePadding: 4,
emptySizeRatio: 0.8,
idealFontSizeJump: 1.1,
outerSizeRatio: 1,
},
theme: {
chartMargins: { bottom: 0, left: 0, right: 0, top: 0 },
partition: {
circlePadding: 4,
emptySizeRatio: 0.8,
idealFontSizeJump: 1.1,
outerSizeRatio: 1,
},
},
onElementClick: expect.any(Function),
});
expect(settingsProps.onElementClick).toBeInstanceOf(Function);
});
test('should render an empty chart', () => {

10
x-pack/plugins/security_solution/public/common/components/charts/donutchart.tsx
View file

@ -21,7 +21,7 @@ import { isEmpty } from 'lodash';
import type { FlattenSimpleInterpolation } from 'styled-components';
import styled from 'styled-components';
import { useTheme } from './common';
import { useThemes } from './common';
import { DraggableLegend } from './draggable_legend';
import type { LegendItem } from './draggable_legend_item';
import { DonutChartEmpty } from './donutchart_empty';
@ -162,7 +162,7 @@ export const DonutChart = ({
title,
totalCount,
}: DonutChartProps) => {
const theme = useTheme();
const { baseTheme, theme } = useThemes();
const onElementClicked: ElementClickListener = useCallback(
(event) => {
@ -195,7 +195,11 @@ export const DonutChart = ({
<DonutChartEmpty size={height} />
) : (
<Chart size={height}>
<Settings theme={donutTheme} baseTheme={theme} onElementClick={onElementClicked} />
<Settings
theme={[donutTheme, theme]}
baseTheme={baseTheme}
onElementClick={onElementClicked}
/>
<Partition
id="donut-chart"
data={data}

6
x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_histogram_panel/alerts_histogram.tsx
View file

@ -11,7 +11,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
import React, { useMemo } from 'react';
import type { UpdateDateRange, ChartData } from '../../../../common/components/charts/common';
import { useTheme } from '../../../../common/components/charts/common';
import { useThemes } from '../../../../common/components/charts/common';
import { histogramDateTimeFormatter } from '../../../../common/components/utils';
import { hasValueToDisplay } from '../../../../common/utils/validators';
import { DraggableLegend } from '../../../../common/components/charts/draggable_legend';
@ -47,8 +47,7 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
to,
updateDateRange,
}) => {
const theme = useTheme();
const { baseTheme, theme } = useThemes();
const chartSize: ChartSizeArray = useMemo(() => ['100%', chartHeight], [chartHeight]);
const xAxisId = 'alertsHistogramAxisX';
const yAxisId = 'alertsHistogramAxisY';
@ -81,6 +80,7 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
showLegend={showLegend && legendItems.length === 0}
showLegendExtra={showLegend}
theme={theme}
baseTheme={baseTheme}
/>
<Axis id={xAxisId} position={Position.Bottom} tickFormat={tickFormat} />

17
x-pack/plugins/security_solution/public/explore/components/risk_score/risk_score_over_time/index.tsx
View file

@ -16,11 +16,12 @@ import {
Position,
AnnotationDomainType,
LineAnnotation,
Tooltip,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, EuiLoadingChart, EuiText, EuiPanel } from '@elastic/eui';
import styled from 'styled-components';
import { euiThemeVars } from '@kbn/ui-theme';
import { chartDefaultSettings, useTheme } from '../../../../common/components/charts/common';
import { chartDefaultSettings, useThemes } from '../../../../common/components/charts/common';
import { useTimeZone } from '../../../../common/lib/kibana';
import { histogramDateTimeFormatter } from '../../../../common/components/utils';
import { HeaderSection } from '../../../../common/components/header_section';
@ -85,8 +86,7 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
[]
);
const theme = useTheme();
const { baseTheme, theme } = useThemes();
const graphData = useMemo(
() =>
riskScore
@ -144,19 +144,14 @@ const RiskScoreOverTimeComponent: React.FC<RiskScoreOverTimeProps> = ({
<LoadingChart size="l" data-test-subj="RiskScoreOverTime-loading" />
) : (
<Chart>
<Settings
{...chartDefaultSettings}
theme={theme}
tooltip={{
headerFormatter,
}}
/>
<Tooltip headerFormatter={headerFormatter} />
<Settings {...chartDefaultSettings} baseTheme={baseTheme} theme={theme} />
<Axis
id="bottom"
position={Position.Bottom}
tickFormat={dataTimeFormatter}
showGridLines
gridLine={{
visible: true,
strokeWidth: 1,
opacity: 1,
dash: [3, 5],

5
x-pack/plugins/security_solution/public/overview/pages/data_quality.tsx
View file

@ -31,7 +31,7 @@ import styled from 'styled-components';
import { SecurityPageName } from '../../app/types';
import { getGroupByFieldsOnClick } from '../../common/components/alerts_treemap/lib/helpers';
import { useTheme } from '../../common/components/charts/common';
import { useThemes } from '../../common/components/charts/common';
import { HeaderPage } from '../../common/components/header_page';
import { LandingPageComponent } from '../../common/components/landing_page';
import { useLocalStorage } from '../../common/components/local_storage';
@ -131,7 +131,7 @@ const renderOption = (
const DataQualityComponent: React.FC = () => {
const isAssistantEnabled = useIsExperimentalFeatureEnabled('assistantEnabled');
const httpFetch = KibanaServices.get().http.fetch;
const theme = useTheme();
const { baseTheme, theme } = useThemes();
const toasts = useToasts();
const addSuccessToast = useCallback(
(toast: { title: string }) => {
@ -242,6 +242,7 @@ const DataQualityComponent: React.FC = () => {
openCreateCaseFlyout={openCreateCaseFlyout}
patterns={alertsAndSelectedPatterns}
setLastChecked={setLastChecked}
baseTheme={baseTheme}
theme={theme}
/>
</SecuritySolutionPageWrapper>

12
x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_status/monitor_status_panel.tsx
View file

@ -8,7 +8,7 @@
import React, { useMemo } from 'react';
import { EuiPanel, useEuiTheme, EuiResizeObserver, EuiSpacer } from '@elastic/eui';
import { Chart, Settings, Heatmap, ScaleType } from '@elastic/charts';
import { Chart, Settings, Heatmap, ScaleType, Tooltip } from '@elastic/charts';
import { MonitorStatusHeader } from './monitor_status_header';
import { MonitorStatusCellTooltip } from './monitor_status_cell_tooltip';
@ -59,14 +59,14 @@ export const MonitorStatusPanel = ({
height: 60,
}}
>
<Tooltip
customTooltip={({ values }) => (
<MonitorStatusCellTooltip timeBin={getTimeBinByXValue(values?.[0]?.datum?.x)} />
)}
/>
<Settings
showLegend={false}
xDomain={xDomain}
tooltip={{
customTooltip: ({ values }) => (
<MonitorStatusCellTooltip timeBin={getTimeBinByXValue(values?.[0]?.datum?.x)} />
),
}}
theme={{ heatmap }}
onBrushEnd={(brushArea) => {
onBrushed?.(getBrushData(brushArea));

21
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_bar_chart.tsx
View file

@ -17,7 +17,8 @@ import {
Settings,
TickFormatter,
TooltipContainer,
CustomTooltip,
CustomTooltip as CustomChartTooltip,
Tooltip,
} from '@elastic/charts';
import { useEuiTheme } from '@elastic/eui';
import { useChartTheme } from '../../../../../../hooks/use_chart_theme';
@ -36,7 +37,7 @@ const getChartHeight = (data: WaterfallData): number => {
return noOfXBars * BAR_HEIGHT;
};
const Tooltip: CustomTooltip = (tooltipInfo) => {
const CustomTooltip: CustomChartTooltip = (tooltipInfo) => {
const { data, sidebarItems } = useWaterfallContext();
return useMemo(() => {
const sidebarItem = sidebarItems?.find((item) => item.index === tooltipInfo.header?.value);
@ -89,15 +90,15 @@ export const WaterfallBarChart = ({
data-test-subj="wfDataOnlyBarChart"
>
<Chart className="data-chart">
<Tooltip
// this is done to prevent the waterfall tooltip from rendering behind Kibana's
// stacked header when the user highlights an item at the top of the chart
boundary={document.getElementById('app-fixed-viewport') ?? undefined}
customTooltip={CustomTooltip}
/>
<Settings
showLegend={false}
rotation={90}
tooltip={{
// this is done to prevent the waterfall tooltip from rendering behind Kibana's
// stacked header when the user highlights an item at the top of the chart
boundary: document.getElementById('app-fixed-viewport') ?? undefined,
customTooltip: Tooltip,
}}
theme={{ ...theme, tooltip: { maxWidth: 500 } }}
onProjectionClick={handleProjectionClick}
onElementClick={handleElementClick}
@ -109,7 +110,9 @@ export const WaterfallBarChart = ({
position={Position.Top}
tickFormat={memoizedTickFormat}
domain={domain}
showGridLines={true}
gridLine={{
visible: true,
}}
style={{
axisLine: {
visible: false,

7
x-pack/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_waterfall_chart/waterfall/waterfall_chart_fixed_axis.tsx
View file

@ -17,6 +17,7 @@ import {
Settings,
TickFormatter,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { useEuiTheme } from '@elastic/eui';
import { useChartTheme } from '../../../../../../hooks/use_chart_theme';
@ -36,10 +37,10 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
return (
<WaterfallChartFixedAxisContainer>
<Chart className="axis-only-chart" data-test-subj="axisOnlyChart">
<Tooltip type={TooltipType.None} />
<Settings
showLegend={false}
rotation={90}
tooltip={{ type: TooltipType.None }}
theme={[
{
background: {
@ -61,7 +62,9 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
},
}}
domain={domain}
showGridLines={true}
gridLine={{
visible: true,
}}
/>
<BarSeries

82
x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap generated
View file

@ -50,6 +50,14 @@ exports[`DonutChart component passes correct props without errors for valid prop
"visible": true,
},
},
"isolatedPoint": Object {
"fill": "white",
"opacity": 1,
"radius": 2,
"stroke": "__use__series__color__",
"strokeWidth": 1,
"visible": true,
},
"line": Object {
"opacity": 1,
"strokeWidth": 1,
@ -59,6 +67,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "white",
"opacity": 1,
"radius": 2,
"stroke": "__use__series__color__",
"strokeWidth": 1,
"visible": false,
},
@ -397,6 +406,14 @@ exports[`DonutChart component passes correct props without errors for valid prop
"visible": true,
},
},
"isolatedPoint": Object {
"fill": "white",
"opacity": 1,
"radius": 2,
"stroke": "__use__series__color__",
"strokeWidth": 1,
"visible": true,
},
"line": Object {
"opacity": 1,
"strokeWidth": 1,
@ -406,6 +423,7 @@ exports[`DonutChart component passes correct props without errors for valid prop
"fill": "white",
"opacity": 1,
"radius": 2,
"stroke": "__use__series__color__",
"strokeWidth": 1,
"visible": true,
},
@ -788,20 +806,24 @@ exports[`DonutChart component renders a donut chart 1`] = `
style="width:125px;height:125px"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
class="echChartContent"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
</div>
</div>
</div>
<div
@ -939,20 +961,24 @@ exports[`DonutChart component renders a green check when all monitors are up 1`]
style="width:125px;height:125px"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
class="echChartContent"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
</div>
</div>
<span
class="c0 greenCheckIcon"

32
x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/monitor_bar_series.test.tsx.snap generated
View file

@ -8,20 +8,24 @@ exports[`MonitorBarSeries component renders if the data series is present 1`] =
class="echChart"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
class="echChartContent"
>
<div
class="echChartBackground"
style="background-color:transparent"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
</div>
</div>
</div>
`;

2
x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/duration_line_bar_list.tsx
View file

@ -81,7 +81,7 @@ export const DurationAnomaliesBar = ({ anomalies, hiddenLegends }: Props) => {
key={keyIndex}
id={keyIndex}
style={getRectStyle(rectAnnotation.color)}
renderTooltip={TooltipFormatter}
customTooltipDetails={TooltipFormatter}
/>
) : null;
})}

21
x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_bar_chart.tsx
View file

@ -17,7 +17,8 @@ import {
Settings,
TickFormatter,
TooltipContainer,
CustomTooltip,
CustomTooltip as CustomChartTooltip,
Tooltip,
} from '@elastic/charts';
import { BAR_HEIGHT } from './constants';
import { useChartTheme } from '../../../../../hooks/use_chart_theme';
@ -34,7 +35,7 @@ const getChartHeight = (data: WaterfallData): number => {
return noOfXBars * BAR_HEIGHT;
};
const Tooltip: CustomTooltip = (tooltipInfo) => {
const CustomTooltip: CustomChartTooltip = (tooltipInfo) => {
const { data, sidebarItems } = useWaterfallContext();
return useMemo(() => {
const sidebarItem = sidebarItems?.find((item) => item.index === tooltipInfo.header?.value);
@ -86,15 +87,15 @@ export const WaterfallBarChart = ({
data-test-subj="wfDataOnlyBarChart"
>
<Chart className="data-chart">
<Tooltip
// this is done to prevent the waterfall tooltip from rendering behind Kibana's
// stacked header when the user highlights an item at the top of the chart
boundary={document.getElementById('app-fixed-viewport') ?? undefined}
customTooltip={CustomTooltip}
/>
<Settings
showLegend={false}
rotation={90}
tooltip={{
// this is done to prevent the waterfall tooltip from rendering behind Kibana's
// stacked header when the user highlights an item at the top of the chart
boundary: document.getElementById('app-fixed-viewport') ?? undefined,
customTooltip: Tooltip,
}}
theme={theme}
onProjectionClick={handleProjectionClick}
onElementClick={handleElementClick}
@ -106,7 +107,9 @@ export const WaterfallBarChart = ({
position={Position.Top}
tickFormat={memoizedTickFormat}
domain={domain}
showGridLines={true}
gridLine={{
visible: true,
}}
style={{
axisLine: {
visible: false,

13
x-pack/plugins/synthetics/public/legacy_uptime/components/monitor/synthetics/waterfall/components/waterfall_chart_fixed_axis.tsx
View file

@ -17,6 +17,7 @@ import {
Settings,
TickFormatter,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { useChartTheme } from '../../../../../hooks/use_chart_theme';
import { WaterfallChartFixedAxisContainer } from './styles';
@ -34,19 +35,17 @@ export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }
return (
<WaterfallChartFixedAxisContainer>
<Chart className="axis-only-chart" data-test-subj="axisOnlyChart">
<Settings
showLegend={false}
rotation={90}
tooltip={{ type: TooltipType.None }}
theme={theme}
/>
<Tooltip type={TooltipType.None} />
<Settings showLegend={false} rotation={90} theme={theme} />
<Axis
id="time"
position={Position.Top}
tickFormat={tickFormat}
domain={domain}
showGridLines={true}
gridLine={{
visible: true,
}}
/>
<BarSeries

32
x-pack/plugins/threat_intelligence/public/modules/indicators/components/barchart/barchart.test.tsx
View file

@ -68,20 +68,24 @@ describe('<IndicatorsBarChart />', () => {
style="width: 100%; height: 200px;"
>
<div
class="echChartBackground"
style="background-color: transparent;"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
class="echChartContent"
>
<div
class="echChartBackground"
style="background-color: transparent;"
/>
<div
class="echChartStatus"
data-ech-render-complete="false"
data-ech-render-count="0"
/>
<div
class="echChartResizer"
/>
<div
class="echContainer"
/>
</div>
</div>
</div>
`);

24
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_compact.tsx
View file

@ -7,7 +7,17 @@
import React, { MouseEvent } from 'react';
import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
import {
Axis,
Chart,
CurveType,
LineSeries,
Position,
ScaleType,
Settings,
TooltipType,
Tooltip,
} from '@elastic/charts';
import { EUI_SPARKLINE_THEME_PARTIAL } from '@elastic/eui/dist/eui_charts_theme';
import { AlertStatus } from '@kbn/rule-data-utils';
import { AlertCounts } from './alert_counts';
@ -87,8 +97,16 @@ export const AlertSummaryWidgetCompact = ({
<EuiFlexGroup wrap>
<EuiFlexItem style={{ minWidth: '200px' }}>
<Chart size={{ height: 50 }}>
<Settings theme={chartTheme} baseTheme={baseTheme} tooltip={{ type: 'none' }} />
<Axis hide id="activeAlertsAxis" position={Position.Left} showGridLines={false} />
<Tooltip type={TooltipType.None} />
<Settings theme={chartTheme} baseTheme={baseTheme} />
<Axis
hide
id="activeAlertsAxis"
position={Position.Left}
gridLine={{
visible: false,
}}
/>
<LineSeries
id={'activeAlertsChart'}
xScaleType={ScaleType.Time}

40
x-pack/plugins/triggers_actions_ui/public/application/sections/alert_summary_widget/components/alert_summary_widget_full_size.tsx
View file

@ -7,7 +7,16 @@
import moment from 'moment';
import React from 'react';
import { Axis, Chart, CurveType, LineSeries, Position, ScaleType, Settings } from '@elastic/charts';
import {
Axis,
Chart,
CurveType,
LineSeries,
Position,
ScaleType,
Settings,
Tooltip,
} from '@elastic/charts';
import { EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
import { AlertCounts } from './alert_counts';
import { ALL_ALERT_COLOR, TOOLTIP_DATE_FORMAT } from './constants';
@ -52,28 +61,43 @@ export const AlertSummaryWidgetFullSize = ({
</EuiFlexItem>
<EuiSpacer size="l" />
<Chart size={['100%', 170]}>
<Tooltip
headerFormatter={(tooltip) =>
moment(tooltip.value).format(dateFormat || TOOLTIP_DATE_FORMAT)
}
/>
<Settings
legendPosition={Position.Right}
theme={chartTheme}
baseTheme={baseTheme}
tooltip={{
headerFormatter: (tooltip) =>
moment(tooltip.value).format(dateFormat || TOOLTIP_DATE_FORMAT),
}}
onBrushEnd={onBrushEnd}
/>
<Axis
id="bottom"
position={Position.Bottom}
timeAxisLayerCount={2}
showGridLines
gridLine={{
visible: true,
}}
style={{
tickLine: { size: 0.0001, padding: 4 },
tickLabel: { alignment: { horizontal: Position.Left, vertical: Position.Bottom } },
}}
/>
<Axis id="left" position={Position.Left} showGridLines integersOnly ticks={4} />
<Axis id="right" position={Position.Right} showGridLines integersOnly ticks={4} />
<Axis
id="left"
position={Position.Left}
gridLine={{ visible: true }}
integersOnly
ticks={4}
/>
<Axis
id="right"
position={Position.Right}
gridLine={{ visible: true }}
integersOnly
ticks={4}
/>
<LineSeries
id="Active"
xScaleType={ScaleType.Time}

4
x-pack/test/functional_with_es_ssl/plugins/cases/public/attachments/external_references_content.tsx
View file

@ -36,11 +36,11 @@ const AttachmentContent: React.FC = (props) => {
yAccessors={['y']}
color={['black']}
/>
<Axis id="bottom-axis" position="bottom" showGridLines />
<Axis id="bottom-axis" position="bottom" gridLine={{ visible: true }} />
<Axis
id="left-axis"
position="left"
showGridLines
gridLine={{ visible: true }}
tickFormat={(d) => Number(d).toFixed(2)}
/>
</Chart>

8
yarn.lock
View file

@ -1469,10 +1469,10 @@
dependencies:
object-hash "^1.3.0"
"@elastic/charts@57.0.1":
version "57.0.1"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-57.0.1.tgz#c48209f11be8984310dd366f8ead6d8c04720402"
integrity sha512-+wVSMjZIk5oAfslRKpcmpVGgT4qbf3IGtp4rQEUVTIMAJiYv6m5optVmQvg+n/JkR9/k/SVobtW1WylIKzQi9w==
"@elastic/charts@58.2.0":
version "58.2.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-58.2.0.tgz#bd2010a4081b565f539abc75938431c7590213cc"
integrity sha512-ZhW+3SHz6txVdrncSt3njTunmUwdL4JF5lSXy5NG8qrx0r4SKi3yLbLc83xAsv7T1hxbTgsfS4GgGMhWoBBiyg==
dependencies:
"@popperjs/core" "^2.4.0"
bezier-easing "^2.1.0"