crossfilter-charts

Charts library that uses crossfilter to create a set of charts that share data and can be updated based on changes made to other charts in the set.

Dependencies

Angular Material and Plotly
You can install angular material via npm: npm install @angular/material
Add an official plotly.js file to your app and define in it the scripts section of your angular.json file:

"test-proj": {
      "projectType": "application",
      "schematics": {},
      "root": "projects/test-proj",
      "sourceRoot": "projects/test-proj/src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "./public",
            "index": "projects/test-proj/src/index.html",
            "main": "projects/test-proj/src/main.ts",
            "polyfills": "projects/test-proj/src/polyfills.ts",
            "tsConfig": "projects/test-proj/tsconfig.app.json",
            "baseHref": "cf-demo",
            "aot": true,
            "assets": [
              "projects/test-proj/src/favicon.ico",
              "projects/test-proj/src/assets"
            ],
            "styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "projects/test-proj/src/styles.css"
            ],
            "scripts": [
              "projects/test-proj/src/assets/plotly.js"
            ],
            "preserveSymlinks": true
          },
          ...

Using the Library

Install

Install via npm: npm install crossfilter-charts
Or you can pull down the library and build it using ng build crossfilter-charts
After that add the module to the app.module.ts file of your project:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CrossfilterChartsModule } from 'crossfilter-charts';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CrossfilterChartsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Note: If you are not installing via npm you will have to change the import statement to contain the path to the built crossfilter-charts library
Next add the library to the html of your app:

<div>
  <lib-crossfilter-charts
    [data]="data"
    [settingsPath]="'assets/settings.json'"
    [width]="'100%'"
    [height]="'100%'">
  </lib-crossfilter-charts>
</div>

Parameters

More details on the parameters that the library accepts:

• data (requried): This will be the array of data you want to build the charts out of. It should be an array of javascript/typescript objects. The objects inside should contain all the data fields you want to be able to work with
• settingsPath (required): The relative or absolute path to a json file that holds the needed settings and options to build the charts. The format of the file is described in more detail in the next section
• width (optional): Specify the exact width you want the library to be. The value is given straight to the css, so any css unit should work (ie. 200px, 100%, or 25vw). Defaults to 100%.
• height (optional): Specifiy the exact height you want the library to be. The value is given to the css, so, like width, any css unit should work. Defaults to 100%.

Settings JSON File

The example below will show the fields that need to be in the settings.json file for the charts to build properly.
Any field not marked with (optional) in the comment next to it is requred

{
  "title": "Demo Charts", // Title that will appear on the banner above the charts
  "canEditSet": true,     // If true allows users to edit the chart settings through an in app menu
  "addCharts": true,      // If true allows users to add more charts to the library
  "traceId": "id",        // The name of the data field that will be used to seprate the data into different traces
  "charts": [             // An array of chart objects that will be created automatically when the library is initialized (optional)
    {
      "type": "Bar",      // Type of chart: ("Bar" and "Scatter Plot" are the current options)
      "title": "T2-Bar",  // Title you want displayed over chart
      "xaxis": "name",    // Name of the data field you want to be the x-axis
      "order": "",        // How you want the chart ordered. Specific to Bar Charts. Options: "a"-accending, "d"-descending, ""-leave it how it is ordered in the array
      "barmode": "stack", // Type of bar more you want. Specific to Bar Charts. Options: "stack" or "group: (optional, defaults to "stack")
      "orientation": "v", // Chart orientation. Specific to Bar Charts. Options: "v"-vertical, "h"-horizontal (optional, defaults to "v")
      "col": "right"      // Which chart column it will be build in. Options: "left", "right" (optional, defaults to "left")
    },
    {
      "type": "Scatter Plot",
      "title": "T1-Scatter",
      "xaxis": "timestamp",
      "yaxis": "x",         // Name of the data field you want to be the y-axis. Specific to Scatter Plots
      "col": "left"
    }
  ]
}