@refinitiv-ui/elements 5.11.0 → 5.12.0-alpha.0

package/lib/interactive-chart/index.js

@@ -1,1093 +0,0 @@
-var InteractiveChart_1;
-import { __decorate } from "tslib";
-import { ResponsiveElement, html, css, DeprecationNotice } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/lib/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/lib/decorators/property.js';
-import { query } from '@refinitiv-ui/core/lib/decorators/query.js';
-import { VERSION } from '../version.js';
-import { color as parseColor } from '@refinitiv-ui/utils/lib/color.js';
-import { createChart as chart } from 'lightweight-charts';
-import '../tooltip/index.js';
-import { LegendStyle } from './helpers/types.js';
-import { merge } from './helpers/merge.js';
-const NOT_AVAILABLE_DATA = 'N/A';
-const NO_DATA_POINT = '--';
-/**
- * A charting component that allows you to create several use cases of financial chart.
- * By lightweight-charts library.
- * @slot legend - Slot to use for implementing custom legend.
- * @fires initialized - Dispatched when chart is initialized
- */
-let InteractiveChart = InteractiveChart_1 = class InteractiveChart extends ResponsiveElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Chart configurations for init chart
-         * @type {InteractiveChartConfig}
-        */
-        this.config = null;
-        /**
-         * Hide legend
-         */
-        this.disabledLegend = false;
-        /**
-         * Hide jump to latest data button
-         */
-        this.disabledJumpButton = false;
-        /**
-         * Deprecation noticed, used to display a warning message
-         * when deprecated features are used.
-        */
-        this.deprecationNotice = new DeprecationNotice('`legendstyle` attribute and property are deprecated. Use `legend-style` for attribute and `legendStyle` property instead.');
-        /**
-         * @ignore
-         * Array of series instances in chart
-         */
-        this.seriesList = [];
-        this.jumpButtonInitialized = false;
-        this.legendInitialized = false;
-        this.isCrosshairVisible = false;
-        this.chart = null;
-        this.rowLegend = null;
-        this.timeScale = null;
-        this.width = 0;
-        this.height = 0;
-        this.theme = null;
-        this.themeColors = [];
-        this.hasDataPoint = false;
-        /**
-         * Set opacity of color
-         * @param color color value
-         * @param opacity opacity value
-         * @returns color parse
-         */
-        this.setOpacity = (color, opacity) => {
-            const colorParse = parseColor(color);
-            if (colorParse && opacity !== null) {
-                colorParse.opacity = Number(opacity);
-            }
-            return colorParse;
-        };
-        /**
-         * Handle MouseEventHandler
-         * on event subscribeCrosshairMove
-         * for create row legend
-         * @param param MouseEventParams
-         * @returns {void} return undefined has out of boundary chart
-         */
-        /* istanbul ignore next */
-        this.handleCrosshairMoved = (param) => {
-            if (!param) {
-                return;
-            }
-            this.createRowLegend(this.rowLegend, param);
-        };
-        /**
-         *  Handle TimeRangeChangeEventHandler
-         *  on event subscribeVisibleTimeRangeChange
-         *  for create jump last button
-         *  @returns {void}
-         */
-        this.handleTimeRangeChange = () => {
-            let buttonVisible = false;
-            if (this.timeScale) {
-                buttonVisible = this.timeScale.scrollPosition() < 0;
-            }
-            this.jumpButtonContainer.style.display = buttonVisible ? 'block' : 'none';
-            // when update data in series then should always show last value
-            if (this.internalConfig.series.length === this.seriesList.length) {
-                // update legend only when chart already created
-                this.updateLegendWithLatestData();
-            }
-        };
-        /**
-         *  Handle event clicked scroll to realtime
-         *  @returns {void}
-         */
-        this.handleScrollToRealTime = () => {
-            if (this.timeScale !== null) {
-                this.timeScale.scrollToRealTime();
-            }
-        };
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Set legend style i.e. `horizontal`, `vertical`.
-     * @param {LegendStyle} value legend style value
-     * @type {"vertical" | "horizontal"} type of legend style
-     * @default vertical
-     **/
-    set legendStyle(value) {
-        const oldValue = this.legendStyle;
-        if (oldValue !== value) {
-            this._legendStyle = value;
-            this.requestUpdate('legend-style', oldValue);
-        }
-    }
-    get legendStyle() {
-        return this._legendStyle || this.deprecatedLegendStyle || LegendStyle.vertical;
-    }
-    /**
-     * @returns return config of property component
-     */
-    get internalConfig() {
-        // Check config is available
-        return this.config === null ? { series: [] } : this.config;
-    }
-    /**
-     * On Updated Lifecycle
-     * @param changedProperties changed properties
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('config')) {
-            if (this.width && this.height && this.config) {
-                this.createChart(this.width, this.height, this.config);
-            }
-        }
-        if (changedProperties.has('disabledLegend')) {
-            this.onLegendChange(this.disabledLegend);
-        }
-        if (changedProperties.has('disabledJumpButton')) {
-            this.onJumpButtonChange(this.disabledJumpButton);
-        }
-        if (changedProperties.has('deprecatedLegendStyle') || changedProperties.has('legend-style')) {
-            if (changedProperties.has('deprecatedLegendStyle')) {
-                this.deprecationNotice.show();
-            }
-            const oldLegendStyle = (changedProperties.get('legend-style') || changedProperties.get('deprecatedLegendStyle'));
-            this.onLegendStyleChange(this.legendStyle, oldLegendStyle);
-        }
-    }
-    /**
-     * Change chart size or re-create chart
-     * when window size changed
-     * @ignore
-     * @param size new size
-     * @returns {void}
-     */
-    resizedCallback(size) {
-        super.resizedCallback(size);
-        this.width = size.width;
-        this.height = size.height;
-        if (this.chart) {
-            this.applyChartOptionSize(this.width, this.height);
-        }
-        else {
-            this.createChart(this.width, this.height, this.config);
-        }
-    }
-    /**
-    * Legend value observer
-    * @param value Legend value
-    * @returns {void}
-    */
-    onLegendChange(value) {
-        if (!value) {
-            this.createLegend();
-        }
-        else {
-            this.removeLegend();
-        }
-    }
-    /**
-     * Legend style observer
-     * @param value Legend style value
-     * @param previousValue Previous legend style value
-     * @returns {void}
-     */
-    onLegendStyleChange(value, previousValue) {
-        if (value === 'horizontal') {
-            if (previousValue) {
-                this.legendContainer.classList.remove(previousValue);
-            }
-            this.legendContainer.classList.add(value);
-        }
-        else {
-            this.legendContainer.classList.remove(previousValue);
-        }
-    }
-    /**
-    * Jump last value observer
-    * @param value jump last value
-    * @returns {void}
-    */
-    onJumpButtonChange(value) {
-        if (!value) {
-            this.createJumpButton(this.width, this.height);
-        }
-        else {
-            this.removeJumpButton();
-        }
-    }
-    /**
-     * update width and height of chart
-     * @param width width of element
-     * @param height height of element
-     * @returns {void}
-     */
-    applyChartOptionSize(width, height) {
-        if (this.chart) {
-            // Resize chart after rendered.
-            this.chart.applyOptions({
-                width: width,
-                height: height
-            });
-            // Render jump last button
-            if (!this.disabledJumpButton) {
-                this.createJumpButton(width, height);
-            }
-        }
-    }
-    /**
-     * Create chart from user config
-     * @param width Width component size
-     * @param height Height component size
-     * @param config data config
-     * @returns {void}
-     */
-    createChart(width, height, config) {
-        this.destroyChart();
-        if (config && width && height) {
-            // init css variables
-            this.themeColors = this.colors();
-            this.theme = {
-                backgroundColor: this.getComputedVariable('--background-color'),
-                textColor: this.getComputedVariable('--text-color'),
-                scalePriceBorderColor: this.getComputedVariable('--scale-price-border-color'),
-                scaleTimesBorderColor: this.getComputedVariable('--scale-times-border-color'),
-                gridVertLineColor: this.getComputedVariable('--grid-vert-line-color'),
-                gridHorzLineColor: this.getComputedVariable('--grid-horz-line-color'),
-                crossHairColor: this.getComputedVariable('--cross-hair-color'),
-                chartUpColor: this.getComputedVariable('--chart-up-color'),
-                chartDownColor: this.getComputedVariable('--chart-down-color'),
-                fillOpacity: this.cssVarAsNumber('--fill-opacity', InteractiveChart_1.DEFAULT_FILL_OPACITY),
-                lineWidth: this.cssVarAsNumber('--line-width', InteractiveChart_1.DEFAULT_LINE_WIDTH)
-            };
-            this.chart = chart(this.chartContainer);
-            this.mergeConfig(config);
-            this.applyChartOptionSize(width, height);
-            if (!this.disabledLegend) {
-                this.createLegend();
-            }
-            if (this.legendStyle === 'horizontal') {
-                this.legendContainer.classList.add(this.legendStyle);
-            }
-            this.chart.timeScale().fitContent();
-            /*
-             * Fired when chart initialized
-             */
-            this.dispatchEvent(new CustomEvent('initialized'));
-        }
-    }
-    /**
-     * Destroy chart
-     * @returns {void}
-     */
-    destroyChart() {
-        if (this.chart) {
-            this.removeLegend();
-            this.removeJumpButton();
-            this.destroySeries();
-            this.chartContainer.textContent = '';
-        }
-    }
-    /**
-     * Remove jump button
-     * @returns {void}
-     */
-    removeJumpButton() {
-        if (this.chart) {
-            this.jumpButtonContainer.style.display = 'none';
-            this.chart.timeScale().unsubscribeVisibleTimeRangeChange(this.handleTimeRangeChange);
-            this.jumpButtonContainer.removeEventListener('tap', this.handleScrollToRealTime);
-            this.jumpButtonInitialized = false;
-        }
-    }
-    /**
-     * Remove legend element
-     * @returns {void}
-     */
-    removeLegend() {
-        if (this.chart) {
-            this.legendContainer.textContent = '';
-            this.chart.unsubscribeCrosshairMove(this.handleCrosshairMoved);
-            this.legendInitialized = false;
-        }
-    }
-    /**
-     * Customize config and create chart by theme
-     * @param config data configuration for create chart
-     * @returns {void}
-     */
-    mergeConfig(config) {
-        if (config && config.hasOwnProperty('series')) {
-            this.createSeriesOptions();
-            this.createSeries();
-        }
-        this.applyTheme(config);
-        this.applyLegendTextColor();
-        this.applyStylesBranding();
-        this.applyStyleLegend();
-    }
-    /**
-     * Create series
-     * @returns {void}
-     */
-    createSeries() {
-        // Loop for add multiple series
-        for (let index = 0; index < this.internalConfig.series.length; index++) {
-            const config = this.internalConfig.series[index];
-            const series = this.addSeriesConfig(config);
-            this.seriesList.push(series);
-        }
-    }
-    /**
-     * Destroy Series
-     * @returns {void}
-     */
-    destroySeries() {
-        if (this.chart && this.seriesList && this.seriesList.length > 0) {
-            for (let i = 0; i < this.seriesList.length; i++) {
-                this.chart.removeSeries(this.seriesList[i]);
-            }
-            this.seriesList = [];
-        }
-    }
-    /**
-     * Add series to chart from config
-     * @param config data configuration for add series
-     * @returns series data
-     */
-    addSeriesConfig(config) {
-        let series = null;
-        if (this.chart) {
-            const { type, data, seriesOptions } = config;
-            // Create instance series
-            if (type === 'line') {
-                series = this.chart.addLineSeries(seriesOptions);
-            }
-            else if (type === 'area') {
-                series = this.chart.addAreaSeries(seriesOptions);
-            }
-            else if (type === 'bar') {
-                series = this.chart.addBarSeries(seriesOptions);
-            }
-            else if (type === 'candlestick') {
-                series = this.chart.addCandlestickSeries(seriesOptions);
-            }
-            else if (type === 'volume') {
-                series = this.chart.addHistogramSeries(seriesOptions);
-            }
-            if (data && series) {
-                series.setData(data);
-            }
-        }
-        return series;
-    }
-    /**
-     * Convert color to string
-     * @param fn function for parse color
-     * @param param value color
-     * @returns color parse
-     */
-    convertColorToString(fn, param, ...args) {
-        let color = null;
-        if (param) {
-            color = fn(param, ...args);
-            if (color) {
-                color = color.toString();
-            }
-        }
-        else {
-            color = {};
-        }
-        return color || {};
-    }
-    /**
-    * Create data configuration from theme
-    * @returns {void}
-    */
-    createSeriesOptions() {
-        if (this.theme) {
-            let colorIndex = 0;
-            for (let index = 0; index < this.internalConfig.series.length; index++) {
-                // Get seriesOptions and type
-                const seriesOptions = this.internalConfig.series[index].seriesOptions || {};
-                const type = this.internalConfig.series[index].type;
-                let seriesThemeOptions = {};
-                const colorCycle = this.convertColorToString(parseColor, this.themeColors[colorIndex]);
-                if (type === 'line') {
-                    seriesThemeOptions = {
-                        lineWidth: this.theme.lineWidth,
-                        color: colorCycle
-                    };
-                    // Update color index
-                    if (!seriesOptions.color) {
-                        colorIndex++;
-                    }
-                }
-                else if (type === 'area') {
-                    seriesThemeOptions = {
-                        lineWidth: this.theme.lineWidth,
-                        lineColor: this.convertColorToString(parseColor, this.themeColors[colorIndex]),
-                        topColor: this.convertColorToString(this.setOpacity, this.themeColors[colorIndex], this.theme.fillOpacity),
-                        bottomColor: this.convertColorToString(this.setOpacity, this.themeColors[colorIndex], '0')
-                    };
-                    // Update color index
-                    if (!seriesOptions.lineColor || !seriesOptions.topColor || !seriesOptions.bottomColor) {
-                        colorIndex++;
-                    }
-                }
-                else if (type === 'bar') {
-                    seriesThemeOptions = {
-                        upColor: colorCycle,
-                        downColor: colorCycle
-                    };
-                    // Update color index
-                    if (!seriesOptions.upColor || !seriesOptions.downColor) {
-                        colorIndex++;
-                    }
-                }
-                else if (type === 'candlestick') {
-                    seriesThemeOptions = {
-                        upColor: this.theme.chartUpColor,
-                        downColor: this.theme.chartDownColor,
-                        borderUpColor: this.theme.chartUpColor,
-                        borderDownColor: this.theme.chartDownColor,
-                        wickUpColor: this.theme.chartUpColor,
-                        wickDownColor: this.theme.chartDownColor
-                    };
-                    // Update color index
-                    if (!seriesOptions.upColor
-                        || !seriesOptions.downColor
-                        || !seriesOptions.borderUpColor
-                        || !seriesOptions.borderDownColor
-                        || !seriesOptions.wickUpColor
-                        || !seriesOptions.wickDownColor) {
-                        colorIndex++;
-                    }
-                }
-                else if (type === 'volume') {
-                    seriesThemeOptions = {
-                        color: colorCycle
-                    };
-                    // Update color index
-                    if (!seriesOptions.color) {
-                        colorIndex++;
-                    }
-                }
-                // Update config seriesOptions not have seriesOptions
-                if (!this.internalConfig.series[index].seriesOptions) {
-                    this.internalConfig.series[index].seriesOptions = seriesThemeOptions;
-                }
-                else {
-                    merge(seriesOptions, seriesThemeOptions);
-                }
-            }
-        }
-    }
-    /**
-    * Apply Theme to chart
-    * @param config value config
-    * @returns {void}
-    */
-    applyTheme(config) {
-        if (this.chart && this.theme) {
-            const style = getComputedStyle(this);
-            const defaultFontFamily = style.getPropertyValue('font-family');
-            // Create object has a property object before comparing config the theme
-            const chartOptions = config.options || {};
-            // Create object same as the theme
-            const chartThemeOptions = {
-                layout: {
-                    backgroundColor: this.theme.backgroundColor,
-                    textColor: this.theme.textColor,
-                    fontFamily: defaultFontFamily
-                },
-                priceScale: {
-                    borderColor: this.theme.scalePriceBorderColor
-                },
-                timeScale: {
-                    borderColor: this.theme.scaleTimesBorderColor,
-                    rightOffset: 1
-                },
-                grid: {
-                    vertLines: {
-                        color: this.theme.gridVertLineColor,
-                        style: InteractiveChart_1.LINE_STYLES.SOLID
-                    },
-                    horzLines: {
-                        color: this.theme.gridHorzLineColor,
-                        style: InteractiveChart_1.LINE_STYLES.SOLID
-                    }
-                },
-                crosshair: {
-                    vertLine: {
-                        color: this.theme.crossHairColor
-                    },
-                    horzLine: {
-                        color: this.theme.crossHairColor
-                    }
-                }
-            };
-            merge(chartOptions, chartThemeOptions);
-            if (!config.options) {
-                this.chart.applyOptions(chartThemeOptions);
-            }
-            else {
-                // Apply config when has option for custom
-                this.applyLegendTextColor();
-                this.chart.applyOptions(config.options);
-            }
-        }
-    }
-    /**
-     * Apply text color legend from chart options
-     * @returns {void}
-     */
-    applyLegendTextColor() {
-        if (this.chart) {
-            const options = this.chart.options();
-            if (options && options.hasOwnProperty('layout') && options.layout.hasOwnProperty('textColor')) {
-                this.legendContainer.style.color = options.layout.textColor;
-            }
-        }
-    }
-    /**
-     * Get position config for set position legend
-     * @returns {void}
-     */
-    applyStyleLegend() {
-        if (this.chart) {
-            // Get position config for set position legend
-            const position = this.getPriceScalePosition();
-            if (position === 'left' || position === 'two-price') {
-                this.legendContainer.className = 'yaxis-left';
-            }
-            else {
-                this.legendContainer.className = 'yaxis-right';
-            }
-        }
-    }
-    /**
-     * Get position config for set position logo trading view on chart
-     * @returns {void}
-     */
-    applyStylesBranding() {
-        if (this.chart) {
-            const position = this.getPriceScalePosition();
-            this.brandingContainer.className = position === 'two-price' ? 'right' : position;
-        }
-    }
-    /**
-     * Get price scale position
-     * @return position
-     */
-    getPriceScalePosition() {
-        var _a;
-        const priceScale = (_a = this.chart) === null || _a === void 0 ? void 0 : _a.options();
-        if (priceScale.leftPriceScale.visible && priceScale.rightPriceScale.visible) {
-            return 'two-price';
-        }
-        else if (priceScale.leftPriceScale.visible) {
-            return 'left';
-        }
-        else if (priceScale.rightPriceScale.visible) {
-            return 'right';
-        }
-        else {
-            return 'none';
-        }
-    }
-    /**
-     * Create legend element
-     * @returns {void}
-     */
-    createLegend() {
-        if (this.chart && !this.legendInitialized && this.internalConfig.hasOwnProperty('series')) {
-            this.createRowLegend();
-            if (this.shadowRoot) {
-                this.rowLegend = this.shadowRoot.querySelectorAll('.row');
-            }
-            this.chart.subscribeCrosshairMove(this.handleCrosshairMoved);
-            this.legendInitialized = true;
-        }
-    }
-    /**
-     * Create legend element or update value in legend element
-     * @param rowLegend Legend element
-     * @param eventMove Event mouse move on chart
-     * @return {void}
-     */
-    createRowLegend(rowLegend, eventMove) {
-        let rowLegendElem;
-        for (let idx = 0; idx < this.internalConfig.series.length; idx++) {
-            const chartType = this.internalConfig.series[idx].type;
-            const dataSet = this.internalConfig.series[idx].data || [];
-            const symbol = (this.internalConfig.series[idx].symbolName || this.internalConfig.series[idx].symbol) || '';
-            // Create row legend element
-            if (!rowLegend) {
-                rowLegendElem = document.createElement('div');
-                rowLegendElem.setAttribute('class', 'row');
-                this.createTextSymbol(rowLegendElem, symbol);
-                if (dataSet.length) {
-                    this.hasDataPoint = true;
-                    const lastData = dataSet[dataSet.length - 1];
-                    const priceColor = this.getColorInSeries(lastData, chartType, idx);
-                    const lastDataValue = chartType === 'bar' || chartType === 'candlestick' ? lastData : lastData.value;
-                    this.renderTextLegend(chartType, rowLegendElem, lastDataValue, priceColor, idx);
-                }
-                else {
-                    const span = document.createElement('span');
-                    span.className = 'price';
-                    span.textContent = NOT_AVAILABLE_DATA;
-                    rowLegendElem.appendChild(span);
-                }
-                this.legendContainer.appendChild(rowLegendElem);
-            }
-            /* Update value legend element on subscribeCrosshairMove.
-             * Don't need to be updated if chart has no data.
-             */
-            /* istanbul ignore next */
-            else if (rowLegend && dataSet.length) {
-                let value;
-                let priceColor = '';
-                // When have price on event moved on the crosshair
-                if ((eventMove === null || eventMove === void 0 ? void 0 : eventMove.seriesPrices.get(this.seriesList[idx])) && eventMove.time) {
-                    value = eventMove.seriesPrices.get(this.seriesList[idx]);
-                    priceColor = this.getColorInSeries(eventMove, chartType, idx);
-                    this.isCrosshairVisible = true;
-                    this.hasDataPoint = true;
-                }
-                // when there's no data point in the series object.
-                else if (!(eventMove === null || eventMove === void 0 ? void 0 : eventMove.seriesPrices.get(this.seriesList[idx])) && (eventMove === null || eventMove === void 0 ? void 0 : eventMove.time)) {
-                    value = NO_DATA_POINT;
-                    this.isCrosshairVisible = true;
-                    this.hasDataPoint = false;
-                }
-                // Get latest value when mouse move out of scope
-                else {
-                    const latestData = dataSet[dataSet.length - 1];
-                    if (latestData) {
-                        priceColor = this.getColorInSeries(latestData, chartType, idx);
-                        value = chartType === 'bar' || chartType === 'candlestick' ? latestData : latestData.value;
-                        this.isCrosshairVisible = false;
-                        this.hasDataPoint = true;
-                    }
-                }
-                // Render legend by series type
-                this.renderTextLegend(chartType, rowLegend, value, priceColor, idx);
-            }
-        }
-    }
-    /**
-     * Render text legend in row legend
-     * @param chartType chart type of series
-     * @param rowLegendElem row legend div element
-     * @param value value of series
-     * @param priceColor price color of series
-     * @param index index of series
-     * @returns {void}
-     */
-    renderTextLegend(chartType, rowLegendElem, value, priceColor, index) {
-        if (chartType === 'bar' || chartType === 'candlestick') {
-            if (!this.hasDataPoint && this.isNodeListElement(rowLegendElem)) {
-                const spanElem = rowLegendElem[index].querySelectorAll('span.price,span.ohlc');
-                spanElem.forEach(span => rowLegendElem[index].removeChild(span));
-                const span = document.createElement('span');
-                span.className = 'price';
-                span.textContent = value;
-                rowLegendElem[index].appendChild(span);
-            }
-            else {
-                this.createTextOHLC(rowLegendElem, value, priceColor, index);
-            }
-        }
-        else {
-            this.createTextPrice(rowLegendElem, value, priceColor, index);
-        }
-    }
-    /**
-    * Check `node` inside row legend and case type to HTMLElement
-    * @param rowLegend Legend element
-    * @returns true if not have `node` inside row legend
-    */
-    isHTMLElement(rowLegend) {
-        return rowLegend.length === undefined;
-    }
-    /**
-    * Check `node` inside row legend and case type to NodeListOf<Element>
-    * @param rowLegend Legend element
-    * @returns true if have `node` inside row legend
-    */
-    isNodeListElement(rowLegend) {
-        return rowLegend !== undefined;
-    }
-    /**
-     * Create span OHLC in row legend used by several series types such as bars or candlesticks
-     * @param rowLegend Legend element
-     * @param rowData Value of series
-     * @param priceColor Color of series
-     * @returns {void}
-     */
-    createSpanOHLC(rowLegend, rowData, priceColor) {
-        if (this.isHTMLElement(rowLegend)) {
-            rowLegend.setAttribute('data-color', priceColor);
-            this.createSpan(rowLegend, 'O', rowData.open, 'H', rowData.high, 'L', rowData.low, 'C', rowData.close);
-        }
-    }
-    /**
-    * Create text used by several series types such as bars or candlesticks
-    * @param rowLegend Legend element
-    * @param rowData Value of series
-    * @param priceColor color of series
-    * @param index Series index
-    * @returns {void}
-    */
-    createTextOHLC(rowLegend, rowData, priceColor, index) {
-        // Uses price formatter if provided
-        const formatter = this.internalConfig.series[index].hasOwnProperty('legendPriceFormatter') ? this.internalConfig.series[index].legendPriceFormatter : null;
-        if (formatter) {
-            rowData = {
-                open: formatter(rowData.open),
-                high: formatter(rowData.high),
-                low: formatter(rowData.low),
-                close: formatter(rowData.close)
-            };
-        }
-        // Create text price after chart has rendered
-        if (this.isHTMLElement(rowLegend)) {
-            this.createSpanOHLC(rowLegend, rowData, priceColor);
-        }
-        // Handle update text price when mouse crosshairMove in chart
-        else if (this.isNodeListElement(rowLegend)) {
-            const rowSpanLength = rowLegend[index].children.length;
-            let countElmPrice = 0;
-            for (let spanIndex = 0; spanIndex < rowSpanLength; spanIndex++) {
-                const spanElem = rowLegend[index].children[spanIndex];
-                /**
-                 * Create a new span OHLC after displaying (--) or (N/A)
-                 */
-                if (spanElem.textContent === NOT_AVAILABLE_DATA || spanElem.textContent === NO_DATA_POINT) {
-                    rowLegend[index].removeChild(spanElem);
-                    this.createSpanOHLC(rowLegend[index], rowData, priceColor);
-                }
-                else if (spanElem.getAttribute('class') === 'price') {
-                    // Set price color
-                    spanElem.style.color = priceColor;
-                    // Set value OHLC BY price
-                    if (countElmPrice === 0) {
-                        spanElem.textContent = `${rowData.open}`;
-                    }
-                    else if (countElmPrice === 1) {
-                        spanElem.textContent = `${rowData.high}`;
-                    }
-                    else if (countElmPrice === 2) {
-                        spanElem.textContent = `${rowData.low}`;
-                    }
-                    else if (countElmPrice === 3) {
-                        spanElem.textContent = `${rowData.close}`;
-                    }
-                    // Update next span by price
-                    countElmPrice++;
-                }
-            }
-        }
-    }
-    /**
-     * Create text price used by several series types
-     * @param rowLegend Legend element
-     * @param price Value of series
-     * @param priceColor color of series
-     * @param index Series index
-     * @returns {void}
-     */
-    createTextPrice(rowLegend, price, priceColor, index) {
-        var _a;
-        const formatter = this.internalConfig.series[index].legendPriceFormatter;
-        // Formats legend only when formatter and data point are provided
-        const formattedPrice = !!formatter && price !== NO_DATA_POINT ? formatter(price) : price;
-        // Create text price after chart has rendered
-        if (this.isHTMLElement(rowLegend)) {
-            rowLegend.setAttribute('data-color', priceColor);
-            this.createSpan(rowLegend, formattedPrice);
-        }
-        // Handle update text price when mouse crosshairMove in chart
-        else if (this.isNodeListElement(rowLegend)) {
-            const symbolElem = rowLegend[index].children[0];
-            const spanIndex = ((_a = symbolElem.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.indexOf('symbol')) === 0 ? 1 : 0;
-            const rowLegendElem = rowLegend[index];
-            rowLegendElem.children[spanIndex].textContent = `${formattedPrice}`;
-            rowLegendElem.children[spanIndex].style.color = `${priceColor}`;
-        }
-    }
-    /**
-     * Create span in legend element by several series types
-     * @param rowLegend Legend element
-     * @param args text value
-     * @returns {void}
-     */
-    createSpan(rowLegend, ...args) {
-        const div = rowLegend; // rowLegend
-        const arg = args;
-        const len = args.length;
-        const color = div.getAttribute('data-color');
-        for (let idx = 0; idx < len; idx++) {
-            const span = document.createElement('span');
-            const textContent = `${arg[idx]}`;
-            span.textContent = textContent;
-            // Set class by Text O H L C
-            if (['O', 'H', 'L', 'C'].includes(textContent)) {
-                span.setAttribute('class', 'ohlc');
-            }
-            else {
-                span.setAttribute('class', 'price');
-                span.style.color = color;
-            }
-            div.appendChild(span);
-        }
-    }
-    /**
-     * Create span in legend element by several series types
-     * @param rowLegend Legend element
-     * @param symbol Value naming for show
-     * @returns {void}
-     */
-    createTextSymbol(rowLegend, symbol) {
-        if (rowLegend.children && symbol) {
-            const symbolElem = document.createElement('span');
-            symbolElem.setAttribute('class', 'symbol');
-            symbolElem.textContent = symbol + ' : ';
-            rowLegend.appendChild(symbolElem);
-        }
-    }
-    /**
-     * Get legend price color
-     * @param color color code
-     * @returns rgba or hex color
-     */
-    getLegendPriceColor(color) {
-        // check color is does not blend with the background
-        if (color === 'rgba(0,0,0,0)' || color === 'transparent') {
-            return this.getComputedVariable('--text-color');
-        }
-        return color;
-    }
-    /**
-     * Get Color in series
-     * @param seriesData series data or event mouse move on chart
-     * @param chartType type of chart
-     * @param index index of list series
-     * @returns color value
-     */
-    getColorInSeries(seriesData, chartType, index) {
-        var _a;
-        if (chartType === 'line') {
-            return this.getLegendPriceColor(this.seriesList[index].options().color);
-        }
-        else if (chartType === 'candlestick') {
-            const value = seriesData.hasOwnProperty('seriesPrices') ? (_a = seriesData) === null || _a === void 0 ? void 0 : _a.seriesPrices.get(this.seriesList[index]) : seriesData;
-            const barStyle = this.seriesList[index].options();
-            const colorBar = value.close > value.open ? barStyle.borderUpColor : barStyle.borderDownColor;
-            return colorBar;
-        }
-        else if (chartType === 'bar') {
-            return this.getLegendPriceColor(this.seriesList[index].options().upColor);
-        }
-        else if (chartType === 'area') {
-            return this.getLegendPriceColor(this.seriesList[index].options().lineColor);
-        }
-        else if (chartType === 'volume') {
-            const priceValue = seriesData.hasOwnProperty('seriesPrices') ? seriesData.seriesPrices.get(this.seriesList[index]) : seriesData.value;
-            let dataItem = {};
-            this.internalConfig.series[index].data.forEach((dataConfig) => {
-                const data = dataConfig;
-                const time = data.time;
-                const timeSeriesData = seriesData.time;
-                //  if via time point data string format 'yyyy-mm-dd' or object '{ year: 2019, month: 6, day: 1 }'
-                if (time.hasOwnProperty('day') && time.hasOwnProperty('month') && time.hasOwnProperty('year')) {
-                    if (time.day === timeSeriesData.day
-                        && time.month === timeSeriesData.month
-                        && time.year === timeSeriesData.year
-                        && data.value === priceValue) {
-                        dataItem = dataConfig;
-                    }
-                }
-                // if via config time uses a UNIX Timestamp format for time point data.
-                else if (time === seriesData.time) {
-                    dataItem = data;
-                }
-            });
-            // check when each color is added, the item comes from the configuration
-            if (dataItem.hasOwnProperty('color')) {
-                const data = dataItem;
-                return this.getLegendPriceColor(data.color);
-            }
-            else {
-                return this.getLegendPriceColor(this.seriesList[index].options().color);
-            }
-        }
-        return '';
-    }
-    /**
-     * Create button that will make window scroll to the last data
-     * in the chart when clicked
-     * @param width Width component size
-     * @param height Hight component size
-     * @returns {void}
-     */
-    createJumpButton(width, height) {
-        if (this.chart && this.jumpButtonContainer) {
-            this.timeScale = this.chart.timeScale();
-            // Get position config for set position jump last button
-            const position = this.getPriceScalePosition();
-            const pricePosition = position === 'left' ? 30 : 0;
-            const buttonTop = `${height - 70}px`;
-            const buttonLeft = `${(width + pricePosition) - 100}px`;
-            this.jumpButtonContainer.style.top = buttonTop;
-            this.jumpButtonContainer.style.left = buttonLeft;
-            // Create subscribeVisibleTimeRangeChange
-            if (!this.jumpButtonInitialized) {
-                this.chart.timeScale().subscribeVisibleTimeRangeChange(this.handleTimeRangeChange);
-                this.jumpButtonContainer.addEventListener('tap', this.handleScrollToRealTime);
-                this.jumpButtonInitialized = true;
-            }
-        }
-    }
-    /**
-     *  Update Legend with latest data on update data in series
-     *  @returns {void}
-     */
-    updateLegendWithLatestData() {
-        var _a;
-        if (this.rowLegend && !this.isCrosshairVisible && ((_a = this.config) === null || _a === void 0 ? void 0 : _a.hasOwnProperty('series'))) {
-            for (let idx = 0; idx < this.internalConfig.series.length; idx++) {
-                const chartType = this.internalConfig.series[idx].type;
-                const series = this.internalConfig.series[idx];
-                const dataSet = series.data || [];
-                const latestData = dataSet[dataSet.length - 1];
-                if (latestData) {
-                    const value = chartType === 'bar' || chartType === 'candlestick' ? latestData : latestData.value; // latestData
-                    const priceColor = this.getColorInSeries(latestData, chartType, idx);
-                    // Render legend by series type
-                    this.renderTextLegend(chartType, this.rowLegend, value, priceColor, idx);
-                }
-            }
-        }
-    }
-    /**
-     * Get as CSS variable and tries to convert it into a usable number
-     * @param args param css variable
-     * @returns The value as a number, or, undefined if NaN.
-     */
-    cssVarAsNumber(...args) {
-        args[args.length] = '';
-        const cssComputeVar = this.getComputedVariable(...args);
-        const result = parseFloat(cssComputeVar.replace(/\D+$/, ''));
-        return cssComputeVar && !isNaN(result) ? result : undefined;
-    }
-    /**
-     * List of available chart colors from the theme.
-     * @returns list of available chart colors from the theme.
-     */
-    colors() {
-        let color;
-        let index = 0;
-        const colors = [];
-        while ((color = this.getComputedVariable(`${InteractiveChart_1.CSS_COLOR_PREFIX}${(index += 1)}`))) {
-            const parseColorCode = parseColor(color);
-            if (parseColorCode !== null) {
-                colors.push(parseColorCode.toString());
-            }
-        }
-        return colors;
-    }
-    /**
-    * A `CSSResultGroup` that will be used
-    * to style the host, slotted children
-    * and the internal template of the element.
-    * @return CSS template
-    */
-    static get styles() {
-        return css `
-      :host {
-        display: block;
-        position: relative;
-        height: 300px;
-        z-index: 0;
-      }
-    `;
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      <slot name="legend">
-        <div part="legend"></div>
-      </slot>
-      <div part="jump-button-container">
-        <div part="jump-button"></div>
-      </div>
-      <div part="branding-container" title="" tooltip="Powered by Trading View">
-        <svg width="33" height="19" viewBox="0 0 611 314"  part="branding">
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M341 124C375.242 124 403 96.2417 403 62C403 27.7583 375.242 0 341 0C306.758 0 279 27.7583 279 62C279 96.2417 306.758 124 341 124ZM481 314H337L467 4H611L481 314ZM124 4H248V128V314H124V128H0V4H124Z"/>
-        </svg>
-      </div>
-      <div part="chart"></div>
-    `;
-    }
-};
-InteractiveChart.CSS_COLOR_PREFIX = '--chart-color-';
-InteractiveChart.DEFAULT_LINE_WIDTH = '2';
-InteractiveChart.DEFAULT_FILL_OPACITY = '0.4';
-InteractiveChart.LINE_STYLES = {
-    SOLID: 0,
-    DOTTED: 1,
-    DASHED: 2,
-    LARGE_DASHED: 3,
-    SPARSE_DOTTED: 4
-};
-__decorate([
-    property({ type: Object })
-], InteractiveChart.prototype, "config", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'disabled-legend' })
-], InteractiveChart.prototype, "disabledLegend", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'disabled-jump-button' })
-], InteractiveChart.prototype, "disabledJumpButton", void 0);
-__decorate([
-    property({ type: String, attribute: 'legendstyle' })
-], InteractiveChart.prototype, "deprecatedLegendStyle", void 0);
-__decorate([
-    property({ type: String, attribute: 'legend-style' })
-], InteractiveChart.prototype, "legendStyle", null);
-__decorate([
-    query('[part=chart]', true)
-], InteractiveChart.prototype, "chartContainer", void 0);
-__decorate([
-    query('[part=legend]', true)
-], InteractiveChart.prototype, "legendContainer", void 0);
-__decorate([
-    query('[part=jump-button-container]', true)
-], InteractiveChart.prototype, "jumpButtonContainer", void 0);
-__decorate([
-    query('[part=branding-container]', true)
-], InteractiveChart.prototype, "brandingContainer", void 0);
-InteractiveChart = InteractiveChart_1 = __decorate([
-    customElement('ef-interactive-chart', {
-        alias: 'sapphire-interactive-chart'
-    })
-], InteractiveChart);
-export { InteractiveChart };