Skip to content

feat: add chart widget empty state#19579

Draft
ahmed-rashad-alnaggar wants to merge 10 commits intofilamentphp:4.xfrom
ahmed-rashad-alnaggar:feat/chart-widget-empty-state
Draft

feat: add chart widget empty state#19579
ahmed-rashad-alnaggar wants to merge 10 commits intofilamentphp:4.xfrom
ahmed-rashad-alnaggar:feat/chart-widget-empty-state

Conversation

@ahmed-rashad-alnaggar
Copy link
Copy Markdown
Contributor

@danharrin as discussed in #13311 I have added a feature to display an empty state on chart widgets.

This is a heavy re-work of #13408, solves its issues and compatible with new Filament v4 and v5 code style.

Please consider merging this PR as it make TableWidget and ChartWidget looks the same when there is no data to display, which feels consistent and professional.

Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Added handling for empty state in chart widget.

Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Added styles for chart empty state and its elements.

Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
Signed-off-by: ahmed-rashad-alnaggar <131385452+ahmed-rashad-alnaggar@users.noreply.github.com>
@github-project-automation github-project-automation Bot moved this to Todo in Roadmap Mar 29, 2026
@danharrin danharrin added enhancement New feature or request pending review labels Mar 29, 2026
@danharrin danharrin added this to the v4 milestone Mar 29, 2026
@ahmed-rashad-alnaggar
Copy link
Copy Markdown
Contributor Author

Hi @danharrin,
I noticed a latency of displaying the chart on a slow network devices, this is due to the async loading of the chart.js AFTER going from empty to non-empty data at first page load, like if the default filters have no data then adjusting them to a setting that has data.
I can't think of many suitable solutions but the one in my mind right now is:
instead of conditionally rendering the chart using @if directive is to just render it with a conditional style directive on a wrapper div to show and hide it, so do you have a better one or should I just implement it?

@ahmed-rashad-alnaggar
Copy link
Copy Markdown
Contributor Author

This PR is opened as a draft for now, as it depends on the outcome of another related PR. I’ll keep this in draft state until that one is reviewed and its direction (merge or not) is decided.

Once that is clarified, I’ll update or finalize this PR accordingly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request pending changes

Projects

Status: Todo

Development

Successfully merging this pull request may close these issues.

2 participants