Skip to content

[Charts] Use chartTheme hook everywhere#217370

Merged
markov00 merged 15 commits intoelastic:mainfrom
markov00:2025_04_07-use_chartTheme_hook_everywhere
Apr 14, 2025
Merged

[Charts] Use chartTheme hook everywhere#217370
markov00 merged 15 commits intoelastic:mainfrom
markov00:2025_04_07-use_chartTheme_hook_everywhere

Conversation

@markov00
Copy link
Contributor

@markov00 markov00 commented Apr 7, 2025

Summary

This PR fixes the existing usage of the chart themes by using the provided useElasticChartsTheme hook that is color mode aware and theme adaptive (borealis/amsterdam)

Some charts where using just the Light theme version or the legacy (aka amsterdam theme), and I've applied the hook to pick up the correct theme.

TO REVIEWERS: Please pull down the PR and check if the actual changed charts looks correct with the new theme configuration.

Copy link
Contributor

@nickofthyme nickofthyme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code changes LGTM

@markov00 markov00 added Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// backport:version Backport to applied version labels v9.1.0 v8.19.0 v9.0.1 Feature:ElasticCharts Issues related to the elastic-charts library labels Apr 8, 2025
…urce-definitions/scripts/fix-location-collection.ts'
@peteharverson peteharverson requested a review from walterra April 8, 2025 08:40
@markov00 markov00 added backport:all-open Backport to all branches that could still receive a release backport:version Backport to applied version labels v9.1.0 v8.19.0 and removed backport:version Backport to applied version labels v9.1.0 v8.19.0 v9.0.1 backport:all-open Backport to all branches that could still receive a release labels Apr 8, 2025
Copy link
Contributor

@PhilippeOberti PhilippeOberti left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Desk tested, LGTM for the @elastic/security-threat-hunting-investigations team!

Copy link
Contributor

