0. Installation 1. Getting Started 2. Importing Data 3. Filtering Event value filter Group size filter Grouping amount filter Event contains all actors filter Event contains some actors filter Custom Event filter Custom Actor filter 4. Layout 5. Advanced settings 6. Data structure 7. FAQ

Filtering

It is possible to filter the events and actors of a Storygram in different ways.

Event value filter

Filters all events outside the range defined in the variable filterEventValue.

filterEventValue: [number | string | undefined, number | string | undefined];

Default value: [Number.MIN_SAFE_INTEGER, Number.MAX_SAFE_INTEGER]

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterEventValue: [1, undefined],
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterEventValue: [1, undefined],
  }}
></StorygramGUI>

Group size filter

Filters all events containing less or more actors than defined in the range in the variable filterGroupSize.

filterGroupSize: [number | undefined, number | undefined];

Default value: [0, Number.MAX_SAFE_INTEGER]

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupSize: [3, undefined],
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupSize: [3, undefined],
  }}
></StorygramGUI>

Grouping amount filter

Filters all actors that are grouped less or more times than defined in the range in the variable filterGroupAmt. The hidden actors are visualizable by clicking on the red number on top of the group.

filterGroupAmt: [number | undefined, number | undefined];

Default value: [0, Number.MAX_SAFE_INTEGER]

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupAmt: [2, undefined],
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterGroupAmt: [2, undefined],
  }}
></StorygramGUI>

Event contains all actors filter

Filters all events that don't include all actors specified in the variable mustContain.

mustContain: string[];

Default value: []

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    mustContain: ['a', 'b'],
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    mustContain: ['a', 'b'],
  }}
></StorygramGUI>

Event contains some actors filter

// check if the event contains one of the given actors shouldContain: string[];

Filters all events that don't include at least one of the actors specified in the variable shouldContain.

shouldContain: string[];

Default value: []

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    shouldContain: ['c', 'e'],
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'] },
    { event: 1, actors: ['d', 'b', 'e'] },
    { event: 2, actors: ['d', 'a'] },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    shouldContain: ['c', 'e'],
  }}
></StorygramGUI>

Custom Event filter

Customizable filter callback that must return a boolean value, if true the event is visible, if false it is filtered.

filterEventCustom: (event: Event) => boolean;

Default value: () => true

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'], type: 'one' },
    { event: 1, actors: ['d', 'b', 'e'], type: 'two' },
    { event: 2, actors: ['d', 'a'], type: 'one' },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterEventCustom: event => event.data.type === 'one',
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { event: 0, actors: ['a', 'b', 'c'], type: 'one' },
    { event: 1, actors: ['d', 'b', 'e'], type: 'two' },
    { event: 2, actors: ['d', 'a'], type: 'one' },
  ]}
  config={{
    dataFormat: 'array',
    eventField: 'event',
    actorArrayField: 'actors',
    filterEventCustom: event => event.data.type === 'one',
  }}
></StorygramGUI>

Custom Actor filter

Customizable filter callback that must return a boolean value, if true the actor is visible, if false it is filtered.

filterActorCustom: (event: Event) => boolean;

Default value: () => true

<StorygramGUI
  data={[
    { actor: 'a', start: 0, end: 2, type: 'one' },
    { actor: 'b', start: 1, end: 2, type: 'one' },
    { actor: 'c', start: 0, end: 3, type: 'two' },
  ]}
  config={{
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end',
    filterActorCustom: actor => actor.data.type === 'one',
  }}
></StorygramGUI>

<StorygramGUI
  data={[
    { actor: 'a', start: 0, end: 2, type: 'one' },
    { actor: 'b', start: 1, end: 2, type: 'one' },
    { actor: 'c', start: 0, end: 3, type: 'two' },
  ]}
  config={{
    dataFormat: 'ranges',
    actorField: 'actor',
    startField: 'start',
    endField: 'end',
    filterActorCustom: actor => actor.data.type === 'one',
  }}
></StorygramGUI>