ASSETS-32307: updated metrics report with latest numbers (#21)

blocks/adp-metrics/adp-metrics.js

@@ -6,20 +6,20 @@ import { logError } from '../../scripts/scripts.js';
 
 const GENERAL_METRICS = [{
   category: 'Total assets',
-  amount: 10118,
+  amount: 3026,
 }, {
   category: 'Total size',
-  amount: 1024 * 1024 * 1024 * 209,
+  amount: 1024 * 1024 * 1024 * 203,
   unit: 'bytes',
 }, {
   category: 'Uploads year-to-date',
-  amount: 10118,
+  amount: 3614,
 }, {
   category: 'Uploads quarter-to-date',
-  amount: 6620,
+  amount: 188,
 }, {
   category: 'Uploads last 30 days',
-  amount: 6462,
+  amount: 47,
 }];
 
 function formatNumber(number) {
@@ -57,31 +57,29 @@ function formatAmount(metric) {
 }
 
 const MIME_TYPES = [
-  { category: 'video/mp4', amount: 3582 },
-  { category: 'image/jpeg', amount: 2391 },
-  { category: 'image/png', amount: 2053 },
-  { category: 'video/quicktime', amount: 424 },
-  { category: 'image/vnd.adobe.photoshop', amount: 380 },
-  { category: 'audio/x-wav', amount: 104 },
-  { category: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', amount: 102 },
-  { category: 'application/vnd.adobe.sparkler.project+dcx', amount: 102 },
-  { category: 'application/pdf', amount: 92 },
+  { category: 'image/jpeg', amount: 981 },
+  { category: 'image/png', amount: 769 },
+  { category: 'video/mp4', amount: 477 },
+  { category: 'image/vnd.adobe.photoshop', amount: 349 },
+  { category: 'video/quicktime', amount: 112 },
+  { category: 'audio/x-wav', amount: 100 },
   { category: 'application/octet-stream', amount: 48 },
-  { category: 'application/postscript', amount: 33 },
   { category: 'application/json', amount: 30 },
-  { category: 'application/vnd.audiograph', amount: 19 },
+  { category: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', amount: 27 },
+  { category: 'application/pdf', amount: 25 },
+  { category: 'application/postscript', amount: 21 },
   { category: 'application/x-subrip', amount: 18 },
   { category: 'application/vnd.openxmlformats-officedocument.presentationml.presentation', amount: 16 },
-  { category: 'application/zip', amount: 13 },
-  { category: 'image/svg+xml', amount: 12 },
-  { category: 'image/gif', amount: 11 },
-  { category: 'application/vnd.3gpp.pic-bw-small', amount: 9 },
-  { category: 'video/ogg', amount: 9 },
+  { category: 'application/vnd.audiograph', amount: 13 },
+  { category: 'application/zip', amount: 8 },
   { category: 'image/tiff', amount: 8 },
-  { category: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', amount: 7 },
+  { category: 'application/vnd.3gpp.pic-bw-small', amount: 7 },
   { category: 'audio/mpeg', amount: 4 },
+  { category: 'image/svg+xml', amount: 3 },
   { category: 'text/html', amount: 3 },
   { category: 'text/plain', amount: 3 },
+  { category: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', amount: 2 },
+  { category: 'image/gif', amount: 1 },
 ];
 
 const BUSINESS_UNITS = [{

blocks/gmo-metrics/gmo-metrics.css

@@ -0,0 +1,103 @@
+.gmo-metrics-container {
+  background-color: var(--assets-browser-background-color);
+}
+
+.gmo-metrics {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+}
+
+.gmo-metrics::before {
+  content: '';
+}
+
+.gmo-metrics .graph-container {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1rem;
+  justify-content: space-between;
+  container-type: inline-size;
+}
+
+.gmo-metrics .graph-container > div {
+  box-shadow: 0 0 7px rgb(0 0 0 / 10%);
+  background-color: white;
+  border-radius: 10px;
+  padding: 1rem;
+  display: flex;
+  gap: 1rem;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 200px;
+  flex: 1;
+}
+
+.gmo-metrics .graph-container > div.metric-placeholder {
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  visibility: hidden;
+  border: unset;
+}
+
+.gmo-metrics .graph-container .asset-metric-graph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.gmo-metrics h1 {
+  font-size: 1.25rem;
+  margin: 0;
+  padding: 0;
+}
+
+.gmo-metrics h2 {
+  font-size: 1rem;
+  margin: 0;
+  padding: 0;
+}
+
+.gmo-metrics table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.gmo-metrics table thead th,
+.gmo-metrics table tbody td {
+  text-align: left;
+  font-size: .8rem;
+  padding: .5rem;
+  border-bottom: 1px solid lightgray;
+}
+
+.gmo-metrics table thead th:last-child,
+.gmo-metrics table tbody td:last-child {
+  white-space: nowrap;
+  text-align: right;
+}
+
+.gmo-metrics table colgroup col.table-description {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .gmo-metrics .graph-container > div {
+    min-width: 400px;
+  }
+}
+
+@media (min-width: 950px) {
+  .gmo-metrics .graph-container .asset-metric-graph {
+    display: inline-block;
+    align-items: unset;
+    justify-content: unset;
+  }
+
+  .gmo-metrics .graph-container .asset-metric-graph.bar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}