cr-ui-lib 1.0.13 → 1.0.15

package/dist/index.js

@@ -1082,7 +1082,6 @@ var MultiLineGraph = ({
             if (!tooltipEl) {
               tooltipEl = document.createElement("div");
               tooltipEl.id = "chartjs-tooltip";
-              tooltipEl.innerHTML = "<div></div>";
               document.body.appendChild(tooltipEl);
             }
             const tooltipModel = context.tooltip;
@@ -1092,81 +1091,82 @@ var MultiLineGraph = ({
               return;
             }
             const dataPoints = tooltipModel.dataPoints || [];
+            if (dataPoints.length === 0) {
+              return;
+            }
             const label = (_a = dataPoints[0]) == null ? void 0 : _a.label;
-            const arrowSize = 8;
-            const position = context.chart.canvas.getBoundingClientRect();
-            tooltipEl.style.position = "absolute";
-            tooltipEl.style.left = "0px";
-            tooltipEl.style.top = "0px";
-            tooltipEl.style.opacity = "1";
-            tooltipEl.style.pointerEvents = "none";
             const dataPointsHtml = dataPoints.map(
               (point, index) => `
-              <div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? "4px" : "0"} 0;">
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M10.0833 0.75H1.91667C1.275 0.75 0.755833 1.275 0.755833 1.91667L0.75 10.0833C0.75 10.725 1.275 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.725 0.75 10.0833 0.75ZM10.0833 10.0833H1.91667V1.91667H10.0833V10.0833ZM5.125 8.91667H6.875V6.875H8.91667V5.125H6.875V3.08333H5.125V5.125H3.08333V6.875H5.125V8.91667Z" fill="#4683B4"/>
-                  </svg>
-                <span style="font-weight: bold; color: #757575; margin-top: 1px;">
-                  ${point.dataset.label}: <span style="color:#131414; padding-top: 1px;">${point.parsed.y}</span>
-                </span>
-              </div>
-            `
+      <div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? "4px" : "0"} 0;">
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M10.0833 0.75H1.91667C1.275 0.75 0.755833 1.275 0.755833 1.91667L0.75 10.0833C0.75 10.725 1.275 11.25 1.91667 11.25H10.0833C10.725 11.25 11.25 10.725 11.25 10.0833V1.91667C11.25 1.275 10.725 0.75 10.0833 0.75ZM10.0833 10.0833H1.91667V1.91667H10.0833V10.0833ZM5.125 8.91667H6.875V6.875H8.91667V5.125H6.875V3.08333H5.125V5.125H3.08333V6.875H5.125V8.91667Z" fill="#4683B4"/>
+          </svg>
+        <span style="font-weight: bold; color: #757575; margin-top: 1px;">
+          ${point.dataset.label}: <span style="color:#131414; padding-top: 1px;">${point.parsed.y}</span>
+        </span>
+      </div>
+    `
             ).join("");
+            const arrowSize = 8;
+            const outerArrowSize = 6;
+            const innerArrowSize = 5;
+            const innerHtml = `
+      <div style="position: relative; background: white; border: 1px solid rgba(16, 30, 115, 0.1); padding: 10px; border-radius: 4px; font-size: 12px; color: #333; min-width: 120px;">
+        <div id="tooltip-arrow-border" style="
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 0;
+          height: 0;
+          border-left: ${outerArrowSize}px solid transparent;
+          border-right: ${outerArrowSize}px solid transparent;
+          border-top: ${outerArrowSize}px solid rgba(16, 30, 115, 0.1);
+        "></div>
+        <div id="tooltip-arrow" style="
+          position: absolute;
+          top: 100%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-1px);
+          width: 0;
+          height: 0;
+          border-left: ${innerArrowSize}px solid transparent;
+          border-right: ${innerArrowSize}px solid transparent;
+          border-top: ${innerArrowSize}px solid white;
+        "></div>
+        <div>
+          <p style="color:#757575; margin: 0 0 8px 0;"><strong>${label}</strong></p>
+          ${dataPointsHtml}
+        </div>
+      </div>
+    `;
+            tooltipEl.innerHTML = innerHtml;
             const tooltipWidth = tooltipEl.offsetWidth;
             const tooltipHeight = tooltipEl.offsetHeight;
+            const position = context.chart.canvas.getBoundingClientRect();
             const pointX = position.left + window.pageXOffset + tooltipModel.caretX;
             const pointY = position.top + window.pageYOffset + tooltipModel.caretY;
-            const windowWidth = window.innerWidth;
-            const tooltipLeftEdge = pointX - tooltipWidth / 2;
-            const tooltipRightEdge = pointX + tooltipWidth / 2;
-            let arrowLeftPercent = 50;
-            let xAdjustment = 0;
-            if (tooltipLeftEdge < 10) {
-              xAdjustment = 10 - tooltipLeftEdge;
-            } else if (tooltipRightEdge > windowWidth - 10) {
-              xAdjustment = windowWidth - 10 - tooltipRightEdge;
-            }
-            const xPosition = tooltipLeftEdge + xAdjustment;
+            let xPosition = pointX - tooltipWidth / 2;
             const yPosition = pointY - tooltipHeight - arrowSize - 5;
-            arrowLeftPercent = (pointX - xPosition) / tooltipWidth * 100;
-            arrowLeftPercent = Math.max(10, Math.min(90, arrowLeftPercent));
-            const outerArrowSize = 6;
-            const innerArrowSize = 5;
-            const innerHtml = `
-              <div style="position: relative; background: white; border: 1px solid rgba(16, 30, 115, 0.1); padding: 10px; border-radius: 4px; font-size: 12px; color: #333; min-width: 120px;">
-                <div style="
-                  position: absolute;
-                  top: 100%;
-                  left: ${arrowLeftPercent}%;
-                  transform: translateX(-50%);
-                  width: 0;
-                  height: 0;
-                  border-left: ${outerArrowSize}px solid transparent;
-                  border-right: ${outerArrowSize}px solid transparent;
-                  border-top: ${outerArrowSize}px solid rgba(16, 30, 115, 0.1);
-                "></div>
-
-                <div style="
-                  position: absolute;
-                  top: 100%;
-                  left: ${arrowLeftPercent}%;
-                  transform: translateX(-50%) translateY(-1px);
-                  width: 0;
-                  height: 0;
-                  border-left: ${innerArrowSize}px solid transparent;
-                  border-right: ${innerArrowSize}px solid transparent;
-                  border-top: ${innerArrowSize}px solid white;
-                "></div>
-
-                <div>
-                  <p style="color:#757575; margin: 0 0 8px 0;"><strong>${label}</strong></p>
-                  ${dataPointsHtml}
-                </div>
-              </div>
-            `;
-            tooltipEl.innerHTML = innerHtml;
+            if (xPosition < 10) {
+              xPosition = 10;
+            } else if (xPosition + tooltipWidth > window.innerWidth - 10) {
+              xPosition = window.innerWidth - 10 - tooltipWidth;
+            }
+            const arrowBorder = tooltipEl.querySelector(
+              "#tooltip-arrow-border"
+            );
+            const arrow = tooltipEl.querySelector("#tooltip-arrow");
+            if (arrow && arrowBorder) {
+              const arrowLeftOffset = pointX - xPosition;
+              arrow.style.left = `${arrowLeftOffset}px`;
+              arrowBorder.style.left = `${arrowLeftOffset}px`;
+            }
+            tooltipEl.style.opacity = "1";
+            tooltipEl.style.position = "absolute";
             tooltipEl.style.left = xPosition + "px";
             tooltipEl.style.top = yPosition + "px";
+            tooltipEl.style.pointerEvents = "none";
           }
         }
       },
@@ -3383,7 +3383,7 @@ function SingleSelectDropdown({
                 "div",
                 {
                   className: (0, import_tailwind_merge17.twMerge)(
-                    `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none ${opt.id === value && hoveredId == null ? "text-[#00000066]" : opt.id === value && hoveredId != null ? "text-[#00000066]" : "text-[#131414]"}`,
+                    `h-[40px] px-2 py-2 my-1 text-sm cursor-pointer select-none ${opt.id === value && hoveredId == null ? "bg-[#ECF3F7] text-[#131414] font-semibold" : opt.id === value && hoveredId != null ? "text-[#131414] font-semibold" : "text-[#131414]"}`,
                     displayItemClass
                   ),
                   onClick: () => {