Skip to content

arlas-web-components > "components/histogram/histogram.component" > 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.

Hierarchy

HistogramComponent

Implements

  • OnInit
  • OnChanges
  • AfterViewChecked

Index

Constructors

Properties

Methods


Constructors

constructor

new HistogramComponent(viewContainerRef: ViewContainerRef, el: ElementRef): HistogramComponent

Defined in components/histogram/histogram.component.ts:284

Parameters:

Name Type
viewContainerRef ViewContainerRef
el ElementRef

Returns: HistogramComponent


Properties

Array

● Array: ArrayConstructor = Array

Defined in components/histogram/histogram.component.ts:284


ChartType

● ChartType: ChartType = ChartType

Defined in components/histogram/histogram.component.ts:283


applyOffsetOnAreaChart

● applyOffsetOnAreaChart: boolean = true

Defined in components/histogram/histogram.component.ts:233

input: : Angular

description: Translates area chart by half data interval


barWeight

● barWeight: number = 0.6

Defined in components/histogram/histogram.component.ts:218

input: : Angular

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


brushHandlesHeightWeight

● brushHandlesHeightWeight: number = 1 / 2

Defined in components/histogram/histogram.component.ts:111

input: : Angular

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


chartHeight

● chartHeight: number = null

Defined in components/histogram/histogram.component.ts:131

input: : Angular

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


chartTitle

● chartTitle: string = ""

Defined in components/histogram/histogram.component.ts:121

input: : Angular

description: Chart's title.


chartType

● chartType: ChartType = ChartType.area

Defined in components/histogram/histogram.component.ts:116

input: : Angular

description: Chart's representation type.


chartWidth

● chartWidth: number = null

Defined in components/histogram/histogram.component.ts:126

input: : Angular

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


customizedCssClass

● customizedCssClass: string = ""

Defined in components/histogram/histogram.component.ts:136

input: : Angular

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


data

● data: Array<object> | Map<string, Array<object>>

Defined in components/histogram/histogram.component.ts:61

input: : Angular

description: Data to plot in the chart.


dataPlottedEvent

● dataPlottedEvent: Subject<string> = new Subject()

Defined in components/histogram/histogram.component.ts:280

output: : Angular

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


dataType

● dataType: DataType = DataType.numeric

Defined in components/histogram/histogram.component.ts:66

input:

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


dataUnit

● dataUnit: string = ""

Defined in components/histogram/histogram.component.ts:70

description: Unity of data to add in the end of tooltip values.


descriptionPosition

● descriptionPosition: Position = Position.bottom

Defined in components/histogram/histogram.component.ts:156

input: : Angular

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


displayOnlyIntervalsWithData

● displayOnlyIntervalsWithData: boolean = false

Defined in components/histogram/histogram.component.ts:228

input: : Angular

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


histogram

● histogram: AbstractHistogram

Defined in components/histogram/histogram.component.ts:282


hoveredBucketEvent

● hoveredBucketEvent: Subject<Date | number> = new Subject()

Defined in components/histogram/histogram.component.ts:275

output: : Angular

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


id

● id: any

Defined in components/histogram/histogram.component.ts:255


intervalListSelection

● intervalListSelection: SelectedInputValues[]

Defined in components/histogram/histogram.component.ts:96

input: : Angular

description: A list of intervals that select data.


intervalSelection

● intervalSelection: SelectedInputValues

Defined in components/histogram/histogram.component.ts:91

input: : Angular

description: A single interval that selects data.


isHistogramSelectable

● isHistogramSelectable: boolean = true

Defined in components/histogram/histogram.component.ts:81

input: : Angular

description: Whether the chart is selectable.


isSmoothedCurve

● isSmoothedCurve: boolean = true

Defined in components/histogram/histogram.component.ts:212

input: : Angular

description: Whether the curve of an area chart is smoothed.


leftOffsetRemoveInterval

● leftOffsetRemoveInterval: number = 18

Defined in components/histogram/histogram.component.ts:106

input: : Angular

description: leftOffsetRemoveInterval.


lt

● lt: ElementRef

Defined in components/histogram/histogram.component.ts:54


multiselectable

● multiselectable: boolean = false

Defined in components/histogram/histogram.component.ts:86

input: : Angular

description: Whether the selection is multiple.


paletteColors

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

Defined in components/histogram/histogram.component.ts:223

input: : Angular

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


rt

● rt: ElementRef

Defined in components/histogram/histogram.component.ts:55


selectedSwimlanes

● selectedSwimlanes: Set<string> = new Set()

Defined in components/histogram/histogram.component.ts:260

input: : Angular

description: Term's list of powerbars to select


selectedSwimlanesEvent

● selectedSwimlanesEvent: Subject<Set<string>> = new Subject>()

Defined in components/histogram/histogram.component.ts:265

output: : Angular

description: Emits the list of selected powerbars terms


showHorizontalLines

● showHorizontalLines: boolean = true

Defined in components/histogram/histogram.component.ts:201

input: : Angular

description: Whether showing the horizontal dashed lines.


showStripes

● showStripes: boolean = true

Defined in components/histogram/histogram.component.ts:146

input: : Angular

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


showXLabels

● showXLabels: boolean = true

Defined in components/histogram/histogram.component.ts:191

input: : Angular

description: Whether showing the X axis labels.


showXTicks

● showXTicks: boolean = true

Defined in components/histogram/histogram.component.ts:181

input: : Angular

description: Whether showing the X axis ticks.


showYLabels

● showYLabels: boolean = true

Defined in components/histogram/histogram.component.ts:196

input: : Angular

description: Whether showing the Y axis labels.


showYTicks

● showYTicks: boolean = true

Defined in components/histogram/histogram.component.ts:186

input: : Angular

description: Whether showing the Y axis ticks.


swimLaneLabelsWidth

● swimLaneLabelsWidth: any = null

Defined in components/histogram/histogram.component.ts:243

input: : Angular

description: The width of swimlane labels space.


swimlaneBorderRadius

● swimlaneBorderRadius: number = 3

Defined in components/histogram/histogram.component.ts:248

input: : Angular

description: The radius of swimlane bars borders.


swimlaneHeight

● swimlaneHeight: number = null

Defined in components/histogram/histogram.component.ts:253

input: : Angular

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


swimlaneMode

● swimlaneMode: SwimlaneMode = SwimlaneMode.variableHeight

Defined in components/histogram/histogram.component.ts:238

input: : Angular

description: The swimlane representation mode.


ticksDateFormat

● ticksDateFormat: string = null

Defined in components/histogram/histogram.component.ts:207

input: : Angular

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


topOffsetRemoveInterval

● topOffsetRemoveInterval: number = 40

Defined in components/histogram/histogram.component.ts:101

input: : Angular

description: Top position of the remove-selection-button.


valuesDateFormat

● valuesDateFormat: string = null

Defined in components/histogram/histogram.component.ts:76

input: : Angular

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


valuesListChangedEvent

● valuesListChangedEvent: Subject<SelectedOutputValues[]> = new Subject()

Defined in components/histogram/histogram.component.ts:270

output: : Angular

description: Emits the list of selected intervals.


xAxisPosition

● xAxisPosition: Position = Position.bottom

Defined in components/histogram/histogram.component.ts:151

input: : Angular

description: The xAxis positon : above or below the chart.


xLabels

● xLabels: number = 5

Defined in components/histogram/histogram.component.ts:171

input: : Angular

description: Number of labels in the X axis.


xTicks

● xTicks: number = 5

Defined in components/histogram/histogram.component.ts:161

input: : Angular

description: Number of ticks in the X axis.


yAxisStartsFromZero

● yAxisStartsFromZero: boolean = true

Defined in components/histogram/histogram.component.ts:141

input: : Angular

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


yLabels

● yLabels: number = 5

Defined in components/histogram/histogram.component.ts:176

input: : Angular

description: Number of labels in the Y axis.


yTicks

● yTicks: number = 5

Defined in components/histogram/histogram.component.ts:166

input: : Angular

description: Number of ticks in the Y axis.


Methods

leaveRemove

leaveRemove(): void

Defined in components/histogram/histogram.component.ts:407

description: Hides the "Remove" tooltip

Returns: void


ngAfterViewChecked

ngAfterViewChecked(): void

Defined in components/histogram/histogram.component.ts:365

Returns: void


ngOnChanges

ngOnChanges(changes: SimpleChanges): void

Defined in components/histogram/histogram.component.ts:303

Parameters:

Name Type
changes SimpleChanges

Returns: void


ngOnInit

ngOnInit(): void

Defined in components/histogram/histogram.component.ts:362

Returns: void


overRemove

overRemove(e: any): void

Defined in components/histogram/histogram.component.ts:400

description: Displays the "Remove" tooltip

Parameters:

Name Type
e any

Returns: void


plotHistogram

plotHistogram(inputData: Array<object> | Map<string, Array<object>>): void

Defined in components/histogram/histogram.component.ts:377

description: Plots the histogram

Parameters:

Name Type
inputData Array<object>

Returns: void


removeSelectInterval

removeSelectInterval(id: string): void

Defined in components/histogram/histogram.component.ts:393

description: Removes the selected interval

Parameters:

Name Type
id string

Returns: void


resizeHistogram

resizeHistogram(): void

Defined in components/histogram/histogram.component.ts:384

description: Resizes the histogram on windows resize event

Returns: void


<Static> getHistogramJsonSchema

getHistogramJsonSchema(): Object

Defined in components/histogram/histogram.component.ts:294

Returns: Object


<Static> getSwimlaneJsonSchema

getSwimlaneJsonSchema(): Object

Defined in components/histogram/histogram.component.ts:298

Returns: Object