Chart experiments #316
Chart experiments #316
Conversation
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
|
@dantownsend This is great. You can use the changes from the last commit from the |
dantownsend
force-pushed
the
charts-experiments
branch
from
d6f425a
to
976f55b
Compare
|
@sinisaos Good catch - I've updated it with your latest changes. |
|
@sinisaos I like the way chart.js looks. 
The only problem is dark mode where the labels are harder to see. 
Do you know if Chart.js supports dark mode, or we can configure the label colours somehow? |
|
@dantownsend I don't know, but there's probably some way to change it through css or something. |
docs/source/charts/images/chart.png
Outdated
There was a problem hiding this comment.
Now I noticed that the image in the docs is wrong (use Highcharts and not Chart.js), so if you can change that too.
There was a problem hiding this comment.
@sinisaos OK will change that
Codecov Report
❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more. @@ Coverage Diff @@
## master #316 +/- ##
==========================================
- Coverage 93.31% 92.30% -1.01%
==========================================
Files 5 5
Lines 359 403 +44
==========================================
+ Hits 335 372 +37
- Misses 24 31 +7
|
|
@sinisaos I had an idea ... will play around with it to see how easy it is. We can let the user specify a Pydantic model which is used to configure the chart. For example: class ChartModel(BaseModel):
genre: str | None = None
async def get_director_movie_count(model: ChartModel):
query = (
await Movie.select(
Movie.director.name.as_alias("director"), Count(Movie.id)
)
.group_by(Movie.director)
.order_by(Movie.director.name)
)
if model.genre:
query = query.where(Movie.genre == model.genre)
movies = await query()
return [(i["director"], i["count"]) for i in movies]
APP = create_admin(
charts=[
ChartConfig(
title="Movies per director",
chart_type="Pie",
data_source=get_director_movie_count,
),
]
)On the chart page we then have a button which opens a modal containing a form based on the Pydantic model. In this case there's a text input where the user can specify a genre, and then the chart just shows the number of movies per director in that genre. |
|
@dantownsend That would be interesting. I don't know how complicated it is to implement because you also need to check if the user types a good term and maybe you should use a list of predefined terms (and then use the select dropdown) to prevent bad terms. |
| @@ -45,6 +47,7 @@ Vue.filter("readable", function (value) { | |||
| /*****************************************************************************/ | |||
|
|
|||
| Vue.config.productionTip = false | |||
| Vue.use(Chartkick.use(Chart)) | |||
|
|
|||
There was a problem hiding this comment.
| // charts font color and gridlines in dark mode | |
| if (localStorage.getItem('darkMode')) { | |
| Chart.defaults.global.defaultFontColor = "#ffffff" | |
| Chart.defaults.scale.gridLines.color = "#ffffff" | |
| } |
There was a problem hiding this comment.
This is a way to change Chart.js colors in dark mode, but unfortunately it doesn't work without refreshing the page. I'm sorry I didn't check before posting the suggested change.
There was a problem hiding this comment.
No worries, it's still useful - there might be a way to reload the chart without reloading the entire page.
|
@sinisaos I got the chart filtering working: chart_demo.mov |
|
@dantownsend Wow, that looks and works great and I think it's really useful. |
|
@sinisaos Thanks, I think it's pretty cool. |
|
This PR has been marked as stale because it has been open for 30 days with no activity. Are there any blockers, or should this be closed? |
|
I have a bunch of changes for this - just need to push them up. |
|
This PR has been marked as stale because it has been open for 30 days with no activity. Are there any blockers, or should this be closed? |
Based on #311
The only real change is the data is calculated dynamically each time the endpoint is called.