Merge pull request #1992 from brave-intl/admin-charts

Admin charts

app/controllers/admin/promo_registrations_controller.rb

@@ -0,0 +1,8 @@
+class Admin::PromoRegistrationsController < AdminController
+    def for_referral_code
+      publisher = Publisher.find(params[:publisher_id])
+      promo_registration = publisher.promo_registrations.find_by(referral_code: params[:referral_code])
+      render :unauthorized and return if promo_registration.nil?
+      render json: promo_registration.stats_by_date.to_json
+    end
+end

app/controllers/admin/publishers/referrals_controller.rb

@@ -0,0 +1,5 @@
+class Admin::Publishers::ReferralsController < Admin::PublishersController
+  def show
+    @navigation_view = Views::Admin::NavigationView.new(@publisher).as_json.merge({ navbarSelection: "Referrals" }).to_json
+  end
+end

app/controllers/publishers/promo_registrations_controller.rb

@@ -1,6 +1,8 @@
 class Publishers::PromoRegistrationsController < PublishersController
   def for_referral_code
-    promo_registration = current_publisher.promo_registrations.find_by(referral_code: params[:referral_code])
+    promo_registration = current_publisher.admin? ?
+      PromoRegistration.find_by(referral_code: params[:referral_code]) :
+      current_publisher.promo_registrations.find_by(referral_code: params[:referral_code])
     render :unauthorized and return if promo_registration.nil?
     render json: promo_registration.stats_by_date.to_json
   end

app/javascript/packs/chart/Chart.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import moment from "moment";
 import Chart from "chart.js";
 
-class ReactChart extends React.Component {
+export default class ReactChart extends React.Component {
   constructor(props) {
     super(props);
     this.chartRef = React.createRef();
@@ -40,10 +40,7 @@ class ReactChart extends React.Component {
       });
     } else {
       this.chart.data = this.getData(this.props.data);
-      this.chart.options = this.getOptions(
-        this.props.title,
-        this.getSuggestedMax(this.props.data)
-      );
+      this.chart.options = this.getOptions(this.props.title, this.getSuggestedMax(this.props.data));
       this.chart.update();
     }
   }
@@ -128,10 +125,8 @@ class ReactChart extends React.Component {
     var currentMax = 0;
     Object.keys(data).forEach(function(key) {
       var value = data[key];
-      currentMax =
-        value.retrievals > currentMax ? value.retrievals : currentMax;
-      currentMax =
-        value.first_runs > currentMax ? value.first_runs : currentMax;
+      currentMax = value.retrievals > currentMax ? value.retrievals : currentMax;
+      currentMax = value.first_runs > currentMax ? value.first_runs : currentMax;
       currentMax = value.finalized > currentMax ? value.finalized : currentMax;
     });
     return Math.ceil((currentMax / 95) * 100);
@@ -154,12 +149,6 @@ class ReactChart extends React.Component {
   }
 
   render() {
-    return (
-      <div>
-        {this.props.data && <canvas id="chart-canvas" ref={this.chartRef} />}
-      </div>
-    );
+    return <div>{this.props.data && <canvas id="chart-canvas" ref={this.chartRef} />}</div>;
   }
 }
-
-export default ReactChart;

app/javascript/packs/referral_charts.jsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import "babel-polyfill";
 import styled from "brave-ui/theme";
 import Select from "brave-ui/components/formControls/select";
 import ControlWrapper from "brave-ui/components/formControls/controlWrapper";
 import { PrimaryButton } from "../publishers/ReferralChartsStyle";
 // import "../publishers/dashboard_chart";
 import routes from "../views/routes";
-import Chart from "./chart/Chart";
+import ReactChart from "./chart/Chart";
 import { ThemeProvider } from "brave-ui/theme";
 import Theme from "brave-ui/theme/brave-default";
 
@@ -27,10 +26,11 @@ export default class ReferralCharts extends React.Component {
 
   async viewReferralCodeStats() {
     const node = this.selectMenuRef.current;
-    var url = routes.publishers.promo_registrations.show.path.replace(
-      "{id}",
-      this.props.publisherId
-    );
+    var url =
+      this.props.scope === "admin"
+        ? routes.admin.promo_registrations.show.path.replace("{publisher_id}", this.props.publisherId)
+        : routes.publishers.promo_registrations.show.path.replace("{id}", this.props.publisherId);
+
     url = url.replace("{referral_code}", node.state.value);
     const result = await fetch(url, {
       headers: {
@@ -71,21 +71,22 @@ export default class ReferralCharts extends React.Component {
             View stats
           </PrimaryButton>
         </div>
-        <Chart data={this.state.data} title={this.state.title} />
+        <ReactChart data={this.state.data} title={this.state.title} />
       </React.Fragment>
     );
   }
 }
 
-export function renderReferralCharts() {
+export function renderReferralCharts(scope) {
   const { value } = document.getElementById("referrals-hidden-tags");
   const publisherId = document.getElementById("publisher_id").value;
   if (value === undefined) {
     return;
   }
   let referralCodes = JSON.parse(value);
   let props = {
-    referralCodes: referralCodes
+    referralCodes: referralCodes,
+    scope: scope
   };
   ReactDOM.render(
     <ReferralCharts {...props} publisherId={publisherId} />,

app/javascript/packs/views/admin/referrals/Referrals.jsx

@@ -1,14 +1,7 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import Referrals from "../../../../views/admin/referrals/Referrals";
+import { renderReferralCharts } from "../../../../packs/referral_charts";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const node = document.getElementById("referrals_data");
-  const data = JSON.parse(node.getAttribute("data"));
-  ReactDOM.render(
-    <Referrals data={data} />,
-    document
-      .getElementById("main-content")
-      .appendChild(document.createElement("div"))
-  );
+  renderReferralCharts("admin");
 });

app/javascript/packs/views/referrals/Referrals.jsx

@@ -3,10 +3,5 @@ import * as ReactDOM from "react-dom";
 import Referrals from "../../../views/referrals/Referrals";
 
 document.addEventListener("DOMContentLoaded", () => {
-  ReactDOM.render(
-    <Referrals />,
-    document.body.appendChild(
-      document.getElementsByClassName("main-content")[0]
-    )
-  );
+  ReactDOM.render(<Referrals />, document.body.appendChild(document.getElementsByClassName("main-content")[0]));
 });