@kiwibit/chart 15.0.0 → 16.0.0

package/{fesm2020 → fesm2022}/kiwibit-chart.mjs

@@ -10,374 +10,444 @@ import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZ
 import { LineChart, ScatterChart } 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_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";
-    TraceType["SCATTER"] = "scatter";
-})(TraceType || (TraceType = {}));
-var PointSymbol;
-(function (PointSymbol) {
-    PointSymbol["NONE"] = "none";
-    PointSymbol["CIRCLE"] = "circle";
-    PointSymbol["TRIANGLE"] = "triangle";
-    PointSymbol["PIN"] = "pin";
-    PointSymbol["DIAMOND"] = "diamond";
-})(PointSymbol || (PointSymbol = {}));
-var TraceStyle;
-(function (TraceStyle) {
-    TraceStyle["SOLID"] = "solid";
-    TraceStyle["DASHED"] = "dashed";
-    TraceStyle["DOTTED"] = "dotted";
-})(TraceStyle || (TraceStyle = {}));
-var AxisType;
-(function (AxisType) {
-    AxisType["VALUE"] = "value";
-})(AxisType || (AxisType = {}));
-var ShapeVariant;
-(function (ShapeVariant) {
-    ShapeVariant[ShapeVariant["TRACE"] = 0] = "TRACE";
+var TraceType;
+(function (TraceType) {
+    TraceType["LINE"] = "line";
+    TraceType["SCATTER"] = "scatter";
+})(TraceType || (TraceType = {}));
+var PointSymbol;
+(function (PointSymbol) {
+    PointSymbol["NONE"] = "none";
+    PointSymbol["CIRCLE"] = "circle";
+    PointSymbol["TRIANGLE"] = "triangle";
+    PointSymbol["PIN"] = "pin";
+    PointSymbol["DIAMOND"] = "diamond";
+})(PointSymbol || (PointSymbol = {}));
+var TraceStyle;
+(function (TraceStyle) {
+    TraceStyle["SOLID"] = "solid";
+    TraceStyle["DASHED"] = "dashed";
+    TraceStyle["DOTTED"] = "dotted";
+})(TraceStyle || (TraceStyle = {}));
+var AxisType;
+(function (AxisType) {
+    AxisType["VALUE"] = "value";
+})(AxisType || (AxisType = {}));
+var ShapeVariant;
+(function (ShapeVariant) {
+    ShapeVariant[ShapeVariant["TRACE"] = 0] = "TRACE";
 })(ShapeVariant || (ShapeVariant = {}));
 
-class KiwiChartComponent {
-    constructor(cd) {
-        this.cd = cd;
-        /**
-         * 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;
-        /**
-         * 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();
-        /**
-         * The object used by echarts to initially create the Chart.
-         *
-         * @type {EChartsOption}
-         * @memberof KiwiChartComponent
-         */
-        this.chartOption = {};
-        /**
-         * The instance of the Chart.
-         *
-         * @type {(ECharts | null)}
-         * @memberof KiwiChartComponent
-         */
-        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
-         */
-        this.MAX_DECIMALS = 3;
-    }
-    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(() => {
-            this.cd.detectChanges();
-        });
-    }
-    onChartInit(ec) {
-        this.echartsInstance = ec;
-        this.setupZrEventHandler(ec);
-    }
-    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');
-            }
-        });
-    }
-    ngOnChanges(changes) {
-        let chart = changes['chart']?.currentValue;
-        if (chart) {
-            this.chartOption = {
-                title: {
-                    text: chart.title,
-                },
-                grid: {
-                    width: '70%'
-                },
-                backgroundColor: this.darkTheme ? this.darkThemeBackground ?? '#303030' : 'transparent', tooltip: {
-                    axisPointer: {
-                        type: 'cross',
-                        crossStyle: {
-                            color: '#bebebe'
-                        }
-                    }
-                },
-                toolbox: {
-                    orient: 'horizontal',
-                    left: 'center',
-                    feature: {
-                        dataZoom: {
-                            brushStyle: {
-                                borderColor: '#000',
-                                borderWidth: 1,
-                                borderType: 'dashed'
-                            },
-                        },
-                        saveAsImage: {},
-                        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,
-                            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
-                                            }
-                                        }
-                                    }
-                                });
-                            }
-                        }
-                    },
-                },
-                dataZoom: [
-                    {
-                        type: 'inside',
-                        xAxisIndex: [0],
-                        throttle: 0,
-                        filterMode: 'none',
-                        disabled: !chart.scrollToZoom ?? true
-                    },
-                    {
-                        type: 'inside',
-                        yAxisIndex: [0],
-                        throttle: 0,
-                        filterMode: 'none',
-                        disabled: !chart.scrollToZoom ?? true
-                    },
-                ],
-                legend: {
-                    inactiveColor: this.darkTheme ? '#8b8b8b' : '#ccc',
-                    data: chart.shapes.map((shape) => ({
-                        name: shape.name,
-                        icon: 'circle'
-                    })),
-                    selected: chart.shapes.reduce((accumulator, shape) => ({ ...accumulator, [shape.name]: shape.selectedByDefault ?? true }), {}),
-                    show: chart.showLegend ?? false,
-                    orient: 'vertical',
-                    left: 'right',
-                    padding: [60, 20],
-                    type: 'scroll',
-                    textStyle: {
-                        width: 120,
-                        fontWeight: 'bold',
-                        overflow: 'break'
-                    }
-                },
-                xAxis: {
-                    type: chart.xAxisType,
-                    name: chart.xAxisUom ? `${chart.xAxisName} [ ${chart.xAxisUom} ]` : chart.xAxisName,
-                    nameLocation: 'middle',
-                    nameGap: 30,
-                    splitLine: {
-                        show: chart.showGrid ?? true,
-                        lineStyle: {
-                            color: this.darkTheme ? '#595959' : '#ccc'
-                        }
-                    },
-                    min: chart.xMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-                    max: chart.xMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-                },
-                yAxis: {
-                    type: chart.yAxisType,
-                    name: chart.yAxisUom ? `${chart.yAxisName} [ ${chart.yAxisUom} ]` : chart.yAxisName,
-                    nameLocation: 'middle',
-                    nameGap: 50,
-                    splitLine: {
-                        show: chart.showGrid ?? true,
-                        lineStyle: {
-                            color: this.darkTheme ? '#595959' : '#ccc'
-                        }
-                    },
-                    min: chart.yMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-                    max: chart.yMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
-                },
-                series: this.createSeries(chart.shapes),
-                animation: chart.hasAnimations,
-                animationDuration: chart.animationDuration ?? 500,
-                animationEasing: 'cubicOut'
-            };
-        }
-    }
-    createSeries(shapes) {
-        let series = [];
-        shapes.forEach((shape) => {
-            switch (shape.variant) {
-                case ShapeVariant.TRACE:
-                    series.push(this.createTrace(shape));
-                    break;
-                default:
-                    break;
-            }
-        });
-        return series;
-    }
-    createTrace(trace) {
-        return {
-            type: trace.type,
-            name: trace.name,
-            data: trace.points.map((point) => ({
-                value: [point.x, point.y],
-                symbol: point.symbol ?? 'circle',
-                name: point.name,
-                symbolSize: point.symbolSize ?? 2,
-                itemStyle: {
-                    color: point.color
-                },
-                emphasis: {
-                    disabled: true
-                },
-                label: {
-                    show: true,
-                    position: 'bottom',
-                    align: 'left',
-                    verticalAlign: 'bottom',
-                    formatter: () => `${point.name ?? ''}`,
-                    fontSize: 13,
-                    padding: [0, 0, 0, 10],
-                    width: 100,
-                    overflow: 'truncate',
-                    ellipsis: '...',
-                    fontWeight: 'bold',
-                    color: this.darkTheme ? '#fff' : '#000'
-                },
-                tooltip: {
+// Angular General
+class KiwiChartComponent {
+    constructor(cd) {
+        this.cd = cd;
+        /**
+         * 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;
+        /**
+         * 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();
+        /**
+         * The object used by echarts to initially create the Chart.
+         * Has a default configuration that can be totally overrided using specific properties.
+         *
+         * @type {EChartsOption}
+         * @memberof KiwiChartComponent
+         */
+        this.chartOption = {
+            title: {
+                text: 'Kiwi Chart'
+            },
+            xAxis: {
+                name: 'X'
+            },
+            yAxis: {
+                name: 'Y'
+            },
+            series: [
+                {
+                    type: TraceType.LINE,
+                    data: [[0, 0]]
+                }
+            ]
+        };
+        /**
+         * The instance of the Chart.
+         *
+         * @type {(ECharts | null)}
+         * @memberof KiwiChartComponent
+         */
+        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
+         */
+        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
+         */
+        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');
+            }
+        });
+    }
+    getLegendItemSelection(shape) {
+        if (this.isLegendClicked) {
+            return this.legendSelected[shape.name] ?? true;
+        }
+        else {
+            return shape.selectedByDefault ?? true;
+        }
+    }
+    ngOnChanges(changes) {
+        let chart = changes['chart']?.currentValue;
+        if (chart) {
+            this.chartOption = {
+                title: {
+                    text: chart.title,
+                },
+                grid: {
+                    width: '70%'
+                },
+                backgroundColor: this.darkTheme ? this.darkThemeBackground ?? '#303030' : 'transparent', tooltip: {
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#bebebe'
+                        }
+                    }
+                },
+                toolbox: {
+                    orient: 'horizontal',
+                    left: 'center',
+                    top: '25px',
+                    feature: {
+                        dataZoom: {
+                            brushStyle: {
+                                borderColor: '#000',
+                                borderWidth: 1,
+                                borderType: 'dashed'
+                            },
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top'
+                                }
+                            }
+                        },
+                        saveAsImage: {
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top'
+                                }
+                            }
+                        },
+                        restore: {
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top'
+                                }
+                            }
+                        },
+                        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,
+                            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
+                                            }
+                                        }
+                                    }
+                                });
+                            },
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top'
+                                }
+                            }
+                        }
+                    },
+                },
+                dataZoom: [
+                    {
+                        type: 'inside',
+                        xAxisIndex: [0],
+                        throttle: 0,
+                        filterMode: 'none',
+                        disabled: !chart.scrollToZoom ?? true
+                    },
+                    {
+                        type: 'inside',
+                        yAxisIndex: [0],
+                        throttle: 0,
+                        filterMode: 'none',
+                        disabled: !chart.scrollToZoom ?? true
+                    },
+                ],
+                legend: {
+                    inactiveColor: this.darkTheme ? '#8b8b8b' : '#ccc',
+                    data: chart.shapes.map((shape) => ({
+                        name: shape.name,
+                        icon: 'circle',
+                    })),
+                    selected: chart.shapes.reduce((accumulator, shape) => ({
+                        ...accumulator,
+                        [shape.name]: this.getLegendItemSelection(shape),
+                    }), {}),
+                    show: chart.showLegend ?? false,
+                    orient: 'vertical',
+                    left: 'right',
+                    padding: [60, 20],
+                    type: 'scroll',
+                    textStyle: {
+                        width: 120,
+                        fontWeight: 'bold',
+                        overflow: 'break'
+                    }
+                },
+                xAxis: {
+                    type: chart.xAxisType,
+                    name: chart.xAxisUom ? `${chart.xAxisName} [ ${chart.xAxisUom} ]` : chart.xAxisName,
+                    nameLocation: 'middle',
+                    nameGap: 30,
+                    splitLine: {
+                        show: chart.showGrid ?? true,
+                        lineStyle: {
+                            color: this.darkTheme ? '#595959' : '#ccc'
+                        }
+                    },
+                    min: chart.xMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
+                    max: chart.xMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
+                },
+                yAxis: {
+                    type: chart.yAxisType,
+                    name: chart.yAxisUom ? `${chart.yAxisName} [ ${chart.yAxisUom} ]` : chart.yAxisName,
+                    nameLocation: 'middle',
+                    nameGap: 50,
+                    splitLine: {
+                        show: chart.showGrid ?? true,
+                        lineStyle: {
+                            color: this.darkTheme ? '#595959' : '#ccc'
+                        }
+                    },
+                    min: chart.yMin?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
+                    max: chart.yMax?.toFixed(chart.maxAxesDecimals ?? this.MAX_DECIMALS),
+                },
+                series: this.createSeries(chart.shapes),
+                animation: chart.hasAnimations,
+                animationDuration: chart.animationDuration ?? 500,
+                animationEasing: 'cubicOut'
+            };
+        }
+    }
+    createSeries(shapes) {
+        let series = [];
+        shapes.forEach((shape) => {
+            switch (shape.variant) {
+                case ShapeVariant.TRACE:
+                    series.push(this.createTrace(shape));
+                    break;
+                default:
+                    break;
+            }
+        });
+        return series;
+    }
+    createTrace(trace) {
+        return {
+            type: trace.type,
+            name: trace.name,
+            data: trace.points.map((point) => ({
+                value: [point.x, point.y],
+                symbol: point.symbol ?? 'circle',
+                name: point.name,
+                symbolSize: point.symbolSize ?? 2,
+                itemStyle: {
+                    color: point.color
+                },
+                emphasis: {
+                    disabled: true
+                },
+                label: {
+                    show: true,
+                    position: 'bottom',
+                    align: 'left',
+                    verticalAlign: 'bottom',
+                    formatter: () => `${point.name ?? ''}`,
+                    fontSize: 13,
+                    padding: [0, 0, 0, 10],
+                    width: 100,
+                    overflow: 'truncate',
+                    ellipsis: '...',
+                    fontWeight: 'bold',
+                    color: this.darkTheme ? '#fff' : '#000'
+                },
+                tooltip: {
                     formatter: ({ value }) => `
               <strong>${this.chart?.xAxisName}:</strong> ${value[0].toFixed(3).replace(/[.,]000$/, "")}
               <br>
               <strong>${this.chart?.yAxisName}:</strong> ${value[1].toFixed(3).replace(/[.,]000$/, "")}
-            `
-                }
-            })),
-            color: trace.color,
-            lineStyle: {
-                width: trace.width,
-                type: trace.style,
-                opacity: trace.opacity ?? 1
-            },
-            smooth: trace.smooth ?? false
-        };
-    }
-    ngOnDestroy() {
-        this.destroyed$.next();
-        this.destroyed$.complete();
-    }
-}
-KiwiChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-KiwiChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.1", type: KiwiChartComponent, selector: "kiwi-chart", inputs: { chart: "chart", width: "width", height: "height", darkTheme: "darkTheme", darkThemeBackground: "darkThemeBackground" }, outputs: { addPoint: "addPoint", chartHover: "chartHover" }, usesOnChanges: true, ngImport: i0, template: `
+            `
+                }
+            })),
+            color: trace.color,
+            lineStyle: {
+                width: trace.width,
+                type: trace.style,
+                opacity: trace.opacity ?? 1
+            },
+            smooth: trace.smooth ?? false
+        };
+    }
+    ngOnDestroy() {
+        this.destroyed$.next();
+        this.destroyed$.complete();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: KiwiChartComponent, selector: "kiwi-chart", inputs: { chart: "chart", width: "width", height: "height", darkTheme: "darkTheme", darkThemeBackground: "darkThemeBackground" }, outputs: { addPoint: "addPoint", chartHover: "chartHover" }, usesOnChanges: true, ngImport: i0, template: `
     <div 
       echarts 
       [options]="chartOption" 
