Added legend, fixed label cut-off issue, and changed default threshold, colour function, font sizes, ...

[mariamarab]

Changes made:

• Added a legend displaying the colours for positive and negative correlation
• Fixed the label cutoff issue (the chart will be re-sized by @innovate-invent)
• Fixed the default threshold to be 0.0, since the 0.4 default threshold was causing issues. It is also more intuitive to display the entire data upon uploading, since not everyone would immediately know that we cut off some of their data.
• Fixed arc width to be a function of font size
• Fixed chart height to be a function of the maximum label width
• Fixed link colour function

[mariamarab]

@innovate-invent I'm using the positiveCorrelationColor and negativeCorrelationColor props, but it seems like they don't trigger an update on the legend

[innovate-invent]

@innovate-invent I'm using the positiveCorrelationColor and negativeCorrelationColor props, but it seems like they don't trigger an update on the legend

You need to add an explicit @watch function similar to this that watches both 'positiveCorrelationColor' and 'negativeCorrelationColor' and updates the legend.

@Watch('positiveCorrelationColor')
@Watch('negativeCorrelationColor')
updateLegend(): void {
...
}

See https://github.com/kaorun343/vue-property-decorator#Watch

[innovate-invent]

Would you like me to make that change?

[mariamarab]

Would you like me to make that change?

That would be great!

[github-actions]

Pull request has been successfully built and is ready for review at https://mariam-414429337-globecorr.stage.brinkmanlab.ca/

[innovate-invent]

I believe the tooltip for the labels hasn't been implemented for when they are truncated.
Was this feature dropped? or in a future PR?