diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js index 33baa4d7b..37616a207 100644 --- a/client/coral-admin/src/AppRouter.js +++ b/client/coral-admin/src/AppRouter.js @@ -22,6 +22,7 @@ const routes = ( + ); diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.css b/client/coral-admin/src/containers/Dashboard/Dashboard.css new file mode 100644 index 000000000..be2cd9f7a --- /dev/null +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.css @@ -0,0 +1,23 @@ +.Dashboard { + display: flex; + padding: 5px; +} + +.widget { + margin-top: 10px; + flex: 1; + box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2); + margin-right: 10px; + padding: 15px; + +} + +.widget:last-child { + margin-right: 0; +} + +.heading { + margin: 0; + font-size: 1.5rem; + font-weight: bold; +} diff --git a/client/coral-admin/src/containers/Dashboard/Dashboard.js b/client/coral-admin/src/containers/Dashboard/Dashboard.js index c287d5f2c..e01eec319 100644 --- a/client/coral-admin/src/containers/Dashboard/Dashboard.js +++ b/client/coral-admin/src/containers/Dashboard/Dashboard.js @@ -1,11 +1,24 @@ import React from 'react'; import {compose} from 'react-apollo'; import {mostFlags} from 'coral-admin/src/graphql/queries'; +import styles from './Dashboard.css'; class Dashboard extends React.Component { render () { return ( -
Dashboard
+
+
+

Top Ten Articles with the most flagged comments

+ + + + +
ArticleFlags
+
+
+

Top ten comments with the most likes

+
+
); } } diff --git a/client/coral-admin/src/graphql/queries/mostFlags.graphql b/client/coral-admin/src/graphql/queries/mostFlags.graphql index b84e21d08..229d64541 100644 --- a/client/coral-admin/src/graphql/queries/mostFlags.graphql +++ b/client/coral-admin/src/graphql/queries/mostFlags.graphql @@ -1,3 +1,5 @@ query mostFlags { - metric + metric { + id + } }