layerchart 0.70.3 → 0.71.0

package/dist/components/Axis.svelte

@@ -75,6 +75,9 @@
   export let classes: {
     root?: string;
     label?: string;
+    rule?: string;
+    tick?: string;
+    tickLabel?: string;
   } = {};
 
   $: [xRangeMin, xRangeMax] = extent<number>($xRange) as [number, number];
@@ -236,7 +239,7 @@
       {tweened}
       {spring}
       {...ruleProps}
-      class={cls('rule stroke-surface-content/50', ruleProps?.class)}
+      class={cls('rule stroke-surface-content/50', classes.rule, ruleProps?.class)}
     />
   {/if}
 
@@ -261,6 +264,7 @@
       ...tickLabelProps,
       class: cls(
         'tickLabel text-[10px] stroke-surface-100 [stroke-width:2px] font-light',
+        classes.tickLabel,
         tickLabelProps?.class
       ),
     }}
@@ -274,7 +278,7 @@
           {tweened}
           {spring}
           {...ruleProps}
-          class={cls('grid stroke-surface-content/10', ruleProps?.class)}
+          class={cls('grid stroke-surface-content/10', classes.rule, ruleProps?.class)}
         />
       {/if}
 
@@ -287,7 +291,7 @@
           y2={tickCoords.y + (placement === 'top' ? -tickLength : tickLength)}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {:else if orientation === 'vertical'}
         <Line
@@ -297,7 +301,7 @@
           y2={tickCoords.y}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {:else if orientation === 'angle'}
         <Line
@@ -307,7 +311,7 @@
           y2={radialTickMarkCoordsY}
           {tweened}
           {spring}
-          class="tick stroke-surface-content/50"
+          class={cls('tick stroke-surface-content/50', classes.tick)}
         />
       {/if}
       <!-- TODO: Add tick marks for radial (angle)? -->

package/dist/components/tooltip/Tooltip.svelte

@@ -31,7 +31,7 @@
     | 'bottom-right';
   export let anchor: Placement = 'top-left';
 
-  export let contained: 'container' | false = 'container'; // TODO: Support 'window' using getBoundingClientRect()
+  export let contained: 'container' | 'window' | false = 'container';
   export let variant: 'default' | 'invert' | 'none' = 'default';
 
   /** Set to `false` to disable spring transitions */
@@ -134,8 +134,8 @@
     rect.bottom = rect.top + tooltipHeight;
     rect.right = rect.left + tooltipWidth;
 
-    // Check if outside of container and swap align side accordingly
     if (contained === 'container') {
+      // Check if outside of container and swap align side accordingly
       if ((xAlign === 'start' || xAlign === 'center') && rect.right > $containerWidth) {
         rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
       }
@@ -151,11 +151,40 @@
         rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
       }
       rect.bottom = rect.top + tooltipHeight;
+    } else if (contained === 'window') {
+      // Check if outside of window / viewport and swap align side accordingly
+      // Root <div> won't be available on initial mount
+      if (rootEl?.parentElement) {
+        const parentViewportRect = rootEl.parentElement.getBoundingClientRect();
+        if (
+          (xAlign === 'start' || xAlign === 'center') &&
+          parentViewportRect.left + rect.right > window.innerWidth
+        ) {
+          rect.left = alignValue(xValue, 'end', xOffset, tooltipWidth);
+        }
+        if ((xAlign === 'end' || xAlign === 'center') && parentViewportRect.left + rect.left < 0) {
+          rect.left = alignValue(xValue, 'start', xOffset, tooltipWidth);
+        }
+        rect.right = rect.left + tooltipWidth;
+
+        if (
+          (yAlign === 'start' || yAlign === 'center') &&
+          parentViewportRect.top + rect.bottom > window.innerHeight
+        ) {
+          rect.top = alignValue(yValue, 'end', yOffset, tooltipHeight);
+        }
+        if ((yAlign === 'end' || yAlign === 'center') && parentViewportRect.top + rect.top < 0) {
+          rect.top = alignValue(yValue, 'start', yOffset, tooltipHeight);
+        }
+        rect.bottom = rect.top + tooltipHeight;
+      }
     }
 
     $yPos = rect.top;
     $xPos = rect.left;
   }
+
+  let rootEl: HTMLDivElement;
 </script>
 
 {#if $tooltip.data}
@@ -166,6 +195,7 @@
     transition:fade={{ duration: 100 }}
     bind:clientWidth={tooltipWidth}
     bind:clientHeight={tooltipHeight}
+    bind:this={rootEl}
   >
     <div
       class={cls(

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -7,7 +7,7 @@ declare const __propDef: {
         xOffset?: number | undefined;
         yOffset?: number | undefined;
         anchor?: ("center" | "bottom" | "left" | "right" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right") | undefined;
-        contained?: "container" | false | undefined;
+        contained?: "container" | "window" | false | undefined;
         variant?: "default" | "invert" | "none" | undefined;
         motion?: boolean | undefined;
         classes?: {

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.70.3",
+  "version": "0.71.0",
   "devDependencies": {
     "@changesets/cli": "^2.27.10",
     "@mdi/js": "^7.4.47",