@refinitiv-ui/elements 6.9.0-next.0 → 7.0.0-next.1

package/lib/chart/index.d.ts

@@ -1,192 +1 @@
-import { JSXInterface } from '../jsx';
-/// <reference types="chart.js" />
-import { BasicElement, PropertyValues, TemplateResult, CSSResultGroup } from '@refinitiv-ui/core';
-import 'chart.js/dist/Chart.bundle.min.js';
-import type { ChartJS, ChartConfig, ChartUpdateProps, DatasetColors } from './helpers/types';
-import type { Header } from '../header';
-import '../header/index.js';
-import '../layout/index.js';
-declare global {
-    interface Window {
-        Chart: ChartJS;
-    }
-}
-export type { ChartConfig, ChartUpdateProps };
-/**
- * Charting component that use ChartJS library
- */
-export declare class Chart extends BasicElement {
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version(): string;
-    /**
-     * Chart.js object
-     */
-    chart: ChartJS | null;
-    /**
-     * Chart configurations. Same configuration as ChartJS
-     * @type {ChartConfig}
-     */
-    config: ChartConfig | null;
-    /**
-     * Html canvas element
-     * @type {HTMLCanvasElement}
-     */
-    protected canvas: HTMLCanvasElement;
-    /**
-     * Get canvas element from shadow roots
-     */
-    protected titleElement: Header;
-    /**
-     * Required properties, needed for chart to work correctly.
-     * @returns config
-     */
-    protected get requiredConfig(): ChartConfig;
-    /**
-     * Safely returns the chart title
-     * @returns chart title
-     */
-    protected get chartTitle(): string;
-    /**
-     * Safely returns a dataset array
-     * @returns dataset array
-     */
-    protected get datasets(): Chart.ChartDataSets[];
-    /**
-     * List of available chart colors
-     * @type {string[]}
-     * @returns {string[]} List of available chart colors
-     */
-    get colors(): string[];
-    /**
-     * Invoked whenever the element is updated
-     * @param {PropertyValues} changedProperties Map of changed properties with old values
-     * @returns {void}
-     */
-    protected updated(changedProperties: PropertyValues): void;
-    /**
-     * Element connected
-     * @returns {void}
-     */
-    connectedCallback(): void;
-    /**
-     * Element disconnected
-     * @returns {void}
-     */
-    disconnectedCallback(): void;
-    /**
-     * Themable parts of the config.
-     * This will be merged into the configuration object.
-     * @returns {ChartConfig} chart config with theme
-     */
-    protected get themableConfig(): ChartConfig;
-    /**
-     * Handles a change of configuration object.
-     * This does not fire when a property of the config object changes,
-     * for this use this.updateChart() to apply changes.
-     * @returns {void}
-     */
-    protected onConfigChange(): void;
-    /**
-     * Get as CSS variable and tries to convert it into a usable number
-     * @returns {(number|undefined)} The value as a number, or, undefined if NaN.
-     */
-    protected cssVarAsNumber(...args: string[]): number | undefined;
-    /**
-     * Generates the legend labels on a given chart
-     * @param {ChartJS} chart Chart.js instance
-     * @returns {Chart.ChartLegendLabelItem[]} Array of label configurations
-     */
-    protected generateLegendLabels: (chart: ChartJS) => Chart.ChartLegendLabelItem[];
-    /**
-     * Merges all the different layers of the config.
-     * @returns {void}
-     */
-    protected mergeConfigs(): void;
-    /**
-     * Themes the passed-in configuration object
-     * @returns {void}
-     */
-    protected decorateConfig(): void;
-    /**
-     * Returns usable information about a dataset
-     * @param {Chart.ChartDataSets} dataset Chart dataset
-     * @returns {Chart.ChartDataSets} Information about the dataset
-     */
-    protected datasetInfo(dataset: Chart.ChartDataSets): Chart.ChartDataSets;
-    /**
-     * Generates internal solid and opaque color set for a dataset
-     * @param {boolean} isArray Flag to return result in array or not e.g. doughnut, pie, etc
-     * @param {number} amount Amount of colors required
-     * @param {number} shift Positional shift of the color start point
-     * @returns {DatasetColors} Solid and opaque color values
-     */
-    protected generateColors(isArray: boolean, amount: number, shift: number): DatasetColors;
-    /**
-     * Manages the custom title element
-     * @returns {void}
-     */
-    private manageTitle;
-    /**
-     * Creates a chart after config has changed,
-     * or, the element has been connected to the DOM
-     * @returns {void}
-     */
-    protected createChart(): void;
-    /**
-     * Destroys the chart.js object
-     * @returns True if a chart object has been destroyed
-     */
-    protected destroyChart(): boolean;
-    /**
-     * Re-renders the chart based on its config
-     * @param {ChartUpdateProps} config Additional configuration object for the update process.
-     * @returns {void}
-     */
-    private renderChart;
-    /**
-     * Update all data, title, scales, legends and re-render the chart based on its config
-     * @param {ChartUpdateProps=} config Additional configuration for control an animation in the update process.
-     * @returns {void}
-     */
-    updateChart(config?: ChartUpdateProps): void;
-    /**
-     * 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(): CSSResultGroup;
-    /**
-     * Handles resize event of the chart region
-     * @returns {void}
-     */
-    protected onResize(): void;
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    protected render(): TemplateResult;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'ef-chart': Chart;
-    }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'ef-chart': Chart;
-  }
-
-  namespace JSX {
-    interface IntrinsicElements {
-      'ef-chart': Partial<Chart> | JSXInterface.HTMLAttributes<Chart>;
-    }
-  }
-}
-
-export {};
+export * from './elements/chart.js';

