[Infra] Use Kibana time zone setting for all charts (elastic#123139) (e…

…lastic#123203)

(cherry picked from commit cb3e0ec)

x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx

@@ -47,6 +47,7 @@ import {
 } from '../../../../../common/http_api/log_alerts/';
 import { useChartPreviewData } from './hooks/use_chart_preview_data';
 import { decodeOrThrow } from '../../../../../common/runtime_types';
+import { useKibanaTimeZoneSetting } from '../../../../hooks/use_kibana_time_zone_setting';
 
 const GROUP_LIMIT = 5;
 
@@ -126,6 +127,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
 }) => {
   const { uiSettings } = useKibana().services;
   const isDarkMode = uiSettings?.get('theme:darkMode') || false;
+  const timezone = useKibanaTimeZoneSetting();
 
   const {
     getChartPreviewData,
@@ -242,6 +244,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
               },
             }}
             color={!isGrouped ? colorTransformer(Color.color0) : undefined}
+            timeZone={timezone}
           />
           {showThreshold && threshold ? (
             <LineAnnotation

x-pack/plugins/infra/public/hooks/use_kibana_time_zone_setting.ts

@@ -0,0 +1,19 @@
+/*
+ * 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 { useUiSetting$ } from '../../../../../src/plugins/kibana_react/public';
+import { UI_SETTINGS } from '../../../../../src/plugins/data/public';
+
+export function useKibanaTimeZoneSetting() {
+  const [kibanaTimeZone] = useUiSetting$<string>(UI_SETTINGS.DATEFORMAT_TZ);
+
+  if (!kibanaTimeZone || kibanaTimeZone === 'Browser') {
+    return 'local';
+  }
+
+  return kibanaTimeZone;
+}

x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_sparkline.tsx

@@ -14,6 +14,7 @@ import {
 } from '@elastic/eui/dist/eui_charts_theme';
 
 import { useKibanaUiSetting } from '../../../../../utils/use_kibana_ui_setting';
+import { useKibanaTimeZoneSetting } from '../../../../../hooks/use_kibana_time_zone_setting';
 import { TimeRange } from '../../../../../../common/time';
 
 interface TimeSeriesPoint {
@@ -33,6 +34,7 @@ export const SingleMetricSparkline: React.FunctionComponent<{
   timeRange: TimeRange;
 }> = ({ metric, timeRange }) => {
   const [isDarkMode] = useKibanaUiSetting('theme:darkMode');
+  const timeZone = useKibanaTimeZoneSetting();
 
   const theme = useMemo(
     () => [
@@ -60,6 +62,7 @@ export const SingleMetricSparkline: React.FunctionComponent<{
         xAccessor={timestampAccessor}
         xScaleType="time"
         yAccessors={valueAccessor}
+        timeZone={timeZone}
       />
     </Chart>
   );

x-pack/plugins/infra/public/pages/metrics/metric_detail/components/series_chart.tsx

@@ -16,6 +16,7 @@ import {
 } from '@elastic/charts';
 import { NodeDetailsDataSeries } from '../../../../../common/http_api/node_details_api';
 import { InventoryVisType } from '../../../../../common/inventory_models/types';
+import { useKibanaTimeZoneSetting } from '../../../../hooks/use_kibana_time_zone_setting';
 
 interface Props {
   id: string;
@@ -34,6 +35,7 @@ export const SeriesChart = (props: Props) => {
 };
 
 export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
+  const timezone = useKibanaTimeZoneSetting();
   const style: RecursivePartial<AreaSeriesStyle> = {
     area: {
       opacity: 1,
@@ -56,11 +58,13 @@ export const AreaChart = ({ id, color, series, name, type, stack }: Props) => {
       areaSeriesStyle={style}
       color={color ? color : void 0}
       stackAccessors={stack ? ['timestamp'] : void 0}
+      timeZone={timezone}
     />
   );
 };
 
 export const BarChart = ({ id, color, series, name, stack }: Props) => {
+  const timezone = useKibanaTimeZoneSetting();
   const style: RecursivePartial<BarSeriesStyle> = {
     rectBorder: {
       stroke: color || void 0,
@@ -83,6 +87,7 @@ export const BarChart = ({ id, color, series, name, stack }: Props) => {
       barSeriesStyle={style}
       color={color ? color : void 0}
       stackAccessors={stack ? ['timestamp'] : void 0}
+      timeZone={timezone}
     />
   );
 };

x-pack/plugins/infra/public/pages/metrics/metrics_explorer/components/series_chart.tsx

@@ -21,6 +21,7 @@ import {
   MetricsExplorerOptionsMetric,
   MetricsExplorerChartType,
 } from '../hooks/use_metrics_explorer_options';
+import { useKibanaTimeZoneSetting } from '../../../../hooks/use_kibana_time_zone_setting';
 import { getMetricId } from './helpers/get_metric_id';
 
 type NumberOrString = string | number;
@@ -42,6 +43,7 @@ export const MetricExplorerSeriesChart = (props: Props) => {
 };
 
 export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack, opacity }: Props) => {
+  const timezone = useKibanaTimeZoneSetting();
   const color = (metric.color && colorTransformer(metric.color)) || colorTransformer(Color.color0);
 
   const yAccessors = Array.isArray(id)
@@ -78,11 +80,13 @@ export const MetricsExplorerAreaChart = ({ metric, id, series, type, stack, opac
       stackAccessors={stack ? ['timestamp'] : void 0}
       areaSeriesStyle={seriesAreaStyle}
       color={color}
+      timeZone={timezone}
     />
   );
 };
 
 export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) => {
+  const timezone = useKibanaTimeZoneSetting();
   const color = (metric.color && colorTransformer(metric.color)) || colorTransformer(Color.color0);
 
   const yAccessors = Array.isArray(id)
@@ -113,6 +117,7 @@ export const MetricsExplorerBarChart = ({ metric, id, series, stack }: Props) =>
       stackAccessors={stack ? ['timestamp'] : void 0}
       barSeriesStyle={seriesBarStyle}
       color={color}
+      timeZone={timezone}
     />
   );
 };