[CP-3325] compute-segment-bar-items implemented

libs/generic-view/ui/src/lib/segment-bar/compute-segment-bar-items.helper.test.ts

@@ -0,0 +1,207 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import {
+  computeSegmentBarItems,
+  SegmentBarItem,
+} from "./compute-segment-bar-items.helper"
+
+describe("Single segments", () => {
+  test("handles a single segment without minWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 100, minWidth: 0 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "100.00%", left: "0.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles a single segment with minWidth smaller than containerWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 1, minWidth: 50 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "100.00%", left: "0.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles a single segment occupying the full containerWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 100, minWidth: 100 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "100.00%", left: "0.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles a single segment minWidth larger than proportional width", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 100, minWidth: 200 },
+    ]
+
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "100.00%", left: "0.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+})
+
+describe("Multiple segments - proportional allocation", () => {
+  test("handles multiple segments without minWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 50, minWidth: 0 },
+      { color: "#111", label: "Segment 2", value: 30, minWidth: 0 },
+      { color: "#222", label: "Segment 3", value: 20, minWidth: 0 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "50.00%", left: "0.00%", zIndex: 3 },
+      { ...segments[1], width: "30.00%", left: "50.00%", zIndex: 2 },
+      { ...segments[2], width: "20.00%", left: "80.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+})
+
+describe("Multiple segments - with minWidth", () => {
+  test("handles segments with minWidth smaller than proportional width", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 70, minWidth: 10 },
+      { color: "#111", label: "Segment 2", value: 30, minWidth: 5 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "71.75%", left: "0.00%", zIndex: 2 },
+      { ...segments[1], width: "30.75%", left: "69.25%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles segments with minWidth equal to containerWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 1, minWidth: 50 },
+      { color: "#111", label: "Segment 2", value: 1, minWidth: 50 },
+      { color: "#111", label: "Segment 2", value: 1, minWidth: 50 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], left: "0.00%", width: "50.00%", zIndex: 3 },
+      { ...segments[1], left: "25.00%", width: "50.00%", zIndex: 2 },
+      { ...segments[2], left: "50.00%", width: "50.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles segments with minWidth larger than proportional width", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 1, minWidth: 80 },
+      { color: "#111", label: "Segment 2", value: 1, minWidth: 40 },
+    ]
+
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "80.00%", left: "0.00%", zIndex: 2 },
+      { ...segments[1], width: "40.00%", left: "60.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles segments with minWidth exceeding containerWidth", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 1, minWidth: 80 },
+      { color: "#111", label: "Segment 2", value: 1, minWidth: 80 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "70.00%", left: "0.00%", zIndex: 2 },
+      { ...segments[1], width: "70.00%", left: "30.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+})
+
+describe("Edge cases", () => {
+  test("ignores segments with value = 0", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 0, minWidth: 50 },
+      { color: "#111", label: "Segment 2", value: 100, minWidth: 50 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[1], width: "100.00%", left: "0.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles an empty array of segments", () => {
+    const segments: SegmentBarItem[] = []
+    const result = computeSegmentBarItems(segments, 100)
+
+    expect(result).toEqual([])
+  })
+})
+
+describe("Advanced scenarios", () => {
+  test("handles mix of minWidth and proportional allocation", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 30, minWidth: 30 },
+      { color: "#111", label: "Segment 2", value: 20, minWidth: 10 },
+      { color: "#222", label: "Segment 3", value: 50, minWidth: 10 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "33.00%", left: "0.00%", zIndex: 3 },
+      { ...segments[1], width: "22.00%", left: "28.00%", zIndex: 2 },
+      { ...segments[2], width: "55.00%", left: "45.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+
+  test("handles a mix of overlap and proportional widths", () => {
+    const segments: SegmentBarItem[] = [
+      { color: "#000", label: "Segment 1", value: 40, minWidth: 20 },
+      { color: "#111", label: "Segment 2", value: 40, minWidth: 20 },
+      { color: "#222", label: "Segment 3", value: 20, minWidth: 20 },
+    ]
+    const result = computeSegmentBarItems(segments, 100)
+
+    const expected = [
+      { ...segments[0], width: "48.00%", left: "0.00%", zIndex: 3 },
+      { ...segments[1], width: "48.00%", left: "38.00%", zIndex: 2 },
+      { ...segments[2], width: "24.00%", left: "76.00%", zIndex: 1 },
+    ]
+
+    expect(result).toEqual(expected)
+  })
+})

libs/generic-view/ui/src/lib/segment-bar/compute-segment-bar-items.helper.ts

@@ -0,0 +1,152 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+export interface SegmentBarItem {
+  color: string
+  label: string
+  value: number
+  minWidth: number
+}
+
+interface AdjustedSegment extends SegmentBarItem {
+  usesMinWidth: boolean
+}
+
+interface ComputedSegmentBarItem extends SegmentBarItem {
+  width: string
+  left: string
+  zIndex: number
+}
+
+export interface SegmentBarProps {
+  segments: SegmentBarItem[]
+}
+
+const calculateTotalSegmentValue = (segments: SegmentBarItem[]): number =>
+  segments.reduce((sum, segment) => sum + segment.value, 0)
+
+const calculateOverlapAdjustment = (segments: SegmentBarItem[]): number =>
+  segments.reduce(
+    (totalOverlap, segment, index) =>
+      totalOverlap + (index > 0 ? segment.minWidth / 2 : 0),
+    0
+  )
+
+const adjustSegmentsForMinWidth = (
+  segments: SegmentBarItem[],
+  totalSegmentValue: number,
+  containerWidthWithOverlap: number
+): {
+  adjustedSegments: AdjustedSegment[]
+  remainingWidth: number
+  remainingTotalSegmentValue: number
+} => {
+  let remainingWidth = containerWidthWithOverlap
+  let remainingTotalSegmentValue = totalSegmentValue
+
+  const adjustedSegments = segments.map((segment) => {
+    const proportionalWidth =
+      (segment.value / totalSegmentValue) * containerWidthWithOverlap
+    const finalWidth = Math.max(segment.minWidth, proportionalWidth)
+    const usesMinWidth = finalWidth === segment.minWidth
+
+    if (usesMinWidth) {
+      remainingWidth -= segment.minWidth
+      remainingTotalSegmentValue -= segment.value
+    }
+
+    return {
+      ...segment,
+      usesMinWidth,
+    }
+  })
+
+  return { adjustedSegments, remainingWidth, remainingTotalSegmentValue }
+}
+
+const calculateWidth = (
+  segment: AdjustedSegment,
+  totalSegmentValue: number,
+  remainingSegmentValue: number,
+  remainingWidth: number,
+  containerWidthWithOverlap: number
+): number => {
+  if (remainingWidth < 0) {
+    return (segment.value / totalSegmentValue) * containerWidthWithOverlap
+  }
+  return segment.usesMinWidth
+    ? segment.minWidth
+    : (segment.value / remainingSegmentValue) * remainingWidth
+}
+
+
+const calculateSegmentPositions = (
+  segments: AdjustedSegment[],
+  totalSegmentValue: number,
+  remainingSegmentValue: number,
+  remainingWidth: number,
+  containerWidth: number,
+  containerWidthWithOverlap: number
+): ComputedSegmentBarItem[] => {
+  let cumulativeLeft = 0
+  let totalOverlap = 0
+
+  return segments.map((segment, index) => {
+    const width = calculateWidth(
+      segment,
+      totalSegmentValue,
+      remainingSegmentValue,
+      remainingWidth,
+      containerWidthWithOverlap
+    )
+
+    const overlapCorrection = index > 0 ? segment.minWidth / 2 : 0
+    totalOverlap += overlapCorrection
+
+    const widthPercent = ((width / containerWidth) * 100).toFixed(2)
+    const leftPercent = (
+      ((cumulativeLeft - totalOverlap) / containerWidth) *
+      100
+    ).toFixed(2)
+
+    cumulativeLeft += width
+
+    const { usesMinWidth, ...segmentWithoutUsesMinWidth } = segment
+
+    return {
+      ...segmentWithoutUsesMinWidth,
+      width: `${widthPercent}%`,
+      left: `${leftPercent}%`,
+      zIndex: segments.length - index,
+    }
+  })
+}
+
+export const computeSegmentBarItems = (
+  segments: SegmentBarItem[],
+  containerWidth: number
+): ComputedSegmentBarItem[] => {
+  const filteredSegments = segments.filter((segment) => segment.value > 0)
+
+  const totalSegmentValue = calculateTotalSegmentValue(filteredSegments)
+  const overlapAdjustment = calculateOverlapAdjustment(filteredSegments)
+  const containerWidthWithOverlap = containerWidth + overlapAdjustment
+
+  const { adjustedSegments, remainingWidth, remainingTotalSegmentValue } =
+    adjustSegmentsForMinWidth(
+      filteredSegments,
+      totalSegmentValue,
+      containerWidthWithOverlap
+    )
+
+  return calculateSegmentPositions(
+    adjustedSegments,
+    totalSegmentValue,
+    remainingTotalSegmentValue,
+    remainingWidth,
+    containerWidth,
+    containerWidthWithOverlap
+  )
+}