BE Metric Plotter

Visualizador de metricas basado en chart.js

Prerequisitos

Disponer de una base de datos en Firebase con el siguiente esquema

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

@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

  <be-metric-plotter [config]="{
      width: '400px',
      height: '300px',
      showDatasetConfig: false,
      defaultMetricConditions: [{
        action: 'read',
        name: 'userCreated',
        startDate: startDate,
        finishDate: finishDate
      },{
        action: 'send',
        name: 'userCreated',
        startDate: startDate,
        finishDate: finishDate
      }]}"></be-metric-plotter>

Getting Started

La configuración por defecto

config: {
    width: "100%",
    height: "500px",
    showDatasetConfig: true,
    defaultMetricConditions: [{
      action: "Todos",
      name: "userCreated",
      finishDate: new Date(),
      startDate: new Date()
    }]
  }

Parámetros de entrada

| 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 |