add reset line chart option

This commit is contained in:
hackerESQ
2024-08-06 23:12:57 -05:00
parent eb260b2990
commit af66d83f9b
2 changed files with 29 additions and 20 deletions
@@ -82,12 +82,10 @@
this.data.chart.events = {
mounted: function (chartContext, config) {
console.log('moount', chartContext)
renderCustomLegend(chartContext);
renderLegend(chartContext);
},
updated: function (chartContext, config) {
console.log('update')
renderCustomLegend(chartContext);
renderLegend(chartContext);
}
}
@@ -95,7 +93,15 @@
chart.render();
function renderCustomLegend(chartContext) {
// reset custom zoom button
var resetZoomButton = document.querySelector('#chart-reset-zoom-{{ $name }}');
resetZoomButton.addEventListener('click', function () {
chart.resetSeries()
});
// generate custom legend view
function renderLegend(chartContext) {
var legendContainer = document.querySelector('#chart-legend-{{ $name }}');
if (!legendContainer) return;
@@ -89,7 +89,10 @@ new class extends Component {
</div>
<x-dropdown label="{{ $scope }}" class="btn-ghost btn-sm">
<div class="flex items-center">
<x-button title="{{ __('Reset chart') }}" icon="o-arrow-path" class="btn-ghost btn-sm btn-circle mr-2" id="chart-reset-zoom-{{ $name }}" />
<x-dropdown title="{{ __('Choose time period') }}" label="{{ $scope }}" class="btn-ghost btn-sm">
<x-menu>
@foreach($options as $option)
@@ -102,7 +105,7 @@ new class extends Component {
@endforeach
</x-menu>
</x-dropdown>
</div>
</div>
<div