@aquera/nile-visualization 1.4.0 → 1.6.0

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

@@ -48,6 +48,16 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.sparkline = [];
         /** Color for the sparkline. */
         this.sparklineColor = '';
+        /** Sparkline chart height in pixels. */
+        this.sparklineHeight = 48;
+        /** Sparkline stroke width. */
+        this.sparklineLineWidth = 2;
+        /** Sparkline series type: 'area' (filled) or 'line'. */
+        this.sparklineType = 'area';
+        /** Fill area opacity 0–1. Only applies when sparklineType is 'area'. */
+        this.sparklineFillOpacity = 0.2;
+        /** Show data-point markers on the sparkline. */
+        this.sparklineMarkers = false;
         /** Gauge: the numeric value (0-100 by default). */
         this.gaugeValue = 0;
         /** Gauge: minimum value. */
@@ -56,6 +66,60 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.gaugeMax = 100;
         /** Gauge: ring color. Falls back to brand color. */
         this.gaugeColor = '';
+        /** Gauge: background track color. */
+        this.gaugeTrackColor = '';
+        /** Gauge: start angle in degrees (0 = full circle start). */
+        this.gaugeStartAngle = 0;
+        /** Gauge: end angle in degrees (360 = full circle). */
+        this.gaugeEndAngle = 360;
+        /** Gauge: inner radius as percentage string (controls ring thickness). */
+        this.gaugeInnerRadius = '80%';
+        /** Gauge: whether arc ends are rounded. */
+        this.gaugeRounded = true;
+        /** Gauge: font size for the center data label. */
+        this.gaugeLabelFontSize = 28;
+        /** Gauge: text color for the center data label. */
+        this.gaugeLabelColor = '';
+        /** Gauge: font weight for the center data label. */
+        this.gaugeLabelFontWeight = 600;
+        /** Gauge: vertical offset of the center data label in pixels. */
+        this.gaugeLabelYOffset = -25;
+        /** Gauge: chart height in pixels. */
+        this.gaugeHeight = 160;
+        /** Gauge: outer radius of the arc as a percentage string. */
+        this.gaugeOuterRadius = '100%';
+        /** Override the KPI value font size (e.g. '48px', '2rem'). */
+        this.valueFontSize = '';
+        /** Override the KPI value text color. */
+        this.valueColor = '';
+        /** Custom text shown in the loading state. */
+        this.loadingText = 'Loading...';
+        /** Whether the hover tooltip is shown on value / sparkline / gauge. */
+        this.tooltipEnabled = true;
+        // ── Card chrome ──
+        this.cardBackground = '';
+        this.cardBorderColor = '';
+        this.cardBorderWidth = '';
+        this.cardBorderRadius = '';
+        this.cardShadow = '';
+        this.cardShadowHover = '';
+        this.cardPaddingVertical = '';
+        this.cardPaddingHorizontal = '';
+        this.contentGap = '';
+        // ── Label ──
+        this.labelColor = '';
+        this.labelFontSize = '';
+        this.labelFontWeight = '';
+        // ── Description ──
+        this.descriptionColor = '';
+        this.descriptionFontSize = '';
+        // ── Prefix / suffix ──
+        this.prefixSuffixColor = '';
+        this.prefixSuffixFontSize = '';
+        // ── Trend colors ──
+        this.trendUpColor = '';
+        this.trendDownColor = '';
+        this.trendNeutralColor = '';
         /** Whether the component is in a loading state. */
         this.loading = false;
         /** Highcharts options override for the sparkline or gauge. */
@@ -116,7 +180,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this._tipEl = el;
     }
     _showTip(text, x, y) {
-        if (!this._tipEl)
+        if (!this._tipEl || !this.tooltipEnabled)
             return;
         this._tipEl.textContent = text;
         this._tipEl.style.left = `${x}px`;
@@ -127,6 +191,40 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         if (this._tipEl)
             this._tipEl.style.display = 'none';
     }
+    // ── CSS custom property sync ─────────────────────────────────────────────
+    _syncCssVars() {
+        const set = (prop, val) => {
+            const s = typeof val === 'number'
+                ? (Number.isFinite(val) ? `${val}px` : '')
+                : String(val ?? '').trim();
+            if (s)
+                this.style.setProperty(prop, s);
+            else
+                this.style.removeProperty(prop);
+        };
+        const len = (val) => this.formatCssLength(val) ?? '';
+        set('--nile-kpi-card-bg', this.cardBackground);
+        set('--nile-kpi-card-border-color', this.cardBorderColor);
+        set('--nile-kpi-card-border-width', len(this.cardBorderWidth));
+        set('--nile-kpi-card-border-radius', len(this.cardBorderRadius));
+        set('--nile-kpi-card-shadow', this.cardShadow);
+        set('--nile-kpi-card-shadow-hover', this.cardShadowHover);
+        set('--nile-kpi-padding-v', len(this.cardPaddingVertical));
+        set('--nile-kpi-padding-h', len(this.cardPaddingHorizontal));
+        set('--nile-kpi-content-gap', len(this.contentGap));
+        set('--nile-kpi-label-color', this.labelColor);
+        set('--nile-kpi-label-font-size', len(this.labelFontSize));
+        set('--nile-kpi-label-font-weight', String(this.labelFontWeight ?? ''));
+        set('--nile-kpi-description-color', this.descriptionColor);
+        set('--nile-kpi-description-font-size', len(this.descriptionFontSize));
+        set('--nile-kpi-prefix-suffix-color', this.prefixSuffixColor);
+        set('--nile-kpi-prefix-suffix-font-size', len(this.prefixSuffixFontSize));
+        set('--nile-kpi-trend-up-color', this.trendUpColor);
+        set('--nile-kpi-trend-down-color', this.trendDownColor);
+        set('--nile-kpi-trend-neutral-color', this.trendNeutralColor);
+        set('--nile-kpi-value-color', this.valueColor);
+        set('--nile-kpi-value-font-size', len(this.valueFontSize));
+    }
     // ── Formatting helpers ───────────────────────────────────────────────────
     formatCssLength(value) {
         if (value == null)
@@ -212,6 +310,16 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.sparkline = c.sparkline;
             if (c.sparklineColor !== undefined)
                 this.sparklineColor = c.sparklineColor;
+            if (c.sparklineHeight !== undefined)
+                this.sparklineHeight = c.sparklineHeight;
+            if (c.sparklineLineWidth !== undefined)
+                this.sparklineLineWidth = c.sparklineLineWidth;
+            if (c.sparklineType !== undefined)
+                this.sparklineType = c.sparklineType;
+            if (c.sparklineFillOpacity !== undefined)
+                this.sparklineFillOpacity = c.sparklineFillOpacity;
+            if (c.sparklineMarkers !== undefined)
+                this.sparklineMarkers = c.sparklineMarkers;
             if (c.gaugeValue !== undefined)
                 this.gaugeValue = c.gaugeValue;
             if (c.gaugeMin !== undefined)
@@ -220,6 +328,74 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.gaugeMax = c.gaugeMax;
             if (c.gaugeColor !== undefined)
                 this.gaugeColor = c.gaugeColor;
+            if (c.gaugeTrackColor !== undefined)
+                this.gaugeTrackColor = c.gaugeTrackColor;
+            if (c.gaugeStartAngle !== undefined)
+                this.gaugeStartAngle = c.gaugeStartAngle;
+            if (c.gaugeEndAngle !== undefined)
+                this.gaugeEndAngle = c.gaugeEndAngle;
+            if (c.gaugeInnerRadius !== undefined)
+                this.gaugeInnerRadius = c.gaugeInnerRadius;
+            if (c.gaugeRounded !== undefined)
+                this.gaugeRounded = c.gaugeRounded;
+            if (c.gaugeLabelFontSize !== undefined)
+                this.gaugeLabelFontSize = c.gaugeLabelFontSize;
+            if (c.gaugeLabelColor !== undefined)
+                this.gaugeLabelColor = c.gaugeLabelColor;
+            if (c.gaugeLabelFontWeight !== undefined)
+                this.gaugeLabelFontWeight = c.gaugeLabelFontWeight;
+            if (c.gaugeLabelYOffset !== undefined)
+                this.gaugeLabelYOffset = c.gaugeLabelYOffset;
+            if (c.gaugeHeight !== undefined)
+                this.gaugeHeight = c.gaugeHeight;
+            if (c.gaugeOuterRadius !== undefined)
+                this.gaugeOuterRadius = c.gaugeOuterRadius;
+            if (c.valueFontSize !== undefined)
+                this.valueFontSize = c.valueFontSize;
+            if (c.valueColor !== undefined)
+                this.valueColor = c.valueColor;
+            if (c.loadingText !== undefined)
+                this.loadingText = c.loadingText;
+            if (c.tooltipEnabled !== undefined)
+                this.tooltipEnabled = c.tooltipEnabled;
+            if (c.cardBackground !== undefined)
+                this.cardBackground = c.cardBackground;
+            if (c.cardBorderColor !== undefined)
+                this.cardBorderColor = c.cardBorderColor;
+            if (c.cardBorderWidth !== undefined)
+                this.cardBorderWidth = c.cardBorderWidth;
+            if (c.cardBorderRadius !== undefined)
+                this.cardBorderRadius = c.cardBorderRadius;
+            if (c.cardShadow !== undefined)
+                this.cardShadow = c.cardShadow;
+            if (c.cardShadowHover !== undefined)
+                this.cardShadowHover = c.cardShadowHover;
+            if (c.cardPaddingVertical !== undefined)
+                this.cardPaddingVertical = c.cardPaddingVertical;
+            if (c.cardPaddingHorizontal !== undefined)
+                this.cardPaddingHorizontal = c.cardPaddingHorizontal;
+            if (c.contentGap !== undefined)
+                this.contentGap = c.contentGap;
+            if (c.labelColor !== undefined)
+                this.labelColor = c.labelColor;
+            if (c.labelFontSize !== undefined)
+                this.labelFontSize = c.labelFontSize;
+            if (c.labelFontWeight !== undefined)
+                this.labelFontWeight = c.labelFontWeight;
+            if (c.descriptionColor !== undefined)
+                this.descriptionColor = c.descriptionColor;
+            if (c.descriptionFontSize !== undefined)
+                this.descriptionFontSize = c.descriptionFontSize;
+            if (c.prefixSuffixColor !== undefined)
+                this.prefixSuffixColor = c.prefixSuffixColor;
+            if (c.prefixSuffixFontSize !== undefined)
+                this.prefixSuffixFontSize = c.prefixSuffixFontSize;
+            if (c.trendUpColor !== undefined)
+                this.trendUpColor = c.trendUpColor;
+            if (c.trendDownColor !== undefined)
+                this.trendDownColor = c.trendDownColor;
+            if (c.trendNeutralColor !== undefined)
+                this.trendNeutralColor = c.trendNeutralColor;
             if (c.loading !== undefined)
                 this.loading = c.loading;
             if (c.options !== undefined)
@@ -263,6 +439,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
         this.resizeObserver = null;
     }
     firstUpdated() {
+        this._syncCssVars();
         this.initSparkline();
         this.initGauge();
         this.setupResizeObserver();
@@ -272,7 +449,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             this.applyConfig(this.config);
             return;
         }
-        const sparklineProps = ['sparkline', 'sparklineColor', 'options'];
+        const sparklineProps = ['sparkline', 'sparklineColor', 'sparklineHeight', 'sparklineLineWidth',
+            'sparklineType', 'sparklineFillOpacity', 'sparklineMarkers', 'options'];
         if (sparklineProps.some(p => changedProperties.has(p))) {
             if (this.sparklineChart) {
                 this.sparklineChart.update(this.buildSparklineOptions(), true, true);
@@ -282,7 +460,18 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                 this.initSparkline();
             }
         }
-        const gaugeProps = ['gaugeValue', 'gaugeMin', 'gaugeMax', 'gaugeColor', 'options', 'variant'];
+        const cssVarProps = ['cardBackground', 'cardBorderColor', 'cardBorderWidth', 'cardBorderRadius',
+            'cardShadow', 'cardShadowHover', 'cardPaddingVertical', 'cardPaddingHorizontal', 'contentGap',
+            'labelColor', 'labelFontSize', 'labelFontWeight', 'descriptionColor', 'descriptionFontSize',
+            'prefixSuffixColor', 'prefixSuffixFontSize', 'trendUpColor', 'trendDownColor', 'trendNeutralColor',
+            'valueColor', 'valueFontSize'];
+        if (cssVarProps.some(p => changedProperties.has(p))) {
+            this._syncCssVars();
+        }
+        const gaugeProps = ['gaugeValue', 'gaugeMin', 'gaugeMax', 'gaugeColor', 'gaugeTrackColor',
+            'gaugeStartAngle', 'gaugeEndAngle', 'gaugeInnerRadius', 'gaugeOuterRadius', 'gaugeRounded',
+            'gaugeHeight', 'gaugeLabelFontSize', 'gaugeLabelColor', 'gaugeLabelFontWeight',
+            'gaugeLabelYOffset', 'options', 'variant'];
         if (gaugeProps.some(p => changedProperties.has(p))) {
             if (this.gaugeChart) {
                 this.gaugeChart.update(this.buildGaugeOptions(), true, true);
@@ -313,8 +502,23 @@ let NileKpiChart = class NileKpiChart extends NileElement {
     // ── Chart options ────────────────────────────────────────────────────────
     buildSparklineOptions() {
         const brandColor = this.sparklineColor || '#005EA6';
+        const lineWidth = this.sparklineLineWidth;
+        const seriesType = this.sparklineType;
+        const topAlpha = Math.round(Math.min(1, Math.max(0, this.sparklineFillOpacity)) * 255).toString(16).padStart(2, '0');
+        const plotKey = seriesType;
+        const fillColor = seriesType === 'area'
+            ? {
+                fillColor: {
+                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                    stops: [
+                        [0, brandColor + topAlpha],
+                        [1, brandColor + '00'],
+                    ],
+                },
+            }
+            : {};
         const defaults = {
-            chart: { type: 'area', height: 48, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
+            chart: { type: seriesType, height: this.sparklineHeight, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
             title: { text: undefined },
             subtitle: { text: undefined },
             xAxis: { visible: false },
@@ -322,47 +526,46 @@ let NileKpiChart = class NileKpiChart extends NileElement {
             legend: { enabled: false },
             tooltip: { enabled: false },
             plotOptions: {
-                area: {
-                    marker: { enabled: false },
-                    lineWidth: 2,
+                [plotKey]: {
+                    marker: { enabled: this.sparklineMarkers },
+                    lineWidth,
                     lineColor: brandColor,
-                    fillColor: {
-                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                        stops: [
-                            [0, brandColor + '33'],
-                            [1, brandColor + '00'],
-                        ],
-                    },
-                    states: { hover: { lineWidth: 2 } },
+                    ...fillColor,
+                    states: { hover: { lineWidth } },
                 },
             },
-            series: [{ type: 'area', data: this.sparkline }],
+            series: [{ type: seriesType, data: this.sparkline }],
             credits: { enabled: false },
         };
         return { ...defaults, ...this.options };
     }
     buildGaugeOptions() {
         const color = this.gaugeColor || '#005EA6';
-        const trackColor = '#E5E7EB';
+        const trackColor = this.gaugeTrackColor || '#E5E7EB';
+        const innerRadius = this.gaugeInnerRadius || '80%';
+        const outerRadius = this.gaugeOuterRadius || '100%';
+        const labelFontSize = this.formatCssLength(this.gaugeLabelFontSize) ?? '28px';
+        const labelColor = this.gaugeLabelColor || '#101828';
+        const labelFontWeight = this.gaugeLabelFontWeight ?? 600;
         const displayValue = typeof this.value !== 'undefined' && this.value !== ''
             ? (typeof this.value === 'number' ? this.value : this.gaugeValue)
             : this.gaugeValue;
         return {
             chart: {
                 type: 'solidgauge',
-                height: 160,
+                height: this.gaugeHeight,
                 margin: [0, 0, 0, 0],
                 backgroundColor: 'transparent',
             },
             title: { text: undefined },
             subtitle: { text: undefined },
             pane: {
-                startAngle: 0,
-                endAngle: 360,
+                startAngle: this.gaugeStartAngle,
+                endAngle: this.gaugeEndAngle,
                 background: [{
                         backgroundColor: trackColor,
-                        outerRadius: '100%',
-                        innerRadius: '80%',
+                        outerRadius,
+                        innerRadius,
                         borderWidth: 0,
                         shape: 'arc',
                     }],
@@ -384,11 +587,11 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                     dataLabels: {
                         enabled: true,
                         borderWidth: 0,
-                        y: -25,
+                        y: this.gaugeLabelYOffset,
                         useHTML: true,
-                        format: `<div style="text-align:center"><span style="font-size:28px;font-weight:600;color:#101828">${this.prefix}{y}${this.suffix}</span></div>`,
+                        format: `<div style="text-align:center"><span style="font-size:${labelFontSize};font-weight:${labelFontWeight};color:${labelColor}">${this.prefix}{y}${this.suffix}</span></div>`,
                     },
-                    rounded: true,
+                    rounded: this.gaugeRounded,
                     linecap: 'round',
                 },
             },
@@ -398,8 +601,8 @@ let NileKpiChart = class NileKpiChart extends NileElement {
                     data: [{
                             y: displayValue,
                             color,
-                            radius: '100%',
-                            innerRadius: '80%',
+                            radius: outerRadius,
+                            innerRadius,
                         }],
                 }],
             credits: { enabled: false },
@@ -451,7 +654,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
     // ── Render ───────────────────────────────────────────────────────────────
     renderTrend() {
         if (this.trendValue === null)
-            return nothing;
+            return undefined;
         const dir = this.trendDirection;
         const formatted = Math.abs(this.trendValue).toFixed(1) + '%';
         return html `
@@ -469,35 +672,31 @@ let NileKpiChart = class NileKpiChart extends NileElement {
     }
     render() {
         if (this.loading) {
-            return html `<div class="chart-loading">Loading...</div>`;
+            return html `<div class="chart-loading">${this.loadingText}</div>`;
         }
         const isGauge = this.variant === 'gauge';
         return html `
       <div class="kpi ${isGauge ? 'kpi--gauge' : ''}">
         ${this.label ? html `<p class="kpi-label">${this.label}</p>` : nothing}
 
-        ${isGauge
-            ? html `
-              <div
-                class="kpi-gauge-container"
-                @mouseenter=${this._onGaugeEnter}
-                @mouseleave=${this._onTipLeave}
-              ></div>
-            `
-            : nothing}
+        ${isGauge ? html `
+          <div
+            class="kpi-gauge-container"
+            @mouseenter=${this._onGaugeEnter}
+            @mouseleave=${this._onTipLeave}
+          ></div>
+        ` : nothing}
 
         <div class="kpi-value-row">
-          ${!isGauge
-            ? html `
-                <h2
-                  class="kpi-value"
-                  @mouseenter=${this._onValueEnter}
-                  @mouseleave=${this._onTipLeave}
-                >
-                  ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
-                </h2>
-              `
-            : nothing}
+          ${!isGauge ? html `
+            <h2
+              class="kpi-value"
+              @mouseenter=${this._onValueEnter}
+              @mouseleave=${this._onTipLeave}
+            >
+              ${this.prefix ? html `<span class="kpi-prefix">${this.prefix}</span>` : nothing}${this.value}${this.suffix ? html `<span class="kpi-suffix">${this.suffix}</span>` : nothing}
+            </h2>
+          ` : nothing}
           ${!isGauge ? this.renderTrend() : nothing}
         </div>
 
@@ -505,9 +704,7 @@ let NileKpiChart = class NileKpiChart extends NileElement {
 
         ${this.description ? html `<p class="kpi-description">${this.description}</p>` : nothing}
 
-        ${this.sparkline.length && !isGauge
-            ? html `<div class="kpi-sparkline"></div>`
-            : nothing}
+        ${this.sparkline.length && !isGauge ? html `<div class="kpi-sparkline"></div>` : nothing}
       </div>
     `;
     }
@@ -555,6 +752,21 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'sparkline-color' })
 ], NileKpiChart.prototype, "sparklineColor", void 0);
+__decorate([
+    property({ type: Number, attribute: 'sparkline-height' })
+], NileKpiChart.prototype, "sparklineHeight", void 0);
+__decorate([
+    property({ type: Number, attribute: 'sparkline-line-width' })
+], NileKpiChart.prototype, "sparklineLineWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'sparkline-type' })
+], NileKpiChart.prototype, "sparklineType", void 0);
+__decorate([
+    property({ type: Number, attribute: 'sparkline-fill-opacity' })
+], NileKpiChart.prototype, "sparklineFillOpacity", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'sparkline-markers' })
+], NileKpiChart.prototype, "sparklineMarkers", void 0);
 __decorate([
     property({ type: Number, attribute: 'gauge-value' })
 ], NileKpiChart.prototype, "gaugeValue", void 0);
@@ -567,6 +779,108 @@ __decorate([
 __decorate([
     property({ type: String, attribute: 'gauge-color' })
 ], NileKpiChart.prototype, "gaugeColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-track-color' })
+], NileKpiChart.prototype, "gaugeTrackColor", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-start-angle' })
+], NileKpiChart.prototype, "gaugeStartAngle", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-end-angle' })
+], NileKpiChart.prototype, "gaugeEndAngle", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-inner-radius' })
+], NileKpiChart.prototype, "gaugeInnerRadius", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'gauge-rounded' })
+], NileKpiChart.prototype, "gaugeRounded", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-label-font-size' })
+], NileKpiChart.prototype, "gaugeLabelFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-label-color' })
+], NileKpiChart.prototype, "gaugeLabelColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-label-font-weight' })
+], NileKpiChart.prototype, "gaugeLabelFontWeight", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-label-y-offset' })
+], NileKpiChart.prototype, "gaugeLabelYOffset", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-height' })
+], NileKpiChart.prototype, "gaugeHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-outer-radius' })
+], NileKpiChart.prototype, "gaugeOuterRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-font-size' })
+], NileKpiChart.prototype, "valueFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'value-color' })
+], NileKpiChart.prototype, "valueColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'loading-text' })
+], NileKpiChart.prototype, "loadingText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'tooltip-enabled' })
+], NileKpiChart.prototype, "tooltipEnabled", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-background' })
+], NileKpiChart.prototype, "cardBackground", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-border-color' })
+], NileKpiChart.prototype, "cardBorderColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-border-width' })
+], NileKpiChart.prototype, "cardBorderWidth", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-border-radius' })
+], NileKpiChart.prototype, "cardBorderRadius", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-shadow' })
+], NileKpiChart.prototype, "cardShadow", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-shadow-hover' })
+], NileKpiChart.prototype, "cardShadowHover", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-padding-vertical' })
+], NileKpiChart.prototype, "cardPaddingVertical", void 0);
+__decorate([
+    property({ type: String, attribute: 'card-padding-horizontal' })
+], NileKpiChart.prototype, "cardPaddingHorizontal", void 0);
+__decorate([
+    property({ type: String, attribute: 'content-gap' })
+], NileKpiChart.prototype, "contentGap", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-color' })
+], NileKpiChart.prototype, "labelColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-font-size' })
+], NileKpiChart.prototype, "labelFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-font-weight' })
+], NileKpiChart.prototype, "labelFontWeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'description-color' })
+], NileKpiChart.prototype, "descriptionColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'description-font-size' })
+], NileKpiChart.prototype, "descriptionFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefix-suffix-color' })
+], NileKpiChart.prototype, "prefixSuffixColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'prefix-suffix-font-size' })
+], NileKpiChart.prototype, "prefixSuffixFontSize", void 0);
+__decorate([
+    property({ type: String, attribute: 'trend-up-color' })
+], NileKpiChart.prototype, "trendUpColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'trend-down-color' })
+], NileKpiChart.prototype, "trendDownColor", void 0);
+__decorate([
+    property({ type: String, attribute: 'trend-neutral-color' })
+], NileKpiChart.prototype, "trendNeutralColor", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileKpiChart.prototype, "loading", void 0);

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

@@ -1,6 +1,16 @@
 import { css } from 'lit';
 export const styles = css `
   :host {
+    --nile-chart-min-height: var(--nile-height-200px, var(--ng-height-200px));
+    --nile-chart-bg: transparent;
+    --nile-chart-border-radius: 0;
+    --nile-chart-border: none;
+    --nile-chart-shadow: none;
+    --nile-chart-padding: 0;
+    --nile-chart-loading-color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    --nile-chart-loading-font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    --nile-chart-loading-font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    --nile-chart-loading-bg: transparent;
     display: block;
     width: 100%;
     position: relative;
@@ -12,7 +22,12 @@ export const styles = css `
 
   .chart-container {
     width: 100%;
-    min-height: var(--nile-height-200px, var(--ng-height-200px));
+    min-height: var(--nile-chart-min-height);
+    background: var(--nile-chart-bg);
+    border-radius: var(--nile-chart-border-radius);
+    border: var(--nile-chart-border);
+    box-shadow: var(--nile-chart-shadow);
+    padding: var(--nile-chart-padding);
   }
 
   .chart-loading {
@@ -20,9 +35,10 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     min-height: inherit;
-    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    color: var(--nile-chart-loading-color);
+    font-family: var(--nile-chart-loading-font-family);
+    font-size: var(--nile-chart-loading-font-size);
+    background: var(--nile-chart-loading-bg);
   }
 `;
 //# sourceMappingURL=nile-line-chart.css.js.map

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

@@ -23,6 +23,19 @@ export declare class NileLineChart extends NileElement {
     loading: boolean;
     height: string;
     yAxisTitle: string;
+    showLegend: boolean;
+    chartBg: string;
+    chartBorderRadius: string | number;
+    chartBorder: string;
+    chartShadow: string;
+    chartPadding: string | number;
+    chartMinHeight: string | number;
+    loadingText: string;
+    loadingColor: string;
+    loadingFontSize: string | number;
+    loadingFontFamily: string;
+    loadingBg: string;
+    private _syncCssVars;
     /** Apply { chart, aq } config to individual properties. */
     private applyConfig;
     connectedCallback(): void;