File

packages/calendar/src/lib/heatmap/heatmap.component.ts

Metadata

selector	`ec-heatmap`
templateUrl	`./heatmap.component.html`

Index

Properties

stats
Public cells
Protected changeSpan
dragged
Public formatted
Public monthFormat
move
todayMoment

Methods

getHeatMap
ngOnChanges
ngOnInit
statsInfo
toShade
updateHeatmap
alter
canAlter
clearSelection
dragOverDay
dragStart
getDayColor
getDayHeat
getMonth
isDraggable
isInTimeSpan
isSelectable
isSelected
mouseOver
mouseUp
ngOnChanges
ngOnInit
selectDay
setDate
setToday
today

Outputs

dayClicked
spanChanged

Inputs

keepTimespan
Default value : `false`
Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:18
If true, the timespan of the first given timestamps will be kept, no matter what follows

timestamps
Type : `string[]`
Default value : `[]`
Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:16
Array of timestamps that should be turned into a heatmap

colors
Type : `Object`
Inherited from `MonthComponent`
Defined in `MonthComponent:41`
Color mapping for day cells. E.g. to view a month heatmap

date
Type : `moment.Moment`
Inherited from `MonthComponent`
Defined in `MonthComponent:51`
The current date (for showing month)

disabled
Inherited from `MonthComponent`
Defined in `MonthComponent:63`
If true, nothing can be changed

disableDrag
Default value : `false`
Inherited from `MonthComponent`
Defined in `MonthComponent:61`
If true, no dragging can be done at all (other drag flags will be ignored)

disableDragAnywhere
Default value : `false`
Inherited from `MonthComponent`
Defined in `MonthComponent:59`
If true, cannot drag anywhere to select a span (can still drag start and end, if not disabled too)

disableDragEnd
Default value : `false`
Inherited from `MonthComponent`
Defined in `MonthComponent:57`
If true, the timespan end cannot be dragged

disableDragStart
Default value : `false`
Inherited from `MonthComponent`
Defined in `MonthComponent:55`
If true, the timespan start cannot be dragged

disablePast
Type : `boolean`
Inherited from `MonthComponent`
Defined in `MonthComponent:49`
If true, past dates cannot be selected

heatmap
Type : `Object`
Inherited from `MonthComponent`
Defined in `MonthComponent:43`
Class mapping for day cells. E.g. to apply different background classes

selected
Type : `moment.Moment`
Inherited from `MonthComponent`
Defined in `MonthComponent:39`
The current selected date

selectSpan
Type : `moment.Moment[]`
Inherited from `MonthComponent`
Defined in `MonthComponent:47`
Timespan in which the dates can be selected.

spancolor
Default value : `'#ccc'`
Inherited from `MonthComponent`
Defined in `MonthComponent:53`
The color of days that are inside the timespan

timespan
Type : `moment.Moment[]`
Inherited from `MonthComponent`
Defined in `MonthComponent:45`
Timespan that is reflected. Marks days inside the span

Outputs

dayClicked
Type : `EventEmitter<any>`
Inherited from `MonthComponent`
Defined in `MonthComponent:71`
Emits when the selected day changes.

spanChanged
Type : `EventEmitter<any>`
Inherited from `MonthComponent`
Defined in `MonthComponent:73`
Changed Timespan selection

Methods

getHeatMap

getHeatMap(timestamps)

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:45

Parameters :

Name	Optional
timestamps	No

Returns : any

ngOnChanges

ngOnChanges(change)

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:25

When changing the date or selected input, the calendar will update its view to display the month containing it.

Parameters :

Name	Optional
change	No

Returns : void

ngOnInit

ngOnInit()

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:20

Returns : void

statsInfo

statsInfo(digits: number)

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:68

Returns json with additional infos about the timestamps

Parameters :

Name	Type	Optional	Default value
digits	`number`	No	`3`

Returns : { timespan: any; count: any; dayspan: any; density: number; }

toShade

toShade(count, max: number, digits: number)

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:37

Parameters :

Name	Type	Optional	Default value
count		No
max	`number`	No	`100`
digits	`number`	No	`2`

Returns : number

updateHeatmap

updateHeatmap()

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:78

Returns : void

alter

alter(value, span: string)

Inherited from MonthComponent

