Sessão 6

public/styles/login.css

@@ -0,0 +1,4 @@
+
+body {
+    background-color: #666666 !important;
+}

public/styles/main.css

@@ -5,7 +5,7 @@ HERE YOUR CUSTOM CSS
 **/
 
 .navbar, .navbar-inverse {
-    background-color: #5b5ce1 !important;
+    background-color: #666666 !important;
 }
 
 .dev .navbar, .dev .navbar-inverse {

server/services/publicacoes/graficos/comunidades/total.get.js

@@ -0,0 +1,11 @@
+
+const dbPublicacoes = _db.query(`
+SELECT
+    comunidade.nome AS comunidade,
+    COUNT(publicacao.id) AS total
+FROM publicacao
+    INNER JOIN comunidade ON publicacao.comunidade_id = comunidade.id
+GROUP BY nome
+`)
+
+_out.json(dbPublicacoes)

server/templates/dashboard.html

@@ -22,8 +22,3 @@
 </div>
 
 <div id="app-dashboard"></div>
-
-
-<div id="app-dashboard2"></div>
-
-

server/templates/dev/dashboard.html

@@ -1,4 +1,4 @@
-
+<h1>Ola DEV!</h1>
 <div class="row">
     <div class="col-lg-12">
         <div class="with-form">

ui/src/components/GraficoPublicacoesDiariasPorComunidade/index.jsx

@@ -2,10 +2,13 @@ import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 
 import Spin from 'antd/lib/spin';
+import Typography from 'antd/lib/typography';
 import notification from 'antd/lib/notification';
 
 import { Chart, LineAdvance } from 'bizcharts';
 
+const { Title } = Typography;
+
 const GraficoPublicacoesDiariasPorComunidade = ({ }) => {
     const [ data, setData ] = useState([]);
     const [ loading, setLoading ] = useState(true);
@@ -44,6 +47,7 @@ const GraficoPublicacoesDiariasPorComunidade = ({ }) => {
     }, []);
 
     return <>
+        <Title level={5}>Publicações Diárias por Comunidade</Title>
         { loading && <Spin size="large"/> }
         <Chart padding={[10, 20, 60, 40]} autoFit height={300} data={data} >
             <LineAdvance

ui/src/components/GraficoPublicacoesTotaisPorComunidade/index.jsx

@@ -0,0 +1,62 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+
+import Spin from 'antd/lib/spin';
+import Typography from 'antd/lib/typography';
+import notification from 'antd/lib/notification';
+
+import { Chart, Interval } from 'bizcharts';
+
+const { Title } = Typography;
+
+const GraficoPublicacoesTotaisPorComunidade = ({ }) => {
+    const [ data, setData ] = useState([]);
+    const [ loading, setLoading ] = useState(true);
+
+    useEffect(() => {
+        const fail = ()=> {
+            setLoading(false);
+            notification["error"]({
+                message: 'Gráfico das Publicações Totais',
+                description: 'Ocorreu um erro ao carregar o gráfico.',
+                style: {
+                    marginTop: 100,
+                }
+            });
+        };
+        netuno.service({
+            url: '/services/publicacoes/graficos/comunidades/total',
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            success: (response)=> {
+                console.log(response);
+                if (response.json) {
+                    setLoading(false);
+                    setData(response.json);
+                } else {
+                    fail();
+                }
+            },
+            fail: ()=> {
+                fail();
+            }
+        });
+    }, []);
+
+    return <>
+    asfasfd
+        <Title level={5}>Publicações Totais por Comunidade</Title>
+        { loading && <Spin size="large"/> }
+        <Chart padding={[10, 20, 60, 40]} height={300} autoFit data={data} >
+            <Interval position="comunidade*total"  />
+        </Chart>
+    </>;
+};
+
+GraficoPublicacoesTotaisPorComunidade.propTypes = {
+};
+
+export default GraficoPublicacoesTotaisPorComunidade;

ui/src/components/TabelaPessoas/index.jsx

@@ -71,7 +71,7 @@ const TabelaPessoas = () => {
         {
             title: 'Ações',
             render: (item, data, index) => {
-                return <Button onClick={ ()=> setPessoaPublicacoes(data) }>Publicaçõe</Button>
+                return <Button onClick={ ()=> { setPessoaPublicacoes(data); } }>Publicaçõe</Button>
             }
         }
     ];

ui/src/containers/DashboardContainer/index.jsx

@@ -11,6 +11,7 @@ import "./index.less";
 import TabelaPessoas from "../../components/TabelaPessoas/index.jsx";
 
 import GraficoPublicacoesDiariasPorComunidade from "../../components/GraficoPublicacoesDiariasPorComunidade/index.jsx";
+import GraficoPublicacoesTotaisPorComunidade from "../../components/GraficoPublicacoesTotaisPorComunidade/index.jsx";
 
 const { TabPane } = Tabs;
 
@@ -62,6 +63,7 @@ export default class DashboardContainer extends Component {
                     </TabPane>
                     <TabPane tab="Gráficos" key="2">
                         <GraficoPublicacoesDiariasPorComunidade />
+                        <GraficoPublicacoesTotaisPorComunidade />
                     </TabPane>
                 </Tabs>
             </div>

ui/webpack.config.js

@@ -56,9 +56,10 @@ module.exports = {
                         loader: 'less-loader', // compiles Less to CSS
                         options: {
                             modifyVars: {
-                                'primary-color': '#5b5ce1',
-                                'link-color': '#5b5ce1',
-                                'border-radius-base': '5px'
+                                'primary-color': '#666',
+                                'link-color': '#666',
+                                'border-radius-base': '15px',
+                                'font-size-base': '20px'
                             },
                             javascriptEnabled: true
                         }