@peteharverson peteharverson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ML changes LGTM (following Walter's testing!)

Copy link
Contributor

@flash1293 flash1293 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Streams and data set quality changes LGTM, tested in light and dark mode

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
datasetQuality 305 306 +1
dataVisualizer 735 736 +1
enterpriseSearch 1334 1335 +1
expressionTagcloud 176 177 +1
profiling 289 290 +1
streamsApp 441 442 +1
threatIntelligence 177 178 +1
transform 704 705 +1
triggersActionsUi 748 749 +1
total +9

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
apm 2.6MB 2.6MB +137.0B
datasetQuality 240.8KB 241.0KB +165.0B
dataVisualizer 610.9KB 611.3KB +409.0B
enterpriseSearch 1.3MB 1.3MB +126.0B
expressionTagcloud 16.0KB 16.1KB +124.0B
filesManagement 106.5KB 106.5KB +29.0B
ml 5.3MB 5.3MB +527.0B
profiling 383.7KB 383.9KB +126.0B
securitySolution 9.0MB 8.9MB -243.0B
slo 917.1KB 917.1KB +4.0B
streamsApp 405.4KB 405.3KB -169.0B
synthetics 958.9KB 958.8KB -9.0B
threatIntelligence 754.1KB 754.2KB +140.0B
transform 628.9KB 629.1KB +126.0B
triggersActionsUi 1.4MB 1.4MB +126.0B
total +1.6KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
expressionTagcloud 10.9KB 10.9KB -2.0B

History

Copy link
Contributor

@justinkambic justinkambic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Management changes LGTM

@markov00 markov00 requested a review from nickofthyme April 14, 2025 14:22
@markov00 markov00 enabled auto-merge (squash) April 14, 2025 14:48
@markov00 markov00 merged commit a9c9354 into elastic:main Apr 14, 2025
10 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/14450411368

@kibanamachine
Copy link
Contributor

💔 All backports failed

Status Branch Result
8.x Backport failed because of merge conflicts

You might need to backport the following PRs to 8.x:
- [Lens/SCSS] Replace tag cloud expression metric css with js (#209578)

Manual backport

To create the backport manually run:

node scripts/backport --pr 217370

Questions ?

Please refer to the Backport tool documentation

@markov00
Copy link
Contributor Author

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

markov00 added a commit to markov00/kibana that referenced this pull request Apr 14, 2025
## Summary

This PR fixes the existing usage of the chart themes by using the
provided `useElasticChartsTheme` hook that is color mode aware and theme
adaptive (borealis/amsterdam)

Some charts where using just the Light theme version or the legacy (aka
amsterdam theme), and I've applied the hook to pick up the correct
theme.

TO REVIEWERS: Please pull down the PR and check if the actual changed
charts looks correct with the new theme configuration.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
(cherry picked from commit a9c9354)

# Conflicts:
#	src/platform/plugins/shared/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
#	src/platform/plugins/shared/chart_expressions/expression_tagcloud/tsconfig.json
#	x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_expanded_row/boolean_content.tsx
#	x-pack/platform/plugins/private/data_visualizer/public/application/file_data_visualizer/components/doc_count_chart/event_rate_chart.tsx
#	x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/common/components/execution_duration_chart.tsx
#	x-pack/solutions/observability/plugins/profiling/tsconfig.json
#	x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/monitors_page/overview/overview/metric_item/metric_item.tsx
#	x-pack/solutions/observability/plugins/synthetics/public/apps/synthetics/components/step_details_page/step_timing_breakdown/network_timings_donut.tsx
#	x-pack/solutions/search/plugins/enterprise_search/tsconfig.json
markov00 added a commit that referenced this pull request Apr 15, 2025
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Charts] Use chartTheme hook everywhere
(#217370)](#217370)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"marco.vettorello@elastic.co"},"sourceCommit":{"committedDate":"2025-04-14T16:09:15Z","message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:ElasticCharts","Team:Visualizations","release_note:skip","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0"],"title":"[Charts]
Use chartTheme hook
everywhere","number":217370,"url":"https://github.com/elastic/kibana/pull/217370","mergeCommit":{"message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217370","number":217370,"mergeCommit":{"message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@markov00 markov00 added the v9.0.2 label May 9, 2025
@nickofthyme
Copy link
Contributor

@markov00 I removed the v9.0.x label.

@markov00
Copy link
Contributor Author

💚 All backports created successfully

Status Branch Result
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

markov00 added a commit to markov00/kibana that referenced this pull request Jun 13, 2025
## Summary

This PR fixes the existing usage of the chart themes by using the
provided `useElasticChartsTheme` hook that is color mode aware and theme
adaptive (borealis/amsterdam)

Some charts where using just the Light theme version or the legacy (aka
amsterdam theme), and I've applied the hook to pick up the correct
theme.

TO REVIEWERS: Please pull down the PR and check if the actual changed
charts looks correct with the new theme configuration.

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
(cherry picked from commit a9c9354)

# Conflicts:
#	x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/field_data_row/column_chart.tsx
#	x-pack/platform/plugins/private/data_visualizer/public/application/common/components/stats_table/components/metric_distribution_chart/metric_distribution_chart.tsx
#	x-pack/platform/plugins/shared/dataset_quality/tsconfig.json
#	x-pack/platform/plugins/shared/streams_app/public/components/data_management/stream_detail_lifecycle/ingestion_rate.tsx
#	x-pack/platform/plugins/shared/streams_app/public/components/stream_list_view/documents_column.tsx
#	x-pack/solutions/observability/plugins/profiling/tsconfig.json
#	x-pack/solutions/observability/plugins/streams_app/public/components/esql_chart/controlled_esql_chart.tsx
#	x-pack/solutions/observability/plugins/streams_app/tsconfig.json
#	x-pack/solutions/security/plugins/security_solution/public/common/components/charts/common.test.tsx
#	x-pack/solutions/security/plugins/threat_intelligence/tsconfig.json
markov00 added a commit that referenced this pull request Jun 13, 2025
# Backport

This will backport the following commits from `main` to `9.0`:
- [[Charts] Use chartTheme hook everywhere
(#217370)](#217370)

<!--- Backport version: 10.0.0 -->

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

<!--BACKPORT [{"author":{"name":"Marco
Vettorello","email":"marco.vettorello@elastic.co"},"sourceCommit":{"committedDate":"2025-04-14T16:09:15Z","message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:ElasticCharts","Team:Visualizations","release_note:skip","Team:obs-ux-infra_services","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0"],"title":"[Charts]
Use chartTheme hook
everywhere","number":217370,"url":"https://github.com/elastic/kibana/pull/217370","mergeCommit":{"message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/217370","number":217370,"mergeCommit":{"message":"[Charts]
Use chartTheme hook everywhere (#217370)\n\n## Summary\n\nThis PR fixes
the existing usage of the chart themes by using the\nprovided
`useElasticChartsTheme` hook that is color mode aware and
theme\nadaptive (borealis/amsterdam)\n\nSome charts where using just the
Light theme version or the legacy (aka\namsterdam theme), and I've
applied the hook to pick up the correct\ntheme.\n\nTO REVIEWERS: Please
pull down the PR and check if the actual changed\ncharts looks correct
with the new theme configuration.\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Anton
Dosov
<anton.dosov@elastic.co>","sha":"a9c9354382d0e52d7790fecf653f4c7758e3703b"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/218147","number":218147,"state":"MERGED","mergeCommit":{"sha":"13af80f2d4aaf30a0a1ffa76fbc24cf2d0d995a0","message":"[8.x]
[Charts] Use chartTheme hook everywhere (#217370) (#218147)\n\n#
Backport\n\nThis will backport the following commits from `main` to
`8.x`:\n- [[Charts] Use chartTheme hook
everywhere\n(#217370)](https://github.com/elastic/kibana/pull/217370)\n\n\n\n###
Questions ?\nPlease refer to the [Backport
tool\ndocumentation](https://github.com/sorenlouv/backport)\n\n\n\n---------\n\nCo-authored-by:
kibanamachine <42973632+kibanamachine@users.noreply.github.com>"}}]}]
BACKPORT-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport:version Backport to applied version labels Feature:ElasticCharts Issues related to the elastic-charts library release_note:skip Skip the PR/issue when compiling release notes Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. Team:Visualizations Team label for Lens, elastic-charts, Graph, legacy editors (TSVB, Visualize, Timelion) t// v8.19.0 v9.0.3 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.