Defined in MonthComponent:326

Updates the viewed date to reflect the given relative changes.

Parameters :

Name	Type	Optional
value		No
span	`string`	No

Returns : void

canAlter

canAlter(value, span: string)

Inherited from MonthComponent

Defined in MonthComponent:320

Parameters :

Name	Type	Optional
value		No
span	`string`	No

Returns : any

clearSelection

clearSelection()

Inherited from MonthComponent

Defined in MonthComponent:301

Clears the current selected date

Returns : void

dragOverDay

dragOverDay(day: Day, e?)

Inherited from MonthComponent

Defined in MonthComponent:98

Parameters :

Name	Type	Optional
day	`Day`	No
e		Yes

Returns : void

dragStart

dragStart(day, e)

Inherited from MonthComponent

Defined in MonthComponent:154

Parameters :

Name	Optional
day	No
e	No

Returns : void

getDayColor

getDayColor(_moment: moment.Moment)

Inherited from MonthComponent

Defined in MonthComponent:188

Parameters :

Name	Type	Optional
_moment	`moment.Moment`	No

Returns : any

getDayHeat

getDayHeat(_moment: moment.Moment)

Inherited from MonthComponent

Defined in MonthComponent:194

Parameters :

Name	Type	Optional
_moment	`moment.Moment`	No

Returns : any

getMonth

getMonth(day, type?: string)

Inherited from MonthComponent

Defined in MonthComponent:221

Returns days of current month

Parameters :

Name	Type	Optional	Default value
day		No	`moment()`
type	`string`	Yes

Returns : Array<Day>

isDraggable

isDraggable(day)

Inherited from MonthComponent

Defined in MonthComponent:89

Parameters :

Name	Optional
day	No

Returns : any

isInTimeSpan

isInTimeSpan(date)

Inherited from MonthComponent

Defined in MonthComponent:150

Parameters :

Name	Optional
date	No

Returns : any

isSelectable

isSelectable(date, span: string)

Inherited from MonthComponent

Defined in MonthComponent:313

Parameters :

Name	Type	Optional	Default value
date		No
span	`string`	No	`'days'`

Returns : any

isSelected

isSelected(_moment: moment.Moment)

Inherited from MonthComponent

Defined in MonthComponent:306

Returns true if the given moment is currently selected (on a day basis)

Parameters :

Name	Type	Optional
_moment	`moment.Moment`	No

Returns : boolean

mouseOver

mouseOver(day, e)

Inherited from MonthComponent

Defined in MonthComponent:180

Parameters :

Name	Optional
day	No
e	No

Returns : void

mouseUp

mouseUp(day, e)

Inherited from MonthComponent

Defined in MonthComponent:171

Parameters :

Name	Optional
day	No
e	No

Returns : void

ngOnChanges

ngOnChanges(change)

Inherited from MonthComponent

Defined in MonthComponent:206

When changing the date or selected input, the calendar will update its view to display the month containing it.

Parameters :

Name	Optional
change	No

Returns : void

ngOnInit

ngOnInit()

Inherited from MonthComponent

Defined in MonthComponent:201

Initializes the calendar.

Returns : void

selectDay

selectDay(_moment: moment.Moment, emit)

Inherited from MonthComponent

Defined in MonthComponent:277

Selects the day of the given moment.

Parameters :

Name	Type	Optional	Default value
_moment	`moment.Moment`	No
emit		No	`true`

Returns : void

setDate

setDate(date: moment.Moment)

Inherited from MonthComponent

Defined in MonthComponent:263

Sets the calendars viewed date to the given moment's month. Renders always 42 cells to keep the layout consistent.

Parameters :

Name	Type	Optional	Default value
date	`moment.Moment`	No	`this.selected \|\| this.date`

Returns : void

setToday

setToday()

Inherited from MonthComponent

Defined in MonthComponent:339

Sets the current selected date to today.

Returns : void

today

today()

Inherited from MonthComponent

Defined in MonthComponent:334

Sets the current viewed date to today.

Returns : void

Properties

stats

Type : literal type

Defined in packages/calendar/src/lib/heatmap/heatmap.component.ts:14

stats of current timestamps

Public cells

Type : Array<Day>

Inherited from MonthComponent

Defined in MonthComponent:67

