Don't overwrite column unit before getting column settings (#10864)

frontend/src/metabase/visualizations/components/ChartTooltip.jsx

@@ -77,13 +77,18 @@ const TooltipRow = ({ name, value, column, settings }) => (
     <td className="text-bold text-left">
       {React.isValidElement(value)
         ? value
-        : formatValue(value, {
-            ...(settings && settings.column && column
-              ? settings.column(column)
-              : { column }),
-            type: "tooltip",
-            majorWidth: 0,
-          })}
+        : formatValueForTooltip({ value, column, settings })}
     </td>
   </tr>
 );
+
+// only exported for testing, so leaving this here rather than a formatting file
+export function formatValueForTooltip({ value, column, settings }) {
+  return formatValue(value, {
+    ...(settings && settings.column && column
+      ? settings.column(column)
+      : { column }),
+    type: "tooltip",
+    majorWidth: 0,
+  });
+}

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

@@ -122,6 +122,7 @@ export function applyChartTimeseriesXAxis(
 
     // special handling for weeks
     // TODO: are there any other cases where we should do this?
+    let tickFormatUnit = dimensionColumn.unit;
     if (dataInterval.interval === "week") {
       // if tick interval is compressed then show months instead of weeks because they're nicer formatted
       const newTickInterval = computeTimeseriesTicksInterval(
@@ -133,8 +134,8 @@ export function applyChartTimeseriesXAxis(
         newTickInterval.interval !== tickInterval.interval ||
         newTickInterval.count !== tickInterval.count
       ) {
-        (dimensionColumn = { ...dimensionColumn, unit: "month" }),
-          (tickInterval = { interval: "month", count: 1 });
+        tickFormatUnit = "month";
+        tickInterval = { interval: "month", count: 1 };
       }
     }
 
@@ -144,8 +145,10 @@ export function applyChartTimeseriesXAxis(
       const timestampFixed = moment(timestamp)
         .utcOffset(dataOffset)
         .format();
+      const { column, columnSettings } = chart.settings.column(dimensionColumn);
       return formatValue(timestampFixed, {
-        ...chart.settings.column(dimensionColumn),
+        ...columnSettings,
+        column: { ...column, unit: tickFormatUnit },
         type: "axis",
         compact: chart.settings["graph.x_axis.axis_enabled"] === "compact",
       });

frontend/test/metabase/visualizations/__support__/visualizations.js

 import { getComputedSettingsForSeries } from "metabase/visualizations/lib/settings/visualization";
 import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
 
-import { formatValue } from "metabase/lib/formatting";
+import { formatValueForTooltip } from "metabase/visualizations/components/ChartTooltip";
 
 export function makeCard(card) {
   return {
@@ -185,7 +185,7 @@ export function renderLineAreaBar(...args) {
 }
 
 // mirrors logic in ChartTooltip
-export function getFormattedTooltips(hover) {
+export function getFormattedTooltips(hover, settings) {
   let data;
   if (hover.data) {
     data = hover.data;
@@ -200,7 +200,9 @@ export function getFormattedTooltips(hover) {
       data.push({ value: hover.value, col: hover.column });
     }
   }
-  return data.map(d => formatValue(d.value, { column: d.col }));
+  return data.map(({ value, col: column }) =>
+    formatValueForTooltip({ value, column, settings }),
+  );
 }
 
 export function createFixture() {

frontend/test/metabase/visualizations/components/LineAreaBarRenderer.unit.spec.js

@@ -13,6 +13,9 @@ import {
   getFormattedTooltips,
 } from "../__support__/visualizations";
 
+import { getComputedSettingsForSeries } from "metabase/visualizations/lib/settings/visualization";
+import lineAreaBarRenderer from "metabase/visualizations/lib/LineAreaBarRenderer";
+
 const formatTz = offset =>
   (offset < 0 ? "-" : "+") + d3.format("02d")(Math.abs(offset)) + ":00";
 
@@ -140,6 +143,41 @@ describe("LineAreaBarRenderer", () => {
     ]);
   });
 
+  it("should display weekly ranges in tooltips and months on x axis", () => {
+    const rows = [
+      ["2020-01-05T00:00:00.000Z", 1],
+      ["2020-01-12T00:00:00.000Z", 1],
+      ["2020-01-19T00:00:00.000Z", 1],
+      ["2020-02-02T00:00:00.000Z", 1],
+      ["2020-02-09T00:00:00.000Z", 1],
+      ["2020-02-16T00:00:00.000Z", 1],
+      ["2020-02-23T00:00:00.000Z", 1],
+      ["2020-03-01T00:00:00.000Z", 1],
+    ];
+
+    // column settings are cached based on name.
+    // we need something unique to not conflict with other tests.
+    const dateColumn = DateTimeColumn({ unit: "week", name: "uniqueName123" });
+
+    const cols = [dateColumn, NumberColumn()];
+    const chartType = "line";
+    const series = [{ data: { cols, rows }, card: { display: chartType } }];
+    const settings = getComputedSettingsForSeries(series);
+    const onHoverChange = jest.fn();
+
+    const props = { chartType, series, settings, onHoverChange };
+    lineAreaBarRenderer(element, props);
+
+    dispatchUIEvent(qs(".dot"), "mousemove");
+
+    const hover = onHoverChange.mock.calls[0][0];
+    const [formattedWeek] = getFormattedTooltips(hover, settings);
+    expect(formattedWeek).toEqual("January 5 – 11, 2020");
+
+    const ticks = qsa(".axis.x .tick text").map(e => e.textContent);
+    expect(ticks).toEqual(["January, 2020", "February, 2020", "March, 2020"]);
+  });
+
   describe("should render correctly a compound line graph", () => {
     const rowsOfNonemptyCard = [[2015, 1], [2016, 2], [2017, 3]];