From 0b03d12d4cc41e640330259333dcf06e1a34b7de Mon Sep 17 00:00:00 2001
From: Anton Kulyk <kuliks.anton@gmail.com>
Date: Mon, 22 Jan 2024 15:27:52 +0000
Subject: [PATCH] Tweak trend charts static viz look (#37869)

* Use ASCII arrow characters instead of SVG icons

* Increase comparison text font size
---
 .../components/SmartScalar/SmartScalar.tsx    | 16 ++++-----
 .../components/SmartScalar/icons.tsx          | 36 -------------------
 2 files changed, 7 insertions(+), 45 deletions(-)
 delete mode 100644 frontend/src/metabase/static-viz/components/SmartScalar/icons.tsx

diff --git a/frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx b/frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx
index 9aad6a3a511..6a184994244 100644
--- a/frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx
+++ b/frontend/src/metabase/static-viz/components/SmartScalar/SmartScalar.tsx
@@ -8,7 +8,6 @@ import {
   CHANGE_TYPE_OPTIONS,
 } from "metabase/visualizations/visualizations/SmartScalar/compute";
 import { formatChange } from "metabase/visualizations/visualizations/SmartScalar/utils";
-import { ArrowDown, ArrowUp } from "./icons";
 import { computeSmartScalarSettings } from "./settings";
 
 export function SmartScalar({
@@ -89,22 +88,21 @@ function Comparison({ comparison, renderingContext }: ComparisonProps) {
       ? formatChange(comparison.percentChange)
       : comparison.display.percentChange;
 
-  let Icon: typeof ArrowUp | null = null;
+  let icon: string | null = null;
 
   if (comparison.changeArrowIconName === "arrow_up") {
-    Icon = ArrowUp;
+    icon = "↑";
   } else if (comparison.changeArrowIconName === "arrow_down") {
-    Icon = ArrowDown;
+    icon = "↓";
   }
 
   const styles: Record<string, CSSProperties> = {
     root: {
-      fontSize: "12px",
+      fontSize: "14px",
     },
     icon: {
-      width: "12px",
-      height: "12px",
-      fill: comparison.changeColor,
+      fontSize: "14px",
+      color: comparison.changeColor,
       marginRight: "6px",
     },
     percentChange: {
@@ -128,7 +126,7 @@ function Comparison({ comparison, renderingContext }: ComparisonProps) {
 
   return (
     <span style={styles.root}>
-      {!!Icon && <Icon style={styles.icon} />}
+      {!!icon && <span style={styles.icon}>{icon}</span>}
       <span>
         <span style={styles.percentChange}>{changeDisplayValue}</span>
         <span style={styles.separator}> • </span>
diff --git a/frontend/src/metabase/static-viz/components/SmartScalar/icons.tsx b/frontend/src/metabase/static-viz/components/SmartScalar/icons.tsx
deleted file mode 100644
index 1b1c1cd62c3..00000000000
--- a/frontend/src/metabase/static-viz/components/SmartScalar/icons.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { SVGProps } from "react";
-
-export function ArrowUp(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      fill="currentcolor"
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-    >
-      <path d="M13.47 8.53a.75.75 0 1 0 1.06-1.06l-6-6a.748.748 0 0 0-1.06 0l-6 6a.75.75 0 0 0 1.06 1.06l4.72-4.72V14a.75.75 0 0 0 1.5 0V3.81l4.72 4.72z" />
-    </svg>
-  );
-}
-
-export function ArrowDown(props: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      fill="currentcolor"
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 16 16"
-    >
-      <path
-        clipRule="evenodd"
-        fillRule="evenodd"
-        d="M8 1.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V2A.75.75 0 0 1 8 1.25z"
-      />
-      <path
-        clipRule="evenodd"
-        fillRule="evenodd"
-        d="M1.47 7.47a.75.75 0 0 1 1.06 0L8 12.94l5.47-5.47a.75.75 0 1 1 1.06 1.06l-6 6a.75.75 0 0 1-1.06 0l-6-6a.75.75 0 0 1 0-1.06z"
-      />
-    </svg>
-  );
-}
-- 
GitLab