OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

feat: Replace hard-coded screen count with sparkline and update KPI rendering for improved visualization

Browse Source
This commit is contained in:
Matt Batchelder
2026-04-06 07:22:38 -04:00
parent 974e048f76
commit 96677fdd77
2 changed files with 72 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
theme/blocks/index.php
View File

@@ -3550,36 +3550,53 @@ function oribi_render_platform_row($a)
$rs .= '<div class="rsl-badge">&#9733; Gold Partner</div>';
$rs .= '<div class="rsl-sub">Member since 2023</div>';
$rs .= '</div>';
$rs .= '<div class="rsl-screens"><span class="rsl-screens__val">248</span><span class="rsl-screens__lbl">screens</span></div>';
/* Sparkline replaces the hard-coded screen count */
$spark = [35, 45, 38, 55, 50, 68, 80];
$rs .= '<div class="rsl-sparkline">';
foreach ($spark as $h) {
$rs .= '<div class="rsl-spark__bar" style="height:' . $h . '%"></div>';
}
$rs .= '</div>';
$rs .= '</div>';
/* KPI row */
/* KPI row — mini bar charts, no specific figures */
$kpis = [
['label' => 'Margin', 'bars' => [48, 52, 58, 55, 65], 'cls' => ''],
['label' => 'Revenue', 'bars' => [38, 52, 48, 68, 78], 'cls' => 'rsl-kpi--primary'],
['label' => 'Clients', 'bars' => [42, 46, 54, 62, 70], 'cls' => ''],
];
$rs .= '<div class="rsl-kpis">';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">32%</div><div class="rsl-kpi__lbl">Margin</div></div>';
$rs .= '<div class="rsl-kpi rsl-kpi--primary"><div class="rsl-kpi__val">$2,840</div><div class="rsl-kpi__lbl">This month</div></div>';
$rs .= '<div class="rsl-kpi"><div class="rsl-kpi__val">14</div><div class="rsl-kpi__lbl">Clients</div></div>';
foreach ($kpis as $k) {
$rs .= '<div class="rsl-kpi ' . trim($k['cls']) . '">';
$rs .= '<div class="rsl-kpi__bars">';
foreach ($k['bars'] as $h) {
$rs .= '<div class="rsl-kpi__bar" style="height:' . $h . '%"></div>';
}
$rs .= '</div>';
$rs .= '<div class="rsl-kpi__lbl">' . $k['label'] . '</div>';
$rs .= '</div>';
}
$rs .= '</div>';
/* Tier progress bars */
/* Tier progress bars — no percentage labels */
$rs .= '<div class="rsl-tiers">';
$tiers = [
['name' => 'Silver', 'rate' => '25%', 'cls' => 'silver', 'w' => '100'],
['name' => 'Gold &#9733;', 'rate' => '32%', 'cls' => 'gold', 'w' => '68', 'active' => true],
['name' => 'Platinum', 'rate' => '40%', 'cls' => 'plat', 'w' => '30'],
['name' => 'Silver', 'cls' => 'silver', 'w' => '100'],
['name' => 'Gold &#9733;', 'cls' => 'gold', 'w' => '68', 'active' => true],
['name' => 'Platinum', 'cls' => 'plat', 'w' => '30'],
];
foreach ($tiers as $t) {
$act = !empty($t['active']) ? ' rsl-tier--active' : '';
$rs .= '<div class="rsl-tier' . $act . '">';
$rs .= '<span class="rsl-tier__name">' . $t['name'] . '</span>';
$rs .= '<div class="rsl-tier__bar"><div class="rsl-tier__fill rsl-tf--' . $t['cls'] . '" style="width:' . $t['w'] . '%"></div></div>';
$rs .= '<span class="rsl-tier__rate">' . $t['rate'] . '</span>';
$rs .= '</div>';
}
$rs .= '</div>';
/* Progress to Platinum */
/* Progress to next tier */
$rs .= '<div class="rsl-next">';
$rs .= '<span class="rsl-next__lbl">116 screens to Platinum</span>';
$rs .= '<span class="rsl-next__lbl">Progress to Platinum</span>';
$rs .= '<div class="rsl-next__bar"><div class="rsl-next__fill"></div></div>';
$rs .= '</div>';