Auditorium UI: Emphasise weekends better

[hendr-ik]

This is the way we currently emphasise weekends in our Plotly bar charts - simple numbers, only slightly larger, italicized:

We consider this not obvious enough and woud like to update it this way:

Ideally it should be implemented directly in Plotly without extra css. The relevant component is this one:
https://github.com/offen/offen/blob/master/auditorium/src/views/components/auditorium/chart.js

[haridevelops]

Can I work on it ? If so please assign it to me.

[hendr-ik]

@haridevelops let me know if there are any questions

[prijeshb]

@hendr-ik Should I take this, seems that no progress further by other person.

[m90]

Thanks @prijeshb , let's maybe check with @haridevelops if they still plan to work on this? Any input from your side?

[prijeshb]

@hendr-ik Should I take this, seems that no progress further by other person.

Also, looked documentation but didn't found any relevant attribute to set background color for ticks

[m90]

@prijeshb yeah, this will require some creative use of Plotly (negative bars maybe?) and is not something that is supported out of the box as-is. Maybe there is some other solution we don't know of yet?

Let me know if you want to work on this in any case so I can assign you. Thanks.

[haridevelops]

@hendr-ik
I did look at the plotly documentation, we can provide bgcolor for all the ticks but again we need to go through all the logic that has ran for ticktext.
The way chart.js weekend logic is written, simple css fix would work right? (the font-style: italic is handled inline css only, we can replace with background-color css.)

[m90]

@haridevelops When I try applying a background-color to the span here:

offen/auditorium/src/views/components/auditorium/chart.js

Lines 60 to 62 in 0565713

	if (isWeekend(date)) {
	return `<span style="font-style: italic; color: ${tickColorFade}; font-size: 130%">${result}</span>`
	}

it doesn't really display any background for me. Is there something needed in addition to that?

[haridevelops]

@m90 I have locally up the code.
Plot is basically rendering SVG. The problem here is tspan tag. After research, i realise that tspan tag does not support background color. Refer here: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan (there is no presentation attribute supporting background)

I would like to recommend different aspect here emphasising weekend. Thoughts?

[m90]

@haridevelops Thanks for doing that research. It's tricky business indeed.

I would like to recommend different aspect here emphasising weekend. Thoughts?

Thing is we need to / want to comply with WACG 2.1 Accessibility Guidelines here, so styling this accordingly is a complicated topic. @hendr-ik is on holidays for a few more days, but I would suggest he follows up on this with you once he's back. Does this sound like a plan?

[haridevelops]

perfect @m90

[hendr-ik]

@haridevelops Thanks again for your efforts and the suggestion. Unfortunately, we cannot use green for highlighting because it is only used in connection with links in our UI. I think we need to dig deeper into Plotly and create a design that fits the possibilities.

[hendr-ik]

@haridevelops Please do not hesitate to submit your recommendation as a pull request in order to be officially recognized. Unfortunately, for the reasons mentioned above, we will not be able to merge it.