Skip to content

pat-family-tree #1257

@emmanuelkaufmann

Description

@emmanuelkaufmann

The framework that we use is Family Chart.

Proposed properties:

Done Option Default Values Description
[x] search CSS Selector
[x] initial-centre/initial-center Card ID Centres that card.
[ ] centre auto auto / manual When ‘auto’, the card that is expanded by the user will be centred, together with its expansion.
[x] initial-zoom Number Initial zoom level.
[x] zoom auto auto / manual When ‘auto’, the pattern will zoom in on the centred card. When a user expands a part of the tree, the expansion will be fitted.
[x] zoom-in CSS Selector
[x] zoom-out CSS Selector
[x] fit CSS Selector
[ ] layout vertical horizontal / vertical
[x] siblings show show / hide
[ ] popup-template CSS Selector
[ ] mini-tree hide show / hide
[x] transition-duration 200ms Duration (s or ms) Duration in milliseconds.
[ ] card-width 300 Number (pixels) Card width in pixels.
[ ] card-height auto auto / Number (pixels)

Main concerns:

  • Siblings. We do not want to hide the sibling, when expanding part of the tree. The property 'siblings' is intended to steer this.
  • Initial zoom.
  • Initial centre.
  • Card width and height.
  • Expand buttons. If the framework supports this: We would like to have a separate element on each card (button) for expanding the parents. Similarly another button for expanding the children, but this button should probably be on the centre joint of the lines. If not supported out of the box, let's discuss alternatives. This instead of having the entire card clickable.
  • Search
  • Zoom

Available aspects of the library that we can manipulate

Options (some of many):

Questions:

  • Mark or Highlight where I have clicked or when linked from outside?

The chart library allows us to change the following aspects:

  • search (property to specify search field)
  • set person as main (centers that person and blends out siblings, functionality already available)(Filter on main line and zoom)
  • zoom (functionality already available via scrolling by mouse/touchpad)
  • zoom to specific card (conflicts with set person as main)
  • fit tree (button with circle)
  • animation transition time (property)
  • horizontal/vertical spacing is already implemented. (property)
  • toggle visibility of siblings (
  • popup for more details (link to profile)
  • show a mini tree

Optional

  • dim cards
  • horizontal layout

What we want:

  • Click on card: Center

Which Template Attributes?

Already existing are:

  • avatar_label
  • avatar_url
  • first_name
  • last_name
  • description (Could be used to generically combine other properties)
  • gender
  • children

New to add?

Which properties should the pattern fill in the card template?

  • Birth date
  • Link to more info?
  • title
  • displayname
  • nationality
  • nickname
  • death date?
  • address
  • phone
  • email
  • job (job title)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions