Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom order of items in legend #625

Closed
mtwestra opened this issue Mar 1, 2017 · 14 comments
Closed

Custom order of items in legend #625

mtwestra opened this issue Mar 1, 2017 · 14 comments
Labels
client visualisations

Comments

@mtwestra
Copy link
Contributor

mtwestra commented Mar 1, 2017

Context

Currently, items in a legend are shown in alphabetical order. However, this does not always make sense, especially with ordinal data types, as shown below.

screen shot 2017-03-01 at 10 02 58

Proposed solution

Proposed solution is to allow users to change the order of the items in the legend, for example as part of the UI where they specify the colours for each item.
@janagombitova janagombitova changed the title Maps - custom order of items in legend Custom order of items in legend Mar 4, 2019
@janagombitova
Copy link

I have changed the title to not limit the improvement to only Maps. It might be valuable to change the order of items in the legend for any visualisation option.

In the image Mark shares above ideally the order of things would be from the highest risk to the lowest (or another way around).

screenshot 2019-03-04 at 11 40 20

In this case, the lowest range should go first and the highest last to make it easier to read the legend and associated colours.

@Kiarii
Copy link

Kiarii commented Sep 9, 2019

Based on the assumption that there are a ltd number of categories on which to apply a custom order, we could

  • introduce a legend-category-order-editor where the user opts for a custom order ad can use a drag and drop to arrive at the desired order as illustrated..
  • determine whether we refer to this as categories or values and word the UI accordingly
    image

tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Refactor specs
98599e8
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Refactor and extend legend specs
c5c68c0
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Pass environment data through Visualisation configs [client]
dde35ac
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Pass environment data through Visualisation configs [client]
658dbf1
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Refactor specs [backend]
cde7e15
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Refactor specs [backend]
c63a1b7
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Refactor specs [backend]
d746673
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Add react-sortable-hoc & array-move deps [client]
f7efb44
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Add sortable list to pie viz [client] [feature-flag]
627f8b2 
Uses orderedLegend feature-flag

insert into environment(id, "value") VALUES('orderedLegend', 'true'::jsonb);

||

update environment set "value"='true'::jsonb where id='orderedLegend'
@tangrammer tangrammer mentioned this issue Aug 7, 2020
Merged
5 tasks
tangrammer added a commit that referenced this issue Aug 7, 2020
@tangrammer
[#625] Load legends from aggregation and send selection to backend
2a75001
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Call aggregation API if legend order changes
602466a
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] WIP template && i18n
c961356
@janagombitova
Copy link

@tangrammer I checked all our visualisations where we have a legend and it is useful for all cases: Bar, Bubble, Map, Pie, Polar, Donut, Scatter.

I propose we start with Pie (as there is where you started) > push to production under the flag > test internally > once confirmed that all is ok add to the other visualisation types, in the same way, > push to all users without feature flag

tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Show colors
debfe58
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Remove api aggregation call on legend changes
71ec7c1
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Use feature flag orderedLegend on Pie Chart (Viewer)
4939205
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Use feature flag orderedLegend on Pie Chart (Viewer)
d5894c2
tangrammer added a commit that referenced this issue Aug 10, 2020
@tangrammer
[#625] Styles
e9b126a
tangrammer added a commit that referenced this issue Aug 18, 2020
@tangrammer
Merge pull request #2822 from akvo/issue-625-fix-env
a768505 
[#625] - fix env
@janagombitova janagombitova mentioned this issue Aug 19, 2020
Closed
tangrammer added a commit that referenced this issue Aug 19, 2020
@tangrammer
[#625] Fix order legend in map viz
a766908
tangrammer added a commit that referenced this issue Aug 19, 2020
@tangrammer
[#625] Fix order legend in map viz
f1d375e
tangrammer added a commit that referenced this issue Aug 19, 2020
@tangrammer
[#625] Reset legend order on handlePointColorColumnChange
153e767
tangrammer added a commit that referenced this issue Aug 19, 2020
@tangrammer
Merge pull request #2827 from akvo/issue-625
4be28b7 
[#625] Fix order legend in map viz
@janagombitova
Copy link

Support documentation all set: https://lumensupport.akvo.org/article/show/85897-visualisation-colours-and-legend

tangrammer added a commit that referenced this issue Aug 19, 2020
@tangrammer
[#625] WIP scatter issue
ab54f76
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Fix scatter impl
19d2721
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Fix scatter impl
a23e838
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
Merge pull request #2829 from akvo/issue-625
53a56ab 
[#625] Fix order legend scatter impl
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Add Spanish translation
6e33f81
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Add french translations
227d739
@janagombitova
Copy link

Just for sake of keeping the updates also on the issue. The map problem with the colours not matching and the scatter plot one too are now resolved. However, when the order of values is changed in other visualisations (like bar) it is not applied. WiP and needs to be handled before we can push to users.

tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Use slice (with sort) and fix pie chart
f9f5c32
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Fix bubble chart
e0b0678
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Use slice (with sort) and fix pie chart
a902a2d
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Fix bubble chart
1456029
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Add Bar fixes
c991cd9
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
[#625] Fix bubble impl
16ce9e3
tangrammer added a commit that referenced this issue Aug 20, 2020
@tangrammer
Merge pull request #2830 from akvo/issue-625
1a3cda6 
[#625] Fix order-legend impl
@janagombitova
Copy link

After another test round on dark-demo we are good to go

tangrammer added a commit that referenced this issue Aug 21, 2020
@tangrammer
[#625] Adapt order legend to StackedBarChart
604cf9c
tangrammer added a commit that referenced this issue Aug 21, 2020
@tangrammer
Merge pull request #2834 from akvo/issue-625
095ffc6 
[#625] Adapt order legend to StackedBarChart
@janagombitova janagombitova mentioned this issue Aug 24, 2020
Closed
tangrammer added a commit that referenced this issue Aug 24, 2020
@tangrammer
[#625] Remove feature flag
85f921e
tangrammer added a commit that referenced this issue Aug 25, 2020
@tangrammer
Merge pull request #2842 from akvo/issue-2840
4c3094a 
[#625] Release orderLegend feature
tangrammer added a commit that referenced this issue Aug 25, 2020
@tangrammer
[#2824][#625] I18n
c92be40
tangrammer added a commit that referenced this issue Aug 25, 2020
@tangrammer
[#2824][#625] I18n
85aab51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
client visualisations
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@mtwestra @tangrammer @finnfiddle @janagombitova @Kiarii @nadiagorchakova