mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Update dependency @elastic/charts to v65 (main) (#184031)
This commit is contained in:
parent
a365891c68
commit
dbc16cb897
25 changed files with 71 additions and 82 deletions
|
@ -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",
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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', () => {
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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']);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -427,7 +427,6 @@ export const DocumentCountChartWithBrush: FC<DocumentCountChartProps> = (props)
|
|||
baseTheme={chartBaseTheme}
|
||||
debugState={window._echDebugStateFlag ?? false}
|
||||
showLegend={false}
|
||||
showLegendExtra={false}
|
||||
locale={i18n.getLocale()}
|
||||
/>
|
||||
<Axis
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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,
|
||||
},
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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()}
|
||||
/>
|
||||
|
|
|
@ -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 &&
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -99,7 +99,6 @@ export function GoodBadEventsChart({
|
|||
<Settings
|
||||
baseTheme={baseTheme}
|
||||
showLegend={true}
|
||||
showLegendExtra={false}
|
||||
legendPosition={Position.Left}
|
||||
noResults={
|
||||
<EuiIcon
|
||||
|
|
|
@ -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', {
|
||||
|
|
|
@ -125,7 +125,7 @@ export const chartDefaultSettings: SettingsProps = {
|
|||
rotation: chartDefaultRotation,
|
||||
rendering: chartDefaultRendering,
|
||||
showLegend: false,
|
||||
showLegendExtra: false,
|
||||
legendValues: [],
|
||||
debug: false,
|
||||
legendPosition: Position.Bottom,
|
||||
};
|
||||
|
|
|
@ -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()}
|
||||
|
|
|
@ -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()}
|
||||
/>
|
||||
|
|
|
@ -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()}
|
||||
/>
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue