Pass value to custom field
I am trying to create a custom field. It's a chart where I can select a date by clicking on the x-axis. When I click on zoomIn or zoomOut, the time span should change from, for example, 30 to 60 days. How can I pass the days to the field?
This is my code:
This is my code:
class TimelineChartField extends Field
{
/**
* @var int
*/
public int $days = 0;
/**
* @var string
*/
public string $date = '';
/**
* @var array
*/
public array $series = [
[
'name' => 'test',
'data' => [
['2023-06-01', 100],
['2023-06-02', 100],
['2023-06-03', 85],
['2023-06-04', 85],
['2023-06-05', 85],
['2023-06-06', 100],
]
]
];
...
}class TimelineChartField extends Field
{
/**
* @var int
*/
public int $days = 0;
/**
* @var string
*/
public string $date = '';
/**
* @var array
*/
public array $series = [
[
'name' => 'test',
'data' => [
['2023-06-01', 100],
['2023-06-02', 100],
['2023-06-03', 85],
['2023-06-04', 85],
['2023-06-05', 85],
['2023-06-06', 100],
]
]
];
...
} document.addEventListener('livewire:load', function () {
let series = @js($series);
let options = {
series: series,
...
chart: {
...
events: {
...
zoomed: function (chartContext, axis) {
let startDate = new Date(axis.xaxis.min);
let todayDate = new Date();
todayDate.setHours(startDate.getHours(), startDate.getMinutes(), startDate.getSeconds(), startDate.getMilliseconds());
let days = (todayDate.getTime() - axis.xaxis.min) / (1000 * 60 * 60 * 24);
@this.days = days;
},
...
}
};
var chart = new ApexCharts(document.querySelector("div#chartContainer"), options);
chart.render();
}); document.addEventListener('livewire:load', function () {
let series = @js($series);
let options = {
series: series,
...
chart: {
...
events: {
...
zoomed: function (chartContext, axis) {
let startDate = new Date(axis.xaxis.min);
let todayDate = new Date();
todayDate.setHours(startDate.getHours(), startDate.getMinutes(), startDate.getSeconds(), startDate.getMilliseconds());
let days = (todayDate.getTime() - axis.xaxis.min) / (1000 * 60 * 60 * 24);
@this.days = days;
},
...
}
};
var chart = new ApexCharts(document.querySelector("div#chartContainer"), options);
chart.render();
});
