scale-section

description

scale-section component for displaying grouped, sorted and filtred scales

Updated 3.3.0:

Styles for animation of .collapse-scales using classes used by react-transition-state-library

During the 'entering'-phase of the animation a height of ({{hidden-scales}} * 36)px needs to be added as inline-style to .collapse-scales for the animaiton to work (see usage-code)

In the 'entered'-phase the height inline-style on .collapse-scales needs to be unset (see usage-code)

Updated 3.1.0:

Added KMU-Vital example

Updated 2.2.0:

Comparison in separate component /organisms/scale-section-compare.

Updated 2.1.0:

Complete rework of component.

Component remains WIP as in the next release the comparsion of filters ("Skalen vergleichen") will be added.

Sorting and display options work. For sorting option "Schlechteste" & "Beste" the standard view is collapsed.

In bgm results if "Mitarbeiterverteilung" or "Veränderung" are selected, the example always shows an expanded view. In production, those radio-buttons should only change the way the scales look and not if the group is expanded/collapsed.

Normaly the collapsed view shows the 5 best (green) and 5 worst (red and yellow) scales. If there are less than 5 scales in one of these groups, more of the other are showed and the separator is moved (e.g.: 3 best and 7 worst).

There should never be a red or yellow scale on the same side of the separator as "Bester Skalenwert" and never a green scale on the same side as "Schlechtester Skalenwert".

Updated 2.0.0:

Status change to WIP as it's not usable with the new scales. A new version will follow in next release.

Examples and usage-code removed.