Merge pull request #6632 from homarr-labs/feat/v2-stocks-widget

feat (v2 stocks widget):Add a "Show details" toggle to the stock widget's compact view

packages/translation/src/lang/en.json

@@ -3533,6 +3533,10 @@
               "label": "1 Month"
             }
           }
+        },
+        "showDetails": {
+          "label": "Show details",
+          "description": "Show the name, change, and time range in the compact view. Turn off for just the symbol and price."
         }
       }
     },

packages/widgets/src/stocks/component.spec.ts

@@ -33,7 +33,7 @@ describe("stock summary", () => {
 
 describe("stock layout", () => {
   it("keeps compact widgets focused on symbol and price", () => {
-    expect(getStockLayout(320, 100)).toMatchObject({
+    expect(getStockLayout(320, 100, true)).toMatchObject({
       showName: false,
       showChange: false,
       showRange: false,
@@ -42,12 +42,12 @@ describe("stock layout", () => {
   });
 
   it("reveals secondary data only when both axes have room", () => {
-    expect(getStockLayout(320, 160)).toMatchObject({
+    expect(getStockLayout(320, 160, true)).toMatchObject({
       showName: false,
       showChange: true,
       showRange: true,
     });
-    expect(getStockLayout(320, 220)).toMatchObject({
+    expect(getStockLayout(320, 220, true)).toMatchObject({
       showName: true,
       showChange: true,
       showRange: true,
@@ -56,7 +56,7 @@ describe("stock layout", () => {
   });
 
   it("exposes the complete summary when the widget is roomy", () => {
-    expect(getStockLayout(640, 360)).toEqual({
+    expect(getStockLayout(640, 360, true)).toEqual({
       showName: true,
       showChange: true,
       showRange: true,
@@ -64,4 +64,12 @@ describe("stock layout", () => {
       priceOrder: 1,
     });
   });
+
+  it("hides name, change, and range regardless of size when showDetails is off", () => {
+    expect(getStockLayout(640, 360, false)).toMatchObject({
+      showName: false,
+      showChange: false,
+      showRange: false,
+    });
+  });
 });

packages/widgets/src/stocks/component.tsx

@@ -43,11 +43,11 @@ export interface StockLayout {
   priceOrder: 1 | 2;
 }
 
-export function getStockLayout(width: number, height: number): StockLayout {
+export function getStockLayout(width: number, height: number, showDetails: boolean): StockLayout {
   return {
-    showName: width >= 300 && height >= 190,
-    showChange: width >= 260 && height >= 130,
-    showRange: width >= 220 && height >= 130,
+    showName: showDetails && width >= 300 && height >= 190,
+    showChange: showDetails && width >= 260 && height >= 130,
+    showRange: showDetails && width >= 220 && height >= 130,
     graphHeight: height >= 320 ? "75%" : height >= 220 ? "68%" : "48%",
     priceOrder: width >= 280 && height >= 120 ? 1 : 2,
   };
@@ -92,7 +92,7 @@ export default function StockPriceWidget({
   const stockValuesChangePercentage = summary.changePercentage === null ? null : round(summary.changePercentage);
   const stockGraphValues = summary.graphValues;
   const trendColor = stockValuesChange > 0 ? "green.7" : stockValuesChange < 0 ? "red.7" : "gray.6";
-  const layout = getStockLayout(width, height);
+  const layout = getStockLayout(width, height, options.showDetails);
   const formatValue = (value: number) => numberFormatter.format(round(value));
   const formatSignedValue = (value: number) => `${value > 0 ? "+" : ""}${formatValue(value)}`;
 

packages/widgets/src/stocks/index.ts

@@ -41,6 +41,10 @@ export const { definition, componentLoader } = createWidgetDefinition("stockPric
           label: (t) => t(`widget.stockPrice.option.timeInterval.option.${value}.label`),
         })),
       }),
+      showDetails: factory.switch({
+        defaultValue: true,
+        withDescription: true,
+      }),
     }));
   },
 }).withDynamicImport(() => import("./component"));