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

Properties

Array

Array: ArrayConstructor = Array

Defined in

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


ChartType

ChartType: typeof ChartType = ChartType

Defined in

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


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


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


brushHandlesHeightWeight

brushHandlesHeightWeight: number = 1

input : Angular

description A 0 to 1 weight of the brush height. It controls the brush handles height.

Defined in

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


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


chartTitle

chartTitle: string = ''

input : Angular

description Chart's title.

Defined in

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


chartType

chartType: ChartType = ChartType.area

input : Angular

description Chart's representation type.

Defined in

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


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


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


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


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


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


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


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


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


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


histogram

histogram: AbstractHistogram

Defined in

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


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


id

id: any

Defined in

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


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


intervalSelection

intervalSelection: SelectedInputValues

input : Angular

description A single interval that selects data.

Defined in

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


isHistogramSelectable

isHistogramSelectable: boolean = true

input : Angular

description Whether the chart is selectable.

Defined in

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


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


leftOffsetRemoveInterval

leftOffsetRemoveInterval: number = 18

input : Angular

description leftOffsetRemoveInterval.

Defined in

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


lt

lt: ElementRef<any>

Defined in

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


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


multiselectable

multiselectable: boolean = false

input : Angular

description Whether the selection is multiple.

Defined in

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


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


rt

rt: ElementRef<any>

Defined in

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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


xUnit

xUnit: string = ''

description Unit of x axis values.

Defined in

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


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


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


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


yUnit

yUnit: string = ''

description Unit of y axis values.

Defined in

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

Methods

leaveRemove

leaveRemove(): void

description Hides the "Remove" tooltip

Returns

void

Defined in

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


ngAfterViewChecked

ngAfterViewChecked(): void

Returns

void

Implementation of

AfterViewChecked.ngAfterViewChecked

Defined in

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


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


ngOnInit

ngOnInit(): void

Returns

void

Implementation of

OnInit.ngOnInit

Defined in

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


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


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


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


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


getHistogramJsonSchema

Static getHistogramJsonSchema(): Object

Returns

Object

Defined in

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


getSwimlaneJsonSchema

Static getSwimlaneJsonSchema(): Object

Returns

Object

Defined in

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