@aquera/nile-visualization 2.2.0 → 2.4.0

package/dist/src/index.d.ts

@@ -92,6 +92,8 @@ export { NileSpiderwebChart } from './nile-spiderweb-chart/index.js';
 export type { SpiderwebChartSeriesData } from './nile-spiderweb-chart/index.js';
 export { NileKpiChart } from './nile-kpi-chart/index.js';
 export type { ChartKpiSeparatedPayload, KpiConfig, NileKpiConfigInputType, TrendDirection, KpiVariant, } from './nile-kpi-chart/index.js';
+export { NileFilterChart } from './nile-filter-chart/index.js';
+export type { FilterChartSeparatedPayload, FilterControl, FilterOption, FilterChartConfig, } from './nile-filter-chart/nile-filter-chart.js';
 export { NileMapChart } from './nile-map-chart/index.js';
 export type { MapChartDataPoint } from './nile-map-chart/index.js';
 export { NileAiSender } from './nile-ai-sender/index.js';

package/dist/src/index.js

@@ -49,6 +49,7 @@ export { NileHeatmapChart } from './nile-heatmap-chart/index.js';
 export { NileFlameChart } from './nile-flame-chart/index.js';
 export { NileSpiderwebChart } from './nile-spiderweb-chart/index.js';
 export { NileKpiChart } from './nile-kpi-chart/index.js';
+export { NileFilterChart } from './nile-filter-chart/index.js';
 export { NileMapChart } from './nile-map-chart/index.js';
 export { NileAiSender } from './nile-ai-sender/index.js';
 export { NileAiPanel } from './nile-ai-panel/index.js';

package/dist/src/internal/types/chart-filter-config.type.d.ts

@@ -0,0 +1,6 @@
+import type { FilterChartConfig, FilterControl, FilterOption } from '../../nile-filter-chart/nile-filter-chart.js';
+/** `chart` slice for `type: 'filter'` — use with `<nile-chart>` or `{ chart, aq }` on `<nile-filter-chart>`. */
+export type ChartFilterConfigType = FilterChartConfig;
+/** Filter fields without the `type` discriminator. */
+export type ChartFilterPropsType = Omit<FilterChartConfig, 'type'>;
+export type { FilterControl, FilterOption };

package/dist/src/internal/types/chart-filter-config.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=chart-filter-config.type.js.map

package/dist/src/internal/types/primitive-chart-config.type.d.ts

@@ -13,6 +13,7 @@ import type { ChartHeatmapConfigType } from './chart-heatmap-config.type.js';
 import type { ChartFlameConfigType } from './chart-flame-config.type.js';
 import type { ChartSpiderwebConfigType } from './chart-spiderweb-config.type.js';
 import type { ChartKpiConfigType } from './chart-kpi-config.type.js';
+import type { ChartFilterConfigType } from './chart-filter-config.type.js';
 import type { ChartInvertedAreaConfigType } from './chart-area-config.type.js';
 import type { ChartColumnPyramidConfigType } from './chart-column-pyramid-config.type.js';
 import type { ChartLollipopConfigType } from './chart-lollipop-config.type.js';
@@ -33,4 +34,4 @@ import type { ChartXrangeConfigType } from './chart-xrange-config.type.js';
  * Chart configs for primitive `<nile-*-chart>` elements (`el.config = { chart, aq }`).
  * Discriminated on `chart.type`.
  */
-export type PrimitiveChartConfigType = ChartInvertedAreaConfigType | ChartColumnPyramidConfigType | ChartLollipopConfigType | ChartAreaSplineConfigType | ChartAreaNegativeConfigType | ChartAreaRangeConfigType | ChartColumnRangeConfigType | ChartColumnDrilldownConfigType | ChartRadialBarConfigType | ChartVariablePieConfigType | ChartDumbbellLowerConfigType | ChartDumbbellUpperConfigType | ChartEulerConfigType | ChartPolygonConfigType | ChartVectorConfigType | ChartXrangeConfigType | ChartClusterConfigType | ChartStackedConfigType | ChartHistogramConfigType | ChartBellcurveConfigType | ChartBoxplotConfigType | ChartTimelineConfigType | ChartDumbbellConfigType | ChartFanConfigType | ChartFunnelConfigType | ChartOrganizationConfigType | ChartLineColumnConfigType | ChartHeatmapConfigType | ChartFlameConfigType | ChartSpiderwebConfigType | ChartKpiConfigType;
+export type PrimitiveChartConfigType = ChartInvertedAreaConfigType | ChartColumnPyramidConfigType | ChartLollipopConfigType | ChartAreaSplineConfigType | ChartAreaNegativeConfigType | ChartAreaRangeConfigType | ChartColumnRangeConfigType | ChartColumnDrilldownConfigType | ChartRadialBarConfigType | ChartVariablePieConfigType | ChartDumbbellLowerConfigType | ChartDumbbellUpperConfigType | ChartEulerConfigType | ChartPolygonConfigType | ChartVectorConfigType | ChartXrangeConfigType | ChartClusterConfigType | ChartStackedConfigType | ChartHistogramConfigType | ChartBellcurveConfigType | ChartBoxplotConfigType | ChartTimelineConfigType | ChartDumbbellConfigType | ChartFanConfigType | ChartFunnelConfigType | ChartOrganizationConfigType | ChartLineColumnConfigType | ChartHeatmapConfigType | ChartFlameConfigType | ChartSpiderwebConfigType | ChartKpiConfigType | ChartFilterConfigType;

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

