Gráfico Adicionado

server/services/stock/grafico.js

@@ -0,0 +1,7 @@
+const dbStock = _db.query(`
+select produto.nome as "nome", produto.quantidade  as "quantidade" from produto
+`)
+
+//java.lang.Thread.sleep(4000)
+
+_out.json(dbStock)

ui/src/components/GraficoStock/index.jsx

@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import Spin from 'antd/lib/spin';
+import Typography from 'antd/lib/typography';
+import { Chart, Interval } from 'bizcharts';
+import Service from "../../utils/Service";
+
+const { Title } = Typography;
+
+const GraficoStock = () => {
+    const [ loading, setLoading ] = useState(false);
+    const [ data, setData ] = useState([]);
+
+    useEffect(() => {
+        Service.call({
+            url: `stock/grafico`,
+            method: "post",
+            setData,
+            setLoading,
+            errorTitle: 'Gráfico do Stock',
+            errorMessage: 'Houve uma falha ao carregar o gráfico do stock...'
+        })
+    }, []);
+
+    return <>
+        { Service.spin(loading) }
+        <Chart height={300} autoFit data={data} >
+            <Interval position="nome*quantidade"  />
+        </Chart>
+    </>;
+};
+
+GraficoStock.propTypes = {
+};
+
+export default GraficoStock;

ui/src/components/TabelaLoja/JanelaStock/index.jsx

@@ -17,10 +17,13 @@ const JanelaStock = ({ loja, onClose }) => {
 
     useEffect(() => {
         Service.call({
-            url: `lojas/produtos`,
-            method: "post",
+            url: `lojas/produtos/`,
+            method: "POST",
             setData,
             setLoading,
+            body: JSON.stringify({
+                id: loja.id
+            }),
             errorTitle: 'Tabela de Stock',
             errorMessage: 'Houve uma falha ao carregar a tabela de Stock...'
         });

ui/src/components/TabelaLoja/index.jsx

@@ -42,15 +42,12 @@ const TabelaLoja = () => {
        
 
 
-        return <>
-        
+        return <>       
         { !!produtosLoja && <JanelaStock
             loja={produtosLoja}
             onClose={ () => setProdutosLoja(null) }
         /> }
-        
-        
-        <Table dataSource={data} {... { columns, loading}} />
+        <Table dataSource={data} { ...{ columns, loading} } />
 
         </>;
 };

ui/src/containers/DashboardContainer/index.jsx

@@ -8,6 +8,7 @@ import TabelaProduto from "../../components/TabelaProdutos/index.jsx";
 
 
 import "./index.less";
+import GraficoStock from "../../components/GraficoStock/index.jsx";
 
 export default class DashboardContainer extends Component {
     constructor(props) {
@@ -86,9 +87,10 @@ export default class DashboardContainer extends Component {
         const { counter } = this.state;    
 
         const styleh1 = {
-                 color: "#5b5ce1",
+                color: "#5b5ce1",
                 font: "candara",
                 padding: "8px",
+                textAlign: "center",
           }
         return (
             <div className="my-dashboard">
@@ -98,8 +100,10 @@ export default class DashboardContainer extends Component {
                     <h1 style={styleh1}>Produtos</h1>
                     <TabelaProduto/>
                     <h1 style={styleh1}>Categorias</h1>
-                    <TabelaCategoria/>
-                    {/* <MyButton mainRef={ this.button } text={ `ReactJS ⚡ Ant.Design 👉 Click me! ${ counter }` } click={ this.click } /> */}               
+                    <TabelaCategoria/> 
+                    <h1 style={styleh1}>Gráfico</h1>
+                    <GraficoStock/>   
+
             </div>
         );
     }