Chart support

[dantownsend]

I'm putting this here as a placeholder to collect thoughts. I don't think it's an immediate priority, but would be cool.

We support form creation using FormConfig. We might be able to add something similar called ChartConfig. It would initially just be for very simple chart types, like bar, line, and pie.

Here's an example:

async def get_data():
    movies = await Movie.select(
        Movie.director.name.as_alias("director"),
        Count(Movie.id)
    ).group_by(
        Movie.director
    )
    # Flatten the response so it's a list of lists like [['George Lucas', 3], ...]
    return [[i['director'], i['count']] for i in movies]

director_chart = ChartConfig(title='Movie count', type=Bar(source=get_data))

create_admin(charts=[director_chart])

There would be a new section in the sidebar:

[sinisaos]

@dantownsend @Fidel-C I've been playing around a bit with adding charts to Picolo Admin. In addition to custom links(#307), we can also have a separate Charts section. The result is this.

https://github.com/piccolo-orm/piccolo_admin/assets/30960668/1065f78d-8b7c-4139-a111-43317e862cac

The data format must be a list of lists (eg. data=[["Male", 7], ["Female", 3]]) to satisfy the frontend library (I used the Chartkick library). I used hardcoded data, but any function or coroutine which return list of lists, will satisfy the data format.

[Fidel-C]

@sinisaos wow this is really nice

[dantownsend]

@sinisaos Yeah, that's really cool 👍

How large is the chartkick library? We just need to make sure we pick something which doesn't make the bundle size too large.

[dantownsend]

I'm already thinking how I could use this in my own projects ... I think it'll be very useful.

[sinisaos]

Thank you both for your kind words. @dantownsend Bundle size

[Fidel-C]

@sinisaos is the chart feature now in the official version?

[sinisaos]

@Fidel-C No it's not. It's just an experiment. I didn't even make a PR because @dantownsend didn't say that the package size of the new Vue library is fine. You can patch a local installation from this branch so you can try it out. First you need to download, then cd into admin_ui directory and npm run build. After that you can add piccolo_admin to your virtualenv site packages (if you are using virtualenv).

[dantownsend]

Sorry, I haven't looked into it yet. Just need to try running the bundle locally, to see how big the compiled JS file is. From the look of the link you shared it doesn't seem too bad though.

[Fidel-C]

@sinisaos thanks a lot for your help. But then, charts display has become a major requirement for modern admin panels. Maybe @dantownsend will consider that.

[Fidel-C]

@dantownsend and @sinisaos Seems this feature has been replaced by the "links" feature? Cos I'm still looking forward to it.

[dantownsend]

@Fidel-C The chart PR is definitely still valid. I like the links feature because it's generally useful, but I've wanted native chart support for a while. I'm trying to get another PR finished off in the main Piccolo repo, then can turn my attention to these other PRs.

[Fidel-C]

Alright cool. Will be waiting