@kiwibit/chart 17.0.0 → 17.0.1

package/fesm2022/kiwibit-chart.mjs

@@ -1,18 +1,11 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import { Subject, interval, takeUntil } from 'rxjs';
-import { NgStyle, CommonModule } from '@angular/common';
-import * as i1 from 'ngx-echarts';
-import { NgxEchartsDirective, NgxEchartsModule } from 'ngx-echarts';
+import { EventEmitter, Directive, Input, Output, HostListener, Component } from '@angular/core';
 import * as echarts from 'echarts/core';
+import { init } from 'echarts';
 import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, ToolboxComponent } from 'echarts/components';
-import { LineChart, ScatterChart } from 'echarts/charts';
+import { LineChart } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 
-const ADD_POINT_IMG_OFF_LIGHT = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAADkUlEQVR4nO2bz0sUYRjHv8/otviDGDuWrhKdskBaQZi57MmLgVpIkJ06bH9AEdF/kF46dEg726liBSGwBEFnTm0oaF3s4lhdh1BhNuTpsDPLu+MvmHXm0ZzP6X2feWfn+3x33nf3fXlfIOV8Q0dd7O3tvaDr+igzDxPRLQCdANqSkRaZHQBbzPyViEqu65bW19crhzU+1ADDMO4S0QSAq3GoTJAfAJ5alvXhoItN4cDY2FiTruuTRPQSQEfc6hLgEoB7uVyu3XGcBQCsXtxngJ/846TUJYjR3d3dsrm5+VkN1nUB/7V/F7rRI6IpAG9bW1vX5ufnd+JW2giDg4Ntu7u7N5h5HEARQFa9rmna6NLSUimo1wzwB7zvqO/zP4loaHl5eTVu4XFgGEYfEc0BuKKEN1zX7Q0GRi2I6ro+ivrkvbOcPADYtr3CzLcBeEr4WkdHx3BQqRnAzMPqzUQ0dZaTD7BtewXAGzWm5lozgIjyaqO9vb2Z2NUlRziX/qCgKcHLaotsNvstTkVJkslk1kKh2pigGtCutlhcXNyOU1SSHJBLLVcN55xmqQcbhjFERNMA9gA8sizro4QOsTdA07TXqI47XQCmxHRIPZiZO5Vql5SOcz8GpAZIC5AmNUBagDSpAdICpEkNkBYgTWqAtABpUgOkBUgTeT3An89PoX7JOTKmafLxrfZDRFvMXIy6nhD5DfDn8yeSfCP40+rI6wnnvgtENoCZi0S0dZJiIuIQUTHqzZHHAL/PRV7JCfd5y7KO3KsQF2kXkBYgTWqAtABpUgOkBUiTGiAtQJrUAGkB0qQGSAuQJjVA6sGhqbQjpUNyg0SwntDQfL5RxPYINbqecFKkY4BSrttLVygU2vGfMDAwcDEU+hMUVAN+qS08z7sep6gkaW5uDufyOyiom6XLagtN0x7ErCtJxkP1L0FB3SxdCjUqGobRF6eqJPBzqPuVYeZarjUDXNctoXrAKCBLRHNn2QTlwMQFJbzhed5sUKlbijZN8w6A96HPqQCYBjCTyWTWTvsm6kKh0F6pVG4S0X1Uv3k1eTDziG3bBxsAAKZpTgJ4ErtSAZj5hW3bz9TYvlNjjuMs5HK5VgBmYsoSgIgmLMt6juOOzQFgx3E+9fT0rDJzP6rn7s4yG8z80LKsVwglDxxzdDafz2daWlpG/DM2eVSPzp72P0jbALYAlJm55HnebLlc/istKuW08g8wjAev/BoR3wAAAABJRU5ErkJggg==";
-const ADD_POINT_IMG_OFF_DARK = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAADgUlEQVR4nO2bz04TURTGvzNtaQOVB1BgYVhZDbSUDixZYwLoTlzXB5CI8QUM4ANQXeOCqCkJiUuWtpNCIaG6gRWoeyx/CmGOC5hyZ/izmDJzgM5vdefMafudr/femd65BQKaG7rqZKVSadndORhjohGAUwB1AGjzSZtbdgHeBmiFmPNt7bF8IpE4vCz5UgMKhZXnBJoG+KE3On2CsEkmv8kM9n27+LSD+fn5UFdX9xQBr71X5x8E/tCvpyaJyFTjmjPxLhYPAAyaMAqr751xWw846fb44sioMSPHbH5ubY2s9/T07HqstSHW1tba9vaOHmuaNg4gC0bUlkA0puvJfP3QalQqlZbqv8NfjjH/G4RhXU+tea7cAwyj3MsmLwJ4oIQ34veiCWtirA+B3Z2DMVvxhNptLh4AMpnkKmn0FISaEu6uVg9HrIO6ASeXujOYkbvNxVtkMslVmPhkj5rnDQDQp6aETG3OU2U+wsT2Whhpq6kacF/NqdYiP72V5R/7+7F1e4Tqc4JqQFxNGRpKVD1V5SMX1FKv9dx9QLMRlvrgYrE8TMwfGTjWGK/6B1PfJXTI9QDmWT6ZdzpNQk5KhuQQ6FDanVIimn4OCAyQFiBNYIC0AGkCA6QFSBMYIC1AmsAAaQHSBAZIC5DG9XpAsVgeBnMO9iVn1xQLK+zypdsaI+t2PcF9D2CexTUV3yAdjawnNP0QcG2AxsgC2L5GLW7ZIpOzbl/seg44HXOuV3KcY14fSF25V8ErgiEgLUCawABpAdIEBkgLkCYwQFqANIEB0gKkCQyQFiBNYIDgZ6s/pbekRIgZoKwnNPR7vlHE9gg1up5wXQRzgNK27aVbWqrEcUcoFArtjtCO1VAN+KNmxKNHj7wU5S8RRy3812qpBiyrKWbIfOmpJh8hpnF7ACWrqZ0lcR52soZR7vVWmvcYRrkXBNtVhpnqtdYNaGuP5UHYPMtClE1evM0mKH+YaFHCG+GwuWAd2JaijR/Lz5joq+N9DsH4yMRz+/ux9Zu+iXppqRJvba09gYkXp9+8WjwYNDowkLzYAAAwCsszDJrwQav/EKZ0PfVWDZ27D+jXU5MAz/inyieYpjOZ5Dtn+NKnMcVieRTMMwC6PRXmPRsMmlC7vcqVj6NKpVLk+Dg0CpgjzNRHJxucb/oNUpWBbSJeZqZ8OGwupNPpI2lRATeV/+HNFJvPZJXuAAAAAElFTkSuQmCC";
-const ADD_POINT_IMG_ON = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABmJLR0QA/wD/AP+gvaeTAAADjUlEQVR4nO2by08TURTGvzNAK49oDCsRNqbFxPogtsQ/AhNAowsxLksTlxIxrtwZwJUJsa07E1wQNSUh8X+wrQFDNSklMQGVjRgMj7TIHBcww50WWEyZOTzmt7pz7pn2O1/n3pne3gIeJxvarzM0nvM1LPl7GegGcB3gVgCN7kizzSpACwA+E3NqrbmUyt0NlfZK3tOAyKv8bRANA7jghEoXmSPw43Ss/cNunRUG3Bnnmu+/C0NMeOS8Nvdg8IvsYnAQz0hX41p54nEsHgAINBA5N/e8Mq6wfdm/K8spElNC1/S3G/XrM18eXFt1VGmVXH0z3Vi3Xn+ZGH0ARQH41X4m6s32B1LGsWlAaDznq1/yfYMy5hn4UQO961Ps4rQb4g+azmS+Q9dpkoDzZpBQWD9bChkTozkEGpb8vbBOeMWjXDwApKPtU5rGNwEUzSAjcOqPr9s41Hbi6FZPJqbEUS7eIB1tnwLhtSXIqDQA4LA1Z3PMYW2uoW/CUguBIkZbvQu0qEnr+r+vDutyjSKXZqwRNucE1YAmNSX3MLTiqCoX2aUWs9aK54CTRq3UG4cT+S7SKQnCJjTqz0QDHyV0iF0BxBQHoQVAG3ROSOmQHAKtSrtNSsSJnwM8A6QFSOMZIC1AGs8AaQHSeAZIC5DGM0BagDSeAdICpLG9HhBO5LvAlLAsOVdBJD7LNk9dgEZRu+sJtq8AYoofVPFV0lrNesKJHwL2DdAoCmDh4KTYZp62fgKzhe05YHvM2V7JKR/zmVhw370KTuENAWkB0ngGSAuQxjNAWoA0ngHSAqTxDJAWII1ngLQAaTwDBN9b/So9LyVCzoCd9YSqvs9Xi9geoWrXEw4Kbw5Q2pa9dKHRXBOOCTdezp4uC/01GqoBP9WMeq32kpOi3GSjFmW10C+jpRhAWWsO3XdUlYtoNehTjxmcMfuMBjGnYIGincl8h9PinKYzme8Aw3KXIcCs1TRgrbmUAjCn5Pl1nSaPsgnGHyYA+MwgocC0PLFzqJ4Qz99i0Puy1ymBkNQ3MVbk0sxh30QdGs01Ndb4ruiEe9ufvK8spScTC+5uAACE4/kRAg04LVQCAobSseATNVbxHJBdDA4CNOKeLJcgGk4vBp5WhPfKDycKPQQeASPgrDKHIRTAGFAve2v3PoQTmTrgTA8Y3QSEsbXB+bA/IK0AWGAgS0CKaXki2x/ZkBblcVj5D1vBAfS1aXiGAAAAAElFTkSuQmCC";
-
 var TraceType;
 (function (TraceType) {
     TraceType["LINE"] = "line";
@@ -41,16 +34,42 @@ var ShapeVariant;
     ShapeVariant[ShapeVariant["TRACE"] = 0] = "TRACE";
 })(ShapeVariant || (ShapeVariant = {}));
 
