parent
010790214c
commit
b3308cd1fd
@ -0,0 +1,127 @@ |
||||
import * as React from 'react' |
||||
import { useEffect, useState } from 'react' |
||||
import Chart from 'react-google-charts' |
||||
import DTOPedimentosCruzadosListaCliente from '../../../DTO/Dashboard/DTOPedimentosCruzadosListaCliente' |
||||
import DTOPedimentosCruzadosData from '../../../DTO/Dashboard/DTOPedimentosCruzadosData' |
||||
import DashboardDS from '../../../Services/Dashboard/Dashboard.Direccion.Services' |
||||
import { Card, Form } from 'react-bootstrap' |
||||
|
||||
export interface IRptPedimentosCruces06Props {} |
||||
|
||||
interface IRechartsData { |
||||
name: string |
||||
uv: number |
||||
pv: number |
||||
amt: number |
||||
} |
||||
|
||||
export default function RptPedimentosCruces06( |
||||
props: IRptPedimentosCruces06Props |
||||
) { |
||||
const [Clientes, setClientes] = useState<DTOPedimentosCruzadosListaCliente[]>( |
||||
[] |
||||
) |
||||
const [Data, setData] = useState<DTOPedimentosCruzadosData[]>([]) |
||||
const [Cliente, setCliente] = useState('') |
||||
const [IDCliente, setIDCliente] = useState(0) |
||||
const [Pedimentos, setPedimentos] = useState<number[]>([]) |
||||
const [Cruces, setCruces] = useState<number[]>([]) |
||||
const [data5, setData5] = useState([ |
||||
['Mes', 'Pedimentos', 'Cruces'], |
||||
['2004/05', 165, 938], |
||||
['2005/06', 135, 1120], |
||||
['2006/07', 157, 1167], |
||||
['2007/08', 139, 1110], |
||||
['2008/09', 136, 691] |
||||
]) |
||||
const options5 = { |
||||
title: '', |
||||
vAxis: { title: '' }, |
||||
hAxis: { title: 'Meses' }, |
||||
seriesType: 'bars', |
||||
series: { 1: { type: 'line' } }, |
||||
colors: ['#1850D0', '70D63E'] |
||||
} |
||||
|
||||
useEffect(() => { |
||||
DashboardDS.GETPedimentosCruzadosListaCliente() |
||||
.then((response) => { |
||||
setClientes(response.data) |
||||
}) |
||||
.catch((e: Error) => { |
||||
return |
||||
}) |
||||
}, []) |
||||
|
||||
useEffect(() => { |
||||
DashboardDS.GETPedimentosCruzadosData(IDCliente) |
||||
.then((response) => { |
||||
setData(response.data) |
||||
let Pedimentos: number[] = [] |
||||
let Cruces: number[] = [] |
||||
let Categorias: string[] = [] |
||||
let RechartsData: IRechartsData[] = [] |
||||
let RGoogleChartData: Array<Array<string | number>> = [] |
||||
RGoogleChartData.push(['Mes', 'Pedimentos', 'Cruces']) |
||||
response.data.forEach(function (item) { |
||||
Pedimentos.push(item.pedimentos) |
||||
Cruces.push(item.despachos) |
||||
Categorias.push(item.sMes) |
||||
RechartsData.push({ |
||||
name: item.sMes, |
||||
pv: item.pedimentos, |
||||
uv: item.despachos, |
||||
amt: 1 |
||||
}) |
||||
RGoogleChartData.push([item.sMes, item.pedimentos, item.despachos]) |
||||
}) |
||||
setData5(RGoogleChartData) |
||||
var arrClientes = Clientes.filter((item) => { |
||||
return item.id == IDCliente |
||||
}) |
||||
setCliente(arrClientes[0].razonSocial) |
||||
}) |
||||
.catch((e: Error) => { |
||||
return |
||||
}) |
||||
}, [IDCliente]) |
||||
return ( |
||||
<div> |
||||
<Card> |
||||
<Card.Body> |
||||
<Form.Control |
||||
as="select" |
||||
onChange={(e) => { |
||||
setIDCliente(parseInt(e.target.value)) |
||||
}} |
||||
className="form-select form-select-sm" |
||||
> |
||||
<option value="0">Seleccion el cliente</option> |
||||
{Clientes |
||||
? Clientes.map((c) => { |
||||
return <option value={c.id}>{c.razonSocial}</option> |
||||
}) |
||||
: null} |
||||
</Form.Control> |
||||
</Card.Body> |
||||
</Card> |
||||
<br /> |
||||
<Card> |
||||
<Card.Body> |
||||
<Card.Title> |
||||
{Cliente} |
||||
<br /> |
||||
<br /> |
||||
</Card.Title> |
||||
<Chart |
||||
chartType="ComboChart" |
||||
width="100%" |
||||
height="600px" |
||||
data={data5} |
||||
options={options5} |
||||
/> |
||||
</Card.Body> |
||||
</Card> |
||||
</div> |
||||
) |
||||
} |
Loading…
Reference in new issue