Skip to content

Latest commit

 

History

History
88 lines (58 loc) · 3.05 KB

README.md

File metadata and controls

88 lines (58 loc) · 3.05 KB

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

image

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.

image

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

image

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].