[Explore Vis] Add toggle to show full time range on time-based axes (#10562)

---------

Signed-off-by: Luna Liu <[email protected]>
Co-authored-by: Yulong Ruan <[email protected]>

Author: lunalzm

src/plugins/explore/public/components/visualizations/area/area_vis_config.ts

@@ -43,6 +43,7 @@ export interface AreaChartStyleOptions {
   titleOptions?: TitleOptions;
 
   thresholdOptions?: ThresholdOptions;
+  showFullTimeRange?: boolean;
 }
 
 export type AreaChartStyle = Required<
@@ -115,6 +116,8 @@ const defaultAreaChartStyles: AreaChartStyle = {
     show: false,
     titleName: '',
   },
+
+  showFullTimeRange: false,
 };
 
 export const createAreaConfig = (): VisualizationType<'area'> => ({

src/plugins/explore/public/components/visualizations/area/area_vis_options.test.tsx

@@ -101,61 +101,76 @@ jest.mock('../style_panel/tooltip/tooltip', () => ({
 }));
 
 jest.mock('../style_panel/axes/axes', () => ({
-  AxesOptions: jest.fn(({ categoryAxes, valueAxes, onCategoryAxesChange, onValueAxesChange }) => (
-    <div data-test-subj="axes-panel">
-      <button
-        data-test-subj="update-category-axes"
-        onClick={() =>
-          onCategoryAxesChange([
-            ...categoryAxes,
-            {
-              id: 'new-category',
-              type: 'category' as const,
-              position: 'bottom',
-              show: true,
-              labels: {
+  AxesOptions: jest.fn(
+    ({
+      categoryAxes,
+      valueAxes,
+      onCategoryAxesChange,
+      onValueAxesChange,
+      onShowFullTimeRangeChange,
+      showFullTimeRange,
+    }) => (
+      <div data-test-subj="axes-panel">
+        <button
+          data-test-subj="update-category-axes"
+          onClick={() =>
+            onCategoryAxesChange([
+              ...categoryAxes,
+              {
+                id: 'new-category',
+                type: 'category' as const,
+                position: 'bottom',
                 show: true,
-                filter: true,
-                rotate: 0,
-                truncate: 100,
+                labels: {
+                  show: true,
+                  filter: true,
+                  rotate: 0,
+                  truncate: 100,
+                },
+                title: {
+                  text: 'New Category',
+                },
               },
-              title: {
-                text: 'New Category',
-              },
-            },
-          ])
-        }
-      >
-        Update Category Axes
-      </button>
-      <button
-        data-test-subj="update-value-axes"
-        onClick={() =>
-          onValueAxesChange([
-            ...valueAxes,
-            {
-              id: 'new-value',
-              name: 'NewAxis',
-              type: 'value' as const,
-              position: 'left',
-              show: true,
-              labels: {
+            ])
+          }
+        >
+          Update Category Axes
+        </button>
+        <button
+          data-test-subj="update-value-axes"
+          onClick={() =>
+            onValueAxesChange([
+              ...valueAxes,
+              {
+                id: 'new-value',
+                name: 'NewAxis',
+                type: 'value' as const,
+                position: 'left',
                 show: true,
-                rotate: 0,
-                filter: false,
-                truncate: 100,
-              },
-              title: {
-                text: 'New Value',
+                labels: {
+                  show: true,
+                  rotate: 0,
+                  filter: false,
+                  truncate: 100,
+                },
+                title: {
+                  text: 'New Value',
+                },
               },
-            },
-          ])
-        }
-      >
-        Update Value Axes
-      </button>
-    </div>
-  )),
+            ])
+          }
+        >
+          Update Value Axes
+        </button>
+        <button
+          data-test-subj="toggle-full-time-range"
+          onClick={() => onShowFullTimeRangeChange(!showFullTimeRange)}
+        >
+          Toggle Full Time Range
+        </button>
+      </div>
+    )
+  ),
 }));
 
 jest.mock('../style_panel/title/title', () => ({
@@ -235,6 +250,7 @@ describe('AreaVisStyleControls', () => {
         show: true,
         titleName: '',
       },
+      showFullTimeRange: false,
     },
     onStyleChange: jest.fn(),
     axisColumnMappings: {
@@ -304,6 +320,10 @@ describe('AreaVisStyleControls', () => {
   test('shows legend when FACET mapping is present', () => {
     const props = {
       ...defaultProps,
+      styleOptions: {
+        ...defaultProps.styleOptions,
+        showFullTimeRange: false,
+      },
       axisColumnMappings: {
         ...defaultProps.axisColumnMappings,
         [AxisRole.FACET]: {
@@ -546,4 +566,14 @@ describe('AreaVisStyleControls', () => {
       });
     });
   });
+
+  test('updates showFullTimeRange correctly', async () => {
+    render(<AreaVisStyleControls {...defaultProps} />);
+
+    await userEvent.click(screen.getByTestId('toggle-full-time-range'));
+
+    expect(defaultProps.onStyleChange).toHaveBeenCalledWith({
+      showFullTimeRange: true, // Default is false, so toggling sets it to true
+    });
+  });
 });

src/plugins/explore/public/components/visualizations/area/area_vis_options.tsx

@@ -79,6 +79,10 @@ export const AreaVisStyleControls: React.FC<AreaVisStyleControlsProps> = ({
               categoricalColumns={categoricalColumns}
               dateColumns={dateColumns}
               axisColumnMappings={axisColumnMappings}
+              showFullTimeRange={styleOptions.showFullTimeRange}
+              onShowFullTimeRangeChange={(showFullTimeRange) =>
+                updateStyleOption('showFullTimeRange', showFullTimeRange)
+              }
             />
           </EuiFlexItem>