KPI cards: Bloomberg stock ticker style

- Redesign KPI cards to look like stock tickers - Add ticker ID (e.g. ВЫРУЧК:KPI, AOV:KPI) - Arrow up/down SVG indicators for change direction - Mini trend-line (50px) inside each card - Change color: green (#16a34a) for up, red (#e21d1d) for down - Remove sparkline background area, keep only line - Fix duplicate arrowUp variable naming (bArrowUp/bArrowDown/bArrowNeutral)
2026-06-21 18:14:08 +05:00
1 parent 0b49915420
commit 932ec3ac8f
@@ -0,0 +1,257 @@
+# Bloomberg Refresh 2024 — Visual Style & Component Guide
+
+> Источник: `European, Middle Eastern & African Stocks - Bloomberg - Bloomberg Markets.html`
+> Дата анализа: 2026-06-21
+
+---
+
+## 1. CSS Architecture
+
+Bloomberg использует **CSS-variables через `@layer`** (`phx.components`). Все цвета и стили — через переменные, нет хардкода.
+
+```css
+@layer phx.components {
+  /* Font system */
+  --atomics-text-font-size: var(--_atomics-Text-font-size)
+  --atomics-text-font-family: var(--_atomics-Text-font-family)
+  --atomics-text-color: var(--_atomics-Text-color)
+  
+  /* Skeleton/placeholder */
+  --atomics-skeleton-background-color: var(--phx-color-background-secondary)
+}
+```
+
+Ключевая особенность: шрифты подгружаются через Google Fonts (Noto Sans JP для японских индексов). Для остальных — системный стек.
+
+---
+
+## 2. Table Structure
+
+### Columns (left → right)
+
+| # | Column      | Content              | Alignment | Class prefix              |
+|---|-------------|----------------------|-----------|---------------------------|
+| 1 | Follow      | Button (toggle)      | center    | `style_column__qFboh style_stickyCol__8nZn2` |
+| 2 | Ticker ID   | `SPEURO:IND` etc.    | left      | `style_column__qFboh`     |
+| 3 | Index Name  | `S&P EUROPE 350 INDEX` | left    | `style_column__qFboh`     |
+| 4 | Value       | `2,581.91`           | right     | `style_column__qFboh style_end__Ug4Cn` |
+| 5 | Change      | `▲ 1.85`             | right     | `style_column__qFboh style_end__Ug4Cn` |
+
+### Row structure
+
+Each row is wrapped in `style_tableRow__YAQry style_row__rMjqo`.
+
+The table has 3 main wrapper classes:
+- `style_tableWrapper__Q1HVo style_table__SrH5K` — outer table
+- `style_tableHeader__XgkzK style_header__VSpHj` — header row
+- `style_tableRow__YAQry style_row__rMjqo` — data rows
+
+### Cell classes
+
+- `style_cell__1UrwH style_start__T_7tE` — left-aligned cell
+- `style_cell__1UrwH style_end__0XcYw` — right-aligned cell (value + change)
+- `style_cell__1UrwH style_stickyCol__8nZn2 style_start__L8R9v` — sticky column (Follow + ID)
+
+### Section titles (region headers)
+
+```
+styles_sectionTitle__Vr2RB typography_coreHeadlineSm__9qq05
+styles_sectionTitle__xBh4H
+styles_sectionTitle__z1_bK typography_coreHeadlineSm__9qq05
+```
+
+Three sections in the page:
+1. **Today in the Markets**
+2. **Compare to Benchmarks**
+3. **Market Summaries**
+
+---
+
+## 3. Change Component
+
+### Three states
+
+```css
+media-ui-Change_positive-il7qv0BctMg-
+media-ui-Change_negative-rQGvYj5WMsM-
+media-ui-Change_neutral-nBYyHHGgsdY-
+```
+
+### Shared modifier classes
+
+All change elements share these classes:
+- `media-ui-Change_change-lMq4LV-1csY-` — wrapper
+- `media-ui-Change_default-8hphe2lFPJo-` — default theme
+- `media-ui-Change_refresh2024-EajM9IkrlnU-` — "refresh2024" design system
+
+### Value display
+
+- `media-ui-Change_changeValue-cRzdGNve3oU-` — numeric value
+- `media-ui-Change_priceChange-OgFOGsx-jKI-` — price change (absolute points)
+- Separate class for percentage change (appears in different context)
+
+### Arrow SVG
+
+```html
+<!-- UP (positive) -->
+<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
+</svg>
+
+<!-- DOWN (negative) -->
+<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label="Arrow Down" role="img">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 20L0 0L24 0L12 20Z"/>
+</svg>
+
+<!-- NEUTRAL -->
+<svg class="media-ui-Change_marketArrow-..." width="12" height="10" viewBox="0 0 24 20" preserveAspectRatio="xMidYMid meet" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Arrow Up">
+  <path fill-rule="evenodd" clip-rule="evenodd" fill="currentColor" d="M12 0L24 20L0 20L12 0Z"/>
+</svg>
+```
+
+Key: **`fill="currentColor"`** — arrow inherits text color from parent.
+
+---
+
+## 4. Typography
+
+### Name column (`style_stockName__8SqkX`)
+
+- Font: system sans-serif (Inter-like)
+- Size: ~14px
+- Weight: 500 (medium)
+- Color: `--atomics-text-color` (white/light gray)
+- Behavior: ellipsis on overflow (truncates long names)
+
+### Value column (`style_stockValue__fsPwb`)
+
+- Font: monospace / tabular-nums
+- Size: ~14-16px
+- Weight: 500
+- Alignment: right
+- Number format: `1 234,56` (space = thousands separator, comma = decimal)
+
+### Change column (`media-ui-Change_priceChange-*`)
+
+- Size: ~12-13px (smaller than value)
+- Weight: 400 (regular)
+- Color: green (positive) / red (negative) / gray (neutral)
+- Arrow: 12x10px, inherits color
+
+### ID/Ticker column (`style_displayId__ZrwVL`)
+
+- Size: ~11px
+- Font: monospace
+- Color: muted (#888)
+
+---
+
+## 5. Complete Component Hierarchy
+
+```
+style_tableWrapper__Q1HVo style_table__SrH5K
+ └── style_tableRow__YAQry style_row__rMjqo (header)
+ └── style_tableRow__YAQry style_row__rMjqo (data)
+     ├── style_column__qFboh style_stickyCol__8nZn2 style_start__L8R9v
+     │   ├── style_stockId__blFSc (ticker like "SPEURO:IND")
+     │   └── Follow button
+     ├── style_column__qFboh
+     │   └── style_stockName__8SqkX ("S&P EUROPE 350 INDEX")
+     ├── style_column__qFboh style_end__Ug4Cn
+     │   └── style_stockValue__fsPwb ("2,581.91")
+     └── style_column__qFboh style_end__Ug4Cn
+         └── media-ui-Change_change-lMq4LV-1csY- media-ui-Change_default-* media-ui-Change_refresh2024-*
+             ├── media-ui-Change_changeValue-* media-ui-Change_(positive|negative|neutral)-*
+             │   └── number (e.g. "1.85")
+             └── media-ui-Change_marketArrow-* media-ui-Change_(positive|negative|neutral)-*
+                 └── <svg> arrow
+```
+
+---
+
+## 6. Data Extracted from File
+
+- **Total rows:** 91 indices
+- **Sections:** 3 ("Today in the Markets", "Compare to Benchmarks", "Market Summaries")
+- **Regions covered:** Europe, UK, Nordics, DACH, Eastern Europe, Iberia, Baltics, Middle East, Africa
+- **Change distribution:** ~70% positive, ~25% negative, ~5% neutral (at time of snapshot)
+
+### Sample indices
+
+| Ticker | Name | Value | Change |
+|--------|------|-------|--------|
+| SPEURO:IND | S&P EUROPE 350 INDEX | 2,581.91 | +1.85 |
+| SXXP:IND | STXE 600 (EUR) Pr | 635.61 | +1.68 |
+| SX5E:IND | Euro Stoxx 50 Pr | 6,293.13 | +4.55 |
+| UKX:IND | FTSE 100 INDEX | 10,363.27 | +0.98 |
+| DAX:IND | DAX INDEX | 24,985.82 | +0.39 |
+| CAC:IND | CAC 40 INDEX | 8,421.14 | +3.76 |
+
+### Key ticker prefixes
+
+| Prefix | Market |
+|--------|--------|
+| `UKX:IND` | FTSE 100 (London) |
+| `DAX:IND` | DAX (Frankfurt) |
+| `CAC:IND` | CAC 40 (Paris) |
+| `SX5E:IND` | Euro Stoxx 50 |
+| `XU100:IND` | BIST 100 (Istanbul) |
+| `TA-35:IND` | TA-35 (Tel Aviv) |
+| `TOP40:IND` | FTSE/JSE Africa Top 40 |
+| `ATXPRIME:I` | ATX Prime (Vienna) |
+
+---
+
+## 7. Implementation Notes for ROI24
+
+### Replicating the Change component (minimal)
+
+```css
+.change-positive { color: #16a34a; }
+.change-negative { color: #e21d1d; }
+.change-neutral { color: #a6a6a6; }
+
+.change-arrow {
+  width: 12px;
+  height: 10px;
+  fill: currentColor;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+```
+
+```html
+<div class="change change-positive">
+  <svg class="change-arrow" viewBox="0 0 24 20">
+    <path d="M12 0L24 20L0 20L12 0Z"/>
+  </svg>
+  1.85
+</div>
+```
+
+### Key differences from ROI24 style
+
+| Aspect | Bloomberg | ROI24 |
+|--------|-----------|-------|
+| Background | Very dark (#0a0a0a) | Dark (#050505) |
+| Border | Minimal/none on cells | 1px solid |
+| Font | System + Google Fonts | Inter + JetBrains Mono |
+| Accent | Green (#16a34a) / Red (#e21d1d) | Green (#00ff9d) |
+| Numbers | Tabular-nums, 1 234,56 | Comma decimal for RU locale |
+| Cards | Flat rows, no card bg | Bordered cards |
+| Radius | 0 (sharp) | 8-16px (rounded) |
+
+### Recommended adaptation
+
+Use Bloomberg's **table structure + change component** but apply ROI24's design tokens:
+- Replace Bloomberg's green `#16a34a` with ROI24 accent `#00ff9d`
+- Keep monospace for values (JetBrains Mono)
+- Keep right-align for value/change columns
+- Keep arrow SVG pattern (fill="currentColor")
+- Add `border-radius: 12px` to rows or use card-style (ROI24 prefers cards)
+- Use `gap: 14px` between cells (Bloomberg uses 1px gaps)
+
+---
+
+*Generated from Bloomberg HTML snapshot — 1.3MB minified React SPA. Data extracted via regex parsing of rendered DOM.*