@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/composables/block-preview/useBlockPreviewEmbed.ts

@@ -14,10 +14,8 @@ import {
   previewResizeMessage,
   type PreviewInboundMessage,
   type PreviewOutboundMessage,
-  type PreviewRenderMessage,
   type PreviewState,
   type PreviewTheme,
-  type PreviewThemeMessage,
   type PreviewTree,
 } from "../../utils/blockPreview";
 
@@ -40,8 +38,7 @@ interface EmbedOptions {
 
 function postToParent(message: PreviewOutboundMessage): void {
   if (window.parent === window) return;
-  // The preview is meant to be embedded by any docs site, and what it posts
-  // (a height, a ready flag, an error text) is not worth keeping from one.
+
   window.parent.postMessage(message, "*");
 }
 
@@ -82,15 +79,16 @@ export function useBlockPreviewEmbed(options: EmbedOptions): BlockPreviewEmbed {
     (message: PreviewInboundMessage) => void
   > = {
     render: (message) => {
-      const render = message as PreviewRenderMessage;
-      tree.value = render.tree;
-      theme.value = render.theme ?? theme.value;
-      locale.value = render.locale ?? locale.value;
-      transparent.value = render.transparent ?? transparent.value;
+      if (message.type !== "render") return;
+      tree.value = message.tree;
+      theme.value = message.theme ?? theme.value;
+      locale.value = message.locale ?? locale.value;
+      transparent.value = message.transparent ?? transparent.value;
       revision.value += 1;
     },
     theme: (message) => {
-      theme.value = (message as PreviewThemeMessage).theme;
+      if (message.type !== "theme") return;
+      theme.value = message.theme;
     },
   };
 

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useBlockItems.ts

@@ -1,4 +1,5 @@
 import { computed, type ComputedRef } from "vue";
+import { isNumber } from "#dms-core/app/utils/type-check";
 import { useChartFetch } from "../../../composables/chart/useChartFetch";
 import { useComponentEvent } from "../../../../../dms-core/app/composables/components/useComponentEvent";
 import { useWatch } from "../../../../../dms-core/app/composables/watch/useWatch";
@@ -85,7 +86,7 @@ export function useBlockItems<T>(
     isFetched ? (data.value?.items ?? []) : (options.items() ?? []),
   );
   const count = computed<number | undefined>(() =>
-    typeof data.value?.count === "number" ? data.value.count : undefined,
+    isNumber(data.value?.count) ? data.value.count : undefined,
   );
   const isPending = computed(
     () => isFetched && isLoading.value && data.value === null,

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useGuard.ts

@@ -1,4 +1,5 @@
 import { computed, type ComputedRef } from "vue";
+import { isObject } from "#dms-core/app/utils/type-check";
 import { useChartFetch } from "../../../composables/chart/useChartFetch";
 import {
   type FetchNotFound,
@@ -9,7 +10,7 @@ import type {
   EmptyStateSize,
   EmptyStateVariant,
 } from "../../../components/empty-state/EmptyState.vue";
-import type { Tone } from "../../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 /** The empty state a guard shows in place of its children (interface-dms `GuardFallback`). */
 export interface GuardFallback {
@@ -42,6 +43,7 @@ export interface GuardSource {
 /** What the route answers: any value, maybe with an `emptyState` laid over the fallback. */
 export interface GuardResponse {
   emptyState?: GuardFallback;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Guard fields are arbitrary endpoint values; deriving from GuardFallback would exclude the response fields checked by a caller's dot path.
   [field: string]: unknown;
 }
 
@@ -57,25 +59,28 @@ export interface GuardState {
 const FIELD_PATH_SEPARATOR = ".";
 
 /** The value at a dot path of an answer, `undefined` where the path stops. */
-export function readFieldPath(source: unknown, path: string): unknown {
+// oxlint-disable-next-line anti-slop/no-unknown-parameters -- This public path reader traverses arbitrary endpoint answers; GuardResponse would exclude primitive inputs without establishing nested field types.
+export function readFieldPath(source: unknown, path: string) {
   return path.split(FIELD_PATH_SEPARATOR).reduce<unknown>((value, key) => {
-    if (value === null || typeof value !== "object") return undefined;
-    return (value as Record<string, unknown>)[key];
+    if (value === null || !isObject(value)) return undefined;
+    return value[key];
   }, source);
 }
 
 /** Absent, `null`, `false`, `0`, `""` or an empty list: nothing to show. */
+// oxlint-disable-next-line anti-slop/no-unknown-parameters -- The emptiness predicate accepts every endpoint value; an inferred or response-object parameter would exclude primitive answers.
 export function isEmptyValue(value: unknown): boolean {
   if (Array.isArray(value)) return value.length === 0;
   return !value;
 }
 
+// oxlint-disable-next-line anti-slop/no-unknown-parameters -- The route can answer any JavaScript value; this boundary preserves the primitive and array cases that return undefined.
 function answerOverride(answer: unknown): GuardFallback | undefined {
-  if (!answer || typeof answer !== "object" || Array.isArray(answer)) {
+  if (!answer || !isObject(answer) || Array.isArray(answer)) {
     return undefined;
   }
-  const { emptyState } = answer as GuardResponse;
-  return emptyState && typeof emptyState === "object" ? emptyState : undefined;
+  const { emptyState } = answer;
+  return emptyState && isObject(emptyState) ? emptyState : undefined;
 }
 
 /**

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useRefreshTriggers.ts

@@ -1,5 +1,6 @@
 import { onBeforeUnmount, onMounted } from "vue";
 import { useRealtimeTopic } from "../../../../../dms-core/app/composables/realtime/useRealtimeTopic";
+import type { RealtimeEvent } from "../../../../../dms-core/app/composables/realtime/useUserRealtime";
 import {
   onLivePageBlocksRefresh,
   onPageBlocksRefresh,
@@ -21,7 +22,7 @@ import { type LiveGate, useLiveGate } from "../live/currentPageLive";
  */
 export function useRefreshTriggers(
   realtimeTopic: string | string[] | undefined,
-  onRefresh: () => void | Promise<unknown>,
+  onRefresh: () => void | Parameters<typeof waitForPageBlocksRefresh>[1],
 ): LiveGate {
   let pageRefresh: Event | undefined;
   const gate = useLiveGate(() => {
@@ -30,7 +31,6 @@ export function useRefreshTriggers(
   });
   subscribeRealtimeTopics(realtimeTopic, gate.trigger);
   subscribePageRefresh(gate, (event) => {
-    // The gate reads at once on a page refresh: the read starts in this call.
     pageRefresh = event;
     try {
       gate.catchUp();
@@ -43,7 +43,7 @@ export function useRefreshTriggers(
 
 function subscribeRealtimeTopics(
   topic: string | string[] | undefined,
-  onEvent: (event: object) => void,
+  onEvent: (event: RealtimeEvent) => void,
 ): void {
   if (!topic) return;
   const topics = Array.isArray(topic) ? topic : [topic];
@@ -55,8 +55,6 @@ function subscribeRealtimeTopics(
   }
 }
 
-// Mounted only: the page refresh is a browser event, and a block the server
-// renders has nothing to refetch.
 function subscribePageRefresh(
   gate: LiveGate,
   onPageRefresh: (event: Event) => void,

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexAxes.ts

@@ -0,0 +1,89 @@
+import type { ApexOptions } from "apexcharts";
+import { axisLabelStyle, type ApexThemeColors } from "./apexTheme";
+import {
+  buildAutoYRange,
+  formatPlainAxisValue,
+} from "../../../composables/chart/apexYRange";
+import { thinnedCategoryFormatter } from "../../../composables/chart/apexCategoryLabels";
+import type { ChartType } from "../../../composables/chart/types";
+import type { UseApexChartInput } from "../../../composables/chart/useApexChart.types";
+import {
+  readThemeBorderAccented,
+  readThemeHighlighted,
+} from "../../../composables/chart/useChartTheme";
+
+const CROSSHAIR_DASH = 3;
+const HIGH_CONTRAST_YAXIS_TYPES: ChartType[] = ["radar"];
+const CATEGORY_YAXIS_TYPES: ChartType[] = ["heatmap"];
+const SELF_THINNED_XAXIS_TYPES: ChartType[] = ["heatmap"];
+
+type YAxis = NonNullable<Exclude<ApexOptions["yaxis"], unknown[]>>;
+type XAxis = NonNullable<ApexOptions["xaxis"]>;
+
+export function buildYAxis(
+  input: UseApexChartInput,
+  theme: ApexThemeColors,
+): YAxis & { labels: NonNullable<YAxis["labels"]> } {
+  const labelColor = HIGH_CONTRAST_YAXIS_TYPES.includes(input.type)
+    ? readThemeHighlighted()
+    : theme.dimmed;
+  const yaxis: ReturnType<typeof buildYAxis> = {
+    ...buildAutoYRange(input),
+    labels: { style: axisLabelStyle(labelColor, theme) },
+  };
+  if (input.yRange) {
+    yaxis.min = input.yRange.min;
+    yaxis.max = input.yRange.max;
+  }
+  const valueFormatter = CATEGORY_YAXIS_TYPES.includes(input.type)
+    ? undefined
+    : input.yAxisFormatter;
+  yaxis.labels.formatter = valueFormatter ?? formatPlainAxisValue;
+  return yaxis;
+}
+
+function thinsOwnXLabels(input: UseApexChartInput): boolean {
+  const settings = input.xAxis;
+  return (
+    SELF_THINNED_XAXIS_TYPES.includes(input.type) &&
+    (input.xaxisType ?? "category") === "category" &&
+    settings?.hideOverlappingLabels !== false &&
+    settings?.tickAmount === undefined &&
+    !settings?.rotate
+  );
+}
+
+function xLabelFormatter(input: UseApexChartInput) {
+  if (thinsOwnXLabels(input))
+    return thinnedCategoryFormatter(input.xAxisFormatter);
+  return input.xAxisFormatter;
+}
+
+export function buildXAxis(
+  input: UseApexChartInput,
+  theme: ApexThemeColors,
+): XAxis & { labels: NonNullable<XAxis["labels"]> } {
+  const settings = input.xAxis;
+  const formatter = xLabelFormatter(input);
+  const xaxis: ReturnType<typeof buildXAxis> = {
+    type: input.xaxisType ?? "category",
+    axisBorder: { show: false },
+    axisTicks: { show: false },
+    tooltip: { enabled: false },
+    labels: {
+      style: axisLabelStyle(theme.dimmed, theme),
+      datetimeUTC: false,
+      rotate: settings?.rotate ?? 0,
+      hideOverlappingLabels: settings?.hideOverlappingLabels ?? true,
+    },
+  };
+  if (input.xaxisType === "datetime" && settings?.datetimeFormat !== undefined)
+    xaxis.labels.format = settings.datetimeFormat;
+  if (formatter) xaxis.labels.formatter = formatter;
+  xaxis.crosshairs = {
+    stroke: { color: readThemeBorderAccented(), dashArray: CROSSHAIR_DASH },
+  };
+  if (settings?.tickAmount !== undefined)
+    xaxis.tickAmount = settings.tickAmount;
+  return xaxis;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexHeatmap.ts

@@ -0,0 +1,111 @@
+import {
+  isNumber,
+  isObject,
+} from "../../../../../dms-core/app/utils/type-check";
+import type { ApexOptions } from "apexcharts";
+import type { ChartSeries, ChartType } from "../../../composables/chart/types";
+import type { UseApexChartInput } from "../../../composables/chart/useApexChart.types";
+import {
+  heatmapRangeColors,
+  isDarkSurface,
+} from "../../../composables/chart/heatmapColors";
+import { readThemeSurface } from "../../../composables/chart/useChartTheme";
+
+const VALUE_SCALED_TYPES: ChartType[] = ["heatmap"];
+const VALUE_SCALED_PLOT_KEY: Partial<Record<ChartType, "heatmap">> = {
+  heatmap: "heatmap",
+};
+
+function extractNumericValues(series: ChartSeries[]): number[] {
+  const values: number[] = [];
+  for (const entry of series) {
+    for (const point of entry.data) {
+      if (isNumber(point)) {
+        values.push(point);
+        continue;
+      }
+      if (point && isObject(point) && "y" in point) {
+        const y = point.y;
+        if (isNumber(y)) values.push(y);
+      }
+    }
+  }
+  return values;
+}
+
+interface ColorScaleRange {
+  from: number;
+  to: number;
+  name: string;
+  color: string;
+}
+
+function formatRangeBound(value: number): string {
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
+function buildValueBasedRanges(
+  values: number[],
+  palette: string[],
+): ColorScaleRange[] {
+  if (values.length === 0 || palette.length === 0) return [];
+  const min = Math.floor(Math.min(...values));
+  const max = Math.ceil(Math.max(...values));
+  if (min === max) {
+    return [
+      {
+        from: min,
+        to: max,
+        name: formatRangeBound(min),
+        color: palette[palette.length - 1]!,
+      },
+    ];
+  }
+  const step = (max - min) / palette.length;
+  return palette.map((color, index) => {
+    const from = Math.round(min + step * index);
+    const to =
+      index === palette.length - 1 ? max : Math.round(min + step * (index + 1));
+    return {
+      from,
+      to,
+      name: `${formatRangeBound(from)} – ${formatRangeBound(to)}`,
+      color,
+    };
+  });
+}
+
+/** Splits heatmap values into theme-relative ranges without Apex's white shading. */
+export function applyValueBasedColorScale(
+  plotOptions: NonNullable<ApexOptions["plotOptions"]>,
+  input: UseApexChartInput,
+  series: ChartSeries[],
+  palette: string[],
+): void {
+  if (!VALUE_SCALED_TYPES.includes(input.type)) return;
+  if (input.distributed) return;
+  if (palette.length < 2) return;
+  const subKey = VALUE_SCALED_PLOT_KEY[input.type]!;
+  const subOptions = plotOptions[subKey] ?? {};
+  const colors = heatmapRangeColors(
+    palette,
+    readThemeSurface(),
+    Number(subOptions.shadeIntensity ?? 1),
+  );
+  const ranges = buildValueBasedRanges(extractNumericValues(series), colors);
+  if (ranges.length === 0) return;
+  subOptions.colorScale = { ranges };
+  subOptions.enableShades = false;
+  plotOptions[subKey] = subOptions;
+}
+
+/** Sets only the mode Apex's native heatmap shading reads. */
+export function applyHeatmapThemeMode(
+  baseOptions: ApexOptions,
+  input: UseApexChartInput,
+): void {
+  if (!VALUE_SCALED_TYPES.includes(input.type)) return;
+  baseOptions.theme = {
+    mode: isDarkSurface(readThemeSurface()) ? "dark" : "light",
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexRawOptions.ts

@@ -0,0 +1,49 @@
+import { isObject } from "../../../../../dms-core/app/utils/type-check";
+import type { UseApexChartInput } from "../../../composables/chart/useApexChart.types";
+
+// oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Raw dotted-path overrides can replace any section with arbitrary JSON or text; ApexOptions indexed access cannot describe this existing unchecked escape hatch, and inferred builders exclude user-defined keys.
+export type RawOptionSection = Record<string, unknown>;
+
+const RAW_OPTION_PATH_SEPARATOR = ".";
+
+// oxlint-disable-next-line anti-slop/no-unknown-returns -- JSON.parse accepts arbitrary user JSON here; validating as ApexOptions would reject currently supported raw overrides.
+function parseRawOptionValue(value: string): unknown {
+  try {
+    return JSON.parse(value);
+  } catch {
+    return value;
+  }
+}
+
+function isOptionSection(value: unknown): value is RawOptionSection {
+  return isObject(value) && value !== null && !Array.isArray(value);
+}
+
+/** Copies each section on a dotted path, replacing the final value. */
+function setOptionPath(
+  options: RawOptionSection,
+  path: string[],
+  value: ReturnType<typeof parseRawOptionValue>,
+): Parameters<typeof injectRawOptions>[0] {
+  const [head, ...rest] = path;
+  if (head === undefined) return options;
+  if (rest.length === 0) return { ...options, [head]: value };
+  const section = isOptionSection(options[head]) ? options[head] : {};
+  return { ...options, [head]: setOptionPath(section, rest, value) };
+}
+
+/** Applies raw overrides without mutating generated options. */
+export function injectRawOptions(
+  options: RawOptionSection,
+  rawOptions: UseApexChartInput["rawOptions"],
+): RawOptionSection {
+  return (rawOptions ?? []).reduce(
+    (merged, entry) =>
+      setOptionPath(
+        merged,
+        entry.key.split(RAW_OPTION_PATH_SEPARATOR),
+        parseRawOptionValue(entry.value),
+      ),
+    options,
+  );
+}

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexSeriesStyle.ts

@@ -0,0 +1,201 @@
+import type { ApexOptions } from "apexcharts";
+import type { ApexTypeConfig } from "../../../composables/chart/apexTypeConfigs";
+import type {
+  ChartSeries,
+  ChartType,
+  ComparisonStyle,
+} from "../../../composables/chart/types";
+import type { UseApexChartInput } from "../../../composables/chart/useApexChart.types";
+
+const DASHED_DASH_LENGTH = 5;
+const DIMMED_OPACITY = 0.4;
+const FULL_OPACITY = 1;
+const PRIMARY_STROKE_WIDTH = 2.5;
+const COMPARISON_STROKE_WIDTH = 1.75;
+const AREA_PRIMARY_FROM = 0.26;
+const AREA_PRIMARY_TO = 0;
+const AREA_COMPARISON_OPACITY = 0.7;
+const AREA_GRADIENT_STOPS = [0, 100];
+const RADAR_FILL_DEFAULT = 0.4;
+const RANGE_AREA_FILL_DEFAULT = 0.28;
+const STACKED_SEGMENT_GAP = 1.5;
+const STACKED_GAP_TYPES: ChartType[] = ["bar", "column"];
+
+export interface ComparisonContext {
+  enabled: boolean;
+  startIndex: number;
+  totalSeries: number;
+}
+
+export function buildComparisonContext(
+  totalSeries: number,
+  comparisonCount: number | undefined,
+  isCircular: boolean,
+): ComparisonContext {
+  if (isCircular || !comparisonCount || comparisonCount <= 0) {
+    return { enabled: false, startIndex: totalSeries, totalSeries };
+  }
+  const safeCount = Math.min(comparisonCount, totalSeries);
+  return {
+    enabled: safeCount > 0 && safeCount < totalSeries,
+    startIndex: totalSeries - safeCount,
+    totalSeries,
+  };
+}
+
+export function applyComparisonStyle(
+  context: ComparisonContext,
+  style: ComparisonStyle | undefined,
+) {
+  const styleValue = style ?? "dashed";
+  return {
+    dashArray: Array.from({ length: context.totalSeries }, (_, index) =>
+      index >= context.startIndex && styleValue === "dashed"
+        ? DASHED_DASH_LENGTH
+        : 0,
+    ),
+    opacities: Array.from({ length: context.totalSeries }, (_, index) =>
+      index >= context.startIndex && styleValue === "dimmed"
+        ? DIMMED_OPACITY
+        : FULL_OPACITY,
+    ),
+  };
+}
+
+const FILL_BUILDERS: Partial<
+  Record<
+    ChartType,
+    (
+      props: UseApexChartInput,
+      comparison: ComparisonContext,
+    ) => NonNullable<ApexOptions["fill"]>
+  >
+> = {
+  area: (props, comparison) => buildAreaFill(props, comparison),
+  radar: (props) => ({ opacity: props.fillOpacity ?? RADAR_FILL_DEFAULT }),
+  rangeArea: (props) => ({
+    opacity: props.fillOpacity ?? RANGE_AREA_FILL_DEFAULT,
+  }),
+};
+
+/** Only the main series fades; the comparison's solid fill sets stroke opacity. */
+function buildAreaFill(
+  props: UseApexChartInput,
+  comparison: ComparisonContext,
+): NonNullable<ApexOptions["fill"]> {
+  const gradient = {
+    shadeIntensity: 1,
+    type: "vertical",
+    opacityFrom: props.fillOpacity ?? AREA_PRIMARY_FROM,
+    opacityTo: AREA_PRIMARY_TO,
+    stops: AREA_GRADIENT_STOPS,
+  };
+  if (!comparison.enabled) return { type: "gradient", gradient };
+  const isComparison = (index: number) => index >= comparison.startIndex;
+  return {
+    type: Array.from({ length: comparison.totalSeries }, (_, index) =>
+      isComparison(index) ? "solid" : "gradient",
+    ),
+    opacity: Array.from({ length: comparison.totalSeries }, (_, index) =>
+      isComparison(index) ? AREA_COMPARISON_OPACITY : FULL_OPACITY,
+    ),
+    gradient,
+  };
+}
+
+export function buildFill(
+  input: UseApexChartInput,
+  comparison: ComparisonContext,
+): NonNullable<ApexOptions["fill"]> | null {
+  return FILL_BUILDERS[input.type]?.(input, comparison) ?? null;
+}
+
+function buildStrokeWidths(
+  input: UseApexChartInput,
+  comparison: ComparisonContext,
+  defaultWidth: number | undefined,
+): number | number[] {
+  if (input.strokeWidth !== undefined) return input.strokeWidth;
+  if (!comparison.enabled) return defaultWidth ?? PRIMARY_STROKE_WIDTH;
+  const primaryWidth = defaultWidth ?? PRIMARY_STROKE_WIDTH;
+  return Array.from({ length: comparison.totalSeries }, (_, index) =>
+    index >= comparison.startIndex ? COMPARISON_STROKE_WIDTH : primaryWidth,
+  );
+}
+
+export function buildStroke(
+  input: UseApexChartInput,
+  config: ApexTypeConfig,
+  comparisonDashArray: number[] | undefined,
+  comparison: ComparisonContext,
+  surface: string,
+): NonNullable<ApexOptions["stroke"]> {
+  const initialStroke = { ...config.defaultStroke };
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The public configuration accepts arbitrary curve strings; inference and ApexStroke reject that existing unchecked Apex boundary.
+  const stroke = initialStroke as NonNullable<ApexOptions["stroke"]>;
+  if (input.smooth === false && stroke.curve) stroke.curve = "straight";
+  if (input.curve) stroke.curve = input.curve;
+  stroke.width = buildStrokeWidths(input, comparison, initialStroke.width);
+  stroke.lineCap = "round";
+  if (comparisonDashArray) stroke.dashArray = comparisonDashArray;
+  applySegmentGap(stroke, input, config, surface);
+  return stroke;
+}
+
+/** Separates donut slices and stacked segments with a card-coloured stroke. */
+function applySegmentGap(
+  stroke: NonNullable<ApexOptions["stroke"]>,
+  input: UseApexChartInput,
+  config: ApexTypeConfig,
+  surface: string,
+): void {
+  const isStackedBar =
+    !!input.stacked && STACKED_GAP_TYPES.includes(input.type);
+  if (!config.isCircular && !isStackedBar) return;
+  stroke.colors = [surface];
+  if (isStackedBar && input.strokeWidth === undefined) {
+    stroke.width = STACKED_SEGMENT_GAP;
+  }
+}
+
+export function applySeriesStroke(
+  options: { stroke: NonNullable<ApexOptions["stroke"]> },
+  series: ChartSeries[],
+): void {
+  const stroke = options.stroke;
+  const properties = {
+    strokeWidth: "width",
+    strokeDashArray: "dashArray",
+  } as const;
+  const seriesProperties: Array<keyof typeof properties> = [
+    "strokeWidth",
+    "strokeDashArray",
+  ];
+  for (const property of seriesProperties) {
+    if (!series.some((entry) => entry[property] !== undefined)) continue;
+    const key = properties[property];
+    const fallback = stroke[key];
+    stroke[key] = series.map(
+      (entry, index) =>
+        entry[property] ??
+        (Array.isArray(fallback) ? fallback[index] : fallback) ??
+        0,
+    );
+  }
+}
+
+export function applyFillWithComparison(
+  baseOptions: ApexOptions,
+  fill: NonNullable<ApexOptions["fill"]> | null,
+  comparisonStyling: { opacities: number[] } | undefined,
+  comparisonStyle: ComparisonStyle | undefined,
+): void {
+  const isDimmed = comparisonStyling && comparisonStyle === "dimmed";
+  if (fill) {
+    baseOptions.fill = isDimmed
+      ? { ...fill, opacity: comparisonStyling.opacities }
+      : fill;
+    return;
+  }
+  if (isDimmed) baseOptions.fill = { opacity: comparisonStyling.opacities };
+}