storing my place in case we want to come back to this

client/coral-admin/src/components/FlagWidget.js

@@ -1,6 +1,6 @@
 import React, {PropTypes} from 'react';
 import {Link} from 'react-router';
-import styles from './FlagWidget.css';
+import styles from './Widget.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 

client/coral-admin/src/components/LikeWidget.js

@@ -0,0 +1,34 @@
+import React, {PropTypes} from 'react';
+import {Link} from 'react-router';
+import styles from './Widget.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-admin/src/translations';
+
+const lang = new I18n(translations);
+
+const LikeWidget = ({assets}) => {
+  return (
+    <table className={styles.widgetTable}>
+    </table>
+  );
+};
+
+LikeWidget.propTypes = {
+  assets: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      title: PropTypes.string,
+      url: PropTypes.string,
+      commentCount: PropTypes.number,
+      action_summaries: PropTypes.arrayOf(
+        PropTypes.shape({
+          __typename: PropTypes.string.isRequired,
+          actionCount: PropTypes.number.isRequired,
+          actionableItemCount: PropTypes.number.isRequired
+        })
+      )
+    })
+  ).isRequired
+};
+
+export default LikeWidget;

client/coral-admin/src/components/Widget.css

@@ -0,0 +1,34 @@
+.heading {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.widgetTable {
+  width: 100%;
+  border-collapse: collapse;
+  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
+}
+
+.widgetTable thead th {
+  border-bottom: 1px solid #f47e6b;
+  padding: 10px;
+  text-align: left;
+}
+
+.widgetTable tbody tr {
+  border-bottom: 1px solid lightgrey;
+}
+
+.widgetTable tbody tr:last-child {
+  border-bottom: none;
+}
+
+.widgetTable tbody td {
+  padding: 10px;
+}
+
+.lede {
+  font-size: 0.9em;
+  color: grey;
+}

client/coral-admin/src/containers/Dashboard/Dashboard.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import {compose} from 'react-apollo';
-import {mostFlags} from 'coral-admin/src/graphql/queries';
+import {mostFlags, mostLikes} from 'coral-admin/src/graphql/queries';
 import {Spinner} from 'coral-ui';
 import styles from './Dashboard.css';
 import FlagWidget from '../../components/FlagWidget';
+import LikeWidget from '../../components/LikeWidget';
 
 class Dashboard extends React.Component {
   render () {
 
     const {data} = this.props;
+    console.log('data', data);
     const {metrics: assets} = data;
 
     if (data.loading) {
@@ -28,11 +30,16 @@ class Dashboard extends React.Component {
         <div className={styles.widget}>
           <h2 className={styles.heading}>Top ten comments with the most likes</h2>
         </div>
+        <div className={styles.widget}>
+          <h2 className={styles.heading}>Top Ten Articles with the most likes</h2>
+          <LikeWidget assets={assets} />
+        </div>
       </div>
     );
   }
 }
 
 export default compose(
-  mostFlags
+  mostFlags,
+  mostLikes
 )(Dashboard);

client/coral-admin/src/graphql/queries/index.js

@@ -1,14 +1,14 @@
 import {graphql} from 'react-apollo';
 
-import MOST_FLAGS from './mostFlags.graphql';
+import METRICS from './metrics.graphql';
 import MOD_QUEUE_QUERY from './modQueueQuery.graphql';
 
-export const mostFlags = graphql(MOST_FLAGS, {
+export const mostFlags = graphql(METRICS, {
   options: () => {
 
     // currently hard-coded per Greg's advice
     const fiveMinutesAgo = new Date();
-    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 305);
+    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
     return {
       variables: {
         sort: 'FLAG',
@@ -19,6 +19,20 @@ export const mostFlags = graphql(MOST_FLAGS, {
   }
 });
 
+export const mostLikes = graphql(METRICS, {
+  options: () => {
+    const fiveMinutesAgo = new Date();
+    fiveMinutesAgo.setMinutes(fiveMinutesAgo.getMinutes() - 5);
+    return {
+      variables: {
+        sort: 'LIKE',
+        from: fiveMinutesAgo.toISOString(),
+        to: new Date().toISOString()
+      }
+    };
+  }
+});
+
 export const modQueueQuery = graphql(MOD_QUEUE_QUERY, {
   options: ({params: {id = null}}) => {
     return {

client/coral-admin/src/graphql/queries/metrics.graphql

@@ -0,0 +1,24 @@
+fragment metrics on Asset {
+  id
+  title
+  action_summaries {
+    type: __typename
+    actionCount
+    actionableItemCount
+  }
+}
+
+query Metrics ($from: Date!, $to: Date!, $sort: ACTION_TYPE!) {
+  metrics(from: $from, to: $to, sort: $sort) {
+    id
+    title
+    url
+    commentCount
+    author
+    created_at
+    action_summaries {
+      actionCount
+      actionableItemCount
+    }
+  }
+}