mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 01:38:56 -04:00
Update dependency @elastic/charts to v68.0.4 (main) (#203955)
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 (@​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 ([#​2571](https://togithub.com/elastic/elastic-charts/issues/2571)) ([8dae2c1](8dae2c1f4c)) ##### Performance Improvements - fix unnecessary re-render ([#​2573](https://togithub.com/elastic/elastic-charts/issues/2573)) ([feacfd6](feacfd6247)) </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 <nicholas.partridge@elastic.co> Co-authored-by: adcoelho <antonio.coelho@elastic.co> Co-authored-by: Marco Vettorello <marco.vettorello@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
elastic-renovate-prod[bot]
GitHub
parent
4f4772f63e
commit
841bf73684
39 changed files with 174 additions and 119 deletions
1
.github/CODEOWNERS
vendored
1
.github/CODEOWNERS
vendored
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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', {
|
||||
|
|
@ -26,8 +29,7 @@ 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;
|
||||
|
||||
|
|
@ -35,11 +37,7 @@ export const ViewsChart = ({ data }: { data: Array<[week: number, views: number]
|
|||
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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
packages/kbn-charts-theme/README.md
Normal file
24
packages/kbn-charts-theme/README.md
Normal file
|
|
@ -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
packages/kbn-charts-theme/index.ts
Normal file
23
packages/kbn-charts-theme/index.ts
Normal file
|
|
@ -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
packages/kbn-charts-theme/jest.config.js
Normal file
14
packages/kbn-charts-theme/jest.config.js
Normal file
|
|
@ -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
packages/kbn-charts-theme/kibana.jsonc
Normal file
5
packages/kbn-charts-theme/kibana.jsonc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"type": "shared-common",
|
||||
"id": "@kbn/charts-theme",
|
||||
"owner": "@elastic/kibana-visualizations"
|
||||
}
|
||||
6
packages/kbn-charts-theme/package.json
Normal file
6
packages/kbn-charts-theme/package.json
Normal file
|
|
@ -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
packages/kbn-charts-theme/tsconfig.json
Normal file
19
packages/kbn-charts-theme/tsconfig.json
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"extends": "../../tsconfig.base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "target/types",
|
||||
"types": [
|
||||
"jest",
|
||||
"node",
|
||||
"react"
|
||||
]
|
||||
},
|
||||
"include": [
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
],
|
||||
"exclude": [
|
||||
"target/**/*"
|
||||
],
|
||||
"kbn_references": []
|
||||
}
|
||||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"],
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
*/
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
|
||||
import { EuiFlexItem, EuiPanel, EuiTitle, useEuiTheme } from '@elastic/eui';
|
||||
import { EuiFlexItem, EuiPanel, EuiTitle } from '@elastic/eui';
|
||||
import {
|
||||
Chart,
|
||||
Axis,
|
||||
|
|
@ -14,10 +14,9 @@ import {
|
|||
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';
|
||||
|
|
@ -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));
|
||||
|
||||
|
|
@ -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 }}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@
|
|||
"@kbn/datemath",
|
||||
"@kbn/ui-theme",
|
||||
"@kbn/i18n-react",
|
||||
"@kbn/charts-theme",
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
|
|
@ -136,5 +136,6 @@
|
|||
"@kbn/core-saved-objects-api-server",
|
||||
"@kbn/core-ui-settings-server",
|
||||
"@kbn/core-security-server",
|
||||
"@kbn/charts-theme",
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,8 +10,6 @@ import {
|
|||
Axis,
|
||||
BarSeries,
|
||||
Chart,
|
||||
LIGHT_THEME,
|
||||
DARK_THEME,
|
||||
LineAnnotation,
|
||||
Position,
|
||||
RectAnnotation,
|
||||
|
|
@ -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';
|
||||
|
|
@ -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';
|
||||
|
||||
|
|
@ -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 }]}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@
|
|||
"@kbn/alerting-comparators",
|
||||
"@kbn/saved-search-component",
|
||||
"@kbn/saved-search-plugin",
|
||||
"@kbn/charts-theme",
|
||||
"@kbn/entityManager-plugin",
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
*/
|
||||
import React from 'react';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
|
||||
import { LIGHT_THEME } from '@elastic/charts';
|
||||
import { EuiPanel } from '@elastic/eui';
|
||||
import {
|
||||
ALERT_CONTEXT,
|
||||
|
|
@ -20,6 +19,7 @@ import { EuiTitle } from '@elastic/eui';
|
|||
import { i18n } from '@kbn/i18n';
|
||||
import { getPaddedAlertTimeRange } from '@kbn/observability-get-padded-alert-time-range-util';
|
||||
import { get, identity } from 'lodash';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useLogView } from '@kbn/logs-shared-plugin/public';
|
||||
import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
|
||||
import {
|
||||
|
|
@ -40,6 +40,7 @@ const formatThreshold = (threshold: number) => String(threshold);
|
|||
const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) => {
|
||||
const { logsShared } = useKibanaContextForPlugin().services;
|
||||
const theme = useTheme();
|
||||
const baseTheme = useElasticChartsTheme();
|
||||
const timeRange = getPaddedAlertTimeRange(alert.fields[ALERT_START]!, alert.fields[ALERT_END]);
|
||||
const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined;
|
||||
const interval = `${rule.params.timeSize}${rule.params.timeUnit}`;
|
||||
|
|
@ -93,7 +94,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
|
|||
<EuiSpacer size="s" />
|
||||
<Threshold
|
||||
title={`Threshold breached`}
|
||||
chartProps={{ theme, baseTheme: LIGHT_THEME }}
|
||||
chartProps={{ theme, baseTheme }}
|
||||
comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
|
||||
id={'threshold-ratio-chart'}
|
||||
thresholds={[rule.params.count.value]}
|
||||
|
|
@ -160,7 +161,7 @@ const AlertDetailsAppSection = ({ rule, alert }: AlertDetailsAppSectionProps) =>
|
|||
<EuiSpacer size="s" />
|
||||
<Threshold
|
||||
title={`Threshold breached`}
|
||||
chartProps={{ theme, baseTheme: LIGHT_THEME }}
|
||||
chartProps={{ theme, baseTheme }}
|
||||
comparator={ComparatorToi18nSymbolsMap[rule.params.count.comparator]}
|
||||
id="logCountThreshold"
|
||||
thresholds={[rule.params.count.value]}
|
||||
|
|
|
|||
|
|
@ -115,7 +115,8 @@
|
|||
"@kbn/observability-utils-server",
|
||||
"@kbn/core-plugins-server",
|
||||
"@kbn/config",
|
||||
"@kbn/observability-utils-common"
|
||||
"@kbn/observability-utils-common",
|
||||
"@kbn/charts-theme"
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,12 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { LIGHT_THEME, DARK_THEME, PartialTheme } from '@elastic/charts';
|
||||
import { useEuiTheme, COLOR_MODES_STANDARD } from '@elastic/eui';
|
||||
import { PartialTheme, Theme } from '@elastic/charts';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export function useChartThemes() {
|
||||
const theme = useEuiTheme();
|
||||
const baseTheme = theme.colorMode === COLOR_MODES_STANDARD.dark ? DARK_THEME : LIGHT_THEME;
|
||||
export function useChartThemes(): { baseTheme: Theme; theme: PartialTheme[] } {
|
||||
const baseTheme = useElasticChartsTheme();
|
||||
|
||||
return useMemo(() => {
|
||||
const themeOverrides: PartialTheme = {
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
"@kbn/es-query",
|
||||
"@kbn/serverless",
|
||||
"@kbn/data-views-plugin",
|
||||
"@kbn/charts-theme",
|
||||
"@kbn/deeplinks-observability",
|
||||
],
|
||||
"exclude": ["target/**/*", ".storybook/**/*.js"]
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ import { KibanaThemeProvider, KibanaServices } from '@kbn/kibana-react-plugin/pu
|
|||
import { EuiThemeProvider } from '@kbn/kibana-react-plugin/common';
|
||||
import type { NotificationsStart, ApplicationStart } from '@kbn/core/public';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import { DARK_THEME, LIGHT_THEME } from '@elastic/charts';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { KibanaContextProvider } from '../public/common/lib/kibana';
|
||||
import { ExperimentalFeaturesService } from '../public/common/experimental_features_service';
|
||||
import { getHttp } from './context/http';
|
||||
|
|
@ -74,6 +74,9 @@ export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDec
|
|||
isUsingRuleCreateFlyout: false,
|
||||
},
|
||||
});
|
||||
|
||||
const baseTheme = useElasticChartsTheme();
|
||||
|
||||
return (
|
||||
<I18nProvider>
|
||||
<EuiThemeProvider darkMode={darkMode}>
|
||||
|
|
@ -99,7 +102,7 @@ export const StorybookContextDecorator: FC<PropsWithChildren<StorybookContextDec
|
|||
ruleTypeRegistry: getRuleTypeRegistry(),
|
||||
charts: {
|
||||
theme: {
|
||||
useChartsBaseTheme: () => (darkMode ? DARK_THEME : LIGHT_THEME),
|
||||
useChartsBaseTheme: () => baseTheme,
|
||||
useSparklineOverrides: () => ({
|
||||
lineSeriesStyle: {
|
||||
point: {
|
||||
|
|
|
|||
|
|
@ -74,7 +74,8 @@
|
|||
"@kbn/core-application-browser",
|
||||
"@kbn/cloud-plugin",
|
||||
"@kbn/response-ops-rule-form",
|
||||
"@kbn/core-user-profile-browser-mocks"
|
||||
"@kbn/core-user-profile-browser-mocks",
|
||||
"@kbn/charts-theme"
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,14 +5,12 @@
|
|||
* 2.0.
|
||||
*/
|
||||
|
||||
import { DARK_THEME, LIGHT_THEME, PartialTheme } from '@elastic/charts';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { PartialTheme } from '@elastic/charts';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export function useChartTheme() {
|
||||
const theme = useEuiTheme();
|
||||
|
||||
const baseTheme = theme.colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME;
|
||||
const baseTheme = useElasticChartsTheme();
|
||||
|
||||
return useMemo(() => {
|
||||
const themeOverrides: PartialTheme = {
|
||||
|
|
|
|||
|
|
@ -80,6 +80,7 @@
|
|||
"@kbn/observability-ai-common",
|
||||
"@kbn/llm-tasks-plugin",
|
||||
"@kbn/product-doc-common",
|
||||
"@kbn/charts-theme",
|
||||
"@kbn/ai-assistant-icon",
|
||||
],
|
||||
"exclude": [
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
|
|||
import { css } from '@emotion/react';
|
||||
import { Chart, Settings, Metric, MetricTrendShape } from '@elastic/charts';
|
||||
import { EuiPanel, EuiSpacer } from '@elastic/eui';
|
||||
import { DARK_THEME } from '@elastic/charts';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useTheme } from '@kbn/observability-shared-plugin/public';
|
||||
import moment from 'moment';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
|
@ -132,8 +132,7 @@ export const MetricItem = ({
|
|||
});
|
||||
}
|
||||
}}
|
||||
// TODO connect to charts.theme service see src/plugins/charts/public/services/theme/README.md
|
||||
baseTheme={DARK_THEME}
|
||||
baseTheme={useElasticChartsTheme()}
|
||||
locale={i18n.getLocale()}
|
||||
/>
|
||||
<Metric
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import {
|
|||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useAppFixedViewport } from '@kbn/core-rendering-browser';
|
||||
import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { BAR_HEIGHT } from './constants';
|
||||
import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
|
||||
import { WaterfallData } from '../../common/network_data/types';
|
||||
|
|
@ -80,7 +80,7 @@ export const WaterfallBarChart = ({
|
|||
barStyleAccessor,
|
||||
index,
|
||||
}: Props) => {
|
||||
const baseChartTheme = useBaseChartTheme();
|
||||
const baseChartTheme = useElasticChartsTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
const { onElementClick, onProjectionClick } = useWaterfallContext();
|
||||
const handleElementClick = useMemo(() => onElementClick, [onElementClick]);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import {
|
|||
} from '@elastic/charts';
|
||||
import { useEuiTheme } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useBaseChartTheme } from '../../../../../../hooks/use_base_chart_theme';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { WaterfallChartFixedAxisContainer } from './styles';
|
||||
import { WaterfallChartMarkers } from './waterfall_marker/waterfall_markers';
|
||||
|
||||
|
|
@ -32,7 +32,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
|
||||
const baseChartTheme = useBaseChartTheme();
|
||||
const baseChartTheme = useElasticChartsTheme();
|
||||
const { euiTheme } = useEuiTheme();
|
||||
|
||||
return (
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
/*
|
||||
* 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; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
|
||||
import { useMemo } from 'react';
|
||||
import { useDarkMode } from '@kbn/kibana-react-plugin/public';
|
||||
|
||||
export const useBaseChartTheme = (): Theme => {
|
||||
const darkMode = useDarkMode(false);
|
||||
|
||||
return useMemo(() => {
|
||||
return darkMode ? DARK_THEME : LIGHT_THEME;
|
||||
}, [darkMode]);
|
||||
};
|
||||
|
|
@ -107,7 +107,8 @@
|
|||
"@kbn/core-rendering-browser",
|
||||
"@kbn/index-lifecycle-management-common-shared",
|
||||
"@kbn/core-http-server-utils",
|
||||
"@kbn/apm-data-access-plugin"
|
||||
"@kbn/apm-data-access-plugin",
|
||||
"@kbn/charts-theme"
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ import {
|
|||
Tooltip,
|
||||
} from '@elastic/charts';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { useAppFixedViewport } from '@kbn/core-rendering-browser';
|
||||
import { BAR_HEIGHT } from './constants';
|
||||
import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
|
||||
import { WaterfallChartChartContainer, WaterfallChartTooltip } from './styles';
|
||||
import { useWaterfallContext, WaterfallData } from '..';
|
||||
import { WaterfallTooltipContent } from './waterfall_tooltip_content';
|
||||
|
|
@ -76,7 +76,7 @@ export const WaterfallBarChart = ({
|
|||
barStyleAccessor,
|
||||
index,
|
||||
}: Props) => {
|
||||
const baseChartTheme = useBaseChartTheme();
|
||||
const baseChartTheme = useElasticChartsTheme();
|
||||
const { onElementClick, onProjectionClick } = useWaterfallContext();
|
||||
const handleElementClick = useMemo(() => onElementClick, [onElementClick]);
|
||||
const handleProjectionClick = useMemo(() => onProjectionClick, [onProjectionClick]);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import {
|
|||
Tooltip,
|
||||
} from '@elastic/charts';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
import { useBaseChartTheme } from '../../../../../hooks/use_base_chart_theme';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { WaterfallChartFixedAxisContainer } from './styles';
|
||||
import { WaterfallChartMarkers } from './waterfall_markers';
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ interface Props {
|
|||
}
|
||||
|
||||
export const WaterfallChartFixedAxis = ({ tickFormat, domain, barStyleAccessor }: Props) => {
|
||||
const baseChartTheme = useBaseChartTheme();
|
||||
const baseChartTheme = useElasticChartsTheme();
|
||||
|
||||
return (
|
||||
<WaterfallChartFixedAxisContainer>
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
/*
|
||||
* 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; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useDarkMode } from '@kbn/kibana-react-plugin/public';
|
||||
import { DARK_THEME, LIGHT_THEME, Theme } from '@elastic/charts';
|
||||
|
||||
export const useBaseChartTheme = (): Theme => {
|
||||
const darkMode = useDarkMode();
|
||||
return useMemo(() => {
|
||||
return darkMode ? DARK_THEME : LIGHT_THEME;
|
||||
}, [darkMode]);
|
||||
};
|
||||
|
|
@ -78,6 +78,7 @@
|
|||
"@kbn/deeplinks-observability",
|
||||
"@kbn/ebt-tools",
|
||||
"@kbn/core-rendering-browser",
|
||||
"@kbn/charts-theme",
|
||||
"@kbn/charts-plugin",
|
||||
],
|
||||
"exclude": ["target/**/*"]
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ import {
|
|||
EuiBasicTable,
|
||||
EuiHealth,
|
||||
EuiText,
|
||||
useEuiTheme,
|
||||
} from '@elastic/eui';
|
||||
import { Chart, BarSeries, Settings, ScaleType, DARK_THEME, LIGHT_THEME } from '@elastic/charts';
|
||||
import { Chart, BarSeries, Settings, ScaleType } from '@elastic/charts';
|
||||
import { SecurityPageName } from '@kbn/security-solution-navigation';
|
||||
import { AssistantIcon } from '@kbn/ai-assistant-icon';
|
||||
import { useElasticChartsTheme } from '@kbn/charts-theme';
|
||||
import { PanelText } from '../../../../common/components/panel_text';
|
||||
import {
|
||||
convertTranslationResultIntoText,
|
||||
|
|
@ -120,7 +120,7 @@ MigrationResultPanel.displayName = 'MigrationResultPanel';
|
|||
const TranslationResultsChart = React.memo<{
|
||||
translationStats: RuleMigrationTranslationStats;
|
||||
}>(({ translationStats }) => {
|
||||
const { colorMode } = useEuiTheme();
|
||||
const baseTheme = useElasticChartsTheme();
|
||||
const translationResultColors = useResultVisColors();
|
||||
const data = [
|
||||
{
|
||||
|
|
@ -154,11 +154,7 @@ const TranslationResultsChart = React.memo<{
|
|||
|
||||
return (
|
||||
<Chart size={{ height: 130 }}>
|
||||
<Settings
|
||||
showLegend={false}
|
||||
rotation={90}
|
||||
baseTheme={colorMode === 'DARK' ? DARK_THEME : LIGHT_THEME}
|
||||
/>
|
||||
<Settings showLegend={false} rotation={90} baseTheme={baseTheme} />
|
||||
<BarSeries
|
||||
id="results"
|
||||
name="Results"
|
||||
|
|
|
|||
|
|
@ -235,6 +235,7 @@
|
|||
"@kbn/index-adapter",
|
||||
"@kbn/core-http-server-utils",
|
||||
"@kbn/llm-tasks-plugin",
|
||||
"@kbn/ai-assistant-icon"
|
||||
"@kbn/ai-assistant-icon",
|
||||
"@kbn/charts-theme"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
12
yarn.lock
12
yarn.lock
|
|
@ -2206,10 +2206,10 @@
|
|||
dependencies:
|
||||
object-hash "^1.3.0"
|
||||
|
||||
"@elastic/charts@68.0.3":
|
||||
version "68.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-68.0.3.tgz#dc4aaeb4cdc8751d5759b58dc9958efb3c2639da"
|
||||
integrity sha512-U+NCTo2LCDDSVkV5kGinhzbiAvfEcVAZ4D2YM/0RZQFRvJfJBvelbG+jDkt6N2mEauJ4ECDDcb33995fbs71TA==
|
||||
"@elastic/charts@68.0.4":
|
||||
version "68.0.4"
|
||||
resolved "https://registry.yarnpkg.com/@elastic/charts/-/charts-68.0.4.tgz#b35a4734e4e36ef894432a3ff882a0e4329ffe4c"
|
||||
integrity sha512-kn9FEm2osJBitbbqCRcuZ3ygrLHelUm9i9bCAcY/t3vXfT7tDjhvgueAjm5gQas7/NcASN8LWEykLktGo3mrxQ==
|
||||
dependencies:
|
||||
"@popperjs/core" "^2.11.8"
|
||||
bezier-easing "^2.1.0"
|
||||
|
|
@ -4105,6 +4105,10 @@
|
|||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@kbn/charts-theme@link:packages/kbn-charts-theme":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
||||
"@kbn/check-mappings-update-cli@link:packages/kbn-check-mappings-update-cli":
|
||||
version "0.0.0"
|
||||
uid ""
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue