Skip to content

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
  • OnDestroy

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:365

Properties

ChartType

• ChartType: typeof ChartType = ChartType

Defined in

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

Position

• Position: typeof Position = Position

Defined in

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

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:282

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:267

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:134

chart

• chart: AbstractChart

Defined in

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

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:175

chartTitle

• chartTitle: string = ''

Input

: Angular

Description

Chart's title.

Defined in

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

chartType

• chartType: ChartType = ChartType.area

Input

: Angular

Description

Chart's representation type.

Defined in

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

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:170

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:159

chartYLabel

• chartYLabel: string = ''

Input

: Angular

Description

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

Defined in

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

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:180

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:67

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:351

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:78

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:83

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:200

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:277

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:139

histogram

• histogram: AbstractHistogram

Defined in

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

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:346

id

• id: string

Defined in

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

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:117

intervalSelection

• intervalSelection: SelectedInputValues

Input

: Angular

Description

A single interval that selects data.

Defined in

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

isHistogramSelectable

• isHistogramSelectable: boolean = true

Input

: Angular

Description

Whether the chart is selectable.

Defined in

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

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:261

leftOffsetRemoveInterval

• leftOffsetRemoveInterval: number = 18

Input

: Angular

Description

leftOffsetRemoveInterval.

Defined in

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

lt

• lt: ElementRef<any>

Defined in

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

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:73

multiselectable

• multiselectable: boolean = false

Input

: Angular

Description

Whether the selection is multiple.

Defined in

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

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:272

rt

• rt: ElementRef<any>

Defined in

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

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:326

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:336

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:144

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:225

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:250

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:190

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:240

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:230

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:245

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:235

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:309

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:314

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:319

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:291

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:304

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:298

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:256

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:356

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:122

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:331

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:97

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:341

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:195

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:215

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:205

xUnit

• xUnit: string = ''

Description

Unit of x axis values.

Defined in

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

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:185

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:220

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:210

yUnit

• yUnit: string = ''

Description

Unit of y axis values.

Defined in

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

Methods

ngAfterViewChecked

▸ ngAfterViewChecked(): void

Returns

void

Implementation of

AfterViewChecked.ngAfterViewChecked

Defined in

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

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:387

ngOnDestroy

▸ ngOnDestroy(): void

Returns

void

Implementation of

OnDestroy.ngOnDestroy

Defined in

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

ngOnInit

▸ ngOnInit(): void

Returns

void

Implementation of

OnInit.ngOnInit

Defined in

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

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:473

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:489

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:480

getHistogramJsonSchema

▸ Static getHistogramJsonSchema(): Object

Returns

Object

Defined in

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

getSwimlaneJsonSchema

▸ Static getSwimlaneJsonSchema(): Object

Returns

Object

Defined in

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