Update dependency @elastic/charts to v65 (main) (#184031)

This commit is contained in:
renovate[bot] 2024-05-29 09:09:10 +01:00 committed by GitHub
parent a365891c68
commit dbc16cb897
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
25 changed files with 71 additions and 82 deletions

View file

@ -102,7 +102,7 @@
"@elastic/apm-rum": "^5.16.0",
"@elastic/apm-rum-core": "^5.21.0",
"@elastic/apm-rum-react": "^2.0.2",
"@elastic/charts": "64.1.0",
"@elastic/charts": "65.0.0",
"@elastic/datemath": "5.0.3",
"@elastic/ecs": "^8.11.1",
"@elastic/elasticsearch": "^8.13.0",

View file

@ -788,7 +788,6 @@ exports[`PartitionVisComponent should render correct structure for donut 1`] = `
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={false}
theme={
Array [
Object {
@ -1716,7 +1715,6 @@ exports[`PartitionVisComponent should render correct structure for mosaic 1`] =
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={false}
theme={
Array [
Object {
@ -2708,7 +2706,6 @@ exports[`PartitionVisComponent should render correct structure for multi-metric
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={false}
theme={
Array [
Object {
@ -3700,7 +3697,6 @@ exports[`PartitionVisComponent should render correct structure for pie 1`] = `
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={false}
theme={
Array [
Object {
@ -4628,7 +4624,6 @@ exports[`PartitionVisComponent should render correct structure for treemap 1`] =
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={false}
theme={
Array [
Object {
@ -5505,6 +5500,11 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
legendPosition="right"
legendSize={130}
legendSort={[Function]}
legendValues={
Array [
"value",
]
}
locale="en"
noResults={
<VisualizationNoResults
@ -5515,7 +5515,6 @@ exports[`PartitionVisComponent should render correct structure for waffle 1`] =
onElementClick={[Function]}
onRenderChange={[Function]}
showLegend={true}
showLegendExtra={true}
theme={
Array [
Object {

View file

@ -39,7 +39,6 @@ import {
} from '@kbn/expressions-plugin/public';
import type { FieldFormat } from '@kbn/field-formats-plugin/common';
import { getOverridesFor } from '@kbn/chart-expressions-common';
import { PartitionLegendValue } from '@kbn/visualizations-plugin/common/constants';
import { consolidateMetricColumns } from '../../common/utils';
import { DEFAULT_PERCENT_DECIMALS } from '../../common/constants';
import {
@ -564,7 +563,7 @@ const PartitionVisComponent = (props: PartitionVisComponentProps) => {
legendColorPicker={props.uiState ? LegendColorPickerWrapper : undefined}
flatLegend={flatLegend}
legendSort={customLegendSort}
showLegendExtra={visParams.legendStats?.[0] === PartitionLegendValue.Value}
legendValues={visParams.legendStats}
onElementClick={([elementEvent]) => {
// this cast is safe because we are rendering a partition chart
const [layerValues] = elementEvent as PartitionElementEvent;

View file

@ -1130,6 +1130,7 @@ exports[`XYChart component it renders area 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -1145,7 +1146,6 @@ exports[`XYChart component it renders area 1`] = `
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -2680,6 +2680,7 @@ exports[`XYChart component it renders bar 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -2695,7 +2696,6 @@ exports[`XYChart component it renders bar 1`] = `
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -4230,6 +4230,7 @@ exports[`XYChart component it renders horizontal bar 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -4245,7 +4246,6 @@ exports[`XYChart component it renders horizontal bar 1`] = `
pointerUpdateDebounce={0}
rotation={90}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -5780,6 +5780,7 @@ exports[`XYChart component it renders line 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -5795,7 +5796,6 @@ exports[`XYChart component it renders line 1`] = `
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -7330,6 +7330,7 @@ exports[`XYChart component it renders stacked area 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -7345,7 +7346,6 @@ exports[`XYChart component it renders stacked area 1`] = `
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -8880,6 +8880,7 @@ exports[`XYChart component it renders stacked bar 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -8895,7 +8896,6 @@ exports[`XYChart component it renders stacked bar 1`] = `
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -10430,6 +10430,7 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -10445,7 +10446,6 @@ exports[`XYChart component it renders stacked horizontal bar 1`] = `
pointerUpdateDebounce={0}
rotation={90}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -12010,6 +12010,7 @@ exports[`XYChart component split chart should render split chart if both, splitR
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -12025,7 +12026,6 @@ exports[`XYChart component split chart should render split chart if both, splitR
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -13798,6 +13798,7 @@ exports[`XYChart component split chart should render split chart if splitColumnA
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -13813,7 +13814,6 @@ exports[`XYChart component split chart should render split chart if splitColumnA
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {
@ -15579,6 +15579,7 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
}
legendPosition="top"
legendSize={130}
legendValues={Array []}
locale="en"
noResults={
<EmptyPlaceholder
@ -15594,7 +15595,6 @@ exports[`XYChart component split chart should render split chart if splitRowAcce
pointerUpdateDebounce={0}
rotation={0}
showLegend={false}
showLegendExtra={false}
theme={
Array [
Object {

View file

@ -731,10 +731,10 @@ describe('XYChart component', () => {
});
});
test('disabled legend extra by default', () => {
test('disabled legend values by default', () => {
const { args } = sampleArgs();
const component = shallow(<XYChart {...defaultProps} args={args} />);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
expect(component.find(Settings).at(0).prop('legendValues')).toEqual([]);
});
test('ignores legend extra for ordinal chart', () => {
@ -748,7 +748,7 @@ describe('XYChart component', () => {
}}
/>
);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(false);
expect(component.find(Settings).at(0).prop('legendValues')).toEqual([]);
});
test('shows legend extra for histogram chart', () => {
@ -766,7 +766,9 @@ describe('XYChart component', () => {
}}
/>
);
expect(component.find(Settings).at(0).prop('showLegendExtra')).toEqual(true);
expect(component.find(Settings).at(0).prop('legendValues')).toEqual([
XYLegendValue.CurrentAndLastValue,
]);
});
test('applies the mark size ratio', () => {

View file

@ -51,7 +51,6 @@ import {
import {
DEFAULT_LEGEND_SIZE,
LegendSizeToPixels,
XYLegendValue,
} from '@kbn/visualizations-plugin/common/constants';
import { PersistedState } from '@kbn/visualizations-plugin/public';
import { getOverridesFor, ChartSizeSpec } from '@kbn/chart-expressions-common';
@ -878,9 +877,7 @@ export function XYChart({
)
: undefined
}
showLegendExtra={
isHistogramViz && legend.legendStats?.[0] === XYLegendValue.CurrentAndLastValue
}
legendValues={isHistogramViz ? legend.legendStats : []}
ariaLabel={args.ariaLabel}
ariaUseDefaultSummary={!args.ariaLabel}
orderOrdinalBinsBy={

View file

@ -18,6 +18,7 @@ import {
LayoutDirection,
Placement,
Tooltip,
LegendValue,
} from '@elastic/charts';
import { EuiTitle } from '@elastic/eui';
import { RangeFilterParams } from '@kbn/es-query';
@ -207,7 +208,7 @@ export const TimelionVisComponent = ({
debugState={window._echDebugStateFlag ?? false}
onBrushEnd={brushEndListener}
showLegend={legend.showLegend}
showLegendExtra={true}
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition={legend.legendPosition}
onRenderChange={onRenderChange}
onPointerUpdate={syncCursor ? handleCursorUpdate : undefined}

View file

@ -11,11 +11,7 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { i18n } from '@kbn/i18n';
import {
MULTILAYER_TIME_AXIS_STYLE,
renderEndzoneTooltip,
useActiveCursor,
} from '@kbn/charts-plugin/public';
import {
LegendValue,
Axis,
Chart,
Position,
@ -27,6 +23,11 @@ import {
Placement,
Tooltip,
} from '@elastic/charts';
import {
MULTILAYER_TIME_AXIS_STYLE,
renderEndzoneTooltip,
useActiveCursor,
} from '@kbn/charts-plugin/public';
import { EuiIcon } from '@elastic/eui';
import { getTimeZone } from '@kbn/visualization-utils';
import { getUISettings, getCharts } from '../../../../services';
@ -183,7 +184,7 @@ export const TimeSeries = ({
<Settings
debugState={window._echDebugStateFlag ?? false}
showLegend={legend}
showLegendExtra={true}
legendValues={[LegendValue.CurrentAndLastValue]}
onRenderChange={onRenderChange}
allowBrushingLastHistogramBin={true}
legendPosition={legendPosition}

View file

@ -433,11 +433,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
await visualBuilder.clickSeriesLegendItem('png');
await visualBuilder.clickSeriesLegendItem('php');
legendNames = await visualBuilder.getLegendNames();
expect(legendNames).to.eql(['jpg', 'css', 'gif']);
expect(legendNames).to.eql(['png', 'php']);
await visualize.clickRefresh(true);
legendNames = await visualBuilder.getLegendNames();
expect(legendNames).to.eql(['jpg', 'css', 'gif']);
expect(legendNames).to.eql(['png', 'php']);
});
});

View file

@ -492,7 +492,6 @@ export const DocumentCountChart: FC<DocumentCountChartProps> = (props) => {
baseTheme={chartBaseTheme}
debugState={window._echDebugStateFlag ?? false}
showLegend={false}
showLegendExtra={false}
locale={i18n.getLocale()}
/>
<Axis id="aiops-histogram-left-axis" position={Position.Left} ticks={2} integersOnly />

View file

@ -427,7 +427,6 @@ export const DocumentCountChartWithBrush: FC<DocumentCountChartProps> = (props)
baseTheme={chartBaseTheme}
debugState={window._echDebugStateFlag ?? false}
showLegend={false}
showLegendExtra={false}
locale={i18n.getLocale()}
/>
<Axis

View file

@ -16,6 +16,7 @@ import {
Tooltip,
LIGHT_THEME,
DARK_THEME,
LegendValue,
} from '@elastic/charts';
import { EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -94,7 +95,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
<Settings
xDomain={{ min, max }}
showLegend
showLegendExtra
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition={Position.Bottom}
theme={theme.darkMode ? DARK_THEME : LIGHT_THEME}
locale={i18n.getLocale()}

View file

@ -117,7 +117,6 @@ export function MobileLocationStats({
}),
icon: getIcon('visBarHorizontal'),
value: currentPeriod?.mostRequests.location ?? NOT_AVAILABLE_LABEL,
valueFormatter: (value) => `${value}`,
trend: currentPeriod?.mostRequests.timeseries,
trendShape: MetricTrendShape.Area,
},
@ -132,7 +131,6 @@ export function MobileLocationStats({
}),
icon: getIcon('bug'),
value: currentPeriod?.mostCrashes.location ?? NOT_AVAILABLE_LABEL,
valueFormatter: (value) => `${value}`,
trend: currentPeriod?.mostCrashes.timeseries,
trendShape: MetricTrendShape.Area,
},
@ -147,7 +145,6 @@ export function MobileLocationStats({
}),
icon: getIcon('timeslider'),
value: currentPeriod?.mostSessions.location ?? NOT_AVAILABLE_LABEL,
valueFormatter: (value) => `${value}`,
trend: currentPeriod?.mostSessions.timeseries,
trendShape: MetricTrendShape.Area,
},
@ -162,7 +159,6 @@ export function MobileLocationStats({
}),
icon: getIcon('launch'),
value: currentPeriod?.mostLaunches.location ?? NOT_AVAILABLE_LABEL,
valueFormatter: (value) => `${value}`,
trend: currentPeriod?.mostLaunches.timeseries,
trendShape: MetricTrendShape.Area,
},

View file

@ -19,6 +19,7 @@ import {
TickFormatter,
XYBrushEvent,
Tooltip,
LegendValue,
} from '@elastic/charts';
import { EuiIcon } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
@ -100,7 +101,7 @@ export function BreakdownChart({
<Settings
onBrushEnd={(event) => onBrushEnd({ x: (event as XYBrushEvent).x, history })}
showLegend
showLegendExtra
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition={Position.Bottom}
theme={chartThemes.theme}
baseTheme={chartThemes.baseTheme}

View file

@ -17,6 +17,7 @@ import {
BrushEndListener,
TooltipProps,
Tooltip,
LegendValue,
} from '@elastic/charts';
import { EuiPageSection } from '@elastic/eui';
import { useTimelineChartTheme } from '../../../../utils/use_timeline_chart_theme';
@ -137,7 +138,7 @@ export const ChartSectionVis = ({
onBrushEnd={handleTimeChange}
baseTheme={chartTheme.baseTheme}
showLegend
showLegendExtra
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition="right"
locale={i18n.getLocale()}
/>

View file

@ -142,11 +142,6 @@ export function LogsSection({ bucketSize }: Props) {
showLegend
legendPosition={Position.Right}
xDomain={{ min, max }}
// Please double check if the data passed to the chart contains all the buckets, even the empty ones.
// the showLegendExtra will display the last element of the data array as the default legend value
// and if empty buckets are filtered out you can probably see a value that doesn't correspond
// to the value in the last time bucket visualized.
// showLegendExtra
locale={i18n.getLocale()}
/>
{series &&

View file

@ -211,7 +211,6 @@ export function EventsChartPanel({ slo, range, selectedTabId, onBrushed }: Props
<Settings
baseTheme={baseTheme}
showLegend={slo.indicator.type !== 'sli.metric.timeslice'}
showLegendExtra={false}
legendPosition={Position.Left}
noResults={
<EuiIcon

View file

@ -99,7 +99,6 @@ export function GoodBadEventsChart({
<Settings
baseTheme={baseTheme}
showLegend={true}
showLegendExtra={false}
legendPosition={Position.Left}
noResults={
<EuiIcon

View file

@ -106,11 +106,6 @@ export const DurationChartComponent = ({
<Settings
xDomain={{ min, max }}
showLegend
// Please double check if the data passed to the chart contains all the buckets, even the empty ones.
// the showLegendExtra will display the last element of the data array as the default legend value
// and if empty buckets are filtered out you can probably see a value that doesn't correspond
// to the value in the last time bucket visualized.
// showLegendExtra
legendPosition={Position.Right}
onBrushEnd={onBrushEnd}
onLegendItemClick={legendToggleVisibility}
@ -149,7 +144,15 @@ export const DurationChartComponent = ({
<FormattedMessage
id="xpack.uptime.durationChart.emptyPrompt.description"
defaultMessage="This monitor has never been {emphasizedText} during the selected time range."
values={{ emphasizedText: <strong>up</strong> }}
values={{
emphasizedText: (
<strong>
{i18n.translate('xpack.uptime.durationChartComponent.strong.upLabel', {
defaultMessage: 'up',
})}
</strong>
),
}}
/>
}
title={i18n.translate('xpack.uptime.durationChart.emptyPrompt.title', {

View file

@ -125,7 +125,7 @@ export const chartDefaultSettings: SettingsProps = {
rotation: chartDefaultRotation,
rendering: chartDefaultRendering,
showLegend: false,
showLegendExtra: false,
legendValues: [],
debug: false,
legendPosition: Position.Bottom,
};

View file

@ -7,7 +7,15 @@
import type { ChartSizeArray } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
import { Axis, Chart, HistogramBarSeries, Position, Settings, ScaleType } from '@elastic/charts';
import {
Axis,
Chart,
HistogramBarSeries,
Position,
Settings,
ScaleType,
LegendValue,
} from '@elastic/charts';
import { EuiFlexGroup, EuiFlexItem, EuiProgress } from '@elastic/eui';
import React, { useMemo } from 'react';
@ -77,9 +85,9 @@ export const AlertsHistogram = React.memo<AlertsHistogramProps>(
<Settings
legendPosition={legendPosition}
onBrushEnd={updateDateRange}
// showLegend controls the default legend coming from Elastic chart, we show them when our customised legend items doesn't exist (but we still want to show legend).
// showLegend controls the default legend coming from @elastic/charts, we show them when our customized legend items don't exist (but we still want to show legend).
showLegend={showLegend && legendItems.length === 0}
showLegendExtra={showLegend}
legendValues={showLegend ? [LegendValue.CurrentAndLastValue] : []}
theme={theme}
baseTheme={baseTheme}
locale={i18n.getLocale()}

View file

@ -270,11 +270,6 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
baseTheme={chartsBaseTheme}
xDomain={domain}
showLegend={!!termField}
// Please double check if the data passed to the chart contains all the buckets, even the empty ones.
// the showLegendExtra will display the last element of the data array as the default legend value
// and if empty buckets are filtered out you can probably see a value that doesn't correspond
// to the value in the last time bucket visualized.
// showLegendExtra
legendPosition={Position.Bottom}
locale={i18n.getLocale()}
/>

View file

@ -10,6 +10,7 @@ import {
AnnotationDomainType,
Axis,
Chart,
LegendValue,
LineAnnotation,
LineSeries,
PartialTheme,
@ -221,7 +222,7 @@ export const WatchVisualization = () => {
baseTheme={chartBaseTheme}
xDomain={domain}
showLegend={!!watch.termField}
showLegendExtra
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition={Position.Bottom}
locale={i18n.getLocale()}
/>

View file

@ -85,16 +85,9 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
await PageObjects.header.waitUntilLoadingHasFinished();
expect(
await find.existsByCssSelector(
'[aria-label="Chrome Mobile iOS; Activate to hide series in graph"]'
)
).to.eql(true);
expect(
await find.existsByCssSelector(
'[aria-label="Mobile Safari; Activate to hide series in graph"]'
)
).to.eql(true);
// if breakdown we should have multiple legend items
const legendItems = await find.allByCssSelector('.echLegendItem');
expect(legendItems.length).to.be(11);
});
});
}

View file

@ -1650,10 +1650,10 @@
dependencies:
object-hash "^1.3.0"
"@elastic/charts@64.1.0":
version "64.1.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-64.1.0.tgz#aa52332cec68ea52be25e387774267027311b8ca"
integrity sha512-jZ9fnujjzHd24m0Fv5zURbxrb/MzIRUwlvyocjAn/y2yLHhlqMK6XWHfMoqIAgZ0iVVojfEPXnnc34PPT4KDIA==
"@elastic/charts@65.0.0":
version "65.0.0"
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-65.0.0.tgz#96a912ecf15361b3e5e041bb890783ae123d1971"
integrity sha512-Cc28w3t73vtYJRgbbHP+eiCBm26bHmlwvEdO+kWm6ZVKrC21zJJt41AYXdy7yOU1fJseJkZ5TqT1Y8qHl5FoiQ==
dependencies:
"@popperjs/core" "^2.11.8"
bezier-easing "^2.1.0"