world-federation-of-advertisers · bdomen-ggl · Sep 8, 2023 · Sep 6, 2023 · Sep 6, 2023 · Sep 7, 2023
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
@@ -16,6 +16,7 @@ js_library(
         "//:node_modules/react-dom",
         "//experimental/reporting-ui/src/main/react/reporting-ui/client",
         "//experimental/reporting-ui/src/main/react/reporting-ui/model/reporting",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/public/asset/font",
     ],
 )
 

diff --git a/...ental/reporting-ui/src/main/react/reporting-ui/client/reporting/testing/webpack.config.js b/...ental/reporting-ui/src/main/react/reporting-ui/client/reporting/testing/webpack.config.js
@@ -46,5 +46,6 @@ module.exports = {
   plugins: [new MiniCssExtractPlugin()],
   devServer: {
     static: path.resolve(__dirname, '../../../public'),
+    historyApiFallback: true,
   },
 };
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/component/card_wrapper/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/component/card_wrapper/BUILD.bazel
@@ -0,0 +1,14 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(
+    default_visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "card_wrapper",
+    srcs = [
+        "card_wrapper.tsx",
+    ],
+)
diff --git a/...rimental/reporting-ui/src/main/react/reporting-ui/component/card_wrapper/card_wrapper.tsx b/...rimental/reporting-ui/src/main/react/reporting-ui/component/card_wrapper/card_wrapper.tsx
@@ -0,0 +1,38 @@
+// Copyright 2023 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.
+
+import React from 'react';
+import Card from 'react-bootstrap/Card';
+
+type props = {
+  cardId: string,
+  title: string,
+  content: string,
+};
+
+const COMPONENT_STYLE = Object.freeze({
+  borderRadius: '12px',
+  boxShadow: '0px 2px 6px 2px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.30)',
+});
+
+export function CardWrapper({cardId, title, content}: props) {
+  return (
+    <Card id={cardId} style={COMPONENT_STYLE}>
+      <Card.Body>
+        <Card.Title>{title}</Card.Title>
+        <Card.Text>{content}</Card.Text>
+      </Card.Body>
+    </Card>
+  )
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/index.css b/experimental/reporting-ui/src/main/react/reporting-ui/index.css
@@ -12,6 +12,11 @@ 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. */
 
+@font-face {
+    font-family: open-sans-light;
+    src: url(./public/asset/font/open-sans-light.ttf);
+}
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/index.tsx b/experimental/reporting-ui/src/main/react/reporting-ui/index.tsx
@@ -14,12 +14,12 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import {routes} from './route';
 import reportWebVitals from './report_web_vitals';
 import AppConfig from './client/initialize';
 import { ReportingClientImpl } from './client/reporting/client_impl';
 import {createBrowserRouter, RouterProvider} from 'react-router-dom';
+import './index.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 const configProps = {

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/public/asset/font/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/public/asset/font/BUILD.bazel
@@ -10,7 +10,7 @@ js_library(
     name = "font",
     srcs = glob(
         include = [
-            "open-san-light.ttf",
+            "open-sans-light.ttf",
         ],
     ),
 )
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/public/index.html b/experimental/reporting-ui/src/main/react/reporting-ui/public/index.html
@@ -15,6 +15,7 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
+    <base href="/" />
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />

diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/util/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/util/BUILD.bazel
@@ -0,0 +1,14 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(
+    default_visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "formatting",
+    srcs = [
+        "formatting.ts",
+    ],
+)
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/util/formatting.ts b/experimental/reporting-ui/src/main/react/reporting-ui/util/formatting.ts
@@ -0,0 +1,44 @@
+// Copyright 2023 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.
+
+// In powers of 10
+const MAGNITUDES = Object.freeze({
+  3: 'K',
+  6: 'M',
+  9: 'B',
+  12: 'T',
+});
+
+export const formatNumberWithMagnitude = (
+  num: number,
+  decimals: number,
+  trailingZeros: boolean = false,
+) => {
+  let power = 0;
+  let newNumber = num;
+  while (newNumber >= 1000) {
+      newNumber = newNumber / 1000;
+      power += 3;
+  }
+
+  if (power === 0) {
+      return num.toString();
+  } else {
+      const value = (newNumber.toFixed(decimals));
+
+      return trailingZeros ?
+          value.toString() + MAGNITUDES[power]
+          : value.toString().replace(/\.0+$/, '') + MAGNITUDES[power]
+  }
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/BUILD.bazel
@@ -12,6 +12,7 @@ js_library(
         "report_view.tsx",
     ],
     deps = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui/view/report/component:terminal_report",
         "//experimental/reporting-ui/src/main/react/reporting-ui/view_model/report",
     ],
 )
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/BUILD.bazel b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/BUILD.bazel
@@ -0,0 +1,28 @@
+load("@aspect_rules_js//js:defs.bzl", "js_library")
+
+package(
+    default_visibility = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui/view/report:__subpackages__",
+    ],
+)
+
+js_library(
+    name = "terminal_report",
+    srcs = [
+        "header.css",
+        "header.tsx",
+        "overview.css",
+        "overview.tsx",
+        "overview_card.tsx",
+        "publisher_cell.tsx",
+        "summary_table.css",
+        "summary_table.tsx",
+        "summary_table_row.tsx",
+        "terminal_report.tsx",
+    ],
+    deps = [
+        "//experimental/reporting-ui/src/main/react/reporting-ui/component/card_wrapper",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/public/asset/icon",
+        "//experimental/reporting-ui/src/main/react/reporting-ui/util:formatting",
+    ],
+)
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/header.css b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/header.css
@@ -0,0 +1,30 @@
+ /* Copyright 2023 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. */
+
+#header-title {
+    color: #000000;
+    font-family: open-sans-light;
+    font-size: 22px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+}
+
+#get-report-header-menu {
+    margin: 0px 8px 0px 32px;
+}
+
+#header-collapse > svg {
+    margin-right: 8px;
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/header.tsx b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/header.tsx
@@ -0,0 +1,48 @@
+// Copyright 2023 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.
+
+import React from 'react';
+import Navbar from 'react-bootstrap/Navbar';
+import {
+  AddIcon,
+  DownloadIcon,
+  FilterIcon,
+  MenuIcon,
+  TrailingIcon,
+} from '../../../public/asset/icon';
+import './header.css';
+
+type HeaderProps = {
+  reportName: string;
+};
+
+export function Header({reportName}: HeaderProps) {
+  return (
+    <React.Fragment>
+      <Navbar id="get-report-header" className="bg-body-tertiary">
+        <div id="get-report-header-menu">
+          <MenuIcon />
+        </div>
+        <Navbar.Brand id="header-title">{reportName}</Navbar.Brand>
+        <Navbar.Toggle />
+        <Navbar.Collapse id="header-collapse" className="justify-content-end">
+          <TrailingIcon />
+          <FilterIcon />
+          <AddIcon />
+          <DownloadIcon />
+        </Navbar.Collapse>
+      </Navbar>
+    </React.Fragment>
+  );
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/overview.css b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/overview.css
@@ -0,0 +1,40 @@
+ /* Copyright 2023 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. */
+
+#report-overview {
+    margin: 32px 16px 0px 16px;
+
+    .col {
+        margin: 0px 16px 0px 16px;
+        padding: 0px;
+    }
+}
+
+#report-overview .card-title {
+    color: #1F1F1F;
+    font-family: open-sans-light;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+}
+
+#report-overview .card-text {
+    color: #1F1F1F;
+    font-family: open-sans-light;
+    font-size: 45px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 52px;
+}
diff --git a/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/overview.tsx b/experimental/reporting-ui/src/main/react/reporting-ui/view/report/component/overview.tsx
@@ -0,0 +1,43 @@
+// Copyright 2023 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.
+
+import React from 'react';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+import './overview.css';
+import { ReportOverviewCard } from './overview_card';
+import { Overview } from '../../../model/reporting';
+
+type ReportTotalsProps = {
+  reportOverview: Overview;
+};
+
+export function ReportOverviewStats({reportOverview}: ReportTotalsProps) {
+  return (
+    <Row id="report-overview">
+      <Col>
+        <ReportOverviewCard id='report-overview-impressions-card' title='Impressions' value={reportOverview.totalImpressions}/>
+      </Col>
+      <Col>
+        <ReportOverviewCard id='report-overview-total-reach-card' title='Reach' value={reportOverview.totalReach}/>
+      </Col>
+      <Col>
+        <ReportOverviewCard id='report-overview-target-reach-card' title='On Target Reach' value={reportOverview.totalOnTargetReach}/>
+      </Col>
+      <Col>
+        <ReportOverviewCard id='report-overview-frequency-card' title='Average Frequency' value={reportOverview.totalAverageFrequency}/>
+      </Col>
+    </Row>
+  );
+}