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

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%;
+}

package/src/automation/indicator-tank-atmospheric/indicator-tank-atmospheric.stories.ts

@@ -0,0 +1,94 @@
+import type {Meta, StoryObj} from '@storybook/web-components-vite';
+import {html} from 'lit';
+import {
+  ObcIndicatorTankAtmospheric,
+  IndicatorTankAtmosphericVariant,
+  IndicatorTankAtmosphericValue,
+} from './indicator-tank-atmospheric.js';
+import './indicator-tank-atmospheric.js';
+import {IndicatorDirection} from '../indicator-shared/linear-indicator.js';
+
+const meta = {
+  title: 'Automation/Indicators/Indicator Tank Atmospheric',
+  component: 'obc-indicator-tank-atmospheric',
+  tags: ['autodocs', '6.0'],
+  args: {
+    direction: IndicatorDirection.vertical,
+    variant: IndicatorTankAtmosphericVariant.bar,
+    value: IndicatorTankAtmosphericValue.regular,
+    level: 40,
+    data: [60, 52, 58, 45, 50, 42, 44, 40],
+    hasIcon: false,
+  },
+  argTypes: {
+    direction: {
+      control: 'radio',
+      options: Object.values(IndicatorDirection),
+    },
+    variant: {
+      control: 'radio',
+      options: Object.values(IndicatorTankAtmosphericVariant),
+    },
+    value: {
+      control: 'radio',
+      options: Object.values(IndicatorTankAtmosphericValue),
+    },
+    level: {control: {type: 'range', min: 0, max: 100}},
+  },
+  render: (args) => html`
+    <obc-indicator-tank-atmospheric
+      .direction=${args.direction}
+      .variant=${args.variant}
+      .value=${args.value}
+      .level=${args.level}
+      .data=${args.data}
+      .hasIcon=${args.hasIcon}
+    ></obc-indicator-tank-atmospheric>
+  `,
+} satisfies Meta<Partial<ObcIndicatorTankAtmospheric>>;
+
+export default meta;
+type Story = StoryObj<Partial<ObcIndicatorTankAtmospheric>>;
+
+export const Default: Story = {};
+
+export const BarHorizontal: Story = {
+  args: {direction: IndicatorDirection.horizontal},
+};
+
+export const TrendVertical: Story = {
+  args: {variant: IndicatorTankAtmosphericVariant.trend},
+};
+
+export const TrendHorizontal: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    direction: IndicatorDirection.horizontal,
+  },
+};
+
+export const Enhanced: Story = {
+  args: {value: IndicatorTankAtmosphericValue.enhanced},
+};
+
+export const Medium: Story = {
+  args: {value: IndicatorTankAtmosphericValue.medium},
+};
+
+export const TrendEnhanced: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    value: IndicatorTankAtmosphericValue.enhanced,
+  },
+};
+
+export const TrendMedium: Story = {
+  args: {
+    variant: IndicatorTankAtmosphericVariant.trend,
+    value: IndicatorTankAtmosphericValue.medium,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {hasIcon: true},
+};

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

@@ -0,0 +1,138 @@
+import {LitElement, html, unsafeCSS, nothing} from 'lit';
+import {property} from 'lit/decorators.js';
+import componentStyle from './indicator-tank-atmospheric.css?inline';
+import {customElement} from '../../decorator.js';
+import '../../icons/icon-tank.js';
+import {
+  IndicatorDirection,
+  LinearIndicatorScheme,
+  Rect,
+  renderLinearBar,
+  renderTrendGraph,
+} from '../indicator-shared/linear-indicator.js';
+
+export enum IndicatorTankAtmosphericVariant {
+  bar = 'bar',
+  trend = 'trend',
+}
+
+export enum IndicatorTankAtmosphericValue {
+  regular = 'regular',
+  enhanced = 'enhanced',
+  medium = 'medium',
+}
+
+const HORIZONTAL_BAR: Rect = {x: 8, y: 11, width: 32, height: 26};
+const VERTICAL_BAR: Rect = {x: 11, y: 8, width: 26, height: 32};
+const HORIZONTAL_TREND: Rect = {x: 8, y: 10, width: 32, height: 28};
+const VERTICAL_TREND: Rect = {x: 10, y: 8, width: 28, height: 32};
+
+const FRAME_PATH =
+  'M20.5 32.5L4.21259 32.5C3.70663 32.5 3.45364 32.5 3.09178 32.3531C2.84817 32.2542 2.44102 31.9492 2.27758 31.7433C2.0348 31.4373 1.98325 31.2615 1.88017 30.9098C1.29286 28.906 0.5 24.6852 0.5 16.5C0.5 8.31487 1.29286 4.09402 1.88016 2.09025C1.98325 1.73854 2.0348 1.56268 2.27758 1.25676C2.44102 1.0508 2.84817 0.745859 3.09178 0.646944C3.45364 0.500011 3.70662 0.500011 4.21259 0.500011L20.5 0.50001L36.7874 0.500011C37.2934 0.500011 37.5464 0.500011 37.9082 0.646943C38.1518 0.745859 38.559 1.0508 38.7224 1.25675C38.9652 1.56268 39.0167 1.73854 39.1198 2.09025C39.7071 4.09402 40.5 8.31487 40.5 16.5C40.5 24.6851 39.7071 28.906 39.1198 30.9098C39.0167 31.2615 38.9652 31.4373 38.7224 31.7433C38.559 31.9492 38.1518 32.2542 37.9082 32.3531C37.5464 32.5 37.2934 32.5 36.7874 32.5H20.5Z';
+
+/**
+ * Compact 48×48 atmospheric tank level indicator.
+ *
+ * ## Features / Variants
+ * - `variant`: `bar` (bottom-up percentage fill) or `trend` (history graph
+ *   with a current-value micro-bar)
+ * - `direction`: `vertical` or `horizontal` tank outline
+ * - `value`: color scheme — `regular`, `enhanced` or `medium`
+ * - `level`: current tank level 0–100 (%), drives the fill and micro-bar
+ * - `data`: history samples 0–100 (%) drawn as the trend graph
+ * - `hasIcon`: centered icon overlay (bar variant only)
+ *
+ * ## Usage Guidelines
+ * Use as an at-a-glance level indicator in dashboards and lists. For a
+ * full-featured tank cell with readouts, badges and setpoints, use
+ * `obc-automation-tank` instead.
+ *
+ * ## Best Practices / Constraints
+ * - `level` and `data` values are clamped to 0–100; values outside that
+ *   range are pinned to the nearest bound.
+ * - The `trend` variant needs at least two `data` samples to draw a line;
+ *   with fewer it shows only the current-value micro-bar.
+ * - The `icon` slot renders only in the `bar` variant; it is ignored in
+ *   `trend`.
+ * - Display-only: the root SVG is `aria-hidden`; convey tank level to
+ *   assistive tech through adjacent text if it is not otherwise available.
+ *
+ * ## Slots
+ * | Slot   | Condition                     | Purpose                        |
+ * | ------ | ----------------------------- | ------------------------------ |
+ * | `icon` | `hasIcon` and `variant='bar'` | Icon overlay (`obi-*` element) |
+ *
+ * @slot icon - Centered icon overlay, defaults to `obi-tank`
+ */
+@customElement('obc-indicator-tank-atmospheric')
+export class ObcIndicatorTankAtmospheric extends LitElement {
+  @property({type: String, reflect: true}) direction: IndicatorDirection =
+    IndicatorDirection.vertical;
+  @property({type: String, reflect: true})
+  variant: IndicatorTankAtmosphericVariant =
+    IndicatorTankAtmosphericVariant.bar;
+  @property({type: String, reflect: true})
+  value: IndicatorTankAtmosphericValue = IndicatorTankAtmosphericValue.regular;
+  /** Current level, 0-100 (%) */
+  @property({type: Number}) level = 0;
+  /** History samples, 0-100 (%) each, oldest first */
+  @property({type: Array}) data: number[] = [];
+  @property({type: Boolean}) hasIcon = false;
+
+  private get scheme(): LinearIndicatorScheme {
+    switch (this.value) {
+      case IndicatorTankAtmosphericValue.enhanced:
+        return LinearIndicatorScheme.enhanced;
+      case IndicatorTankAtmosphericValue.medium:
+        return LinearIndicatorScheme.categorical;
+      default:
+        return LinearIndicatorScheme.regular;
+    }
+  }
+
+  override render() {
+    const horizontal = this.direction === IndicatorDirection.horizontal;
+    const trend = this.variant === IndicatorTankAtmosphericVariant.trend;
+    const barRect = horizontal
+      ? trend
+        ? HORIZONTAL_TREND
+        : HORIZONTAL_BAR
+      : trend
+        ? VERTICAL_TREND
+        : VERTICAL_BAR;
+    const frameTransform = horizontal
+      ? 'translate(3.5 7.5)'
+      : 'rotate(90 24 24) translate(3.5 7.5)';
+    const showIcon =
+      this.hasIcon && this.variant === IndicatorTankAtmosphericVariant.bar;
+    return html`
+      <svg viewBox="0 0 48 48" aria-hidden="true">
+        <g transform=${frameTransform}>
+          <path class="frame" d=${FRAME_PATH} />
+        </g>
+        ${this.variant === IndicatorTankAtmosphericVariant.trend
+          ? renderTrendGraph(
+              barRect,
+              this.data,
+              this.level,
+              this.scheme,
+              'tank'
+            )
+          : renderLinearBar(barRect, this.level, this.scheme, 'tank')}
+      </svg>
+      ${showIcon
+        ? html`<div class="icon-wrapper">
+            <slot name="icon"><obi-tank usecsscolor></obi-tank></slot>
+          </div>`
+        : nothing}
+    `;
+  }
+
+  static override styles = unsafeCSS(componentStyle);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'obc-indicator-tank-atmospheric': ObcIndicatorTankAtmospheric;
+  }
+}