@adaptabletools/adaptable 23.0.0-canary.6 → 23.0.0-canary.8

package/src/AdaptableState/StyledColumnState.js

@@ -1,9 +1 @@
-/** Keys copied from legacy `BadgeStyleDefinition.Style` (`AdaptableStyle`) into `PillStyle`. */
-export const BADGE_PILL_STYLE_KEYS = [
-    'BackColor',
-    'ForeColor',
-    'BorderColor',
-    'FontWeight',
-    'FontStyle',
-    'TextDecoration',
-];
+export {};

package/src/AdaptableState/StyledColumns/BadgeStyle.d.ts

@@ -0,0 +1,143 @@
+import { AdaptableIcon } from '../Common/AdaptableIcon';
+import { AdaptablePredicate } from '../Common/AdaptablePredicate';
+import { AdaptableBooleanQuery } from '../Common/AdaptableQuery';
+import { AdaptableStyle, CellBoxStyle, CellFontStyle } from '../Common/AdaptableStyle';
+import { TypeHint } from '../Common/Types';
+/**
+ * Predicates available when creating a Badge Style Rule
+ */
+export type SystemBadgeStylePredicateId = 'In' | 'NotIn' | 'Blanks' | 'NonBlanks' | 'Equals' | 'NotEquals' | 'GreaterThan' | 'LessThan' | 'Positive' | 'Negative' | 'Zero' | 'Between' | 'NotBetween' | 'Is' | 'IsNot' | 'Contains' | 'NotContains' | 'StartsWith' | 'EndsWith' | 'Regex';
+/**
+ * System Predicate Ids available for Badge Style
+ */
+export type SystemBadgeStylePredicateIds = SystemBadgeStylePredicateId[];
+/**
+ * System Predicate definition for Badge Style
+ */
+export interface BadgeStylePredicate extends AdaptablePredicate {
+    PredicateId: TypeHint<string, SystemBadgeStylePredicateId>;
+}
+/** Keys copied from legacy `BadgeStyleDefinition.Style` (`AdaptableStyle`) into `PillStyle`. */
+export declare const BADGE_PILL_STYLE_KEYS: readonly ["BackColor", "ForeColor", "BorderColor", "FontWeight", "FontStyle", "TextDecoration"];
+/**
+ * Visual styling applied to a single Badge pill — an explicit subset of
+ * {@link AdaptableStyle}. Not used: `BorderRadius` ({@link BadgeShape}),
+ * `Alignment` / `FontSize` / `ClassName` (column-level or unsupported).
+ */
+export type BadgePillStyle = Pick<AdaptableStyle, (typeof BADGE_PILL_STYLE_KEYS)[number]>;
+/**
+ * Visual shape of a Badge; convenience shorthand that resolves to a border radius without having to pick a pixel value
+ */
+export type BadgeShape = 'Pill' | 'Rounded' | 'Square';
+/**
+ * Density preset that controls inner padding (and therefore overall height)
+ * for *all* badges in a column. Applied at the {@link BadgeStyle} level so
+ * a single column reads as one consistent label set.
+ *
+ * - `'Compact'` - tight padding for dense grids
+ * - `'Normal'` - default; balanced padding (matches pre-existing look)
+ * - `'Comfortable'` - looser padding for low-density / large-font grids
+ */
+export type BadgeDensity = 'Compact' | 'Normal' | 'Comfortable';
+/**
+ * How adjacent badges in an array-column cell should lay out when the cell
+ * is too narrow to fit them on one line.
+ *
+ * - `'Truncate'` - default; badges sit on a single line and the cell clips
+ *   anything that overflows (legacy behaviour).
+ * - `'Wrap'` - badges wrap onto subsequent lines; row height grows to fit.
+ *   AG Grid `rowHeight` / `getRowHeight` should be tall enough to host the
+ *   wrapped badges; consider `autoRowHeight` on the column.
+ * - `'Scroll'` - badges stay on one line and the cell becomes
+ *   horizontally scrollable.
+ */
+export type BadgeOverflowMode = 'Truncate' | 'Wrap' | 'Scroll';
+/**
+ * Icon settings for a {@link BadgeStyleDefinition} — the icon itself plus its
+ * placement and behaviour inside the pill. All four properties are tightly
+ * coupled (the placement / gap / icon-only flags are only meaningful when an
+ * `Icon` is set) so they live together in a single nested object.
+ *
+ * @public
+ */
+export interface BadgeIconProperties {
+    /**
+     * Icon to display in the badge.
+     */
+    Icon: AdaptableIcon;
+    /**
+     * Position of the icon in the badge — `'Start'` or `'End'`.
+     *
+     * @defaultValue 'Start'
+     */
+    Position?: 'Start' | 'End';
+    /**
+     * Pixel gap between the icon and the badge text. Falls back to the badge
+     * `Density` preset when omitted; ignored when {@link IconOnly} is `true`.
+     */
+    Gap?: number;
+    /**
+     * Only show the icon and no badge text.
+     */
+    IconOnly?: boolean;
+}
+/**
+ * Defines a Badge Style
+ */
+export interface BadgeStyleDefinition {
+    /**
+     * Optional Rule for deciding whether Badge is displayed
+     */
+    Predicate?: BadgeStylePredicate;
+    Expression?: AdaptableBooleanQuery;
+    /**
+     * Style for the Badge **pill** (cut-down version of Adaptable Style)
+     */
+    PillStyle?: BadgePillStyle;
+    /**
+     * Visual shape of the Badge's corner radius
+     *
+     * @defaultValue 'Rounded'
+     */
+    Shape?: BadgeShape;
+    /**
+     * Settings for Icon to display alongside badge text
+     */
+    IconProperties?: BadgeIconProperties;
+}
+/**
+ * Collection of Badge Style Definitions to display in a Badge Styled Column
+ */
+export interface BadgeStyle {
+    /**
+     * Collection of Badge Style Definitions
+     */
+    Badges?: BadgeStyleDefinition[];
+    /**
+     * Density preset shared by every badge in the column - controls inner padding.
+     *
+     * @defaultValue 'Normal'
+     */
+    Density?: BadgeDensity;
+    /**
+     * Pixel gap between adjacent badges in array-column cells
+     *
+     * @defaultValue 4
+     */
+    Spacing?: number;
+    /**
+     * How badges lay out in array-column cells where space is tight
+     *
+     * @defaultValue 'Truncate'
+     */
+    OverflowMode?: BadgeOverflowMode;
+    /**
+     * Optional cell-box styling applied to grid cell **behind** the badges
+     */
+    Cell?: CellBoxStyle;
+    /**
+     * Optional column-level Font (only Alignment is meaningful for Badge cells)
+     *
+     */
+    Font?: CellFontStyle;
+}

