[Feature Request] Add support for filters to chart widgets

[Azeirah]

Feature Request

What's the feature you think Backpack should have?

I think we should be able to add filters to chart widgets

Have you already implemented a prototype solution, for your own project?

I have, this is oddly enough not super complicated to add. What I changed:

Changes on the backend

After you create a new ChartController, add the Filter and Settings traits, and define the getCurrentOperation function to return 'list' (to prevent errors)

• This allows you to call $this->addFilter in your ChartController.
• In the real code, probably best to add the traits and define the required function in the ChartController itself, rather than letting the user append this code.

Changes on the frontend

I had to make some changes to the chart widget blade file as well

1. Copy the div from the filter navbar into the card body. The one with id=bp-filters-navbar
   • This loads the filters into a chart
   • In the real code, this div should be put into its own file and be included in both the chart widget as well as the original filter navbar blade file.
2. All widgets assume a datatable is present, I added a dummy datatable with style="display: none" to silence the errors. In the real code you would of course just place checks in place to see if the dataTable is present at all. You can always get the initial ajax_url from new URI(window.location.href) in case dataTable is not present on the page.
3. I had to implement a function called updateChartOnFilterChange which is called at the same places as updateDatatablesOnFilterChange, it receives {{$filter->key}} as its first parameter instead of {{$filter->name}}.
   1. Note, the simple widget for some reason does not call updateDatatablesOnFilterChange, I added the appropriate calls manually.
   2. Another note: you can retrieve the chart id from the filter key. Since charts are embedded within cards you can use jQuery to find the card with $(this).closest('.card-body').find('canvas').attr('id');
   3. For ajax management, the url is stored in the canvas as well, as data-ajax-url, this is set in this function as well, but needs to be retrieved in every widget code body in the right locations
   4. We can now call the ajax refresh function for the chart, the chart docs describe how.
   5. As for getting the refresh function name, you can just filter window for the function. var refresh_chart = Object.keys(window).filter((key)=>key.contains(chart_id))[0];

With these changes put together, you get the same filtering functionality and ui as on list view datatables.

Do you see this as a core feature or an add-on?

Core feature for pro.

[welcome[bot]]

Hello there! Thanks for opening your first issue on this repo!

Just a heads-up: Here at Backpack we use Github Issues only for tracking bugs. Talk about new features is also acceptable. This helps a lot in keeping our focus on improving Backpack. If you issue is not a bug/feature, please help us out by closing the issue yourself and posting in the appropriate medium (see below). If you're not sure where it fits, it's ok, a community member will probably reply to help you with that.

Backpack communication channels:

• Bug Reports, Feature Requests - Github Issues (here);
• Quick help (How do I do X) - Gitter Chatroom;
• Long questions (I have done X and Y and it won't do Z wtf) - Stackoverflow, using the backpack-for-laravel tag;
• Showing off something you've made, asking for opinion on Backpack/Laravel matters - Reddit;

Please keep in mind Backpack offers no official / paid support. Whatever help you receive here, on Gitter, Slack or Stackoverflow is thanks to our awesome awesome community members, who give up some of their time to help their peers. If you want to join our community, just start pitching in. We take pride in being a welcoming bunch.

Thank you!

-- Justin Case The Backpack Robot

[pxpm]

Hello @Azeirah thanks for the suggestion and such a detailed explanation. This seems like a very good approach to the problem, I already implemented myself something like this to filter charts but not using CrudFilters. (way way more basic) Do you have a screenshot of the final result that you can share?

Cheers

[Azeirah]

I don't currently have access to the code I wrote for this, but I probably have it in a branch on my PC, but I don't have access to it for a week or so.

Anyway, concerning how it'd look it's literally just the same thing as using filters on table pages, but the filters are present above the cards for graphs.

If you're interested, I can make some time implementing this as some contract work, as I already did most work needed?