rbro-tat-uds 1.6.36 → 2.0.0

package/build/esm/components/UnitlinkGraph/UnitlinkGraph.js

@@ -0,0 +1,934 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo, useRef, useState, useEffect, useCallback } from 'react';
+import styled from 'styled-components';
+import { colors } from '../../utils';
+
+function floorToHalf(num) {
+  let result = 0;
+  const intPart = Math.floor(num);
+  const decimalPart = num - intPart;
+  if (decimalPart < 0.25) {
+    result = intPart;
+  } else if (decimalPart < 0.75) {
+    result = intPart + 0.5;
+  } else {
+    result = intPart + 1;
+  }
+  return Math.max(result, 0);
+}
+const UnitLinkGraphStyled = styled.svg`
+  .bar-actions-group rect {
+    transition: fill 0.5s ease-in-out;
+  }
+  .bar-actions-group text {
+    transition: fill 0.5s ease-in-out;
+  }
+  .bar-actions-group tpsan {
+    transition: fill 0.5s ease-in-out;
+  }
+  .text-contribution {
+    font-size: 12px;
+    font-weight: 500;
+    fill: ${colors.blue_600};
+  }
+  .text-action {
+    font-size: 12px;
+  }
+  .text-bar-header {
+    font-size: 14px;
+    font-weight: 500;
+    fill: ${colors.black};
+  }
+  .text-bar-actions-label {
+    font-size: 14px;
+    font-weight: 500;
+  }
+  .text-bar-actions-sublabel {
+    font-size: 14px;
+    font-weight: 400;
+  }
+  .bar-actions-group {
+    cursor: pointer;
+  }
+`;
+const UnitLinkGraph = ({
+  height = 0,
+  barMainConfiguration = {
+    header: "Placeholder",
+    color_primary: colors.purple_600,
+    color_secondary: colors.purple_50,
+    percentage: 50,
+    place_at_ani: 7,
+    actions: [
+      {
+        label: "Placeholder",
+        sublabel: "Placeholder"
+      }
+    ]
+  },
+  barSecondaryConfiguration,
+  initialSliderValue = 0,
+  maximum_ani = 7,
+  timeline_texts = {
+    left: "Placeholder"
+  },
+  ...rest
+}) => {
+  const sliderActive = useMemo(() => {
+    return barSecondaryConfiguration ? true : false;
+  }, [barSecondaryConfiguration]);
+  const svgReference = useRef(null);
+  const [totalWidth, setTotalWidth] = useState(0);
+  const [totalHeight, setTotalHeight] = useState(height);
+  const [mainWidth, setMainWidth] = useState(0);
+  const [mainStart, setMainStart] = useState(0);
+  const [sliderValue, setSliderValue] = useState(initialSliderValue);
+  const configurations = useMemo(() => {
+    return {
+      mainGap: 16,
+      bars: {
+        strokeWidth: 1,
+        width: 32 - 1,
+        actionsGap: 12,
+        actionsTextLineHeight: 17.5
+      },
+      area: {
+        outersPartsWidth: 8,
+        additionalSpaceVisualize: 0.5,
+        strokeWidth: 1,
+        graphLineStrokeWidth: 2,
+        indicators: {
+          height: 4,
+          count: maximum_ani + 1,
+          margin: 3,
+          strokeWidth: 2
+        }
+      },
+      timeline: {
+        contentHeight: 15,
+        countPerIndicator: 2,
+        gap: 3,
+        // -> 8 , [3(this) * 2](between) = 6 + 2 (indicator width) = 8
+        segmentsHeight: 6
+      },
+      actions: {
+        contentSliderHeight: 32,
+        contentGap: 10,
+        min: 0
+      }
+    };
+  }, [maximum_ani]);
+  useEffect(() => {
+    if (svgReference.current) {
+      const svgWidth = svgReference.current.clientWidth;
+      const svgHeight = svgReference.current.clientHeight;
+      const reservedSpacePercentage = 17.5 / 100;
+      const reservedSpaceLeftRight = floorToHalf(
+        svgWidth * reservedSpacePercentage * 2
+      );
+      setMainWidth(floorToHalf(svgWidth - reservedSpaceLeftRight));
+      setMainStart(floorToHalf(svgWidth * reservedSpacePercentage));
+      setTotalWidth(svgWidth);
+      setTotalHeight(svgHeight);
+    }
+  }, [svgReference, height]);
+  const computeBarActions = useCallback(
+    ({
+      config,
+      bar_x,
+      start_y,
+      main
+    }) => {
+      const GAP_BETWEEN = 4;
+      const PADDING_X = 8;
+      const PADDING_Y = 4;
+      const LINE_HEIGHT = configurations.bars.actionsTextLineHeight;
+      const ACTIONS_MIN_HEIGHT = 44;
+      const wrapText = (text, maxWidth) => {
+        const words = text.split(" ");
+        const lines = [];
+        let currentLine = words[0];
+        for (let i = 1; i < words.length; i++) {
+          const word = words[i];
+          const testLine = currentLine + " " + word;
+          const textWidth = testLine.length * 10;
+          if (textWidth > maxWidth) {
+            lines.push(currentLine);
+            currentLine = word;
+          } else {
+            currentLine = testLine;
+          }
+        }
+        lines.push(currentLine);
+        return lines;
+      };
+      const latest_h = [];
+      const generate = config.actions.map((item, index) => {
+        const actions_w = totalWidth - (mainWidth + mainStart + configurations.bars.width + configurations.bars.strokeWidth + configurations.bars.actionsGap);
+        const actions_x = main ? bar_x + configurations.bars.actionsGap : bar_x - actions_w - configurations.bars.actionsGap;
+        const wrappedLabel = wrapText(item.label, actions_w - PADDING_X * 2);
+        const actions_h = Math.max(
+          ACTIONS_MIN_HEIGHT,
+          PADDING_Y * 2 + wrappedLabel.length * LINE_HEIGHT + (item.sublabel ? LINE_HEIGHT : 0)
+        );
+        latest_h.push(actions_h);
+        let cummulative_h = 0;
+        for (let i = 0; i < index; i++) {
+          cummulative_h += latest_h[i];
+        }
+        const actions_y = start_y + configurations.bars.actionsGap + cummulative_h + index * GAP_BETWEEN;
+        const label_x = actions_x + PADDING_X;
+        const label_y = actions_y + PADDING_Y + 14;
+        if (item.sublabel) {
+          const sublabel_x = label_x;
+          const sublabel_y = label_y + wrappedLabel.length * LINE_HEIGHT;
+          return {
+            actions_x: Math.max(actions_x, 0),
+            actions_y: Math.max(actions_y, 0),
+            actions_w: Math.max(actions_w, 0),
+            actions_h: Math.max(actions_h, 0),
+            label: item.label,
+            label_x: Math.max(label_x, 0),
+            label_y: Math.max(label_y, 0),
+            wrappedLabel,
+            sublabel: item.sublabel,
+            sublabel_x,
+            sublabel_y
+          };
+        }
+        return {
+          actions_x: Math.max(actions_x, 0),
+          actions_y: Math.max(actions_y, 0),
+          actions_w: Math.max(actions_w, 0),
+          actions_h: Math.max(actions_h, 0),
+          label: item.label,
+          label_x: Math.max(label_x, 0),
+          label_y: Math.max(label_y, 0),
+          wrappedLabel
+        };
+      });
+      return generate;
+    },
+    [mainStart, mainWidth, configurations, totalWidth]
+  );
+  const computeBar = useCallback(
+    ({
+      mainHeightGraph,
+      config,
+      getPointsPositionIndicatorX,
+      place_at,
+      main
+    }) => {
+      const START_Y = 17.5;
+      const APPROXIMATE_BAR_STROKE_WIDTH = configurations.bars.strokeWidth / 2;
+      const get_position_at_indicator = getPointsPositionIndicatorX[place_at];
+      const dynamic_pos_secondary_x = get_position_at_indicator - APPROXIMATE_BAR_STROKE_WIDTH - configurations.bars.width - configurations.area.indicators.margin;
+      const dynamic_pos_main_x = get_position_at_indicator + APPROXIMATE_BAR_STROKE_WIDTH + configurations.area.indicators.strokeWidth + configurations.area.indicators.margin;
+      const h = mainHeightGraph - configurations.bars.actionsGap - START_Y;
+      const calculate_filled_bar = floorToHalf(config.percentage / 100 * h);
+      const x = floorToHalf(main ? dynamic_pos_main_x : dynamic_pos_secondary_x);
+      const w = floorToHalf(configurations.bars.width);
+      const outlined_y = START_Y + APPROXIMATE_BAR_STROKE_WIDTH + configurations.bars.actionsGap;
+      const outlined_h = h - calculate_filled_bar;
+      const filled_y = outlined_h + outlined_y;
+      const filled_h = calculate_filled_bar;
+      const get_bar_x = main ? x + w + APPROXIMATE_BAR_STROKE_WIDTH : x - APPROXIMATE_BAR_STROKE_WIDTH;
+      const actions = computeBarActions({
+        config,
+        start_y: START_Y,
+        bar_x: get_bar_x,
+        main
+      });
+      const header_title_x = actions[0].actions_x;
+      const header_title_y = 14;
+      return {
+        x: Math.max(x, 0),
+        w: Math.max(w, 0),
+        outlined_y: Math.max(outlined_y, 0),
+        outlined_h: Math.max(outlined_h, 0),
+        filled_y: Math.max(filled_y, 0),
+        filled_h: Math.max(filled_h, 0),
+        colorPrimary: config.color_primary,
+        colorSecondary: config.color_secondary,
+        strokeWidth: configurations.bars.strokeWidth,
+        barActions: {
+          header: {
+            title: config.header,
+            x: header_title_x,
+            y: header_title_y
+          },
+          actions
+        }
+      };
+    },
+    [configurations, computeBarActions]
+  );
+  const computeArea = useCallback(
+    ({
+      mainHeightGraph,
+      barMain
+    }) => {
+      const part_1 = {
+        x1: mainStart,
+        x2: floorToHalf(
+          mainStart + configurations.area.outersPartsWidth + configurations.area.additionalSpaceVisualize
+        ),
+        y1: mainHeightGraph - configurations.area.strokeWidth,
+        y2: mainHeightGraph - configurations.area.strokeWidth,
+        strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
+      };
+      const part_2 = {
+        x1: floorToHalf(mainStart + configurations.area.outersPartsWidth),
+        x2: floorToHalf(barMain.x - configurations.area.outersPartsWidth),
+        y1: mainHeightGraph - configurations.area.strokeWidth,
+        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
+      };
+      const part_3 = {
+        x1: floorToHalf(
+          barMain.x - configurations.area.outersPartsWidth - configurations.area.additionalSpaceVisualize
+        ),
+        x2: floorToHalf(barMain.x),
+        y1: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        y2: barMain.filled_y + 1 - configurations.area.additionalSpaceVisualize,
+        strokeWidth: barMainConfiguration.percentage === 0 ? 0 : configurations.area.graphLineStrokeWidth
+      };
+      return {
+        part_1,
+        part_2,
+        part_3
+      };
+    },
+    [mainStart, configurations, barMainConfiguration]
+  );
+  const computeIndicators = useCallback(
+    ({ mainHeight }) => {
+      const points_total_width = mainWidth - configurations.area.indicators.margin * 2;
+      const points_start = mainStart + configurations.area.indicators.margin;
+      const points_gap = (points_total_width - configurations.area.indicators.strokeWidth) / (configurations.area.indicators.count - 1);
+      const base_line_y = floorToHalf(
+        totalHeight - (configurations.area.indicators.height + 0.5) - mainHeight
+      );
+      const points_y = floorToHalf(
+        totalHeight - configurations.area.indicators.height - mainHeight
+      );
+      return {
+        y: points_y,
+        base_line_y,
+        gap: points_gap,
+        start: points_start
+      };
+    },
+    [mainWidth, mainStart, totalHeight, configurations]
+  );
+  const computeTimeline = useCallback(
+    ({ mainHeight }) => {
+      const MANY_SEGMENTS_PER_YEAR = 2;
+      const segments_count = (configurations.area.indicators.count - 1) * MANY_SEGMENTS_PER_YEAR;
+      const segments_render = barMainConfiguration.place_at_ani * 2;
+      const segments_padding_y = 4.5;
+      const segments_y = floorToHalf(
+        totalHeight - mainHeight + segments_padding_y + configurations.mainGap
+      );
+      const margin_x = configurations.area.indicators.margin;
+      const indicator_width = configurations.area.indicators.strokeWidth;
+      const gap = configurations.timeline.gap;
+      const segments_x = mainStart + margin_x + indicator_width + gap;
+      const segments_total_width = mainWidth - (margin_x * 2 + indicator_width * (segments_count + 1));
+      const segments_total_gaps = segments_count * configurations.timeline.gap;
+      const segments_w = (segments_total_width - segments_total_gaps) / segments_count;
+      const detail_left_text_y = floorToHalf(
+        totalHeight - mainHeight + configurations.mainGap + configurations.timeline.contentHeight - 3
+      );
+      const detail_left_text_x = floorToHalf(mainStart - 16);
+      const detail_right_text_y = detail_left_text_y;
+      const detail_right_text_x = floorToHalf(mainWidth + mainStart + 16);
+      return {
+        segments: {
+          count: segments_render,
+          w: segments_w,
+          x: segments_x,
+          y: segments_y,
+          total_width: segments_total_width
+        },
+        text: {
+          left: {
+            y: detail_left_text_y,
+            x: detail_left_text_x
+          },
+          right: {
+            y: detail_right_text_y,
+            x: detail_right_text_x
+          }
+        }
+      };
+    },
+    [
+      mainWidth,
+      mainStart,
+      configurations,
+      totalHeight,
+      barMainConfiguration.place_at_ani
+    ]
+  );
+  const computeAction = useCallback(
+    ({
+      mainHeight,
+      indicator_first_x,
+      indicator_last_x
+    }) => {
+      const HEIGHT_TEXT_FONTSIZE_12 = 12;
+      const action_left_text_y = floorToHalf(
+        totalHeight - mainHeight + HEIGHT_TEXT_FONTSIZE_12 + configurations.mainGap * 2 + configurations.timeline.contentHeight
+      );
+      const action_left_text_x = indicator_first_x + configurations.area.indicators.margin;
+      const action_right_text_y = action_left_text_y;
+      const action_right_text_x = floorToHalf(
+        indicator_last_x + configurations.area.indicators.margin
+      );
+      const PADDING_Y = 13;
+      const slider_y = totalHeight - mainHeight + configurations.mainGap * 2 + configurations.timeline.contentHeight * 2 + configurations.actions.contentGap + PADDING_Y;
+      const slider_x = mainStart + configurations.area.indicators.margin;
+      const slider_w = mainWidth - configurations.area.indicators.margin * 2;
+      return {
+        left: {
+          y: action_left_text_y,
+          x: action_left_text_x
+        },
+        right: {
+          y: action_right_text_y,
+          x: action_right_text_x
+        },
+        slider: {
+          y: slider_y,
+          x: slider_x,
+          w: slider_w
+        }
+      };
+    },
+    [configurations, totalHeight, mainStart, mainWidth]
+  );
+  const graph = useMemo(() => {
+    const mainHeight = configurations.mainGap * 2 + configurations.timeline.contentHeight * 2 + (sliderActive ? configurations.actions.contentGap + configurations.actions.contentSliderHeight : 0);
+    const mainHeightGraph = totalHeight - configurations.area.indicators.height - configurations.area.strokeWidth - mainHeight;
+    const indicators = computeIndicators({
+      mainHeight
+    });
+    const getPointsPositionIndicatorX = Array.from({
+      length: configurations.area.indicators.count
+    }).map((_, index) => {
+      return floorToHalf(indicators.start + index * indicators.gap);
+    });
+    const bar_main = computeBar({
+      mainHeightGraph,
+      config: barMainConfiguration,
+      getPointsPositionIndicatorX,
+      place_at: barMainConfiguration.place_at_ani,
+      main: true
+    });
+    let bar_secondary;
+    if (barSecondaryConfiguration) {
+      bar_secondary = computeBar({
+        mainHeightGraph,
+        config: barSecondaryConfiguration,
+        getPointsPositionIndicatorX,
+        place_at: sliderValue,
+        main: false
+      });
+    }
+    const area = computeArea({
+      barMain: bar_main,
+      mainHeightGraph
+    });
+    const timeline = computeTimeline({
+      mainHeight
+    });
+    const action = computeAction({
+      mainHeight,
+      indicator_first_x: indicators.start,
+      indicator_last_x: indicators.start + (configurations.area.indicators.count - 1) * indicators.gap
+    });
+    return {
+      mainHeightGraph,
+      main: {
+        bars: {
+          main: bar_main,
+          secondary: bar_secondary
+        },
+        area: { ...area },
+        indicators: { ...indicators }
+      },
+      timeline: { ...timeline },
+      action: { ...action }
+    };
+  }, [
+    totalHeight,
+    computeBar,
+    computeArea,
+    computeIndicators,
+    computeTimeline,
+    computeAction,
+    configurations,
+    sliderValue,
+    sliderActive,
+    barMainConfiguration,
+    barSecondaryConfiguration
+  ]);
+  return /* @__PURE__ */ jsxs(
+    UnitLinkGraphStyled,
+    {
+      width: "100%",
+      height: "100%",
+      xmlns: "http://www.w3.org/2000/svg",
+      ref: svgReference,
+      style: {
+        position: "relative"
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: graph.main.area.part_1.x1,
+            x2: graph.main.area.part_1.x2,
+            y1: graph.main.area.part_1.y1,
+            y2: graph.main.area.part_1.y2,
+            strokeWidth: graph.main.area.part_1.strokeWidth,
+            stroke: graph.main.bars.main.colorPrimary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: graph.main.area.part_2.x1,
+            x2: graph.main.area.part_2.x2,
+            y1: graph.main.area.part_2.y1,
+            y2: graph.main.area.part_2.y2,
+            strokeWidth: graph.main.area.part_2.strokeWidth,
+            stroke: graph.main.bars.main.colorPrimary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: graph.main.area.part_3.x1,
+            x2: graph.main.area.part_3.x2,
+            y1: graph.main.area.part_3.y1,
+            y2: graph.main.area.part_3.y2,
+            strokeWidth: graph.main.area.part_3.strokeWidth,
+            stroke: graph.main.bars.main.colorPrimary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "polygon",
+          {
+            points: `
+            ${graph.main.area.part_2.x2},${graph.main.bars.main.filled_y + 1.5} 
+            ${graph.main.area.part_3.x2},${graph.main.bars.main.filled_y + 1.5}
+            ${graph.main.area.part_3.x2},${graph.mainHeightGraph} 
+            ${graph.main.area.part_2.x1},${graph.mainHeightGraph}`,
+            fill: graph.main.bars.main.colorSecondary
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RenderBar,
+          {
+            bar: graph.main.bars.main,
+            textLineHeight: configurations.bars.actionsTextLineHeight
+          }
+        ),
+        graph.main.bars.secondary && /* @__PURE__ */ jsx(
+          RenderBar,
+          {
+            bar: graph.main.bars.secondary,
+            textLineHeight: configurations.bars.actionsTextLineHeight
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: 0,
+            x2: totalWidth,
+            y1: graph.main?.indicators.base_line_y,
+            y2: graph.main?.indicators.base_line_y,
+            strokeWidth: 1,
+            stroke: "black"
+          }
+        ),
+        Array.from({ length: configurations.area.indicators.count }).map(
+          (_, index) => /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: Math.max(
+                floorToHalf(
+                  graph.main.indicators.start + index * graph.main.indicators.gap
+                ),
+                0
+              ),
+              y: Math.max(graph.main.indicators.y, 0),
+              width: Math.max(configurations.area.indicators.strokeWidth, 0),
+              fill: "black",
+              height: Math.max(configurations.area.indicators.height, 0)
+            },
+            index
+          )
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "text-contribution",
+            y: graph.timeline.text.left.y,
+            x: graph.timeline.text.left.x,
+            textAnchor: "end",
+            children: timeline_texts.left
+          }
+        ),
+        timeline_texts.right && /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "text-contribution",
+            y: graph.timeline.text.right.y,
+            x: graph.timeline.text.right.x,
+            textAnchor: "start",
+            children: timeline_texts.right
+          }
+        ),
+        Array.from({
+          length: graph.timeline.segments.count
+        }).map((_, index) => {
+          const x = graph.timeline.segments.x + index * graph.timeline.segments.w + index * configurations.timeline.gap + index * configurations.area.indicators.strokeWidth;
+          const w = graph.timeline.segments.w - configurations.timeline.gap;
+          const active = sliderActive ? sliderValue * 2 - 1 >= index : true;
+          return /* @__PURE__ */ jsx(
+            "rect",
+            {
+              "data-index": index,
+              x: Math.max(x, 0),
+              y: graph.timeline.segments.y,
+              fill: active ? colors.blue_500 : colors.pink_500,
+              width: Math.max(w, 0),
+              height: 6
+            },
+            index
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "text-action",
+            y: graph.action.left.y,
+            x: graph.action.left.x,
+            textAnchor: "middle",
+            fill: sliderActive ? sliderValue === configurations.actions.min ? colors.gray_950 : colors.gray_600 : colors.gray_600,
+            fontWeight: sliderActive ? sliderValue === configurations.actions.min ? 500 : 400 : 400,
+            children: "astazi"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "text",
+          {
+            className: "text-action",
+            y: graph.action.right.y,
+            x: graph.action.right.x,
+            textAnchor: "middle",
+            fill: sliderActive ? sliderValue === configurations.area.indicators.count - 1 ? colors.gray_950 : colors.gray_600 : colors.gray_600,
+            fontWeight: sliderActive ? sliderValue === configurations.area.indicators.count - 1 ? 500 : 400 : 400,
+            children: [
+              configurations.area.indicators.count - 1,
+              " ani"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          RenderSlider,
+          {
+            sliderPosition: {
+              x: graph.action.slider.x,
+              w: graph.action.slider.w,
+              y: graph.action.slider.y
+            },
+            min: 0,
+            max: configurations.area.indicators.count - 1,
+            value: sliderValue,
+            onChange: setSliderValue,
+            limit: barMainConfiguration.place_at_ani
+          }
+        )
+      ]
+    }
+  );
+};
+const RenderBar = ({ bar, textLineHeight }) => {
+  const [activeBar, setActiveBar] = useState(0);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: bar.x,
+        y: bar.outlined_y,
+        width: bar.w,
+        height: bar.outlined_h,
+        fill: colors.white,
+        stroke: bar.colorPrimary,
+        strokeWidth: bar.strokeWidth
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: bar.x,
+        y: bar.filled_y,
+        width: bar.w,
+        height: bar.filled_h,
+        fill: bar.colorPrimary,
+        stroke: bar.colorPrimary,
+        strokeWidth: bar.strokeWidth
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: bar.barActions.header.x,
+        y: bar.barActions.header.y,
+        className: "text-bar-header",
+        children: bar.barActions.header.title
+      }
+    ),
+    bar.barActions.actions.map((action, index) => {
+      const isActive = activeBar === index;
+      return /* @__PURE__ */ jsxs(
+        "g",
+        {
+          className: "bar-actions-group",
+          onClick: () => setActiveBar(index),
+          children: [
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                fill: isActive ? bar.colorPrimary : bar.colorSecondary,
+                rx: 4,
+                ry: 4,
+                height: action.actions_h,
+                width: action.actions_w,
+                x: action.actions_x,
+                y: action.actions_y
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "text",
+              {
+                className: "text-bar-actions-label",
+                x: action.label_x,
+                y: action.label_y,
+                fill: isActive ? colors.white : bar.colorPrimary,
+                children: action.wrappedLabel?.map((line, lineIndex) => /* @__PURE__ */ jsx(
+                  "tspan",
+                  {
+                    x: action.label_x,
+                    dy: lineIndex === 0 ? 0 : textLineHeight,
+                    children: line
+                  },
+                  lineIndex
+                ))
+              }
+            ),
+            action.sublabel && /* @__PURE__ */ jsx(
+              "text",
+              {
+                fill: isActive ? colors.white : bar.colorPrimary,
+                className: "text-bar-actions-sublabel",
+                x: action.sublabel_x,
+                y: action.sublabel_y,
+                children: action.sublabel
+              }
+            )
+          ]
+        },
+        index
+      );
+    })
+  ] });
+};
+const RenderSlider = ({
+  sliderPosition,
+  min = 0,
+  max = 7,
+  stepSize = 1,
+  value: externalValue = 0,
+  limit = 0,
+  onChange
+}) => {
+  const PADDING_Y = 13;
+  const GAP_TIMELINE_ACTIONS = 10;
+  const [internalValue, setInternalValue] = useState(externalValue || min);
+  const [isDragging, setIsDragging] = useState(false);
+  const sliderRef = useRef(null);
+  const thumbRenderProperties = useMemo(() => {
+    return {
+      y: sliderPosition.y - PADDING_Y,
+      w: 61,
+      h: 32
+    };
+  }, [sliderPosition.y]);
+  const computeValuePosition = useCallback(
+    (e) => {
+      const sliderRect = sliderRef?.current?.getBoundingClientRect();
+      if (!sliderRect || !isDragging) return;
+      let clientX = 0;
+      if ("touches" in e) {
+        clientX = e.touches[0].clientX;
+      } else if ("clientX" in e) {
+        clientX = e.clientX;
+      }
+      const posX = clientX - sliderRect.left;
+      const effectiveWidth = sliderPosition.w + thumbRenderProperties.w;
+      const rawValue = posX / effectiveWidth * (max - min) + min;
+      let selectedValue = Math.round(rawValue / stepSize) * stepSize;
+      selectedValue = Math.max(min, selectedValue);
+      selectedValue = Math.min(max, selectedValue);
+      if (selectedValue > limit) {
+        selectedValue = limit;
+        return;
+      }
+      setInternalValue(selectedValue);
+      onChange && onChange(selectedValue);
+    },
+    [
+      max,
+      min,
+      onChange,
+      stepSize,
+      sliderPosition.w,
+      isDragging,
+      thumbRenderProperties.w,
+      limit
+    ]
+  );
+  const onMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const onMouseMove = useCallback(
+    (e) => {
+      if (isDragging) {
+        computeValuePosition(e);
+      }
+    },
+    [isDragging, computeValuePosition]
+  );
+  const onThumbMouseDown = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const onTouchEnd = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const onTouchMove = useCallback(
+    (e) => {
+      if (isDragging) {
+        computeValuePosition(e);
+      }
+    },
+    [computeValuePosition, isDragging]
+  );
+  const onTouchStart = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  };
+  const thumbPositionX = useMemo(() => {
+    const trackWidth = sliderPosition.w;
+    const normalizeValue = (internalValue - min) / (max - min);
+    const x = normalizeValue * trackWidth + sliderPosition.x;
+    return x - thumbRenderProperties.w / 2 + 2;
+  }, [
+    min,
+    max,
+    internalValue,
+    sliderPosition.x,
+    sliderPosition.w,
+    thumbRenderProperties.w
+  ]);
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener("mousemove", onMouseMove);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("touchmove", onTouchMove, { passive: true });
+      window.addEventListener("touchend", onTouchEnd);
+    }
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("touchmove", onTouchMove);
+      window.removeEventListener("touchend", onTouchEnd);
+    };
+  }, [isDragging, onMouseMove, onMouseUp, onTouchMove, onTouchEnd]);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        ref: sliderRef,
+        x: Math.max(sliderPosition.x, 0),
+        y: Math.max(sliderPosition.y, 0),
+        width: Math.max(sliderPosition.w, 0),
+        height: 6,
+        rx: 3,
+        ry: 3,
+        fill: colors.gray_100
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "g",
+      {
+        transform: `translate(${thumbPositionX}, ${thumbRenderProperties.y})`,
+        onMouseDown: onThumbMouseDown,
+        onTouchStart,
+        style: { cursor: isDragging ? "grabbing" : "grab" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              width: Math.max(thumbRenderProperties.w, 0),
+              height: Math.max(thumbRenderProperties.h, 0),
+              rx: 16,
+              ry: 16,
+              fill: colors.info_600
+            }
+          ),
+          internalValue !== min && internalValue !== max && /* @__PURE__ */ jsxs(
+            "text",
+            {
+              x: thumbRenderProperties.w / 2,
+              y: -3 - GAP_TIMELINE_ACTIONS,
+              textAnchor: "middle",
+              fill: colors.black,
+              fontSize: 12,
+              fontWeight: 500,
+              children: [
+                internalValue,
+                " ani"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "text",
+            {
+              x: thumbRenderProperties.w / 2,
+              y: thumbRenderProperties.h / 2 + 5,
+              textAnchor: "middle",
+              fill: colors.white,
+              fontSize: 14,
+              fontWeight: 400,
+              children: "Trage"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+export { UnitLinkGraph as default };