Add UI features from Demo work (#1495)

Add several small UI features for demo change request.
world-federation-of-advertisers · Feb 26, 2024 · 8ea3a4b · 8ea3a4b
1 parent 9b4d26d
commit 8ea3a4b
Show file tree

Hide file tree

Showing 22 changed files with 102 additions and 282 deletions.
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/BUILD.bazel
@@ -7,6 +7,7 @@ npm_link_all_packages()
 js_library(
     name = "app",
     srcs = [
+        "app.css",
         "app.tsx",
         "index.css",
         "index.tsx",

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/app.css b/experimental/reporting-ui/src/main/react/reporting-ui/app.css
@@ -0,0 +1,17 @@
+ /* Copyright 2024 The Cross-Media Measurement Authors
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+.content {
+  margin-bottom: 60px;
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/app.tsx b/experimental/reporting-ui/src/main/react/reporting-ui/app.tsx
@@ -16,13 +16,16 @@ import React from 'react';
 import { routes } from './route';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import FeedbackButton from './component/feedback_button/feedback_button';
+import './app.css';
 
 const router = createBrowserRouter(routes);
 
 const App = () => {
     return (
         <React.Fragment>
-            <RouterProvider router={router} />
+            <div className="content">
+                <RouterProvider router={router} />
+            </div>
             <FeedbackButton />
         </React.Fragment >
     );

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/testing/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/client/reporting/testing/BUILD.bazel
@@ -15,6 +15,7 @@ js_library(
         "//:node_modules/react",
         "//:node_modules/react-dom",
         "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model:chart_group",
         "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
         "//experimental/reporting-ui/src/main/react/reporting-ui/public/asset/font",
     ],

diff --git a/...eporting-ui/src/main/react/reporting-ui/client/reporting/testing/fake_reporting_client.ts b/...eporting-ui/src/main/react/reporting-ui/client/reporting/testing/fake_reporting_client.ts
@@ -17,27 +17,27 @@ import {
   GetReportResponse,
   ListReportsResponse,
   Report,
-  ReportState,
-  UniqueReach,
 } from '../../../model/reporting';
+import { ChartGroup } from '../../../model/chart_group';
 import {ReportingClient} from '../client';
 
+
 function regenerateTimeData() {
-  const chartData: UniqueReach[] = [];
+  const chartData: ChartGroup[] = [];
   for (let i = 0; i < 7; i++) {
     const date = new Date(Date.UTC(2020, 0, i + 1));
     let rolling = 0;
     for (let pub = 1; pub < 4; pub++) {
       const value = Math.floor(Math.random() * i + 3);
       rolling += value;
       const temp = {
-        pub,
+        group: pub.toString(),
         value,
         date,
       };
       chartData.push(temp);
     }
-    chartData.push({pub: 0, value: rolling, date});
+    chartData.push({group: '0', value: rolling, date});
   }
 
   return chartData;
@@ -49,249 +49,11 @@ export class FakeReportingClient implements ReportingClient {
   constructor() {
     this.reports = [
       {
-        id: '1',
+        reportId: '1',
         name: 'Winter campaigns report',
-        overview: {
-          totalImpressions: 23900000,
-          totalReach: 6800000,
-          totalOnTargetReach: 3300000,
-          totalUniqueReach: 0,
-          totalAverageFrequency: 8,
-        },
-        summary: [
-          {
-            id: 1,
-            publisher: 'Pied Piper',
-            impressions: 9300000,
-            reach: 2200000,
-            onTargetReach: 1300000,
-            uniqueReach: 589000,
-            averageFrequency: 4,
-          },
-          {
-            id: 2,
-            publisher: 'Digital Sense',
-            impressions: 7800000,
-            reach: 1300000,
-            onTargetReach: 800000,
-            uniqueReach: 233000,
-            averageFrequency: 5,
-          },
-          {
-            id: 3,
-            publisher: 'Ad Technologies',
-            impressions: 6800000,
-            reach: 3300000,
-            onTargetReach: 1200000,
-            uniqueReach: 643000,
-            averageFrequency: 16,
-          },
-        ],
-        targetUniqueReachByPlatform: regenerateTimeData(),
-        targetXmediaReachByFreq: [
-          {
-            cat: '1+',
-            value: 0,
-            x: 0,
-          },
-          {
-            cat: '2+',
-            value: 0,
-            x: 0,
-          },
-          {
-            cat: '3+',
-            value: 0,
-            x: 0,
-          },
-          {
-            cat: '1+',
-            value: 15,
-            x: 8,
-          },
-          {
-            cat: '2+',
-            value: 20,
-            x: 8,
-          },
-          {
-            cat: '3+',
-            value: 25,
-            x: 8,
-          },
-          {
-            cat: '1+',
-            value: 25,
-            x: 12,
-          },
-          {
-            cat: '2+',
-            value: 32,
-            x: 12,
-          },
-          {
-            cat: '3+',
-            value: 40,
-            x: 12,
-          },
-          {
-            cat: '1+',
-            value: 35,
-            x: 16,
-          },
-          {
-            cat: '2+',
-            value: 45,
-            x: 16,
-          },
-          {
-            cat: '3+',
-            value: 55,
-            x: 16,
-          },
-          {
-            cat: '1+',
-            value: 42,
-            x: 20,
-          },
-          {
-            cat: '2+',
-            value: 50,
-            x: 20,
-          },
-          {
-            cat: '3+',
-            value: 57,
-            x: 20,
-          },
-          {
-            cat: '1+',
-            value: 47,
-            x: 24,
-          },
-          {
-            cat: '2+',
-            value: 55,
-            x: 24,
-          },
-          {
-            cat: '3+',
-            value: 62,
-            x: 24,
-          },
-          {
-            cat: '1+',
-            value: 49,
-            x: 28,
-          },
-          {
-            cat: '2+',
-            value: 57,
-            x: 28,
-          },
-          {
-            cat: '3+',
-            value: 64,
-            x: 28,
-          },
-          {
-            cat: '1+',
-            value: 51,
-            x: 32,
-          },
-          {
-            cat: '2+',
-            value: 59,
-            x: 32,
-          },
-          {
-            cat: '3+',
-            value: 66,
-            x: 32,
-          },
-        ],
-        totalReach: [
-          {
-            pub: 1,
-            value: 0,
-            date: new Date(Date.UTC(2020, 0, 3)),
-          },
-          {
-            pub: 1,
-            value: 500000,
-            date: new Date(Date.UTC(2020, 0, 4)),
-          },
-          {
-            pub: 1,
-            value: 1000000,
-            date: new Date(Date.UTC(2020, 0, 5)),
-          },
-          {
-            pub: 1,
-            value: 1300000,
-            date: new Date(Date.UTC(2020, 0, 6)),
-          },
-          {
-            pub: 1,
-            value: 1600000,
-            date: new Date(Date.UTC(2020, 0, 7)),
-          },
-          {
-            pub: 1,
-            value: 1700000,
-            date: new Date(Date.UTC(2020, 0, 8)),
-          },
-          {
-            pub: 1,
-            value: 1750000,
-            date: new Date(Date.UTC(2020, 0, 9)),
-          },
-        ],
-        targetReach: regenerateTimeData(),
-        demo: [
-          {
-            cat: 'F 18-24',
-            val: 40,
-          },
-          {
-            cat: 'F 25-34',
-            val: 45,
-          },
-          {
-            cat: 'F 35-44',
-            val: 57,
-          },
-          {
-            cat: 'F 45-54',
-            val: 75,
-          },
-          {
-            cat: 'F 55-65',
-            val: 88,
-          },
-          {
-            cat: 'M 18-24',
-            val: 40,
-          },
-          {
-            cat: 'M 25-34',
-            val: 45,
-          },
-          {
-            cat: 'M 35-44',
-            val: 57,
-          },
-          {
-            cat: 'M 45-54',
-            val: 75,
-          },
-          {
-            cat: 'M 55-65',
-            val: 88,
-          },
-        ],
-        uniqueReachByPlatform: regenerateTimeData(),
-        status: ReportState.SUCCEEDED,
+        state: 'SUCCEEDED',
+        // TODO(@bdomen-ggl): Need to recreate the data using the latest proto definition.
+        timeInterval: [],
       },
     ];
   }
@@ -306,7 +68,7 @@ export class FakeReportingClient implements ReportingClient {
   }
 
   getReport(req: GetReportRequest): Promise<GetReportResponse> {
-    const rep = this.reports.find(x => x.id === req.id);
+    const rep = this.reports.find(x => x.reportId === req.id);
     const response = Object.freeze({
       report: rep,
     });

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/index.css b/experimental/reporting-ui/src/main/react/reporting-ui/index.css
@@ -14,14 +14,12 @@ limitations under the License. */
 
 @font-face {
     font-family: open-sans-light;
-    src: url(./public/asset/font/open-sans-light.ttf);
+    src: url(public/asset/font/open-sans-light.ttf);
 }
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/model/report_list/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/model/report_list/BUILD.bazel
@@ -14,6 +14,7 @@ js_library(
     ],
     deps = [
         "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/model:chart_group",
     ],
 )
 

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/public/favicon.ico b/experimental/reporting-ui/src/main/react/reporting-ui/public/favicon.ico
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ js_library( @@
         ],
         deps = [
             "//experimental/reporting-ui/src/main/react/reporting-ui/client",
+            "//experimental/reporting-ui/src/main/react/reporting-ui/model:chart_group",
         ],
     )
@@ Expand Down @@