@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.110 → 2.0.0-next.112

package/src/automation/indicator-generator/indicator-generator.stories.ts

@@ -0,0 +1,103 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcIndicatorGenerator,
+  IndicatorGeneratorVariant,
+  IndicatorGeneratorValue,
+} from './indicator-generator.js';
+import './indicator-generator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Generator',
+  component: 'obc-indicator-generator',
+  tags: ['autodocs', '6.0'],
+  args: {
+    variant: IndicatorGeneratorVariant.button,
+    value: IndicatorGeneratorValue.off,
+    level: 65,
+    secondaryLevel: 75,
+  },
+  argTypes: {
+    variant: {
+      control: 'radio',
+      options: Object.values(IndicatorGeneratorVariant),
+    },
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorGeneratorValue),
+    },
+    level: {control: {type: 'range', min: 0, max: 100}},
+    secondaryLevel: {control: {type: 'range', min: 0, max: 100}},
+  },
+  render: (args) => html`
+    <obc-indicator-generator
+      .variant=${args.variant}
+      .value=${args.value}
+      .level=${args.level}
+      .secondaryLevel=${args.secondaryLevel}
+    ></obc-indicator-generator>
+  `,
+} satisfies Meta<Partial<ObcIndicatorGenerator>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorGenerator>>;
+
+export const Default: Story = {};
+
+export const ButtonRegular: Story = {
+  args: {value: IndicatorGeneratorValue.regular},
+};
+
+export const ButtonEnhanced: Story = {
+  args: {value: IndicatorGeneratorValue.enhanced},
+};
+
+export const ButtonCategorical: Story = {
+  args: {value: IndicatorGeneratorValue.categorical},
+};
+
+export const BarRegular: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.bar,
+    value: IndicatorGeneratorValue.regular,
+  },
+};
+
+export const BarEnhanced: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.bar,
+    value: IndicatorGeneratorValue.enhanced,
+  },
+};
+
+export const BarCategorical: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.bar,
+    value: IndicatorGeneratorValue.categorical,
+  },
+};
+
+export const ButtonFilled: Story = {
+  args: {value: IndicatorGeneratorValue.filled},
+};
+
+export const BarFilled: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.bar,
+    value: IndicatorGeneratorValue.filled,
+  },
+};
+
+export const DoubleBar: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.doubleBar,
+    value: IndicatorGeneratorValue.regular,
+  },
+};
+
+export const DoubleBarFilled: Story = {
+  args: {
+    variant: IndicatorGeneratorVariant.doubleBar,
+    value: IndicatorGeneratorValue.filled,
+  },
+};

package/src/automation/indicator-generator/indicator-generator.ts

