How to make widget chart to be live update also

I have this widget and have a chart, but when I updated it only the upper content is being updated via live updated, the chart stays the same
24 Replies
Chrysippus
ChrysippusOP2y ago
as you can see, my chart should be color yellow and straight line but only the counter and label has changed.
class OrderStatusOverView extends BaseWidget
{
protected static ?int $sort = 2;
protected function getCards(): array
{
function calculatePercentageDifference($oldValue, $newValue) {
$difference = $newValue - $oldValue;
$percentageDifference = ($difference / abs($oldValue + $difference)) * 100;
return number_format($percentageDifference, 0);
}

$ordersToday = Order::whereBetween('created_at', [Carbon::now()->startOfDay(), Carbon::now()->endOfDay()])
->count();
$ordersYesterday = Order::whereBetween('created_at', [Carbon::now()->subDay()->startOfDay(), Carbon::now()->subDay()->endOfDay()])
->count();

$chartData = [$ordersYesterday, $ordersToday];
$percentageDifference = calculatePercentageDifference($ordersYesterday, $ordersToday);

if ($percentageDifference > 0) {
$changeType = $percentageDifference. '% increase';
$descriptionIcon ='heroicon-s-trending-up';
$color = 'success';
} elseif ($percentageDifference < 0) {
$changeType = $percentageDifference. '% decrease';
$descriptionIcon ='heroicon-s-trending-down';
$color = 'danger';
} else {
$changeType = $percentageDifference.'% no change';
$color = 'warning';
$descriptionIcon ='';
}

return [
Card::make("Today's Order", Order::query()->where('order_status', 'Order Created')
->whereBetween('created_at', [Carbon::now()->startOfDay(), Carbon::now()->endOfDay()])->count())
->description($changeType)
->descriptionIcon($descriptionIcon)
->chart($chartData)
->color($color),
];
}
}
class OrderStatusOverView extends BaseWidget
{
protected static ?int $sort = 2;
protected function getCards(): array
{
function calculatePercentageDifference($oldValue, $newValue) {
$difference = $newValue - $oldValue;
$percentageDifference = ($difference / abs($oldValue + $difference)) * 100;
return number_format($percentageDifference, 0);
}

$ordersToday = Order::whereBetween('created_at', [Carbon::now()->startOfDay(), Carbon::now()->endOfDay()])
->count();
$ordersYesterday = Order::whereBetween('created_at', [Carbon::now()->subDay()->startOfDay(), Carbon::now()->subDay()->endOfDay()])
->count();

$chartData = [$ordersYesterday, $ordersToday];
$percentageDifference = calculatePercentageDifference($ordersYesterday, $ordersToday);

if ($percentageDifference > 0) {
$changeType = $percentageDifference. '% increase';
$descriptionIcon ='heroicon-s-trending-up';
$color = 'success';
} elseif ($percentageDifference < 0) {
$changeType = $percentageDifference. '% decrease';
$descriptionIcon ='heroicon-s-trending-down';
$color = 'danger';
} else {
$changeType = $percentageDifference.'% no change';
$color = 'warning';
$descriptionIcon ='';
}

return [
Card::make("Today's Order", Order::query()->where('order_status', 'Order Created')
->whereBetween('created_at', [Carbon::now()->startOfDay(), Carbon::now()->endOfDay()])->count())
->description($changeType)
->descriptionIcon($descriptionIcon)
->chart($chartData)
->color($color),
];
}
}
LeandroFerreira
The canvas contains wire:ignore. I think that it isn't possible
Chrysippus
ChrysippusOP2y ago
Already ask on chat maybe im just wasting my time looking for answer. thanks anyways.
Chrysippus
ChrysippusOP2y ago
I think it has something to do with this error.
Patrick Boivin
filament devs ignores it,
This is not a great attitude... everyone is busy with their own thing, the help you get here is voluntary.
Chrysippus
ChrysippusOP2y ago
yeah, I take that back, just frustrated working 15hrs straight, mybad.
Patrick Boivin
No worries 👍 I'm just catching up with the question... are you close to having a solution here?
Chrysippus
ChrysippusOP2y ago
hello, not yet, im currently handling the error where it returns division by zero. im kinda understand the error on console since I used to have that on native php but I have no idea how to resolve that on filament.
Patrick Boivin
Does the error happen when the page loads or only when you try to refresh the chart?
Chrysippus
ChrysippusOP2y ago
only when I update the data/chart
Patrick Boivin
Yeah, like Leandro said, the wire:ignore is probably the issue... looks like the chart is not designed to be reloaded like that. I wonder if there's a chart.js event you could trigger...
Chrysippus
ChrysippusOP2y ago
yeah which makes me endup not resolving it, its kinda deep for me dont have any idea when it comes into that just to resolve. ill ignore it for now. thanks for your help!
Patrick Boivin
Ok, you're welcome. I'll let you know if I think of something.
LeandroFerreira
I agree hey @chrysippus2497 Maybe we have an issue here as you said.. I'm trying this
Chrysippus
ChrysippusOP2y ago
I'm srry bout that. Hmm, any way to like resolve it? way back on native php I used to increment the id of my canvas for it just to be unique everytime ajax calls a request. but i'm hands up when it comes to this.
Patrick Boivin
I'm starting to think this could be a bug... there's an updateChart() method on the alpine component but I'm not sure how to trigger it...
LeandroFerreira
shoud be:
init: function() {

chart = Chart.getChart(this.$refs.canvas);
chart !== undefined ? this.updateChart() : this.initChart()
},
init: function() {

chart = Chart.getChart(this.$refs.canvas);
chart !== undefined ? this.updateChart() : this.initChart()
},
updateChart: function() {

chart.data.labels = this.labels
chart.data.datasets[0].data = this.values
chart.update()
}
updateChart: function() {

chart.data.labels = this.labels
chart.data.datasets[0].data = this.values
chart.update()
}
Patrick Boivin
Trying it now... this.chart.update() is still causing an issue for me
LeandroFerreira
I'll send a PR..
LeandroFerreira
@chrysippus2497 @pboivin https://github.com/filamentphp/filament/pull/6944 Thank you!
GitHub
Update card.blade.php by leandrocfe · Pull Request #6944 · filament...
Fixed Error: Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID: It is happening when the pollingInterval is enabled.
Chrysippus
ChrysippusOP17mo ago
Hello Sir, this is already fixed right? I have used this code to override card.blade.php to test if its working https://github.com/filamentphp/filament/blob/ddf8d696de486f8b4fea01fab906c8ecfda0b13f/packages/admin/resources/views/components/stats/card.blade.php its working but in my case the chart color isnt updating idk if its on my end, there's no error on console also. I have 3 colors which are 'danger' => yesterdays count > todays count 'warning' => equal value 'success' => todays count > yesterdays count this is what i used to change the color every polling and it only changes the description() and descriptionIcon() color leaving chart color unchanged unless I refresh the page...
Card::make("New Customers", $customersToday)
->description($customerPercentageData['changeType'])
->descriptionIcon($customerPercentageData['descriptionIcon'])
->chart([$chartDataCustomer])
/*->chartColor('danger')*/
->color('danger'),
Card::make("New Customers", $customersToday)
->description($customerPercentageData['changeType'])
->descriptionIcon($customerPercentageData['descriptionIcon'])
->chart([$chartDataCustomer])
/*->chartColor('danger')*/
->color('danger'),
LeandroFerreira
LeandroFerreira17mo ago
GitHub
Release v2.17.51 · filamentphp/filament
What's Changed Global search result scroll bar visibility by @valpuia in #6914 Should display dynamic options for checkbox list by @juliomotol in #6935 introduced without Middleware in pages a...
Chrysippus
ChrysippusOP17mo ago
Hello, Nice work sir! I'm kinda wondering about the color of the chart when I attempt to change it the polling only updates the descriptionColor() idk if its only on my end..
Chrysippus
ChrysippusOP17mo ago
Want results from more Discord servers?
Add your server