@@ -388,9 +458,10 @@ KiwiChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ver
       (chartInit)="onChartInit($event)"
       [theme]="darkTheme ? 'dark' : ''"
     ></div> 
-  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgxEchartsDirective, selector: "echarts, [echarts]", inputs: ["options", "theme", "loading", "initOpts", "merge", "autoResize", "loadingType", "loadingOpts"], outputs: ["chartInit", "optionsError", "chartClick", "chartDblClick", "chartMouseDown", "chartMouseMove", "chartMouseUp", "chartMouseOver", "chartMouseOut", "chartGlobalOut", "chartContextMenu", "chartLegendSelectChanged", "chartLegendSelected", "chartLegendUnselected", "chartLegendScroll", "chartDataZoom", "chartDataRangeSelected", "chartTimelineChanged", "chartTimelinePlayChanged", "chartRestore", "chartDataViewChanged", "chartMagicTypeChanged", "chartPieSelectChanged", "chartPieSelected", "chartPieUnselected", "chartMapSelectChanged", "chartMapSelected", "chartMapUnselected", "chartAxisAreaSelected", "chartFocusNodeAdjacency", "chartUnfocusNodeAdjacency", "chartBrush", "chartBrushEnd", "chartBrushSelected", "chartRendered", "chartFinished"], exportAs: ["echarts"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartComponent, decorators: [{
-            type: Component,
+  `, isInline: true, styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartComponent, decorators: [{
+            type: Component,
             args: [{ selector: 'kiwi-chart', template: `
     <div 
       echarts 
@@ -402,64 +473,63 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImpor
       (chartInit)="onChartInit($event)"
       [theme]="darkTheme ? 'dark' : ''"
     ></div> 
-  ` }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { chart: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], darkTheme: [{
-                type: Input
-            }], darkThemeBackground: [{
-                type: Input
-            }], addPoint: [{
-                type: Output
-            }], chartHover: [{
-                type: Output
+  ` }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { chart: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkTheme: [{
+                type: Input
+            }], darkThemeBackground: [{
+                type: Input
+            }], addPoint: [{
+                type: Output
+            }], chartHover: [{
+                type: Output
             }] } });
 