@@ -0,0 +1,184 @@
+import {LitElement, html, svg, unsafeCSS, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-generator.css?inline';
+import {customElement} from '../../decorator.js';
+import {
+  BUTTON_SILHOUETTE_RADIUS,
+  DISC_RADIUS,
+  FILLED_DISC_RADIUS,
+  BAR_SILHOUETTE_RADIUS,
+  BAR_SILHOUETTE_STROKE_WIDTH,
+  BAR_OUTLINE_RADIUS,
+  DOUBLE_BAR_OUTLINE_RADIUS,
+  OUTLINE_STROKE_WIDTH,
+  BAR_TRACK_RADIUS,
+  BAR_TRACK_STROKE_WIDTH,
+  DOUBLE_BAR_OUTER_RADIUS,
+  DOUBLE_BAR_OUTER_STROKE_WIDTH,
+  DOUBLE_BAR_INNER_RADIUS,
+  DOUBLE_BAR_INNER_STROKE_WIDTH,
+  arcPath,
+  progressSweep,
+} from './indicator-generator-geometry.js';
+
+export enum IndicatorGeneratorVariant {
+  button = 'button',
+  bar = 'bar',
+  doubleBar = 'double-bar',
+}
+
+export enum IndicatorGeneratorValue {
+  off = 'off',
+  regular = 'regular',
+  filled = 'filled',
+  enhanced = 'enhanced',
+  categorical = 'categorical',
+}
+
+const ICON_G_PATH =
+  'M6.1686 5.216H10.6326V11.088C10.0353 11.2907 9.41127 11.4507 8.7606 11.568C8.1206 11.6853 7.38993 11.744 6.5686 11.744C5.43793 11.744 4.4726 11.52 3.6726 11.072C2.88327 10.6133 2.2806 9.94667 1.8646 9.072C1.4486 8.19733 1.2406 7.12533 1.2406 5.856C1.2406 4.66133 1.46993 3.62667 1.9286 2.752C2.39793 1.87733 3.07527 1.2 3.9606 0.72C4.84593 0.24 5.9286 0 7.2086 0C7.8166 0 8.41393 0.0640001 9.0006 0.192C9.58727 0.32 10.1206 0.490667 10.6006 0.704L9.8326 2.56C9.46993 2.37867 9.05927 2.22933 8.6006 2.112C8.1526 1.99467 7.68327 1.936 7.1926 1.936C6.4566 1.936 5.82193 2.10133 5.2886 2.432C4.76593 2.752 4.35527 3.21067 4.0566 3.808C3.7686 4.39467 3.6246 5.09333 3.6246 5.904C3.6246 6.66133 3.73127 7.33867 3.9446 7.936C4.15793 8.52267 4.49393 8.98133 4.9526 9.312C5.41127 9.64267 6.01393 9.808 6.7606 9.808C7.00593 9.808 7.21927 9.80267 7.4006 9.792C7.5926 9.77067 7.76327 9.74933 7.9126 9.728C8.0726 9.696 8.22727 9.66933 8.3766 9.648V7.152H6.1686V5.216Z';
+
+const ICON_TILDE_PATH =
+  'M4.20117 14.0059C5.30264 14.0679 6.22793 14.5801 7.02344 15.2207C7.64824 15.7239 8.18172 15.9676 8.7041 15.9971C9.21748 16.026 9.88939 15.8574 10.8096 15.1904L11.6191 14.6035L12.793 16.2227L11.9834 16.8096C10.8203 17.6526 9.7024 18.0567 8.5918 17.9941C7.49033 17.9321 6.56504 17.4199 5.76953 16.7793C5.14473 16.2761 4.61125 16.0324 4.08887 16.0029C3.57549 15.974 2.90358 16.1426 1.9834 16.8096L1.17383 17.3965L0 15.7773L0.80957 15.1904C1.97263 14.3473 3.09057 13.9433 4.20117 14.0059Z';
+
+/**
+ * Compact generator status indicator (48×48; 56×56 as double-bar).
+ *
+ * ## Features / Variants
+ * - `variant`: `button` (plain disc), `bar` (disc with a circular progress
+ *   ring) or `double-bar` (disc with two concentric progress rings)
+ * - `value`: visual scheme — `off`, `regular`, `filled`, `enhanced` or
+ *   `categorical`; `off` hides the progress rings
+ * - `level`: 0–100 (%), sweep of the (outer) progress ring, clockwise from
+ *   12 o'clock
+ * - `secondaryLevel`: 0–100 (%), sweep of the inner ring (double-bar only)
+ *
+ * ## Usage Guidelines
+ * Use as an at-a-glance generator load indicator in dashboards and lists.
+ * For schematic (P&ID) placement with button behavior, use the electric
+ * generator automation devices instead.
+ *
+ * ## Slots
+ * | Slot   | Condition | Purpose                                          |
+ * | ------ | --------- | ------------------------------------------------ |
+ * | `icon` | always    | Center icon, defaults to the generator G~ glyph  |
+ *
+ * @slot icon - Center icon, defaults to the generator G~ glyph
+ */
+@customElement('obc-indicator-generator')
+export class ObcIndicatorGenerator extends LitElement {
+  @property({type: String, reflect: true}) variant: IndicatorGeneratorVariant =
+    IndicatorGeneratorVariant.button;
+  @property({type: String, reflect: true}) value: IndicatorGeneratorValue =
+    IndicatorGeneratorValue.off;
+  /** Outer progress ring sweep, 0-100 (%) */
+  @property({type: Number}) level = 0;
+  /** Inner progress ring sweep, 0-100 (%), double-bar only */
+  @property({type: Number}) secondaryLevel = 0;
+
+  private get center(): number {
+    return this.variant === IndicatorGeneratorVariant.doubleBar ? 28 : 24;
+  }
+
+  private get discRadius(): number {
+    if (this.value === IndicatorGeneratorValue.filled) {
+      return FILLED_DISC_RADIUS;
+    }
+    if (
+      this.variant === IndicatorGeneratorVariant.button ||
+      this.value === IndicatorGeneratorValue.off ||
+      this.value === IndicatorGeneratorValue.regular
+    ) {
+      return DISC_RADIUS;
+    }
+    return FILLED_DISC_RADIUS;
+  }
+
+  private get showOutline(): boolean {
+    if (this.variant === IndicatorGeneratorVariant.bar) {
+      return [
+        IndicatorGeneratorValue.filled,
+        IndicatorGeneratorValue.enhanced,
+        IndicatorGeneratorValue.categorical,
+      ].includes(this.value);
+    }
+    if (this.variant === IndicatorGeneratorVariant.doubleBar) {
+      return this.value !== IndicatorGeneratorValue.off;
+    }
+    return false;
+  }
+
+  private renderRing(radius: number, strokeWidth: number, level: number) {
+    const c = this.center;
+    const sweep = progressSweep(level);
+    return svg`
+      <circle class="ring-track" cx=${c} cy=${c} r=${radius} stroke-width=${strokeWidth} />
+      ${
+        sweep >= 360
+          ? svg`<circle class="ring-progress" cx=${c} cy=${c} r=${radius} stroke-width=${strokeWidth} />`
+          : sweep > 0
+            ? svg`<path class="ring-progress" d=${arcPath(c, c, radius, 0, sweep)} stroke-width=${strokeWidth} />`
+            : nothing
+      }
+    `;
+  }
+
+  override render() {
+    const c = this.center;
+    const doubleBar = this.variant === IndicatorGeneratorVariant.doubleBar;
+    const bar = this.variant === IndicatorGeneratorVariant.bar;
+    const showRings = this.value !== IndicatorGeneratorValue.off;
+    const size = doubleBar ? 56 : 48;
+    return html`
+      <svg viewBox="0 0 ${size} ${size}" aria-hidden="true">
+        ${this.variant === IndicatorGeneratorVariant.button
+          ? svg`<circle class="silhouette" cx=${c} cy=${c} r=${BUTTON_SILHOUETTE_RADIUS} />`
+          : nothing}
+        ${bar
+          ? svg`<circle class="silhouette-ring" cx=${c} cy=${c} r=${BAR_SILHOUETTE_RADIUS} stroke-width=${BAR_SILHOUETTE_STROKE_WIDTH} />`
+          : nothing}
+        <circle class="disc" cx=${c} cy=${c} r=${this.discRadius} />
+        ${this.showOutline
+          ? svg`<circle
+              class="outline"
+              cx=${c}
+              cy=${c}
+              r=${doubleBar ? DOUBLE_BAR_OUTLINE_RADIUS : BAR_OUTLINE_RADIUS}
+              stroke-width=${OUTLINE_STROKE_WIDTH}
+            />`
+          : nothing}
+        ${bar && showRings
+          ? this.renderRing(
+              BAR_TRACK_RADIUS,
+              BAR_TRACK_STROKE_WIDTH,
+              this.level
+            )
+          : nothing}
+        ${doubleBar && showRings
+          ? svg`
+              ${this.renderRing(DOUBLE_BAR_OUTER_RADIUS, DOUBLE_BAR_OUTER_STROKE_WIDTH, this.level)}
+              ${this.renderRing(DOUBLE_BAR_INNER_RADIUS, DOUBLE_BAR_INNER_STROKE_WIDTH, this.secondaryLevel)}
+            `
+          : nothing}
+      </svg>
+      <div class="icon-wrapper">
+        <slot name="icon">
+          <svg class="default-icon" viewBox="0 0 24 24">
+            <g transform="translate(5.604 3)">
+              <path d=${ICON_G_PATH} />
+              <path d=${ICON_TILDE_PATH} />
+            </g>
+          </svg>
+        </slot>
+      </div>
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-generator': ObcIndicatorGenerator;
+  }
+}

package/src/automation/indicator-shared/linear-indicator.spec.ts

@@ -0,0 +1,90 @@
+import {describe, it, expect} from 'vitest';
+import {
+  clampPercent,
+  expandRect,
+  fillHeight,
+  trendPolylinePoints,
+  roundedLeftRectPath,
+} from './linear-indicator.js';
+
+describe('clampPercent', () => {
+  it('clamps below 0 to 0', () => {
+    expect(clampPercent(-5)).toBe(0);
+  });
+
+  it('clamps above 100 to 100', () => {
+    expect(clampPercent(140)).toBe(100);
+  });
+
+  it('maps NaN to 0', () => {
+    expect(clampPercent(Number.NaN)).toBe(0);
+  });
+
+  it('passes through in-range values', () => {
+    expect(clampPercent(39.29)).toBeCloseTo(39.29);
+  });
+});
+
+describe('expandRect', () => {
+  it('grows the rect by the amount on every side', () => {
+    expect(expandRect({x: 9, y: 11, width: 30, height: 26}, 1)).toEqual({
+      x: 8,
+      y: 10,
+      width: 32,
+      height: 28,
+    });
+  });
+});
+
+describe('fillHeight', () => {
+  const rect = {x: 8, y: 10, width: 32, height: 28};
+
+  it('is 0 at level 0', () => {
+    expect(fillHeight(rect, 0)).toBe(0);
+  });
+
+  it('is full height at 100', () => {
+    expect(fillHeight(rect, 100)).toBe(28);
+  });
+
+  it('scales linearly', () => {
+    expect(fillHeight(rect, 50)).toBeCloseTo(14);
+  });
+});
+
+describe('trendPolylinePoints', () => {
+  const rect = {x: 10, y: 8, width: 28, height: 32};
+
+  it('returns empty string for fewer than 2 points', () => {
+    expect(trendPolylinePoints(rect, [], 23)).toBe('');
+    expect(trendPolylinePoints(rect, [50], 23)).toBe('');
+  });
+
+  it('spans graphWidth and maps values top-down', () => {
+    const points = trendPolylinePoints(rect, [0, 100], 23).split(' ');
+    expect(points[0]).toBe('10,40');
+    expect(points[1]).toBe('33,8');
+  });
+
+  it('clamps out-of-range data', () => {
+    const points = trendPolylinePoints(rect, [-20, 150], 23).split(' ');
+    expect(points[0]).toBe('10,40');
+    expect(points[1]).toBe('33,8');
+  });
+});
+
+describe('roundedLeftRectPath', () => {
+  const rect = {x: 10, y: 8, width: 28, height: 32};
+
+  it('rounds only the two left corners', () => {
+    const d = roundedLeftRectPath(rect, 23, 2);
+    expect(d.startsWith('M 12 8')).toBe(true);
+    expect((d.match(/A/g) ?? []).length).toBe(2);
+  });
+
+  it('spans the given width with square right corners', () => {
+    const d = roundedLeftRectPath(rect, 23, 2);
+    expect(d).toContain('H 33');
+    expect(d.endsWith('Z')).toBe(true);
+  });
+});

package/src/automation/indicator-shared/linear-indicator.ts

@@ -0,0 +1,230 @@
+import {svg, SVGTemplateResult} from 'lit';
+
+/**
+ * Shared rendering core for linear automation indicators.
+ *
+ * Provides the internals used by `obc-indicator-battery` and
+ * `obc-indicator-tank-atmospheric`: a bottom-up percentage bar fill and a
+ * trend graph (history polyline with filled area plus a 4 px current-value
+ * micro-bar). The consuming component draws its own outer frame and places
+ * these templates inside its inner content rectangle.
+ *
+ * Coordinates are expressed in the component's 48×48 viewBox grid. Colors are
+ * resolved through CSS custom properties so the templates follow the active
+ * theme; the value scheme selects between the neutral, enhanced and
+ * categorical token sets.
+ */
+
+export enum IndicatorDirection {
+  vertical = 'vertical',
+  horizontal = 'horizontal',
+}
+
+export enum LinearIndicatorScheme {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  categorical = 'categorical',
+}
+
+export interface Rect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+const TREND_BAR_WIDTH = 4;
+const TREND_BAR_GAP = 1;
+
+export function clampPercent(value: number): number {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
+export function fillHeight(rect: Rect, level: number): number {
+  return (rect.height * clampPercent(level)) / 100;
+}
+
+export function expandRect(rect: Rect, amount: number): Rect {
+  return {
+    x: rect.x - amount,
+    y: rect.y - amount,
+    width: rect.width + 2 * amount,
+    height: rect.height + 2 * amount,
+  };
+}
+
+function round3(value: number): number {
+  return Math.round(value * 1000) / 1000;
+}
+
+export function trendPolylinePoints(
+  rect: Rect,
+  data: number[],
+  graphWidth: number
+): string {
+  if (data.length < 2) return '';
+  return data
+    .map((value, index) => {
+      const x = rect.x + (index / (data.length - 1)) * graphWidth;
+      const y = rect.y + rect.height * (1 - clampPercent(value) / 100);
+      return `${round3(x)},${round3(y)}`;
+    })
+    .join(' ');
+}
+
+export function schemeFillToken(scheme: LinearIndicatorScheme): string {
+  switch (scheme) {
+    case LinearIndicatorScheme.enhanced:
+      return 'var(--element-neutral-enhanced-color)';
+    case LinearIndicatorScheme.categorical:
+      return 'var(--base-teal-400)';
+    default:
+      return 'var(--element-neutral-color)';
+  }
+}
+
+export function schemeAccentToken(scheme: LinearIndicatorScheme): string {
+  switch (scheme) {
+    case LinearIndicatorScheme.enhanced:
+      return 'var(--element-neutral-enhanced-color)';
+    case LinearIndicatorScheme.categorical:
+      return 'var(--base-teal-500)';
+    default:
+      return 'var(--element-neutral-color)';
+  }
+}
+
+export function schemeAreaToken(scheme: LinearIndicatorScheme): string {
+  switch (scheme) {
+    case LinearIndicatorScheme.enhanced:
+      return 'var(--instrument-enhanced-tertiary-color)';
+    case LinearIndicatorScheme.categorical:
+      return 'var(--base-teal-100)';
+    default:
+      return 'var(--instrument-regular-tertiary-color)';
+  }
+}
+
+/**
+ * Rectangle path with rounded left corners and square right corners, used
+ * to clip the trend graph so it follows the fill-container's rounded left
+ * edge while butting flat against the micro-bar gap on the right.
+ */
+export function roundedLeftRectPath(
+  rect: Rect,
+  width: number,
+  radius: number
+): string {
+  const x = round3(rect.x);
+  const y = round3(rect.y);
+  const right = round3(rect.x + width);
+  const bottom = round3(rect.y + rect.height);
+  const r = round3(radius);
+  return (
+    `M ${round3(rect.x + radius)} ${y} H ${right} V ${bottom} ` +
+    `H ${round3(rect.x + radius)} A ${r} ${r} 0 0 1 ${x} ${round3(bottom - radius)} ` +
+    `V ${round3(rect.y + radius)} A ${r} ${r} 0 0 1 ${round3(rect.x + radius)} ${y} Z`
+  );
+}
+
+export function renderLinearBar(
+  rect: Rect,
+  level: number,
+  scheme: LinearIndicatorScheme,
+  idPrefix: string
+): SVGTemplateResult {
+  const fillRect = expandRect(rect, 0.5);
+  const height = fillHeight(fillRect, level);
+  const clipId = `${idPrefix}-bar-clip`;
+  return svg`
+    <clipPath id=${clipId}>
+      <rect x=${fillRect.x} y=${fillRect.y} width=${fillRect.width} height=${fillRect.height} rx="2.5"></rect>
+    </clipPath>
+    <rect
+      class="bar-background"
+      x=${rect.x}
+      y=${rect.y}
+      width=${rect.width}
+      height=${rect.height}
+      rx="2"
+      style="fill: var(--instrument-frame-secondary-color); stroke: var(--border-outline-color)"
+    ></rect>
+    <rect
+      class="bar-fill"
+      clip-path="url(#${clipId})"
+      x=${fillRect.x}
+      y=${round3(fillRect.y + fillRect.height - height)}
+      width=${fillRect.width}
+      height=${round3(height)}
+      style="fill: ${schemeFillToken(scheme)}"
+    ></rect>
+  `;
+}
+
+export function renderTrendGraph(
+  rect: Rect,
+  data: number[],
+  level: number,
+  scheme: LinearIndicatorScheme,
+  idPrefix: string
+): SVGTemplateResult {
+  const graphWidth = rect.width - TREND_BAR_WIDTH - TREND_BAR_GAP;
+  const points = trendPolylinePoints(rect, data, graphWidth);
+  const bottom = round3(rect.y + rect.height);
+  const areaPath = points
+    ? `M ${round3(rect.x)},${bottom} L ${points.split(' ').join(' L ')} L ${round3(rect.x + graphWidth)},${bottom} Z`
+    : '';
+  const barX = rect.x + rect.width - TREND_BAR_WIDTH;
+  const height = fillHeight(rect, level);
+  const accent = schemeAccentToken(scheme);
+  const clipId = `${idPrefix}-trend-clip`;
+  const barClipId = `${idPrefix}-trend-bar-clip`;
+  return svg`
+    <clipPath id=${clipId}>
+      <path d=${roundedLeftRectPath(rect, graphWidth, 2)}></path>
+    </clipPath>
+    <clipPath id=${barClipId}>
+      <rect x=${barX} y=${rect.y} width=${TREND_BAR_WIDTH} height=${rect.height} rx="2"></rect>
+    </clipPath>
+    ${
+      areaPath
+        ? svg`
+          <path
+            class="trend-area"
+            clip-path="url(#${clipId})"
+            d=${areaPath}
+            style="fill: ${schemeAreaToken(scheme)}"
+          ></path>
+          <polyline
+            class="trend-line"
+            clip-path="url(#${clipId})"
+            points=${points}
+            fill="none"
+            style="stroke: ${accent}"
+            stroke-width="1"
+            vector-effect="non-scaling-stroke"
+          ></polyline>
+        `
+        : ''
+    }
+    <rect
+      class="trend-track"
+      x=${barX}
+      y=${rect.y}
+      width=${TREND_BAR_WIDTH}
+      height=${rect.height}
+      rx="2"
+      style="fill: var(--border-divider-color)"
+    ></rect>
+    <rect
+      class="trend-bar-fill"
+      clip-path="url(#${barClipId})"
+      x=${barX}
+      y=${round3(rect.y + rect.height - height)}
+      width=${TREND_BAR_WIDTH}
+      height=${round3(height)}
+      style="fill: ${accent}"
+    ></rect>
+  `;
+}

package/src/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+  position: relative;
+  width: 48px;
+  height: 48px;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.frame {
+  fill: var(--instrument-frame-primary-color);
+  stroke: var(--instrument-frame-tertiary-color);
+}
+
+.icon-wrapper {
+  position: absolute;
+  inset: 12px;
+  color: var(--element-neutral-color);
+}
+
+:host([value="enhanced"]) .icon-wrapper {
+  color: var(--element-neutral-enhanced-color);
+}
+
+:host([value="medium"]) .icon-wrapper {
+  color: var(--base-teal-500);
+}
+
+.icon-wrapper ::slotted(*),
+.icon-wrapper obi-tank {
+  display: block;
+  width: 100%;
+  height: 100%;
+}