Visualize distribution of categories

[flekschas]

Currently, we only display the existence of a category within a pile as a color tag/badge. It'd be awesome to extend the pile label to show the distribution of categories as a barchart of color tags.

This should easily be possible by summing up the occurrences of categories and scaling the width/height of the pile label according to the relative distribution of categories across a pile.

When pileLabelStackAlign is horizontal we should adjust the height of the pile label such that the biggest fraction is drawn with pileLabelHeight and all others are scaled down accordingly.

When pileLabelStackAlign is vertical we should adjust the width of the pile label such that the biggest fraction is drawn with the full width of the pile and all others are scaled down accordingly.

To achieve this, I suggest adding a new property called pileLabelSizeAggregator. The property should be a number, string, or function and receive the sum of labels and return an array of relative sizes.

The default values would be:

piling.set('pileLabelSizeAggregator', 1);

I.e., all labels have the same size. (Note we should probably expand this to histogram => histogram.map(() => 1) so we can later always assume we're working with a function)

For string values we can expand the property as follows:

switch (pileLabelSizeAggregator) {
  case 'histogram':
    return histogram =>  {
      const maxValue = max(histogram)
      return histogram.map(x => x / maxValue)
    }

  default:
    return () => 1; // i.e., just the default from above
}

Functions are just stored as function. Their signature must be:

piling.set('pileLabelSizeAggregator', (histogram) => {
  // Do stuff
  return arrayofRelativeSizes;
});