Yeah, I agree these are confusing, we'll look for a better widget (I was actually hoping to use OOJS UI here but haven't had time to modularize it properly).

I have a question about the second bullet point, though. Do you mean the split values? I was hoping this was clear, do you know how it works but think it's confusing or do you mean you weren't able to figure it out at all? Let's chat about this, it's definitely the most "complicated" part of the UI and I'm not sure how to make it more intuitive. But I don't want to call this "Beta" quality until we do fix this issue.

No, I'm fine with second bullet point, I just meant to say 'there is too much happening when I click the radiobutton'. But subdivide on the chosen metric makes sense.

(I was actually hoping to use OOJS UI here but haven't had time to modularize it properly).

I think it should not be our task to modularize OOJS UI, let's please use it if it is packaged properly so we can take advantage of it out of the box.

Change 422407 had a related patch set uploaded (by Amitjoki; owner: Amitjoki):
[analytics/wikistats2@master] Bug T183185 Display of radio buttons in Wikistats 2 is somewhat confusing

https://gerrit.wikimedia.org/r/422407

Here's how it looks with the changes I've made - https://drive.google.com/file/d/1M7czDvN7Eqhf5DY6aIpDFMqyVX80oK3x/view.

Would love the feedback from the community if this looks good.

@Amitjoki feedback on commit message is a bit too verbose, do you think you could condense it a bit? Also, the "should not be done" is uncalled for. Just explaining the issue and your solution to it should be sufficient.
You can upload file to ticket so CRs can test visuals more easily.

Please see: https://www.mediawiki.org/wiki/Gerrit/Commit_message_guidelines and note structure of commit message, we try to abide by that if possible.

@Nuria if that was offensive, sorry about that :( Didn't mean to. I was just pointing out the second point of the Gerrit Commit Message Guidelines of the body section which states: Why should this change should be made? What is wrong with the current code?' Will condense and remove the inappropriate details from the commit message. Thanks for the review :]

if that was offensive, sorry about that. Didn't mean to.

No, not at all. Really. Just wanted to emphasize that the approach for commits such us this one should be about describing problems and solutions given. My mistake if it sounded harsh.

Thanks @Amitjoki , new version looks clean and quite intuitive to me.

@ezachte glad it worked out :)

Thanks @Amitjoki for taking this task.
I think that one of the major concerns with this switch-on-off breakdowns,
is that the looks of a on-off button is not appropriate for a radio-button selector.
Usually, when you see a sequence on-off buttons, it means you can switch them on or off independently.
You can switch them all on, or all off, or any combination of ons and offs.

But the main confusing thing (at least it's what I think Dan meant), is that this control is about selecting *just one option*, like a radio-button.
So, the on-off button looks is not appropriate. And we should think and discuss other options.
Please, @Milimetric correct me if I'm wrong?

@mforns I guess the confusion stems from this "on-off" switch mechanism. Please see https://semantic-ui.com/modules/checkbox.html (Radio) button. If this is enabled, then exclusivity is implicit as users have been long accustomed to the working of radio buttons, while with this on-of switch there's some confusion.

I think if we implemented it as a radio button as is mentioned in the aforementioned link, it would clear the confusion.

Would like your opinion :)

@Milimetric Any thoughts?

This seems a task that needs mocks to decide in which are the best visuals. Let's put it on backlog. One thing we for sure need to fix is the switch from green to blue, if @Amitjoki can address just that issue in his patch it will be great.

@Nuria sure. I'll remove all the other changes and will just implement that switch from green to blue for now :)

Change 425847 had a related patch set uploaded (by Amitjoki; owner: Amitjoki):
[analytics/wikistats2@master] Fix the confusing color alteration when toggling the radio button

https://gerrit.wikimedia.org/r/425847

Change 425847 merged by Mforns:
[analytics/wikistats2@master] Fix the confusing color alteration when toggling the radio button

https://gerrit.wikimedia.org/r/425847

Thanks for the blue/green fix, I think the main problem is that these look like toggle buttons while people expect radio buttons. So I agree switching to a radio button would be nice, but didn't see any that looked good.

@Millimetric what do you think of the Semantic's own Radio styling? I guess it would go well with the site's design. This is the preview I got fiddling within the developer tools: https://www.useloom.com/share/8f9e578ed6844137b4d70104d8256658

Some padding would make it look good I guess. Would like to know your thoughts :)

@Amitjoki yeah that looks good. Only detail is don't forget to set the cursor: pointer style when you hover over those. Thanks!

@Milimetric changing the hover style to pointer, yes. That can be taken care of. Is that all? If you give a go ahead, I'll submit the change :)

@Amitjoki yeah, that sounds good and I think it'll improve those buttons, I'll review when you submit, thank you!

@Amitjoki : I was wondering if you will be submitting a patch for new Semantic's radio style button, if not I can merge this with T198183 since it also involves me working around radio buttons :-]

I'll be replacing the current filter toggle switches with the new Semantic's radio style button in T198183. Moving this to 'Done' on the Analytics-Kanban board. Thanks!