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

Refactor dashboard SVG charts and animations

Browse Source 
- Removed the old SVG file for the dashboard chart and replaced it with a new implementation directly in the PHP file.
- Updated the SVG structure to improve accessibility and styling, including the use of CSS classes for dynamic theming.
- Enhanced the bar charts, line graph, and pie chart with new gradients and animations.
- Adjusted the enqueue script for the dashboard animator to include versioning based on file modification time.
This commit is contained in:
Matt Batchelder
2026-02-21 02:08:54 -05:00
parent 38d585e071
commit a33a6d62d2
5 changed files with 271 additions and 634 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
theme/blocks/index.php
View File

@@ -1344,102 +1344,118 @@ function oribi_render_platform_row( $a ) {
$is_dashboard = ! empty( $a['isDashboard'] ) || stripos( $heading_text, 'dashboard' ) !== false || stripos( $heading_text, 'data' ) !== false;
if ( $is_dashboard ) {
// Render dashboard chart animation
$visual_html = '<div class="dashboard-chart-container" data-dashboard-container="true"><svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" aria-label="Real-time dashboard with animated charts">
<defs>
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#004225;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4CAF50;stop-opacity:0.8" />
</linearGradient>
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#4CAF50;stop-opacity:0.3" />
<stop offset="100%" style="stop-color:#4CAF50;stop-opacity:0" />
</linearGradient>
</defs>
<g id="bar-charts" transform="translate(10, 10)">
<text x="0" y="0" style="font-size:14px;font-weight:600;fill:#333333">Performance</text>
<g id="bars-group-1" transform="translate(0, 25)">
<rect class="bar" x="0" y="0" width="18" height="0" fill="url(#barGradient)" data-index="0" data-label="API"/>
<rect class="bar" x="25" y="0" width="18" height="0" fill="url(#barGradient)" data-index="1" data-label="Cache"/>
<rect class="bar" x="50" y="0" width="18" height="0" fill="url(#barGradient)" data-index="2" data-label="DB"/>
<rect class="bar" x="75" y="0" width="18" height="0" fill="url(#barGradient)" data-index="3" data-label="Queue"/>
<rect class="bar" x="100" y="0" width="18" height="0" fill="url(#barGradient)" data-index="4" data-label="Worker"/>
</g>
<g transform="translate(0, 145)">
<text x="0" y="0" style="font-size:12px;fill:#666666">API</text>
<text x="25" y="0" style="font-size:12px;fill:#666666">Cache</text>
<text x="50" y="0" style="font-size:12px;fill:#666666">DB</text>
<text x="75" y="0" style="font-size:12px;fill:#666666">Queue</text>
<text x="100" y="0" style="font-size:12px;fill:#666666">Worker</text>
</g>
<g id="values-group-1" transform="translate(0, 160)">
<text x="9" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0%</text>
<text x="34" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0%</text>
<text x="59" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0%</text>
<text x="84" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0%</text>
<text x="109" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0%</text>
</g>
<text x="150" y="0" style="font-size:14px;font-weight:600;fill:#333333">Requests/sec</text>
<g id="bars-group-2" transform="translate(150, 25)">
<rect class="bar" x="0" y="0" width="18" height="0" fill="url(#barGradient)" data-index="0" data-label="Read"/>
<rect class="bar" x="25" y="0" width="18" height="0" fill="url(#barGradient)" data-index="1" data-label="Write"/>
<rect class="bar" x="50" y="0" width="18" height="0" fill="url(#barGradient)" data-index="2" data-label="Update"/>
<rect class="bar" x="75" y="0" width="18" height="0" fill="url(#barGradient)" data-index="3" data-label="Delete"/>
</g>
<g transform="translate(150, 145)">
<text x="0" y="0" style="font-size:12px;fill:#666666">Read</text>
<text x="25" y="0" style="font-size:12px;fill:#666666">Write</text>
<text x="50" y="0" style="font-size:12px;fill:#666666">Update</text>
<text x="75" y="0" style="font-size:12px;fill:#666666">Delete</text>
</g>
<g id="values-group-2" transform="translate(150, 160)">
<text x="9" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0</text>
<text x="34" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0</text>
<text x="59" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0</text>
<text x="84" y="0" style="font-size:13px;font-weight:500;fill:#333333" text-anchor="middle" data-value="0">0</text>
</g>
</g>
<g id="line-graph" transform="translate(320, 10)">
<text x="0" y="0" style="font-size:14px;font-weight:600;fill:#333333">Traffic Trend</text>
<g transform="translate(0, 25)">
<line x1="0" y1="0" x2="200" y2="0" stroke="#E0E0E0" stroke-width="0.5"/>
<line x1="0" y1="40" x2="200" y2="40" stroke="#E0E0E0" stroke-width="0.5"/>
<line x1="0" y1="80" x2="200" y2="80" stroke="#E0E0E0" stroke-width="0.5"/>
<line x1="0" y1="120" x2="200" y2="120" stroke="#E0E0E0" stroke-width="0.5"/>
</g>
<path id="line-path" d="M0,80 Q50,60 100,70 T200,50" stroke="#4CAF50" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-dasharray="200" stroke-dashoffset="200"/>
<path id="line-fill" d="M0,80 Q50,60 100,70 T200,50 L200,160 Q100,140 0,160 Z" fill="url(#lineGradient)"/>
</g>
<g id="pie-chart" transform="translate(580, 10)">
<text x="60" y="0" style="font-size:14px;font-weight:600;fill:#333333" text-anchor="middle">Distribution</text>
<g transform="translate(60, 80)">
<g class="pie-segment" id="pie-seg-1" transform="rotate(0)">
<path d="M 0,0 L 0,-45 A 45,45 0 0,1 31.82,-31.82 Z" fill="#004225" opacity="0.9"/>
</g>
<g class="pie-segment" id="pie-seg-2" transform="rotate(90)">
<path d="M 0,0 L 0,-45 A 45,45 0 0,1 31.82,-31.82 Z" fill="#4CAF50" opacity="0.8"/>
</g>
<g class="pie-segment" id="pie-seg-3" transform="rotate(180)">
<path d="M 0,0 L 0,-45 A 45,45 0 0,1 31.82,-31.82 Z" fill="#f59e0b" opacity="0.7"/>
</g>
<g class="pie-segment" id="pie-seg-4" transform="rotate(270)">
<path d="M 0,0 L 0,-45 A 45,45 0 0,1 31.82,-31.82 Z" fill="#ef4444" opacity="0.7"/>
</g>
<circle cx="0" cy="0" r="18" fill="#ffffff" stroke="#E0E0E0" stroke-width="1"/>
<text x="0" y="5" text-anchor="middle" style="font-size:13px;font-weight:500;fill:#333333">100%</text>
</g>
<g transform="translate(0, 210)">
<rect x="0" y="0" width="8" height="8" fill="#004225"/>
<text x="12" y="7" style="font-size:12px;fill:#666666">Service A</text>
<rect x="0" y="15" width="8" height="8" fill="#4CAF50"/>
<text x="12" y="22" style="font-size:12px;fill:#666666">Service B</text>
<rect x="100" y="0" width="8" height="8" fill="#f59e0b"/>
<text x="112" y="7" style="font-size:12px;fill:#666666">Service C</text>
<rect x="100" y="15" width="8" height="8" fill="#ef4444"/>
<text x="112" y="22" style="font-size:12px;fill:#666666">Service D</text>
</g>
</g>
</svg></div>';
// Render animated dashboard chart SVG
// Text uses class hooks: .ct = title, .cl = label, .cv = value
// JS will dynamically set fill colours based on data-theme
$visual_html = '<div class="dashboard-chart-container" data-dashboard-container="true">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts" style="border-radius:4px">
<defs>
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#004225" stop-opacity="1"/>
<stop offset="100%" stop-color="#4CAF50" stop-opacity=".8"/>
</linearGradient>
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#4CAF50" stop-opacity=".3"/>
<stop offset="100%" stop-color="#4CAF50" stop-opacity="0"/>
</linearGradient>
</defs>
<!-- ─ Bar chart group 1: Performance ─ -->
<g transform="translate(20,20)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Performance</text>
<g id="bars-group-1" transform="translate(0,25)">
<rect class="bar" x="0" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="25" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="50" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="75" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="100" y="120" width="18" height="0" fill="url(#barGradient)"/>
</g>
<g transform="translate(0,152)">
<text class="cl" x="9" y="0" font-size="10" text-anchor="middle" fill="#666">API</text>
<text class="cl" x="34" y="0" font-size="10" text-anchor="middle" fill="#666">Cache</text>
<text class="cl" x="59" y="0" font-size="10" text-anchor="middle" fill="#666">DB</text>
<text class="cl" x="84" y="0" font-size="10" text-anchor="middle" fill="#666">Queue</text>
<text class="cl" x="109" y="0" font-size="10" text-anchor="middle" fill="#666">Worker</text>
</g>
<g id="values-group-1" transform="translate(0,166)">
<text class="cv" x="9" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
<text class="cv" x="34" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
<text class="cv" x="59" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
<text class="cv" x="84" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
<text class="cv" x="109" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
</g>
</g>
<!-- ─ Bar chart group 2: Requests/sec ─ -->
<g transform="translate(170,20)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Requests/sec</text>
<g id="bars-group-2" transform="translate(0,25)">
<rect class="bar" x="0" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="25" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="50" y="120" width="18" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="75" y="120" width="18" height="0" fill="url(#barGradient)"/>
</g>
<g transform="translate(0,152)">
<text class="cl" x="9" y="0" font-size="10" text-anchor="middle" fill="#666">Read</text>
<text class="cl" x="34" y="0" font-size="10" text-anchor="middle" fill="#666">Write</text>
<text class="cl" x="59" y="0" font-size="10" text-anchor="middle" fill="#666">Update</text>
<text class="cl" x="84" y="0" font-size="10" text-anchor="middle" fill="#666">Delete</text>
</g>
<g id="values-group-2" transform="translate(0,166)">
<text class="cv" x="9" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text>
<text class="cv" x="34" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text>
<text class="cv" x="59" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text>
<text class="cv" x="84" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text>
</g>
</g>
<!-- ─ Line graph: Traffic Trend ─ -->
<g id="line-graph" transform="translate(330,20)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Traffic Trend</text>
<g transform="translate(0,25)">
<line class="grid-line" x1="0" y1="0" x2="200" y2="0" stroke="#E0E0E0" stroke-width=".5"/>
<line class="grid-line" x1="0" y1="40" x2="200" y2="40" stroke="#E0E0E0" stroke-width=".5"/>
<line class="grid-line" x1="0" y1="80" x2="200" y2="80" stroke="#E0E0E0" stroke-width=".5"/>
<line class="grid-line" x1="0" y1="120" x2="200" y2="120" stroke="#E0E0E0" stroke-width=".5"/>
</g>
<g transform="translate(0,25)">
<path id="line-fill" d="M0,80 L200,80 L200,145 L0,145 Z" fill="url(#lineGradient)"/>
<path id="line-path" d="M0,80 L200,80" stroke="#4CAF50" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g>
</g>
<!-- ─ Pie chart: Distribution ─ -->
<g transform="translate(590,20)">
<text class="ct" x="60" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#333">Distribution</text>
<g transform="translate(60,85)">
<g class="pie-segment" transform="rotate(0)">
<path d="M0,0 L0,-45 A45,45 0 0,1 31.82,-31.82 Z" fill="#004225" opacity=".9"/>
</g>
<g class="pie-segment" transform="rotate(90)">
<path d="M0,0 L0,-45 A45,45 0 0,1 31.82,-31.82 Z" fill="#4CAF50" opacity=".8"/>
</g>
<g class="pie-segment" transform="rotate(180)">
<path d="M0,0 L0,-45 A45,45 0 0,1 31.82,-31.82 Z" fill="#f59e0b" opacity=".7"/>
</g>
<g class="pie-segment" transform="rotate(270)">
<path d="M0,0 L0,-45 A45,45 0 0,1 31.82,-31.82 Z" fill="#ef4444" opacity=".7"/>
</g>
<circle id="pie-center" cx="0" cy="0" r="18" fill="#fff" stroke="#E0E0E0" stroke-width="1"/>
<text id="pie-center-text" x="0" y="5" text-anchor="middle" font-size="12" font-weight="600" fill="#333">100%</text>
</g>
<g transform="translate(0,180)">
<rect x="0" y="0" width="8" height="8" fill="#004225"/>
<text class="cl" x="12" y="8" font-size="11" fill="#666">Service A</text>
<rect x="0" y="15" width="8" height="8" fill="#4CAF50"/>
<text class="cl" x="12" y="23" font-size="11" fill="#666">Service B</text>
<rect x="90" y="0" width="8" height="8" fill="#f59e0b"/>
<text class="cl" x="102" y="8" font-size="11" fill="#666">Service C</text>
<rect x="90" y="15" width="8" height="8" fill="#ef4444"/>
<text class="cl" x="102" y="23" font-size="11" fill="#666">Service D</text>
</g>
</g>
</svg>
</div>';
$visual_cls = 'platform-visual has-dashboard';
} elseif ( $img_url ) {
$img_style = 'width:' . $img_w . 'px;max-width:100%;height:auto;border-radius:var(--radius-sm);object-fit:contain;display:block;margin-inline:auto;';