@aquera/nile-visualization 0.2.0 → 0.3.0

package/dist/src/nile-inverted-area-chart/nile-inverted-area-chart.js

@@ -0,0 +1,173 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-inverted-area-chart.css';
+let NileInvertedAreaChart = class NileInvertedAreaChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.categories = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+        this.yAxisTitle = '';
+        this.stacked = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.config)
+            applySeparatedChartConfig(this, 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) {
+            applySeparatedChartConfig(this, this.config);
+            return;
+        }
+        const props = [
+            'data',
+            'categories',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'yAxisTitle',
+            'stacked',
+            '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: 'area', inverted: true, height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { categories: this.categories },
+            yAxis: { title: { text: this.yAxisTitle || undefined } },
+            tooltip: { shared: true },
+            plotOptions: {
+                area: { stacking: this.stacked ? 'normal' : undefined, fillOpacity: 0.25 },
+                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: 'area',
+                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>`;
+    }
+};
+NileInvertedAreaChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileInvertedAreaChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileInvertedAreaChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileInvertedAreaChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileInvertedAreaChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileInvertedAreaChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileInvertedAreaChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileInvertedAreaChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInvertedAreaChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileInvertedAreaChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NileInvertedAreaChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileInvertedAreaChart.prototype, "stacked", void 0);
+NileInvertedAreaChart = __decorate([
+    customElement('nile-inverted-area-chart')
+], NileInvertedAreaChart);
+export { NileInvertedAreaChart };
+//# sourceMappingURL=nile-inverted-area-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileLollipopChart } from './nile-lollipop-chart.js';
+export type { LollipopSeriesData } from './nile-lollipop-chart.js';

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

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

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

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

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

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

@@ -0,0 +1,39 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+export interface LollipopSeriesData {
+    name: string;
+    data: number[];
+    color?: string;
+}
+export declare class NileLollipopChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: LollipopSeriesData[];
+    categories: string[];
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    private applyConfig;
+    connectedCallback(): void;
+    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-lollipop-chart': NileLollipopChart;
+    }
+}

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

@@ -0,0 +1,174 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-lollipop-chart.css.js';
+let NileLollipopChart = class NileLollipopChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.data = [];
+        this.categories = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+    }
+    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', 'categories', '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() {
+        const self = this;
+        const series = [];
+        for (const s of this.data) {
+            series.push({
+                type: 'column',
+                name: s.name,
+                data: s.data,
+                color: s.color,
+                pointWidth: 3,
+                borderWidth: 0,
+                enableMouseTracking: true,
+            });
+            series.push({
+                type: 'scatter',
+                name: s.name,
+                data: s.data.map((y, i) => [i, y]),
+                color: s.color,
+                marker: { radius: 7, lineWidth: 2, lineColor: '#ffffff', symbol: 'circle' },
+                showInLegend: false,
+                enableMouseTracking: true,
+            });
+        }
+        return deepMerge({
+            chart: { height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { categories: this.categories },
+            yAxis: { title: { text: undefined }, min: 0 },
+            legend: { enabled: this.data.length > 1 },
+            tooltip: { shared: true },
+            plotOptions: {
+                column: { grouping: false, pointPadding: 0.12 },
+                scatter: { clip: 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,
+            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>`;
+    }
+};
+NileLollipopChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileLollipopChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileLollipopChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileLollipopChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileLollipopChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileLollipopChart.prototype, "data", void 0);
+__decorate([
+    property({ type: Array })
+], NileLollipopChart.prototype, "categories", void 0);
+__decorate([
+    property({ type: Object })
+], NileLollipopChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileLollipopChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileLollipopChart.prototype, "height", void 0);
+NileLollipopChart = __decorate([
+    customElement('nile-lollipop-chart')
+], NileLollipopChart);
+export { NileLollipopChart };
+//# sourceMappingURL=nile-lollipop-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NilePolygonChart } from './nile-polygon-chart.js';
+export type { PolygonSeriesConfig } from './nile-polygon-chart.js';

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

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

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

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

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

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

@@ -0,0 +1,41 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import type Highcharts from 'highcharts';
+import NileElement from '../internal/nile-element.js';
+import type { SeparatedChartConfigInputType } from '../internal/types/separated-chart-config-input.type.js';
+export interface PolygonSeriesConfig {
+    name: string;
+    data: [number, number][];
+    color?: string;
+    lineWidth?: number;
+}
+export declare class NilePolygonChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    series: PolygonSeriesConfig[];
+    xAxisTitle: string;
+    yAxisTitle: string;
+    options: Highcharts.Options;
+    loading: boolean;
+    height: string;
+    private applyConfig;
+    connectedCallback(): void;
+    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-polygon-chart': NilePolygonChart;
+    }
+}

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

@@ -0,0 +1,167 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-polygon-chart.css.js';
+let NilePolygonChart = class NilePolygonChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.series = [];
+        this.xAxisTitle = '';
+        this.yAxisTitle = '';
+        this.options = {};
+        this.loading = false;
+        this.height = '400px';
+    }
+    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 = [
+            'series',
+            'xAxisTitle',
+            'yAxisTitle',
+            '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() {
+        const self = this;
+        return deepMerge({
+            chart: { height: this.height },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            xAxis: { title: { text: this.xAxisTitle || undefined } },
+            yAxis: { title: { text: this.yAxisTitle || undefined } },
+            tooltip: { shared: true },
+            plotOptions: {
+                polygon: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series: this.series.map(s => ({
+                type: 'polygon',
+                name: s.name,
+                data: s.data,
+                color: s.color,
+                lineWidth: s.lineWidth,
+            })),
+            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>`;
+    }
+};
+NilePolygonChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NilePolygonChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NilePolygonChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NilePolygonChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NilePolygonChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NilePolygonChart.prototype, "series", void 0);
+__decorate([
+    property({ type: String, attribute: 'x-axis-title' })
+], NilePolygonChart.prototype, "xAxisTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'y-axis-title' })
+], NilePolygonChart.prototype, "yAxisTitle", void 0);
+__decorate([
+    property({ type: Object })
+], NilePolygonChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NilePolygonChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NilePolygonChart.prototype, "height", void 0);
+NilePolygonChart = __decorate([
+    customElement('nile-polygon-chart')
+], NilePolygonChart);
+export { NilePolygonChart };
+//# sourceMappingURL=nile-polygon-chart.js.map

package/dist/src/nile-radial-bar-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { NileRadialBarChart } from './nile-radial-bar-chart.js';
+export type { RadialBarSeriesData } from './nile-radial-bar-chart.js';

package/dist/src/nile-radial-bar-chart/index.js

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

package/dist/src/nile-radial-bar-chart/nile-radial-bar-chart.css.d.ts

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