udp-stencil-component-library 26.3.0-beta.2 → 26.3.0-beta.21

package/dist/collection/components/charts/charts-theme.js

@@ -0,0 +1,380 @@
+import { getCurrentThemeMode } from "../../theme";
+const cssVar = (styles, name) => {
+    const v = styles.getPropertyValue(name).trim();
+    return v.length > 0 ? v : undefined;
+};
+const WHITE = [255, 255, 255];
+const BLACK = [0, 0, 0];
+const parseColor = (c) => {
+    const s = c.trim();
+    if (s.startsWith('#')) {
+        let hex = s.slice(1);
+        if (hex.length === 3)
+            hex = hex.split('').map((x) => x + x).join('');
+        if (hex.length < 6)
+            return null;
+        const r = parseInt(hex.slice(0, 2), 16);
+        const g = parseInt(hex.slice(2, 4), 16);
+        const b = parseInt(hex.slice(4, 6), 16);
+        return [r, g, b].some(Number.isNaN) ? null : [r, g, b];
+    }
+    const m = s.match(/rgba?\(([^)]+)\)/);
+    if (m) {
+        const parts = m[1].split(/[,\s/]+/).map((p) => parseFloat(p));
+        if (parts.length >= 3 && parts.slice(0, 3).every((n) => !Number.isNaN(n))) {
+            return [parts[0], parts[1], parts[2]];
+        }
+    }
+    return null;
+};
+const toHex = (rgb) => '#' +
+    rgb
+        .map((n) => Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, '0'))
+        .join('');
+const mix = (color, target, amount) => {
+    const rgb = parseColor(color);
+    if (!rgb)
+        return color; // leave un-parseable values (e.g. CSS funcs) untouched
+    return toHex(rgb.map((c, i) => c + (target[i] - c) * amount));
+};
+const tint = (color, amount) => mix(color, WHITE, amount);
+const shade = (color, amount) => mix(color, BLACK, amount);
+// HSL lightness adjustment — unlike mixing toward white/black, this keeps the
+// hue and saturation, so tonal variants stay colourful instead of greying out.
+const rgbToHsl = ([r, g, b]) => {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d === 0)
+        return [0, 0, l];
+    const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    let h;
+    if (max === r)
+        h = (g - b) / d + (g < b ? 6 : 0);
+    else if (max === g)
+        h = (b - r) / d + 2;
+    else
+        h = (r - g) / d + 4;
+    return [h / 6, s, l];
+};
+const hue2rgb = (p, q, t) => {
+    if (t < 0)
+        t += 1;
+    if (t > 1)
+        t -= 1;
+    if (t < 1 / 6)
+        return p + (q - p) * 6 * t;
+    if (t < 1 / 2)
+        return q;
+    if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+};
+const hslToRgb = ([h, s, l]) => {
+    if (s === 0)
+        return [l * 255, l * 255, l * 255];
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    return [hue2rgb(p, q, h + 1 / 3) * 255, hue2rgb(p, q, h) * 255, hue2rgb(p, q, h - 1 / 3) * 255];
+};
+const clamp01 = (n) => Math.max(0, Math.min(1, n));
+/** Shift a colour's lightness by `delta` (keeps hue + saturation). */
+const shiftLightness = (color, delta) => {
+    const rgb = parseColor(color);
+    if (!rgb)
+        return color;
+    const [h, s, l] = rgbToHsl(rgb);
+    return toHex(hslToRgb([h, s, clamp01(l + delta)]));
+};
+// Industry-standard muted categorical palette (Tableau 10) — balanced, mid-tone,
+// distinguishable hues. The brand colour is deliberately NOT in here; it's
+// reserved for single-series / accent use (see `applySeriesColors`).
+const CATEGORICAL = [
+    '#4e79a7', '#f28e2b', '#e15759', '#76b7b2', '#59a14f',
+    '#edc948', '#b07aa1', '#ff9da7', '#9c755f', '#bab0ac',
+];
+// Lightness SHIFT applied to the brand colour when it backs a single-series
+// chart, per appearance (relative HSL — respects the brand's own base tone, so
+// it works for light or dark brands). `default` = the exact brand colour;
+// `soft` lighter; `bold` deeper.
+const BRAND_SINGLE_SHIFT = {
+    default: 0,
+    soft: 0.2,
+    bold: -0.08,
+};
+// ---- label-hashed colours (the `colorful` appearance) ---------------------
+// The 30 Fluent "avatar" hues, in @fluentui/web-components AvatarNamedColor
+// order, so a label hashes to the same hue an avatar would use for the same
+// name. Each hue has two tiers (matching the avatar): `Background2` is the
+// light bubble fill, `Foreground2` is the saturated text/edge colour.
+const CHART_HUES = [
+    'DarkRed', 'Cranberry', 'Red', 'Pumpkin', 'Peach', 'Marigold', 'Gold', 'Brass', 'Brown', 'Forest',
+    'Seafoam', 'DarkGreen', 'LightTeal', 'Teal', 'Steel', 'Blue', 'RoyalBlue', 'Cornflower', 'Navy', 'Lavender',
+    'Purple', 'Grape', 'Lilac', 'Pink', 'Magenta', 'Plum', 'Beige', 'Mink', 'Platinum', 'Anchor',
+];
+/**
+ * Hash a string to a stable integer. Copied verbatim from the Fluent avatar
+ * (`@fluentui/web-components`) so the same label maps to the same hue here as
+ * it would on an avatar.
+ */
+export const getChartColorHash = (str) => {
+    let hashCode = 0;
+    for (let len = str.length - 1; len >= 0; len--) {
+        const ch = str.charCodeAt(len);
+        const shift = len % 8;
+        hashCode ^= (ch << shift) + (ch >> (8 - shift));
+    }
+    return hashCode;
+};
+// Resolve a hue index to a concrete colour. `fill` uses the light `Background2`
+// tier (the avatar bubble colour); `stroke` uses the saturated `Foreground2`
+// tier (the avatar text colour). Falls back to evenly-spaced HSL — light for
+// fills, mid for strokes — when the theme tokens aren't present (e.g. SSR).
+const resolveHue = (index, tier, styles) => {
+    const token = `colorPalette${CHART_HUES[index]}${tier === 'fill' ? 'Background2' : 'Foreground2'}`;
+    const resolved = styles ? cssVar(styles, `--${token}`) : undefined;
+    if (resolved)
+        return resolved;
+    const hue = Math.round(index * (360 / CHART_HUES.length));
+    return tier === 'fill' ? `hsl(${hue}, 70%, 88%)` : `hsl(${hue}, 60%, 42%)`;
+};
+/**
+ * Deterministic brand colour for a data label. The same `label` always returns
+ * the same hue, so a value (e.g. a status) reads consistently across every
+ * chart that plots it — and matches the Fluent avatar colour for that name.
+ * `tier` picks the light bubble fill (`'fill'`) or the saturated edge/line
+ * colour (`'stroke'`).
+ */
+export const chartColorForLabel = (label, tier = 'fill', styles) => {
+    const n = CHART_HUES.length;
+    const index = ((getChartColorHash(label) % n) + n) % n;
+    return resolveHue(index, tier, styles);
+};
+const APPEARANCE = {
+    default: { areaFillOpacity: 0.18, strokeWidth: 2, showNumberAxisLine: false, gridlineTint: 0, paletteShift: 0 },
+    soft: { areaFillOpacity: 0.3, strokeWidth: 2, showNumberAxisLine: false, gridlineTint: 0.45, paletteShift: 0.16 },
+    bold: { areaFillOpacity: 0.35, strokeWidth: 3, showNumberAxisLine: true, gridlineTint: 0, paletteShift: -0.12 },
+    mono: { areaFillOpacity: 0.22, strokeWidth: 2, showNumberAxisLine: false, gridlineTint: 0, paletteShift: 0 },
+    colorful: { areaFillOpacity: 0.55, strokeWidth: 2, showNumberAxisLine: false, gridlineTint: 0, paletteShift: 0 },
+};
+const SHAPE = {
+    square: { cornerRadius: 0, interpolation: 'linear' },
+    rounded: { cornerRadius: 4, interpolation: 'smooth' },
+};
+/**
+ * Read every UDP brand token off `rootEl` and return an `AgChartTheme`
+ * suitable for passing as the top-level `theme` option to
+ * `AgCharts.create({...})`. Returns the bare base theme name when no
+ * element is provided (SSR path).
+ */
+export const buildUdpChartTheme = (rootEl, options = {}) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    // Default to the app's current theme mode — the same source of truth the
+    // ag-grid bridge uses (`theme-manager`). The base theme drives `textColor`,
+    // which un-overridden text (donut/pie inner & sector labels, callout labels,
+    // tooltips) inherits — so without this, that text stays light-theme dark and
+    // never flips in dark mode.
+    const mode = (_a = options.mode) !== null && _a !== void 0 ? _a : getCurrentThemeMode();
+    const baseTheme = mode === 'dark' ? 'ag-default-dark' : 'ag-default';
+    if (!rootEl || typeof window === 'undefined')
+        return baseTheme;
+    const appearance = (_b = options.appearance) !== null && _b !== void 0 ? _b : 'default';
+    const shape = (_c = options.shape) !== null && _c !== void 0 ? _c : 'square';
+    const flush = ((_d = options.chrome) !== null && _d !== void 0 ? _d : 'full') === 'flush';
+    const aCfg = APPEARANCE[appearance];
+    const sCfg = SHAPE[shape];
+    const styles = getComputedStyle(rootEl);
+    const brand = (_e = cssVar(styles, '--colorBrandBackground')) !== null && _e !== void 0 ? _e : '#0f6cbd';
+    // A single-hue ramp built from the brand colour: light tints → brand →
+    // dark shades. Series differ by lightness rather than hue.
+    const monoRamp = [
+        tint(brand, 0.5),
+        tint(brand, 0.3),
+        brand,
+        shade(brand, 0.15),
+        shade(brand, 0.3),
+        shade(brand, 0.45),
+        tint(brand, 0.65),
+        shade(brand, 0.6),
+    ];
+    let fills;
+    let strokes;
+    switch (appearance) {
+        case 'mono':
+            fills = monoRamp;
+            strokes = monoRamp;
+            break;
+        case 'colorful': {
+            // The full 30-hue Fluent ramp: light bubble fills + saturated strokes,
+            // mirroring the avatar. `applySeriesColors` layers label-stable per-series
+            // colours on top so the same label gets the same hue across charts.
+            fills = CHART_HUES.map((_, i) => resolveHue(i, 'fill', styles));
+            strokes = CHART_HUES.map((_, i) => resolveHue(i, 'stroke', styles));
+            break;
+        }
+        default:
+            // `default` / `soft` / `bold`: the muted categorical palette, lightness-
+            // shifted per appearance (HSL, so hue + saturation are preserved — no
+            // grey). Single-series charts swap in the brand via `applySeriesColors`.
+            fills = CATEGORICAL.map((c) => shiftLightness(c, aCfg.paletteShift));
+            strokes = fills;
+    }
+    const palette = { fills, strokes };
+    const foreground = (_f = cssVar(styles, '--colorNeutralForeground1')) !== null && _f !== void 0 ? _f : '#242424';
+    const foreground2 = (_g = cssVar(styles, '--colorNeutralForeground2')) !== null && _g !== void 0 ? _g : '#424242';
+    const foreground3 = (_h = cssVar(styles, '--colorNeutralForeground3')) !== null && _h !== void 0 ? _h : '#616161';
+    const stroke = (_j = cssVar(styles, '--colorNeutralStroke2')) !== null && _j !== void 0 ? _j : '#e0e0e0';
+    const strokeSubtle = (_k = cssVar(styles, '--colorNeutralStroke3')) !== null && _k !== void 0 ? _k : '#f0f0f0';
+    const fontFamily = (_l = cssVar(styles, '--fontFamilyBase')) !== null && _l !== void 0 ? _l : 'Inter, sans-serif';
+    // `bold` darkens chrome; `soft` lightens gridlines; others keep the default.
+    const gridStroke = aCfg.gridlineTint > 0 ? tint(strokeSubtle, aCfg.gridlineTint) : strokeSubtle;
+    const axisLabelColor = appearance === 'bold' ? foreground2 : foreground3;
+    return {
+        baseTheme,
+        palette,
+        params: {
+            // Top-level tokens recognised by every series type.
+            foregroundColor: foreground,
+            backgroundColor: 'transparent',
+            accentColor: brand,
+            fontFamily,
+            fontSize: 12,
+        },
+        overrides: {
+            common: Object.assign(Object.assign({ background: { visible: false } }, (flush ? { padding: { top: 0, right: 0, bottom: 0, left: 0 } } : {})), {
+                // Axes default to neutral chrome so charts read calm against any
+                // surface; `flush` hides axis chrome entirely for the sparkline look.
+                // Per-chart overrides can still tweak.
+                axes: {
+                    number: {
+                        line: { enabled: !flush && aCfg.showNumberAxisLine, stroke },
+                        gridLine: flush
+                            ? { enabled: false }
+                            : { style: [{ stroke: gridStroke, lineDash: [2, 3] }] },
+                        tick: { enabled: false },
+                        label: { enabled: !flush, color: axisLabelColor, fontSize: 11 },
+                        title: { color: foreground2, fontSize: 12, fontWeight: 'normal' },
+                    },
+                    category: {
+                        line: { enabled: !flush, stroke },
+                        gridLine: { enabled: false },
+                        tick: { enabled: !flush, stroke },
+                        label: { enabled: !flush, color: axisLabelColor, fontSize: 11 },
+                        title: { color: foreground2, fontSize: 12, fontWeight: 'normal' },
+                    },
+                    time: {
+                        line: { enabled: !flush, stroke },
+                        gridLine: flush
+                            ? { enabled: false }
+                            : { style: [{ stroke: gridStroke, lineDash: [2, 3] }] },
+                        tick: { enabled: !flush, stroke },
+                        label: { enabled: !flush, color: axisLabelColor, fontSize: 11 },
+                        title: { color: foreground2, fontSize: 12, fontWeight: 'normal' },
+                    },
+                }, legend: {
+                    enabled: !flush,
+                    item: {
+                        label: { color: foreground2, fontSize: 12 },
+                    },
+                }
+            }),
+            bar: {
+                series: {
+                    cornerRadius: sCfg.cornerRadius,
+                },
+            },
+            area: {
+                series: {
+                    // Areas read clean when the fill is the brand color at low opacity
+                    // with a stroke at full strength.
+                    fillOpacity: aCfg.areaFillOpacity,
+                    strokeWidth: aCfg.strokeWidth,
+                    interpolation: { type: sCfg.interpolation },
+                },
+            },
+            line: {
+                series: {
+                    strokeWidth: aCfg.strokeWidth,
+                    marker: { enabled: false },
+                    interpolation: { type: sCfg.interpolation },
+                },
+            },
+            pie: {
+                series: {
+                    cornerRadius: Math.min(sCfg.cornerRadius, 12),
+                    sectorSpacing: shape === 'square' ? 0 : 2,
+                },
+            },
+            donut: {
+                series: {
+                    cornerRadius: Math.min(sCfg.cornerRadius, 12),
+                    sectorSpacing: shape === 'square' ? 0 : 2,
+                },
+            },
+        },
+    };
+};
+export const applySeriesColors = (options, rootEl, appearance) => {
+    var _a;
+    if (!Array.isArray(options.series))
+        return options;
+    const styles = rootEl && typeof window !== 'undefined' ? getComputedStyle(rootEl) : undefined;
+    // --- colorful: per-label hashed colours (light fill + saturated stroke) ---
+    if (appearance === 'colorful') {
+        const fillFor = (label) => chartColorForLabel(label, 'fill', styles);
+        const strokeFor = (label) => chartColorForLabel(label, 'stroke', styles);
+        const isSingle = options.series.length === 1;
+        const series = options.series.map((s) => {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!s || typeof s !== 'object')
+                return s;
+            // Polar (pie / donut): colour each sector by its label, in data order.
+            if (s.type === 'pie' || s.type === 'donut') {
+                if (s.fills != null)
+                    return s;
+                const data = (_b = (_a = s.data) !== null && _a !== void 0 ? _a : options.data) !== null && _b !== void 0 ? _b : [];
+                const key = (_e = (_d = (_c = s.legendItemKey) !== null && _c !== void 0 ? _c : s.calloutLabelKey) !== null && _d !== void 0 ? _d : s.sectorLabelKey) !== null && _e !== void 0 ? _e : s.angleKey;
+                if (!key || !Array.isArray(data))
+                    return s;
+                const labels = data.map((d) => { var _a; return String((_a = d === null || d === void 0 ? void 0 : d[key]) !== null && _a !== void 0 ? _a : ''); });
+                return Object.assign(Object.assign({}, s), { fills: labels.map(fillFor) });
+            }
+            // A single bar series with a category axis: colour each *bar* by its
+            // category label, so a status bar chart matches a status donut.
+            if (isSingle && s.type === 'bar' && s.xKey && s.itemStyler == null && s.fill == null) {
+                const xKey = s.xKey;
+                return Object.assign(Object.assign({}, s), { itemStyler: (p) => {
+                        var _a, _b;
+                        const label = String((_b = (_a = p === null || p === void 0 ? void 0 : p.datum) === null || _a === void 0 ? void 0 : _a[xKey]) !== null && _b !== void 0 ? _b : '');
+                        return { fill: fillFor(label), stroke: strokeFor(label) };
+                    } });
+            }
+            // Otherwise: one colour per series, keyed on its display label.
+            if (s.fill != null)
+                return s;
+            const label = (_g = (_f = s.yName) !== null && _f !== void 0 ? _f : s.yKey) !== null && _g !== void 0 ? _g : s.title;
+            if (label == null)
+                return s;
+            return Object.assign(Object.assign({}, s), { fill: fillFor(String(label)), stroke: strokeFor(String(label)) });
+        });
+        return Object.assign(Object.assign({}, options), { series });
+    }
+    // --- default / soft / bold: a single (cartesian) series uses the brand ---
+    // Enterprise convention — "the one metric" reads in the brand colour, while
+    // multi-category charts use the muted categorical palette. Pie/donut are
+    // inherently multi-category, so they keep the palette. Explicit fills win.
+    const brandShift = appearance ? BRAND_SINGLE_SHIFT[appearance] : undefined;
+    if (brandShift != null && options.series.length === 1) {
+        const s = options.series[0];
+        if (s && typeof s === 'object' && s.type !== 'pie' && s.type !== 'donut' && s.fill == null) {
+            const brand = (_a = (styles ? cssVar(styles, '--colorBrandBackground') : undefined)) !== null && _a !== void 0 ? _a : '#0f6cbd';
+            const c = brandShift === 0 ? brand : shiftLightness(brand, brandShift);
+            return Object.assign(Object.assign({}, options), { series: [Object.assign(Object.assign({}, s), { fill: c, stroke: c })] });
+        }
+    }
+    return options;
+};

package/dist/collection/components/charts/udp-ag-area-chart/udp-ag-area-chart.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
+.chart-mount {
+  position: absolute;
+  inset: 0;
+}