package/lib/chart/index.js

@@ -1,485 +1,5 @@
-/* eslint @typescript-eslint/no-unsafe-call: 0 */
-/* eslint @typescript-eslint/no-unsafe-member-access: 0 */
-import { __decorate } from "tslib";
-import { BasicElement, html, css } from '@refinitiv-ui/core';
-import { customElement } from '@refinitiv-ui/core/decorators/custom-element.js';
-import { property } from '@refinitiv-ui/core/decorators/property.js';
-import { query } from '@refinitiv-ui/core/decorators/query.js';
-import { VERSION } from '../version.js';
-import { color as parseColor } from '@refinitiv-ui/utils/color.js';
-import 'chart.js/dist/Chart.bundle.min.js';
-import { legendHelper, merge } from './helpers/index.js';
-import '../header/index.js';
-import '../layout/index.js';
-// Register plugins
-import doughnutCenterPlugin from './plugins/doughnut-center-label.js';
-window.Chart.pluginService.register(doughnutCenterPlugin);
-const CSS_COLOR_PREFIX = '--chart-color-';
-const CHART_TYPE_OPAQUE = ['line', 'bubble', 'radar', 'polarArea'];
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-const DEFAULT_CHART_CONFIG = window.Chart.defaults;
-const ELF_CHART_CONFIG = {
-    polarArea: {
-        scale: {
-            ticks: {
-                showLabelBackdrop: false
-            }
-        }
-    },
-    radar: {
-        scale: {
-            ticks: {
-                showLabelBackdrop: false
-            }
-        }
-    }
-};
-// eslint-disable-next-line @typescript-eslint/no-unsafe-call
-window.Chart.helpers.merge(DEFAULT_CHART_CONFIG, ELF_CHART_CONFIG);
-/**
- * Charting component that use ChartJS library
- */
-let Chart = class Chart extends BasicElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Chart.js object
-         */
-        this.chart = null;
-        /**
-         * Chart configurations. Same configuration as ChartJS
-         * @type {ChartConfig}
-         */
-        this.config = null;
-        /**
-         * Generates the legend labels on a given chart
-         * @param {ChartJS} chart Chart.js instance
-         * @returns {Chart.ChartLegendLabelItem[]} Array of label configurations
-         */
-        this.generateLegendLabels = (chart) => {
-            if (!this.config?.type) {
-                return [];
-            }
-            const chartOption = DEFAULT_CHART_CONFIG[this.config.type];
-            if (this.datasets.length
-                && chartOption.legend
-                && Array.isArray(this.datasets[0].backgroundColor)) {
-                let legends = [];
-                if (chartOption.legend.labels?.generateLabels) {
-                    legends = chartOption.legend.labels?.generateLabels(chart);
-                }
-                // Customize for doughnut chart change border color to background color
-                if (['pie', 'doughnut'].includes(this.config?.type) && this.datasets.length > 1) {
-                    legends.forEach((label) => {
-                        label.strokeStyle = label.fillStyle;
-                    });
-                }
-                return legends;
-            }
-            return this.datasets.map((dataset, i) => {
-                const solidFill = !CHART_TYPE_OPAQUE.includes(dataset.type || this.config?.type);
-                const usePointStyle = chart.options.legend?.labels?.usePointStyle || false;
-                return {
-                    text: dataset.label,
-                    fillStyle: legendHelper.getLegendFillStyle(dataset, usePointStyle, solidFill),
-                    hidden: !chart.isDatasetVisible(i),
-                    lineCap: dataset.borderCapStyle,
-                    lineDash: dataset.borderDash,
-                    lineDashOffset: dataset.borderDashOffset,
-                    lineJoin: dataset.borderJoinStyle,
-                    lineWidth: Number(dataset.borderWidth) || 0,
-                    strokeStyle: legendHelper.getLegendStrokeStyle(dataset, usePointStyle),
-                    pointStyle: typeof dataset.pointStyle === 'string' ? dataset.pointStyle : undefined,
-                    // Below is extra data used for toggling the datasets
-                    datasetIndex: i
-                };
-            });
-        };
-    }
-    /**
-     * Element version number
-     * @returns version number
-     */
-    static get version() {
-        return VERSION;
-    }
-    /**
-     * Required properties, needed for chart to work correctly.
-     * @returns config
-     */
-    get requiredConfig() {
-        return {
-            options: {
-                responsive: false,
-                maintainAspectRatio: false,
-                title: {
-                    display: false
-                }
-            }
-        };
-    }
-    /**
-     * Safely returns the chart title
-     * @returns chart title
-     */
-    get chartTitle() {
-        const title = this.config?.options?.title?.text;
-        if (title) {
-            return typeof title === 'string' ? title : title.join();
-        }
-        return '';
-    }
-    /**
-     * Safely returns a dataset array
-     * @returns dataset array
-     */
-    get datasets() {
-        return this.config?.data?.datasets || [];
-    }
-    /**
-     * List of available chart colors
-     * @type {string[]}
-     * @returns {string[]} List of available chart colors
-     */
-    get colors() {
-        let color;
-        let index = 0;
-        const colors = [];
-        while ((color = this.getComputedVariable(`${CSS_COLOR_PREFIX}${++index}`))) {
-            colors.push(color);
-        }
-        return colors;
-    }
-    /**
-     * Invoked whenever the element is updated
-     * @param {PropertyValues} changedProperties Map of changed properties with old values
-     * @returns {void}
-     */
-    updated(changedProperties) {
-        super.updated(changedProperties);
-        if (changedProperties.has('config')) {
-            this.onConfigChange();
-        }
-    }
-    /**
-     * Element connected
-     * @returns {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.canvas) {
-            this.createChart();
-        }
-    }
-    /**
-     * Element disconnected
-     * @returns {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.destroyChart();
-    }
-    /**
-     * Themable parts of the config.
-     * This will be merged into the configuration object.
-     * @returns {ChartConfig} chart config with theme
-     */
-    get themableConfig() {
-        const style = getComputedStyle(this);
-        // TODO: Try and remove the need for global object modification.
-        // It's easier to cover all areas by modifying the global object,
-        // however, if possible, we should look to try and just modify local configs.
-        // Set font globals
-        window.Chart.defaults.global.defaultFontColor = style.getPropertyValue('color');
-        window.Chart.defaults.global.defaultFontFamily = style.getPropertyValue('font-family');
-        window.Chart.defaults.global.defaultFontSize = Number(style.getPropertyValue('font-size').replace('px', ''));
-        window.Chart.defaults.global.defaultFontStyle = style.getPropertyValue('font-style');
-        // Set grid line globals
-        window.Chart.defaults.scale.gridLines.color = this.getComputedVariable('--grid-line-color', 'transparent');
-        window.Chart.defaults.scale.gridLines.zeroLineColor = this.getComputedVariable('--zero-line-color', 'transparent');
-        return {
-            options: {
-                animation: {
-                    duration: this.cssVarAsNumber('--animation-duration', '0')
-                },
-                elements: {
-                    line: {
-                        borderWidth: this.cssVarAsNumber('--line-width', '1'),
-                        tension: this.cssVarAsNumber('--line-tension', '0.5')
-                    }
-                },
-                tooltips: {
-                    backgroundColor: this.getComputedVariable('--tooltip-background-color', 'transparent'),
-                    titleFontColor: this.getComputedVariable('--tooltip-title-color', 'transparent'),
-                    bodyFontColor: this.getComputedVariable('--tooltip-body-color', 'transparent'),
-                    cornerRadius: this.cssVarAsNumber('--tooltip-border-radius', '0'),
-                    caretSize: this.cssVarAsNumber('--tooltip-caret-size', '0'),
-                    xPadding: this.cssVarAsNumber('--tooltip-padding-x', '--tooltip-padding', '0'),
-                    yPadding: this.cssVarAsNumber('--tooltip-padding-y', '--tooltip-padding', '0'),
-                    titleSpacing: this.cssVarAsNumber('--tooltip-title-spacing', '0'),
-                    displayColors: false
-                },
-                legend: {
-                    position: ['pie', 'doughnut'].includes(this.config?.type || '') ? 'right' : 'top',
-                    labels: {
-                        boxWidth: this.cssVarAsNumber('--legend-key-box-width', '10'),
-                        generateLabels: this.generateLegendLabels
-                    }
-                }
-            }
-        };
-    }
-    /**
-     * Handles a change of configuration object.
-     * This does not fire when a property of the config object changes,
-     * for this use this.updateChart() to apply changes.
-     * @returns {void}
-     */
-    onConfigChange() {
-        if (this.config) {
-            this.createChart();
-        }
-    }
-    /**
-     * Get as CSS variable and tries to convert it into a usable number
-     * @returns {(number|undefined)} The value as a number, or, undefined if NaN.
-     */
-    cssVarAsNumber(...args) {
-        const result = Number(this.getComputedVariable(...args).replace(/\D+$/, ''));
-        return isNaN(result) ? undefined : result;
-    }
-    /**
-     * Merges all the different layers of the config.
-     * @returns {void}
-     */
-    mergeConfigs() {
-        if (!this.config) {
-            return;
-        }
-        merge(this.config, this.themableConfig);
-        merge(this.config, this.requiredConfig, true);
-    }
-    /**
-     * Themes the passed-in configuration object
-     * @returns {void}
-     */
-    decorateConfig() {
-        this.mergeConfigs();
-        const extendColorsIfRequired = (currentColors, infoColors) => {
-            if (Array.isArray(currentColors) && Array.isArray(infoColors) && currentColors.length < infoColors.length) {
-                merge(currentColors, infoColors);
-            }
-        };
-        this.datasets.forEach((dataset) => {
-            const info = this.datasetInfo(dataset);
-            // make sure that colours are defined for every dataset e.g. when new dataset is added
-            extendColorsIfRequired(dataset.borderColor, info.borderColor);
-            extendColorsIfRequired(dataset.backgroundColor, info.backgroundColor);
-            extendColorsIfRequired(dataset.pointBorderColor, info.pointBorderColor);
-            extendColorsIfRequired(dataset.pointBackgroundColor, info.pointBackgroundColor);
-            dataset.borderColor = dataset.borderColor || info.borderColor;
-            dataset.backgroundColor = dataset.backgroundColor || info.backgroundColor;
-            dataset.pointBackgroundColor = dataset.pointBackgroundColor || info.pointBackgroundColor;
-            dataset.pointBorderColor = dataset.pointBorderColor || info.pointBorderColor;
-        });
-    }
-    /**
-     * Returns usable information about a dataset
-     * @param {Chart.ChartDataSets} dataset Chart dataset
-     * @returns {Chart.ChartDataSets} Information about the dataset
-     */
-    datasetInfo(dataset) {
-        const type = dataset.type || this.config?.type;
-        let index = this.datasets.indexOf(dataset);
-        const isColorArray = (!!type && ['pie', 'doughnut', 'polarArea'].includes(type)) || type === 'bar' && this.datasets.length === 1;
-        const isSolidFill = !!type && !CHART_TYPE_OPAQUE.includes(type);
-        // Doughnut chart using same color sequence for each data in datasets
-        let borderColor = null;
-        if (['pie', 'doughnut'].includes(type) && this.datasets.length > 1) {
-            index = 0;
-            borderColor = this.getComputedVariable('--multi-dataset-border-color', '#fff');
-        }
-        const colors = this.generateColors(isColorArray, isColorArray && dataset.data ? dataset.data.length : 1, index);
-        return {
-            type,
-            borderColor: borderColor || colors.solid,
-            backgroundColor: isSolidFill ? colors.solid : colors.opaque,
-            pointBorderColor: colors.solid,
-            pointBackgroundColor: colors.solid
-        };
-    }
-    /**
-     * Generates internal solid and opaque color set for a dataset
-     * @param {boolean} isArray Flag to return result in array or not e.g. doughnut, pie, etc
-     * @param {number} amount Amount of colors required
-     * @param {number} shift Positional shift of the color start point
-     * @returns {DatasetColors} Solid and opaque color values
-     */
-    generateColors(isArray, amount, shift) {
-        let color;
-        const solid = [];
-        const opaque = [];
-        const alpha = Number(this.getComputedVariable('--fill-opacity', '0.2'));
-        amount = isArray ? amount : 1;
-        for (let i = shift; i < amount + shift; i++) {
-            color = this.colors[i % this.colors.length];
-            solid.push(color);
-            const opaqueColor = parseColor(color);
-            if (opaqueColor) {
-                opaqueColor.opacity = alpha;
-                opaque.push(opaqueColor.toString());
-            }
-        }
-        return {
-            solid: isArray ? solid : solid[0],
-            opaque: isArray ? opaque : opaque[0]
-        };
-    }
-    /**
-     * Manages the custom title element
-     * @returns {void}
-     */
-    manageTitle() {
-        this.titleElement.textContent = this.chartTitle;
-        if (this.chartTitle) {
-            this.titleElement.style.removeProperty('display');
-        }
-        else {
-            this.titleElement.style.display = 'none';
-        }
-    }
-    /**
-     * Creates a chart after config has changed,
-     * or, the element has been connected to the DOM
-     * @returns {void}
-     */
-    createChart() {
-        const ctx = this.canvas.getContext('2d');
-        if (ctx && this.config) {
-            // Are we reusing an old chart canvas?
-            const isReusingCanvas = this.destroyChart();
-            // Preparing the resources before create chart
-            this.decorateConfig();
-            this.manageTitle();
-            // Create chart
-            this.chart = new window.Chart(ctx, this.config);
-            if (isReusingCanvas) {
-                // If we're reusing an old chart canvas, we need to resize it.
-                // Destroying a chart has some strange side-effects on the canvas.
-                this.chart.resize();
-            }
-        }
-    }
-    /**
-     * Destroys the chart.js object
-     * @returns True if a chart object has been destroyed
-     */
-    destroyChart() {
-        if (this.chart) {
-            // Destroy the chart
-            this.chart.destroy();
-            this.chart = null;
-            return true;
-        }
-        return false;
-    }
-    /**
-     * Re-renders the chart based on its config
-     * @param {ChartUpdateProps} config Additional configuration object for the update process.
-     * @returns {void}
-     */
-    renderChart(config = { duration: this.cssVarAsNumber('--animation-duration', '0') }) {
-        if (!this.chart || !this.config) {
-            return;
-        }
-        // Stop any chart.js animations
-        this.chart.stop();
-        // Decorate the config object
-        this.decorateConfig();
-        // Update internal layout
-        this.manageTitle();
-        // Update the chart
-        this.chart.update(config);
-    }
-    /**
-     * Update all data, title, scales, legends and re-render the chart based on its config
-     * @param {ChartUpdateProps=} config Additional configuration for control an animation in the update process.
-     * @returns {void}
-     */
-    updateChart(config) {
-        this.renderChart(config);
-    }
-    /**
-     * 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;
-        overflow: hidden;
-        position: relative;
-      }
-      :host::before {
-        content: '';
-        display: block;
-        padding-top: 60%;
-        min-height: 300px;
-        box-sizing: border-box;
-      }
-      [container] {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-      ef-header {
-        margin-bottom: 12px;
-      }
-      canvas {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-      }
-    `;
-    }
-    /**
-     * Handles resize event of the chart region
-     * @returns {void}
-     */
-    onResize() {
-        this.chart?.resize();
-    }
-    /**
-     * A `TemplateResult` that will be used
-     * to render the updated internal template.
-     * @return Render template
-     */
-    render() {
-        return html `
-      <ef-layout flex container>
-        <ef-header></ef-header>
-        <ef-layout part="chart" @resize="${this.onResize}">
-          <canvas id="canvas"></canvas>
-        </ef-layout>
-      </ef-layout>`;
-    }
-};
-__decorate([
-    property({ type: Object })
-], Chart.prototype, "config", void 0);
-__decorate([
-    query('canvas')
-], Chart.prototype, "canvas", void 0);
-__decorate([
-    query('ef-header')
-], Chart.prototype, "titleElement", void 0);
-Chart = __decorate([
-    customElement('ef-chart')
-], Chart);
-export { Chart };
+// eslint-disable-next-line import/extensions
+import { Chart } from 'chart.js/auto';
+import { doughnutCenterLabelPlugin } from './plugins/index.js';
+Chart.register(doughnutCenterLabelPlugin);
+export * from './elements/chart.js';