diff --git a/client/coral-admin/src/components/FlagWidget.js b/client/coral-admin/src/components/FlagWidget.js
index 187306c8c..96e21ac0b 100644
--- a/client/coral-admin/src/components/FlagWidget.js
+++ b/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';
diff --git a/client/coral-admin/src/components/LikeWidget.js b/client/coral-admin/src/components/LikeWidget.js
new file mode 100644
index 000000000..33df3e2b4
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+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;
diff --git a/client/coral-admin/src/components/Widget.css b/client/coral-admin/src/components/Widget.css
new file mode 100644
index 000000000..f40da403d
--- /dev/null
+++ b/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;
+}
diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js
index 6baa16af1..253c0980b 100644
--- a/client/coral-admin/src/containers/Dashboard/Dashboard.js
+++ b/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 {
Top ten comments with the most likes
+
+
Top Ten Articles with the most likes
+
+
);
}
}
export default compose(
- mostFlags
+ mostFlags,
+ mostLikes
)(Dashboard);
diff --git a/client/coral-admin/src/graphql/queries/index.js b/client/coral-admin/src/graphql/queries/index.js
index 3325249e1..f98b40091 100644
--- a/client/coral-admin/src/graphql/queries/index.js
+++ b/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 {
diff --git a/client/coral-admin/src/graphql/queries/metrics.graphql b/client/coral-admin/src/graphql/queries/metrics.graphql
new file mode 100644
index 000000000..2f9afe621
--- /dev/null
+++ b/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
+ }
+ }
+}