package/src/AdaptableState/StyledColumns/BadgeStyle.js

@@ -0,0 +1,9 @@
+/** Keys copied from legacy `BadgeStyleDefinition.Style` (`AdaptableStyle`) into `PillStyle`. */
+export const BADGE_PILL_STYLE_KEYS = [
+    'BackColor',
+    'ForeColor',
+    'BorderColor',
+    'FontWeight',
+    'FontStyle',
+    'TextDecoration',
+];

package/src/AdaptableState/StyledColumns/BulletChartStyle.d.ts

@@ -0,0 +1,147 @@
+import { CellFontStyle } from '../Common/AdaptableStyle';
+import { BarChartCellTextProperties } from './Common/BarChartCellText';
+import { BarChartMarker } from './Common/BarChartMarker';
+import { CellTextOptions } from './Common/CellTextOptions';
+import { NumericStyledColumn } from './Common/NumericStyledColumn';
+/**
+ * Style used to display a Bullet Chart in a Styled Column.
+ *
+ * A Bullet Chart shows three things in a single cell:
+ *   1. the actual cell value, as a horizontal bar (the "feature measure")
+ *   2. a target value, as a marker on the bar (the "comparative measure")
+ *   3. optional qualitative bands behind the bar (e.g. poor / ok / good),
+ *      defined via the inherited `CellRanges` property
+ *
+ * Note: Unlike `PercentBarStyle.CellRanges` (which colour the bar based on
+ * the cell value), `BulletChartStyle.CellRanges` colour the *background*
+ * bands and are drawn unconditionally to provide the qualitative scale.
+ */
+export interface BulletChartStyle extends NumericStyledColumn {
+    /**
+     * Target value(s) rendered as marker(s) on the bar, plus the chart-level
+     * default marker style. Per-target overrides are possible via the
+     * {@link BulletChartTargetDefinition} object form.
+     */
+    TargetProperties?: BulletChartTargetProperties;
+    /**
+     * Visual properties of the actual (foreground) bar — colour and thickness.
+     */
+    Bar?: BulletChartBarProperties;
+    /**
+     * Orientation of the chart.
+     *
+     * - `'Horizontal'` (default) - bands and bar run left-to-right; markers
+     *   are vertical lines / shapes positioned along the x-axis.
+     * - `'Vertical'` - bands and bar run bottom-to-top; markers are
+     *   horizontal lines / shapes positioned along the y-axis.
+     *
+     * Note: vertical bullet charts need a tall row height to be readable
+     * (we recommend at least 60px). AG Grid row height is a per-grid setting
+     * (`gridOptions.rowHeight` or `getRowHeight`).
+     *
+     * @defaultValue 'Horizontal'
+     */
+    Orientation?: 'Horizontal' | 'Vertical';
+    /**
+     * Background colour for the chart area when no `CellRanges` are supplied.
+     */
+    BackColor?: string;
+    /**
+     * Origin of the actual bar.
+     *
+     * - `'Auto'` (default) - the bar grows from the left edge unless any cell
+     *   value or range endpoint is negative, in which case it grows from `0`
+     * - `'Zero'` - the bar always grows from `0` (centred axis); positive
+     *   values extend right, negative values extend left
+     * - any number - the bar grows from that fixed origin
+     *
+     * @defaultValue 'Auto'
+     */
+    Origin?: 'Auto' | 'Zero' | number;
+    /**
+     * Optional cell-text overlay configuration.
+     */
+    CellTextProperties?: BarChartCellTextProperties;
+    /**
+     * Tooltip content - same tokens (`'CellValue'`, `'PercentageValue'`) as
+     * Percent Bar.
+     */
+    ToolTipText?: CellTextOptions;
+    /**
+     * Optional cell-text styling (colour, weight, font, alignment, …) applied
+     * by the Bullet Chart renderer to the optional `CellText` overlay.
+     *
+     * When set, this property "claims" the Font slice for the column: any
+     * Format Column matching this column has its Font properties stripped.
+     * When unset, Format Column Font properties inherit through normally.
+     */
+    Font?: CellFontStyle;
+}
+/**
+ * Visual properties of the foreground bar in a Bullet Chart.
+ */
+export interface BulletChartBarProperties {
+    /**
+     * Colour of the actual (foreground) bar drawn on top of any bands.
+     *
+     * @defaultValue 'var(--ab-color-primary)'
+     */
+    Color?: string;
+    /**
+     * Height of the actual bar in px (the bands sit a few px taller behind it).
+     *
+     * For vertical orientation this is interpreted as the bar's *width*
+     * (i.e. its short axis); the long axis stretches to fit the cell.
+     *
+     * @defaultValue 8
+     */
+    Height?: number;
+}
+/**
+ * Target configuration for a Bullet Chart — the resolved target value(s)
+ * plus the chart-level default marker style.
+ */
+export interface BulletChartTargetProperties {
+    /**
+     * Target value(s) rendered as marker(s) on the bar.
+     *
+     * Each Target can be:
+     *  - `number` - a fixed target value
+     *  - `string` - a column id; the row's value in that column is used as the target
+     *  - `'Col-Avg'` | `'Col-Median'` - computed across visible rows
+     *
+     * Pass an array to render multiple targets (e.g. primary + stretch goal).
+     */
+    Target?: BulletChartTarget | BulletChartTarget[];
+    /**
+     * Visual style of the target marker(s).
+     *
+     * When `Target` is an array, this style applies to all markers; pass a
+     * `Target` object with its own `Marker` property to override per-marker.
+     */
+    Marker?: BarChartMarker;
+}
+/**
+ * A single Bullet Chart target. Either a primitive resolvable value (number /
+ * column id / `Col-Avg` / `Col-Median`) or a richer object that lets a single
+ * target override the default marker styling.
+ */
+export type BulletChartTarget = number | string | 'Col-Avg' | 'Col-Median' | BulletChartTargetDefinition;
+/**
+ * Object form of a Bullet Chart target, used when a single target needs to
+ * override the chart-level marker styling.
+ */
+export interface BulletChartTargetDefinition {
+    /**
+     * Resolvable value: number, column id, `Col-Avg` or `Col-Median`.
+     */
+    Value: number | string | 'Col-Avg' | 'Col-Median';
+    /**
+     * Per-target marker override. Falls back to `BulletChartTargetProperties.Marker`.
+     */
+    Marker?: BarChartMarker;
+    /**
+     * Optional label displayed in the tooltip alongside the marker value.
+     */
+    Label?: string;
+}

