mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Update dependency @elastic/charts to v63 (main) (#175316)
## Note about `@elastic/charts` BREAKING CHANGE In version 62.0.0 we introduced a breaking change in time-series charts: the default "extra" legend value now represents the last data point in the passed data array. It doesn't try to reconcile anymore the data computed domain with a passed domain in `Settings.xDomain` but instead it renders directly the last element of the passed array. The reasons for this change can be found at https://github.com/elastic/elastic-charts/pull/2115 or can be asked directly to our `#charts` slack channel There are a couple of implementations in Kibana that use both the `showLegendExtra` in the chart configuration. I've commented them out so that the owner teams can help me fix this breaking change if necessary. In general, the fix requires that the data passed to the chart contains all the buckets, even empty buckets with null/zeros should be passed. To achieve this, your ES query you should provide the `extended_bounds` settings in the [data histogram agg](https://www.elastic.co/guide/en/elasticsearch/reference/current/search-aggregations-bucket-histogram-aggregation.html#search-aggregations-bucket-histogram-aggregation-extended-bounds) and use a `min_doc_count:0`. If that doesn't work, please ping me and we can find an alternative solution. This should not limit the query performance, generating empty date buckets on the server side has a similar or even less performance impact than what we were doing on the client side to calculate every missing bucket, to fillup the chart in particular situations. Please double-check your queries/data fetches and push a commit to this PR or ping me with the updated data fetch strategy. fix https://github.com/elastic/kibana/issues/153079 This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [@elastic/charts](https://togithub.com/elastic/elastic-charts) | [`61.2.0` -> `63.0.0`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/61.2.0/63.0.0) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | [](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes <details> <summary>elastic/elastic-charts (@​elastic/charts)</summary> ### [`v63.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6300-2024-01-24) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v62.0.0...v63.0.0) ##### Features - **legend:** expose extra raw values ([#​2308](https://togithub.com/elastic/elastic-charts/issues/2308)) ([85bfe06](85bfe0668d)) ##### BREAKING CHANGES - **legend:** The `CustomLegend.item` now exposes both the `raw` and the `formatted` version of the extra value. ### [`v62.0.0`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6200-2024-01-23) [Compare Source](https://togithub.com/elastic/elastic-charts/compare/v61.2.0...v62.0.0) ##### Bug Fixes - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to ^91.3.1 ([#​2286](https://togithub.com/elastic/elastic-charts/issues/2286)) ([d4d7b5d](d4d7b5db66)) - **deps:** update dependency [@​elastic/eui](https://togithub.com/elastic/eui) to v92 ([#​2290](https://togithub.com/elastic/elastic-charts/issues/2290)) ([cc537fa](cc537faf43)) - **legend:** improve last value handling ([#​2115](https://togithub.com/elastic/elastic-charts/issues/2115)) ([9f99447](9f9944734c)) ##### BREAKING CHANGES - **legend:** In cartesian charts, the default legend value now represents the data points that coincide with the latest datum in the X domain. Please consider passing every data point, even the empty ones (like empty buckets/bins/etc) if your x data domain doesn't fully cover a custom x domain passed to the chart configuration. </details> --- --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co> Co-authored-by: Elena Stoeva <elenastoeva99@gmail.com>
This commit is contained in:
renovate[bot]
GitHub
parent
3e4f1ed99d
commit
086c4690a5
13 changed files with 49 additions and 9 deletions
|
|
@ -101,7 +101,7 @@
|
|||
"@dnd-kit/utilities": "^2.0.0",
|
||||
"@elastic/apm-rum": "^5.16.0",
|
||||
"@elastic/apm-rum-react": "^2.0.2",
|
||||
"@elastic/charts": "61.2.0",
|
||||
"@elastic/charts": "63.0.0",
|
||||
"@elastic/datemath": "5.0.3",
|
||||
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
|
||||
"@elastic/ems-client": "8.5.1",
|
||||
|
|
|
|||
|
|
@ -142,7 +142,11 @@ export function LogsSection({ bucketSize }: Props) {
|
|||
showLegend
|
||||
legendPosition={Position.Right}
|
||||
xDomain={{ min, max }}
|
||||
showLegendExtra
|
||||
// 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 &&
|
||||
|
|
|
|||
|
|
@ -41,6 +41,9 @@ Object {
|
|||
"isBucketed": false,
|
||||
"label": "Count of records",
|
||||
"operationType": "count",
|
||||
"params": Object {
|
||||
"emptyAsNull": true,
|
||||
},
|
||||
"scale": "ratio",
|
||||
"sourceField": "___records___",
|
||||
},
|
||||
|
|
@ -50,6 +53,7 @@ Object {
|
|||
"label": "@timestamp",
|
||||
"operationType": "date_histogram",
|
||||
"params": Object {
|
||||
"includeEmptyRows": true,
|
||||
"interval": "auto",
|
||||
},
|
||||
"scale": "interval",
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ Object {
|
|||
"label": "@timestamp",
|
||||
"operationType": "date_histogram",
|
||||
"params": Object {
|
||||
"includeEmptyRows": true,
|
||||
"interval": "auto",
|
||||
},
|
||||
"scale": "interval",
|
||||
|
|
@ -60,6 +61,9 @@ Object {
|
|||
"isBucketed": false,
|
||||
"label": "Count of records",
|
||||
"operationType": "count",
|
||||
"params": Object {
|
||||
"emptyAsNull": true,
|
||||
},
|
||||
"scale": "ratio",
|
||||
"sourceField": "___records___",
|
||||
},
|
||||
|
|
@ -233,6 +237,7 @@ Object {
|
|||
"label": "@timestamp",
|
||||
"operationType": "date_histogram",
|
||||
"params": Object {
|
||||
"includeEmptyRows": true,
|
||||
"interval": "auto",
|
||||
},
|
||||
"scale": "interval",
|
||||
|
|
@ -243,6 +248,9 @@ Object {
|
|||
"isBucketed": false,
|
||||
"label": "Count of records",
|
||||
"operationType": "count",
|
||||
"params": Object {
|
||||
"emptyAsNull": true,
|
||||
},
|
||||
"scale": "ratio",
|
||||
"sourceField": "___records___",
|
||||
},
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = (
|
|||
scale: 'interval',
|
||||
params: {
|
||||
interval: 'auto',
|
||||
includeEmptyRows: true,
|
||||
},
|
||||
},
|
||||
'e09e0380-0740-4105-becc-0a4ca12e3944': {
|
||||
|
|
@ -79,6 +80,7 @@ export const getAlertsHistogramLensAttributes: GetLensAttributes = (
|
|||
isBucketed: false,
|
||||
scale: 'ratio',
|
||||
sourceField: '___records___',
|
||||
params: { emptyAsNull: true },
|
||||
},
|
||||
'34919782-4546-43a5-b668-06ac934d3acd': {
|
||||
label: `Top values of ${stackByField}`,
|
||||
|
|
|
|||
|
|
@ -71,6 +71,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = (
|
|||
scale: 'interval',
|
||||
params: {
|
||||
interval: 'auto',
|
||||
includeEmptyRows: true,
|
||||
},
|
||||
},
|
||||
'e09e0380-0740-4105-becc-0a4ca12e3944': {
|
||||
|
|
@ -80,6 +81,7 @@ export const getEventsHistogramLensAttributes: GetLensAttributes = (
|
|||
isBucketed: false,
|
||||
scale: 'ratio',
|
||||
sourceField: '___records___',
|
||||
params: { emptyAsNull: true },
|
||||
},
|
||||
'34919782-4546-43a5-b668-06ac934d3acd': {
|
||||
label: `Top values of ${stackByField}`,
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = (
|
|||
scale: 'interval',
|
||||
params: {
|
||||
interval: 'auto',
|
||||
includeEmptyRows: true,
|
||||
},
|
||||
},
|
||||
'0a923af2-c880-4aa3-aa93-a0b9c2801f6d': {
|
||||
|
|
@ -100,6 +101,7 @@ export const getExternalAlertLensAttributes: GetLensAttributes = (
|
|||
isBucketed: false,
|
||||
scale: 'ratio',
|
||||
sourceField: '___records___',
|
||||
params: { emptyAsNull: true },
|
||||
},
|
||||
'42334c6e-98d9-47a2-b4cb-a445abb44c93': {
|
||||
label: TOP_VALUE(`${stackByField}`), // could be event.category
|
||||
|
|
|
|||
|
|
@ -26,6 +26,9 @@ Object {
|
|||
"isBucketed": false,
|
||||
"label": "Unique count of dns.question.name",
|
||||
"operationType": "unique_count",
|
||||
"params": Object {
|
||||
"emptyAsNull": true,
|
||||
},
|
||||
"scale": "ratio",
|
||||
"sourceField": "dns.question.name",
|
||||
},
|
||||
|
|
@ -35,6 +38,7 @@ Object {
|
|||
"label": "@timestamp",
|
||||
"operationType": "date_histogram",
|
||||
"params": Object {
|
||||
"includeEmptyRows": true,
|
||||
"interval": "auto",
|
||||
},
|
||||
"scale": "interval",
|
||||
|
|
|
|||
|
|
@ -133,6 +133,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = (
|
|||
scale: 'interval',
|
||||
params: {
|
||||
interval: 'auto',
|
||||
includeEmptyRows: true,
|
||||
},
|
||||
},
|
||||
'2a4d5e20-f570-48e4-b9ab-ff3068919377': {
|
||||
|
|
@ -142,6 +143,7 @@ export const getDnsTopDomainsLensAttributes: GetLensAttributes = (
|
|||
scale: 'ratio',
|
||||
sourceField: 'dns.question.name',
|
||||
isBucketed: false,
|
||||
params: { emptyAsNull: true },
|
||||
},
|
||||
},
|
||||
columnOrder: [
|
||||
|
|
|
|||
|
|
@ -269,7 +269,11 @@ export const ThresholdVisualization: React.FunctionComponent<Props> = ({
|
|||
baseTheme={chartsBaseTheme}
|
||||
xDomain={domain}
|
||||
showLegend={!!termField}
|
||||
showLegendExtra
|
||||
// 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()}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -106,7 +106,11 @@ export const DurationChartComponent = ({
|
|||
<Settings
|
||||
xDomain={{ min, max }}
|
||||
showLegend
|
||||
showLegendExtra
|
||||
// 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}
|
||||
|
|
|
|||
|
|
@ -112,7 +112,11 @@ export function buildVisualizeQuery(watch, visualizeOptions, kibanaVersion) {
|
|||
date_histogram: {
|
||||
field: watch.timeField,
|
||||
time_zone: visualizeOptions.timezone,
|
||||
min_doc_count: 1,
|
||||
min_doc_count: 0,
|
||||
extended_bounds: {
|
||||
min: visualizeOptions.rangeFrom,
|
||||
max: visualizeOptions.rangeTo,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1658,10 +1658,10 @@
|
|||
dependencies:
|
||||
object-hash "^1.3.0"
|
||||
|
||||
"@elastic/charts@61.2.0":
|
||||
version "61.2.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-61.2.0.tgz#fa065b85324d5660e4b6355390cca8699ef0d6ff"
|
||||
integrity sha512-LBmZ+6wSR9/BCR+go5eIBy51Jpxr0cbK/a7vslZNYIGCdpHsWxGZgcqG3KgshFxOmUvcP7kj9LEEmeCTEGhbUQ==
|
||||
"@elastic/charts@63.0.0":
|
||||
version "63.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-63.0.0.tgz#c7f54cd60a1a59a28b5654886392e05a10fd67b8"
|
||||
integrity sha512-nvLg/qFJXYuKOdTDYj3iuwJ/X4zhkHdIB91yezd7fo+YvpBRiAUzJfc6Dpy6M5JkmGwx7Dq8zjGt6mO8ngOhog==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.11.8"
|
||||
bezier-easing "^2.1.0"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue