Skip to content

Commit 12ace6c

Browse files
smfrsmfr
committed
Tentative SVG “Dashboard” test
See Description.md for details
1 parent a9d936c commit 12ace6c

File tree

10 files changed

+21974
-0
lines changed

10 files changed

+21974
-0
lines changed

‎MotionMark/resources/debug-runner/tests.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -470,6 +470,10 @@ Suites.push(new Suite("Dev suite",
470470
{
471471
url: "dev/radial-chart/radial-chart.html",
472472
name: "Canvas Radial Chart"
473+
},
474+
{
475+
url: "dev/dashboard/dashboard.html",
476+
name: "Dashboard"
473477
}
474478
]
475479
));

‎MotionMark/tests/dev/dashboard/Description.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Dashboard SVG Test
2+
3+
Goals
4+
-----
5+
6+
Measure SVG/rendering workloads that are common for data visualization.
7+
8+
9+
Design
10+
------
11+
12+
A test based on D3.js that updates various SVG graphcs
13+
14+
15+
Features tested
16+
---------------
17+
18+
* TBD
19+
20+
21+
Work per measured frame
22+
----------------------
23+
24+
D3 updates to the SVG DOM, and work triggered by those updates.
25+
26+
27+
Licensing requirements
28+
----------------------
29+
30+
None
31+
32+
33+
Remaining work
34+
--------------
35+
36+
* Use some more SVG features
37+
* Flesh out the content some more; use more D3 features.

‎MotionMark/tests/dev/dashboard/dashboard.html

Lines changed: 255 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,255 @@
1+
<!--
2+
Copyright (C) 2025 Apple Inc. All rights reserved.
3+
4+
Redistribution and use in source and binary forms, with or without
5+
modification, are permitted provided that the following conditions
6+
are met:
7+
1. Redistributions of source code must retain the above copyright
8+
notice, this list of conditions and the following disclaimer.
9+
2. Redistributions in binary form must reproduce the above copyright
10+
notice, this list of conditions and the following disclaimer in the
11+
documentation and/or other materials provided with the distribution.
12+
13+
THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14+
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15+
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16+
PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17+
BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18+
CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19+
SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20+
INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21+
CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22+
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23+
THE POSSIBILITY OF SUCH DAMAGE.
24+
-->
25+
<!DOCTYPE html>
26+
<html>
27+
<head>
28+
<meta charset="utf-8">
29+
<link rel="stylesheet" type="text/css" href="../../resources/stage.css">
30+
<style>
31+
@property --gap {
32+
syntax: "<length>";
33+
inherits: true;
34+
initial-value: 10px;
35+
}
36+
37+
:root {
38+
font-family: "Helvetica Neue", Helvetica, sans-serif;
39+
color: #eee;
40+
--dark-color: #212121;
41+
--foreground-color: #a2e9e9;
42+
--light-color: #8ecccc;
43+
--light-mid-color: #50717b;
44+
--dark-mid-color: #3a4042;
45+
}
46+
47+
#stage {
48+
background-color: var(--dark-color);
49+
color: var(--foreground-color);
50+
}
51+
52+
.container {
53+
display: grid;
54+
grid-template-columns: 33fr 17fr 13fr 12fr 25fr;
55+
grid-template-rows: 1.5fr 1fr;
56+
gap: var(--gap);
57+
width: 100%;
58+
height: 100%;
59+
border: 1px solid black;
60+
padding: 20px;
61+
box-sizing: border-box;
62+
}
63+
64+
.panel {
65+
position: relative;
66+
padding: 10px;
67+
border: 1px solid var(--light-mid-color);
68+
background-color: var(--dark-mid-color);
69+
box-shadow: 0 0 3px var(--light-mid-color) inset;
70+
border-radius: 5px;
71+
}
72+
73+
.panel > h2 {
74+
position: absolute;
75+
margin-top: 0;
76+
top: 0;
77+
left: 1em;
78+
}
79+
80+
#bandwidth {
81+
grid-row-start: 1;
82+
grid-column: 1 / 2;
83+
display: grid;
84+
align-content: center;
85+
}
86+
87+
.category {
88+
padding: 20px 0;
89+
text-align: center;
90+
}
91+
92+
.category .label {
93+
font-size: 32pt;
94+
}
95+
96+
.category .value {
97+
font-family: monospace;
98+
font-size: 18pt;
99+
}
100+
101+
.category .chart {
102+
height: 10vh;
103+
width: 90%;
104+
margin: 10px auto;
105+
}
106+
107+
#traffic {
108+
grid-row-start: 1;
109+
grid-column: 2 / 4;
110+
display: grid;
111+
align-content: center;
112+
}
113+
114+
#traffic .chart > svg {
115+
display: block;
116+
margin: 10px auto;
117+
}
118+
119+
#user-list {
120+
grid-row-start: 1;
121+
grid-column: 4 / 6;
122+
}
123+
124+
#user-list table {
125+
margin: 50px;
126+
}
127+
128+
#throughput {
129+
grid-row-start: 2;
130+
grid-column: 1 / 3;
131+
display: grid;
132+
align-content: center;
133+
}
134+
135+
.outbound-data-path {
136+
fill: rgba(217, 153, 153, 0.4);
137+
}
138+
139+
.outbound-line {
140+
stroke: rgba(217, 153, 153, 0.65);
141+
}
142+
143+
.inbound-data-path {
144+
fill: rgba(153, 153, 53, 0.4);
145+
}
146+
147+
.inbound-line {
148+
stroke: rgba(153, 153, 53, 0.85);
149+
}
150+
151+
#utilization {
152+
grid-row-start: 2;
153+
grid-column: 3 / 5;
154+
display: grid;
155+
align-content: center;
156+
}
157+
158+
#domains {
159+
grid-row-start: 2;
160+
grid-column: 5 / 6;
161+
display: grid;
162+
align-content: center;
163+
}
164+
</style>
165+
</head>
166+
<body>
167+
<div id="stage">
168+
<div class="container">
169+
<div class="panel" id="bandwidth">
170+
<h2>Bandwidth</h2>
171+
<div class="category">
172+
<div class="label">
173+
Download
174+
</div>
175+
<div class="download value">
176+
123
177+
</div>
178+
<div class="chart">
179+
</div>
180+
</div>
181+
<div class="category">
182+
<div class="label">
183+
Upload
184+
</div>
185+
<div class="upload value">
186+
75
187+
</div>
188+
<div class="chart">
189+
</div>
190+
</div>
191+
</div>
192+
<div class="panel" id="traffic">
193+
<h2>Traffic</h2>
194+
<div class="chart"></div>
195+
<div class="chart"></div>
196+
</div>
197+
<div class="panel" id="user-list">
198+
<h2>Users</h2>
199+
<table>
200+
<thead>
201+
<tr>
202+
<td>User</td>
203+
<td>data</td>
204+
</tr>
205+
</thead>
206+
<tbody>
207+
<tr>
208+
<td>User</td>
209+
<td>data</td>
210+
</tr>
211+
<tr>
212+
<td>User</td>
213+
<td>data</td>
214+
</tr>
215+
<tr>
216+
<td>User</td>
217+
<td>data</td>
218+
</tr>
219+
<tr>
220+
<td>User</td>
221+
<td>data</td>
222+
</tr>
223+
</tbody>
224+
</table>
225+
</div>
226+
<div class="panel" id="throughput">
227+
<h2>Throughput</h2>
228+
</div>
229+
<div class="panel" id="utilization">
230+
<h2>CPU Utilization</h2>
231+
</div>
232+
<div class="panel" id="domains">
233+
<h2>Domains</h2>
234+
</div>
235+
</div>
236+
237+
</div>
238+
<script src="../../../resources/strings.js"></script>
239+
<script src="../../../resources/extensions.js"></script>
240+
<script src="../../../resources/statistics.js"></script>
241+
<script src="../../resources/math.js"></script>
242+
<script src="../../resources/benchmark.js"></script>
243+
<script src="../../resources/controllers.js"></script>
244+
<script src="../../resources/stage.js"></script>
245+
<script src="resources/d3.v7.js"></script>
246+
<script src="resources/dashboard.js"></script>
247+
248+
<script src="resources/throughput-controller.js"></script>
249+
<script src="resources/traffic-controller.js"></script>
250+
<script src="resources/utilization-controller.js"></script>
251+
<script src="resources/bandwidth-controller.js"></script>
252+
<script src="resources/domains-controller.js"></script>
253+
254+
</body>
255+
</html>

0 commit comments

Comments
 (0)