Bar charts sort labels alphabetically instead of respecting their order

[simonw]

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

[simonw]

Here's why:

django-sql-dashboard/django_sql_dashboard/templates/django_sql_dashboard/widgets/bar_label-bar_quantity.html

Lines 32 to 40 in d59d01f

	encoding: {
	x: {
	field: "bar_label",
	title: "Label",
	type: "nominal",
	axis: { labelAngle: 90 },
	},
	y: { field: "bar_quantity", title: "Quantity", type: "quantitative" },
	},

It's because of type: "nominal".

[simonw]

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]

@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]

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]

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

[simonw]

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

After the fix:

[simonw]

I can fix simonw/datasette-vega#19 with this too.