@@ -536,5 +536,11 @@ export interface NileKpiChartConfig extends NileChartConfigBase {
     numberSystem?: KpiNumberSystem;
     tooltipEnabled?: boolean;
 }
+export type { FilterOption, FilterControl } from '../nile-filter-chart/nile-filter-chart.js';
+import type { FilterControl } from '../nile-filter-chart/nile-filter-chart.js';
+export interface NileFilterChartConfig extends NileChartConfigBase {
+    type: 'filter';
+    controls: FilterControl[];
+}
 /** Discriminated union of every named chart config — use for typed `<nile-chart>` configs. */
-export type NileChartConfig = NileBarChartConfig | NilePieChartConfig | NileLineChartConfig | NileAreaChartConfig | NileColumnChartConfig | NileDonutChartConfig | NileScatterChartConfig | NileBubbleChartConfig | NileSplineChartConfig | NileRadarChartConfig | NileGaugeChartConfig | NileWaterfallChartConfig | NileMapChartConfig | NileGridChartConfig | NileTrendlineChartConfig | NileAnomalyChartConfig | NileHistogramChartConfig | NileBellcurveChartConfig | NileBoxplotChartConfig | NileStackedChartConfig | NileClusterChartConfig | NileColumnPyramidChartConfig | NileColumnRangeChartConfig | NileColumnDrilldownChartConfig | NileLollipopChartConfig | NileInvertedAreaChartConfig | NileAreaSplineChartConfig | NileAreaNegativeChartConfig | NileAreaRangeChartConfig | NileDumbbellChartConfig | NileDumbbellLowerChartConfig | NileDumbbellUpperChartConfig | NileRadialBarChartConfig | NileSpiderwebChartConfig | NileTimelineChartConfig | NileFanChartConfig | NileFunnelChartConfig | NileOrganizationChartConfig | NileHeatmapChartConfig | NileFlameChartConfig | NileVariablePieChartConfig | NileEulerChartConfig | NilePolygonChartConfig | NileVectorChartConfig | NileXrangeChartConfig | NileLineColumnChartConfig | NileKpiChartConfig;
+export type NileChartConfig = NileBarChartConfig | NilePieChartConfig | NileLineChartConfig | NileAreaChartConfig | NileColumnChartConfig | NileDonutChartConfig | NileScatterChartConfig | NileBubbleChartConfig | NileSplineChartConfig | NileRadarChartConfig | NileGaugeChartConfig | NileWaterfallChartConfig | NileMapChartConfig | NileGridChartConfig | NileTrendlineChartConfig | NileAnomalyChartConfig | NileHistogramChartConfig | NileBellcurveChartConfig | NileBoxplotChartConfig | NileStackedChartConfig | NileClusterChartConfig | NileColumnPyramidChartConfig | NileColumnRangeChartConfig | NileColumnDrilldownChartConfig | NileLollipopChartConfig | NileInvertedAreaChartConfig | NileAreaSplineChartConfig | NileAreaNegativeChartConfig | NileAreaRangeChartConfig | NileDumbbellChartConfig | NileDumbbellLowerChartConfig | NileDumbbellUpperChartConfig | NileRadialBarChartConfig | NileSpiderwebChartConfig | NileTimelineChartConfig | NileFanChartConfig | NileFunnelChartConfig | NileOrganizationChartConfig | NileHeatmapChartConfig | NileFlameChartConfig | NileVariablePieChartConfig | NileEulerChartConfig | NilePolygonChartConfig | NileVectorChartConfig | NileXrangeChartConfig | NileLineColumnChartConfig | NileKpiChartConfig | NileFilterChartConfig;

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

@@ -417,6 +417,10 @@ export const styles = css `
     contain: none;
   }
 
+  .nile-chart-inner--filter {
+    contain: none;
+  }
+
   .nile-ai-trigger.active {
     background: var(--ng-componentcolors-utility-brand-100, #DBE8FF);
   }

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

@@ -48,6 +48,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '../nile-filter-chart/index.js';
 import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 export declare class NileChart extends NileElement {

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

@@ -59,6 +59,7 @@ import '../nile-polygon-chart/index.js';
 import '../nile-vector-chart/index.js';
 import '../nile-xrange-chart/index.js';
 import '../nile-kpi-chart/index.js';
+import '../nile-filter-chart/index.js';
 import '@aquera/nile-data-grid';
 import '../nile-ai-panel/index.js';
 const CORE_CHART_LABELS = {
@@ -1672,6 +1673,12 @@ let NileChart = class NileChart extends NileElement {
           .noMatchMessage=${config.noMatchMessage ?? 'No matching rows'}
           style=${gridChrome}
         ></nile-data-grid>`;
