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

Update SVG dimensions and adjust layout for dashboard charts

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 02:29:38 -05:00
parent 954c418556
commit 4591578cb2
2 changed files with 62 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
theme/assets/js/dashboard-animator.js
View File

@@ -10,6 +10,8 @@
var BAR_H = 120; // max bar height (SVG units) var BAR_H = 120; // max bar height (SVG units)
var BAR_MIN = 0.15; // min bar ratio var BAR_MIN = 0.15; // min bar ratio
var LINE_PTS = 8; var LINE_PTS = 8;
var LINE_W = 340; // line graph width in SVG units
var PIE_R = 55; // pie chart radius
var DARK = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#222' }; var DARK = { text: '#E0E0E0', muted: '#9E9E9E', border: '#333', center: '#222' };
var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' }; var LIGHT = { text: '#333333', muted: '#666666', border: '#E0E0E0', center: '#fff' };
@@ -58,12 +60,12 @@
if (!st.linePath) return; if (!st.linePath) return;
var d = 'M'; var d = 'M';
for (var i = 0; i < LINE_PTS; i++) { for (var i = 0; i < LINE_PTS; i++) {
var x = (i / (LINE_PTS - 1)) * 200; var x = (i / (LINE_PTS - 1)) * LINE_W;
var y = 25 + (1 - wave(st.phase * 0.8, i * 0.9)) * 110; var y = 25 + (1 - wave(st.phase * 0.8, i * 0.9)) * 110;
d += (i ? ' L' : '') + x.toFixed(1) + ',' + y.toFixed(1); d += (i ? ' L' : '') + x.toFixed(1) + ',' + y.toFixed(1);
} }
st.linePath.setAttribute('d', d); st.linePath.setAttribute('d', d);
if (st.lineFill) st.lineFill.setAttribute('d', d + ' L200,145 L0,145 Z'); if (st.lineFill) st.lineFill.setAttribute('d', d + ' L' + LINE_W + ',145 L0,145 Z');
} }
/* Pie: each segment gently shifts its slice size, no spinning */ /* Pie: each segment gently shifts its slice size, no spinning */
@@ -85,7 +87,7 @@
var endA = (angle + sweep) * Math.PI / 180; var endA = (angle + sweep) * Math.PI / 180;
// Large-arc flag needed when sweep > 180 // Large-arc flag needed when sweep > 180
var large = sweep > 180 ? 1 : 0; var large = sweep > 180 ? 1 : 0;
var r = 45; var r = PIE_R;
var x1 = Math.sin(startA) * r, y1 = -Math.cos(startA) * r; var x1 = Math.sin(startA) * r, y1 = -Math.cos(startA) * r;
var x2 = Math.sin(endA) * r, y2 = -Math.cos(endA) * r; var x2 = Math.sin(endA) * r, y2 = -Math.cos(endA) * r;
var path = st.pieSegs[j].querySelector('path'); var path = st.pieSegs[j].querySelector('path');

114
theme/blocks/index.php
View File

