Fix trend UI issues (#11649)

frontend/src/metabase/visualizations/visualizations/SmartScalar.jsx

@@ -105,8 +105,7 @@ export default class Smart extends React.Component {
     const lastChange = insight["last-change"];
     const previousValue = insight["previous-value"];
 
-    const change = formatNumber(lastChange * 100);
-    const isNegative = (change && Math.sign(change) < 0) || false;
+    const isNegative = lastChange < 0;
     const isSwapped = settings["scalar.switch_positive_negative"];
 
     // if the number is negative but thats been identified as a good thing (e.g. decreased latency somehow?)
@@ -117,7 +116,9 @@ export default class Smart extends React.Component {
       : color("success");
 
     const changeDisplay = (
-      <span style={{ fontWeight: 900 }}>{Math.abs(change)}%</span>
+      <span style={{ fontWeight: 900 }}>
+        {formatNumber(Math.abs(lastChange), { number_style: "percent" })}
+      </span>
     );
     const separator = (
       <span
@@ -177,11 +178,13 @@ export default class Smart extends React.Component {
           />
         )}
         <Box className="SmartWrapper">
-          {!lastChange || !previousValue ? (
+          {lastChange == null || previousValue == null ? (
             <Box
               className="text-centered text-bold mt1"
               color={color("text-medium")}
             >{jt`Nothing to compare for the previous ${granularity}.`}</Box>
+          ) : lastChange === 0 ? (
+            t`No change from last ${granularity}`
           ) : (
             <Flex align="center" mt={1} flexWrap="wrap">
               <Flex align="center" color={changeColor}>

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

+import React from "react";
+import { render, cleanup } from "@testing-library/react";
+
+import { NumberColumn, DateTimeColumn } from "../__support__/visualizations";
+
+import Visualization from "metabase/visualizations/components/Visualization";
+
+const series = ({ rows, insights }) => {
+  const cols = [
+    DateTimeColumn({ name: "Month" }),
+    NumberColumn({ name: "Count" }),
+  ];
+  return [{ card: { display: "smartscalar" }, data: { cols, rows, insights } }];
+};
+
+describe("SmartScalar", () => {
+  afterEach(cleanup);
+
+  it("should show 20% increase", () => {
+    const rows = [["2019-10-01T00:00:00", 100], [("2019-11-01T00:00:00", 120)]];
+    const insights = [
+      {
+        "last-value": 120,
+        "last-change": 0.2,
+        "previous-value": 100,
+        unit: "month",
+        col: "Count",
+      },
+    ];
+    const { getAllByText } = render(
+      <Visualization rawSeries={series({ rows, insights })} />,
+    );
+    getAllByText("120");
+    getAllByText("20%");
+    getAllByText("was 100");
+    getAllByText("last month");
+  });
+
+  it("should show 20% decrease", () => {
+    const rows = [["2019-10-01T00:00:00", 100], [("2019-11-01T00:00:00", 80)]];
+    const insights = [
+      {
+        "last-value": 80,
+        "last-change": -0.2,
+        "previous-value": 100,
+        unit: "month",
+        col: "Count",
+      },
+    ];
+    const { getAllByText } = render(
+      <Visualization rawSeries={series({ rows, insights })} />,
+    );
+    getAllByText("80");
+    getAllByText("20%");
+    getAllByText("was 100");
+    getAllByText("last month");
+  });
+
+  it("should show 0% change", () => {
+    const rows = [["2019-10-01T00:00:00", 100], [("2019-11-01T00:00:00", 100)]];
+    const insights = [
+      {
+        "last-value": 100,
+        "last-change": 0,
+        "previous-value": 100,
+        unit: "month",
+        col: "Count",
+      },
+    ];
+    const { getAllByText } = render(
+      <Visualization rawSeries={series({ rows, insights })} />,
+    );
+    getAllByText("100");
+    getAllByText("No change from last month");
+  });
+
+  it("should show 8000% change", () => {
+    const rows = [
+      ["2019-10-01T00:00:00", 100],
+      [("2019-11-01T00:00:00", 8100)],
+    ];
+    const insights = [
+      {
+        "last-value": 8100,
+        "last-change": 80,
+        "previous-value": 100,
+        unit: "month",
+        col: "Count",
+      },
+    ];
+    const { getAllByText } = render(
+      <Visualization rawSeries={series({ rows, insights })} />,
+    );
+    getAllByText("8,000%");
+  });
+});