SVG with interactive tooltip

[djay]

• [x] get the patch that represents the main drawing area (seems like its always patch_2?)
• [x] get data of dates and values into the JS indexed by x?
• [x] alter the values in tool tip based on x
• [x] get colours from legend
• [x] construct a nice legend/tooltip in SVG (can't use matplotlib api because it renders all text as shapes so would be hard to alter it dynamically)
• [x] match font and font size
• [x] script to replace all images in markdown with <object data=...>. Can sill keep images as backdown if someone turns off svg.
• [x] draw vertical like at x
• [x] draw coloured dots at right values (optional)?
• [x] show both avg and actual values
• [x] dynamically resort based on order of lines?
• [x] put in the labels from legend and handle if they are too long
• [x] flip the tooltip left or right so isn't offscreen
• [ ] move up or down based on values to not obscure the lines - (see google plots. I think it has it below unless the top value is in the bottom 50%?)
• [x] hide legend when showing tooltip
• [ ] show % values too?
• [x] hover should work anywhere on the plot

[djay]

Maybe a format like this?

*7 May 2021* (7 day average)
o PCR tests Daily
    72345 (71k) - 23%
o ATK rapid tests (free NHSO)
    45343 (42k) - 16%

% would only show when there is a % plot below a stacked area plot

Is this obvious enough to know which is the actual value and which is the avg?

[modiholodri]

@djay Two lines per tooltip entry might be too much and mix lines and patches makes the tooltip wrong.

[djay]

@modiholodri you are right two lines won't work. and wrapping to 2 columns doesn't solve it. And we also need to make the font bigger as its currently too small and this will make it even worse.

So I guess its one line but how to do that nicely given there is no text wrapping is svg?

One way is to try doing it with embedded HTML which might be easier regardless.

Or maybe try putting the numbers between the dot and the label? if we can left align the labels so its a table it would be nice but again I think html is only way to do that simply?

[djay]

@modiholodri you can see on this one that the two lines makes it harder to read even when small numbers

I think if we have the dots then its better to have the numbers and text in white since its much easier to read. and matching the colours is less important since we have the labels there anyway. the main reason you are hovering is to get the exact number not use it as a legend I think?

[djay]

@modiholodri here is another example. It works ok with a table. I guess it makes more sense for the numbers to be on the right of the label like this

[modiholodri]

@djay I'll make a new version, probably during the weekend. Had a giant dot in there before (see picture above) but maybe it was too big and did not look good. There is also another quite serious issue, with browsers in night mode (might be experimental, but I am for sure not the only one), because everything will be white. I have the same issue on my mobile and desktop... And that would favor colored text, because the light grey text is nearly invisible...

[djay]

@modiholodri the dots looked fine I think. The white background creates many more problems so that needs to be fixed regardless. On my mobile I don't get it. I wonder where its coming from? Maybe we have to manually set a fill colour on the back or even add a background element?

[djay]

@modiholodri switched it to using html table which works ok. But haven't got the positioning right and show how now works not embedded over the whole plot but embedded it only works on the left. Tried to fix the font. not sure why that didn't work. haven't tested the background yet.

[djay]

@modiholodri did a few updates. it's almost there. It now sorts based on value

[djay]

Bugs

• [x] stacked plots
• [x] bar charts
• [x] flip placement
• [ ] negative values on deaths prov
• [x] exceptions on some vaccination plots
• [x] undefined on unknowns
• [x] nulls should have no dot
• [x] tests per area no legend
• [ ] bar charts date calc need to factor in margins at ends.
• [ ] plot where data finish early wrong date placement - https://627e46bc6b4e4f63060a89a8--practical-ritchie-cca141.netlify.app/outputs/cases_unknown_increasing_3.svg
• [ ] dots left behind
• [ ] legend still hidden if exit via top or bottom