+            }
+            case 'filter': {
+                return html `<nile-filter-chart
+          .config=${{ chart: config }}
+          @nile-change="${(e) => this.emit('nile-change', e.detail)}"
+        ></nile-filter-chart>`;
             }
             default: {
                 const _exhaustive = config;
@@ -1703,7 +1710,7 @@ let NileChart = class NileChart extends NileElement {
       <div class="nile-chart-card ${isGrid ? 'nile-chart-card--grid' : ''}">
         ${this.renderHeader()}
         <div class="nile-chart-wrapper">
-          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''}">
+          <div class="nile-chart-inner ${this.activeConfig?.type === 'kpi' ? 'nile-chart-inner--kpi' : ''} ${this.activeConfig?.type === 'filter' ? 'nile-chart-inner--filter' : ''}">
             ${isLoading
             ? this.renderSkeleton()
             : this.activeConfig

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

@@ -0,0 +1,2 @@
+export { NileFilterChart } from './nile-filter-chart.js';
+export type { FilterChartSeparatedPayload } from './nile-filter-chart.js';

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

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

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

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

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

@@ -0,0 +1,361 @@
+import { css } from 'lit';
+export const styles = css `
+  :host { display: block; width: 100%; }
+
+  .fc-root {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-none, var(--ng-spacing-0));
+  }
+
+  /* ── Group ─── */
+  .fc-group {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    overflow: hidden;
+  }
+
+  .fc-group__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-2xl, var(--ng-spacing-5));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    gap: var(--nile-spacing-8px, var(--ng-spacing-2));
+  }
+
+  .fc-group__header--collapsible {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .fc-group__header--collapsible:hover {
+    background: var(--nile-colors-dark-200, var(--ng-colors-bg-secondary-hover));
+  }
+
+  .fc-group__header-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-2px, var(--ng-spacing-0-5));
+  }
+
+  .fc-group__label {
+    font-size: var(--nile-font-size-sm, 13px);
+    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    letter-spacing: 0.02em;
+  }
+
+  .fc-group__desc {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+    line-height: 1.4;
+  }
+
+  .fc-group__chevron {
+    font-size: var(--nile-type-scale-5, var(--ng-font-size-text-lg));
+    font-weight: var(--ng-font-weight-300, 300);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+    transition: transform 0.2s ease;
+    transform: rotate(0deg);
+    flex-shrink: 0;
+  }
+
+  .fc-group__chevron--open {
+    transform: rotate(90deg);
+  }
+
+  .fc-group__body {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .fc-group__body .fc-control {
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  .fc-group__body .fc-control:last-child {
+    border-bottom: none;
+  }
+
+  /* ── Control card ─── */
+  .fc-control {
+    padding: var(--nile-spacing-xl, var(--ng-spacing-4)) var(--nile-spacing-2xl, var(--ng-spacing-5));
+  }
+
+  .fc-control__label {
+    font-size: var(--nile-font-size-sm, 13px);
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin-bottom: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .fc-control__desc {
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+    margin-bottom: var(--nile-spacing-lg, var(--ng-spacing-3));
+    line-height: 1.4;
+  }
+
+  .fc-control__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-8px, var(--ng-spacing-2));
+  }
+
+  /* ── Badge ─── */
+  .fc-badge-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .fc-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    font-size: var(--nile-font-size-sm, 13px);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    cursor: pointer;
+    border: 1.5px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    background: var(--nile-colors-white-base, var(--ng-color-base-white));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    transition: background 0.12s, border-color 0.12s, color 0.12s;
+    white-space: nowrap;
+    line-height: 1.4;
+  }
+
+  .fc-badge:hover {
+    border-color: var(--nile-colors-primary-400, var(--ng-color-bluedark-400));
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+  }
+
+  .fc-badge--selected {
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-white-base, var(--ng-color-base-white));
+  }
+
+  .fc-badge--selected .fc-dot { border-color: var(--nile-colors-white-500, var(--ng-color-graydarkmodealpha-500)); }
+
+  .fc-dot {
+    width: var(--nile-spacing-8px, var(--ng-spacing-2));
+    height: var(--nile-spacing-8px, var(--ng-spacing-2));
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    flex-shrink: 0;
+    border: 1.5px solid var(--nile-colors-transparent, var(--ng-color-base-transparent));
+  }
+
+  /* ── Slider ─── */
+  .fc-slider-wrap { display: flex; flex-direction: column; gap: var(--nile-spacing-10px, var(--ng-spacing-2-5)); }
+
+  .fc-slider-label {
+    display: flex;
+    justify-content: space-between;
+    font-size: var(--nile-font-size-sm, 13px);
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600));
+  }
+
+  .fc-slider-range strong { color: var(--nile-colors-primary-600, var(--ng-color-bluedark-600)); }
+
+  nile-tag { cursor: pointer; }
+
+  /* Expand slider to fill the card width */
+  nile-slider { display: block; width: 100%; }
+
+  nile-slider::part(base) {
+    height: auto;
+    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-none, var(--ng-spacing-0));
+  }
+
+  nile-slider::part(range-container) {
+    flex: 1;
+    width: 100%;
+    min-width: 0;
+  }
+
+  /* Make the track fill the container and be easier to see */
+  nile-slider::part(range) {
+    width: 100%;
+    height: var(--nile-height-6px, var(--ng-spacing-1-5));
+  }
+
+  /* The filled portion between the two handles */
+  nile-slider::part(range-completed) {
+    background-color: var(--nile-colors-primary-600, var(--ng-color-bluedark-600));
+    height: 100%;
+  }
+
+  /* ── Tree ─── */
+  /* nile-tree sets font-size:0 on :host for em-based indentation maths.
+     Without --nile-type-scale-4 defined the label inherits 0 and becomes invisible.
+     We also enable indent guide lines and fix the indent step size. */
+  nile-tree {
+    --nile-type-scale-4: var(--nile-font-size-sm, 13px);
+    --indent-size: 0.875rem;
+    --indent-guide-width: 1px;
+    --indent-guide-style: solid;
+    --indent-guide-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  /* ── Segmented ─── */
+  .fc-segmented-scroll {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .fc-segmented-scroll::-webkit-scrollbar { display: none; }
+
+  .fc-segmented-scroll nile-button-toggle-group {
+    display: inline-flex;
+    white-space: nowrap;
+    min-width: max-content;
+  }
+
+  /* ── Toggle ─── */
+  .fc-toggle-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+
+  /* ── Comparison ─── */
+  .fc-comparison {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .fc-comparison nile-select { flex: 1; }
+
+  .fc-vs {
+    flex-shrink: 0;
+    font-size: 11px;
+    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
+    color: var(--nile-colors-white-base, var(--ng-color-base-white));
+    background: var(--nile-colors-neutral-700, var(--ng-color-graylightmode-700));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
+    padding: 3px var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    letter-spacing: 0.05em;
+  }
+
+  /* ── Threshold ─── */
+  .fc-threshold {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-3));
+  }
+
+  .fc-threshold-metric-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .fc-threshold-cond-row {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--nile-spacing-lg, var(--ng-spacing-3));
+    padding-left: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .fc-threshold-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .fc-threshold-field-label {
+    font-size: 11px;
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+  }
+
+  .fc-threshold-field--metric { flex: 1; }
+  .fc-threshold-field--op { flex: 0 0 150px; }
+  .fc-threshold-field--val { flex: 1; }
+
+  .fc-threshold-where {
+    flex-shrink: 0;
+    align-self: flex-end;
+    margin-bottom: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    font-size: 11px;
+    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
+    letter-spacing: 0.06em;
+    color: var(--nile-colors-white-base, var(--ng-color-base-white));
+    background: var(--nile-colors-dark-500, var(--ng-color-graylightmode-600));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
+    padding: var(--nile-spacing-4px, var(--ng-spacing-1)) var(--nile-spacing-10px, var(--ng-spacing-2-5));
+  }
+
+  .fc-threshold-preview {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    padding: var(--nile-spacing-8px, var(--ng-spacing-2)) var(--nile-spacing-lg, var(--ng-spacing-3));
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-sm));
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    border: 1px solid var(--nile-colors-primary-400, var(--ng-color-bluedark-200));
+    font-size: var(--nile-font-size-sm, 13px);
+    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+    font-family: monospace;
+  }
+
+  .fc-threshold-preview--empty {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));
+    font-family: inherit;
+    font-style: italic;
+  }
+
+  /* ── Preset ─── */
+  .fc-preset-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .fc-preset-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-10px, var(--ng-spacing-2-5));
+    padding: var(--nile-spacing-10px, var(--ng-spacing-2-5)) var(--nile-spacing-14px, var(--ng-spacing-3-5));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    border: 1.5px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background: var(--nile-colors-white-base, var(--ng-color-base-white));
+    font-size: var(--nile-font-size-sm, 13px);
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-secondary-700));
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.12s, border-color 0.12s;
+  }
+
+  .fc-preset-item:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+
+  .fc-preset-item--selected {
+    border-color: var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-primary));
+    color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+  }
+
+  .fc-preset-icon {
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    line-height: 1;
+  }
+`;
+//# sourceMappingURL=nile-filter-chart.css.js.map

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

@@ -0,0 +1,96 @@
+import { CSSResultArray, TemplateResult } from 'lit';
+import NileElement from '../internal/nile-element.js';
+import '@aquera/nile-elements/nile-select';
+import '@aquera/nile-elements/nile-option';
+import '@aquera/nile-elements/nile-input';
+import '@aquera/nile-elements/nile-slide-toggle';
+import '@aquera/nile-elements/nile-radio-group';
+import '@aquera/nile-elements/nile-radio';
+import '@aquera/nile-elements/nile-tag';
+import '@aquera/nile-elements/nile-button-toggle-group';
+import '@aquera/nile-elements/nile-button-toggle';
+export type NileTagVariant = 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
+export interface FilterOption {
+    label: string;
+    value: string;
+    /** Optional color dot (CSS color string). */
+    color?: string;
+    /** Optional nile-tag semantic variant — uses ng tokens directly (preferred over color). */
+    ngVariant?: NileTagVariant;
+    /** Optional icon name for preset variant. */
+    icon?: string;
+}
+export interface TreeNode {
+    label: string;
+    value: string;
+    expanded?: boolean;
+    children?: TreeNode[];
+}
+export interface FilterControl {
+    id: string;
+    label: string;
+    /** Optional subtitle shown below the label. */
+    description?: string;
+    selection: 'single' | 'multi';
+    variant: 'badge' | 'dropdown' | 'segmented' | 'radio' | 'toggle' | 'slider' | 'search' | 'comparison' | 'threshold' | 'tree' | 'preset';
+    options?: FilterOption[];
+    value?: string | string[] | number[] | boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: string;
+    suffix?: string;
+    placeholder?: string;
+    valueB?: string;
+    operator?: string;
+    thresholdValue?: number | string;
+    treeData?: TreeNode[];
+}
+export interface FilterGroup {
+    type: 'group';
+    label: string;
+    description?: string;
+    collapsible?: boolean;
+    controls: FilterControl[];
+}
+export type FilterEntry = FilterControl | FilterGroup;
+export type FilterChartConfig = {
+    type: 'filter';
+    controls: FilterEntry[];
+    [key: string]: unknown;
+};
+export type FilterChartSeparatedPayload = {
+    chart: FilterChartConfig;
+    aq?: Record<string, unknown>;
+};
+export declare class NileFilterChart extends NileElement {
+    static get styles(): CSSResultArray;
+    config: FilterChartSeparatedPayload | null;
+    private selectedValues;
+    private collapsedGroups;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _flatControls;
+    private _initValues;
+    private _set;
+    private _emitChange;
+    private _renderBadge;
+    private _renderDropdown;
+    private _renderSegmented;
+    private _renderRadio;
+    private _renderToggle;
+    private _renderSearch;
+    private _renderComparison;
+    private _renderThreshold;
+    private _renderPreset;
+    private _renderControl;
+    private _renderGroup;
+    render(): TemplateResult;
+}
+export default NileFilterChart;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-filter-chart': NileFilterChart;
+    }
+}

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

@@ -0,0 +1,453 @@
+import { __decorate } from "tslib";
+import { html, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './nile-filter-chart.css.js';
+import NileElement from '../internal/nile-element.js';
+import '@aquera/nile-elements/nile-select';
+import '@aquera/nile-elements/nile-option';
+import '@aquera/nile-elements/nile-input';
+import '@aquera/nile-elements/nile-slide-toggle';
+// import '@aquera/nile-elements/nile-slider';
+import '@aquera/nile-elements/nile-radio-group';
+import '@aquera/nile-elements/nile-radio';
+import '@aquera/nile-elements/nile-tag';
+import '@aquera/nile-elements/nile-button-toggle-group';
+import '@aquera/nile-elements/nile-button-toggle';
+let NileFilterChart = class NileFilterChart extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.config = null;
+        this.selectedValues = new Map();
+        this.collapsedGroups = new Set();
+    }
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._initValues();
+        this.emit('nile-init');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.emit('nile-destroy');
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('config')) {
+            this._initValues();
+        }
+    }
+    _flatControls() {
+        const entries = this.config?.chart?.controls ?? [];
+        const out = [];
+        for (const entry of entries) {
+            if (entry.type === 'group') {
+                out.push(...entry.controls);
+            }
+            else {
+                out.push(entry);
+            }
+        }
+        return out;
+    }
+    _initValues() {
+        const controls = this._flatControls();
+        const map = new Map();
+        for (const ctrl of controls) {
+            if (ctrl.value !== undefined) {
+                map.set(ctrl.id, ctrl.value);
+                if (ctrl.variant === 'comparison') {
+                    map.set(`${ctrl.id}__b`, ctrl.valueB ?? '');
+                }
+                if (ctrl.variant === 'threshold') {
+                    map.set(`${ctrl.id}__op`, ctrl.operator ?? '>');
+                    map.set(`${ctrl.id}__val`, ctrl.thresholdValue ?? '');
+                }
+            }
+            else {
+                if (ctrl.variant === 'slider') {
+                    map.set(ctrl.id, [ctrl.min ?? 0, ctrl.max ?? 100]);
+                }
+                else if (ctrl.variant === 'toggle') {
+                    const defaults = {};
+                    (ctrl.options ?? []).forEach(o => { defaults[o.value] = false; });
+                    map.set(ctrl.id, defaults);
+                }
+                else if (ctrl.selection === 'multi') {
+                    map.set(ctrl.id, []);
+                }
+                else {
+                    map.set(ctrl.id, '');
+                }
+                if (ctrl.variant === 'comparison')
+                    map.set(`${ctrl.id}__b`, '');
+                if (ctrl.variant === 'threshold') {
+                    map.set(`${ctrl.id}__op`, '>');
+                    map.set(`${ctrl.id}__val`, '');
+                }
+            }
+        }
+        this.selectedValues = map;
+    }
+    _set(id, value) {
+        this.selectedValues = new Map(this.selectedValues).set(id, value);
+        this._emitChange();
+    }
+    _emitChange() {
+        const filters = {};
+        this.selectedValues.forEach((val, id) => { filters[id] = val; });
+        this.emit('nile-change', { filters });
+    }
+    // ── Badge ────────────────────────────────────────────────────────────────────
+    _renderBadge(ctrl) {
+        const current = this.selectedValues.get(ctrl.id);
+        return html `
+      <div class="fc-badge-group" role="group" aria-label="${ctrl.label}">
+        ${(ctrl.options ?? []).map(opt => {
+            const sel = ctrl.selection === 'multi'
+                ? (Array.isArray(current) && current.includes(opt.value))
+                : current === opt.value;
+            return html `
+            <nile-tag
+              pill
+              size="medium"
+              variant="${sel ? (opt.ngVariant ?? 'primary') : 'normal'}"
+              @click="${() => {
+                if (ctrl.selection === 'single') {
+                    this._set(ctrl.id, sel ? '' : opt.value);
+                }
+                else {
+                    const arr = Array.isArray(current) ? [...current] : [];
+                    const idx = arr.indexOf(opt.value);
+                    if (idx === -1)
+                        arr.push(opt.value);
+                    else
+                        arr.splice(idx, 1);
+                    this._set(ctrl.id, arr);
+                }
+            }}"
+            >${opt.label}</nile-tag>`;
+        })}
+      </div>`;
+    }
+    // ── Dropdown ─────────────────────────────────────────────────────────────────
+    _renderDropdown(ctrl) {
+        const raw = this.selectedValues.get(ctrl.id);
+        const current = Array.isArray(raw) ? raw : (raw ? [raw] : []);
+        const isMulti = ctrl.selection === 'multi';
+        return html `
+      <nile-select
+        .value="${isMulti ? current : (current[0] ?? '')}"
+        ?multiple="${isMulti}"
+        searchEnabled
+        placeholder="${ctrl.placeholder ?? `Select ${ctrl.label || 'option'}…`}"
+        @nile-change="${(e) => {
+            e.stopPropagation();
+            this._set(ctrl.id, e.detail.value);
+        }}"
+      >
+        ${(ctrl.options ?? []).map(opt => html `
+          <nile-option
+            value="${opt.value}"
+            ?selected="${isMulti ? current.includes(opt.value) : current[0] === opt.value}"
+          >${opt.label}</nile-option>`)}
+      </nile-select>`;
+    }
+    // ── Segmented ────────────────────────────────────────────────────────────────
+    _renderSegmented(ctrl) {
+        return html `
+      <div class="fc-segmented-scroll">
+        <nile-button-toggle-group
+          .value="${this.selectedValues.get(ctrl.id) ?? ''}"
+          ?multiple="${ctrl.selection === 'multi'}"
+          @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
+        >
+          ${(ctrl.options ?? []).map(opt => html `
+            <nile-button-toggle value="${opt.value}">${opt.label}</nile-button-toggle>`)}
+        </nile-button-toggle-group>
+      </div>`;
+    }
+    // ── Radio ────────────────────────────────────────────────────────────────────
+    _renderRadio(ctrl) {
+        const current = this.selectedValues.get(ctrl.id) ?? '';
+        return html `
+      <nile-radio-group
+        .value="${current}"
+        @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
+      >
+        ${(ctrl.options ?? []).map(opt => html `
+          <nile-radio value="${opt.value}" ?checked="${current === opt.value}">${opt.label}</nile-radio>`)}
+      </nile-radio-group>`;
+    }
+    // ── Toggle ───────────────────────────────────────────────────────────────────
+    _renderToggle(ctrl) {
+        const current = this.selectedValues.get(ctrl.id) ?? {};
+        return html `
+      <div class="fc-toggle-group">
+        ${(ctrl.options ?? []).map(opt => html `
+          <nile-slide-toggle
+            label="${opt.label}"
+            ?isChecked="${!!current[opt.value]}"
+            fullWidth
+            @nile-change="${(e) => {
+            e.stopPropagation();
+            const updated = { ...current, [opt.value]: e.detail.checked };
+            this._set(ctrl.id, updated);
+        }}"
+          ></nile-slide-toggle>`)}
+      </div>`;
+    }
+    // ── Slider ───────────────────────────────────────────────────────────────────
+    // private _renderSlider(ctrl: FilterControl): TemplateResult {
+    //   const min = ctrl.min ?? 0;
+    //   const max = ctrl.max ?? 100;
+    //   const val: number[] = this.selectedValues.get(ctrl.id) ?? [min, max];
+    //   const fmt = (n: number) => `${ctrl.prefix ?? ''}${n.toLocaleString()}${ctrl.suffix ?? ''}`;
+    //
+    //   return html`
+    //     <div class="fc-slider-wrap">
+    //       <div class="fc-slider-label">
+    //         <span class="fc-slider-range">${fmt(val[0])} — <strong>${fmt(val[1])}</strong></span>
+    //       </div>
+    //       <nile-slider
+    //         .minValue="${min}"
+    //         .maxValue="${max}"
+    //         ?rangeSlider="${true}"
+    //         .rangeOneValue="${val[0]}"
+    //         .rangeTwoValue="${val[1]}"
+    //         @nile-button-first-change-end="${(e: CustomEvent) => {
+    //           e.stopPropagation();
+    //           this._set(ctrl.id, [e.detail.value, val[1]]);
+    //         }}"
+    //         @nile-button-last-change-end="${(e: CustomEvent) => {
+    //           e.stopPropagation();
+    //           this._set(ctrl.id, [val[0], e.detail.value]);
+    //         }}"
+    //       >
+    //         <span slot="prefix">${fmt(min)}</span>
+    //         <span slot="suffix">${fmt(max)}</span>
+    //       </nile-slider>
+    //     </div>`;
+    // }
+    // ── Search ───────────────────────────────────────────────────────────────────
+    _renderSearch(ctrl) {
+        return html `
+      <nile-input
+        type="search"
+        placeholder="${ctrl.placeholder ?? `Search ${ctrl.label}…`}"
+        .value="${this.selectedValues.get(ctrl.id) ?? ''}"
+        clearable
+        @nile-input="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
+      ></nile-input>`;
+    }
+    // ── Comparison ───────────────────────────────────────────────────────────────
+    _renderComparison(ctrl) {
+        const valA = this.selectedValues.get(ctrl.id) ?? '';
+        const valB = this.selectedValues.get(`${ctrl.id}__b`) ?? '';
+        return html `
+      <div class="fc-comparison">
+        <nile-select
+          .value="${valA}"
+          placeholder="Period A"
+          @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
+        >
+          ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
+        </nile-select>
+        <span class="fc-vs">VS</span>
+        <nile-select
+          .value="${valB}"
+          placeholder="Period B"
+          @nile-change="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__b`, e.detail.value); }}"
+        >
+          ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
+        </nile-select>
+      </div>`;
+    }
+    // ── Threshold ────────────────────────────────────────────────────────────────
+    _renderThreshold(ctrl) {
+        const metric = this.selectedValues.get(ctrl.id) ?? '';
+        const op = this.selectedValues.get(`${ctrl.id}__op`) ?? '>';
+        const val = this.selectedValues.get(`${ctrl.id}__val`) ?? '';
+        const operators = [
+            { value: '>', label: '> (greater)' },
+            { value: '>=', label: '>= (min)' },
+            { value: '<', label: '< (less)' },
+            { value: '<=', label: '<= (max)' },
+            { value: '=', label: '= (equals)' },
+            { value: '!=', label: '≠ (not)' },
+        ];
+        const metricLabel = (ctrl.options ?? []).find(o => o.value === metric)?.label ?? metric;
+        const hasPreview = metric && val !== '';
+        const previewText = hasPreview ? `${metricLabel}  ${op}  ${val}` : 'Set metric, condition, and value above';
+        return html `
+      <div class="fc-threshold">
+        <div class="fc-threshold-metric-row">
+          <span class="fc-threshold-where">WHERE</span>
+          <div class="fc-threshold-field fc-threshold-field--metric">
+            <span class="fc-threshold-field-label">Metric</span>
+            <nile-select
+              .value="${metric}"
+              placeholder="Select metric…"
+              @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
+            >
+              ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
+            </nile-select>
+          </div>
+        </div>
+        <div class="fc-threshold-cond-row">
+          <div class="fc-threshold-field fc-threshold-field--op">
+            <span class="fc-threshold-field-label">Condition</span>
+            <nile-select
+              .value="${op}"
+              @nile-change="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__op`, e.detail.value); }}"
+            >
+              ${operators.map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
+            </nile-select>
+          </div>
+          <div class="fc-threshold-field fc-threshold-field--val">
+            <span class="fc-threshold-field-label">Value</span>
+            <nile-input
+              type="number"
+              placeholder="e.g. 10000"
+              .value="${String(val)}"
+              @nile-input="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__val`, e.detail.value); }}"
+            ></nile-input>
+          </div>
+        </div>
+        <div class="fc-threshold-preview ${hasPreview ? '' : 'fc-threshold-preview--empty'}">
+          ${hasPreview ? html `<strong>Filter:</strong>` : nothing}
+          ${previewText}
+        </div>
+      </div>`;
+    }
+    // ── Tree ─────────────────────────────────────────────────────────────────────
+    // private _renderTree(ctrl: FilterControl): TemplateResult {
+    //   const renderNodes = (nodes: TreeNode[]): TemplateResult[] =>
+    //     nodes.map(node => html`
+    //       <nile-tree-item value="${node.value}" ?expanded="${node.expanded ?? false}">
+    //         <span>${node.label}</span>
+    //         ${node.children ? renderNodes(node.children) : nothing}
+    //       </nile-tree-item>`);
+    //
+    //   return html`
+    //     <nile-tree
+    //       selection="${ctrl.selection === 'multi' ? 'multiple' : 'single'}"
+    //       @nile-selection-change="${(e: CustomEvent) => {
+    //         e.stopPropagation();
+    //         this._set(ctrl.id, e.detail?.detail?.selection ?? []);
+    //       }}"
+    //     >
+    //       ${renderNodes(ctrl.treeData ?? [])}
+    //     </nile-tree>`;
+    // }
+    // ── Preset ───────────────────────────────────────────────────────────────────
+    _renderPreset(ctrl) {
+        const current = this.selectedValues.get(ctrl.id);
+        return html `
+      <div class="fc-preset-list">
+        ${(ctrl.options ?? []).map(opt => html `
+          <button
+            class="fc-preset-item ${current === opt.value ? 'fc-preset-item--selected' : ''}"
+            @click="${() => this._set(ctrl.id, opt.value)}"
+          >
+            ${opt.icon ? html `<span class="fc-preset-icon">${opt.icon}</span>` : nothing}
+            ${opt.label}
+          </button>`)}
+      </div>`;
+    }
+    // ── Card wrapper ─────────────────────────────────────────────────────────────
+    _renderControl(ctrl) {
+        let body;
+        switch (ctrl.variant) {
+            case 'badge':
+                body = this._renderBadge(ctrl);
+                break;
+            case 'dropdown':
+                body = this._renderDropdown(ctrl);
+                break;
+            case 'segmented':
+                body = this._renderSegmented(ctrl);
+                break;
+            case 'radio':
+                body = this._renderRadio(ctrl);
+                break;
+            case 'toggle':
+                body = this._renderToggle(ctrl);
+                break;
+            // case 'slider':      body = this._renderSlider(ctrl); break;
+            case 'search':
+                body = this._renderSearch(ctrl);
+                break;
+            case 'comparison':
+                body = this._renderComparison(ctrl);
+                break;
+            case 'threshold':
+                body = this._renderThreshold(ctrl);
+                break;
+            // case 'tree':        body = this._renderTree(ctrl); break;
+            case 'preset':
+                body = this._renderPreset(ctrl);
+                break;
+            default: body = html ``;
+        }
+        return html `
+      <div class="fc-control" part="filter-control">
+        ${ctrl.label ? html `<div class="fc-control__label">${ctrl.label}</div>` : nothing}
+        ${ctrl.description ? html `<div class="fc-control__desc">${ctrl.description}</div>` : nothing}
+        <div class="fc-control__body">${body}</div>
+      </div>`;
+    }
+    _renderGroup(group) {
+        const collapsed = this.collapsedGroups.has(group.label);
+        const toggle = () => {
+            const next = new Set(this.collapsedGroups);
+            if (collapsed)
+                next.delete(group.label);
+            else
+                next.add(group.label);
+            this.collapsedGroups = next;
+        };
+        return html `
+      <div class="fc-group" part="filter-group">
+        <div class="fc-group__header ${group.collapsible ? 'fc-group__header--collapsible' : ''}"
+             @click="${group.collapsible ? toggle : nothing}">
+          <div class="fc-group__header-text">
+            <span class="fc-group__label">${group.label}</span>
+            ${group.description ? html `<span class="fc-group__desc">${group.description}</span>` : nothing}
+          </div>
+          ${group.collapsible ? html `
+            <span class="fc-group__chevron ${collapsed ? '' : 'fc-group__chevron--open'}">&#8250;</span>
+          ` : nothing}
+        </div>
+        ${collapsed ? nothing : html `
+          <div class="fc-group__body">
+            ${group.controls.map(ctrl => this._renderControl(ctrl))}
+          </div>`}
+      </div>`;
+    }
+    render() {
+        const entries = this.config?.chart?.controls ?? [];
+        return html `
+      <div class="fc-root" part="filter-root">
+        ${entries.map(entry => entry.type === 'group'
+            ? this._renderGroup(entry)
+            : this._renderControl(entry))}
+      </div>`;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], NileFilterChart.prototype, "config", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "selectedValues", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "collapsedGroups", void 0);
+NileFilterChart = __decorate([
+    customElement('nile-filter-chart')
+], NileFilterChart);
+export { NileFilterChart };
+export default NileFilterChart;
+//# sourceMappingURL=nile-filter-chart.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",
@@ -60,11 +60,15 @@
   },
   "peerDependencies": {
     "highcharts": ">=10.0.0",
+    "@aquera/nile-elements": ">=0.1.0",
     "@aquera/nile-data-grid": ">=0.1.0"
   },
   "peerDependenciesMeta": {
+    "@aquera/nile-elements": {
+      "optional": true
+    },
     "@aquera/nile-data-grid": {
-    "optional": true
+      "optional": true
     }
   },
   "devDependencies": {