-echarts.use([
-    TitleComponent,
-    TooltipComponent,
-    GridComponent,
-    LineChart,
-    CanvasRenderer,
-    LegendComponent,
-    DataZoomComponent,
-    ToolboxComponent,
-    ScatterChart
-]);
-class KiwiChartModule {
-}
-KiwiChartModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-KiwiChartModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartModule, declarations: [KiwiChartComponent], imports: [CommonModule, i2.NgxEchartsModule], exports: [KiwiChartComponent] });
-KiwiChartModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartModule, imports: [CommonModule,
-        NgxEchartsModule.forRoot({ echarts })] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.1", ngImport: i0, type: KiwiChartModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        KiwiChartComponent
-                    ],
-                    imports: [
-                        CommonModule,
-                        NgxEchartsModule.forRoot({ echarts })
-                    ],
-                    exports: [
-                        KiwiChartComponent
-                    ]
-                }]
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    LineChart,
+    CanvasRenderer,
+    LegendComponent,
+    DataZoomComponent,
+    ToolboxComponent,
+    ScatterChart
+]);
+class KiwiChartModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartModule, declarations: [KiwiChartComponent], imports: [CommonModule, i2.NgxEchartsModule], exports: [KiwiChartComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartModule, imports: [CommonModule,
+            NgxEchartsModule.forRoot({ echarts })] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: KiwiChartModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        KiwiChartComponent
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgxEchartsModule.forRoot({ echarts })
+                    ],
+                    exports: [
+                        KiwiChartComponent
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of chart
+/*
+ * Public API Surface of chart
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * 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 };
 //# sourceMappingURL=kiwibit-chart.mjs.map
-//# sourceMappingURL=kiwibit-chart.mjs.map