ngx-khiops-histogram

ngx-khiops-histogram is an Angular Typescript component that allows you to display histograms of numerical values in linear and logarithmic form. This component is maintained and is integrated into the Khiops Visualization tool.

Why ?

If the linear representation in x and y is classic, as is the logarithmic representation in y, the logarithmic representation in x poses a problem for values ​​around zero and for negative interval values.

Negative logarithmic values

Negative logarithmic interval values ​​cannot be represented since Math.log10(-x) = NaN. In order to represent these values, ​​we will take their absolute values ​​which we will display on the negative axis of x: from -1 to -inf

Values around 0

Values ​​around [-1; 1] are infinite so the representation should be infinitely large. To avoid this, we then arbitrarily assign a width of 1/10 of the width of the graph.

If 0 is a bound, the arbitrary histogram in the middle is divided into two parts to represent the value <0 and the value >0

Installation

yarn add ngx-khiops-histogram

or

npm install ngx-khiops-histogram

Usage

Add wanted package to NgModule imports:

import { NgxKhiopsHistogramModule } from 'ngx-khiops-histogram';

@NgModule({
...
imports: [NgxKhiopsHistogramModule,...]
...
})

Add component to your page:

<ngx-khiops-histogram
    [datas]="datas"
    [datasLabels]="datasLabels"
    [options]="options"
    [graphOptionX]="graphOptionX"
    [graphOptionY]="graphOptionY"
    (selectedItemChanged)="selectedItemChanged($event)">
</ngx-khiops-histogram>

Params

| Property | Type | Default | Description | |--|--|--|--| | graphOptionX | HistogramType | HistogramType.XLIN | X axis scale | | graphOptionY| HistogramType | HistogramType.YLIN| Y axis scale | | options| HistogramOptions| {selectedBarColor: 'black',gridColor: '#aaa',xPadding: 40,yPadding: 50,minBarHeight: 4} | Optional styles options | | datas| HistogramData| {frequency: number,partition: [number, number],value: number,logValue: number} | Datas inputs |

Outputs

| Property | Event type | Description| |--|--|--| | selectedItemChanged | EventEmitter(Number) | Emit new index value when a bar is clicked|

License

This software is distributed under the BSD 3-Clause-clear License, the text of which is available at https://spdx.org/licenses/BSD-3-Clause-Clear.html or see the LICENSE.md for more details.

Credits

The ngx-khiops-histogram library is currently developed at Orange Innovation by the Khiops Team: [email protected].