Be-metric-plotter NPM

BE Metric Plotter

Visualizador de metricas basado en chart.js

Prerequisitos

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

@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