package/src/AdaptableState/StyledColumns/Common/BarChartCellText.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Per-value cell-text overlay layout shared by Percent Bar, Bullet Chart
+ * and Range Bar styles. Each token (`CellValue`, `PercentValue`) can be
+ * independently placed on a 3 × 3 grid (Above/Below/Merged × Left/Center/Right).
+ */
+/**
+ * Horizontal alignment for cell text (Cell or Percent) in Percent, Range Bar & Bullet styles (Left, Center, Right)
+ */
+export type BarChartCellTextHorizontalAlignment = 'Left' | 'Center' | 'Right';
+/**
+ * Vertical alignment for cell text value relative to bar/chart (Above, Below, Merged)
+ */
+export type BarChartCellTextVerticalAlignment = 'Above' | 'Below' | 'Merged';
+/**
+ * Placement of cell text value (Cell or Percent) around the bar/chart
+ *
+ * @defaultValue `{ Horizontal: 'Left', Vertical: 'Below' }`
+ */
+export interface BarChartCellTextPlacement {
+    /**
+     * Horizontal alignment within its vertical band.
+     *
+     * @defaultValue 'Left'
+     */
+    Horizontal?: BarChartCellTextHorizontalAlignment;
+    /**
+     * Vertical position relative to the bar/chart.
+     *
+     * @defaultValue 'Below'
+     */
+    Vertical?: BarChartCellTextVerticalAlignment;
+}
+/**
+ * Per-value cell-text layout: each value (Cell Value, Percent Value) can be
+ * independently placed on the 3 × 3 grid (Above/Below/Merged × Left/Center/Right).
+ *
+ * A value is shown only when its key is present. When both values land on the
+ * same horizontal slot at the same vertical position they are concatenated with
+ * a single space (Cell Value first, then Percent Value).
+ */
+export interface BarChartCellTextLayout {
+    /**
+     * Placement of the formatted cell value.
+     */
+    CellValue?: BarChartCellTextPlacement;
+    /**
+     * Placement of the percent value (the cell value's position along the bar's
+     * `[min, max]` scale as a 0–100% reading).
+     */
+    PercentValue?: BarChartCellTextPlacement;
+}
+/**
+ * Cell-text overlay configuration shared by Percent Bar, Range Bar and Bullet Chart.
+ */
+export interface BarChartCellTextProperties {
+    /**
+     * Per-value placement on the 3 × 3 grid around / on the bar/chart.
+     */
+    CellTextLayout?: BarChartCellTextLayout;
+}

package/src/AdaptableState/StyledColumns/Common/BarChartCellText.js

@@ -0,0 +1,6 @@
+/**
+ * Per-value cell-text overlay layout shared by Percent Bar, Bullet Chart
+ * and Range Bar styles. Each token (`CellValue`, `PercentValue`) can be
+ * independently placed on a 3 × 3 grid (Above/Below/Merged × Left/Center/Right).
+ */
+export {};

package/src/AdaptableState/StyledColumns/Common/BarChartMarker.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Marker primitives shared by bar-chart-style Styled Columns —
+ * Bullet Chart target markers and Range Bar value / reference markers.
+ */
+/**
+ * Visual style of a marker drawn on a bar-chart-style track or bar — used by
+ * Bullet Chart target markers and Range Bar value / reference markers.
+ */
+export interface BarChartMarker {
+    /**
+     * Marker shape.
+     */
+    Shape?: 'Line' | 'Triangle' | 'Dot' | 'Diamond';
+    /**
+     * Marker colour. Defaults to the current text colour.
+     *
+     * @defaultValue 'var(--ab-color-text)'
+     */
+    Color?: string;
+    /**
+     * Line thickness (for `Shape: 'Line'`) or shape size in px.
+     */
+    Size?: number;
+}

package/src/AdaptableState/StyledColumns/Common/BarChartMarker.js

@@ -0,0 +1,5 @@
+/**
+ * Marker primitives shared by bar-chart-style Styled Columns —
+ * Bullet Chart target markers and Range Bar value / reference markers.
+ */
+export {};

package/src/AdaptableState/StyledColumns/Common/CellTextOptions.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Cell-text token primitives shared by several Styled Column types
+ * (Percent Bar, Gradient, Bullet Chart, Range Bar, Rating) when configuring
+ * what to display as text overlay / tooltip content.
+ */
+/**
+ * Text optionally to show in a Special Column Style special style: 'CellValue' or 'PercentageValue'
+ */
+export type CellTextOption = 'CellValue' | 'PercentageValue';
+/**
+ * Array of CellTextOption available in Special Column Styles
+ */
+export type CellTextOptions = CellTextOption[];

package/src/AdaptableState/StyledColumns/Common/CellTextOptions.js

@@ -0,0 +1,6 @@
+/**
+ * Cell-text token primitives shared by several Styled Column types
+ * (Percent Bar, Gradient, Bullet Chart, Range Bar, Rating) when configuring
+ * what to display as text overlay / tooltip content.
+ */
+export {};

package/src/AdaptableState/StyledColumns/Common/NumericStyledColumn.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Numeric scale primitives shared by every numeric Styled Column type
+ * (Gradient, Percent Bar, Bullet Chart, Range Bar).
+ *
+ * These types describe how a column's numeric scale is resolved (via
+ * literal numbers, dynamic column-wide aggregates, or comparison against
+ * another column) and how that scale is segmented into coloured ranges.
+ */
+/**
+ * Symbolic range endpoints that resolve to a value computed across column's visible rows (rather than hard-coded number): Col-Min, Col-Max, Col-Avg, Col-Median
+ */
+export type DynamicRangeEndpoint = 'Col-Min' | 'Col-Max' | 'Col-Avg' | 'Col-Median';
+/**
+ * Whether the Range is Number or Percent based
+ */
+export type RangeValueType = 'Number' | 'Percentage';
+/**
+ * Defines Colours to show in Gradient, Percent Bar and Bullet Chart Styles
+ */
+export interface CellColorRange {
+    /**
+     * Start of Range, can be literal number or DynamicRangeEndpoint
+     */
+    Min: number | DynamicRangeEndpoint;
+    /**
+     * End of Range, can be literal number or DynamicRangeEndpoint
+     */
+    Max: number | DynamicRangeEndpoint;
+    /**
+     * Cell colour to use for values that fall inside Range
+     */
+    Color: string;
+    /**
+     * Reverses the alpha ramp **within this range only** — values at the *low*
+     * end render saturated, values at the *high* end render faint.
+     *
+     * Useful as a Gradient Style option when the natural reading is
+     * "lower-is-darker" (e.g. lower trade IDs are older / more important, so
+     * deserve more visual emphasis than newer ones).
+     *
+     * Only honoured by Gradient Style.
+     */
+    ReverseGradient?: boolean;
+}
+/**
+ * Enables a Percent Bar or Gradient Style to use another column in its calculations
+ */
+export interface ColumnComparison {
+    /**
+     * Start value - either numeric value or Column ID
+     */
+    MinValue: number | string;
+    /**
+     * End value - either numeric value or Column ID
+     */
+    MaxValue: number | string;
+    /**
+     * Colour to use for the Comparison
+     */
+    Color: string;
+}
+/**
+ * Base type for Numeric Styled Columns (i.e. Gradient and Percent Bar)
+ */
+export interface NumericStyledColumn {
+    /**
+     * Ranges (e.g. to create traffic light effect)
+     */
+    CellRanges?: CellColorRange[];
+    /**
+     * Compares Cell values to another Column
+     */
+    ColumnComparison?: ColumnComparison;
+    /**
+     * Used with Ranges; can be Number (any number or Col-Min/Col-Max) or 'Percentage' (values 0-100)
+     * @defaultValue Number
+     */
+    RangeValueType?: RangeValueType;
+}

