rbro-tat-uds 2.2.1 → 2.2.3

package/build/esm/components/GraficContributieUnitlinked/GraficContributieUnitlinked.js

@@ -0,0 +1,153 @@
+"use strict";
+"use client";
+
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { colors } from '../../utils';
+import { useRef, useState, useMemo, useEffect } from 'react';
+import styled from 'styled-components';
+
+const GraficContributieUnitlinkedStyled = styled.svg`
+  & > .limit_label_main {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${colors.gray_950};
+  }
+  & > .limit_label_secondary {
+    font-size: 16px;
+    font-weight: 700;
+    fill: ${colors.gray_950};
+  }
+`;
+const GraficContributieUnitlinked = ({
+  limitTop = 50,
+  limitBottom = 100,
+  limitTopLabel = "Top Label",
+  limitBottomLabel = "Bottom Label",
+  currency = "RON",
+  height = 142,
+  colorBar = colors.danger_100,
+  colorFilledBar = colors.success_400
+}) => {
+  const RO = new Intl.NumberFormat("RO");
+  const svg_ref = useRef(null);
+  const [w, setW] = useState(0);
+  const BAR_HEIGHT = 24;
+  const configuration = useMemo(() => {
+    const barY = height / 2 - BAR_HEIGHT / 2;
+    const barYStop = barY + BAR_HEIGHT;
+    const limitTopHeight = height - barYStop + BAR_HEIGHT;
+    const limitTopX = Math.min(Math.max(0, limitTop / limitBottom * w), w - 2);
+    const limitTopLabelsAnchor = limitTopX > w * 0.75 ? "end" : "start";
+    const limitBottomX = w - 2;
+    const limitBottomY = barY;
+    const limitBottomHeight = limitTopHeight;
+    return {
+      barY,
+      barYStop,
+      limitTopHeight,
+      limitTopX,
+      limitTopLabelsAnchor,
+      limitBottomY,
+      limitBottomHeight,
+      limitBottomX
+    };
+  }, [limitTop, limitBottom, height, w]);
+  useEffect(() => {
+    if (svg_ref.current) {
+      setW(svg_ref.current.clientWidth);
+    }
+  }, [svg_ref]);
+  return /* @__PURE__ */ jsxs(
+    GraficContributieUnitlinkedStyled,
+    {
+      ref: svg_ref,
+      width: "100%",
+      height,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: configuration.barY,
+            width: "100%",
+            height: BAR_HEIGHT,
+            fill: colorBar
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: 0,
+            y: configuration.barY,
+            width: configuration.limitTopX,
+            height: BAR_HEIGHT,
+            fill: colorFilledBar
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: configuration.limitTopX,
+            y: 0,
+            height: configuration.limitTopHeight,
+            fill: "black",
+            width: 2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "limit_label_main",
+            textAnchor: configuration.limitTopLabelsAnchor,
+            x: configuration.limitTopX + (configuration.limitTopLabelsAnchor === "start" ? 12 : -12),
+            y: 12,
+            children: limitTopLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "limit_label_secondary",
+            textAnchor: configuration.limitTopLabelsAnchor,
+            x: configuration.limitTopX + (configuration.limitTopLabelsAnchor === "start" ? 12 : -12),
+            y: 12 + 20,
+            children: RO.format(limitTop) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: configuration.limitBottomX,
+            y: configuration.limitBottomY,
+            height: configuration.limitBottomHeight,
+            fill: "black",
+            width: 2
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "limit_label_main",
+            textAnchor: "end",
+            x: configuration.limitBottomX - 12,
+            y: height - 20,
+            children: limitBottomLabel
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            className: "limit_label_secondary",
+            textAnchor: "end",
+            x: configuration.limitBottomX - 12,
+            y: height,
+            children: RO.format(limitBottom) + " " + currency
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { GraficContributieUnitlinked as default };

package/build/esm/components/GraficContributieUnitlinked/index.js

@@ -0,0 +1,8 @@
+"use strict";
+"use client";
+
+import GraficContributieUnitlinked from './GraficContributieUnitlinked.js';
+
+
+
+export { GraficContributieUnitlinked as default };

package/build/esm/components/Illustration/Illustrations.js

@@ -11,6 +11,7 @@ import SvgMNoFees from './illustrations/m-no-fees.svg.js';
 import SvgMQuickMoney from './illustrations/m-quick-money.svg.js';
 import SvgMCelebrationRaiffeisen from './illustrations/m-celebration-raiffeisen.svg.js';
 import SvgSHousingLoan from './illustrations/s-housing-loan.svg.js';
+import SvgSRegularInvestment from './illustrations/s-regular-investment.svg.js';
 
 const illustrations = {
   "m-investing-money": SvgMInvestingMoney,
@@ -22,7 +23,8 @@ const illustrations = {
   "m-no-fees": SvgMNoFees,
   "m-quick-money": SvgMQuickMoney,
   "m-celebration-raiffeisen": SvgMCelebrationRaiffeisen,
-  "s-housing-loan": SvgSHousingLoan
+  "s-housing-loan": SvgSHousingLoan,
+  "s-regular-investment": SvgSRegularInvestment
 };
 
 export { illustrations };