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 + } + } +}