Skip to content

[8.x] [Charts] Use chartTheme hook everywhere (#217370)#218147

Merged
markov00 merged 7 commits intoelastic:8.xfrom
markov00:backport/8.x/pr-217370
Apr 15, 2025
Merged

[8.x] [Charts] Use chartTheme hook everywhere (#217370)#218147
markov00 merged 7 commits intoelastic:8.xfrom
markov00:backport/8.x/pr-217370

Conversation

@markov00
Copy link
Contributor

Backport

This will backport the following commits from main to 8.x:

Questions ?

Please refer to the Backport tool documentation

## 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 markov00 requested a review from kibanamachine as a code owner April 14, 2025 17:06
@markov00 markov00 added the backport This PR is a backport of another PR label Apr 14, 2025
@markov00 markov00 enabled auto-merge (squash) April 14, 2025 17:06
@botelastic botelastic bot added Team:obs-ux-infra_services - DEPRECATED DEPRECATED - Use Team:obs-presentation. Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. labels Apr 14, 2025
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-infra_services-team (Team:obs-ux-infra_services)

@markov00 markov00 merged commit 13af80f into elastic:8.x Apr 15, 2025
8 checks passed
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
datasetQuality 307 308 +1
dataVisualizer 743 744 +1
enterpriseSearch 2330 2331 +1
expressionTagcloud 151 152 +1
profiling 289 290 +1
streamsApp 441 442 +1
threatIntelligence 176 177 +1
transform 705 706 +1
triggersActionsUi 746 747 +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.7MB 2.7MB +137.0B
datasetQuality 241.8KB 242.0KB +165.0B
dataVisualizer 616.8KB 617.2KB +426.0B
enterpriseSearch 2.5MB 2.5MB +126.0B
expressionTagcloud 13.0KB 13.1KB +124.0B
filesManagement 115.6KB 115.6KB +29.0B
ml 5.4MB 5.4MB +526.0B
profiling 380.5KB 380.6KB +126.0B
securitySolution 9.1MB 9.1MB +50.0B
slo 923.7KB 923.7KB +4.0B
streamsApp 405.7KB 405.5KB -169.0B
synthetics 1.1MB 1.1MB -7.0B
threatIntelligence 754.2KB 754.4KB +140.0B
transform 626.9KB 627.0KB +126.0B
triggersActionsUi 1.4MB 1.4MB +126.0B
total +1.9KB

Page load bundle

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

id before after diff
dataVisualizer 28.2KB 28.2KB +3.0B
expressionTagcloud 10.9KB 10.9KB -2.0B
total +1.0B

History

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 This PR is a backport of another PR 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.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants