@aquera/nile-visualization 0.1.0

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

@@ -0,0 +1,165 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Card variant ── */
+
+  .kpi-card {
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+    transition: box-shadow var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
+  }
+
+  .kpi-card:hover {
+    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
+  }
+
+  /* ── Base layout ── */
+
+  .kpi {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  .kpi-label {
+    margin: 0;
+    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));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    line-height: 1.4;
+  }
+
+  .kpi-value-row {
+    display: flex;
+    align-items: baseline;
+    gap: var(--nile-spacing-md, var(--ng-spacing-md));
+    flex-wrap: wrap;
+  }
+
+  .kpi-value {
+    margin: 0;
+    font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
+    font-size: 36px;
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    line-height: 1.2;
+  }
+
+  .kpi-prefix,
+  .kpi-suffix {
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+  }
+
+  .kpi-trend {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+    line-height: 1;
+  }
+
+  .kpi-trend--up {
+    background: var(--nile-colors-success-100, #ECFDF3);
+    color: var(--nile-colors-success-700, #067647);
+  }
+
+  .kpi-trend--down {
+    background: var(--nile-colors-error-100, #FEF3F2);
+    color: var(--nile-colors-error-700, #B42318);
+  }
+
+  .kpi-trend--neutral {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+  }
+
+  .kpi-trend-arrow {
+    display: inline-flex;
+    width: 12px;
+    height: 12px;
+  }
+
+  .kpi-trend-arrow svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+  }
+
+  .kpi-description {
+    margin: 0;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    line-height: 1.5;
+  }
+
+  .kpi-sparkline {
+    width: 100%;
+    height: 48px;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+  }
+
+  /* ── Gauge variant ── */
+
+  .kpi--gauge {
+    align-items: center;
+    text-align: center;
+  }
+
+  .kpi-gauge-container {
+    width: 160px;
+    height: 160px;
+    margin: 0 auto;
+  }
+
+  .kpi--gauge .kpi-value-row {
+    justify-content: center;
+    display: none;
+  }
+
+  .kpi--gauge .kpi-label {
+    text-align: center;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  }
+
+  .kpi--gauge .kpi-trend {
+    margin: 0 auto;
+  }
+
+  .kpi--gauge .kpi-description {
+    text-align: center;
+  }
+
+  /* ── Loading state ── */
+
+  .chart-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: var(--nile-height-200px, var(--ng-height-200px));
+    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));
+  }
+`;
+//# sourceMappingURL=nile-kpi-chart.css.js.map

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

@@ -0,0 +1,80 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export type TrendDirection = 'up' | 'down' | 'neutral';
+export type KpiVariant = 'default' | 'card' | 'gauge';
+export interface KpiConfig {
+    label: string;
+    value: number | string;
+    prefix?: string;
+    suffix?: string;
+    trend?: {
+        value: number;
+        direction: TrendDirection;
+        label?: string;
+    };
+    description?: string;
+    sparkline?: number[];
+}
+export declare class NileKpiChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private sparklineChart;
+    private gaugeChart;
+    private resizeObserver;
+    private sparklineContainer;
+    private gaugeContainer;
+    /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
+    variant: KpiVariant;
+    /** Label displayed above the value. */
+    label: string;
+    /** The main KPI value. */
+    value: string | number;
+    /** Prefix shown before the value (e.g. "$"). */
+    prefix: string;
+    /** Suffix shown after the value (e.g. "%"). */
+    suffix: string;
+    /** Trend percentage (e.g. 12.5). */
+    trendValue: number | null;
+    /** Trend direction: up, down, or neutral. */
+    trendDirection: TrendDirection;
+    /** Trend context label (e.g. "vs last month"). */
+    trendLabel: string;
+    /** Description shown below the value. */
+    description: string;
+    /** Sparkline data points. When provided, a Highcharts mini area chart renders below the value. */
+    sparkline: number[];
+    /** Color for the sparkline. */
+    sparklineColor: string;
+    /** Gauge: the numeric value (0-100 by default). */
+    gaugeValue: number;
+    /** Gauge: minimum value. */
+    gaugeMin: number;
+    /** Gauge: maximum value. */
+    gaugeMax: number;
+    /** Gauge: ring color. Falls back to brand color. */
+    gaugeColor: string;
+    /** Whether the component is in a loading state. */
+    loading: boolean;
+    /** Highcharts options override for the sparkline or gauge. */
+    options: Highcharts.Options;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private buildSparklineOptions;
+    private buildGaugeOptions;
+    private initSparkline;
+    private initGauge;
+    private destroySparkline;
+    private destroyGauge;
+    private destroyCharts;
+    private renderTrend;
+    private renderContent;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-kpi-chart': NileKpiChart;
+    }
+}

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

@@ -0,0 +1,335 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { styles } from './nile-kpi-chart.css.js';
+let NileKpiChart = class NileKpiChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.sparklineChart = null;
+        this.gaugeChart = null;
+        this.resizeObserver = null;
+        /** Display variant: default (flat), card (bordered container), gauge (Highcharts solid gauge). */
+        this.variant = 'default';
+        /** Label displayed above the value. */
+        this.label = '';
+        /** The main KPI value. */
+        this.value = '';
+        /** Prefix shown before the value (e.g. "$"). */
+        this.prefix = '';
+        /** Suffix shown after the value (e.g. "%"). */
+        this.suffix = '';
+        /** Trend percentage (e.g. 12.5). */
+        this.trendValue = null;
+        /** Trend direction: up, down, or neutral. */
+        this.trendDirection = 'neutral';
+        /** Trend context label (e.g. "vs last month"). */
+        this.trendLabel = '';
+        /** Description shown below the value. */
+        this.description = '';
+        /** Sparkline data points. When provided, a Highcharts mini area chart renders below the value. */
+        this.sparkline = [];
+        /** Color for the sparkline. */
+        this.sparklineColor = '';
+        /** Gauge: the numeric value (0-100 by default). */
+        this.gaugeValue = 0;
+        /** Gauge: minimum value. */
+        this.gaugeMin = 0;
+        /** Gauge: maximum value. */
+        this.gaugeMax = 100;
+        /** Gauge: ring color. Falls back to brand color. */
+        this.gaugeColor = '';
+        /** Whether the component is in a loading state. */
+        this.loading = false;
+        /** Highcharts options override for the sparkline or gauge. */
+        this.options = {};
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyCharts();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() {
+        this.initSparkline();
+        this.initGauge();
+        this.setupResizeObserver();
+    }
+    updated(changedProperties) {
+        const sparklineProps = ['sparkline', 'sparklineColor', 'options'];
+        if (sparklineProps.some(p => changedProperties.has(p))) {
+            if (this.sparklineChart) {
+                this.sparklineChart.update(this.buildSparklineOptions(), true, true);
+            }
+            else {
+                this.initSparkline();
+            }
+        }
+        const gaugeProps = ['gaugeValue', 'gaugeMin', 'gaugeMax', 'gaugeColor', 'options', 'variant'];
+        if (gaugeProps.some(p => changedProperties.has(p))) {
+            if (this.gaugeChart) {
+                this.gaugeChart.update(this.buildGaugeOptions(), true, true);
+            }
+            else {
+                this.initGauge();
+            }
+        }
+    }
+    setupResizeObserver() {
+        this.resizeObserver = new ResizeObserver(() => {
+            this.sparklineChart?.reflow();
+            this.gaugeChart?.reflow();
+        });
+        if (this.sparklineContainer)
+            this.resizeObserver.observe(this.sparklineContainer);
+        if (this.gaugeContainer)
+            this.resizeObserver.observe(this.gaugeContainer);
+    }
+    buildSparklineOptions() {
+        const brandColor = this.sparklineColor || '#005EA6';
+        const defaults = {
+            chart: { type: 'area', height: 48, margin: [2, 0, 2, 0], backgroundColor: 'transparent' },
+            title: { text: undefined },
+            subtitle: { text: undefined },
+            xAxis: { visible: false },
+            yAxis: { visible: false },
+            legend: { enabled: false },
+            tooltip: { enabled: false },
+            plotOptions: {
+                area: {
+                    marker: { enabled: false },
+                    lineWidth: 2,
+                    lineColor: brandColor,
+                    fillColor: {
+                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
+                        stops: [
+                            [0, brandColor + '33'],
+                            [1, brandColor + '00'],
+                        ],
+                    },
+                    states: { hover: { lineWidth: 2 } },
+                },
+            },
+            series: [{ type: 'area', data: this.sparkline }],
+            credits: { enabled: false },
+        };
+        return { ...defaults, ...this.options };
+    }
+    buildGaugeOptions() {
+        const color = this.gaugeColor || '#005EA6';
+        const trackColor = '#E5E7EB';
+        const displayValue = typeof this.value !== 'undefined' && this.value !== ''
+            ? (typeof this.value === 'number' ? this.value : this.gaugeValue)
+            : this.gaugeValue;
+        return {
+            chart: {
+                type: 'solidgauge',
+                height: 160,
+                margin: [0, 0, 0, 0],
+                backgroundColor: 'transparent',
+            },
+            title: { text: undefined },
+            subtitle: { text: undefined },
+            pane: {
+                startAngle: 0,
+                endAngle: 360,
+                background: [{
+                        backgroundColor: trackColor,
+                        outerRadius: '100%',
+                        innerRadius: '80%',
+                        borderWidth: 0,
+                        shape: 'arc',
+                    }],
+                center: ['50%', '50%'],
+                size: '100%',
+            },
+            yAxis: {
+                min: this.gaugeMin,
+                max: this.gaugeMax,
+                lineWidth: 0,
+                tickWidth: 0,
+                minorTickLength: 0,
+                tickLength: 0,
+                labels: { enabled: false },
+            },
+            tooltip: { enabled: false },
+            plotOptions: {
+                solidgauge: {
+                    dataLabels: {
+                        enabled: true,
+                        borderWidth: 0,
+                        y: -25,
+                        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>`,
+                    },
+                    rounded: true,
+                    linecap: 'round',
+                },
+            },
+            series: [{
+                    type: 'solidgauge',
+                    name: this.label || 'Value',
+                    data: [{
+                            y: displayValue,
+                            color,
+                            radius: '100%',
+                            innerRadius: '80%',
+                        }],
+                }],
+            credits: { enabled: false },
+            ...this.options,
+        };
+    }
+    async initSparkline() {
+        if (!this.sparkline.length || !this.sparklineContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.destroySparkline();
+        this.sparklineChart = this._hc.chart(this.sparklineContainer, this.buildSparklineOptions());
+        this.emit('nile-chart-ready', { chart: this.sparklineChart });
+    }
+    async initGauge() {
+        if (this.variant !== 'gauge' || !this.gaugeContainer)
+            return;
+        if (!this._hc)
+            this._hc = await getHighcharts();
+        this.destroyGauge();
+        this.gaugeChart = this._hc.chart(this.gaugeContainer, this.buildGaugeOptions());
+        this.emit('nile-chart-ready', { chart: this.gaugeChart });
+    }
+    destroySparkline() {
+        if (this.sparklineChart) {
+            this.sparklineChart.destroy();
+            this.sparklineChart = null;
+        }
+    }
+    destroyGauge() {
+        if (this.gaugeChart) {
+            this.gaugeChart.destroy();
+            this.gaugeChart = null;
+        }
+    }
+    destroyCharts() {
+        this.destroySparkline();
+        this.destroyGauge();
+    }
+    renderTrend() {
+        if (this.trendValue === null)
+            return nothing;
+        const dir = this.trendDirection;
+        const formatted = Math.abs(this.trendValue).toFixed(1) + '%';
+        return html `
+      <span class="kpi-trend kpi-trend--${dir}">
+        <span class="kpi-trend-arrow">
+          ${dir === 'up'
+            ? html `<svg viewBox="0 0 12 12"><path d="M6 2.5l4 5H2z"/></svg>`
+            : dir === 'down'
+                ? html `<svg viewBox="0 0 12 12"><path d="M6 9.5l4-5H2z"/></svg>`
+                : html `<svg viewBox="0 0 12 12"><path d="M2 6.5h8" stroke="currentColor" stroke-width="1.5" fill="none"/></svg>`}
+        </span>
+        ${formatted}${this.trendLabel ? html ` <span>${this.trendLabel}</span>` : nothing}
+      </span>
+    `;
+    }
+    renderContent() {
+        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"></div>` : nothing}
+
+        <div class="kpi-value-row">
+          <h2 class="kpi-value">
+            ${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>
+          ${!isGauge ? this.renderTrend() : nothing}
+        </div>
+
+        ${isGauge ? this.renderTrend() : nothing}
+
+        ${this.description ? html `<p class="kpi-description">${this.description}</p>` : nothing}
+
+        ${this.sparkline.length && !isGauge
+            ? html `<div class="kpi-sparkline"></div>`
+            : nothing}
+      </div>
+    `;
+    }
+    render() {
+        if (this.loading) {
+            return html `<div class="chart-loading">Loading...</div>`;
+        }
+        const useCard = this.variant === 'card' || this.variant === 'gauge';
+        if (useCard) {
+            return html `<div class="kpi-card">${this.renderContent()}</div>`;
+        }
+        return this.renderContent();
+    }
+};
+NileKpiChart.styles = styles;
+__decorate([
+    query('.kpi-sparkline')
+], NileKpiChart.prototype, "sparklineContainer", void 0);
+__decorate([
+    query('.kpi-gauge-container')
+], NileKpiChart.prototype, "gaugeContainer", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], NileKpiChart.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "prefix", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "suffix", void 0);
+__decorate([
+    property({ type: Number, attribute: 'trend-value' })
+], NileKpiChart.prototype, "trendValue", void 0);
+__decorate([
+    property({ type: String, attribute: 'trend-direction' })
+], NileKpiChart.prototype, "trendDirection", void 0);
+__decorate([
+    property({ type: String, attribute: 'trend-label' })
+], NileKpiChart.prototype, "trendLabel", void 0);
+__decorate([
+    property({ type: String })
+], NileKpiChart.prototype, "description", void 0);
+__decorate([
+    property({ type: Array })
+], NileKpiChart.prototype, "sparkline", void 0);
+__decorate([
+    property({ type: String, attribute: 'sparkline-color' })
+], NileKpiChart.prototype, "sparklineColor", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-value' })
+], NileKpiChart.prototype, "gaugeValue", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-min' })
+], NileKpiChart.prototype, "gaugeMin", void 0);
+__decorate([
+    property({ type: Number, attribute: 'gauge-max' })
+], NileKpiChart.prototype, "gaugeMax", void 0);
+__decorate([
+    property({ type: String, attribute: 'gauge-color' })
+], NileKpiChart.prototype, "gaugeColor", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileKpiChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: Object })
+], NileKpiChart.prototype, "options", void 0);
+NileKpiChart = __decorate([
+    customElement('nile-kpi-chart')
+], NileKpiChart);
+export { NileKpiChart };
+//# sourceMappingURL=nile-kpi-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileLineChart } from './nile-line-chart.js';
+export type { LineChartSeriesData } from './nile-line-chart.js';

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

@@ -0,0 +1,2 @@
+export { NileLineChart } from './nile-line-chart.js';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,28 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .chart-container {
+    width: 100%;
+    min-height: var(--nile-height-200px, var(--ng-height-200px));
+  }
+
+  .chart-loading {
+    display: flex;
+    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));
+  }
+`;
+//# sourceMappingURL=nile-line-chart.css.js.map

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

@@ -0,0 +1,36 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export interface LineChartSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileLineChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: LineChartSeriesData[];
+    categories: string[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    yAxisTitle: string;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private setupResizeObserver;
+    private buildOptions;
+    private initChart;
+    private destroyChart;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-line-chart': NileLineChart;
+    }
+}