arlas-web-components / Exports / HistogramComponent

Class: HistogramComponent

The Histogram web component allows you to display your numeric and temporal data in charts or swimlanes. Charts can be represented as bars or areas. Swimlanes can be represented as bars or circles. For both modes, data can be multi-selected using a selection brush.

Implements

  • OnInit
  • OnChanges
  • AfterViewChecked

Table of contents

Constructors

Properties

Methods

Constructors

constructor

• new HistogramComponent(colorService, el, translate)

Parameters

Name Type
colorService ArlasColorService
el ElementRef<any>
translate TranslateService

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:362

Properties

Array

• Array: ArrayConstructor = Array

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:360

ChartType

• ChartType: typeof ChartType = ChartType

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:359

applyOffsetOnAreaChart

• applyOffsetOnAreaChart: boolean = true

Input

: Angular

Description

Translates area chart by half data interval

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:281

barWeight

• barWeight: number = 0.6

Input

: Angular

Description

Weight applied to bars width. ]0,1].

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:266

brushHandlesHeightWeight

• brushHandlesHeightWeight: number = 1

Input

: Angular

Description

A 0 to 1 weight of the brush handles height. This input will be taken into account when selectionType is 'rectangle'. (This input will be renamed handlesHeightWeight in the v25.0.0 release.)

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:139

chart

• chart: AbstractChart

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:358

chartHeight

• chartHeight: number = null

Input

: Angular

Description

Chart's height. If not specified, the chart takes the component's container height.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:174

chartTitle

• chartTitle: string = ''

Input

: Angular

Description

Chart's title.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:159

chartType

• chartType: ChartType = ChartType.area

Input

: Angular

Description

Chart's representation type.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:154

chartWidth

• chartWidth: number = null

Input

: Angular

Description

Chart's width. If not specified, the chart takes the component's container width.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:169

chartXLabel

• chartXLabel: string = ''

Input

: Angular

Description

Chart's label for the x axis (Visible when there is one bucket on the histogram).

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:164

customizedCssClass

• customizedCssClass: string = ''

Input

: Angular

Description

Css class name to use to customize a specific arlas-histogram component.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:179

data

• data: HistogramData[] | SwimlaneData

Input

: Angular

Description

Data to plot in the chart.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:72

dataPlottedEvent

• dataPlottedEvent: Subject<string>

Output

: Angular

Description

Emits an event informing that the chart finished plotting.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:350

dataType

• dataType: DataType = DataType.numeric

Input

Description

To be set to time when x axis represents dates and to numeric otherwise.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:83

dataUnit

• dataUnit: string = ''

Description

Unit of data to add in the end of tooltip values.

Deprecated

If xUnit is specified, dataUnit is not taken into account.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:88

descriptionPosition

• descriptionPosition: Position = Position.bottom

Input

: Angular

Description

The start/end values positon : above or below the chart.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:199

displayOnlyIntervalsWithData

• displayOnlyIntervalsWithData: boolean = false

Input

: Angular

Description

Allows to include only selections that contain data in the histogram/swimlane

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:276

handlesRadius

• handlesRadius: number = 4

Input

: Angular

Description

Radius of handles in pixels. This input will be taken into account when selectionType is 'slider'.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:144

histogram

• histogram: AbstractHistogram

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:357

hoveredBucketEvent

• hoveredBucketEvent: Subject<number | Date>

Output

: Angular

Description

Emits the hovered bucket key (key as in HistogramData).

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:345

id

• id: any

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:320

intervalListSelection

• intervalListSelection: SelectedInputValues[]

Input

: Angular

Description

A list of intervals that select data.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:122

intervalSelection

• intervalSelection: SelectedInputValues

Input

: Angular

Description

A single interval that selects data.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:117

isHistogramSelectable

• isHistogramSelectable: boolean = true

Input

: Angular

Description

Whether the chart is selectable.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:107

isSmoothedCurve

• isSmoothedCurve: boolean = true

Input

: Angular

Description

Whether the curve of an area chart is smoothed.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:260

leftOffsetRemoveInterval

• leftOffsetRemoveInterval: number = 18

Input

: Angular

Description

leftOffsetRemoveInterval.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:132

lt

• lt: ElementRef<any>

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:65

mainChartId

• mainChartId: string

Input

: Angular

Description

HistogramData is a bucket of a given chart Id. Many charts ids can be represented in histogram. This input sets the main chart id. So that the main one can be represented differently from the others

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:78

multiselectable

• multiselectable: boolean = false

Input

: Angular

Description

Whether the selection is multiple.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:112

paletteColors

• paletteColors: string | [number, number] = null

Input

: Angular

Description

Either a hex string color or a color name (in English) or a saturation interval.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:271

rt

• rt: ElementRef<any>

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:66

selectedSwimlanes

• selectedSwimlanes: Set<string>

Input

: Angular

Description

Term's list of powerbars to select

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:325

selectedSwimlanesEvent

• selectedSwimlanesEvent: Subject<Set<string>>

Output

: Angular

Description

Emits the list of selected powerbars terms

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:335

selectionType

• selectionType: SelectionType = SelectionType.slider

Input

: Angular

Description

Radius of handles in pixels. This input will be taken into account when selectionType is 'slider'.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:149

shortYLabels

• shortYLabels: boolean = false

Input

: Angular

Description

Display short labels on y axis.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:224

showHorizontalLines

