wip
This commit is contained in:
salam committed
1 parent
d954a9fa5c
commit
4b4952bfec
16 files changed
+251
-340
No files matched your search
@@ -87,6 +87,10 @@ button[wire\:click="resetTableFiltersForm"] {
|
||||
@apply p-2 border border-gray-200 shadow rounded-md cursor-pointer has-checked:bg-blue-50 has-checked:text-blue-900 dark:has-checked:bg-blue-950 dark:has-checked:text-blue-200
|
||||
}
|
||||
|
||||
.fi-sc-component .fi-wi-stats-overview-stat {
|
||||
@apply bg-green-50 dark:bg-green-900 border border-green-300 dark:border-green-700
|
||||
}
|
||||
|
||||
/* #mapper_right .fi-dropdown-list-item,
|
||||
#mapper_left .fi-dropdown-list-item {
|
||||
padding: 2px;
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
import IntersectionFiller from './widget-chart-line-intersection-filler'
|
||||
|
||||
window.filamentChartJsPlugins ??= []
|
||||
window.filamentChartJsPlugins.push(IntersectionFiller)
|
||||
@@ -0,0 +1,32 @@
|
||||
function animate(element, end, duration = 500) {
|
||||
console.log(element, end);
|
||||
|
||||
var element = document.getElementById(element);
|
||||
const startTime = performance.now();
|
||||
|
||||
// Cubic easing function: slows down at the start and end
|
||||
const easeInOutCubic = (t) =>
|
||||
t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
|
||||
|
||||
const updateCount = (currentTime) => {
|
||||
const elapsedTime = currentTime - startTime;
|
||||
let progress = elapsedTime / duration;
|
||||
|
||||
// Clamp progress to ensure it doesn't overshoot
|
||||
if (progress > 1) progress = 1;
|
||||
|
||||
// Apply easing curve to progress
|
||||
const easedProgress = easeInOutCubic(progress);
|
||||
|
||||
// Calculate current value and round to integer
|
||||
const currentCount = Math.round(end * easedProgress * 100) / 100;
|
||||
|
||||
element.innerHTML = currentCount;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(updateCount);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(updateCount);
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
const fillPlugin = {
|
||||
id: 'fillHigherValue',
|
||||
beforeDatasetsDraw(chart) {
|
||||
const { ctx } = chart;
|
||||
const metaA = chart.getDatasetMeta(0); // Dataset A
|
||||
const metaB = chart.getDatasetMeta(1); // Dataset B
|
||||
|
||||
ctx.save();
|
||||
|
||||
// Loop through your data points
|
||||
for (let i = 0; i < metaA.data.length; i++) {
|
||||
const pA = metaA.data[i];
|
||||
const pB = metaB.data[i];
|
||||
|
||||
if (!pA || !pB) continue;
|
||||
|
||||
// Define your colors
|
||||
const colorA = 'rgba(255, 99, 132, 0.4)'; // Color when Line A is higher
|
||||
const colorB = 'rgba(54, 162, 235, 0.4)'; // Color when Line B is higher
|
||||
|
||||
// Determine which line is higher (remember canvas Y=0 is at the top)
|
||||
if (pA.y < pB.y) {
|
||||
ctx.fillStyle = colorA;
|
||||
} else {
|
||||
ctx.fillStyle = colorB;
|
||||
}
|
||||
|
||||
// Draw the fill polygon segment between the two points
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(pA.x, pA.y);
|
||||
ctx.lineTo(pB.x, pB.y);
|
||||
// If doing multiple segments, connect back to create a contiguous fill
|
||||
if (metaA.data[i + 1] && metaB.data[i + 1]) {
|
||||
ctx.lineTo(metaB.data[i + 1].x, metaB.data[i + 1].y);
|
||||
ctx.lineTo(metaA.data[i + 1].x, metaA.data[i + 1].y);
|
||||
}
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
};
|
||||
@@ -1,6 +1,10 @@
|
||||
<div
|
||||
class="h-full rounded-lg p-0 lg:py-2 grid grid-rows-3 gap-0 bg-green-50 dark:bg-green-900 border border-green-300 dark:border-green-700">
|
||||
<span class="font-bold text-center">{{ $titel }}</span>
|
||||
<span class="font-bold text-2xl text-center">{{ $value }}</span>
|
||||
{{-- <x-filament::loading-indicator class="h-5 w-5" /> --}}
|
||||
</div>
|
||||
<div class="fi-sc-component">
|
||||
<div class="fi-wi-stats-overview-stat grid grid-rows-2 gap-2">
|
||||
<div class="fi-wi-stats-overview-stat-label-ctn">
|
||||
<span class="fi-wi-stats-overview-stat-label">
|
||||
{{ $titel }}
|
||||
</span>
|
||||
</div>
|
||||
<div id="odometer" class="odometer fi-wi-stats-overview-stat-value">123</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,76 +0,0 @@
|
||||
@php
|
||||
use Filament\Widgets\View\Components\ChartWidgetComponent;
|
||||
use Illuminate\View\ComponentAttributeBag;
|
||||
|
||||
$color = $this->getColor();
|
||||
$heading = $this->getHeading();
|
||||
$description = $this->getDescription();
|
||||
$filters = $this->getFilters();
|
||||
$isCollapsible = $this->isCollapsible();
|
||||
$type = $this->getType();
|
||||
$maxHeight = $this->getMaxHeight();
|
||||
$hasMaxHeight = filled($maxHeight) && $maxHeight !== '100%';
|
||||
@endphp
|
||||
|
||||
{{-- <x-filament-widgets::widget x-data="{ isCollapsed: false }" x-on:collapse-all-charts.window="isCollapsed = true"> --}}
|
||||
{{-- :collapsible="$this->isCollapsible()" x-bind:collapsed="isCollapsed" --}}
|
||||
<x-filament-widgets::widget class="fi-wi-chart">
|
||||
<x-filament::section :description="$description" :heading="$heading" :collapsible="$isCollapsible">
|
||||
@if ($filters || method_exists($this, 'getFiltersSchema'))
|
||||
<x-slot name="afterHeader">
|
||||
@if ($filters)
|
||||
<x-filament::input.wrapper inline-prefix wire:target="filter" class="fi-wi-chart-filter">
|
||||
<x-filament::input.select inline-prefix wire:model.live="filter">
|
||||
@foreach ($filters as $value => $label)
|
||||
<option value="{{ $value }}">
|
||||
{{ $label }}
|
||||
</option>
|
||||
@endforeach
|
||||
</x-filament::input.select>
|
||||
</x-filament::input.wrapper>
|
||||
@endif
|
||||
|
||||
@if (method_exists($this, 'getFiltersSchema'))
|
||||
<x-filament::dropdown placement="bottom-end" shift width="xs" class="fi-wi-chart-filter">
|
||||
<x-slot name="trigger">
|
||||
{{ $this->getFiltersTriggerAction() }}
|
||||
</x-slot>
|
||||
|
||||
<div class="fi-wi-chart-filter-content">
|
||||
{{ $this->getFiltersSchema() }}
|
||||
|
||||
@if (method_exists($this, 'hasDeferredFilters') && $this->hasDeferredFilters())
|
||||
<div class="fi-wi-chart-filter-content-actions-ctn">
|
||||
{{ $this->getFiltersApplyAction() }}
|
||||
|
||||
{{ $this->getFiltersResetAction() }}
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</x-filament::dropdown>
|
||||
@endif
|
||||
</x-slot>
|
||||
@endif
|
||||
|
||||
<div @if ($pollingInterval = $this->getPollingInterval()) wire:poll.{{ $pollingInterval }}="updateChartData" @endif>
|
||||
<div 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($type),
|
||||
})"
|
||||
{{ new ComponentAttributeBag()->color(ChartWidgetComponent::class, $color)->class(['fi-wi-chart-canvas-ctn', 'fi-wi-chart-canvas-ctn-no-aspect-ratio' => $hasMaxHeight]) }}>
|
||||
<canvas x-ref="canvas" @style(['width: 100%', 'height: 100%; max-height: 100%' => !$hasMaxHeight, "max-height: {$maxHeight}" => $hasMaxHeight])></canvas>
|
||||
|
||||
<span x-ref="backgroundColorElement" class="fi-wi-chart-bg-color"></span>
|
||||
|
||||
<span x-ref="borderColorElement" class="fi-wi-chart-border-color"></span>
|
||||
|
||||
<span x-ref="gridColorElement" class="fi-wi-chart-grid-color"></span>
|
||||
|
||||
<span x-ref="textColorElement" class="fi-wi-chart-text-color"></span>
|
||||
</div>
|
||||
</div>
|
||||
</x-filament::section>
|
||||
</x-filament-widgets::widget>
|
||||
Reference in new issue
Block a user