diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index e0633c756..31c64fe46 100644 --- a/packages/translation/src/lang/en.json +++ b/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." } } }, diff --git a/packages/widgets/src/stocks/component.spec.ts b/packages/widgets/src/stocks/component.spec.ts index f9fa1c464..293a15c70 100644 --- a/packages/widgets/src/stocks/component.spec.ts +++ b/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, + }); + }); }); diff --git a/packages/widgets/src/stocks/component.tsx b/packages/widgets/src/stocks/component.tsx index 0ed620cb2..ecb859082 100644 --- a/packages/widgets/src/stocks/component.tsx +++ b/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)}`; diff --git a/packages/widgets/src/stocks/index.ts b/packages/widgets/src/stocks/index.ts index ea6398180..8769bce4a 100644 --- a/packages/widgets/src/stocks/index.ts +++ b/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"));