Text

Text attributes are string attributes that have mostly uniquely different values, such as names or locations.

Statistics

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

export interface ITextStats extends ICommonStats {
  /**
   * number of unique text items
   */
  readonly unique: number;
  /**
   * top 10 most frequent text items sorted descending by count
   */
  readonly mostFrequent: readonly { value: string; count: number }[];
  /**
   * converts a given string to a label
   */
  format: (v: string) => string;
}

see ITextStats 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 textStatsGenerator(options: TextStatsOptions = {}): (arr: readonly string[]) => ITextStats;

see textStatsGenerator API Docs

Example

Live Editor

// import { textStatsGenerator } from '@lineup-lite/components'; function Example() { const compute = textStatsGenerator(); const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j']; const stats = compute(data); return <pre>{JSON.stringify(stats, null, 2)}</pre>; }

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

function Example() {
  const compute = textStatsGenerator();
  const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j'];
  const stats = compute(data);

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

Result

Loading...

Visualization

Cell

TextLabel React component

Live Editor

// import { textStatsGenerator, TextLabel } from '@lineup-lite/components'; function Example() { const compute = textStatsGenerator(); const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j']; const stats = compute(data); return <TextLabel value="a" format={stats.format} />; }

// import { textStatsGenerator, TextLabel } from '@lineup-lite/components';

function Example() {
  const compute = textStatsGenerator();
  const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j'];
  const stats = compute(data);

  return <TextLabel value="a" format={stats.format} />;
}

Result

Loading...

Aggregation

Histogram React component

Live Editor

// import { textStatsGenerator, TextSummary } from '@lineup-lite/components'; function Example() { const compute = textStatsGenerator(); const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j']; const stats = compute(data); return <TextSummary s={stats} />; }

// import { textStatsGenerator, TextSummary } from '@lineup-lite/components';

function Example() {
  const compute = textStatsGenerator();
  const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j'];
  const stats = compute(data);

  return <TextSummary s={stats} />;
}

Result

Loading...

Interactive Summary

TextSummary React component

Live Editor

// import { textStatsGenerator, FilterTextSummary } from '@lineup-lite/components'; function Example() { const compute = textStatsGenerator(); const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j']; const stats = compute(data); const [filterValue, setFilter] = React.useState(null); const filtered = filterValue ? data.filter((d) => d.startsWith(filterValue)) : data; const filteredStats = compute(filtered); return ( <FilterTextSummary s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} summary /> ); }

// import { textStatsGenerator, FilterTextSummary } from '@lineup-lite/components';

function Example() {
  const compute = textStatsGenerator();
  const data = ['a', 'a', 'a', 'b', 'c', 'e', 'f', 'g', 'g', 'h', 'j'];
  const stats = compute(data);

  const [filterValue, setFilter] = React.useState(null);
  const filtered = filterValue ? data.filter((d) => d.startsWith(filterValue)) : data;
  const filteredStats = compute(filtered);

  return (
    <FilterTextSummary s={filteredStats} preFilter={stats} filterValue={filterValue} setFilter={setFilter} summary />
  );
}

Result

Loading...