BE Metric Plotter

Visualizador de metricas basado en chart.js

$3

Disponer de una base de datos en Firebase con el siguiente esquema
!alt Esquema de la base de datos

Con acceso a lectura anónimo

Instalación

``
npm install be-metric-plotter chart.js firebase angularfire2
`
Definir en `enviroments.ts` la configuración de acceso a Firebase

Importar el modulo en el paquete principal
`typescript
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase, 'busco-extra'),
AngularFireDatabaseModule,
AngularFireAuthModule,
BeMetricPlotterModule // <-- Add module here
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`

Añadir etiqueta del componente principal donde se quiere ubicar el gráfico
`html

`


Getting Started

La configuración por defecto
`typescript
config: {
width: "100%",
height: "500px",
showDatasetConfig: true,
defaultMetricConditions: [{
action: "Todos",
name: "userCreated",
finishDate: new Date(),
startDate: new Date()
}]
}
``

$3

| Parámetro | Definición | Valores Posibles |
| --- | --- | --- |
| width | Ancho que debe ocupar el gráfico | Cualquier valor que sea válido en un formato css (px, %, em, etc.). |
| height | Alto que debe ocupar el gráfico | Cualquier valor que sea válido en un formato css (px, %, em, etc.). |
| showDatasetConfig | Mostrar u ocultar los selectores de configuración y adición de datasets | true/false |
| defaultMetricConditions | Lista de parámetros de configuración de datasets | metricCondition |
| metricCondition | Parámetros de configuración para un dataset | |
|    name | Nombre del evento que se quiere incluir en el dataset | Todos, userCreated, facebookWelcome, googleWelcome |
|    action | Acción que se quiere incluir en el dataset (condicionado al name fijado | sent, read |
| startDate | Fecha de inicio para el dataset | Date |
| finishDate | Fecha de fin para el dataset | Date |