@@ -1350,7 +1350,7 @@ function oribi_render_platform_row( $a ) {
$visual_html = '<div class="dashboard-tv" data-dashboard-container="true"> $visual_html = '<div class="dashboard-tv" data-dashboard-container="true">
<div class="dashboard-tv__body"> <div class="dashboard-tv__body">
<div class="dashboard-tv__screen"> <div class="dashboard-tv__screen">
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts"> <svg viewBox="0 0 800 450" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart" role="img" aria-label="Animated dashboard charts">
<defs> <defs>
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%"> <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#004225" stop-opacity="1"/> <stop offset="0%" stop-color="#004225" stop-opacity="1"/>
@@ -1362,98 +1362,98 @@ function oribi_render_platform_row( $a ) {
</linearGradient> </linearGradient>
</defs> </defs>
<!-- ─ Bar chart group 1: Performance ─ --> <!-- ── Top-left: Performance bars ── -->
<g transform="translate(20,20)"> <g transform="translate(35,20)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Performance</text> <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)"> <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="0" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="25" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="40" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="50" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="80" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="75" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="120" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="100" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="160" y="120" width="28" height="0" fill="url(#barGradient)"/>
</g> </g>
<g transform="translate(0,152)"> <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="14" 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="54" 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="94" 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="134" 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> <text class="cl" x="174" y="0" font-size="10" text-anchor="middle" fill="#666">Worker</text>
</g> </g>
<g id="values-group-1" transform="translate(0,166)"> <g id="values-group-1" transform="translate(0,168)">
<text class="cv" x="9" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text> <text class="cv" x="14" 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="54" 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="94" 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="134" 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> <text class="cv" x="174" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0%</text>
</g> </g>
</g> </g>
<!-- ─ Bar chart group 2: Requests/sec ─ --> <!-- ── Top-right: Requests/sec bars ── -->
<g transform="translate(170,20)"> <g transform="translate(430,20)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Requests/sec</text> <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)"> <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="0" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="25" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="40" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="50" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="80" y="120" width="28" height="0" fill="url(#barGradient)"/>
<rect class="bar" x="75" y="120" width="18" height="0" fill="url(#barGradient)"/> <rect class="bar" x="120" y="120" width="28" height="0" fill="url(#barGradient)"/>
</g> </g>
<g transform="translate(0,152)"> <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="14" 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="54" 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="94" 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> <text class="cl" x="134" y="0" font-size="10" text-anchor="middle" fill="#666">Delete</text>
</g> </g>
<g id="values-group-2" transform="translate(0,166)"> <g id="values-group-2" transform="translate(0,168)">
<text class="cv" x="9" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text> <text class="cv" x="14" 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="54" 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="94" 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="134" y="0" font-size="11" font-weight="600" text-anchor="middle" fill="#333">0</text>
</g> </g>
</g> </g>
<!-- ─ Line graph: Traffic Trend ─ --> <!-- ── Bottom-left: Traffic Trend line ── -->
<g id="line-graph" transform="translate(330,20)"> <g id="line-graph" transform="translate(35,245)">
<text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Traffic Trend</text> <text class="ct" x="0" y="0" font-size="14" font-weight="600" fill="#333">Traffic Trend</text>
<g transform="translate(0,25)"> <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="0" x2="340" 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="40" x2="340" 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="80" x2="340" y2="80" stroke="#E0E0E0" stroke-width=".5"/>
<line class="grid-line" x1="0" y1="120" x2="200" y2="120" stroke="#E0E0E0" stroke-width=".5"/> <line class="grid-line" x1="0" y1="120" x2="340" y2="120" stroke="#E0E0E0" stroke-width=".5"/>
</g> </g>
<g transform="translate(0,25)"> <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-fill" d="M0,80 L340,80 L340,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"/> <path id="line-path" d="M0,80 L340,80" stroke="#4CAF50" stroke-width="2.5" fill="none" stroke-linecap="round"/>
</g> </g>
</g> </g>
<!-- ─ Pie chart: Distribution ─ --> <!-- ── Bottom-right: Distribution pie ── -->
<g transform="translate(590,20)"> <g transform="translate(490,245)">
<text class="ct" x="60" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#333">Distribution</text> <text class="ct" x="100" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#333">Distribution</text>
<g transform="translate(60,85)"> <g transform="translate(100,90)">
<g class="pie-segment" transform="rotate(0)"> <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"/> <path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#004225" opacity=".9"/>
</g> </g>
<g class="pie-segment" transform="rotate(90)"> <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"/> <path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#4CAF50" opacity=".8"/>
</g> </g>
<g class="pie-segment" transform="rotate(180)"> <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"/> <path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#f59e0b" opacity=".7"/>
</g> </g>
<g class="pie-segment" transform="rotate(270)"> <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"/> <path d="M0,0 L0,-55 A55,55 0 0,1 38.89,-38.89 Z" fill="#ef4444" opacity=".7"/>
</g> </g>
<circle id="pie-center" cx="0" cy="0" r="18" fill="#fff" stroke="#E0E0E0" stroke-width="1"/> <circle id="pie-center" cx="0" cy="0" r="22" 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> <text id="pie-center-text" x="0" y="5" text-anchor="middle" font-size="13" font-weight="600" fill="#333">100%</text>
</g> </g>
<g transform="translate(0,180)"> <g transform="translate(30,170)">
<rect x="0" y="0" width="8" height="8" fill="#004225"/> <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> <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"/> <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> <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"/> <rect x="100" y="0" width="8" height="8" fill="#f59e0b"/>
<text class="cl" x="102" y="8" font-size="11" fill="#666">Service C</text> <text class="cl" x="112" y="8" font-size="11" fill="#666">Service C</text>
<rect x="90" y="15" width="8" height="8" fill="#ef4444"/> <rect x="100" y="15" width="8" height="8" fill="#ef4444"/>
<text class="cl" x="102" y="23" font-size="11" fill="#666">Service D</text> <text class="cl" x="112" y="23" font-size="11" fill="#666">Service D</text>
</g> </g>
</g> </g>
</svg> </svg>