The cells containing the days

Protected changeSpan

Type : Subject<moment.Moment[]>

Default value : new Subject()

Inherited from MonthComponent

Defined in MonthComponent:75

dragged

Type : any

Inherited from MonthComponent

Defined in MonthComponent:35

Public formatted

Type : string

Inherited from MonthComponent

Defined in MonthComponent:65

The current month as string

Public monthFormat

Type : string

Default value : 'MMMM YYYY'

Inherited from MonthComponent

Defined in MonthComponent:69

Format for month in header

move

Type : boolean

Inherited from MonthComponent

Defined in MonthComponent:36

todayMoment

Default value : moment()

Inherited from MonthComponent

Defined in MonthComponent:37

import { Component, Input, OnChanges, OnInit } from '@angular/core';
import moment from 'moment-es6';
import { MonthComponent } from '../calendar/month.component';
/**
 * Displays a heatmap
 * <example-url>https://components.entrecode.de/ui/datetime?e=1</example-url>
 */
@Component({
  selector: 'ec-heatmap',
  templateUrl: './heatmap.component.html',
})
export class HeatmapComponent extends MonthComponent implements OnInit, OnChanges {
  /** stats of current timestamps */
  stats: { count: number; dayspan: number; density: number; timespan: moment.Moment[] };
  /** Array of timestamps that should be turned into a heatmap */
  @Input() timestamps: string[] = [];
  /** If true, the timespan of the first given timestamps will be kept, no matter what follows */
  @Input() keepTimespan = false;

  ngOnInit() {
    this.updateHeatmap();
  }

  /** When changing the date or selected input, the calendar will update its view to display the month containing it. */
  ngOnChanges(change) {
    if (change.timestamps && this.timestamps) {
      const sorted = this.timestamps.sort((a, b) => {
        return moment(a).isAfter(moment(b)) ? -1 : 1;
      });
      this.timespan =
        this.keepTimespan && this.timespan ? this.timespan : [moment(sorted[sorted.length - 1]), moment(sorted[0])];
      this.stats = this.statsInfo();
      this.updateHeatmap();
    }
  }

  toShade(count, max = 100, digits = 2) {
    if (max === 0) {
      return 0;
    }
    const grain = Math.pow(10, digits);
    return (Math.floor((count / max) * grain) / grain) * 100;
  }

  getHeatMap(timestamps) {
    const dates = timestamps
      .map((timestamp) =>
        moment(timestamp)
          .startOf('day')
          .toISOString(),
      )
      .reduce(
        (counts, date) =>
          Object.assign(counts, {
            [date]: ++counts[date] || 0,
          }),
        {},
      );
    const max = dates[Object.keys(dates).sort((a, b) => (dates[a] > dates[b] ? -1 : 1))[0]];
    return Object.keys(dates).reduce((classes, date) => {
      return Object.assign(classes, {
        [date]: Math.floor((dates[date] / max) * 100),
      });
    }, {});
  }

  /** Returns json with additional infos about the timestamps */
  statsInfo(digits = 3) {
    const dayspan = this.timespan[1].diff(this.timespan[0], 'days');
    return {
      timespan: this.timespan,
      count: this.timestamps.length,
      dayspan,
      density: Math.floor((this.timestamps.length / dayspan) * Math.pow(10, digits)) / Math.pow(10, digits),
    };
  }

  updateHeatmap() {
    if (!this.timestamps) {
      this.heatmap = [];
      return;
    }
    this.heatmap = this.getHeatMap(this.timestamps);
  }
}

<div class="ec-heatmap">
  <ec-calendar
    (spanChanged)="spanChanged.emit($event)"
    [heatmap]="heatmap"
    [timespan]="timespan"
    [date]="date"
    [disabled]="disabled"
    [disableDrag]="disableDrag"
    [disableDragAnywhere]="disableDragAnywhere"
    [disableDragStart]="disableDragStart"
    [disableDragEnd]="disableDragEnd"
    [selectSpan]="selectSpan"
  ></ec-calendar>
</div>

Legend

Html element

Component

Html element with directive

File

Description

Extends

Implements

Metadata

Index

Properties

Methods

Inputs

Outputs

Inputs

Outputs

Methods

Properties

result-matching ""

No results matching ""