• showHorizontalLines: boolean = true

Input

: Angular

Description

Whether showing the horizontal dashed lines.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:249

showStripes

• showStripes: boolean = true

Input

: Angular

Description

Whether to add stripes in the histograms when yAxis starts from minimum of data

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:189

showXLabels

• showXLabels: boolean = true

Input

: Angular

Description

Whether showing the X axis labels.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:239

showXTicks

• showXTicks: boolean = true

Input

: Angular

Description

Whether showing the X axis ticks.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:229

showYLabels

• showYLabels: boolean = true

Input

: Angular

Description

Whether showing the Y axis labels.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:244

showYTicks

• showYTicks: boolean = true

Input

: Angular

Description

Whether showing the Y axis ticks.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:234

swimLaneLabelsWidth

• swimLaneLabelsWidth: any = null

Input

: Angular

Description

The width of swimlane labels space.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:308

swimlaneBorderRadius

• swimlaneBorderRadius: number = 3

Input

: Angular

Description

The radius of swimlane bars borders.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:313

swimlaneHeight

• swimlaneHeight: number = null

Input

: Angular

Description

The height of a single lane. If not specified, a lane height is the chartHeight devided by the number of lanes.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:318

swimlaneMode

• swimlaneMode: SwimlaneMode = SwimlaneMode.variableHeight

Input

: Angular

Description

The swimlane mode. - variableHeight buckets height varies with the bucket's value - fixedHeight all the buckets have the same height. A level tick is plotted on the bucket to indicate the value level compared to other values. - circles buckets are represented with circles whose radius varies the bucket's value.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:290

swimlaneOptions

• swimlaneOptions: SwimlaneOptions

Input

: Angular

Description

Graphical options to configure for the swimlane.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:303

swimlaneRepresentation

• swimlaneRepresentation: SwimlaneRepresentation = SwimlaneRepresentation.global

Input

: Angular

Description

The swimlane representation. - column representation focuses on terms of the same column; each term is compared to the sum of all terms values in the column. - global representation compares all the buckets values to the maximum value in the swimlane.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:297

ticksDateFormat

• ticksDateFormat: string = null

Input

: Angular

Description

The date format of ticks. Please refer to this list of specifiers.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:255

tooltipEvent

• tooltipEvent: Subject<HistogramTooltip>

Output

: Angular

Description

Emits the hovered bucket information that can be exploited to display a tooltip

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:355

topOffsetRemoveInterval

• topOffsetRemoveInterval: number = 40

Input

: Angular

Description

Top position of the remove-selection-button.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:127

useUtc

• useUtc: boolean = true

Input

: Angular

Description

Wether use UTC to display date on the app

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:330

valuesDateFormat

• valuesDateFormat: string = null

Input

: Angular

Description

The date format of the start/end values. Please refer to this list of specifiers.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:102

valuesListChangedEvent

• valuesListChangedEvent: Subject<SelectedOutputValues[]>

Output

: Angular

Description

Emits the list of selected intervals.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:340

xAxisPosition

• xAxisPosition: Position = Position.bottom

Input

: Angular

Description

The xAxis positon : above or below the chart.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:194

xLabels

• xLabels: number = 5

Input

: Angular

Description

Number of labels in the X axis.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:214

xTicks

• xTicks: number = 5

Input

: Angular

Description

Number of ticks in the X axis.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:204

xUnit

• xUnit: string = ''

Description

Unit of x axis values.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:92

yAxisStartsFromZero

• yAxisStartsFromZero: boolean = true

Input

: Angular

Description

Whether the histogram values start from zero or from the minimum of data

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:184

yLabels

• yLabels: number = 5

Input

: Angular

Description

Number of labels in the Y axis.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:219

yTicks

• yTicks: number = 5

Input

: Angular

Description

Number of ticks in the Y axis.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:209

yUnit

• yUnit: string = ''

Description

Unit of y axis values.

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:96

Methods

leaveRemove

▸ leaveRemove(): void

Description

Hides the "Remove" tooltip

Returns

void

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:495

ngAfterViewChecked

▸ ngAfterViewChecked(): void

Returns

void

Implementation of

AfterViewChecked.ngAfterViewChecked

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:453

ngOnChanges

▸ ngOnChanges(changes): void

Parameters

Name Type
changes SimpleChanges

Returns

void

Implementation of

OnChanges.ngOnChanges

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:379

ngOnInit

▸ ngOnInit(): void

Returns

void

Implementation of

OnInit.ngOnInit

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:450

overRemove

▸ overRemove(e): void

Description

Displays the "Remove" tooltip

Parameters

Name Type
e any

Returns

void

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:488

plotHistogram

▸ plotHistogram(inputData): void

Description

Plots the histogram

Parameters

Name Type
inputData HistogramData[] | SwimlaneData

Returns

void

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:465

removeSelectInterval

▸ removeSelectInterval(id): void

Description

Removes the selected interval

Parameters

Name Type
id string

Returns

void

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:481

resizeHistogram

▸ resizeHistogram(): void

Description

Resizes the histogram on windows resize event

Returns

void

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:472

getHistogramJsonSchema

▸ Static getHistogramJsonSchema(): Object

Returns

Object

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:370

getSwimlaneJsonSchema

▸ Static getSwimlaneJsonSchema(): Object

Returns

Object

Defined in

projects/arlas-components/src/lib/components/histogram/histogram.component.ts:374