@aquera/nile-visualization 0.3.0 → 0.4.0

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

@@ -0,0 +1,206 @@
+import { __decorate } from "tslib";
+import { customElement, property, query } from 'lit/decorators.js';
+import { html } from 'lit';
+import { getHighcharts } from '../internal/highcharts-provider.js';
+import NileElement from '../internal/nile-element.js';
+import { applySeparatedChartConfig } from '../internal/separated-chart-config.js';
+import { deepMerge } from '../internal/utils.js';
+import { styles } from './nile-organization-chart.css.js';
+let NileOrganizationChart = class NileOrganizationChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this._hc = null;
+        this.chart = null;
+        this.resizeObserver = null;
+        /** Full chart configuration. Accepts separated `{ chart, aq }` input. */
+        this.config = null;
+        this.chartTitle = '';
+        this.chartSubtitle = '';
+        this.nodes = [];
+        this.links = [];
+        this.options = {};
+        this.loading = false;
+        this.height = '480px';
+        this.seriesName = '';
+        /**
+         * When true (default), the chart flows top-down — typical for org charts in Highcharts.
+         * Set false for a horizontal layout.
+         */
+        this.inverted = true;
+    }
+    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 = [
+            'nodes',
+            'links',
+            'chartTitle',
+            'chartSubtitle',
+            'options',
+            'height',
+            'seriesName',
+            'inverted',
+            '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 data = this.links.map(l => [l.from, l.to]);
+        const nodeOpts = this.nodes.map(n => {
+            const { id, title, name, description, image, color, layout } = n;
+            return {
+                id,
+                title,
+                name,
+                description,
+                image,
+                color,
+                ...(layout ? { layout } : {}),
+            };
+        });
+        return deepMerge({
+            chart: {
+                height: this.height,
+                inverted: this.inverted,
+            },
+            title: { text: this.chartTitle || undefined },
+            subtitle: { text: this.chartSubtitle || undefined },
+            tooltip: {
+                outside: true,
+            },
+            plotOptions: {
+                organization: {
+                    dataLabels: {
+                        color: '#1e293b',
+                    },
+                },
+                series: {
+                    cursor: 'pointer',
+                    point: {
+                        events: {
+                            click() {
+                                const fromN = this.fromNode;
+                                const toN = this.toNode;
+                                self.emit('nile-chart-click', {
+                                    point: this,
+                                    fromId: fromN?.id,
+                                    toId: toN?.id,
+                                    seriesName: this.series.name,
+                                });
+                            },
+                        },
+                    },
+                },
+            },
+            series: [
+                {
+                    type: 'organization',
+                    name: this.seriesName || this.chartTitle || 'Organization',
+                    keys: ['from', 'to'],
+                    data,
+                    nodes: nodeOpts,
+                },
+            ],
+            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>`;
+    }
+};
+NileOrganizationChart.styles = styles;
+__decorate([
+    query('.chart-container')
+], NileOrganizationChart.prototype, "chartContainer", void 0);
+__decorate([
+    property({ type: Object })
+], NileOrganizationChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-title' })
+], NileOrganizationChart.prototype, "chartTitle", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-subtitle' })
+], NileOrganizationChart.prototype, "chartSubtitle", void 0);
+__decorate([
+    property({ type: Array })
+], NileOrganizationChart.prototype, "nodes", void 0);
+__decorate([
+    property({ type: Array })
+], NileOrganizationChart.prototype, "links", void 0);
+__decorate([
+    property({ type: Object })
+], NileOrganizationChart.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileOrganizationChart.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], NileOrganizationChart.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'series-name' })
+], NileOrganizationChart.prototype, "seriesName", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'inverted' })
+], NileOrganizationChart.prototype, "inverted", void 0);
+NileOrganizationChart = __decorate([
+    customElement('nile-organization-chart')
+], NileOrganizationChart);
+export { NileOrganizationChart };
+//# sourceMappingURL=nile-organization-chart.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -30,6 +30,9 @@
     "./nile-gauge-chart": "./dist/src/nile-gauge-chart/index.js",
     "./nile-waterfall-chart": "./dist/src/nile-waterfall-chart/index.js",
     "./nile-funnel-chart": "./dist/src/nile-funnel-chart/index.js",
+    "./nile-organization-chart": "./dist/src/nile-organization-chart/index.js",
+    "./nile-line-column-chart": "./dist/src/nile-line-column-chart/index.js",
+    "./nile-heatmap-chart": "./dist/src/nile-heatmap-chart/index.js",
     "./nile-flame-chart": "./dist/src/nile-flame-chart/index.js",
     "./nile-spiderweb-chart": "./dist/src/nile-spiderweb-chart/index.js",
     "./nile-trendline-chart": "./dist/src/nile-trendline-chart/index.js",