4.0.0 • Published 4 years ago

@terminus/ui-cohort-date-range v4.0.0

Weekly downloads
25
License
MIT
Repository
github
Last release
4 years ago

CI/CD Status Codecov MIT License
NPM version Library size

Table of Contents

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-cohort-date-range

CSS imports

In your top-level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Pass in the cohorts:

<ts-cohort-date-range [cohorts]="cohorts"></ts-cohort-date-range>
cohorts: TsDateCohort[] = [
  {
    display: 'Last full year',
    range: {
      start: new Date(2018, 1, 1),
      end: new Date(2018, 12, 31),
    },
  },
  {
    display: 'Last full month',
    range: {
      start: new Date(2019, 8, 1),
      end: new Date(2019, 8, 31),
    },
  },
];

The keys inside the passed in cohorts object must match the TsDateCohort interface:

{
  active?: boolean;
  display: string,
  range: {
    start: Date | string,
    end: Date | string,
  }
}

Defaulting to a specific cohort

The first TsDateCohort that has the active key set to true will be selected by default.

cohorts: TsDateCohort[] = [
  {
    display: 'Last full year',
    range: {
      start: new Date(2018, 1, 1),
      end: new Date(2018, 12, 31),
    },
  },
  {
    active: true, // Now this cohort will be selected on load!
    display: 'Last full month',
    range: {
      start: new Date(2019, 8, 1),
      end: new Date(2019, 8, 31),
    },
  },
];

Event driven

Anytime the date range is changed, cohortDateRangeChanged is emitted.

<ts-cohort-date-range
  [cohorts]="myCohorts"
  (cohortDateRangeChanged)="printRange($event)"
></ts-cohort-date-range>

allowCustomDates

When allowCustomDates is set to false, the date range is readonly (this defaults to true).

<ts-cohort-date-range
  [allowCustomDates]="false"
  [cohorts]="cohorts"
></ts-cohort-date-range>

NOTE: When set to true, a Custom Dates option will be added to the dropdown.

Date range boundaries

To define bounds for custom date selection, pass in a valid Date to each of these @Inputs:

  1. endMaxDate
  2. endMinDate
  3. startMaxDate
  4. startMinDate
<ts-cohort-date-range
  [startMinDate]="startDate1"
  [startMaxDate]="startDate2"
  [endMinDate]="endDate1"
  [endMaxDate]="endDate2"
></ts-cohort-date-range>
startDate1 = new Date(2017, 1, 1);
startDate2 = new Date(2017, 8, 1);
endDate1 = new Date(2017, 1, 2);
endDate2 = new Date(2017, 8, 2;

Disable

The entire component can be disabled:

<ts-cohort-date-range [isDisabled]="true"></ts-cohort-date-range>

Error message

A custom error message can be displayed:

<ts-cohort-date-range errorMessage="My error message!"></ts-cohort-date-range>

Test Helpers

Some helpers are exposed to assist with testing. These are imported from @terminus/ui-cohort-date-range/testing;

[source]

Function
getFormFieldElement
getCohortDebugElement
tslib@angular-devkit/schematics@schematics/angular
@zalastax/nolb-_ter@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905
4.0.1

4 years ago

4.0.0

5 years ago

3.0.1

5 years ago

3.0.0

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.2

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.13

5 years ago

1.0.12

5 years ago

1.0.11

5 years ago

1.0.10

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago

0.0.1

5 years ago