From 6f542f399739c869e8dedfaeca72237a3fc9bd76 Mon Sep 17 00:00:00 2001 From: Marco Vettorello Date: Wed, 18 Mar 2020 23:48:42 +0100 Subject: [PATCH] build: update @elastic/charts to v18.1.0 --- package.json | 2 +- packages/kbn-ui-shared-deps/package.json | 2 +- .../__snapshots__/area_decorator.test.js.snap | 6 +----- .../__snapshots__/bar_decorator.test.js.snap | 6 +----- .../views/timeseries/decorators/area_decorator.js | 3 +-- .../views/timeseries/decorators/bar_decorator.js | 3 +-- .../visualizations/views/timeseries/index.js | 1 + .../__snapshots__/xy_expression.test.tsx.snap | 14 +++++++------- .../public/xy_visualization/xy_expression.test.tsx | 11 +++++++++-- .../lens/public/xy_visualization/xy_expression.tsx | 2 +- .../siem/public/components/charts/areachart.tsx | 2 +- .../siem/public/components/charts/barchart.tsx | 2 +- .../siem/public/components/charts/common.tsx | 4 ++-- .../public/components/matrix_histogram/index.tsx | 2 +- .../public/components/matrix_histogram/types.ts | 1 + .../public/components/matrix_histogram/utils.ts | 1 + .../signals_histogram_panel/signals_histogram.tsx | 9 ++++----- .../functional/charts/duration_chart.tsx | 3 ++- .../functional/charts/monitor_bar_series.tsx | 2 +- .../functional/charts/ping_histogram.tsx | 4 ++-- .../components/metrics_explorer/series_chart.tsx | 4 ++-- .../log_entry_rate/sections/log_rate/bar_chart.tsx | 1 + .../pages/metrics/components/chart_section_vis.tsx | 3 ++- .../pages/metrics/components/series_chart.tsx | 4 ++-- .../content_types/boolean_content.tsx | 2 +- .../pages/components/charts/anomaly_chart/line.tsx | 2 +- .../charts/anomaly_chart/model_bounds.tsx | 2 +- .../components/charts/anomaly_chart/scatter.tsx | 2 +- .../charts/event_rate_chart/event_rate_chart.tsx | 2 +- .../threshold/visualization.tsx | 14 ++++---------- .../threshold_watch_edit/watch_visualization.tsx | 1 + yarn.lock | 9 ++++----- 32 files changed, 61 insertions(+), 65 deletions(-) diff --git a/package.json b/package.json index aa9c8f6c40160..9847d029b5ebe 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@babel/core": "^7.5.5", "@babel/register": "^7.7.0", "@elastic/apm-rum": "^4.6.0", - "@elastic/charts": "^17.1.1", + "@elastic/charts": "^18.1.0", "@elastic/datemath": "5.0.2", "@elastic/ems-client": "7.7.0", "@elastic/eui": "20.0.2", diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json index 65fd837ad17c2..c4c93f1658dd3 100644 --- a/packages/kbn-ui-shared-deps/package.json +++ b/packages/kbn-ui-shared-deps/package.json @@ -9,7 +9,7 @@ "kbn:watch": "node scripts/build --watch" }, "devDependencies": { - "@elastic/charts": "^17.1.1", + "@elastic/charts": "^18.1.0", "abortcontroller-polyfill": "^1.4.0", "@elastic/eui": "20.0.2", "@kbn/babel-preset": "1.0.0", diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap index 56504ca11ca39..61775029aa7f5 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/area_decorator.test.js.snap @@ -23,11 +23,7 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/ } } curve={9} - customSeriesColors={ - Array [ - "rgb(0, 156, 224)", - ] - } + color="rgb(0, 156, 224)" data={ Array [ Array [ diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap index 6317973cef536..c337c0dc77a2f 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/__snapshots__/bar_decorator.test.js.snap @@ -15,11 +15,7 @@ exports[`src/legacy/core_plugins/metrics/public/visualizations/views/timeseries/ }, } } - customSeriesColors={ - Array [ - "rgb(0, 156, 224)", - ] - } + color="rgb(0, 156, 224)" data={ Array [ Array [ diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js index 411c0813cad7c..923024ff690a4 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/area_decorator.js @@ -43,7 +43,6 @@ export function AreaSeriesDecorator({ }) { const id = seriesId; const groupId = seriesGroupId; - const customSeriesColors = [color]; const areaSeriesStyle = getAreaStyles({ points, lines, color }); const seriesSettings = { @@ -51,7 +50,7 @@ export function AreaSeriesDecorator({ name, groupId, data, - customSeriesColors, + color, hideInLegend, xAccessor: X_ACCESSOR_INDEX, yAccessors: Y_ACCESSOR_INDEXES, diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js index 9cc8931b48d9f..6d2cd7b8dd935 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/decorators/bar_decorator.js @@ -42,7 +42,6 @@ export function BarSeriesDecorator({ }) { const id = seriesId; const groupId = seriesGroupId; - const customSeriesColors = [color]; const barSeriesStyle = getBarStyles(bars, color); const seriesSettings = { @@ -50,7 +49,7 @@ export function BarSeriesDecorator({ name, groupId, data, - customSeriesColors, + color, hideInLegend, xAccessor: X_ACCESSOR_INDEX, yAccessors: Y_ACCESSOR_INDEXES, diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js index 75554a476bdea..5673f560214c7 100644 --- a/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js +++ b/src/legacy/core_plugins/vis_type_timeseries/public/visualizations/views/timeseries/index.js @@ -99,6 +99,7 @@ export const TimeSeries = ({ ) : null; })} diff --git a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx index f53a1555fa1f4..2ae0e05850a37 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/barchart.tsx @@ -75,7 +75,7 @@ export const BarChartBaseComponent = ({ splitSeriesAccessors={['g']} data={series.value!} stackAccessors={get('configs.series.stackAccessors', chartConfigs)} - customSeriesColors={series.color ? [series.color] : undefined} + color={series.color ? series.color : undefined} /> ) : null; })} diff --git a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx index 7377bcbe7050f..d8429cba1b4fb 100644 --- a/x-pack/legacy/plugins/siem/public/components/charts/common.tsx +++ b/x-pack/legacy/plugins/siem/public/components/charts/common.tsx @@ -38,7 +38,7 @@ export interface ChartData { export interface ChartSeriesConfigs { customHeight?: number; - customSeriesColors?: string[]; + color?: string[]; series?: { xScaleType?: ScaleType | undefined; yScaleType?: ScaleType | undefined; @@ -110,7 +110,7 @@ export const chartDefaultSettings = { rendering: chartDefaultRendering, animatedData: false, showLegend: false, - showLegendDisplayValue: false, + showLegendExtra: false, debug: false, legendPosition: Position.Bottom, }; diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx index cb9afde899cf8..e3e0562424ffb 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/index.tsx @@ -17,7 +17,7 @@ import { BarChart } from '../charts/barchart'; import { HeaderSection } from '../header_section'; import { MatrixLoader } from './matrix_loader'; import { Panel } from '../panel'; -import { getBarchartConfigs, getCustomChartData } from '../../components/matrix_histogram/utils'; +import { getBarchartConfigs, getCustomChartData } from './utils'; import { useQuery } from '../../containers/matrix_histogram'; import { MatrixHistogramProps, diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts index fda4f5d15d95c..a435c7be6c890 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/types.ts @@ -109,6 +109,7 @@ export interface BarchartConfigs { legendPosition: Position; onBrushEnd: UpdateDateRange; showLegend: boolean; + showLegendExtra: boolean; theme: { scales: { barsPadding: number; diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts index ccd1b03eb5474..ddac615cef50a 100644 --- a/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts +++ b/x-pack/legacy/plugins/siem/public/components/matrix_histogram/utils.ts @@ -47,6 +47,7 @@ export const getBarchartConfigs = ({ legendPosition: legendPosition ?? Position.Right, onBrushEnd, showLegend: showLegend ?? true, + showLegendExtra: true, theme: { scales: { barsPadding: 0.08, diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx index 2d9b1ee844b4b..40e5b8abde072 100644 --- a/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx +++ b/x-pack/legacy/plugins/siem/public/pages/detection_engine/components/signals_histogram_panel/signals_histogram.tsx @@ -7,8 +7,6 @@ import { Axis, Chart, - getAxisId, - getSpecId, HistogramBarSeries, Position, Settings, @@ -46,9 +44,9 @@ export const SignalsHistogram = React.memo( const theme = useTheme(); const chartSize: ChartSizeArray = useMemo(() => ['100%', chartHeight], [chartHeight]); - const xAxisId = useMemo(() => getAxisId('signalsHistogramAxisX'), []); - const yAxisId = useMemo(() => getAxisId('signalsHistogramAxisY'), []); - const id = useMemo(() => getSpecId('signalsHistogram'), []); + const xAxisId = 'signalsHistogramAxisX'; + const yAxisId = 'signalsHistogramAxisY'; + const id = 'signalsHistogram'; const yAccessors = useMemo(() => ['y'], []); const splitSeriesAccessors = useMemo(() => ['g'], []); const tickFormat = useMemo(() => histogramDateTimeFormatter([from, to]), [from, to]); @@ -69,6 +67,7 @@ export const SignalsHistogram = React.memo( legendPosition={legendPosition} onBrushEnd={updateDateRange} showLegend + showLegendExtra theme={theme} /> diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx index d4e8e1ad08f0a..6bd4e7431f97a 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/duration_chart.tsx @@ -65,7 +65,8 @@ export const DurationChartComponent = ({ locationDurationLines, loading }: Durat diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx index 0682f2a1b7b1d..6a1e255d308d7 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/monitor_bar_series.tsx @@ -68,7 +68,7 @@ export const MonitorBarSeries = ({ dangerColor, histogramSeries }: MonitorBarSer /> [timestamp, down])} name={i18n.translate('xpack.uptime.monitorList.downLineSeries.downLabel', { defaultMessage: 'Down checks', diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx index 6119d897cbf53..17fa8781b828b 100644 --- a/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/functional/charts/ping_histogram.tsx @@ -122,7 +122,7 @@ export const PingHistogramComponent: React.FC = ({ /> [x, downCount || 0])} id={downSpecId} name={i18n.translate('xpack.uptime.snapshotHistogram.series.downLabel', { @@ -136,7 +136,7 @@ export const PingHistogramComponent: React.FC = ({ yScaleType="linear" /> [x, upCount || 0])} id={upMonitorsId} name={upMonitorsId} diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx index 65911a02c938a..ed7a994dd2bbe 100644 --- a/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx +++ b/x-pack/plugins/infra/public/components/metrics_explorer/series_chart.tsx @@ -66,7 +66,7 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack }: Pr data={series.rows} stackAccessors={stack ? ['timestamp'] : void 0} areaSeriesStyle={seriesAreaStyle} - customSeriesColors={[color]} + color={color} /> ); }; @@ -101,7 +101,7 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) => data={series.rows} stackAccessors={stack ? ['timestamp'] : void 0} barSeriesStyle={seriesBarStyle} - customSeriesColors={[color]} + color={color} /> ); }; diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx index 7969c61bc9f34..3a244b6834c59 100644 --- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx +++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/log_rate/bar_chart.tsx @@ -85,6 +85,7 @@ export const LogEntryRateBarChart: React.FunctionComponent<{ tooltip={tooltipProps} theme={isDarkMode ? DARK_THEME : LIGHT_THEME} showLegend + showLegendExtra legendPosition="right" xDomain={{ min: timeRange.startTime, max: timeRange.endTime }} /> diff --git a/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx index 49e95394deb97..290f0eda452ce 100644 --- a/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/components/chart_section_vis.tsx @@ -120,7 +120,8 @@ export const ChartSectionVis = ({ tooltip={tooltipProps} onBrushEnd={handleTimeChange} theme={getChartTheme(isDarkMode)} - showLegend={true} + showLegend + showLegendExtra legendPosition="right" /> diff --git a/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx b/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx index 4ab45d5f46233..849a5b8922165 100644 --- a/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/components/series_chart.tsx @@ -53,7 +53,7 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => { yAccessors={['value']} data={series.data} areaSeriesStyle={style} - customSeriesColors={color ? [color] : void 0} + color={color ? color : void 0} stackAccessors={stack ? ['timestamp'] : void 0} /> ); @@ -80,7 +80,7 @@ export const BarChart = ({ id, color, series, name, type, stack }: Props) => { yAccessors={['value']} data={series.data} barSeriesStyle={style} - customSeriesColors={color ? [color] : void 0} + color={color ? color : void 0} stackAccessors={stack ? ['timestamp'] : void 0} /> ); diff --git a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx index c7277295b4c4f..02209cf0a1582 100644 --- a/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx +++ b/x-pack/plugins/ml/public/application/datavisualizer/index_based/components/field_data_card/content_types/boolean_content.tsx @@ -89,7 +89,7 @@ export const BooleanContent: FC = ({ config }) => { isValueContainedInElement: false, showValueLabel: true, }} - customSeriesColors={['rgba(230, 194, 32, 0.5)', 'rgba(224, 187, 20, 0.71)']} + color={['rgba(230, 194, 32, 0.5)', 'rgba(224, 187, 20, 0.71)']} splitSeriesAccessors={['x']} stackAccessors={['x']} xAccessor="x" diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx index 3070fc0afdc33..1e6b9c1f9cb79 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/line.tsx @@ -31,7 +31,7 @@ export const Line: FC = ({ chartData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} lineSeriesStyle={lineSeriesStyle} - customSeriesColors={[LINE_COLOR]} + color={LINE_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx index f786f9e4266b8..8ec5141c0f4b2 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/model_bounds.tsx @@ -44,7 +44,7 @@ export const ModelBounds: FC = ({ modelData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} areaSeriesStyle={areaSeriesStyle} - customSeriesColors={[MODEL_COLOR]} + color={MODEL_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx index af1ab928ce7df..f2d040c7bc517 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/anomaly_chart/scatter.tsx @@ -39,7 +39,7 @@ export const Scatter: FC = ({ chartData }) => { yScaleToDataExtent={false} curve={CurveType.CURVE_MONOTONE_X} lineSeriesStyle={scatterSeriesStyle} - customSeriesColors={[LINE_COLOR]} + color={LINE_COLOR} /> ); }; diff --git a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx index 42d865cfaaf12..2fb8ea2820b29 100644 --- a/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx +++ b/x-pack/plugins/ml/public/application/jobs/new_job/pages/components/charts/event_rate_chart/event_rate_chart.tsx @@ -53,7 +53,7 @@ export const EventRateChart: FC = ({ xAccessor={'time'} yAccessors={['value']} data={eventRateChartData} - customSeriesColors={[barColor]} + color={barColor} /> diff --git a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx index 0bcaa83127468..42ab8c26f7ca6 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/components/builtin_alert_types/threshold/visualization.tsx @@ -10,8 +10,6 @@ import { i18n } from '@kbn/i18n'; import { AnnotationDomainTypes, Axis, - getAxisId, - getSpecId, Chart, LineAnnotation, LineSeries, @@ -231,25 +229,21 @@ export const ThresholdVisualization: React.FunctionComponent = ({ theme={[customTheme(), chartsTheme]} xDomain={domain} showLegend={!!termField} + showLegendExtra legendPosition={Position.Bottom} /> - + {alertVisualizationDataKeys.map((key: string) => { return ( { theme={[customTheme(), chartsTheme]} xDomain={domain} showLegend={!!watch.termField} + showLegendExtra legendPosition={Position.Bottom} />