CODIGO DE LA APLICACIÓN DE ESTADISTICAS DONDE SE MUESTRA LA GRAFICA DE HOSPITALES

VS FECHA HORA

importar
Reaccionar
desde
'reaccionar'
;
importar PrecioCard desde './../card/PrecioCard' ;
importar FusionCharts desde 'fusioncharts' ;
importar gráficos desde 'fusioncharts/fusioncharts.charts' ;
importar widgets desde 'fusioncharts/fusioncharts.widgets' ;
importar ReactFC desde 'react-fusioncharts' ;
importar FusionTheme desde
'fusioncharts/themes/fusioncharts.theme.fusion' ;

ReactFC . fcRoot ( FusionCharts , Gráficos , Widgets ,

FusionTheme ) ;

El cuerpo de la clase extiende React . componente {

constructor ( accesorios ) {
súper ( accesorios ) ;
esto _ BASE_URL =
"https://almundo-examen.herokuapp.com/api/" ;
esto _ chartRef = nulo ;
esto _ estado = {
cuantos : '-' ,
bien : "" ,
hospitales : '-' ,
Mostrar gráfico : falso ,
valor inicial : 0 ,
Fuente de datos : {
"gráfico" : {
"caption" : "Estadisticas de registros
cargados" ,
"subtítulo" : "" ,
"xAxisName" : "Hora Local" ,
"yAxisName" : "Cuantos Hospitales" ,
"prefijonumero" : "Total: " ,
"intervalo de actualización" : "2" ,
"etiquetas inclinadas" : "1" ,
"numerodisplaysets" : "10" ,
"labeldisplay" : "rotar" ,
"mostrarValores" : "0" ,
"mostrarValorTiempoReal" : "0" ,
 "tema" : "fusión"
} ,
"categorías" : [ {
"categoría" : [ {
"etiqueta" : esto . clienteFechaHora
( ) . a la cadena ( )
} ]
} ] ,
"conjunto de datos" : [ {
"datos" : [ {
"valor" : 0
} ]
} ]
}
} ;
esto _ chartConfigs = {
tipo : 'línea de tiempo real' ,
renderAt : 'contenedor' ,
ancho : '100%' ,
altura : '350' ,
formato de datos : 'json'
} ;
}

componenteHizoMontaje ( ) {
esto _ getDataFor ( "hospitales" , "cuantos" ) ;
esto _ getDataFor ( " hospitales " , "ok" ) ;
esto _ getDataFor ( " hospitales " , " hospitales " ) ;
}

iniciarActualizandoDatos ( ) {
establecerIntervalo ( ( ) => {
buscar ( this . BASE_URL + " hospitales e" )
. entonces ( res => res . json ( ) )
. entonces ( d => {
sea x_axis = esto . clienteFechaHora ( ) ;
sea y_axis = d . cuantos ;
esto _ chartRef . feedData ( "&label=" + x_axis
+ "&value=" + y_axis ) ;
} ) ;
} , 5000 ) ;
}
 getDataFor (hospitales , prop ) {
buscar ( this . BASE_URL + hospitales , {
modo : 'cors'
} )
. entonces ( res => res . json ( ) )
. entonces ( d => {
if ( prop === "cuantos" ) {
const fuente de datos = esto . estado _ fuente
de datos ;
Fuente de datos . gráfico _ yAxisMaxValue =
parseInt ( d . cuantos )
Fuente de datos . gráfico _ yAxisMinValue =
parseInt ( d . cuantos )
consola _ registro ( JSON . stringify ( fuente de
datos ) ) ;
Fuente de datos . conjunto de datos [ 0 ] [ "datos"
] [ 0 ] . valor = re . cuantos ;
esto _ establecerEstado ( {
showChart : verdadero ,
fuente de datos : fuente de datos ,
valor de inicio : d . cuantos
} ,
( ) => {
esto _ iniciarActualizandoDatos ( ) ;
} ) ;
}
esto _ establecerEstado ( {
cuantos : d . cuantos ,
hospitales : d . hospitales _ estrellas
} ) ;
} ) ;
}

static addLeadingZero ( num ) {

devolver número <= 9 ? "0" + número : número ;
}

clienteFechaHora ( ) {
var fecha_hora = nueva fecha ( ) ;
var curr_hora = fecha_hora . obtenerHoras ( ) ;
var zero_added_curr_hour = Cuerpo . addLeadingZero
( hora_actual ) ;
var curr_min = fecha_hora . obtenerMinutos ( ) ;
var curr_sec = fecha_hora . obtenerSegundos ( ) ;
 var curr_time = zero_added_curr_hour + ":" +
curr_min + ":" + curr_sec ;
volver hora_actual ;
}
getChartRef ( gráfico ) {
esto _ chartRef = gráfico ;
}
renderizar ( ) {
volver (
< div className = "fila mt-5 mt-xs-4" >
< div className = "col-12 mb-3" >
< div className = "baraja de cartas baraja de cartas
personalizada" >
< PrecioTarjeta
header = "Registro Total:"
origen = { "" }
alt = "punto de fuego"
label = "(Lugares)"
valor = { esto . estado _ cuantos }
/ >
< PrecioTarjeta
header = "Un texto"
origen = { "" }
alt = "punto de fuego"
etiqueta = "(cosas)"
valor = { esto . estado _ bien }
/ >
< PrecioTarjeta
header = "Un Texto"
origen = { "" }
alt = "punto de fuego"
etiqueta = "(de algo)"
valor = { esto . estado _ hospitales }
/ >
< / div >
< / div >
< div className = "col-12" >
< div className = "tarjeta tarjeta personalizada mb-
5 mb-xs-4" >
< div className = "cuerpo de tarjeta" >
{ esto . estado _ Mostrar gráfico ? (
< React FC
{ ... esto . chartConfigs }
fuente de datos = { esto . estado _ fuente de
datos }
onRender = { esto . getChartRef . enlazar
( esto ) }
/ >
) : nulo }
< / div >
< / div >
< / div >
< / div >
) ;
}
}

exportar cuerpo predeterminado ;