[TSVB] Adds ignore DST switch for timeseries (#98484)

* [TSVB] add ignore DST switch

* [TSVB] move YesNo component to timeseries panel, get rid of getTimezone call

* [TSVB] reduce formatter creation number

* [TSVB] add usage EuFormRow, remove redundant translations

* [TSVB] use boolean instead of number

* [TSVB] use number for YesNo

* [TSVB] resolve YesNo value type

* [TSVB] replace number with boolean

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

src/plugins/vis_type_timeseries/common/vis_schema.ts

@@ -215,6 +215,7 @@ export const panel = schema.object({
   background_color_rules: schema.maybe(schema.arrayOf(backgroundColorRulesItems)),
   drilldown_url: stringOptional,
   drop_last_bucket: numberIntegerOptional,
+  ignore_daylight_time: schema.boolean(),
   filter: schema.maybe(queryObject),
   gauge_color_rules: schema.maybe(schema.arrayOf(gaugeColorRulesItems)),
   gauge_width: schema.nullable(schema.oneOf([stringOptionalNullable, numberOptional])),

src/plugins/vis_type_timeseries/public/application/components/last_value_mode_indicator.tsx

@@ -19,6 +19,7 @@ interface LastValueModeIndicatorProps {
   seriesData?: PanelData['data'];
   panelInterval: number;
   modelInterval: string;
+  ignoreDaylightTime: boolean;
 }
 
 const lastValueLabel = i18n.translate('visTypeTimeseries.lastValueModeIndicator.lastValue', {
@@ -29,6 +30,7 @@ export const LastValueModeIndicator = ({
   seriesData,
   panelInterval,
   modelInterval,
+  ignoreDaylightTime,
 }: LastValueModeIndicatorProps) => {
   if (!seriesData?.length) return <EuiBadge>{lastValueLabel}</EuiBadge>;
 
@@ -40,7 +42,12 @@ export const LastValueModeIndicator = ({
     return interval && `${interval.unitValue}${interval.unitString}`;
   };
 
-  const formatter = createIntervalBasedFormatter(panelInterval, scaledDataFormat, dateFormat);
+  const formatter = createIntervalBasedFormatter(
+    panelInterval,
+    scaledDataFormat,
+    dateFormat,
+    ignoreDaylightTime
+  );
   const lastBucketDate = formatter(seriesData[seriesData.length - 1][0]);
   const formattedPanelInterval =
     (isAutoInterval(modelInterval) || isGteInterval(modelInterval)) && getFormattedPanelInterval();

src/plugins/vis_type_timeseries/public/application/components/lib/create_interval_based_formatter.ts

@@ -8,6 +8,8 @@
 
 import moment from 'moment';
 
+const JANUARY_MOMENT_CONFIG = { M: 0, d: 1 };
+
 function getFormat(interval: number, rules: string[][] = []) {
   for (let i = rules.length - 1; i >= 0; i--) {
     const rule = rules[i];
@@ -20,9 +22,15 @@ function getFormat(interval: number, rules: string[][] = []) {
 export function createIntervalBasedFormatter(
   interval: number,
   rules: string[][],
-  dateFormat: string
+  dateFormat: string,
+  ignoreDaylightTime: boolean
 ) {
-  return (val: moment.MomentInput): string => {
-    return moment(val).format(getFormat(interval, rules) ?? dateFormat);
+  const fixedOffset = moment(JANUARY_MOMENT_CONFIG).utcOffset();
+  return (val: moment.MomentInput) => {
+    const momentVal = moment(val);
+    if (ignoreDaylightTime) {
+      momentVal.utcOffset(fixedOffset);
+    }
+    return momentVal.format(getFormat(interval, rules) ?? dateFormat);
   };
 }

src/plugins/vis_type_timeseries/public/application/components/panel_config/timeseries.tsx

@@ -127,6 +127,7 @@ export class TimeseriesPanelConfig extends Component<
       legend_position: 'right',
       show_grid: 1,
       tooltip_mode: 'show_all',
+      ignore_daylight_time: false,
     };
     const model = { ...defaults, ...this.props.model };
     const { selectedTab } = this.state;
@@ -227,6 +228,22 @@ export class TimeseriesPanelConfig extends Component<
                   />
                 </EuiFormRow>
               </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiFormRow
+                  label={i18n.translate(
+                    'visTypeTimeseries.timeseries.optionsTab.ignoreDaylightTimeLabel',
+                    {
+                      defaultMessage: 'Ignore daylight time?',
+                    }
+                  )}
+                >
+                  <YesNo
+                    value={model.ignore_daylight_time}
+                    name="ignore_daylight_time"
+                    onChange={this.props.onChange}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
             </EuiFlexGroup>
           </EuiPanel>
 

src/plugins/vis_type_timeseries/public/application/components/series_config_query_bar_with_ignore_global_filter.js

@@ -23,7 +23,7 @@ export function SeriesConfigQueryBarWithIgnoreGlobalFilter({
   const htmlId = htmlIdGenerator();
   const yesNoOption = (
     <YesNo
-      disabled={Boolean(panel.ignore_global_filter)}
+      disabled={panel.ignore_global_filter}
       value={model.ignore_global_filter}
       name="ignore_global_filter"
       onChange={onChange}

src/plugins/vis_type_timeseries/public/application/components/timeseries_visualization.tsx

@@ -143,6 +143,7 @@ function TimeseriesVisualization({
                 `${isVisSeriesData(visData) ? model.id : 'series[0]'}.series[0].data`,
                 undefined
               )}
+              ignoreDaylightTime={model.ignore_daylight_time}
               panelInterval={getInterval(visData, model)}
               modelInterval={model.interval ?? AUTO_INTERVAL}
             />

src/plugins/vis_type_timeseries/public/application/components/vis_types/timeseries/vis.js

@@ -33,13 +33,14 @@ class TimeseriesVisualization extends Component {
   scaledDataFormat = this.props.getConfig('dateFormat:scaled');
   dateFormat = this.props.getConfig('dateFormat');
 
-  xAxisFormatter = (interval) => (val) => {
+  xAxisFormatter = (interval) => {
     const formatter = createIntervalBasedFormatter(
       interval,
       this.scaledDataFormat,
-      this.dateFormat
+      this.dateFormat,
+      this.props.model.ignore_daylight_time
     );
-    return formatter(val);
+    return (val) => formatter(val);
   };
 
   yAxisStackedByPercentFormatter = (val) => {

src/plugins/vis_type_timeseries/public/application/components/yes_no.tsx

@@ -13,7 +13,7 @@ import { TimeseriesVisParams } from '../../types';
 
 interface YesNoProps<ParamName extends keyof TimeseriesVisParams> {
   name: ParamName;
-  value: TimeseriesVisParams[ParamName];
+  value: boolean | number | undefined;
   disabled?: boolean;
   'data-test-subj'?: string;
   onChange: (partialModel: Partial<TimeseriesVisParams>) => void;