-// Angular General
-class KiwiChartComponent {
-    constructor(cd) {
-        this.cd = cd;
+const ZOOM_IN = "M39.35 40.45 26.6 27.7q-1.55 1.35-3.6 2.025-2.05.675-4 .675-4.9 0-8.225-3.325Q7.45 23.75 7.45 18.9q0-4.9 3.325-8.225Q14.1 7.35 18.95 7.35q4.85 0 8.225 3.325t3.375 8.175q0 2.1-.725 4.1-.725 2-2.025 3.45l12.8 12.75ZM19 28.65q4.15 0 6.975-2.8 2.825-2.8 2.825-7 0-4.15-2.825-6.95T19 9.1q-4.2 0-7 2.8t-2.8 6.95q0 4.2 2.8 7t7 2.8Zm-.9-5.1V19.7h-3.85v-1.75h3.85v-3.8h1.75v3.8h3.8v1.75h-3.8v3.85Z";
+const ZOOM_OUT = "M41.25 39.35 29.55 27.7q-1.5 1.25-3.525 1.975Q24 30.4 22.05 30.4q-2.1 0-3.975-.725T14.9 27.65l1.2-1.2q1.2 1.1 2.65 1.65 1.45.55 3.25.55 4.2 0 7-2.8t2.8-7q0-4.15-2.8-6.95t-7-2.8q-4.15 0-7 2.8-2.85 2.8-2.75 6.95l3.2-3.4 1.3 1.3-5.35 5.35-5.3-5.35 1.3-1.3 3.05 3.3q0-4.85 3.4-8.125Q17.25 7.35 22 7.35q4.9 0 8.225 3.325Q33.55 14 33.55 18.85q0 2.1-.75 4.1-.75 2-1.95 3.45L42.5 38.05Z";
+const SAVE_AS_SVG = "M11.3 40.05q-1.35 0-2.35-1t-1-2.35V11.3q0-1.4 1-2.375 1-.975 2.35-.975h25.4q1.4 0 2.375.975.975.975.975 2.375v25.4q0 1.35-.975 2.35t-2.375 1Zm0-1.75h25.4q.6 0 1.1-.5.5-.5.5-1.1V11.3q0-.6-.5-1.1-.5-.5-1.1-.5H11.3q-.6 0-1.1.5-.5.5-.5 1.1v25.4q0 .6.5 1.1.5.5 1.1.5Zm4.1-5.15h17.65l-5.5-7.3-5.2 6.45-3.3-3.85ZM9.7 38.3V9.7v28.6Z";
+const RESTORE = "M24.2 25.65q-.65 0-1.125-.475T22.6 24q0-.7.475-1.2t1.175-.5q.65 0 1.175.525T25.95 24q0 .7-.55 1.175-.55.475-1.2.475Zm.1 14.55q-6.4 0-11.1-4.25Q8.5 31.7 8.1 25.4h1.8q.5 5.55 4.6 9.3 4.1 3.75 9.75 3.75 6.05 0 10.225-4.225T38.65 24.05q0-6.05-4.2-10.275Q30.25 9.55 24.3 9.55q-3.2 0-6.025 1.3t-4.875 3.6h4.95v1.75H10.4v-8h1.75v5.05q2.25-2.6 5.475-4.025Q20.85 7.8 24.3 7.8q3.3 0 6.225 1.25t5.125 3.475q2.2 2.225 3.475 5.175Q40.4 20.65 40.4 24q0 3.35-1.275 6.3-1.275 2.95-3.475 5.175-2.2 2.225-5.125 3.475T24.3 40.2Z";
+const ADD_POINT = "M222.895-189.538q-22.456 0-37.906-15.451-15.451-15.45-15.451-37.906v-474.21q0-22.456 15.451-37.906 15.45-15.451 38.088-15.451h322.346v28.924H223.077q-10.769 0-17.692 6.923t-6.923 17.692v473.846q0 10.769 6.923 17.692t17.692 6.923h473.846q10.77 0 17.693-6.923 6.923-6.923 6.923-17.692v-322.346h28.923v322.346q0 22.638-15.451 38.088-15.45 15.451-37.906 15.451h-474.21Zm78.028-121.539h28.923v-243.077h-28.923v243.077Zm144.923 0h28.923v-337.846h-28.923v337.846Zm144.308 0h28.923v-148.308h-28.923v148.308Zm100-327.692v-71.385h-71.385v-28.923h71.385v-71.385h28.923v71.385h71.385v28.923h-71.385v71.385h-28.923ZM460-480Z";
+
+// Angular Imports
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    LineChart,
+    CanvasRenderer,
+    LegendComponent,
+    DataZoomComponent,
+    ToolboxComponent,
+]);
+class KiwiChartDirective {
+    /**
+    * If you resize the page, the chart is automatically re-rendered wiht the right proportions.
+    *
+    * @memberof EnchartingDirective
+    */
+    onResize() {
+        if (this.echartsInstance) {
+            this.echartsInstance.resize();
+        }
+    }
+    constructor(el) {
+        this.el = el;
         /**
          * The Chart Object rendered by the canvas. For all the available options refer
          * to Chart interface in the models folder.
          *
          * @type {(Chart | null)}
-         * @memberof KiwiChartComponent
+         * @memberof KiwiChartDirective
          */
         this.chart = null;
         /**
@@ -59,26 +78,18 @@ class KiwiChartComponent {
          * of the chart can take the whole available space in the page.
          *
          * @type {string}
-         * @memberof KiwiChartComponent
+         * @memberof KiwiChartDirective
          */
         this.width = '100%';
         this.height = '480px';
-        /**
-         * This property simply activates or not the dark theme of the chart
-         * defined by the Echarts library. In addition the background color can be custom
-         * so that the chart can match the background of the application in which it's used.
-         *
-         * @type {boolean}
-         * @memberof KiwiChartComponent
-         */
-        this.darkTheme = false;
+        this.chartInit = new EventEmitter();
         /**
          * Output event used to emit to the father component the coordinates
          * of the point clicked in the chart area. This functionality to be used must
          * have the property "clickToAddPoint" in the Chart object set to true.
          *
          * @type {EventEmitter<BasePoint>}
-         * @memberof KiwiChartComponent
+         * @memberof KiwiChartDirective
          */
         this.addPoint = new EventEmitter();
         /**
@@ -86,158 +97,68 @@ class KiwiChartComponent {
          * x and y coordinates relative to the chart reference system.
          *
          * @type {EventEmitter<BasePoint>}
-         * @memberof KiwiChartComponent
+         * @memberof KiwiChartDirective
          */
         this.chartHover = new EventEmitter();
         /**
-         * The object used by echarts to initially create the Chart.
-         * Has a default configuration that can be totally overrided using specific properties.
+         * This property simply activates or not the dark theme of the chart
+         * defined by the Echarts library. In addition the background color can be custom
+         * so that the chart can match the background of the application in which it's used.
          *
-         * @type {EChartsOption}
-         * @memberof KiwiChartComponent
+         * @type {boolean}
+         * @memberof KiwiChartDirective
          */
-        this.chartOption = {
-            title: {
-                text: 'Kiwi Chart'
-            },
-            xAxis: {
-                name: 'X'
-            },
-            yAxis: {
-                name: 'Y'
-            },
-            series: [
-                {
-                    type: TraceType.LINE,
-                    data: [[0, 0]]
-                }
-            ]
-        };
+        this.darkTheme = false;
+        this.darkThemeBackground = null;
         /**
          * The instance of the Chart.
          *
-         * @type {(ECharts | null)}
-         * @memberof KiwiChartComponent
+         * @type {ECharts}
+         * @memberof KiwiChartDirective
          */
         this.echartsInstance = null;
-        /**
-         * Used to perform actions (as point addition based on the cursor position) on the chart.
-         *
-         * @type {(zrender.ZRenderType | null)}
-         * @memberof KiwiChartComponent
-         */
-        this.zr = null;
-        /**
-         * Subject used to unsubscribe once the component gets destroyed.
-         *
-         * @private
-         * @type {Subject<void>}
-         * @memberof KiwiChartComponent
-         */
-        this.destroyed$ = new Subject();
         /**
          * Default number of decimals that can have
          * the values on the x and y axes.
          *
          * @private
          * @type {number}
-         * @memberof KiwiChartComponent
+         * @memberof KiwiChartDirective
          */
         this.MAX_DECIMALS = 3;
         this.legendSelected = {};
         this.isLegendClicked = false;
-    }
-    ngOnInit() {
-        /**
-         * This is a manual change detection running every 200ms, the memory should not be much afflicted.
-         * It's necessary because when interacting with the chart (for example addPoint),
-         * Angular loses the change detection and the point is not added in the chart canvas.
-         */
-        interval(200)
-            .pipe(takeUntil(this.destroyed$))
-            .subscribe({
-            next: () => {
-                this.cd.detectChanges();
-            }
-        });
-    }
-    onChartInit(ec) {
-        this.echartsInstance = ec;
-        this.setupZrEventHandler(ec);
-        this.setupLegendEventHandler(ec);
-    }
-    /**
-     * intercept a selection change event on the legend and save the state
-     * of all selections on the supporting variable legendSelected
-     *
-     * @param ec
-     */
-    setupLegendEventHandler(ec) {
-        if (this.echartsInstance != null) {
-            this.echartsInstance.on('legendselectchanged', (params) => {
-                this.isLegendClicked = true;
-                this.legendSelected = params.selected;
-            });
-        }
-    }
-    setupZrEventHandler(ec) {
-        this.zr = ec.getZr();
-        /**
-         * Intercepts the click event on the chart (if the clickToAddPoint property is set to true)
-         * and emits the point coordinates to the father component.
-         */
-        this.zr.on('click', params => {
-            let option = ec.getOption();
-            let active = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
-            if (active && this.chart?.clickToAddPoint) {
-                const pointInPixel = [params.offsetX, params.offsetY];
-                const pointInGrid = ec.convertFromPixel('grid', pointInPixel);
-                if (ec.containPixel('grid', pointInPixel) && pointInGrid) {
-                    let newPoint = {
-                        x: +pointInGrid[0].toFixed(3),
-                        y: +pointInGrid[1].toFixed(3)
-                    };
-                    this.addPoint.emit(newPoint);
-                }
-            }
-        });
         /**
-         * This is used perform custom actions when the mouse is hovering the chart area
+         * Used to perform actions (as point addition based on the cursor position) on the chart.
+         *
+         * @type {(zrender.ZRenderType | null)}
+         * @memberof KiwiChartComponent
          */
-        this.zr.on('mousemove', params => {
-            const pointInPixel = [params.offsetX, params.offsetY];
-            const pointInGrid = ec.convertFromPixel('grid', pointInPixel);
-            /*
-             * Logic to emit to the father component the x and y cdinates when the
-             * cursor is hovering the chart area .
-             */
-            if (ec.containPixel('grid', pointInPixel) && pointInGrid) {
-                let newPoint = {
-                    x: +pointInGrid[0].toFixed(3),
-                    y: +pointInGrid[1].toFixed(3)
-                };
-                this.chartHover.emit(newPoint);
-            }
-            /* Logic to change the cursor icon when the "Click to Add Point" feature is active and viceversa. */
-            const option = ec.getOption();
-            const addPointIsActive = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
-            if (addPointIsActive) {
-                this.zr?.setCursorStyle(ec.containPixel('grid', pointInPixel) ? 'copy' : 'default');
-            }
-        });
+        this.zr = null;
     }
-    getLegendItemSelection(shape) {
-        if (this.isLegendClicked) {
-            return this.legendSelected[shape.name] ?? true;
-        }
-        else {
-            return shape.selectedByDefault ?? true;
+    ngAfterViewInit() {
+        if (this.chart) {
+            this.renderChart(this.chart);
         }
     }
     ngOnChanges(changes) {
         let chart = changes['chart']?.currentValue;
+        if (this.echartsInstance) {
+            // Every time we have an external change we
+            // destroy the chart and re-initialize it
+            this.echartsInstance.dispose();
+            this.renderChart(chart);
+        }
+    }
+    renderChart(chart) {
+        // Update ElementRef styles
+        this.el.nativeElement.style.width = this.width;
+        this.el.nativeElement.style.height = this.height;
+        this.echartsInstance = init(this.el.nativeElement, this.darkTheme ? 'dark' : 'default', {
+            renderer: 'svg'
+        });
         if (chart) {
-            this.chartOption = {
+            this.echartsInstance.setOption({
                 title: {
                     text: chart.title,
                 },
@@ -265,46 +186,64 @@ class KiwiChartComponent {
                             },
                             emphasis: {
                                 iconStyle: {
-                                    textPosition: 'top'
+                                    textPosition: 'top',
+                                    textPadding: 5
                                 }
-                            }
+                            },
+                            icon: {
+                                zoom: ZOOM_IN,
+                                back: ZOOM_OUT
+                            },
                         },
                         saveAsImage: {
                             emphasis: {
                                 iconStyle: {
-                                    textPosition: 'top'
+                                    textPosition: 'top',
+                                    textPadding: 5
                                 }
-                            }
+                            },
+                            icon: SAVE_AS_SVG,
                         },
                         restore: {
                             emphasis: {
                                 iconStyle: {
-                                    textPosition: 'top'
+                                    textPosition: 'top',
+                                    textPadding: 5
                                 }
-                            }
+                            },
+                            icon: RESTORE,
                         },
                         myAddPoint: {
                             show: chart.clickToAddPoint ?? false,
                             title: chart.addPointCustomName ?? 'Add Point',
-                            icon: this.darkTheme ? ADD_POINT_IMG_OFF_DARK : ADD_POINT_IMG_OFF_LIGHT,
-                            iconStatus: false,
+                            icon: ADD_POINT,
                             onclick: () => {
-                                let option = this.echartsInstance?.getOption();
-                                let status = option.toolbox[0].feature.myAddPoint.iconStatus;
-                                this.echartsInstance?.setOption({
-                                    toolbox: {
-                                        feature: {
-                                            myAddPoint: {
-                                                iconStatus: !status,
-                                                icon: !status ? ADD_POINT_IMG_ON : this.darkTheme ? ADD_POINT_IMG_OFF_DARK : ADD_POINT_IMG_OFF_LIGHT
+                                if (this.echartsInstance) {
+                                    const option = this.echartsInstance.getOption();
+                                    const toolbox = option.toolbox;
+                                    if (toolbox) {
+                                        const status = toolbox[0].feature?.['myAddPoint']?.iconStatus;
+                                        const offColor = 'rgb(102,102,102)';
+                                        const highlightColor = 'rgb(62,152,197)';
+                                        this.echartsInstance.setOption({
+                                            toolbox: {
+                                                feature: {
+                                                    myAddPoint: {
+                                                        iconStatus: !status,
+                                                        iconStyle: {
+                                                            borderColor: !status ? highlightColor : offColor
+                                                        }
+                                                    }
+                                                }
                                             }
-                                        }
+                                        });
                                     }
-                                });
+                                }
                             },
                             emphasis: {
                                 iconStyle: {
-                                    textPosition: 'top'
+                                    textPosition: 'top',
+                                    textPadding: 5
                                 }
                             }
                         }
@@ -377,10 +316,12 @@ class KiwiChartComponent {
                 },
                 series: this.createSeries(chart.shapes),
                 animation: chart.hasAnimations,
-                animationDuration: chart.animationDuration ?? 500,
+                animationDuration: chart.animationDuration ?? 250,
                 animationEasing: 'cubicOut'
-            };
+            }, true, true);
         }
+        this.setupZrEventHandler(this.echartsInstance);
+        this.setupLegendEventHandler(this.echartsInstance);
     }
     createSeries(shapes) {
         let series = [];
@@ -441,40 +382,185 @@ class KiwiChartComponent {
             smooth: trace.smooth ?? false
         };
     }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
+    getLegendItemSelection(shape) {
+        if (this.isLegendClicked) {
+            return this.legendSelected[shape.name] ?? true;
+        }
+        else {
+            return shape.selectedByDefault ?? true;
+        }
+    }
+    /**
+     * intercept a selection change event on the legend and save the state
+     * of all selections on the supporting variable legendSelected
+     *
+     * @param ec
+     */
+    setupLegendEventHandler(ec) {
+        if (this.echartsInstance != null) {
+            this.echartsInstance.on('legendselectchanged', (params) => {
+                this.isLegendClicked = true;
+                this.legendSelected = params.selected;
+            });
+        }
+    }
+    setupZrEventHandler(ec) {
+        this.zr = ec.getZr();
+        /**
+         * Intercepts the click event on the chart (if the clickToAddPoint property is set to true)
+         * and emits the point coordinates to the father component.
+         */
+        this.zr.on('click', params => {
+            let option = ec.getOption();
+            let active = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
+            if (active && this.chart?.clickToAddPoint) {
+                const pointInPixel = [params.offsetX, params.offsetY];
+                const pointInGrid = ec.convertFromPixel('grid', pointInPixel);
+                if (ec.containPixel('grid', pointInPixel) && pointInGrid) {
+                    let newPoint = {
+                        x: +pointInGrid[0].toFixed(3),
+                        y: +pointInGrid[1].toFixed(3)
+                    };
+                    this.addPoint.emit(newPoint);
+                }
+            }
+        });
+        /**
+         * This is used perform custom actions when the mouse is hovering the chart area
+         */
+        this.zr.on('mousemove', params => {
+            const pointInPixel = [params.offsetX, params.offsetY];
+            const pointInGrid = ec.convertFromPixel('grid', pointInPixel);
+            /*
+             * Logic to emit to the father component the x and y cdinates when the
+             * cursor is hovering the chart area .
+             */
+            if (ec.containPixel('grid', pointInPixel) && pointInGrid) {
+                let newPoint = {
+                    x: +pointInGrid[0].toFixed(3),
+                    y: +pointInGrid[1].toFixed(3)
+                };
+                this.chartHover.emit(newPoint);
+            }
+            /* Logic to change the cursor icon when the "Click to Add Point" feature is active and viceversa. */
+            const option = ec.getOption();
+            const addPointIsActive = option?.toolbox?.[0]?.feature?.myAddPoint?.iconStatus;
+            if (addPointIsActive) {
+                this.zr?.setCursorStyle(ec.containPixel('grid', pointInPixel) ? 'copy' : 'default');
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.1", type: KiwiChartDirective, isStandalone: true, selector: "div[kiwi-chart]", inputs: { chart: "chart", width: "width", height: "height", darkTheme: "darkTheme", darkThemeBackground: "darkThemeBackground" }, outputs: { chartInit: "chartInit", addPoint: "addPoint", chartHover: "chartHover" }, host: { listeners: { "window:resize": "onResize($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'div[kiwi-chart]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { chart: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], chartInit: [{
+                type: Output
+            }], addPoint: [{
+                type: Output
+            }], chartHover: [{
+                type: Output
+            }], darkTheme: [{
+                type: Input
+            }], darkThemeBackground: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize', ['$event']]
+            }] } });
+
+// Angular General
+class KiwiChartComponent {
+    constructor() {
+        /**
+         * The Chart Object rendered by the canvas. For all the available options refer
+         * to Chart interface in the models folder.
+         *
+         * @type {(Chart | null)}
+         * @memberof KiwiChartComponent
+         */
+        this.chart = null;
+        /**
+         * Width and Height of the chart area. The dimensions refer to the father component
+         * into which the kiwi-chart is inserted. For example in an empty page the width/height
+         * of the chart can take the whole available space in the page.
+         *
+         * @type {string}
+         * @memberof KiwiChartComponent
+         */
+        this.width = '100%';
+        this.height = '480px';
+        /**
+         * This property simply activates or not the dark theme of the chart
+         * defined by the Echarts library. In addition the background color can be custom
+         * so that the chart can match the background of the application in which it's used.
+         *
+         * @type {boolean}
+         * @memberof KiwiChartComponent
+         */
+        this.darkTheme = false;
+        this.darkThemeBackground = null;
+        /**
+         * Output event used to emit to the father component the coordinates
+         * of the point clicked in the chart area. This functionality to be used must
+         * have the property "clickToAddPoint" in the Chart object set to true.
+         *
+         * @type {EventEmitter<BasePoint>}
+         * @memberof KiwiChartComponent
+         */
+        this.addPoint = new EventEmitter();
+        /**
+         * When the cursor hovers the chart area it emits to the father component the
+         * x and y coordinates relative to the chart reference system.
+         *
+         * @type {EventEmitter<BasePoint>}
+         * @memberof KiwiChartComponent
+         */
+        this.chartHover = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KiwiChartComponent, isStandalone: true, selector: "kiwi-chart", inputs: { chart: "chart", width: "width", height: "height", darkTheme: "darkTheme", darkThemeBackground: "darkThemeBackground" }, outputs: { addPoint: "addPoint", chartHover: "chartHover" }, usesOnChanges: true, ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: KiwiChartComponent, isStandalone: true, selector: "kiwi-chart", inputs: { chart: "chart", width: "width", height: "height", darkTheme: "darkTheme", darkThemeBackground: "darkThemeBackground" }, outputs: { addPoint: "addPoint", chartHover: "chartHover" }, ngImport: i0, template: `
     <div 
-      echarts 
-      [options]="chartOption" 
-      [ngStyle]="{
-        'width': width,
-        'height': height
-      }"
-      (chartInit)="onChartInit($event)"
-      [theme]="darkTheme ? 'dark' : ''"
+      kiwi-chart 
+      [chart]="chart" 
+      [width]="width"
+      [height]="height"
+      [darkTheme]="darkTheme"
+      [darkThemeBackground]="darkThemeBackground"
+      (addPoint)="addPoint.emit($event)"
+      (chartHover)="chartHover.emit($event)"
     ></div> 
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "initOpts", "merge", "autoResize", "loading", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartHighlight", "chartDownplay", "chartSelectChanged", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendLegendSelectAll", "chartLegendLegendInverseSelect", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartGraphRoam", "chartGeoRoam", "chartTreeRoam", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartGeoSelectChanged", "chartGeoSelected", "chartGeoUnselected", "chartAxisAreaSelected", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartGlobalCursorTaken", "chartRendered", "chartFinished"], exportAs: ["echarts"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: KiwiChartDirective, selector: "div[kiwi-chart]", inputs: ["chart", "width", "height", "darkTheme", "darkThemeBackground"], outputs: ["chartInit", "addPoint", "chartHover"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'kiwi-chart', template: `
     <div 
-      echarts 
-      [options]="chartOption" 
-      [ngStyle]="{
-        'width': width,
-        'height': height
-      }"
-      (chartInit)="onChartInit($event)"
-      [theme]="darkTheme ? 'dark' : ''"
+      kiwi-chart 
+      [chart]="chart" 
+      [width]="width"
+      [height]="height"
+      [darkTheme]="darkTheme"
+      [darkThemeBackground]="darkThemeBackground"
+      (addPoint)="addPoint.emit($event)"
+      (chartHover)="chartHover.emit($event)"
     ></div> 
-  `, standalone: true, imports: [NgxEchartsDirective, NgStyle] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { chart: [{
-                type: Input
+  `, standalone: true, imports: [KiwiChartDirective] }]
+        }], propDecorators: { chart: [{
+                type: Input,
+                args: [{ required: true }]
             }], width: [{
                 type: Input
             }], height: [{
@@ -489,37 +575,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Output
             }] } });
 
-echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    LineChart,
-    CanvasRenderer,
-    LegendComponent,
-    DataZoomComponent,
-    ToolboxComponent,
-    ScatterChart
-]);
-class KiwiChartModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartModule, imports: [CommonModule, i1.NgxEchartsModule, KiwiChartComponent], exports: [KiwiChartComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartModule, imports: [CommonModule,
-            NgxEchartsModule.forRoot({ echarts })] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: KiwiChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        NgxEchartsModule.forRoot({ echarts }),
-                        KiwiChartComponent
-                    ],
-                    exports: [
-                        KiwiChartComponent
-                    ]
-                }]
-        }] });
-
 /*
  * Public API Surface of chart
  */
@@ -528,5 +583,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ADD_POINT_IMG_OFF_DARK, ADD_POINT_IMG_OFF_LIGHT, ADD_POINT_IMG_ON, AxisType, KiwiChartComponent, KiwiChartModule, PointSymbol, ShapeVariant, TraceStyle, TraceType };
+export { AxisType, KiwiChartComponent, PointSymbol, ShapeVariant, TraceStyle, TraceType };
 //# sourceMappingURL=kiwibit-chart.mjs.map