Date

Statistics

LineUp-lite computes the following statistics for a date attribute:

/**
 * on which granularity level is the histogram computed
 */
export declare type DateHistGranularity = 'year' | 'month' | 'day' | 'decade';

export interface IDateStats extends INumericStats<Date> {
  /**
   * the granularity in which the histogram is computed
   */
  readonly histGranularity: DateHistGranularity;
}

see IDateStats API Docs

Generator Function

The stats generator function has the following signature. It returns a function that can be used to compute statistics for a given array.

export function dateStatsGenerator(options: DateStatsOptions = {}): (arr: readonly (Date | null)[]) => IDateStats;

see dateStatsGenerator API Docs

Example

Live Editor

// import { dateStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = dateStatsGenerator(); const data = [ new Date(2008, 11, 1), new Date(2008, 8, 1), new Date(2008, 4, 1), new Date(2009, 2, 1), new Date(2010, 9, 1), new Date(2010, 1, 1), new Date(2018, 1, 1), ]; const stats = compute(data); return <pre>{JSON.stringify(stats, null, 2)}</pre>; }

// import { dateStatsGenerator } from '@lineup-lite/components';

function Example() {
  const compute = dateStatsGenerator();
  const data = [
    new Date(2008, 11, 1),
    new Date(2008, 8, 1),
    new Date(2008, 4, 1),
    new Date(2009, 2, 1),
    new Date(2010, 9, 1),
    new Date(2010, 1, 1),
    new Date(2018, 1, 1),
  ];
  const stats = compute(data);

  return <pre>{JSON.stringify(stats, null, 2)}</pre>;
}

Result

{
  "missing": 0,
  "items": [
    "2008-12-01T00:00:00.000Z",
    "2008-09-01T00:00:00.000Z",
    "2008-05-01T00:00:00.000Z",
    "2009-03-01T00:00:00.000Z",
    "2010-10-01T00:00:00.000Z",
    "2010-02-01T00:00:00.000Z",
    "2018-02-01T00:00:00.000Z"
  ],
  "flatMissing": 0,
  "flatItems": [
    "2008-12-01T00:00:00.000Z",
    "2008-09-01T00:00:00.000Z",
    "2008-05-01T00:00:00.000Z",
    "2009-03-01T00:00:00.000Z",
    "2010-10-01T00:00:00.000Z",
    "2010-02-01T00:00:00.000Z",
    "2018-02-01T00:00:00.000Z"
  ],
  "depth": 1,
  "flatCount": 7,
  "hist": [
    {
      "x0": "2008-01-01T00:00:00.000Z",
      "x1": "2009-01-01T00:00:00.000Z",
      "label": "2008",
      "color": "rgba(0,0,0,0.25)",
      "items": [
        "2008-12-01T00:00:00.000Z",
        "2008-09-01T00:00:00.000Z",
        "2008-05-01T00:00:00.000Z"
      ],
      "count": 3
    },
    {
      "x0": "2009-01-01T00:00:00.000Z",
      "x1": "2010-01-01T00:00:00.000Z",
      "label": "2009",
      "color": "rgba(0,0,0,0.25)",
      "items": [
        "2009-03-01T00:00:00.000Z"
      ],
      "count": 1
    },
    {
      "x0": "2010-01-01T00:00:00.000Z",
      "x1": "2011-01-01T00:00:00.000Z",
      "label": "2010",
      "color": "rgba(0,0,0,0.25)",
      "items": [
        "2010-10-01T00:00:00.000Z",
        "2010-02-01T00:00:00.000Z"
      ],
      "count": 2
    },
    {
      "x0": "2011-01-01T00:00:00.000Z",
      "x1": "2012-01-01T00:00:00.000Z",
      "label": "2011",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2012-01-01T00:00:00.000Z",
      "x1": "2013-01-01T00:00:00.000Z",
      "label": "2012",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2013-01-01T00:00:00.000Z",
      "x1": "2014-01-01T00:00:00.000Z",
      "label": "2013",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2014-01-01T00:00:00.000Z",
      "x1": "2015-01-01T00:00:00.000Z",
      "label": "2014",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2015-01-01T00:00:00.000Z",
      "x1": "2016-01-01T00:00:00.000Z",
      "label": "2015",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2016-01-01T00:00:00.000Z",
      "x1": "2017-01-01T00:00:00.000Z",
      "label": "2016",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2017-01-01T00:00:00.000Z",
      "x1": "2018-01-01T00:00:00.000Z",
      "label": "2017",
      "color": "rgba(0,0,0,0.25)",
      "items": [],
      "count": 0
    },
    {
      "x0": "2018-01-01T00:00:00.000Z",
      "x1": "2019-01-01T00:00:00.000Z",
      "label": "2018",
      "color": "rgba(0,0,0,0.25)",
      "items": [
        "2018-02-01T00:00:00.000Z"
      ],
      "count": 1
    }
  ],
  "histGranularity": "year",
  "median": "2010-02-01T00:00:00.000Z",
  "maxBin": {
    "x0": "2008-01-01T00:00:00.000Z",
    "x1": "2009-01-01T00:00:00.000Z",
    "label": "2008",
    "color": "rgba(0,0,0,0.25)",
    "items": [
      "2008-12-01T00:00:00.000Z",
      "2008-09-01T00:00:00.000Z",
      "2008-05-01T00:00:00.000Z"
    ],
    "count": 3
  },
  "min": "2008-05-01T00:00:00.000Z",
  "max": "2018-02-01T00:00:00.000Z",
  "count": 7
}

Visualization

Cell

DateLabel React component

Live Editor

// import { dateStatsGenerator, DateLabel } from '@lineup-lite/components'; function Example() { const compute = dateStatsGenerator(); const data = [ new Date(2008, 11, 1), new Date(2008, 8, 1), new Date(2008, 4, 1), new Date(2009, 2, 1), new Date(2010, 9, 1), new Date(2010, 1, 1), new Date(2018, 1, 1), ]; const stats = compute(data); return ( <div> <DateLabel value={data[0]} format={stats.format} /> <DateLabel value={data[1]} format={stats.format} /> <DateLabel value={data[2]} format={stats.format} /> </div> ); }

// import { dateStatsGenerator, DateLabel } from '@lineup-lite/components';

function Example() {
  const compute = dateStatsGenerator();
  const data = [
    new Date(2008, 11, 1),
    new Date(2008, 8, 1),
    new Date(2008, 4, 1),
    new Date(2009, 2, 1),
    new Date(2010, 9, 1),
    new Date(2010, 1, 1),
    new Date(2018, 1, 1),
  ];
  const stats = compute(data);

  return (
    <div>
      <DateLabel value={data[0]} format={stats.format} />
      <DateLabel value={data[1]} format={stats.format} />
      <DateLabel value={data[2]} format={stats.format} />
    </div>
  );
}

Result

12/1/2008

9/1/2008

5/1/2008

Aggregation

Histogram React component

Live Editor

// import { dateStatsGenerator, Histogram } from '@lineup-lite/components'; function Example() { const compute = dateStatsGenerator(); const data = [ new Date(2008, 11, 1), new Date(2008, 8, 1), new Date(2008, 4, 1), new Date(2009, 2, 1), new Date(2010, 9, 1), new Date(2010, 1, 1), new Date(2018, 1, 1), ]; const stats = compute(data); return <Histogram s={stats} style={{ height: 100 }} />; }

// import { dateStatsGenerator, Histogram } from '@lineup-lite/components';

function Example() {
  const compute = dateStatsGenerator();
  const data = [
    new Date(2008, 11, 1),
    new Date(2008, 8, 1),
    new Date(2008, 4, 1),
    new Date(2009, 2, 1),
    new Date(2010, 9, 1),
    new Date(2010, 1, 1),
    new Date(2018, 1, 1),
  ];
  const stats = compute(data);

  return <Histogram s={stats} style={{ height: 100 }} />;
}

Result

Interactive Summary

FilterRangeHistogram React component

Live Editor

// import { dateStatsGenerator, FilterRangeHistogram } from '@lineup-lite/components'; function Example() { const compute = dateStatsGenerator(); const data = [ new Date(2008, 11, 1), new Date(2008, 8, 1), new Date(2008, 4, 1), new Date(2009, 2, 1), new Date(2010, 9, 1), new Date(2010, 1, 1), new Date(2018, 1, 1), ]; const stats = compute(data); const [filterValue, setFilter] = React.useState(null); const filtered = filterValue ? data.filter( (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1]) ) : data; const filteredStats = dateStatsGenerator({ min: stats.min, max: stats.max })(filtered); return ( <FilterRangeHistogram s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} summary style={{ height: 100 }} /> ); }

// import { dateStatsGenerator, FilterRangeHistogram } from '@lineup-lite/components';

function Example() {
  const compute = dateStatsGenerator();
  const data = [
    new Date(2008, 11, 1),
    new Date(2008, 8, 1),
    new Date(2008, 4, 1),
    new Date(2009, 2, 1),
    new Date(2010, 9, 1),
    new Date(2010, 1, 1),
    new Date(2018, 1, 1),
  ];
  const stats = compute(data);

  const [filterValue, setFilter] = React.useState(null);
  const filtered = filterValue
    ? data.filter(
        (d) => (filterValue[0] == null || filterValue[0] <= d) && (filterValue[1] == null || d <= filterValue[1])
      )
    : data;
  const filteredStats = dateStatsGenerator({ min: stats.min, max: stats.max })(filtered);

  return (
    <FilterRangeHistogram
      s={filteredStats}
      preFilter={stats}
      filterValue={filterValue}
      setFilter={setFilter}
      summary
      style={{ height: 100 }}
    />
  );
}

Result