package/src/AdaptableState/StyledColumns/Common/NumericStyledColumn.js

@@ -0,0 +1,9 @@
+/**
+ * Numeric scale primitives shared by every numeric Styled Column type
+ * (Gradient, Percent Bar, Bullet Chart, Range Bar).
+ *
+ * These types describe how a column's numeric scale is resolved (via
+ * literal numbers, dynamic column-wide aggregates, or comparison against
+ * another column) and how that scale is segmented into coloured ranges.
+ */
+export {};

package/src/AdaptableState/StyledColumns/GradientStyle.d.ts

@@ -0,0 +1,48 @@
+import { CellFontStyle } from '../Common/AdaptableStyle';
+import { CellTextOptions } from './Common/CellTextOptions';
+import { NumericStyledColumn } from './Common/NumericStyledColumn';
+/**
+ * Colours for a zero-centred diverging gradient: negative and positive bands that meet at `0`
+ */
+export interface GradientZeroCentredColors {
+    /**
+     * Colour applied to negative cell values (`Col-Min`…`0`)
+     */
+    NegativeColor: string;
+    /**
+     * Colour applied to positive cell values (`0`…`Col-Max`)
+     */
+    PositiveColor: string;
+}
+/**
+ * Used to display Gradient Styles
+ */
+export interface GradientStyle extends NumericStyledColumn {
+    /**
+     * Zero-centred diverging gradient (`Col-Min`…`0` and `0`…`Col-Max`
+     */
+    ZeroCentred?: GradientZeroCentredColors;
+    /**
+     * Alpha (0–1) at **low** end of the matched range’s scale
+     *
+     * @defaultValue 0.15 (faint at range min)
+     */
+    MinAlpha?: number;
+    /**
+     * Alpha (0–1) at  **high** end of the matched range’s scale
+     * @defaultValue 1 (fully opaque at range max)
+     */
+    MaxAlpha?: number;
+    /**
+     * When true, sets cell `color` from tinted background so text stays readable
+     */
+    AutoContrastText?: boolean;
+    /**
+     * Optional AG Grid tooltip content: cell value and/or position along the range scale (%)
+     */
+    ToolTipText?: CellTextOptions;
+    /**
+     * Optional cell-text styling applied by Gradient renderer **on top of** gradient background tint
+     */
+    Font?: CellFontStyle;
+}

package/src/AdaptableState/StyledColumns/GradientStyle.js

@@ -0,0 +1 @@
+export {};