zoom reload functionality

src/Chart/ChartView.php

@@ -39,6 +39,7 @@ class ChartView implements ChartViewInterface
             'type' => 'bar',
             'height' => null,
             'width' => null,
+            'zoomReload' => false,
             'xaxisType' => 'category',
             'renderXFunction' => null,
             'renderYFunction' => null,
@@ -51,6 +52,7 @@ class ChartView implements ChartViewInterface
             'type', 'height', 'width', 'xaxisType', 'colorizer'
         ]);
         $resolver->setAllowedTypes('type', 'string');
+        $resolver->setAllowedTypes('zoomReload', 'boolean');
         $resolver->setAllowedTypes('endingShape', 'string');
         $resolver->setAllowedTypes('renderXFunction', ['string', 'null']);
         $resolver->setAllowedTypes('renderYFunction', ['string', 'null']);

src/Resources/views/apex.js.twig

@@ -27,6 +27,16 @@ $(function () {
             {% if options.width %}
             width: {{ options.width }},
             {% endif %}
+            {% if options.zoomReload %}
+            events: {
+                zoomed: function(chartContext, { xaxis }) {
+                    window.location.href = `/admin/date-filter?from=${new Date(xaxis.min).toISOString().slice(0, 10)}&to=${new Date(xaxis.max).toISOString().slice(0, 10)}&redirectUrl=${window.location.href}`
+                },
+                brushScrolled: function(chartContext, { xaxis, yaxis }) {
+                    console.log('brush scrolled', chartContext)
+                }
+            }
+            {% endif %}
         },
         {% if options.type != 'pie' %}
         series: [
@@ -82,11 +92,11 @@ $(function () {
             type: '{{ options.xaxisType|e('js') }}',
             labels: {
                 datetimeUTC: false
-            }
+            },
+            {% if options.type == 'bar' and series|length > 1 %}
+            categories: [{{ series|first.values|keys|map(value => '\'' ~ (value|e('js')) ~ '\'')|join(', ')|raw }}],
+            {% endif %}
         },
-        /* xaxis: {
-             categories: [{{ labels|map(value => '\'' ~ (value|e('js')) ~ '\'')|join(', ')|raw }}],
-        }, */
         {% endif %}
         yaxis: {
             {% if options.renderYFunction %}
@@ -129,9 +139,9 @@ $(function () {
         },
         colors: [
             {% for color in colors %}
-                '{{ color|e('js') }}',
+            '{{ color|e('js') }}',
             {% endfor %}
-        ],
+        ]
     };
 
     var chart = new ApexCharts(document.querySelector('#apex_chart_{{ chartId|e('js') }}'), options);