@aquera/nile-visualization 0.2.0 → 0.4.0

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

@@ -19,8 +19,38 @@ import '../nile-spline-chart/index.js';
 import '../nile-radar-chart/index.js';
 import '../nile-gauge-chart/index.js';
 import '../nile-waterfall-chart/index.js';
+import '../nile-cluster-chart/index.js';
+import '../nile-stacked-chart/index.js';
+import '../nile-histogram-chart/index.js';
+import '../nile-bellcurve-chart/index.js';
+import '../nile-boxplot-chart/index.js';
+import '../nile-timeline-chart/index.js';
+import '../nile-dumbbell-chart/index.js';
+import '../nile-dumbbell-lower-chart/index.js';
+import '../nile-dumbbell-upper-chart/index.js';
+import '../nile-fan-chart/index.js';
+import '../nile-funnel-chart/index.js';
+import '../nile-organization-chart/index.js';
+import '../nile-line-column-chart/index.js';
+import '../nile-heatmap-chart/index.js';
+import '../nile-flame-chart/index.js';
+import '../nile-spiderweb-chart/index.js';
+import '../nile-column-pyramid-chart/index.js';
+import '../nile-lollipop-chart/index.js';
+import '../nile-inverted-area-chart/index.js';
+import '../nile-area-spline-chart/index.js';
+import '../nile-area-negative-chart/index.js';
+import '../nile-area-range-chart/index.js';
+import '../nile-column-range-chart/index.js';
+import '../nile-column-drilldown-chart/index.js';
+import '../nile-radial-bar-chart/index.js';
+import '../nile-variable-pie-chart/index.js';
+import '../nile-euler-chart/index.js';
+import '../nile-polygon-chart/index.js';
+import '../nile-vector-chart/index.js';
+import '../nile-xrange-chart/index.js';
 import '../nile-ai-panel/index.js';
-const TYPE_LABELS = {
+const CORE_CHART_LABELS = {
     bar: 'Bar',
     pie: 'Pie',
     trendline: 'Trendline',
@@ -35,12 +65,45 @@ const TYPE_LABELS = {
     radar: 'Radar',
     gauge: 'Gauge',
     waterfall: 'Waterfall',
+    stacked: 'Stacked column',
+    cluster: 'Cluster',
+    histogram: 'Histogram',
+    bellcurve: 'Bell curve',
+    boxplot: 'Box plot',
+    timeline: 'Timeline',
+    dumbbell: 'Dumbbell',
+    fan: 'Fan',
+    funnel: 'Funnel',
+    organization: 'Organization',
+    heatmap: 'Heatmap',
+    flame: 'Flame',
+    spiderweb: 'Spiderweb',
+    euler: 'Euler / Venn',
+    polygon: 'Polygon',
+    vector: 'Vector',
+    xrange: 'X-range',
+    lollipop: 'Lollipop',
+    'line-column': 'Line + column',
 };
+function chartTypeLabel(type) {
+    const hit = CORE_CHART_LABELS[type];
+    if (hit)
+        return hit;
+    return String(type)
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .replace(/-/g, ' ')
+        .replace(/\b\w/g, ch => ch.toUpperCase());
+}
 let NileChart = class NileChart extends NileElement {
     constructor() {
         super(...arguments);
         /** Full chart configuration. Accepts flat NileChartConfig or separated { chart, aq } input. */
         this.config = null;
+        /**
+         * When set, fills `chart.type` if the config omits it (same values as `chart.type`, e.g. `stacked`, `pie`).
+         * Usage: `<nile-chart chart-type="pie" />` plus `config.chart` with series data only.
+         */
+        this.chartTypeAttr = '';
         /** The summary/insight text displayed in the overlay (fallback when config is not set). */
         this.summary = '';
         /** Label for the toggle button (fallback when config is not set). */
@@ -83,15 +146,24 @@ let NileChart = class NileChart extends NileElement {
         super.disconnectedCallback();
         document.removeEventListener('click', this.handleOutsideClick);
     }
+    mergeChartTypeFromAttr(chart) {
+        const t = this.chartTypeAttr?.trim();
+        if (t && chart.type == null) {
+            return { ...chart, type: t };
+        }
+        return chart;
+    }
     /** Resolve { chart, aq } input to flat NileChartConfig. */
     resolveConfig(input) {
         if ('chart' in input && input.chart) {
-            return nileChartConfig(input);
+            const raw = input;
+            const chart = this.mergeChartTypeFromAttr({ ...raw.chart });
+            return nileChartConfig({ ...raw, chart });
         }
-        return input;
+        return this.mergeChartTypeFromAttr({ ...input });
     }
     updated(changedProperties) {
-        if (changedProperties.has('config') && this.config) {
+        if ((changedProperties.has('config') || changedProperties.has('chartTypeAttr')) && this.config) {
             this.resolvedConfig = this.resolveConfig(this.config);
             this.activeType = this.resolvedConfig.type;
             this.activeConfig = this.resolvedConfig;
@@ -172,7 +244,7 @@ let NileChart = class NileChart extends NileElement {
                       role="menuitem"
                       @click=${() => this.switchType(type)}
                     >
-                      ${TYPE_LABELS[type] ?? type} Chart
+                      ${chartTypeLabel(type)} chart
                     </button>
                   `)}
               </div>
@@ -308,6 +380,7 @@ let NileChart = class NileChart extends NileElement {
           .seriesName=${config.seriesName ?? ''}
           .height=${config.height ?? '400px'}
           .innerSize=${config.innerSize ?? '50%'}
+          .semiCircle=${config.semiCircle ?? false}
           .showDataLabels=${config.showDataLabels ?? true}
           .showLegend=${config.showLegend ?? true}
           .options=${mergedOptions}
@@ -368,6 +441,337 @@ let NileChart = class NileChart extends NileElement {
           .options=${mergedOptions}
           .loading=${config.loading ?? false}
         ></nile-waterfall-chart>`;
+            case 'stacked':
+                return html `<nile-stacked-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stackMode=${config.stackMode ?? 'normal'}
+          .showLegend=${config.showLegend ?? true}
+          .pointPadding=${config.pointPadding ?? 0.05}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-stacked-chart>`;
+            case 'cluster':
+                return html `<nile-cluster-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .showLegend=${config.showLegend ?? true}
+          .groupPadding=${config.groupPadding ?? 0.15}
+          .pointPadding=${config.pointPadding ?? 0.05}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-cluster-chart>`;
+            case 'histogram':
+                return html `<nile-histogram-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .histogramSeriesName=${config.histogramSeriesName ?? ''}
+          .sourceSeriesName=${config.sourceSeriesName ?? ''}
+          .histogramColor=${config.histogramColor ?? '#3b82f6'}
+          .binsNumber=${String(config.binsNumber ?? 'square-root')}
+          .binWidth=${config.binWidth ?? 0}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-histogram-chart>`;
+            case 'bellcurve':
+                return html `<nile-bellcurve-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .bellcurveSeriesName=${config.bellcurveSeriesName ?? ''}
+          .sourceSeriesName=${config.sourceSeriesName ?? ''}
+          .bellcurveColor=${config.bellcurveColor ?? '#6366f1'}
+          .bellcurveFill=${config.bellcurveFill ?? 'rgba(99, 102, 241, 0.2)'}
+          .intervals=${config.intervals ?? 3}
+          .pointsInInterval=${config.pointsInInterval ?? 40}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-bellcurve-chart>`;
+            case 'boxplot':
+                return html `<nile-boxplot-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-boxplot-chart>`;
+            case 'timeline':
+                return html `<nile-timeline-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .datetimeAxis=${config.datetimeAxis ?? false}
+          .inverted=${config.inverted ?? false}
+          .alternateLabels=${config.alternateLabels ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-timeline-chart>`;
+            case 'dumbbell':
+                return html `<nile-dumbbell-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-chart>`;
+            case 'dumbbellLower':
+                return html `<nile-dumbbell-lower-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-lower-chart>`;
+            case 'dumbbellUpper':
+                return html `<nile-dumbbell-upper-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .seriesName=${config.seriesName ?? ''}
+          .lowMarkerColor=${config.lowMarkerColor ?? ''}
+          .connectorColor=${config.connectorColor ?? ''}
+          .horizontal=${config.horizontal ?? false}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-dumbbell-upper-chart>`;
+            case 'fan':
+                return html `<nile-fan-chart
+          .lineData=${config.lineData}
+          .bands=${config.bands}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .lineSeriesName=${config.lineSeriesName ?? ''}
+          .lineColor=${config.lineColor ?? '#1d4ed8'}
+          .forecastStartIndex=${config.forecastStartIndex ?? -1}
+          .forecastBandLabel=${config.forecastBandLabel ?? ''}
+          .showLegend=${config.showLegend ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-fan-chart>`;
+            case 'funnel':
+                return html `<nile-funnel-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-funnel-chart>`;
+            case 'organization':
+                return html `<nile-organization-chart
+          .nodes=${config.nodes}
+          .links=${config.links}
+          .height=${config.height ?? '480px'}
+          .seriesName=${config.seriesName ?? ''}
+          .inverted=${config.inverted ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-organization-chart>`;
+            case 'line-column':
+                return html `<nile-line-column-chart
+          .categories=${config.categories}
+          .columnSeries=${config.columnSeries}
+          .lineSeries=${config.lineSeries}
+          .height=${config.height ?? '400px'}
+          .columnAxisTitle=${config.columnAxisTitle ?? ''}
+          .lineAxisTitle=${config.lineAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-line-column-chart>`;
+            case 'heatmap':
+                return html `<nile-heatmap-chart
+          .xCategories=${config.xCategories}
+          .yCategories=${config.yCategories}
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .colorMin=${config.colorMin ?? null}
+          .colorMax=${config.colorMax ?? null}
+          .minColor=${config.minColor ?? '#ffffff'}
+          .maxColor=${config.maxColor ?? '#1e40af'}
+          .colorAxisTitle=${config.colorAxisTitle ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-heatmap-chart>`;
+            case 'flame':
+                return html `<nile-flame-chart
+          .layout=${config.layout ?? 'flame'}
+          .data=${config.data ?? []}
+          .sunburstData=${config.sunburstData ?? []}
+          .height=${config.height ?? '480px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-flame-chart>`;
+            case 'spiderweb':
+                return html `<nile-spiderweb-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .showArea=${config.showArea ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-spiderweb-chart>`;
+            case 'invertedArea':
+                return html `<nile-inverted-area-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stacked=${config.stacked ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-inverted-area-chart>`;
+            case 'columnPyramid':
+                return html `<nile-column-pyramid-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-pyramid-chart>`;
+            case 'lollipop':
+                return html `<nile-lollipop-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-lollipop-chart>`;
+            case 'areaSpline':
+                return html `<nile-area-spline-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .stacked=${config.stacked ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-spline-chart>`;
+            case 'areaNegative':
+                return html `<nile-area-negative-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .threshold=${config.threshold ?? 0}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-negative-chart>`;
+            case 'areaRange':
+                return html `<nile-area-range-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-area-range-chart>`;
+            case 'columnRange':
+                return html `<nile-column-range-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-range-chart>`;
+            case 'columnDrilldown':
+                return html `<nile-column-drilldown-chart
+          .data=${config.data}
+          .drilldownSeries=${config.drilldownSeries}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-column-drilldown-chart>`;
+            case 'radialBar':
+                return html `<nile-radial-bar-chart
+          .data=${config.data}
+          .categories=${config.categories}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .innerSize=${config.innerSize ?? '28%'}
+          .paneSize=${config.paneSize ?? '82%'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-radial-bar-chart>`;
+            case 'variablePie':
+                return html `<nile-variable-pie-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-variable-pie-chart>`;
+            case 'euler':
+                return html `<nile-euler-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-euler-chart>`;
+            case 'polygon':
+                return html `<nile-polygon-chart
+          .series=${config.series}
+          .height=${config.height ?? '400px'}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-polygon-chart>`;
+            case 'vector':
+                return html `<nile-vector-chart
+          .data=${config.data}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .xAxisTitle=${config.xAxisTitle ?? ''}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-vector-chart>`;
+            case 'xrange':
+                return html `<nile-xrange-chart
+          .data=${config.data}
+          .categories=${config.categories}
+          .height=${config.height ?? '400px'}
+          .seriesName=${config.seriesName ?? ''}
+          .datetimeAxis=${config.datetimeAxis ?? false}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-xrange-chart>`;
+            default: {
+                const _exhaustive = config;
+                return _exhaustive;
+            }
         }
     }
     render() {
@@ -402,6 +806,9 @@ NileChart.styles = styles;
 __decorate([
     property({ type: Object })
 ], NileChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String, attribute: 'chart-type' })
+], NileChart.prototype, "chartTypeAttr", void 0);
 __decorate([
     property({ type: String })
 ], NileChart.prototype, "summary", void 0);

package/dist/src/nile-column-drilldown-chart/index.d.ts

@@ -0,0 +1,2 @@
+export { NileColumnDrilldownChart } from './nile-column-drilldown-chart.js';
+export type { ColumnDrilldownParentPoint, ColumnDrilldownSeriesConfig } from './nile-column-drilldown-chart.js';

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

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

package/dist/src/nile-column-drilldown-chart/nile-column-drilldown-chart.css.d.ts

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

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

package/dist/src/nile-column-drilldown-chart/nile-column-drilldown-chart.d.ts

@@ -0,0 +1,49 @@
+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 ColumnDrilldownParentPoint {
+    name: string;
+    y: number;
+    drilldown: string;
+}
+export interface ColumnDrilldownSeriesConfig {
+    id: string;
+    name: string;
+    data: {
+        name: string;
+        y: number;
+    }[];
+}
+export declare class NileColumnDrilldownChart extends NileElement {
+    static styles: CSSResultGroup;
+    private _hc;
+    private chart;
+    private resizeObserver;
+    private chartContainer;
+    config: SeparatedChartConfigInputType | null;
+    chartTitle: string;
+    chartSubtitle: string;
+    data: ColumnDrilldownParentPoint[];
+    drilldownSeries: ColumnDrilldownSeriesConfig[];
+    seriesName: 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-column-drilldown-chart': NileColumnDrilldownChart;
+    }
+}