opensource/filament
3
0
Fork 0
mirror of https://github.com/filamentphp/filament.git synced 2026-09-21 13:30:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Responsive chart height (#18033)

Browse Source 
* fix: Responsive chart height

* clean up

* tweak
This commit is contained in:
Dan Harrin
2025-10-03 11:11:47 +01:00
committed by GitHub
parent 75c91294dc
commit 0b4875e814
5 changed files with 41 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/panels/dist/theme.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/widgets/dist/components/chart.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
packages/widgets/resources/css/chart-widget.css
+34
View File
@@ -1,4 +1,38 @@
.fi-wi-chart {
& .fi-wi-chart-canvas-ctn {
@apply aspect-square;
}
@supports (container-type: inline-size) {
& .fi-section-content {
@apply @container;
}
& .fi-wi-chart-canvas-ctn {
@apply @sm:aspect-[2];
&[data-chart-type='doughnut'],
&[data-chart-type='pie'],
&[data-chart-type='polarArea'],
&[data-chart-type='radar'] {
@apply aspect-square;
}
}
}
@supports not (container-type: inline-size) {
& .fi-wi-chart-canvas-ctn {
@apply sm:aspect-[2];
&[data-chart-type='doughnut'],
&[data-chart-type='pie'],
&[data-chart-type='polarArea'],
&[data-chart-type='radar'] {
@apply aspect-square;
}
}
}
& .fi-wi-chart-filter {
&.fi-input-wrp {
@apply w-max sm:-my-2;
packages/widgets/resources/js/components/chart.js
+1
View File
@@ -85,6 +85,7 @@ export default function chart({ cachedData, options, type }) {
options ??= {}
options.borderWidth ??= 2
options.maintainAspectRatio ??= false
options.pointBackgroundColor ??= borderColor
options.pointHitRadius ??= 4
options.pointRadius ??= 2
packages/widgets/resources/views/chart-widget.blade.php
+4 -2
View File
@@ -7,6 +7,7 @@
$description = $this->getDescription();
$filters = $this->getFilters();
$isCollapsible = $this->isCollapsible();
$type = $this->getType();
@endphp
<x-filament-widgets::widget class="fi-wi-chart">
@@ -64,12 +65,13 @@
x-load
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
wire:ignore
data-chart-type="{{ $type }}"
x-data="chart({
cachedData: @js($this->getCachedData()),
options: @js($this->getOptions()),
type: @js($this->getType()),
type: @js($type),
})"
{{ (new ComponentAttributeBag)->color(ChartWidgetComponent::class, $color) }}
{{ (new ComponentAttributeBag)->color(ChartWidgetComponent::class, $color)->class(['fi-wi-chart-canvas-ctn']) }}
>
<canvas
x-ref="canvas"