@plusscommunities/pluss-newsletter-web-sharing 1.2.8

package/src/screens/Newsletter/NewsHubAnalytics.js

@@ -0,0 +1,320 @@
+import React, { Component } from 'react';
+import { Table } from 'react-bootstrap';
+import FontAwesome from 'react-fontawesome';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import moment from 'moment';
+import _ from 'lodash';
+import { usersLoaded } from '../../actions';
+import { checkLoggedIn, validateAccess } from '../../session';
+import { analyticsActions } from '../../webapi';
+import { getPluralS } from '../../helper';
+import { compileStats, getInsight, getAnalyticsFilterOptions } from '../../js';
+import { UTC_OFFSET } from '../../config';
+import { Reactions } from '../../components/Reactions';
+import { AnalyticsFilter } from '../../components';
+import { Text } from '../../components/text';
+import { values } from '../../feature.config';
+
+class NewsHubAnalytics extends Component {
+  constructor(props) {
+    super(props);
+    const filterOptions = getAnalyticsFilterOptions();
+    const selectedFilter = filterOptions[1];
+    this.state = {
+      loading: true,
+      stats: {},
+      totalStats: {},
+      previousStats: null,
+      selectedFilter: filterOptions[1],
+      currentDayCount: selectedFilter.dayCount,
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+  }
+
+  componentDidMount() {
+    if (!validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth, true)) {
+      this.props.history.push('/mastermenu');
+    } else {
+      this.getStats();
+    }
+  }
+
+  getTotalStat(key) {
+    if (!this.state.totalStats[key]) {
+      return 0;
+    }
+    if (Array.isArray(this.state.totalStats[key])) {
+      return this.state.totalStats[key].length;
+    }
+    return this.state.totalStats[key];
+  }
+
+  getStat(id, key) {
+    if (!this.state.stats[id]) {
+      return 0;
+    }
+    if (!this.state.stats[id][key]) {
+      return 0;
+    }
+    if (Array.isArray(this.state.stats[id][key])) {
+      return this.state.stats[id][key].length;
+    }
+    return this.state.stats[id][key];
+  }
+
+  getStats(min, max) {
+    this.setState({
+      loading: true,
+    });
+    const lastDay = max ? moment(max).utc() : moment.utc();
+    const dayCount = min ? moment(max).diff(moment(min), 'days') : this.state.selectedFilter.dayCount;
+    console.log(`getStats: lastDay:${moment(lastDay).format('DD/MM/YYYY')}, dayCount:${dayCount}`);
+
+    const startOfLastDay = lastDay.utcOffset(UTC_OFFSET).startOf('d');
+    const minTime = moment(startOfLastDay).add(-dayCount, 'd').valueOf() - 1;
+    const maxTime = moment(startOfLastDay).valueOf() - 1;
+
+    analyticsActions.getAggregateEntityStats(this.props.auth.site, values.analyticsKey, minTime, maxTime).then((res) => {
+      console.log(res.data);
+      console.log(compileStats(res.data));
+      this.setState({
+        stats: res.data,
+        totalStats: compileStats(res.data),
+        loading: false,
+        currentDayCount: dayCount,
+      });
+      const prevMinTime =
+        moment(startOfLastDay)
+          .add(2 * -dayCount, 'd')
+          .valueOf() - 1;
+      analyticsActions.getAggregateEntityStats(this.props.auth.site, values.analyticsKey, prevMinTime, minTime).then((oldRes) => {
+        console.log(oldRes.data);
+        console.log(compileStats(oldRes.data));
+        this.setState({
+          previousStats: oldRes.data,
+          previousTotalStats: compileStats(oldRes.data),
+        });
+      });
+    });
+  }
+
+  getReactions(key) {
+    const result = {};
+    const statsToUse = this.state.stats[key];
+    if (!statsToUse) {
+      return result;
+    }
+    Object.keys(statsToUse).forEach((key) => {
+      if (key.indexOf('Reaction_') === 0) {
+        result[key.substring(9)] = statsToUse[key];
+      }
+    });
+    return result;
+  }
+
+  filterChanged = (selectedFilter) => {
+    this.setState({ selectedFilter }, () => {
+      this.getStats();
+    });
+  };
+
+  filterDateRangeChanged = (startDate, endDate) => {
+    this.getStats(startDate, endDate);
+  };
+
+  renderStats() {
+    if (this.state.loading) {
+      return null;
+    }
+    return (
+      <div className="newsanalytics--overview paddingTop-40">
+        <Text type="formTitleSmall" className="marginBottom-16">
+          Overview
+        </Text>
+        <div className="polloverview polloverview--newsAnalytics">
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="eye" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.getTotalStat('PageView')}</p>
+              <p className="polloverview_text">Page View{getPluralS(this.getTotalStat('PageView'))}</p>
+            </div>
+          </div>
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="user" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.getTotalStat('UniquePageView')}</p>
+              <p className="polloverview_text">Unique Visitor{getPluralS(this.getTotalStat('UniquePageView'))}</p>
+            </div>
+          </div>
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="undo" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.getTotalStat('PageView') - this.getTotalStat('UniquePageView')}</p>
+              <p className="polloverview_text">
+                Returning Visitor{getPluralS(this.getTotalStat('PageView') - this.getTotalStat('UniquePageView'))}
+              </p>
+            </div>
+          </div>
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="smile-o" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.getTotalStat('Reaction')}</p>
+              <p className="polloverview_text">Reaction{getPluralS(this.getTotalStat('Reaction'))}</p>
+            </div>
+          </div>
+          {/*  <div className='polloverview_section'>
+                        <FontAwesome className='polloverview_icon' name='exclamation-triangle' />
+                        <div className='polloverview_right'>
+                            <p className='polloverview_count'>3</p>
+                            <p className='polloverview_text'>Pending Posts</p>
+                        </div>
+                    </div> */}
+        </div>
+      </div>
+    );
+  }
+
+  renderInsight(update, title, primaryStat) {
+    if (!update || !update.Entity || !update.Stats) {
+      return null;
+    }
+    const currentStat = update.Stats && update.Stats[primaryStat] ? update.Stats[primaryStat] : 0;
+    const prevStat = update.PreviousStats && update.PreviousStats[primaryStat] ? update.PreviousStats[primaryStat] : 0;
+    const change = currentStat - prevStat;
+    const prevText = this.state.selectedFilter.prevText.replace('*', this.state.currentDayCount);
+
+    return (
+      <div className="insights">
+        <div className="insightstitle">
+          <Text type="formTitleSmall">{title}</Text>
+          <div className="hrline"></div>
+        </div>
+        <div>
+          <p className="fontMedium fontSize-26 text-dusk lineClamp-2">{update.Entity.Title}</p>
+          {change === 0 ? (
+            <p className="fontHeavy fontSize-13 text-brandingAction">No change on {prevText}</p>
+          ) : (
+            <p className="fontHeavy fontSize-13 text-brandingAction">
+              <FontAwesome className="insightsstat" name={`caret-${change > 0 ? 'up' : 'down'}`} />
+              <b>
+                {change} on {prevText}
+              </b>
+            </p>
+          )}
+
+          <div className="insightsnumber">
+            <div className="insightsnumleft">
+              <p className="polloverview_text marginBottom-8 text-mid">Page View{getPluralS(update.Stats.PageView)}</p>
+              <p className="polloverview_text marginBottom-8 text-mid">Reactions {this.state.selectedFilter.text.toLowerCase()}:</p>
+            </div>
+            <div className="insightsnumright">
+              <p className="polloverview_num marginBottom-8">{update.Stats.PageView || 0}</p>
+            </div>
+          </div>
+          <div className="insight_reactions">
+            <Reactions reactions={this.getReactions(update.Entity.RowId)} compact />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  renderInsights() {
+    if (this.state.loading) {
+      return null;
+    }
+    const mostViewed = getInsight(this.state.stats, this.state.previousStats, this.props.news, 'RowId', 'PageView');
+    const mostReacted = getInsight(this.state.stats, this.state.previousStats, this.props.news, 'RowId', 'Reaction');
+    if (!mostViewed && !mostReacted) {
+      return null;
+    }
+    return (
+      <div className="serviceanalytics--insights paddingTop-40">
+        <Text type="formTitleSmall" className="marginBottom-16">
+          Insights
+        </Text>
+
+        <div className="insightscontainer">
+          {this.renderInsight(mostViewed, 'Most Viewed', 'PageView')}
+          {this.renderInsight(mostReacted, 'Most Reactions', 'Reaction')}
+        </div>
+      </div>
+    );
+  }
+
+  renderNewsList() {
+    if (this.state.loading) {
+      return null;
+    }
+    return (
+      <div className="paddingTop-40">
+        <Table className="plussTable" striped bordered condensed hover style={{ minWidth: '100%' }}>
+          <thead>
+            <tr>
+              <th style={{ width: 100 }}>Date published</th>
+              <th>Title</th>
+              <th style={{ width: 100 }}>Views</th>
+              <th style={{ width: 300, textAlign: 'center' }}>Reactions</th>
+            </tr>
+          </thead>
+          <tbody>
+            {_.sortBy(_.sortBy(this.props.news, 'Title'), (update) => {
+              return this.getStat(update.RowId, 'PageView');
+            })
+              .reverse()
+              .map((update) => {
+                if (!this.state.stats[update.RowId]) {
+                  return null;
+                }
+                return (
+                  <tr key={update.RowId}>
+                    <td>{moment.utc(update.Timestamp).local().format('DD-MM-YYYY')}</td>
+                    <td>{update.Title}</td>
+                    <td>{this.getStat(update.RowId, 'PageView')}</td>
+                    <td>
+                      <Reactions reactions={this.getReactions(update.RowId)} compact />
+                    </td>
+                  </tr>
+                );
+              })}
+          </tbody>
+        </Table>
+      </div>
+    );
+  }
+
+  renderFilter() {
+    return (
+      <AnalyticsFilter
+        defaultFilter={this.state.selectedFilter}
+        filterChanged={this.filterChanged}
+        filterDateRangeChanged={this.filterDateRangeChanged}
+      />
+    );
+  }
+
+  render() {
+    return (
+      <div style={{ minWidth: '100%' }}>
+        <p className="fontMedium fontSize-36 text-dark">Analytics</p>
+        {this.renderFilter()}
+        {this.renderStats()}
+        {this.renderInsights()}
+        {this.renderNewsList()}
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    auth,
+  };
+};
+
+export default connect(mapStateToProps, { usersLoaded })(withRouter(NewsHubAnalytics));

package/src/screens/Newsletter/NewsletterAnalytics.js

@@ -0,0 +1,140 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { Button, OverlayPage, OverlayPageContents, OverlayPageSection, OverlayPageBottomButtons } from '../../components';
+import { analyticsActions, newsletterActions } from '../../webapi';
+import { checkLoggedIn, validateAccess } from '../../session';
+import { safeReadParams, getPluralS } from '../../helper';
+import FontAwesome from 'react-fontawesome';
+import { Reactions } from '../../components/Reactions';
+import { values } from '../../feature.config';
+
+class NewsletterAnalytics extends Component {
+  initialState = {
+    infoId: safeReadParams(this.props, 'infoId'),
+    update: {},
+    PageView: 0,
+    ReturningPageView: 0,
+    UniquePageView: 0,
+  };
+
+  state = { ...this.initialState };
+
+  UNSAFE_componentWillMount() {
+    checkLoggedIn(this, this.props.auth);
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      if (!validateAccess(this.props.auth.site, values.permissionNewsletter, this.props.auth, true)) {
+        window.history.back();
+      } else {
+        this.getUpdate();
+        this.getStats();
+      }
+    }, 500);
+  }
+
+  getUpdate() {
+    newsletterActions
+      .getNewsletterEntry(this.state.infoId)
+      .then((res) => {
+        this.setState({
+          update: res.data,
+        });
+      })
+      .catch((error) => {});
+  }
+
+  getStats() {
+    analyticsActions.getEntityStats(this.state.infoId, values.analyticsKey).then((res) => {
+      console.log('getStats', res.data);
+      this.setState({ ...res.data, statsLoaded: true });
+    });
+  }
+
+  renderOverview() {
+    if (!this.state.statsLoaded) {
+      return null;
+    }
+    return (
+      <div className="padding-60 paddingVertical-40 bottomDivideBorder">
+        <p className="newTopBarTitle text-sectionTitle">PAGE VIEWS</p>
+        <div className="polloverview">
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="eye" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.state.PageView}</p>
+              <p className="polloverview_text">Page View{getPluralS(this.state.PageView)}</p>
+            </div>
+          </div>
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="user" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.state.UniquePageView}</p>
+              <p className="polloverview_text">Unique Visitor{getPluralS(this.state.UniquePageView)}</p>
+            </div>
+          </div>
+          <div className="polloverview_section">
+            <FontAwesome className="polloverview_icon" name="repeat" />
+            <div className="polloverview_right">
+              <p className="polloverview_count">{this.state.ReturningPageView}</p>
+              <p className="polloverview_text">Returning Visitor{getPluralS(this.state.ReturningPageView)}</p>
+            </div>
+          </div>
+        </div>
+        <div className="marginTop-32">
+          <Reactions entity={this.state.update} />
+        </div>
+      </div>
+    );
+  }
+
+  renderBack() {
+    return (
+      <div>
+        <Button
+          inline
+          buttonType="primary"
+          onClick={() => {
+            window.history.back();
+          }}
+          isActive
+        >
+          {values.textBackToNews}
+        </Button>
+      </div>
+    );
+  }
+
+  renderMain() {
+    return (
+      <div>
+        <div className="padding-60 paddingBottom-40 bottomDivideBorder">
+          <div className="newTopBar clearfix">
+            <p className="newTopBarTitle text-sectionTitle">{values.textNewsAnalytics}</p>
+          </div>
+          <p className="pollTitle">{this.state.update.Title}</p>
+        </div>
+        {this.renderOverview()}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <OverlayPage>
+        <OverlayPageContents id="NewsContainer" noBottomButtons={this.state.success}>
+          <OverlayPageSection className="pageSectionWrapper--fixedPopupSize">{this.renderMain()}</OverlayPageSection>
+        </OverlayPageContents>
+        <OverlayPageBottomButtons>{this.renderBack()}</OverlayPageBottomButtons>
+      </OverlayPage>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return { auth };
+};
+
+export default connect(mapStateToProps, {})(NewsletterAnalytics);