fix linear interpolation of missing values (#16733)

* fix linear interpolation of missing values

* add repro

frontend/src/metabase/visualizations/lib/fill_data.js

@@ -8,6 +8,8 @@ import {
   isQuantitative,
   isHistogram,
   isHistogramBar,
+  isLine,
+  isArea,
 } from "./renderer_utils";
 import timeseriesScale from "./timeseriesScale";
 
@@ -52,12 +54,17 @@ function fillMissingValuesInData(
   rows,
 ) {
   const { settings } = props;
-  const { "line.missing": lineMissing } = settings.series(singleSeries);
+  const seriesSettings = settings.series(singleSeries);
+  const lineMissing = seriesSettings["line.missing"];
 
-  // return now if we're not filling with either 0 or null
   if (!(lineMissing === "zero" || lineMissing === "none")) {
-    return rows;
+    const shouldRemoveNulls =
+      lineMissing === "interpolate" &&
+      (isLine(seriesSettings) || isArea(seriesSettings));
+
+    return shouldRemoveNulls ? rows.filter(([_x, y]) => y !== null) : rows;
   }
+
   let getKey;
   const fillValue = lineMissing === "zero" ? 0 : null;
   if (isTimeseries(settings)) {

frontend/src/metabase/visualizations/lib/renderer_utils.js

@@ -363,6 +363,8 @@ export const isHistogram = settings =>
   settings["graph.x_axis.scale"] === "histogram";
 export const isOrdinal = settings =>
   settings["graph.x_axis.scale"] === "ordinal";
+export const isLine = settings => settings.display === "line";
+export const isArea = settings => settings.display === "area";
 
 // bar histograms have special tick formatting:
 // * aligned with beginning of bar to show bin boundaries

frontend/test/metabase/scenarios/visualizations/line_chart.cy.spec.js

@@ -147,6 +147,30 @@ describe("scenarios > visualizations > line chart", () => {
       .and("contain", "cat3");
   });
 
+  it("should interpolate null value by not rendering a data point (metabase#4122)", () => {
+    visitQuestionAdhoc({
+      dataset_query: {
+        type: "native",
+        native: {
+          query: `
+            select 'a' x, 1 y
+            union all
+            select 'b' x, null y
+            union all
+            select 'c' x, 2 y
+          `,
+          "template-tags": {},
+        },
+        database: 1,
+      },
+      display: "line",
+    });
+
+    cy.get(`.sub._0`)
+      .find("circle")
+      .should("have.length", 2);
+  });
+
   describe.skip("tooltip of combined dashboard cards (multi-series) should show the correct column title (metabase#16249", () => {
     const RENAMED_FIRST_SERIES = "Foo";
     const RENAMED_SECOND_SERIES = "Bar";