Add dashboard chart animations and SVG integration for dynamic data visualization
This commit is contained in:
Matt Batchelder
123
theme/assets/svg/dashboard-chart.svg
Normal file
123
theme/assets/svg/dashboard-chart.svg
Normal file
@@ -0,0 +1,123 @@
|
||||
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" class="dashboard-chart">
|
||||
<defs>
|
||||
<style>
|
||||
.dashboard-chart { background: transparent; }
|
||||
.chart-title { font-size: 14px; font-weight: 600; fill: var(--text-primary, #1a1a1a); }
|
||||
.chart-label { font-size: 12px; fill: var(--text-secondary, #666); }
|
||||
.chart-value { font-size: 13px; font-weight: 500; fill: var(--text-primary, #1a1a1a); }
|
||||
.bar { fill: url(#barGradient); transition: height 0.3s ease; transform-origin: bottom; }
|
||||
.line-path { stroke: var(--accent-color, #10b981); fill: none; stroke-width: 2.5; stroke-linecap: round; }
|
||||
.pie-segment { transition: transform 0.4s ease; }
|
||||
</style>
|
||||
|
||||
<!-- Gradients -->
|
||||
<linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:var(--primary-color, #3b82f6);stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:var(--accent-color, #10b981);stop-opacity:0.7" />
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="lineGradient" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:var(--accent-color, #10b981);stop-opacity:0.3" />
|
||||
<stop offset="100%" style="stop-color:var(--accent-color, #10b981);stop-opacity:0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
<!-- Left: Bar Charts -->
|
||||
<g id="bar-charts" transform="translate(10, 10)">
|
||||
<!-- Bar Chart 1 -->
|
||||
<text x="0" y="0" class="chart-title">Performance</text>
|
||||
<g id="bars-group-1" transform="translate(0, 25)">
|
||||
<rect class="bar" x="0" y="0" width="18" height="0" data-index="0" data-label="API"/>
|
||||
<rect class="bar" x="25" y="0" width="18" height="0" data-index="1" data-label="Cache"/>
|
||||
<rect class="bar" x="50" y="0" width="18" height="0" data-index="2" data-label="DB"/>
|
||||
<rect class="bar" x="75" y="0" width="18" height="0" data-index="3" data-label="Queue"/>
|
||||
<rect class="bar" x="100" y="0" width="18" height="0" data-index="4" data-label="Worker"/>
|
||||
</g>
|
||||
<g transform="translate(0, 145)">
|
||||
<text x="0" y="0" class="chart-label">API</text>
|
||||
<text x="25" y="0" class="chart-label">Cache</text>
|
||||
<text x="50" y="0" class="chart-label">DB</text>
|
||||
<text x="75" y="0" class="chart-label">Queue</text>
|
||||
<text x="100" y="0" class="chart-label">Worker</text>
|
||||
</g>
|
||||
<g id="values-group-1" transform="translate(0, 160)">
|
||||
<text x="9" y="0" class="chart-value" text-anchor="middle" data-value="0">0%</text>
|
||||
<text x="34" y="0" class="chart-value" text-anchor="middle" data-value="0">0%</text>
|
||||
<text x="59" y="0" class="chart-value" text-anchor="middle" data-value="0">0%</text>
|
||||
<text x="84" y="0" class="chart-value" text-anchor="middle" data-value="0">0%</text>
|
||||
<text x="109" y="0" class="chart-value" text-anchor="middle" data-value="0">0%</text>
|
||||
</g>
|
||||
|
||||
<!-- Bar Chart 2 -->
|
||||
<text x="150" y="0" class="chart-title">Requests/sec</text>
|
||||
<g id="bars-group-2" transform="translate(150, 25)">
|
||||
<rect class="bar" x="0" y="0" width="18" height="0" data-index="0" data-label="Read"/>
|
||||
<rect class="bar" x="25" y="0" width="18" height="0" data-index="1" data-label="Write"/>
|
||||
<rect class="bar" x="50" y="0" width="18" height="0" data-index="2" data-label="Update"/>
|
||||
<rect class="bar" x="75" y="0" width="18" height="0" data-index="3" data-label="Delete"/>
|
||||
</g>
|
||||
<g transform="translate(150, 145)">
|
||||
<text x="0" y="0" class="chart-label">Read</text>
|
||||
<text x="25" y="0" class="chart-label">Write</text>
|
||||
<text x="50" y="0" class="chart-label">Update</text>
|
||||
<text x="75" y="0" class="chart-label">Delete</text>
|
||||
</g>
|
||||
<g id="values-group-2" transform="translate(150, 160)">
|
||||
<text x="9" y="0" class="chart-value" text-anchor="middle" data-value="0">0</text>
|
||||
<text x="34" y="0" class="chart-value" text-anchor="middle" data-value="0">0</text>
|
||||
<text x="59" y="0" class="chart-value" text-anchor="middle" data-value="0">0</text>
|
||||
<text x="84" y="0" class="chart-value" text-anchor="middle" data-value="0">0</text>
|
||||
</g>
|
||||
</g>
|
||||
|
||||
<!-- Middle: Line Graph -->
|
||||
<g id="line-graph" transform="translate(320, 10)">
|
||||
<text x="0" y="0" class="chart-title">Traffic Trend</text>
|
||||
<g transform="translate(0, 25)">
|
||||
<!-- Background grid -->
|
||||
<line x1="0" y1="0" x2="200" y2="0" stroke="var(--border-color, #e5e7eb)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="40" x2="200" y2="40" stroke="var(--border-color, #e5e7eb)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="80" x2="200" y2="80" stroke="var(--border-color, #e5e7eb)" stroke-width="0.5"/>
|
||||
<line x1="0" y1="120" x2="200" y2="120" stroke="var(--border-color, #e5e7eb)" stroke-width="0.5"/>
|
||||
</g>
|
||||
<path id="line-path" class="line-path" d="M0,80 Q50,60 100,70 T200,50" 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>
|
||||
|
||||
<!-- Right: Pie Chart -->
|
||||
<g id="pie-chart" transform="translate(580, 10)">
|
||||
<text x="60" y="0" class="chart-title" text-anchor="middle">Distribution</text>
|
||||
<g transform="translate(60, 80)">
|
||||
<!-- Pie segments with animation -->
|
||||
<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="var(--primary-color, #3b82f6)" 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="var(--accent-color, #10b981)" 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>
|
||||
<!-- Center circle -->
|
||||
<circle cx="0" cy="0" r="18" fill="white" stroke="var(--border-color, #e5e7eb)" stroke-width="1"/>
|
||||
<text x="0" y="5" text-anchor="middle" class="chart-value">100%</text>
|
||||
</g>
|
||||
<!-- Legend -->
|
||||
<g transform="translate(0, 210)">
|
||||
<rect x="0" y="0" width="8" height="8" fill="var(--primary-color, #3b82f6)"/>
|
||||
<text x="12" y="7" class="chart-label">Service A</text>
|
||||
|
||||
<rect x="0" y="15" width="8" height="8" fill="var(--accent-color, #10b981)"/>
|
||||
<text x="12" y="22" class="chart-label">Service B</text>
|
||||
|
||||
<rect x="100" y="0" width="8" height="8" fill="#f59e0b"/>
|
||||
<text x="112" y="7" class="chart-label">Service C</text>
|
||||
|
||||
<rect x="100" y="15" width="8" height="8" fill="#ef4444"/>
|
||||
<text x="112" y="22" class="chart-label">Service D</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
Reference in New Issue
Block a user