rbro-tat-uds 1.6.36 → 2.0.0

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

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

package/build/cjs/components/GraficPlanInvestitii/GraficPlanInvestitii.cjs

@@ -0,0 +1,384 @@
+"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 GraficPlanInvestitiiStyled = styled.svg`
+  ${({ $dev }) => $dev && styled.css`
+      background-color: #ffccef;
+
+      & > .dev-graph {
+        fill: #8eeaea8a;
+      }
+    `}
+
+  & > .col_1_text,
+    & > .col_2_text,
+    & > .col_3_text,
+    & > .col_4_text {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  & > .col_1_text,
+  & > .col_1_rect,
+  & > .sub_favorabil {
+    fill: ${({ $col1Color }) => $col1Color ? utils.colors[$col1Color] : utils.colors.success_500};
+  }
+  & > .col_2_text,
+  & > .col_2_rect,
+  & > .sub_moderat {
+    fill: ${({ $col2Color }) => $col2Color ? utils.colors[$col2Color] : utils.colors.info_500};
+  }
+  & > .col_3_text,
+  & > .col_3_rect,
+  & > .sub_nefavorabil {
+    fill: ${({ $col3Color }) => $col3Color ? utils.colors[$col3Color] : utils.colors.warning_500};
+  }
+  & > .col_4_text,
+  & > .col_4_rect,
+  & > .sub_criza {
+    fill: ${({ $col4Color }) => $col4Color ? utils.colors[$col4Color] : utils.colors.danger_500};
+  }
+
+  & > .text {
+    font-size: 14px;
+    font-weight: 500;
+    fill: ${utils.colors.gray_950};
+  }
+
+  & > .sub_favorabil,
+  & > .sub_moderat,
+  & > .sub_nefavorabil,
+  & > .sub_criza {
+    font-size: 14px;
+    font-weight: 400;
+  }
+`;
+const GraficPlanInvestitii = ({
+  height = 280,
+  paddingLeft = 240,
+  paddingRight = 40,
+  paddingTop = 24,
+  paddingBottom = 60,
+  gap = 16,
+  max = 40500,
+  line = 3e4,
+  min = 5e3,
+  textTop = "Suma ta",
+  textValueTop = 3e4,
+  textBottomPrimary = 500,
+  textBottomSecondary = 24,
+  col1Value = 40015,
+  col2Value = 32721,
+  col3Value = 25806,
+  col4Value = 24806,
+  col1Color = "success_500",
+  col2Color = "info_500",
+  col3Color = "warning_500",
+  col4Color = "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 - 3 * gap) / 4;
+    const onCalculateCol = (value) => {
+      const h2 = Math.abs(graphH / max * value);
+      const y = Math.abs(graphH + paddingTop - h2);
+      return {
+        h: h2,
+        y
+      };
+    };
+    const col_1 = {
+      x: paddingLeft,
+      y: onCalculateCol(col1Value).y,
+      w: colWidth,
+      h: onCalculateCol(col1Value).h,
+      text_y: +onCalculateCol(col1Value).y - 12
+    };
+    const col_2 = {
+      x: paddingLeft + colWidth + gap,
+      y: onCalculateCol(col2Value).y,
+      w: colWidth,
+      h: onCalculateCol(col2Value).h,
+      text_y: +onCalculateCol(col2Value).y - 12
+    };
+    const col_3 = {
+      x: paddingLeft + colWidth * 2 + gap * 2,
+      y: onCalculateCol(col3Value).y,
+      w: colWidth,
+      h: onCalculateCol(col3Value).h,
+      text_y: +onCalculateCol(col3Value).y - 12
+    };
+    const col_4 = {
+      x: paddingLeft + colWidth * 3 + gap * 3,
+      y: onCalculateCol(col4Value).y,
+      w: colWidth,
+      h: onCalculateCol(col4Value).h,
+      text_y: +onCalculateCol(col4Value).y - 12
+    };
+    return {
+      graphW,
+      graphH,
+      lineY,
+      col_1,
+      col_2,
+      col_3,
+      col_4,
+      paddingLeft
+    };
+  }, [
+    w,
+    h,
+    min,
+    max,
+    line,
+    gap,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    col1Value,
+    col2Value,
+    col3Value,
+    col4Value,
+    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(
+    GraficPlanInvestitiiStyled,
+    {
+      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,
+      $col4Color: col4Color,
+      $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: 16,
+            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: "sub_favorabil",
+            textAnchor: "middle",
+            x: calculate.col_1.x + calculate.col_1.w / 2,
+            y: h - 5,
+            children: "Favorabil"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_2_text",
+            textAnchor: "middle",
+            x: calculate.col_2.x + calculate.col_2.w / 2,
+            y: 16,
+            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: "sub_moderat",
+            textAnchor: "middle",
+            x: calculate.col_2.x + calculate.col_2.w / 2,
+            y: h - 5,
+            children: "Moderat"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_3_text",
+            textAnchor: "middle",
+            x: calculate.col_3.x + calculate.col_3.w / 2,
+            y: 16,
+            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: "sub_nefavorabil",
+            textAnchor: "middle",
+            x: calculate.col_3.x + calculate.col_3.w / 2,
+            y: h - 5,
+            children: "Nefavorabil"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "col_4_text",
+            textAnchor: "middle",
+            x: calculate.col_4.x + calculate.col_4.w / 2,
+            y: 16,
+            children: RO.format(col4Value) + ` ${currency}`
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            className: "col_4_rect",
+            width: calculate.col_4.w,
+            height: calculate.col_4.h,
+            x: calculate.col_4.x,
+            y: calculate.col_4.y
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.col_4.x,
+            x2: calculate.col_4.x + calculate.col_4.w,
+            y1: h - 27,
+            y2: h - 27,
+            strokeWidth: 1,
+            stroke: "#D5D5D6"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            className: "sub_criza",
+            style: { fontSize: "14px" },
+            textAnchor: "middle",
+            x: calculate.col_4.x + calculate.col_4.w / 2,
+            y: h - 5,
+            children: "Criza"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { className: "text", textAnchor: "start", x: 0, y: calculate.lineY - 26, children: textTop }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { className: "text", textAnchor: "start", x: 0, y: calculate.lineY - 6, children: RO.format(textValueTop) + ` ${currency}` }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { className: "text", textAnchor: "start", x: 0, y: calculate.lineY + 18, children: RO.format(textBottomPrimary) + ` ${currency} x` }),
+        /* @__PURE__ */ jsxRuntime.jsx("text", { className: "text", textAnchor: "start", x: 0, y: calculate.lineY + 36, children: textBottomSecondary + ` luni` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            x2: w,
+            y1: calculate.lineY,
+            y2: calculate.lineY,
+            strokeWidth: 2,
+            stroke: utils.colors.gray_950
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficPlanInvestitii;

package/build/cjs/components/GraficPlanInvestitii/index.cjs

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

package/build/cjs/components/GraficPropunerePensii/GraficPropunerePensii.cjs

@@ -0,0 +1,279 @@
+"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 GraficPropunerePensiiStyled = styled.svg`
+  & > rect:nth-child(1) {
+    fill: ${utils.colors.danger_100};
+  }
+
+  & > .limitMinLabel {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_950};
+  }
+  & > .limitMinSublabel {
+    font-size: 16px;
+    font-weight: 700;
+    fill: ${utils.colors.gray_950};
+  }
+
+  & > .limitMaxLabel {
+    font-size: 14px;
+    font-weight: 400;
+    fill: ${utils.colors.gray_950};
+  }
+  & > .limitMaxSublabel {
+    font-size: 16px;
+    font-weight: 700;
+    fill: ${utils.colors.gray_950};
+  }
+`;
+const GraficPropunerePensii = ({
+  limitTop = 100,
+  limitBottom = 70,
+  limitTopLabel = "Top label",
+  limitBottomLabel = "Bottom label",
+  currency = "RON",
+  height = 284
+}) => {
+  const RO = new Intl.NumberFormat("RO");
+  const svg_ref = React.useRef(null);
+  const refLimitTopLabel = React.useRef(null);
+  const refLimitTopSublabel = React.useRef(null);
+  const refLimitBottomLabel = React.useRef(null);
+  const refLimitBottomSublabel = React.useRef(null);
+  const [w, setW] = React.useState(0);
+  const [h, setH] = React.useState(0);
+  const calculate = React.useMemo(() => {
+    const bar_h = 24;
+    const bar_y = h / 2 - bar_h / 2;
+    let limit_top_x, limit_bottom_x, secondary_bar_w, secondary_fill_color, dynamic_bar_x, dynamic_bar_w, dynamic_fill_color;
+    if (limitBottom > limitTop) {
+      limit_bottom_x = w - 1;
+      const limit_top_x_calc = limitTop * w / limitBottom;
+      limit_top_x = Math.min(w, Math.max(limit_top_x_calc, 1));
+      secondary_bar_w = Math.min(w, Math.max(w * limitTop / limitBottom, 0));
+      dynamic_bar_x = limit_top_x;
+      dynamic_bar_w = w - secondary_bar_w;
+      dynamic_fill_color = utils.colors.danger_500;
+    } else {
+      limit_top_x = w - 1;
+      const limit_bottom_x_calc = limitBottom * w / limitTop;
+      limit_bottom_x = Math.min(w, Math.max(limit_bottom_x_calc, 1));
+      secondary_bar_w = Math.min(w, Math.max(w * limitBottom / limitTop, 0));
+      dynamic_bar_x = limit_bottom_x;
+      dynamic_bar_w = w - secondary_bar_w;
+      dynamic_fill_color = utils.colors.success_500;
+    }
+    secondary_fill_color = utils.colors.success_400;
+    return {
+      bar_h,
+      bar_y,
+      secondary_bar_w,
+      limit_top_x,
+      limit_bottom_x,
+      dynamic_bar_x,
+      dynamic_bar_w,
+      dynamic_fill_color,
+      secondary_fill_color
+    };
+  }, [w, h, limitBottom, limitTop]);
+  const posX = React.useCallback(
+    (bbox, value) => {
+      const gap = 10;
+      const limited_start = value < bbox;
+      if (limited_start) {
+        const x = value + gap * 2;
+        return {
+          textAnchor: "start",
+          x
+        };
+      }
+      return {
+        textAnchor: "end",
+        x: Math.max(bbox, value)
+      };
+    },
+    [w]
+  );
+  const calculate_min_pos = React.useMemo(() => {
+    const limitMinLabel = {
+      x: calculate.limit_top_x - 10,
+      textAnchor: "end"
+    };
+    const limitMinSublabel = {
+      x: calculate.limit_top_x - 10,
+      textAnchor: "end"
+    };
+    if (refLimitTopLabel && refLimitTopLabel.current || refLimitTopSublabel && refLimitTopSublabel.current) {
+      const label_bbox = refLimitTopLabel.current?.getBBox().width ?? 0;
+      const sublabel_bbox = refLimitTopSublabel.current?.getBBox().width ?? 0;
+      const get_max_w = Math.max(label_bbox, sublabel_bbox);
+      return {
+        limitMinLabel: {
+          x: posX(get_max_w, limitMinLabel.x).x,
+          textAnchor: posX(get_max_w, limitMinLabel.x).textAnchor
+        },
+        limitMinSublabel: {
+          x: posX(get_max_w, limitMinSublabel.x).x,
+          textAnchor: posX(get_max_w, limitMinSublabel.x).textAnchor
+        }
+      };
+    }
+    return {
+      limitMinLabel,
+      limitMinSublabel
+    };
+  }, [calculate.limit_top_x]);
+  const calculate_max_pos = React.useMemo(() => {
+    const limitMaxLabel = {
+      x: calculate.limit_bottom_x - 10,
+      textAnchor: "end"
+    };
+    const limitMaxSublabel = {
+      x: calculate.limit_bottom_x - 10,
+      textAnchor: "end"
+    };
+    if (refLimitBottomLabel && refLimitBottomLabel.current || refLimitBottomSublabel && refLimitBottomSublabel.current) {
+      const label_bbox = refLimitBottomLabel.current?.getBBox().width ?? 0;
+      const sublabel_bbox = refLimitBottomSublabel.current?.getBBox().width ?? 0;
+      const get_max_w = Math.max(label_bbox, sublabel_bbox);
+      return {
+        limitMaxLabel: {
+          x: posX(get_max_w, limitMaxLabel.x).x,
+          textAnchor: posX(get_max_w, limitMaxLabel.x).textAnchor
+        },
+        limitMaxSublabel: {
+          x: posX(get_max_w, limitMaxSublabel.x).x,
+          textAnchor: posX(get_max_w, limitMaxSublabel.x).textAnchor
+        }
+      };
+    }
+    return {
+      limitMaxLabel,
+      limitMaxSublabel
+    };
+  }, [calculate.limit_bottom_x]);
+  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(
+    GraficPropunerePensiiStyled,
+    {
+      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.bar_y, height: calculate.bar_h, width: w }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: 0,
+            y: calculate.bar_y,
+            height: calculate.bar_h,
+            width: calculate.secondary_bar_w,
+            fill: calculate.secondary_fill_color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "rect",
+          {
+            x: calculate.dynamic_bar_x,
+            y: calculate.bar_y,
+            height: calculate.bar_h,
+            width: calculate.dynamic_bar_w,
+            fill: calculate.dynamic_fill_color
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.limit_top_x,
+            x2: calculate.limit_top_x,
+            y1: 0,
+            y2: calculate.bar_y + calculate.bar_h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLimitTopLabel,
+            className: "limitMinLabel",
+            textAnchor: calculate_min_pos.limitMinLabel.textAnchor,
+            x: calculate_min_pos.limitMinLabel.x,
+            y: 12,
+            children: limitTopLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLimitTopSublabel,
+            className: "limitMinSublabel",
+            textAnchor: calculate_min_pos.limitMinSublabel.textAnchor,
+            x: calculate_min_pos.limitMinSublabel.x,
+            y: 12 + 20,
+            children: RO.format(limitTop) + " " + currency
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: calculate.limit_bottom_x,
+            x2: calculate.limit_bottom_x,
+            y1: calculate.bar_y,
+            y2: h,
+            strokeWidth: 2,
+            stroke: "#232529"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLimitBottomLabel,
+            className: "limitMaxLabel",
+            textAnchor: calculate_max_pos.limitMaxLabel.textAnchor,
+            x: calculate_max_pos.limitMaxLabel.x,
+            y: h - 20,
+            children: limitBottomLabel
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "text",
+          {
+            ref: refLimitBottomSublabel,
+            className: "limitMaxSublabel",
+            textAnchor: calculate_max_pos.limitMaxSublabel.textAnchor,
+            x: calculate_max_pos.limitMaxSublabel.x,
+            y: h,
+            children: RO.format(limitBottom) + " " + currency
+          }
+        )
+      ]
+    }
+  );
+};
+
+exports.default = GraficPropunerePensii;

package/build/cjs/components/GraficPropunerePensii/index.cjs

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