simonw / django-sql-dashboard

Django app for building dashboards using raw SQL queries
https://django-sql-dashboard.datasette.io/
Apache License 2.0
437 stars 37 forks source link

Bar charts sort labels alphabetically instead of respecting their order #93

Closed simonw closed 3 years ago

simonw commented 3 years ago
SQL__select__tag__as_bar_label__count____as_bar_quantity_from__select___from_blog_entry_tags_join_blog_tag_on_blog_tag_id___blog_entry_tags_tag_id__as_results_group_by__tag__order_by_bar_quantity_desc

Pointed out here: https://twitter.com/zellyn/status/1391786830333464579

simonw commented 3 years ago

Here's why: https://github.com/simonw/django-sql-dashboard/blob/d59d01f45e46580a147a67a8291b868eae320ec6/django_sql_dashboard/templates/django_sql_dashboard/widgets/bar_label-bar_quantity.html#L32-L40

It's because of type: "nominal".

simonw commented 3 years ago

I am finding it remarkably difficult to figure out how to get Vega-Lite bar charts to respect the initial order (I remember having this same problem with datasette-vega): https://vega.github.io/vega-lite/docs/bar.html

aborruso commented 3 years ago

@simonw I do not know if it's ok for you. have you tried with "sort": {"field": "fieldname"}?

Here an example https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AEEABBBoIcguIaZJ1h2DcyGA7nRiHETOMtXLDypJhUiiA4NkgIEGgA2qCy4XBoIFBs6rJw6gBKSMo0DJFKxEiCDAmoAAxKTDSyymig1TgMmInqSLJkCUoI1WgVIMgAHmhifRCYcDhoAIwAvjMAukr+gXUghcVq0aAoBsFMaABMABwzCtuJAEJ7w2Kn5+gAwteoACwAzHcgOyAAIs8AnLMzl9EgBRZ5HIH3EAAMWeYg+wO+AHFnlN-p9vgAJCEAdkxiQAkvCDgtTv0bABrVaYACeOFKIGs6mCyVS6SyOTyqzgAxwLPQbLSmWyuUicyUcFkyRy7VWQ1QoAAZjQ4IJaugUEo6QzErI2N04oJgkgBjRIoqQIIkJ5BPp2hZeuSZOpmpaVWqNUyQBKQLTVh71Yl9tr6YyAI4MNo6QI6Ug+uZAA

simonw commented 3 years ago

That's not quite what I'm after here - I want to sort in the order originally provided by the results of the query.

So if the data looked like this:

  {
    "values": [
      {"a": "Dog", "b": 28},
      {"a": "Cat", "b": 55},
      {"a": "Chicken", "b": 43},
      {"a": "Dragon", "b": 91}
    ]
  }

I want the bars on the bar chart to be in Dog, Cat, Chicken, Dragon order.

simonw commented 3 years ago

Aha! It looks like "sort": null does the trick. https://vega.github.io/vega-lite/docs/sort.html#no-sorting

simonw commented 3 years ago

https://simonwillison.net/dashboard/bar-chart-for-issue-93/ before this fix:

Bar_chart_for_issue_93

After the fix:

Bar_chart_for_issue_93
simonw commented 3 years ago

I can fix https://github.com/simonw/datasette-vega/issues/19 with this too.