angular-tableau v0.0.1

Angular Tableau

Component for displaying Tableau dashboard in angular, wrapper of the official Tableau JavaScript API

Features

• Load dashboard
• Refresh data
• Display tableau dialogs
• Apply filters

Usage/Examples

Basic Usage

app.module.ts

import { AngularTableauModule } from "angular-tableau";

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

app.component.html

<angular-tableau
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
></angular-tableau>

Private tableau server

app.module.ts

import { AngularTableauModule, TABLEAU_API } from "angular-tableau";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AngularTableauModule],
  providers: [
    {
      provide: TABLEAU_API,
      useValue:
        "https://private.tableau.com/javascripts/api/tableau-2.8.0.min.js",
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Functions

app.component.html

<angular-tableau
  #dashboard1
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
></angular-tableau>
<button type="button" (click)="handleRefreshButtonClick()">Refresh Data</button>

app.component.ts

import { AngularTableauComponent } from "angular-tableau";

export class AppComponent {
  @ViewChild("dashboard1") Dashboard1: AngularTableauCompoment;

  async handleRefreshButtonClick() {
    console.log("Refresh data started");
    await this.Dashboard1.refreshDataAsync();
    console.log("Data refreshed");
  }
}

Events

app.component.html

<angular-tableau
  #dashboard1
  (loaded)="handleLoaded()"
  src="https://public.tableau.com/views/PRIDE_16229892973240/PRIDE"
></angular-tableau>

app.component.ts

import { AngularTableauComponent } from "angular-tableau";

export class AppComponent {
  @ViewChild("dashboard1") Dashboard1: AngularTableauCompoment;

  async handleLoaded() {
    console.log("Refresh data started");
    await this.Dashboard1.refreshDataAsync();
    console.log("Data refreshed");
  }
}

API Reference

Attributes

Events