Khiops-visualization NPM

Khiops visualization & covisualization Angular components

Khiops Visualization is a visualization plug-in of the data preparation and scoring tool Khiops. Khiops Visualization allows visualizing all analysis results in an intuitive way, providing a quick and easy interpretation of the discovered patterns.

Installation

Latest version:

npm i khiops-visualization@latest

Or specific version:

npm i khiops-visualization@11.5.5

Usage

Into you html app file:

<khiops-visualization></khiops-visualization>
<khiops-covisualization></khiops-covisualization>

Into your .ts app component:

import { Component, ElementRef, ViewChild } from '@angular/core';
import 'khiops-visualization';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  standalone: false,
  styleUrl: './app.component.scss',
})
export class AppComponent {
  jsonData = {}; // JSON data to be displayed

  @ViewChild('visualizationComponent', {
    static: false,
  })
  visualizationComponent?: ElementRef<HTMLElement>;

  @ViewChild('covisualizationComponent', {
    static: false,
  })
  covisualizationComponent?: ElementRef<HTMLElement>;

  ngOnInit(): void {
    this.visualizationComponent?.nativeElement.setConfig({
      showProjectTab: false,
      // ... see Configuration
    });
    this.visualizationComponent?.nativeElement.setDatas(jsonData);

    this.covisualizationComponent?.nativeElement.setConfig({
      showProjectTab: false,
      // ... see Configuration
    });
    this.covisualizationComponent?.nativeElement.setDatas(jsonData);
  }
}

You may have to allow CUSTOM_ELEMENTS_SCHEMA into your module:

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})

Configuration

Option	Type	Description	Default
showProjectTab	boolean	Show or hide project's tab	true
appSource	string	Specify app source for metrics	WEB
trackerId	string	Matomo tracker id
onFileOpen	Callback	Callback when a file is open
onCopyData	Callback	Callback when datas are copied
onCopyImage	Callback	Callback when screenshot is copied
onThemeChanged	Callback	Callback when theme has changed
onSendEvent	Callback	Send custom events Event must have a message and may have additionnal datas of any type
readLocalFile	Callback	Callback when a local file is loaded automatically. For security reasons, local files can not be loaded automatically without Electron.Used to load external datas at startup.This method takes a file in input and a callback when file is loaded