Skip to content

Commit

Permalink
Update dependency @elastic/charts to v68.0.4 (main) (#203955)
Browse files Browse the repository at this point in the history
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@elastic/charts](https://togithub.com/elastic/elastic-charts) |
dependencies | patch | [`68.0.3` ->
`68.0.4`](https://renovatebot.com/diffs/npm/@elastic%2fcharts/68.0.3/68.0.4)
|

This version of charts exports a helper function to correct an issue
with the chart background color for the new Borealis theme. In addition
to this we created a simplified hook `useElasticChartsTheme` from the
`@kbn/charts-theme` package which reads the `euiTheme`.


```diff
-import { Chart, Settings, LIGHT_THEME, DARK_THEME } from '@elastic/charts';
+import { Chart, Settings } from '@elastic/charts';
-import { useEuiTheme } from '@elastic/eui';

+import { useElasticChartsTheme } from '@kbn/charts-theme';
 
 export function MyComponent() {
-  const euiTheme = useEuiTheme();
-  const baseTheme = euiTheme.colorMode === 'LIGHT' ? LIGHT_THEME : DARK_THEME;
+  const baseTheme = useElasticChartsTheme();
 
   return (
     <Chart>
       <Settings
         baseTheme={baseTheme}
         {/* ... */}
       />
       {/* ... */}
     </Chart>
   )
 }
```


---

### Release Notes

<details>
<summary>elastic/elastic-charts (@&#8203;elastic/charts)</summary>

###
[`v68.0.4`](https://togithub.com/elastic/elastic-charts/blob/HEAD/CHANGELOG.md#6804-2024-12-11)

[Compare
Source](https://togithub.com/elastic/elastic-charts/compare/v68.0.3...v68.0.4)

##### Bug Fixes

- **xy:** compute per series and global minPointsDistance
([#&#8203;2571](https://togithub.com/elastic/elastic-charts/issues/2571))
([8dae2c1](https://togithub.com/elastic/elastic-charts/commit/8dae2c1f4c99146aa757b2d3eec9d72846248cc7))

##### Performance Improvements

- fix unnecessary re-render
([#&#8203;2573](https://togithub.com/elastic/elastic-charts/issues/2573))
([feacfd6](https://togithub.com/elastic/elastic-charts/commit/feacfd6247b9580a8d32bc5d6284329b2035c1ba))

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you
are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Renovate
Bot](https://togithub.com/renovatebot/renovate).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy40MjUuMSIsInVwZGF0ZWRJblZlciI6IjM3LjQyNS4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6WyJUZWFtOlZpc3VhbGl6YXRpb25zIiwiYmFja3BvcnQ6cHJldi1taW5vciIsInJlbGVhc2Vfbm90ZTpza2lwIl19-->

---------

Co-authored-by: elastic-renovate-prod[bot] <174716857+elastic-renovate-prod[bot]@users.noreply.github.com>
Co-authored-by: nickofthyme <[email protected]>
Co-authored-by: adcoelho <[email protected]>
Co-authored-by: Marco Vettorello <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
  • Loading branch information
5 people authored Dec 19, 2024
1 parent 4f4772f commit 841bf73
Show file tree
Hide file tree
Showing 39 changed files with 174 additions and 119 deletions.
1 change: 1 addition & 0 deletions .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,7 @@ packages/kbn-capture-oas-snapshot-cli @elastic/kibana-core
packages/kbn-cases-components @elastic/response-ops
packages/kbn-cbor @elastic/kibana-operations
packages/kbn-chart-icons @elastic/kibana-visualizations
packages/kbn-charts-theme @elastic/kibana-visualizations
packages/kbn-check-mappings-update-cli @elastic/kibana-core
packages/kbn-check-prod-native-modules-cli @elastic/kibana-operations
packages/kbn-ci-stats-core @elastic/kibana-operations
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
"@elastic/apm-rum": "^5.16.1",
"@elastic/apm-rum-core": "^5.21.1",
"@elastic/apm-rum-react": "^2.0.3",
"@elastic/charts": "68.0.3",
"@elastic/charts": "68.0.4",
"@elastic/datemath": "5.0.3",
"@elastic/ebt": "^1.1.1",
"@elastic/ecs": "^8.11.1",
Expand Down Expand Up @@ -209,6 +209,7 @@
"@kbn/chart-expressions-common": "link:src/plugins/chart_expressions/common",
"@kbn/chart-icons": "link:packages/kbn-chart-icons",
"@kbn/charts-plugin": "link:src/plugins/charts",
"@kbn/charts-theme": "link:packages/kbn-charts-theme",
"@kbn/cloud": "link:packages/cloud",
"@kbn/cloud-chat-plugin": "link:x-pack/plugins/cloud_integrations/cloud_chat",
"@kbn/cloud-data-migration-plugin": "link:x-pack/platform/plugins/private/cloud_integrations/cloud_data_migration",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@
*/

import React from 'react';
import { Chart, Settings, DARK_THEME, LIGHT_THEME, BarSeries, Axis } from '@elastic/charts';
import { formatDate, useEuiTheme } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import moment from 'moment';

import { Chart, Settings, BarSeries, Axis } from '@elastic/charts';
import { formatDate } from '@elastic/eui';

import { i18n } from '@kbn/i18n';
import { useElasticChartsTheme } from '@kbn/charts-theme';

const dateFormatter = (d: Date) => formatDate(d, `MM/DD`);

const seriesName = i18n.translate('contentManagement.contentEditor.viewsStats.viewsLabel', {
Expand All @@ -26,20 +29,15 @@ const weekOfFormatter = (date: Date) =>
});

export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]> }) => {
const { colorMode } = useEuiTheme();

const baseTheme = useElasticChartsTheme();
const momentDow = moment().localeData().firstDayOfWeek(); // configured from advanced settings
const isoDow = momentDow === 0 ? 7 : momentDow;

const momentTz = moment().tz(); // configured from advanced settings

return (
<Chart size={{ height: 240 }}>
<Settings
baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
showLegend={false}
dow={isoDow}
/>
<Settings baseTheme={baseTheme} showLegend={false} dow={isoDow} />
<BarSeries
id="viewsOverTime"
name={seriesName}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,5 +28,6 @@
"@kbn/core-http-browser",
"@kbn/content-management-content-insights-server",
"@kbn/content-management-table-list-view-common",
"@kbn/charts-theme",
]
}
24 changes: 24 additions & 0 deletions packages/kbn-charts-theme/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# @kbn/charts-theme

A temporary package to provide a hook for getting `@elastic/charts` theme based on `@elastic/eui` theme.

To be refactored to be consumed from `ElasticChartsProvider`.

```tsx
import { useElasticChartsTheme } from '@kbn/charts-theme';
import { Chart, Settings } from '@elastic/charts';

export function MyComponent() {
const baseTheme = useElasticChartsTheme();

return (
<Chart>
<Settings
baseTheme={baseTheme}
{/* ... */}
/>
{/* ... */}
</Chart>
)
}
```
23 changes: 23 additions & 0 deletions packages/kbn-charts-theme/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/

import { type Theme, getChartsTheme } from '@elastic/charts';
import { useEuiTheme } from '@elastic/eui';
import { useMemo } from 'react';

/**
* A hook used to get the `@elastic/charts` theme based on the current eui theme.
*/
export function useElasticChartsTheme(): Theme {
const { euiTheme, colorMode } = useEuiTheme();
return useMemo(
() => getChartsTheme(euiTheme.themeName, colorMode),
[colorMode, euiTheme.themeName]
);
}
14 changes: 14 additions & 0 deletions packages/kbn-charts-theme/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the "Elastic License
* 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
* Public License v 1"; you may not use this file except in compliance with, at
* your election, the "Elastic License 2.0", the "GNU Affero General Public
* License v3.0 only", or the "Server Side Public License, v 1".
*/

module.exports = {
preset: '@kbn/test',
rootDir: '../..',
roots: ['<rootDir>/packages/kbn-charts-theme'],
};
5 changes: 5 additions & 0 deletions packages/kbn-charts-theme/kibana.jsonc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"type": "shared-common",
"id": "@kbn/charts-theme",
"owner": "@elastic/kibana-visualizations"
}
6 changes: 6 additions & 0 deletions packages/kbn-charts-theme/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"name": "@kbn/charts-theme",
"private": true,
"version": "1.0.0",
"license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
}
19 changes: 19 additions & 0 deletions packages/kbn-charts-theme/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"extends": "../../tsconfig.base.json",
"compilerOptions": {
"outDir": "target/types",
"types": [
"jest",
"node",
"react"
]
},
"include": [
"**/*.ts",
"**/*.tsx",
],
"exclude": [
"target/**/*"
],
"kbn_references": []
}
2 changes: 1 addition & 1 deletion src/plugins/charts/public/services/theme/theme.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ describe('ThemeService', () => {
});
});

describe('useBaseChartTheme', () => {
describe('useChartsBaseTheme', () => {
it('updates when the theme setting change', () => {
setUpMockTheme.theme$ = createTheme$Mock(false);
const themeService = new ThemeService();
Expand Down
2 changes: 2 additions & 0 deletions tsconfig.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,8 @@
"@kbn/chart-icons/*": ["packages/kbn-chart-icons/*"],
"@kbn/charts-plugin": ["src/plugins/charts"],
"@kbn/charts-plugin/*": ["src/plugins/charts/*"],
"@kbn/charts-theme": ["packages/kbn-charts-theme"],
"@kbn/charts-theme/*": ["packages/kbn-charts-theme/*"],
"@kbn/check-mappings-update-cli": ["packages/kbn-check-mappings-update-cli"],
"@kbn/check-mappings-update-cli/*": ["packages/kbn-check-mappings-update-cli/*"],
"@kbn/check-prod-native-modules-cli": ["packages/kbn-check-prod-native-modules-cli"],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,17 @@
*/
import React, { useCallback, useMemo } from 'react';

import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
import {
Chart,
Axis,
BarSeries,
Settings,
ScaleType,
niceTimeFormatter,
DARK_THEME,
LIGHT_THEME,
LineSeries,
} from '@elastic/charts';
import { useElasticChartsTheme } from '@kbn/charts-theme';
import { i18n } from '@kbn/i18n';
import { LegendAction } from './legend_action';
import { type MetricTypes, type MetricSeries } from '../../../common/rest_types';
Expand Down Expand Up @@ -49,7 +48,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
popoverOpen,
togglePopover,
}) => {
const theme = useEuiTheme();
const baseTheme = useElasticChartsTheme();

const chartTimestamps = series.flatMap((stream) => stream.data.map((d) => d.x));

Expand Down Expand Up @@ -97,7 +96,7 @@ export const ChartPanel: React.FC<ChartPanelProps> = ({
</EuiTitle>
<Chart size={{ height: 200 }}>
<Settings
theme={theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
baseTheme={baseTheme}
showLegend={true}
legendPosition="right"
xDomain={{ min: minTimestamp, max: maxTimestamp }}
Expand Down
1 change: 1 addition & 0 deletions x-pack/platform/plugins/private/data_usage/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
"@kbn/datemath",
"@kbn/ui-theme",
"@kbn/i18n-react",
"@kbn/charts-theme",
],
"exclude": ["target/**/*"]
}
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,18 @@

import type { FC } from 'react';
import React, { useEffect, useState, useCallback, useMemo } from 'react';
import {
Chart,
Settings,
Partition,
PartitionLayout,
DARK_THEME,
LIGHT_THEME,
} from '@elastic/charts';
import { Chart, Settings, Partition, PartitionLayout } from '@elastic/charts';
import { FIELD_FORMAT_IDS } from '@kbn/field-formats-plugin/common';
import type { EuiComboBoxOptionOption } from '@elastic/eui';
import { EuiComboBox, EuiEmptyPrompt, EuiSpacer } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
import { useIsDarkTheme } from '@kbn/ml-kibana-theme';
import { useElasticChartsTheme } from '@kbn/charts-theme';
import type { MemoryUsageInfo } from '../../../../common/types/trained_models';
import type { JobType, MlSavedObjectType } from '../../../../common/types/saved_objects';
import { useTrainedModelsApiService } from '../../services/ml_api_service/trained_models';
import { LoadingWrapper } from '../../jobs/new_job/pages/components/charts/loading_wrapper';
import { useFieldFormatter, useMlKibana } from '../../contexts/kibana';
import { useFieldFormatter } from '../../contexts/kibana';

import { useRefresh } from '../../routing/use_refresh';
import { getMemoryItemColor } from '../memory_item_colors';
Expand Down Expand Up @@ -61,12 +54,7 @@ const TYPE_LABELS_INVERTED = Object.entries(TYPE_LABELS).reduce<Record<MlSavedOb
);

export const JobMemoryTreeMap: FC<Props> = ({ node, type, height }) => {
const {
services: { theme: themeService },
} = useMlKibana();
const isDarkTheme = useIsDarkTheme(themeService);

const baseTheme = useMemo(() => (isDarkTheme ? DARK_THEME : LIGHT_THEME), [isDarkTheme]);
const baseTheme = useElasticChartsTheme();

const { isADEnabled, isDFAEnabled, isNLPEnabled } = useEnabledFeatures();

Expand Down
1 change: 1 addition & 0 deletions x-pack/platform/plugins/shared/ml/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -136,5 +136,6 @@
"@kbn/core-saved-objects-api-server",
"@kbn/core-ui-settings-server",
"@kbn/core-security-server",
"@kbn/charts-theme",
]
}
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@ import {
Axis,
BarSeries,
Chart,
LIGHT_THEME,
DARK_THEME,
LineAnnotation,
Position,
RectAnnotation,
Expand All @@ -22,13 +20,14 @@ import {
Tooltip,
niceTimeFormatter,
} from '@elastic/charts';
import { COLOR_MODES_STANDARD, EuiSpacer, useEuiTheme } from '@elastic/eui';
import { EuiSpacer, useEuiTheme } from '@elastic/eui';
import React, { useMemo } from 'react';
import { IUiSettingsClient } from '@kbn/core/public';
import { TimeUnitChar } from '@kbn/observability-plugin/common';
import { UI_SETTINGS } from '@kbn/data-plugin/public';
import moment from 'moment';
import { i18n } from '@kbn/i18n';
import { useElasticChartsTheme } from '@kbn/charts-theme';
import { Coordinate } from '../../../../../typings/timeseries';
import { getTimeZone } from '../../../shared/charts/helper/timezone';
import { TimeLabelForData, TIME_LABELS, getDomain } from './chart_preview_helper';
Expand All @@ -54,6 +53,7 @@ export function ChartPreview({
totalGroups,
}: ChartPreviewProps) {
const theme = useEuiTheme();
const baseTheme = useElasticChartsTheme();
const thresholdOpacity = 0.3;
const DEFAULT_DATE_FORMAT = 'Y-MM-DD HH:mm:ss';

Expand Down Expand Up @@ -122,7 +122,7 @@ export function ChartPreview({
legendPosition={'bottom'}
legendSize={legendSize}
locale={i18n.getLocale()}
theme={theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME}
baseTheme={baseTheme}
/>
<LineAnnotation
dataValues={[{ dataValue: threshold }]}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,12 @@ import {
ScaleType,
Settings,
Tooltip,
LIGHT_THEME,
DARK_THEME,
LegendValue,
} from '@elastic/charts';
import { EuiTitle, useEuiTheme } from '@elastic/eui';
import { EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { useElasticChartsTheme } from '@kbn/charts-theme';
import { useApmPluginContext } from '../../../../context/apm_plugin/use_apm_plugin_context';
import { useLegacyUrlParams } from '../../../../context/url_params_context/use_url_params';
import { FETCH_STATUS } from '../../../../hooks/use_fetcher';
Expand All @@ -41,7 +40,7 @@ interface Props {

export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
const { core } = useApmPluginContext();
const { colorMode } = useEuiTheme();
const baseTheme = useElasticChartsTheme();

const { urlParams } = useLegacyUrlParams();
const { comparisonEnabled } = urlParams;
Expand Down Expand Up @@ -96,7 +95,7 @@ export function ErrorDistribution({ distribution, title, fetchStatus }: Props) {
showLegend
legendValues={[LegendValue.CurrentAndLastValue]}
legendPosition={Position.Bottom}
theme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
baseTheme={baseTheme}
locale={i18n.getLocale()}
/>
<Axis
Expand Down
1 change: 1 addition & 0 deletions x-pack/plugins/observability_solution/apm/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
"@kbn/alerting-comparators",
"@kbn/saved-search-component",
"@kbn/saved-search-plugin",
"@kbn/charts-theme",
"@kbn/entityManager-plugin",
],
"exclude": ["target/**/*"]
Expand Down
Loading

0 comments on commit 841bf73

Please sign in to comment.