From 1f6c270f15797d2929babfd84c03a59fc8a99543 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 26 Jan 2024 16:06:11 -0500
Subject: [PATCH] fix(time-series table): Can't compare from the beginning of
 the time range (#26814)

---
 .../TimeSeriesColumnControl.test.tsx                | 13 +++++++++++++
 .../controls/TimeSeriesColumnControl/index.jsx      |  4 +++-
 .../src/visualizations/TimeTable/TimeTable.jsx      |  6 ++++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/TimeSeriesColumnControl.test.tsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/TimeSeriesColumnControl.test.tsx
index 589ef9173a496..631c34f3f8a8a 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/TimeSeriesColumnControl.test.tsx
+++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/TimeSeriesColumnControl.test.tsx
@@ -104,6 +104,19 @@ test('triggers onChange when time lag changes', () => {
   expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ timeLag }));
 });
 
+test('time lag allows negative values', () => {
+  const timeLag = '-1';
+  const onChange = jest.fn();
+  render(<TimeSeriesColumnControl colType="time" onChange={onChange} />);
+  userEvent.click(screen.getByRole('button'));
+  const timeLagInput = screen.getByPlaceholderText('Time Lag');
+  userEvent.clear(timeLagInput);
+  userEvent.type(timeLagInput, timeLag);
+  expect(onChange).not.toHaveBeenCalled();
+  userEvent.click(screen.getByRole('button', { name: 'Save' }));
+  expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ timeLag }));
+});
+
 test('triggers onChange when color bounds changes', () => {
   const min = 1;
   const max = 5;
diff --git a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
index 29ac223cf3e03..e51a2f496015b 100644
--- a/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
+++ b/superset-frontend/src/explore/components/controls/TimeSeriesColumnControl/index.jsx
@@ -248,7 +248,9 @@ export default class TimeSeriesColumnControl extends React.Component {
         {['time', 'avg'].indexOf(this.state.colType) >= 0 &&
           this.formRow(
             t('Time lag'),
-            t('Number of periods to compare against'),
+            t(
+              'Number of periods to compare against. You can use negative numbers to compare from the beginning of the time range.',
+            ),
             'time-lag',
             <Input
               value={this.state.timeLag}
diff --git a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
index bf8551bf07457..f0e98ebf7baf4 100644
--- a/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
+++ b/superset-frontend/src/visualizations/TimeTable/TimeTable.jsx
@@ -181,11 +181,13 @@ const TimeTable = ({
       let v;
       let errorMsg;
       if (column.colType === 'time') {
-        // Time lag ratio
+        // If time lag is negative, we compare from the beginning of the data
         const timeLag = column.timeLag || 0;
         const totalLag = Object.keys(reversedEntries).length;
-        if (timeLag >= totalLag) {
+        if (Math.abs(timeLag) >= totalLag) {
           errorMsg = `The time lag set at ${timeLag} is too large for the length of data at ${reversedEntries.length}. No data available.`;
+        } else if (timeLag < 0) {
+          v = reversedEntries[totalLag + timeLag][valueField];
         } else {
           v = reversedEntries[timeLag][valueField];
         }