@aquera/nile-visualization 0.1.0

package/dist/src/nile-column-chart/nile-column-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 ColumnChartSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileColumnChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: ColumnChartSeriesData[];
+    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-column-chart': NileColumnChart;
+    }
+}

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

@@ -0,0 +1,118 @@
+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 { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-column-chart.css.js';
+let NileColumnChart = class NileColumnChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.categories = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    updated(changedProperties) {
+        const props = ['data', 'categories', 'chartTitle', 'chartSubtitle', 'options', 'height', 'yAxisTitle', '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);
+    }
+    buildOptions() {
+        const self = this;
+        return deepMerge({
+            chart: { type: 'column', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { categories: this.categories },
+            yAxis: { min: 0, title: { text: this.yAxisTitle || undefined } },
+            tooltip: { valueSuffix: '' },
+            plotOptions: {
+                column: { dataLabels: { enabled: false } },
+                series: { cursor: 'pointer', point: { events: { click() { self.emit('nile-chart-click', { point: this, category: this.category, value: this.y, seriesName: this.series.name }); } } } },
+            },
+            series: this.data.map(s => ({ type: 'column', name: s.name, data: s.data, color: s.color })),
+            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>`;
+    }
+};
+NileColumnChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileColumnChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileColumnChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileColumnChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileColumnChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileColumnChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileColumnChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileColumnChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileColumnChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileColumnChart.prototype, "yAxisTitle", void 0);
+NileColumnChart = __decorate([
+    customElement('nile-column-chart')
+], NileColumnChart);
+export { NileColumnChart };
+//# sourceMappingURL=nile-column-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileDonutChart } from './nile-donut-chart.js';
+export type { DonutChartSeriesData } from './nile-donut-chart.js';

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

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

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

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

package/dist/src/nile-donut-chart/nile-donut-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-donut-chart.css.js.map

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

@@ -0,0 +1,40 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export interface DonutChartSeriesData {
+    name: string;
+    y: number;
+    color?: string;
+    sliced?: boolean;
+    selected?: boolean;
+}
+export declare class NileDonutChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: DonutChartSeriesData[];
+    seriesName: string;
+    innerSize: string;
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    showDataLabels: boolean;
+    showLegend: boolean;
+    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-donut-chart': NileDonutChart;
+    }
+}

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

@@ -0,0 +1,131 @@
+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 { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-donut-chart.css.js';
+let NileDonutChart = class NileDonutChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.seriesName = '';
+        this.innerSize = '50%';
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.showDataLabels = true;
+        this.showLegend = true;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    updated(changedProperties) {
+        const props = ['data', 'chartTitle', 'chartSubtitle', 'options', 'height', 'seriesName', 'innerSize', 'loading', 'showDataLabels', 'showLegend'];
+        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);
+    }
+    buildOptions() {
+        const self = this;
+        return deepMerge({
+            chart: { type: 'pie', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' },
+            accessibility: { point: { valueSuffix: '%' } },
+            plotOptions: {
+                pie: {
+                    innerSize: this.innerSize,
+                    allowPointSelect: true,
+                    cursor: 'pointer',
+                    dataLabels: { enabled: this.showDataLabels, format: '<b>{point.name}</b>: {point.percentage:.1f} %' },
+                    showInLegend: this.showLegend,
+                    point: { events: { click() { self.emit('nile-chart-click', { point: this, name: this.name, value: this.y, percentage: this.percentage, seriesName: this.series.name }); } } },
+                },
+            },
+            series: [{ type: 'pie', name: this.seriesName, data: this.data.map(d => ({ name: d.name, y: d.y, color: d.color, sliced: d.sliced, selected: d.selected })) }],
+            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>`;
+    }
+};
+NileDonutChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileDonutChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileDonutChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileDonutChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileDonutChart.prototype, "data", void 0);
+__decorate([
+    property({ type: String, attribute: 'series-name' })
+], NileDonutChart.prototype, "seriesName", void 0);
+__decorate([
+    property({ type: String, attribute: 'inner-size' })
+], NileDonutChart.prototype, "innerSize", void 0);
+__decorate([
+    property({ type: Object })
+], NileDonutChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileDonutChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileDonutChart.prototype, "height", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-data-labels' })
+], NileDonutChart.prototype, "showDataLabels", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-legend' })
+], NileDonutChart.prototype, "showLegend", void 0);
+NileDonutChart = __decorate([
+    customElement('nile-donut-chart')
+], NileDonutChart);
+export { NileDonutChart };
+//# sourceMappingURL=nile-donut-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileGaugeChart } from './nile-gauge-chart.js';
+export type { GaugeBand } from './nile-gauge-chart.js';

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

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

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

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

package/dist/src/nile-gauge-chart/nile-gauge-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-gauge-chart.css.js.map

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

@@ -0,0 +1,38 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+export interface GaugeBand {
+    from: number;
+    to: number;
+    color: string;
+}
+export declare class NileGaugeChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    chartTitle: string;
+    chartSubtitle: string;
+    value: number;
+    min: number;
+    max: number;
+    suffix: string;
+    bands: GaugeBand[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: 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-gauge-chart': NileGaugeChart;
+    }
+}

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

@@ -0,0 +1,149 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-gauge-chart.css.js';
+let NileGaugeChart = class NileGaugeChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.value = 0;
+        this.min = 0;
+        this.max = 100;
+        this.suffix = '';
+        this.bands = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '280px';
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.destroyChart();
+        this.resizeObserver?.disconnect();
+        this.resizeObserver = null;
+    }
+    firstUpdated() { this.initChart(); this.setupResizeObserver(); }
+    updated(changedProperties) {
+        const props = ['value', 'min', 'max', 'suffix', 'bands', 'chartTitle', 'chartSubtitle', 'options', 'height', '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);
+    }
+    buildOptions() {
+        return deepMerge({
+            chart: { type: 'gauge', height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            pane: {
+                startAngle: -150,
+                endAngle: 150,
+                background: [{
+                        backgroundColor: '#EEE',
+                        borderWidth: 0,
+                        outerRadius: '109%',
+                        innerRadius: '103%',
+                    }],
+            },
+            yAxis: {
+                min: this.min,
+                max: this.max,
+                plotBands: this.bands.map(b => ({
+                    from: b.from,
+                    to: b.to,
+                    color: b.color,
+                    thickness: 20,
+                })),
+                labels: { distance: 25 },
+            },
+            tooltip: { enabled: false },
+            series: [{
+                    type: 'gauge',
+                    name: this.chartTitle || 'Value',
+                    data: [this.value],
+                    dataLabels: {
+                        format: `{y}${this.suffix}`,
+                        borderWidth: 0,
+                        style: { fontSize: '20px' },
+                    },
+                }],
+            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>`;
+    }
+};
+NileGaugeChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileGaugeChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileGaugeChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileGaugeChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Number })
+], NileGaugeChart.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], NileGaugeChart.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], NileGaugeChart.prototype, "max", void 0);
+__decorate([
+    property({ type: String })
+], NileGaugeChart.prototype, "suffix", void 0);
+__decorate([
+    property({ type: Array })
+], NileGaugeChart.prototype, "bands", void 0);
+__decorate([
+    property({ type: Object })
+], NileGaugeChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileGaugeChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileGaugeChart.prototype, "height", void 0);
+NileGaugeChart = __decorate([
+    customElement('nile-gauge-chart')
+], NileGaugeChart);
+export { NileGaugeChart };
+//# sourceMappingURL=nile-gauge-chart.js.map

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

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

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

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

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

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