rbro-tat-uds 1.6.36 → 2.0.0

package/build/cjs/components/GraficFondInvestitiiInflatie/GraficFondInvestitiiInflatie.cjs

@@ -0,0 +1,344 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var utils = require('../../utils');
+var styled = require('styled-components');
+
+const GraficFondInvestitiiInflatieStyled = styled.svg`
+  ${({ $dev }) => $dev && styled.css`
+      background-color: #ffccef;
+
+      & > .dev-graph {
+        fill: #8eeaea8a;
+      }
+    `}
+
+  & > .col_1_text,
+    & > .col_2_text,
+    & > .col_3_text {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  & > .col_1_text,
+  & > .col_1_rect {
+    fill: ${({ $col1Color }) => $col1Color ? utils.colors[$col1Color] : utils.colors.success_500};
+  }
+  & > .col_2_text,
+  & > .col_2_rect {
+    fill: ${({ $col2Color }) => $col2Color ? utils.colors[$col2Color] : utils.colors.info_500};
+  }
+  & > .col_3_text,
+  & > .col_3_rect {
+    fill: ${({ $col3Color }) => $col3Color ? utils.colors[$col3Color] : utils.colors.warning_500};
+  }
+
+  & > .textLeft {
+    font-size: 14px;
+    font-weight: 500;
+    fill: ${utils.colors.gray_950};
+  }
+  & > .textValueLeft {
+    font-size: 16px;
+    font-weight: 500;
+    fill: ${utils.colors.gray_950};
+  }
+
+  & > .col_1_sub_text,
+  & > .col_2_sub_text,
+  & > .col_3_sub_text {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_800};
+  }
+`;
+const GraficFondInvestitiiInflatie = ({
+  height = 280,
+  paddingLeft = 240,
+  paddingRight = 0,
+  paddingTop = 24,
+  paddingBottom = 60,
+  gap = 16,
+  max = 3e4,
+  line = 2e4,
+  min = 1e4,
+  textLeft = "Text left",
+  textValueLeft = 2e4,
+  col1Text = "3 ani",
+  col2Text = "5 ani",
+  col3Text = "10 ani",
+  col1Value = 15e3,
+  col2Value = 13e3,
+  col3Value = 11e3,
+  col1Color = "danger_500",
+  col2Color = "danger_500",
+  col3Color = "danger_500",
+  currency = "RON",
+  dev = false
+}) => {
+  const RO = new Intl.NumberFormat("RO");
+  const svg_ref = React.useRef(null);
+  const [w, setW] = React.useState(0);
+  const [h, setH] = React.useState(0);
+  const textTopRef = React.useRef(null);
+  const calculate = React.useMemo(() => {
+    const graphW = Math.abs(w - paddingLeft - paddingRight);
+    const graphH = Math.abs(h - paddingTop - paddingBottom);
+    const lineY = Math.abs(graphH / (max - min) * (max - line) + paddingTop);
+    const colWidth = (graphW - 2 * gap) / 3;
+    const onCalculateCol = (value) => {
+      const col_positive = Math.abs(graphH / (max - min) * (value - line));
+      const col_negative = Math.abs(graphH / (max - min) * (line - value));
+      const h2 = value > line ? col_positive : col_negative;
+      return {
+        h: h2,
+        y: value > line ? lineY - h2 : lineY
+      };
+    };
+    const col_1 = {
+      x: paddingLeft,
+      y: onCalculateCol(col1Value).y,
+      w: colWidth,
+      h: onCalculateCol(col1Value).h,
+      text_y: col1Value >= line ? +onCalculateCol(col1Value).y - 12 : +onCalculateCol(col1Value).y + +onCalculateCol(col1Value).h + 12 + 10
+    };
+    const col_2 = {
+      x: paddingLeft + colWidth + gap,
+      y: onCalculateCol(col2Value).y,
+      w: colWidth,
+      h: onCalculateCol(col2Value).h,
+      text_y: col2Value >= line ? +onCalculateCol(col2Value).y - 12 : +onCalculateCol(col2Value).y + +onCalculateCol(col2Value).h + 12 + 10
+    };
+    const col_3 = {
+      x: paddingLeft + colWidth * 2 + gap * 2,
+      y: onCalculateCol(col3Value).y,
+      w: colWidth,
+      h: onCalculateCol(col3Value).h,
+      text_y: col3Value >= line ? +onCalculateCol(col3Value).y - 12 : +onCalculateCol(col3Value).y + onCalculateCol(col3Value).h + 12 + 10
+    };
+    return {
+      graphW,
+      graphH,
+      lineY,
+      col_1,
+      col_2,
+      col_3,
+      paddingLeft
+    };
+  }, [
+    w,
+    h,
+    min,
+    max,
+    line,
+    gap,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    col1Value,
+    col2Value,
+    col3Value,
+    textTopRef
+  ]);
+  React.useEffect(() => {
+    if (svg_ref && svg_ref.current) {
+      const handleResize = () => {
+        const clientW = svg_ref?.current?.clientWidth;
+        setW(+clientW);
+        setH(height);
+      };
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [svg_ref, height]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    GraficFondInvestitiiInflatieStyled,
+    {
+      ref: svg_ref,
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${w} ${h}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      $col1Color: col1Color,
+      $col2Color: col2Color,
+      $col3Color: col3Color,
+      $dev: dev,
+      children: [
+        dev && /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: "dev-graph",
+            width: calculate.graphW,
+            height: calculate.graphH,
+            x: calculate.paddingLeft,
+            y: paddingTop
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_1_text",
+            textAnchor: "middle",
+            x: calculate.col_1.x + calculate.col_1.w / 2,
+            y: calculate.col_1.text_y,
+            children: RO.format(col1Value) + ` ${currency}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: "col_1_rect",
+            width: calculate.col_1.w,
+            height: calculate.col_1.h,
+            x: calculate.col_1.x,
+            y: calculate.col_1.y
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.col_1.x,
+            x2: calculate.col_1.x + calculate.col_1.w,
+            y1: h - 27,
+            y2: h - 27,
+            strokeWidth: 1,
+            stroke: "#D5D5D6"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_1_sub_text",
+            textAnchor: "middle",
+            x: calculate.col_1.x + calculate.col_1.w / 2,
+            y: h - 5,
+            children: col1Text
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_2_text",
+            textAnchor: "middle",
+            x: calculate.col_2.x + calculate.col_2.w / 2,
+            y: calculate.col_2.text_y,
+            children: RO.format(col2Value) + ` ${currency}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: "col_2_rect",
+            width: calculate.col_2.w,
+            height: calculate.col_2.h,
+            x: calculate.col_2.x,
+            y: calculate.col_2.y
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.col_2.x,
+            x2: calculate.col_2.x + calculate.col_2.w,
+            y1: h - 27,
+            y2: h - 27,
+            strokeWidth: 1,
+            stroke: "#D5D5D6"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_1_sub_text",
+            textAnchor: "middle",
+            x: calculate.col_2.x + calculate.col_2.w / 2,
+            y: h - 5,
+            children: col2Text
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_3_text",
+            textAnchor: "middle",
+            x: calculate.col_3.x + calculate.col_3.w / 2,
+            y: calculate.col_3.text_y,
+            children: RO.format(col3Value) + ` ${currency}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: "col_3_rect",
+            width: calculate.col_3.w,
+            height: calculate.col_3.h,
+            x: calculate.col_3.x,
+            y: calculate.col_3.y
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.col_3.x,
+            x2: calculate.col_3.x + calculate.col_3.w,
+            y1: h - 27,
+            y2: h - 27,
+            strokeWidth: 1,
+            stroke: "#D5D5D6"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_1_sub_text",
+            textAnchor: "middle",
+            x: calculate.col_3.x + calculate.col_3.w / 2,
+            y: h - 5,
+            children: col3Text
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "textLeft",
+            textAnchor: "start",
+            x: 0,
+            y: calculate.lineY - 26,
+            children: textLeft
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "textValueLeft",
+            textAnchor: "start",
+            x: 0,
+            y: calculate.lineY - 6,
+            children: RO.format(textValueLeft) + ` ${currency}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            x2: w,
+            y1: calculate.lineY,
+            y2: calculate.lineY,
+            strokeWidth: 2,
+            stroke: utils.colors.gray_950
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficFondInvestitiiInflatie;

package/build/cjs/components/GraficFondInvestitiiInflatie/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var GraficFondInvestitiiInflatie = require('./GraficFondInvestitiiInflatie.cjs');
+
+
+
+exports.default = GraficFondInvestitiiInflatie.default;

package/build/cjs/components/GraficPensii/GraficPensii.cjs

@@ -0,0 +1,356 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const GraficPensiiStyled = styled.svg`
+  & > .label_top,
+  & > .sublabel_top {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 150%;
+  }
+
+  & > .label_top {
+    fill: #232529;
+  }
+  & > .sublabel_top {
+    fill: #0c8e71;
+  }
+
+  & > .label_bottom {
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 171%;
+    color: #232529;
+  }
+  & > .sublabel_bottom {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 150%;
+    color: #232529;
+  }
+
+  & > rect:nth-child(1) {
+    fill: ${utils.colors.gray_60};
+  }
+  & > rect:nth-child(2) {
+    clip-path: inset(0 0 0 0 round 4px 0 0 4px);
+  }
+  & > rect:nth-child(3) {
+    clip-path: inset(0 0 0 0 round 0px 4px 4px 0px);
+  }
+`;
+const GraficPensii = ({
+  max = 100,
+  limit_max = 70,
+  limit_min = 50,
+  value = 0,
+  currency = "RON",
+  label_top = "Pensia standard + Pensia Facultativa",
+  label_limit_min = "Pensie standard",
+  label_limit_max = "Obiectiv pensie"
+}) => {
+  const RO = new Intl.NumberFormat("RO");
+  const svg_ref = React.useRef(null);
+  const refLabelTop = React.useRef(null);
+  const refSublabelTop = React.useRef(null);
+  const refLabelLimitMin = React.useRef(null);
+  const refSublabelLimitMin = React.useRef(null);
+  const refLabelLimitMax = React.useRef(null);
+  const refSublabelLimitMax = React.useRef(null);
+  const [w, setW] = React.useState(0);
+  const [h, setH] = React.useState(0);
+  const offset_bar = 10;
+  const calculate = React.useMemo(() => {
+    const primary_bar_h = 40;
+    const primary_bar_y = h / 2 - primary_bar_h / 2;
+    const secondary_bar_offset_width = w - offset_bar * 2;
+    const secondary_bar_w = Math.min(
+      secondary_bar_offset_width,
+      Math.max(secondary_bar_offset_width * limit_min / max, 0)
+    );
+    const secondary_bar_h = 20;
+    const secondary_bar_y = primary_bar_y + offset_bar;
+    const line_min_x_calc = limit_min * secondary_bar_offset_width / max + 10;
+    const line_min_x = Math.min(
+      secondary_bar_offset_width + 10,
+      Math.max(line_min_x_calc, 10)
+    );
+    const line_max_calc = limit_max * secondary_bar_offset_width / max + 10;
+    const line_max_x = Math.min(
+      secondary_bar_offset_width + 10,
+      Math.max(line_max_calc, 10)
+    );
+    return {
+      primary_bar_h,
+      primary_bar_y,
+      secondary_bar_w,
+      secondary_bar_h,
+      secondary_bar_y,
+      line_min_x,
+      line_max_x
+    };
+  }, [h, w, limit_min, limit_max, max]);
+  const calculate_value = React.useMemo(() => {
+    const offset = offset_bar * 2;
+    const initial = value * (w - offset) / max;
+    const optimized = initial - calculate.secondary_bar_w;
+    const maximum = w - offset - calculate.secondary_bar_w;
+    const fill = value > limit_max ? utils.colors.success_400 : utils.colors.danger_200;
+    const fill_value = value > limit_max ? utils.colors.success_600 : utils.colors.danger_400;
+    return {
+      value: Math.min(maximum, Math.max(0, optimized)),
+      fill,
+      fill_value
+    };
+  }, [w, calculate.secondary_bar_w, value, limit_max, max]);
+  const posX = React.useCallback(
+    (dom, value2, position) => {
+      const { width } = dom.current.getBBox();
+      const limit_end = position === "middle" ? w - width + width / 2 : position === "end" ? w - width : w - width + width;
+      const limit_start = position === "middle" ? width / 2 : position === "end" ? 10 : width + 10;
+      return Math.min(limit_end, Math.max(limit_start, value2));
+    },
+    [w]
+  );
+  const calculateLabelingTopX = React.useCallback(
+    (optimized) => {
+      const label_top_x = calculate.line_min_x + optimized;
+      const sublabel_top_x = calculate.line_min_x + optimized;
+      if (refLabelTop && refLabelTop.current || refSublabelTop && refSublabelTop.current) {
+        return {
+          label_top_x: posX(
+            refLabelTop,
+            label_top_x,
+            "middle"
+          ),
+          sublabel_top_x: posX(
+            refSublabelTop,
+            sublabel_top_x,
+            "middle"
+          )
+        };
+      }
+      return {
+        label_top_x,
+        sublabel_top_x
+      };
+    },
+    [calculate.line_min_x, posX]
+  );
+  const calculateLabelingLimitMinX = React.useCallback(() => {
+    const label_limit_min_x = calculate.line_min_x;
+    const sublabel_limit_min_x = calculate.line_min_x;
+    if (refLabelLimitMin && refLabelLimitMin.current || refSublabelLimitMin && refSublabelLimitMin.current) {
+      return {
+        label_limit_min_x: posX(
+          refLabelLimitMin,
+          label_limit_min_x,
+          "start"
+        ),
+        sublabel_limit_min_x: posX(
+          refSublabelLimitMin,
+          sublabel_limit_min_x,
+          "start"
+        )
+      };
+    }
+    return {
+      label_limit_min_x,
+      sublabel_limit_min_x
+    };
+  }, [calculate.line_min_x, posX]);
+  const calculateLabelingLimitMaxX = React.useCallback(() => {
+    const label_limit_max_x = calculate.line_max_x;
+    const sublabel_limit_max_x = calculate.line_max_x;
+    if (refLabelLimitMax && refLabelLimitMax.current || refSublabelLimitMax && refSublabelLimitMax.current) {
+      return {
+        label_limit_max_x: posX(
+          refLabelLimitMax,
+          label_limit_max_x,
+          "end"
+        ),
+        sublabel_limit_max_x: posX(
+          refSublabelLimitMax,
+          sublabel_limit_max_x,
+          "end"
+        )
+      };
+    }
+    return {
+      label_limit_max_x,
+      sublabel_limit_max_x
+    };
+  }, [calculate.line_max_x, posX]);
+  React.useEffect(() => {
+    if (svg_ref && svg_ref.current) {
+      const h2 = 150;
+      const handleResize = () => {
+        const clientW = svg_ref?.current?.clientWidth;
+        const clientH = svg_ref?.current?.clientHeight;
+        setW(clientW / clientH * h2);
+        setH(h2);
+      };
+      handleResize();
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, [svg_ref]);
+  const [labelTopX, setLabelTopX] = React.useState(0);
+  const [sublabelTopX, setSublabelTopX] = React.useState(0);
+  const [labelLimitMinX, setLabelLimitMinX] = React.useState(0);
+  const [sublabelLimitMinX, setSublabelLimitMinX] = React.useState(0);
+  const [labelLimitMaxX, setLabelLimitMaxX] = React.useState(0);
+  const [sublabelLimitMaxX, setSublabelLimitMaxX] = React.useState(0);
+  React.useEffect(() => {
+    const optimizedValue = calculate_value.value;
+    setLabelTopX(calculateLabelingTopX(optimizedValue).label_top_x);
+    setSublabelTopX(calculateLabelingTopX(optimizedValue).sublabel_top_x);
+  }, [calculate_value.value, calculateLabelingTopX]);
+  React.useEffect(() => {
+    setLabelLimitMinX(calculateLabelingLimitMinX().label_limit_min_x);
+    setSublabelLimitMinX(calculateLabelingLimitMinX().sublabel_limit_min_x);
+    setLabelLimitMaxX(calculateLabelingLimitMaxX().label_limit_max_x);
+    setSublabelLimitMaxX(calculateLabelingLimitMaxX().sublabel_limit_max_x);
+  }, [calculateLabelingLimitMinX, calculateLabelingLimitMaxX]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    GraficPensiiStyled,
+    {
+      ref: svg_ref,
+      width: "100%",
+      height: "100%",
+      viewBox: `0 0 ${w} ${h}`,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: calculate.primary_bar_y,
+            height: calculate.primary_bar_h,
+            width: w,
+            rx: 8
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: offset_bar,
+            y: calculate.secondary_bar_y,
+            height: calculate.secondary_bar_h,
+            width: calculate.secondary_bar_w,
+            fill: calculate_value.fill
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: calculate.line_min_x,
+            y: calculate.secondary_bar_y,
+            height: calculate.secondary_bar_h,
+            width: calculate_value.value,
+            fill: calculate_value.fill_value
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLabelTop,
+            className: "label_top",
+            textAnchor: "middle",
+            x: labelTopX,
+            y: 15,
+            children: label_top
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refSublabelTop,
+            className: "sublabel_top",
+            textAnchor: "middle",
+            x: sublabelTopX,
+            y: 32,
+            children: RO.format(value) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.line_min_x,
+            x2: calculate.line_min_x,
+            y1: calculate.primary_bar_y - offset_bar,
+            y2: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLabelLimitMin,
+            className: "label_bottom",
+            textAnchor: "end",
+            x: labelLimitMinX,
+            y: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar + 20,
+            children: label_limit_min
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refSublabelLimitMin,
+            className: "sublabel_bottom",
+            textAnchor: "end",
+            x: sublabelLimitMinX,
+            y: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar + 40,
+            children: RO.format(limit_min) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.line_max_x,
+            x2: calculate.line_max_x,
+            y1: calculate.primary_bar_y - offset_bar,
+            y2: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLabelLimitMax,
+            className: "label_bottom",
+            textAnchor: "start",
+            x: labelLimitMaxX,
+            y: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar + 20,
+            children: label_limit_max
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refSublabelLimitMax,
+            className: "sublabel_bottom",
+            textAnchor: "start",
+            x: sublabelLimitMaxX,
+            y: calculate.primary_bar_y + calculate.primary_bar_h + offset_bar + 40,
+            children: RO.format(limit_max) + " " + currency
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficPensii;