カスタム要素a-jet-bar-chartの実装

script.js

(function ($, region, util, widgetUtil, debug) {
    "use strict";

    class JETBarChart extends HTMLElement {
        chart;
        chartId;
        constructor() {
            super();
            this.chartId = new Date().getTime();
            debug.info("%s, constructor", this.chartId);
        }

        connectedCallback() {
            debug.info("%s, %s, connectedCallback, %s", this.chartId, new Date().getTime(), this.isConnected);
            const element = this,
                element$ = $(element);

            require(["ojs/ojchart"], function () {

                const value  = JSON.parse(element.getAttribute("value"));
                let series   = [ { "items": value } ];

                const color = element.getAttribute("color");
                if ( color ) {
                    series[0].color = color;
                };

                let config = { "series": series };

                const groups = JSON.parse(element.getAttribute("groups"));
                if ( groups ) {
                    config.groups = groups;
                };

                const orientation = element.getAttribute("orientation");
                if ( orientation ) {
                    config.orientation = orientation;
                };
                
                config.animationOnDisplay = "auto";
                config.animationOnDataChange = "auto";
                config.hoverBehavior="dim";
                
                debug.info(config);
                element$.ojChart(config);
            });
        }

        disconnectedCallback() {
            debug.info("%s, %s, disconnectedCallback", this.chartId, new Date().getTime());
            // Queue Micro Task is needed to prevent error when item is moved in dome e.g. in IG 
            queueMicrotask(() => {
                if (!this.isConnected) {
                    debug.info("%s, %s, queueMicrotask", this.chartId, new Date().getTime());
                    $(this).remove();
                }
            });
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        if ( window.customElements.get("a-jet-bar-chart") === undefined ) {
            debug.info("define custom element");
            window.customElements.define("a-jet-bar-chart", JETBarChart);
        };
    });

})(apex.jQuery, apex.region, apex.util, apex.widget.util, apex.debug);