@kiwibit/chart 20.0.0 → 21.0.0

package/fesm2022/kiwibit-chart.mjs

@@ -0,0 +1,591 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, HostListener, Input, Output, Directive, Component } from '@angular/core';
+import * as echarts from 'echarts/core';
+import { TitleComponent, TooltipComponent, GridComponent, LegendComponent, DataZoomComponent, ToolboxComponent } from 'echarts/components';
+import { LineChart, ScatterChart } from 'echarts/charts';
+import { CanvasRenderer } from 'echarts/renderers';
+
+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 = {}));
+
+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";
+const highlightColor = '#98BD13';
+
+// Angular Imports
+echarts.use([
+    TitleComponent,
+    TooltipComponent,
+    GridComponent,
+    LineChart,
+    ScatterChart,
+    CanvasRenderer,
+    LegendComponent,
+    DataZoomComponent,
+    ToolboxComponent,
+]);
+class KiwiChartDirective {
+    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 KiwiChartDirective
+     */
+    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 KiwiChartDirective
+     */
+    width = '100%';
+    height = '480px';
+    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 KiwiChartDirective
+     */
+    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 KiwiChartDirective
+     */
+    chartHover = new EventEmitter();
+    /**
+     * 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 KiwiChartDirective
+     */
+    darkTheme = false;
+    darkThemeBackground = null;
+    /**
+     * The instance of the Chart.
+     *
+     * @type {ECharts}
+     * @memberof KiwiChartDirective
+     */
+    echartsInstance = null;
+    /**
+     * Default number of decimals that can have
+     * the values on the x and y axes.
+     *
+     * @private
+     * @type {number}
+     * @memberof KiwiChartDirective
+     */
+    MAX_DECIMALS = 3;
+    legendSelected = {};
+    isLegendClicked = false;
+    /**
+     * Used to perform actions (as point addition based on the cursor position) on the chart.
+     *
+     * @type {(zrender.ZRenderType | null)}
+     * @memberof KiwiChartComponent
+     */
+    zr = null;
+    /**
+    * 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;
+    }
+    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 = echarts.init(this.el.nativeElement, this.darkTheme ? 'dark' : 'default', {
+            renderer: 'svg'
+        });
+        if (chart) {
+            this.echartsInstance.setOption({
+                title: {
+                    text: chart.title,
+                    left: 0
+                },
+                grid: {
+                    id: 0,
+                    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',
+                                    textPadding: 5,
+                                    borderColor: highlightColor
+                                }
+                            },
+                            icon: {
+                                zoom: ZOOM_IN,
+                                back: ZOOM_OUT
+                            },
+                        },
+                        saveAsImage: {
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top',
+                                    textPadding: 5
+                                }
+                            },
+                            icon: SAVE_AS_SVG,
+                        },
+                        restore: {
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top',
+                                    textPadding: 5
+                                }
+                            },
+                            icon: RESTORE,
+                        },
+                        myAddPoint: {
+                            show: chart.clickToAddPoint ?? false,
+                            title: chart.addPointCustomName ?? 'Add Point',
+                            icon: ADD_POINT,
+                            onclick: () => {
+                                if (this.echartsInstance) {
+                                    const option = this.echartsInstance.getOption();
+                                    const toolbox = option.toolbox;
+                                    if (toolbox) {
+                                        const status = toolbox[0].feature?.['myAddPoint']?.iconStatus;
+                                        const offColor = '#6578BA';
+                                        this.echartsInstance.setOption({
+                                            toolbox: {
+                                                feature: {
+                                                    myAddPoint: {
+                                                        iconStatus: !status,
+                                                        iconStyle: {
+                                                            borderColor: !status ? highlightColor : offColor
+                                                        }
+                                                    }
+                                                }
+                                            }
+                                        });
+                                    }
+                                }
+                            },
+                            emphasis: {
+                                iconStyle: {
+                                    textPosition: 'top',
+                                    textPadding: 5,
+                                    borderColor: highlightColor
+                                }
+                            }
+                        }
+                    },
+                },
+                dataZoom: [
+                    {
+                        type: 'inside',
+                        xAxisIndex: [0],
+                        throttle: 0,
+                        filterMode: 'none',
+                        disabled: !chart.scrollToZoom
+                    },
+                    {
+                        type: 'inside',
+                        yAxisIndex: [0],
+                        throttle: 0,
+                        filterMode: 'none',
+                        disabled: !chart.scrollToZoom
+                    },
+                ],
+                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',
+                    top: 0,
+                    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 ?? 250,
+                animationEasing: 'cubicOut'
+            }, true, true);
+        }
+        this.setupZrEventHandler(this.echartsInstance);
+        this.setupLegendEventHandler(this.echartsInstance);
+    }
+    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
+        };
+    }
+    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({ gridIndex: 0 }, pointInPixel);
+                if (ec.containPixel({ gridIndex: 0 }, 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({ gridIndex: 0 }, pointInPixel);
+            /*
+             * Logic to emit to the father component the x and y coordinates when the
+             * cursor is hovering the chart area.
+             */
+            if (ec.containPixel({ gridIndex: 0 }, 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({ gridIndex: 0 }, pointInPixel) ? 'copy' : 'default');
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: KiwiChartDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.2", 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()" } }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", 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']
+            }] } });
+
+// Angular General
+class KiwiChartComponent {
+    /**
+     * 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
+     */
+    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
+     */
+    width = '100%';
+    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
+     */
+    darkTheme = false;
+    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
+     */
+    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
+     */
+    chartHover = new EventEmitter();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: KiwiChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.2", 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 
+      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: KiwiChartDirective, selector: "div[kiwi-chart]", inputs: ["chart", "width", "height", "darkTheme", "darkThemeBackground"], outputs: ["chartInit", "addPoint", "chartHover"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: KiwiChartComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'kiwi-chart', template: `
+    <div 
+      kiwi-chart 
+      [chart]="chart" 
+      [width]="width"
+      [height]="height"
+      [darkTheme]="darkTheme"
+      [darkThemeBackground]="darkThemeBackground"
+      (addPoint)="addPoint.emit($event)"
+      (chartHover)="chartHover.emit($event)"
+    ></div> 
+  `, imports: [KiwiChartDirective] }]
+        }], propDecorators: { chart: [{
+                type: Input,
+                args: [{ required: true }]
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], darkTheme: [{
+                type: Input
+            }], darkThemeBackground: [{
+                type: Input
+            }], addPoint: [{
+                type: Output
+            }], chartHover: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of chart
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AxisType, KiwiChartComponent, PointSymbol, ShapeVariant, TraceStyle, TraceType };
+//# sourceMappingURL=kiwibit-chart.mjs.map