@aquera/nile-visualization 0.1.0

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

@@ -0,0 +1,298 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+    position: relative;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  /* ── Unified Card Container ── */
+
+  .chart-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;
+  }
+
+  .chart-card:hover {
+    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
+  }
+
+  /* ── Card Header ── */
+
+  .chart-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+    z-index: 10;
+    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-bottom: 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)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
+  }
+
+  .chart-header-titles {
+    min-width: 0;
+    flex: 1;
+  }
+
+  .chart-header-title {
+    margin: 0;
+    font-family: var(--nile-font-family-serif-colfax-medium, var(--ng-font-family-display));
+    font-size: var(--nile-type-scale-6, var(--ng-font-size-text-xl));
+    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.3;
+  }
+
+  .chart-header-subtitle {
+    margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0 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));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    line-height: 1.4;
+  }
+
+  .chart-header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    flex-shrink: 0;
+    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+  }
+
+  /* ── Card Body ── */
+
+  .chart-wrapper {
+    position: relative;
+  }
+
+  .chart-inner {
+    position: relative;
+    overflow: hidden;
+    border-radius: 0 0 var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl));
+    contain: layout style;
+  }
+
+  ::slotted(*) {
+    width: 100%;
+  }
+
+  nile-bar-chart,
+  nile-pie-chart,
+  nile-trendline-chart,
+  nile-anomaly-chart {
+    display: block;
+    width: 100%;
+  }
+
+  /* ── Summary Toggle ── */
+
+  .chart-toggle {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 3;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    padding: var(--nile-spacing-sm, var(--ng-spacing-sm)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    border: none;
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-right: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: 0 var(--nile-radius-radius-sm, var(--ng-radius-xs)) 0 0;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    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));
+    cursor: pointer;
+    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs));
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, box-shadow var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, opacity var(--nile-transition-duration-default, var(--ng-transition-duration-default)) ease;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .chart-inner:hover .chart-toggle,
+  .chart-toggle[aria-expanded='true'] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .chart-toggle:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+  }
+
+  .chart-toggle:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
+  }
+
+  /* ── Summary Overlay ── */
+
+  .chart-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 50%;
+    background: rgba(255, 255, 255, 0.95);
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-sm));
+    z-index: 2;
+    transform: translateY(100%);
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow-y: auto;
+    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+  }
+
+  .chart-overlay[data-open] {
+    transform: translateY(0);
+  }
+
+  .chart-content {
+    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));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    line-height: 1.6;
+  }
+
+  /* ── Type Switcher (in header) ── */
+
+  .chart-menu-anchor {
+    position: relative;
+  }
+
+  .chart-menu-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-width-28px, var(--ng-height-28px));
+    height: var(--nile-width-28px, var(--ng-height-28px));
+    padding: 0;
+    border: none;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
+    background: transparent;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    cursor: pointer;
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+  }
+
+  .chart-menu-trigger:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  .chart-menu-trigger:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
+  }
+
+  .chart-menu-dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    min-width: var(--nile-width-140px, var(--ng-height-140px));
+    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-xl, var(--ng-radius-md));
+    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-md));
+    padding: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0;
+    overflow: hidden;
+    z-index: 10;
+  }
+
+  .chart-menu-item {
+    display: block;
+    width: 100%;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    border: none;
+    background: none;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    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));
+    text-align: left;
+    cursor: pointer;
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+  }
+
+  .chart-menu-item:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
+
+  .chart-menu-item.active {
+    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    font-weight: 600;
+  }
+
+  .chart-menu-item:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: calc(var(--nile-spacing-2px, var(--ng-outline-offset-2)) * -1);
+  }
+
+  /* ── AI Chat Trigger (in header) ── */
+
+  .ai-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nile-width-28px, var(--ng-height-28px));
+    height: var(--nile-width-28px, var(--ng-height-28px));
+    padding: 0;
+    border: none;
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
+    background: transparent;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
+    cursor: pointer;
+    transition: background var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease, color var(--nile-transition-duration-short, var(--ng-transition-duration-fast)) ease;
+  }
+
+  .ai-trigger:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+  }
+
+  .ai-trigger.active {
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
+  }
+
+  .ai-trigger:focus-visible {
+    outline: var(--nile-border-width-2, var(--ng-stroke-width-2)) solid var(--nile-colors-primary-600, var(--ng-colors-fg-brand-primary-600));
+    outline-offset: var(--nile-spacing-1px, var(--ng-outline-offset-1));
+  }
+
+  /* ── AI Chat Panel Overlay ── */
+
+  .ai-panel-overlay {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 70%;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-top: var(--nile-border-width-1, var(--ng-stroke-width-1)) solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    box-shadow: var(--nile-box-shadow-8, var(--ng-shadow-lg));
+    z-index: 5;
+    transform: translateY(100%);
+    transition: transform var(--nile-transition-duration-long, var(--ng-transition-duration-medium)) ease;
+    border-radius: var(--nile-radius-radius-3xl, var(--ng-radius-xl)) var(--nile-radius-radius-3xl, var(--ng-radius-xl)) 0 0;
+    overflow: hidden;
+  }
+
+  .ai-panel-overlay[data-open] {
+    transform: translateY(0);
+  }
+`;
+//# sourceMappingURL=nile-chart.css.js.map

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

@@ -0,0 +1,51 @@
+import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import type { NileChartConfig } from './nile-chart-config.js';
+import '../nile-bar-chart/index.js';
+import '../nile-pie-chart/index.js';
+import '../nile-trendline-chart/index.js';
+import '../nile-anomaly-chart/index.js';
+import '../nile-ai-panel/index.js';
+export declare class NileChart extends NileElement {
+    static styles: CSSResultGroup;
+    /** Full chart configuration including type, data, and summary. */
+    config: NileChartConfig | null;
+    /** The summary/insight text displayed in the overlay (fallback when config is not set). */
+    summary: string;
+    /** Label for the toggle button (fallback when config is not set). */
+    toggleLabel: string;
+    /** Whether the insight overlay is visible. */
+    open: boolean;
+    private activeType;
+    private activeConfig;
+    private menuOpen;
+    private chatOpen;
+    private aiPanel;
+    private get effectiveSummary();
+    private get effectiveToggleLabel();
+    private get aiEnabled();
+    private handleOutsideClick;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changedProperties: PropertyValues): void;
+    private toggle;
+    private toggleMenu;
+    private toggleChat;
+    /** Push an AI response into the chat panel. Call this from your AI handler. */
+    addAiResponse(text: string): void;
+    private handleAiSend;
+    private switchType;
+    private get headerTitle();
+    private get headerSubtitle();
+    private renderTypeSwitcher;
+    private renderAiTrigger;
+    private renderHeader;
+    private renderAiPanel;
+    private renderChartContent;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-chart': NileChart;
+    }
+}

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

@@ -0,0 +1,303 @@
+import { __decorate } from "tslib";
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { html, nothing } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import { styles } from './nile-chart.css.js';
+import { convertConfig } from '../internal/chart-adapters.js';
+import '../nile-bar-chart/index.js';
+import '../nile-pie-chart/index.js';
+import '../nile-trendline-chart/index.js';
+import '../nile-anomaly-chart/index.js';
+import '../nile-ai-panel/index.js';
+const TYPE_LABELS = {
+    bar: 'Bar',
+    pie: 'Pie',
+    trendline: 'Trendline',
+    anomaly: 'Anomaly',
+};
+let NileChart = class NileChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** Full chart configuration including type, data, and summary. */
+        this.config = null;
+        /** 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). */
+        this.toggleLabel = 'Summary';
+        /** Whether the insight overlay is visible. */
+        this.open = false;
+        this.activeType = null;
+        this.activeConfig = null;
+        this.menuOpen = false;
+        this.chatOpen = false;
+        this.handleOutsideClick = (e) => {
+            if (!this.contains(e.target)) {
+                this.open = false;
+                this.menuOpen = false;
+                this.emit('nile-chart-toggle', { open: this.open });
+            }
+        };
+    }
+    get effectiveSummary() {
+        return this.config?.summary ?? this.summary;
+    }
+    get effectiveToggleLabel() {
+        return this.config?.toggleLabel ?? this.toggleLabel;
+    }
+    get aiEnabled() {
+        return this.config?.ai?.enabled === true;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('click', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('click', this.handleOutsideClick);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config') && this.config) {
+            this.activeType = this.config.type;
+            this.activeConfig = this.config;
+        }
+    }
+    toggle(e) {
+        e.stopPropagation();
+        this.open = !this.open;
+        if (this.open)
+            this.chatOpen = false;
+        this.emit('nile-chart-toggle', { open: this.open });
+    }
+    toggleMenu(e) {
+        e.stopPropagation();
+        this.menuOpen = !this.menuOpen;
+    }
+    toggleChat(e) {
+        e.stopPropagation();
+        this.chatOpen = !this.chatOpen;
+        if (this.chatOpen)
+            this.open = false;
+        this.emit('nile-chart-ai-toggle', { open: this.chatOpen });
+    }
+    /** Push an AI response into the chat panel. Call this from your AI handler. */
+    addAiResponse(text) {
+        if (this.aiPanel) {
+            this.aiPanel.addAssistantMessage(text);
+        }
+    }
+    handleAiSend(e) {
+        e.stopPropagation();
+        this.emit('nile-chart-ai-send', {
+            message: e.detail.message,
+            chart: this.activeConfig,
+        });
+    }
+    switchType(toType) {
+        if (!this.config || toType === this.activeType)
+            return;
+        const fromType = this.activeType;
+        const converted = convertConfig(this.config, toType);
+        this.activeType = toType;
+        this.activeConfig = converted;
+        this.menuOpen = false;
+        this.emit('nile-chart-type-change', {
+            fromType,
+            toType,
+            config: converted,
+        });
+    }
+    get headerTitle() {
+        return this.activeConfig?.chartTitle ?? this.config?.chartTitle ?? '';
+    }
+    get headerSubtitle() {
+        return this.activeConfig?.chartSubtitle ?? this.config?.chartSubtitle ?? '';
+    }
+    renderTypeSwitcher() {
+        const types = this.config?.switchableTypes;
+        if (!types || types.length === 0)
+            return nothing;
+        return html `
+      <div class="chart-menu-anchor">
+        <button
+          class="chart-menu-trigger"
+          aria-haspopup="true"
+          aria-expanded=${this.menuOpen ? 'true' : 'false'}
+          aria-label="Change chart type"
+          @click=${this.toggleMenu}
+        >
+          <nile-glyph name="options" size="16"></nile-glyph>
+        </button>
+        ${this.menuOpen
+            ? html `
+              <div class="chart-menu-dropdown" role="menu" aria-label="Chart type">
+                ${types.map(type => html `
+                    <button
+                      class="chart-menu-item ${type === this.activeType ? 'active' : ''}"
+                      role="menuitem"
+                      @click=${() => this.switchType(type)}
+                    >
+                      ${TYPE_LABELS[type] ?? type} Chart
+                    </button>
+                  `)}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    renderAiTrigger() {
+        if (!this.aiEnabled)
+            return nothing;
+        return html `
+      <button
+        class="ai-trigger ${this.chatOpen ? 'active' : ''}"
+        aria-label="Ask AI about this chart"
+        aria-expanded=${this.chatOpen ? 'true' : 'false'}
+        @click=${this.toggleChat}
+      >
+        <nile-glyph name="smart-code" size="16"></nile-glyph>
+      </button>
+    `;
+    }
+    renderHeader() {
+        const title = this.headerTitle;
+        const subtitle = this.headerSubtitle;
+        const hasTypeSwitcher = (this.config?.switchableTypes?.length ?? 0) > 0;
+        const hasActions = hasTypeSwitcher || this.aiEnabled;
+        if (!title && !subtitle && !hasActions)
+            return nothing;
+        return html `
+      <div class="chart-header">
+        <div class="chart-header-titles">
+          ${title ? html `<h3 class="chart-header-title">${title}</h3>` : nothing}
+          ${subtitle ? html `<p class="chart-header-subtitle">${subtitle}</p>` : nothing}
+        </div>
+        <div class="chart-header-actions">
+          ${this.renderAiTrigger()}
+          ${this.renderTypeSwitcher()}
+        </div>
+      </div>
+    `;
+    }
+    renderAiPanel() {
+        if (!this.aiEnabled)
+            return nothing;
+        const aiConfig = this.config.ai;
+        return html `
+      <div class="ai-panel-overlay" ?data-open=${this.chatOpen}>
+        <nile-ai-panel
+          .placeholder=${aiConfig.placeholder ?? 'Ask about this chart...'}
+          .welcomeMessage=${aiConfig.welcomeMessage ?? ''}
+          @nile-ai-send=${this.handleAiSend}
+        ></nile-ai-panel>
+      </div>
+    `;
+    }
+    renderChartContent() {
+        const config = this.activeConfig;
+        // Suppress inner Highcharts title/subtitle — the card header shows them
+        const noTitle = { title: { text: undefined }, subtitle: { text: undefined } };
+        const mergedOptions = { ...(config.options ?? {}), ...noTitle };
+        switch (config.type) {
+            case 'bar':
+                return html `<nile-bar-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-bar-chart>`;
+            case 'pie':
+                return html `<nile-pie-chart
+          .data=${config.data}
+          .seriesName=${config.seriesName ?? ''}
+          .height=${config.height ?? '400px'}
+          .showDataLabels=${config.showDataLabels ?? true}
+          .showLegend=${config.showLegend ?? true}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-pie-chart>`;
+            case 'trendline':
+                return html `<nile-trendline-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .forecast=${config.forecast ?? null}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-trendline-chart>`;
+            case 'anomaly':
+                return html `<nile-anomaly-chart
+          .data=${config.data}
+          .categories=${config.categories ?? []}
+          .height=${config.height ?? '400px'}
+          .yAxisTitle=${config.yAxisTitle ?? ''}
+          .anomaly=${config.anomaly ?? {}}
+          .options=${mergedOptions}
+          .loading=${config.loading ?? false}
+        ></nile-anomaly-chart>`;
+        }
+    }
+    render() {
+        return html `
+      <div class="chart-card">
+        ${this.renderHeader()}
+        <div class="chart-wrapper">
+          <div class="chart-inner">
+            ${this.activeConfig ? this.renderChartContent() : html `<slot></slot>`}
+            <button
+              class="chart-toggle"
+              aria-expanded="${this.open}"
+              @click="${this.toggle}"
+            >
+              ${this.effectiveToggleLabel}
+            </button>
+            <div class="chart-overlay" ?data-open="${this.open}">
+              <div class="chart-content">
+                ${this.config
+            ? this.effectiveSummary
+            : html `<slot name="insight">${this.summary}</slot>`}
+              </div>
+            </div>
+            ${this.renderAiPanel()}
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+NileChart.styles = styles;
+__decorate([
+    property({ type: Object })
+], NileChart.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], NileChart.prototype, "summary", void 0);
+__decorate([
+    property({ type: String, attribute: 'toggle-label' })
+], NileChart.prototype, "toggleLabel", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "open", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "activeType", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "activeConfig", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "menuOpen", void 0);
+__decorate([
+    state()
+], NileChart.prototype, "chatOpen", void 0);
+__decorate([
+    query('nile-ai-panel')
+], NileChart.prototype, "aiPanel", void 0);
+NileChart = __decorate([
+    customElement('nile-chart')
+], NileChart);
+export { NileChart };
+//# sourceMappingURL=nile-chart.js.map

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

@@ -0,0 +1,2 @@
+export { NileColumnChart } from './nile-column-chart.js';
+export type { ColumnChartSeriesData } from './nile-column-chart.js';

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

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

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

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

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