@aquera/nile-visualization 0.1.0 → 0.2.0

package/dist/src/nile-histogram-chart/nile-histogram-chart.js

@@ -0,0 +1,263 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-histogram-chart.css.js';
+/** Stable id linking the hidden source series to the histogram series. */
+const HISTOGRAM_BASE_ID = 'nile-histogram-base';
+let NileHistogramChart = class NileHistogramChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated `{ chart, aq }` input. */
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        /** Raw numeric observations; each value is binned into the histogram. */
+        this.data = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.xAxisTitle = '';
+        this.yAxisTitle = '';
+        this.histogramSeriesName = '';
+        this.sourceSeriesName = '';
+        /** Bar fill color for the histogram series. */
+        this.histogramColor = '#3b82f6';
+        /**
+         * Bin rule: a positive integer, or `square-root` (default), `sturges`, or `rice`.
+         * Ignored when `binWidth` is set.
+         */
+        this.binsNumber = 'square-root';
+        /** Fixed bin width; when > 0, overrides `binsNumber`. */
+        this.binWidth = 0;
+        this.showLegend = true;
+    }
+    /** Apply `{ chart, aq }` config to individual properties. */
+    applyConfig(cfg) {
+        applySeparatedChartConfig(this, cfg);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() {
+        this.initChart();
+        this.setupResizeObserver();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
+        const props = [
+            'data',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'xAxisTitle',
+            'yAxisTitle',
+            'histogramSeriesName',
+            'sourceSeriesName',
+            'histogramColor',
+            'binsNumber',
+            'binWidth',
+            'showLegend',
+            'loading',
+        ];
+        if (!props.some(p => changedProperties.has(p)))
+            return;
+        if (this.loading) {
+            this.destroyChart();
+            return;
+        }
+        if (this.chart) {
+            this.chart.update(this.buildOptions(), true, true);
+        }
+        else {
+            this.initChart();
+        }
+    }
+    setupResizeObserver() {
+        if (!this.chartContainer)
+            return;
+        this.resizeObserver = new ResizeObserver(() => {
+            this.chart?.reflow();
+        });
+        this.resizeObserver.observe(this.chartContainer);
+    }
+    resolveBinsNumber() {
+        const raw = (this.binsNumber || 'square-root').trim().toLowerCase();
+        if (/^\d+$/.test(raw)) {
+            const n = parseInt(raw, 10);
+            return n > 0 ? n : 'square-root';
+        }
+        if (raw === 'sturges' || raw === 'rice' || raw === 'square-root')
+            return raw;
+        return 'square-root';
+    }
+    buildOptions() {
+        const self = this;
+        const bw = this.binWidth > 0 ? this.binWidth : undefined;
+        const scatterData = this.data.map(x => [x, 0]);
+        return deepMerge({
+            chart: { height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            legend: { enabled: this.showLegend },
+            xAxis: [
+                {
+                    title: { text: this.xAxisTitle || undefined },
+                    gridLineWidth: 1,
+                },
+            ],
+            yAxis: [
+                {
+                    title: { text: this.yAxisTitle || 'Count' },
+                    min: 0,
+                    gridLineWidth: 1,
+                },
+            ],
+            tooltip: {
+                headerFormat: '',
+                pointFormat: '<span style="color:{point.color}">●</span> <b>{point.x:.1f} – {point.x2:.1f}</b><br/>Count: <b>{point.y}</b>',
+            },
+            plotOptions: {
+                histogram: {
+                    borderWidth: 0,
+                    borderRadius: 2,
+                    color: this.histogramColor,
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    x: this.x,
+                                    x2: this.x2,
+                                    value: this.y,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+                scatter: {
+                    marker: { enabled: false, radius: 0 },
+                    enableMouseTracking: false,
+                },
+            },
+            series: [
+                {
+                    type: 'scatter',
+                    id: HISTOGRAM_BASE_ID,
+                    name: this.sourceSeriesName || 'Observations',
+                    data: scatterData,
+                    xAxis: 0,
+                    yAxis: 0,
+                    visible: false,
+                    showInLegend: false,
+                },
+                {
+                    type: 'histogram',
+                    name: this.histogramSeriesName || 'Distribution',
+                    baseSeries: HISTOGRAM_BASE_ID,
+                    xAxis: 0,
+                    yAxis: 0,
+                    binsNumber: bw ? undefined : this.resolveBinsNumber(),
+                    binWidth: bw,
+                    color: this.histogramColor,
+                    zIndex: 1,
+                },
+            ],
+            credits: { enabled: false },
+        }, this.options);
+    }
+    async initChart() {
+        if (this.loading || !this.chartContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.chart = this._hc.chart(this.chartContainer, this.buildOptions());
+        this.emit('nile-chart-ready', { chart: this.chart });
+    }
+    destroyChart() {
+        if (this.chart) {
+            this.chart.destroy();
+            this.chart = null;
+        }
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading" style="height:${this.height}">Loading...</div>`;
+        }
+        return html `<div class="chart-container"></div>`;
+    }
+};
+NileHistogramChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileHistogramChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileHistogramChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileHistogramChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileHistogramChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileHistogramChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Object })
+], NileHistogramChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileHistogramChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileHistogramChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'x-axis-title' })
+], NileHistogramChart.prototype, "xAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileHistogramChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'histogram-name' })
+], NileHistogramChart.prototype, "histogramSeriesName", void 0);
+__decorate([
+    property({ type: String, attribute: 'source-name' })
+], NileHistogramChart.prototype, "sourceSeriesName", void 0);
+__decorate([
+    property({ type: String, attribute: 'histogram-color' })
+], NileHistogramChart.prototype, "histogramColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'bins-number' })
+], NileHistogramChart.prototype, "binsNumber", void 0);
+__decorate([
+    property({ type: Number, attribute: 'bin-width' })
+], NileHistogramChart.prototype, "binWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileHistogramChart.prototype, "showLegend", void 0);
+NileHistogramChart = __decorate([
+    customElement('nile-histogram-chart')
+], NileHistogramChart);
+export { NileHistogramChart };
+//# sourceMappingURL=nile-histogram-chart.js.map

package/dist/src/nile-kpi-chart/index.d.ts

@@ -1,2 +1,2 @@
 export { NileKpiChart } from './nile-kpi-chart.js';
-export type { KpiConfig, TrendDirection, KpiVariant } from './nile-kpi-chart.js';
+export type { ChartKpiSeparatedPayload, KpiConfig, NileKpiConfigInputType, TrendDirection, KpiVariant, } from './nile-kpi-chart.js';

package/dist/src/nile-kpi-chart/nile-kpi-chart.d.ts

@@ -1,8 +1,35 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
+import type { AqConfigType } from '../internal/types/aq-config.type.js';
 export type TrendDirection = 'up' | 'down' | 'neutral';
 export type KpiVariant = 'default' | 'card' | 'gauge';
+/** `chart` slice for `<nile-kpi-chart>.config` (discriminated by `type: 'kpi'`). */
+export interface ChartKpiSeparatedPayload {
+    type: 'kpi';
+    variant?: KpiVariant;
+    label?: string;
+    value?: string | number;
+    prefix?: string;
+    suffix?: string;
+    trendValue?: number | null;
+    trendDirection?: TrendDirection;
+    trendLabel?: string;
+    description?: string;
+    sparkline?: number[];
+    sparklineColor?: string;
+    gaugeValue?: number;
+    gaugeMin?: number;
+    gaugeMax?: number;
+    gaugeColor?: string;
+    loading?: boolean;
+    options?: Highcharts.Options;
+}
+/** Separated `{ chart, aq }` input for `<nile-kpi-chart>`. */
+export interface NileKpiConfigInputType {
+    chart: ChartKpiSeparatedPayload;
+    aq?: AqConfigType;
+}
 export interface KpiConfig {
     label: string;
     value: number | string;
@@ -24,6 +51,8 @@ export declare class NileKpiChart extends NileElement {
     private resizeObserver;
     private sparklineContainer;
     private gaugeContainer;
+    /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
+    config: NileKpiConfigInputType | null;
     /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
     variant: KpiVariant;
     /** Label displayed above the value. */
@@ -58,6 +87,9 @@ export declare class NileKpiChart extends NileElement {
     loading: boolean;
     /** Highcharts options override for the sparkline or gauge. */
     options: Highcharts.Options;
+    /** Apply `{ chart, aq }` to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;

package/dist/src/nile-kpi-chart/nile-kpi-chart.js

@@ -11,6 +11,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.sparklineChart = null;
         this.gaugeChart = null;
         this.resizeObserver = null;
+        /** Full configuration: `{ chart, aq }` (same convention as other Nile charts). */
+        this.config = null;
         /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
         this.variant = 'default';
         /** Label displayed above the value. */
@@ -46,6 +48,57 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         /** Highcharts options override for the sparkline or gauge. */
         this.options = {};
     }
+    /** Apply `{ chart, aq }` to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            if (c.variant !== undefined)
+                this.variant = c.variant;
+            if (c.label !== undefined)
+                this.label = c.label;
+            if (c.value !== undefined)
+                this.value = c.value;
+            if (c.prefix !== undefined)
+                this.prefix = c.prefix;
+            if (c.suffix !== undefined)
+                this.suffix = c.suffix;
+            if (c.trendValue !== undefined)
+                this.trendValue = c.trendValue;
+            if (c.trendDirection !== undefined)
+                this.trendDirection = c.trendDirection;
+            if (c.trendLabel !== undefined)
+                this.trendLabel = c.trendLabel;
+            if (c.description !== undefined)
+                this.description = c.description;
+            if (c.sparkline !== undefined)
+                this.sparkline = c.sparkline;
+            if (c.sparklineColor !== undefined)
+                this.sparklineColor = c.sparklineColor;
+            if (c.gaugeValue !== undefined)
+                this.gaugeValue = c.gaugeValue;
+            if (c.gaugeMin !== undefined)
+                this.gaugeMin = c.gaugeMin;
+            if (c.gaugeMax !== undefined)
+                this.gaugeMax = c.gaugeMax;
+            if (c.gaugeColor !== undefined)
+                this.gaugeColor = c.gaugeColor;
+            if (c.loading !== undefined)
+                this.loading = c.loading;
+            if (c.options !== undefined)
+                this.options = c.options;
+        }
+        if (aq) {
+            if (aq.chartTitle != null)
+                this.label = aq.chartTitle;
+            if (aq.chartSubtitle != null)
+                this.description = aq.chartSubtitle;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.destroyCharts();
@@ -58,6 +111,10 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.setupResizeObserver();
     }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const sparklineProps = ['sparkline', 'sparklineColor', 'options'];
         if (sparklineProps.some(p => changedProperties.has(p))) {
             if (this.sparklineChart) {
@@ -277,6 +334,9 @@ __decorate([
 __decorate([
     query('.kpi-gauge-container')
 ], NileKpiChart.prototype, "gaugeContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileKpiChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, reflect: true })
 ], NileKpiChart.prototype, "variant", void 0);

package/dist/src/nile-line-chart/nile-line-chart.d.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
 export interface LineChartSeriesData {
     name: string;
     data: number[];
@@ -12,6 +13,8 @@ export declare class NileLineChart extends NileElement {
     private chart;
     private resizeObserver;
     private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
     chartTitle: string;
     chartSubtitle: string;
     data: LineChartSeriesData[];
@@ -20,6 +23,9 @@ export declare class NileLineChart extends NileElement {
     loading: boolean;
     height: string;
     yAxisTitle: string;
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;

package/dist/src/nile-line-chart/nile-line-chart.js

@@ -11,6 +11,8 @@ let NileLineChart = class NileLineChart extends NileElement {
         this._hc = null;
         this.chart = null;
         this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated { chart, aq } input. */
+        this.config = null;
         this.chartTitle = '';
         this.chartSubtitle = '';
         this.data = [];
@@ -20,6 +22,36 @@ let NileLineChart = class NileLineChart extends NileElement {
         this.height = '400px';
         this.yAxisTitle = '';
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const line = c;
+            if (line.data)
+                this.data = line.data;
+            if (line.categories)
+                this.categories = line.categories;
+            if (line.yAxisTitle)
+                this.yAxisTitle = line.yAxisTitle;
+            if (line.height)
+                this.height = line.height;
+            if (line.loading !== undefined)
+                this.loading = line.loading;
+            if (line.options)
+                this.options = line.options;
+        }
+        if (aq) {
+            if (aq.chartTitle)
+                this.chartTitle = aq.chartTitle;
+            if (aq.chartSubtitle)
+                this.chartSubtitle = aq.chartSubtitle;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.destroyChart();
@@ -28,6 +60,10 @@ let NileLineChart = class NileLineChart extends NileElement {
     }
     firstUpdated() { this.initChart(); this.setupResizeObserver(); }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'yAxisTitle', 'loading'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -84,6 +120,9 @@ NileLineChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NileLineChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileLineChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NileLineChart.prototype, "chartTitle", void 0);

package/dist/src/nile-pie-chart/nile-pie-chart.d.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
 export interface PieChartSeriesData {
     name: string;
     y: number;
@@ -14,6 +15,8 @@ export declare class NilePieChart extends NileElement {
     private chart;
     private resizeObserver;
     private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
     /** The chart title displayed above the chart. */
     chartTitle: string;
     /** The subtitle displayed below the title. */
@@ -32,6 +35,9 @@ export declare class NilePieChart extends NileElement {
     showDataLabels: boolean;
     /** Whether to enable the legend. */
     showLegend: boolean;
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;

package/dist/src/nile-pie-chart/nile-pie-chart.js

@@ -11,6 +11,8 @@ let NilePieChart = class NilePieChart extends NileElement {
         this._hc = null;
         this.chart = null;
         this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated { chart, aq } input. */
+        this.config = null;
         /** The chart title displayed above the chart. */
         this.chartTitle = '';
         /** The subtitle displayed below the title. */
@@ -30,6 +32,38 @@ let NilePieChart = class NilePieChart extends NileElement {
         /** Whether to enable the legend. */
         this.showLegend = true;
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const pie = c;
+            if (pie.data)
+                this.data = pie.data;
+            if (pie.seriesName)
+                this.seriesName = pie.seriesName;
+            if (pie.height)
+                this.height = pie.height;
+            if (pie.loading !== undefined)
+                this.loading = pie.loading;
+            if (pie.options)
+                this.options = pie.options;
+            if (pie.showDataLabels !== undefined)
+                this.showDataLabels = pie.showDataLabels;
+            if (pie.showLegend !== undefined)
+                this.showLegend = pie.showLegend;
+        }
+        if (aq) {
+            if (aq.chartTitle)
+                this.chartTitle = aq.chartTitle;
+            if (aq.chartSubtitle)
+                this.chartSubtitle = aq.chartSubtitle;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.destroyChart();
@@ -41,6 +75,10 @@ let NilePieChart = class NilePieChart extends NileElement {
         this.setupResizeObserver();
     }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const chartProps = [
             'data',
             'chartTitle',
@@ -163,6 +201,9 @@ NilePieChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NilePieChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NilePieChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NilePieChart.prototype, "chartTitle", void 0);

package/dist/src/nile-radar-chart/nile-radar-chart.d.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 import type Highcharts from 'highcharts';
 import NileElement from '../internal/nile-element.js';
+import type { NileChartConfigInputType } from '../internal/types/index.js';
 export interface RadarChartSeriesData {
     name: string;
     data: number[];
@@ -12,6 +13,8 @@ export declare class NileRadarChart extends NileElement {
     private chart;
     private resizeObserver;
     private chartContainer;
+    /** Full chart configuration. Accepts separated { chart, aq } input. */
+    config: NileChartConfigInputType | null;
     chartTitle: string;
     chartSubtitle: string;
     data: RadarChartSeriesData[];
@@ -20,6 +23,9 @@ export declare class NileRadarChart extends NileElement {
     loading: boolean;
     height: string;
     showArea: boolean;
+    /** Apply { chart, aq } config to individual properties. */
+    private applyConfig;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues): void;

package/dist/src/nile-radar-chart/nile-radar-chart.js

@@ -11,6 +11,8 @@ let NileRadarChart = class NileRadarChart extends NileElement {
         this._hc = null;
         this.chart = null;
         this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated { chart, aq } input. */
+        this.config = null;
         this.chartTitle = '';
         this.chartSubtitle = '';
         this.data = [];
@@ -20,6 +22,36 @@ let NileRadarChart = class NileRadarChart extends NileElement {
         this.height = '400px';
         this.showArea = false;
     }
+    /** Apply { chart, aq } config to individual properties. */
+    applyConfig(cfg) {
+        const { chart: c, aq } = cfg;
+        if (c) {
+            const radar = c;
+            if (radar.data)
+                this.data = radar.data;
+            if (radar.categories)
+                this.categories = radar.categories;
+            if (radar.height)
+                this.height = radar.height;
+            if (radar.loading !== undefined)
+                this.loading = radar.loading;
+            if (radar.options)
+                this.options = radar.options;
+            if (radar.showArea !== undefined)
+                this.showArea = radar.showArea;
+        }
+        if (aq) {
+            if (aq.chartTitle)
+                this.chartTitle = aq.chartTitle;
+            if (aq.chartSubtitle)
+                this.chartSubtitle = aq.chartSubtitle;
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            this.applyConfig(this.config);
+    }
     disconnectedCallback() {
         super.disconnectedCallback();
         this.destroyChart();
@@ -28,6 +60,10 @@ let NileRadarChart = class NileRadarChart extends NileElement {
     }
     firstUpdated() { this.initChart(); this.setupResizeObserver(); }
     updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.applyConfig(this.config);
+            return;
+        }
         const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'showArea', 'loading'];
         if (!props.some(p => changedProperties.has(p)))
             return;
@@ -106,6 +142,9 @@ NileRadarChart.styles = styles;
 __decorate([
     query('.chart-container')
 ], NileRadarChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileRadarChart.prototype, "config", void 0);
 __decorate([
     property({ type: String, attribute: 'chart-title' })
 ], NileRadarChart.prototype, "chartTitle", void 0);