Update SVG dimensions and adjust layout for dashboard charts
This commit is contained in:
Matt Batchelder
@@ -1350,7 +1350,7 @@ function oribi_render_platform_row( $a ) {
|
||||
$visual_html = '<div class="dashboard-tv" data-dashboard-container="true">
|
||||
<div class="dashboard-tv__body">
|
||||
<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>
|
||||
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" stop-color="#004225" stop-opacity="1"/>
|
||||
@@ -1362,98 +1362,98 @@ function oribi_render_platform_row( $a ) {
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- ─ Bar chart group 1: Performance ─ -->
|
||||
<g transform="translate(20,20)">
|
||||
<!-- ── Top-left: Performance bars ── -->
|
||||
<g transform="translate(35,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)"/>
|
||||
<rect class="bar" x="0" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="40" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="80" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="120" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="160" y="120" width="28" 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>
|
||||
<text class="cl" x="14" y="0" font-size="10" text-anchor="middle" fill="#666">API</text>
|
||||
<text class="cl" x="54" y="0" font-size="10" text-anchor="middle" fill="#666">Cache</text>
|
||||
<text class="cl" x="94" y="0" font-size="10" text-anchor="middle" fill="#666">DB</text>
|
||||
<text class="cl" x="134" y="0" font-size="10" text-anchor="middle" fill="#666">Queue</text>
|
||||
<text class="cl" x="174" 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 id="values-group-1" transform="translate(0,168)">
|
||||
<text class="cv" x="14" 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="94" 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="174" 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)">
|
||||
<!-- ── Top-right: Requests/sec bars ── -->
|
||||
<g transform="translate(430,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)"/>
|
||||
<rect class="bar" x="0" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="40" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="80" y="120" width="28" height="0" fill="url(#barGradient)"/>
|
||||
<rect class="bar" x="120" y="120" width="28" 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>
|
||||
<text class="cl" x="14" y="0" font-size="10" text-anchor="middle" fill="#666">Read</text>
|
||||
<text class="cl" x="54" y="0" font-size="10" text-anchor="middle" fill="#666">Write</text>
|
||||
<text class="cl" x="94" y="0" font-size="10" text-anchor="middle" fill="#666">Update</text>
|
||||
<text class="cl" x="134" 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 id="values-group-2" transform="translate(0,168)">
|
||||
<text class="cv" x="14" 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="94" 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>
|
||||
|
||||
<!-- ─ Line graph: Traffic Trend ─ -->
|
||||
<g id="line-graph" transform="translate(330,20)">
|
||||
<!-- ── Bottom-left: Traffic Trend line ── -->
|
||||
<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>
|
||||
<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"/>
|
||||
<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="340" y2="40" 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="340" 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"/>
|
||||
<path id="line-fill" d="M0,80 L340,80 L340,145 L0,145 Z" fill="url(#lineGradient)"/>
|
||||
<path id="line-path" d="M0,80 L340,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)">
|
||||
<!-- ── Bottom-right: Distribution pie ── -->
|
||||
<g transform="translate(490,245)">
|
||||
<text class="ct" x="100" y="0" font-size="14" font-weight="600" text-anchor="middle" fill="#333">Distribution</text>
|
||||
<g transform="translate(100,90)">
|
||||
<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 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 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 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>
|
||||
<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>
|
||||
<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="13" font-weight="600" fill="#333">100%</text>
|
||||
</g>
|
||||
<g transform="translate(0,180)">
|
||||
<g transform="translate(30,170)">
|
||||
<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>
|
||||
<rect x="100" y="0" width="8" height="8" fill="#f59e0b"/>
|
||||
<text class="cl" x="112" y="8" font-size="11" fill="#666">Service C</text>
|
||||
<rect x="100" y="15" width="8" height="8" fill="#ef4444"/>
|
||||
<text class="cl" x="112" y="23" font-size="11" fill="#666">Service D</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
Reference in New Issue
Block a user