add reset line chart option

resources/views/components/ib-apex-chart.blade.php

@@ -82,12 +82,10 @@
 
             this.data.chart.events = {
                 mounted: function (chartContext, config) {
-                    console.log('moount', chartContext)
+                    renderLegend(chartContext);
-                    renderCustomLegend(chartContext);
                 },
                 updated: function (chartContext, config) {
-                    console.log('update')
+                    renderLegend(chartContext);
-                    renderCustomLegend(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;
@@ -146,6 +152,6 @@
         }
     }"
 >
-    <div id="chart-{{ $name }}" class="apex-chart"></div>
+  <div id="chart-{{ $name }}" class="apex-chart"></div>
 </div>
 

resources/views/livewire/portfolio-performance-cards.blade.php

@@ -89,20 +89,23 @@ 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-menu>
+            <x-dropdown title="{{ __('Choose time period') }}" label="{{ $scope }}" class="btn-ghost btn-sm">
-                @foreach($options as $option)
                     
-                    <x-menu-item 
+                <x-menu>
-                        title="{{ $option['name'] }}" 
+                    @foreach($options as $option)
-                        x-on:click="$wire.changeScope('{{ $option['id'] }}')"
-                    />
 
-                @endforeach
+                        <x-menu-item 
-            </x-menu>
+                            title="{{ $option['name'] }}" 
-        </x-dropdown>
+                            x-on:click="$wire.changeScope('{{ $option['id'] }}')"
+                        />
                 
+                    @endforeach
+                </x-menu>
+            </x-dropdown>
+        </div>
     </div>
 
     <div