Merge branch 'f5:main' into feat-solid-support

packages/angular/src/containers/single-container/single-container.component.ts

@@ -19,9 +19,17 @@ export class VisSingleContainerComponent<Data = unknown, C extends ComponentCore
   @ContentChild(VisTooltipComponent) tooltipComponent: VisTooltipComponent
   @ContentChild(VisAnnotationsComponent) annotationsComponent: VisAnnotationsComponent
 
-  /** Width in pixels. By default, Container automatically fits to the size of the parent element. Default: `undefined`. */
+  /** Width in pixels or in CSS units.
+   * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style` or `class`
+   * of the corresponding DOM element.
+   * Default: `undefined`
+  */
   @Input() width?: number
-  /** Height in pixels. By default, Container automatically fits to the size of the parent element. Default: `undefined`. */
+  /** Height in pixels or in CSS units.
+   * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style` or `class`
+   * of the corresponding DOM element.
+   * Default: `undefined`
+  */
   @Input() height?: number
 
   /** Margins. Default: `{ top: 0, bottom: 0, left: 0, right: 0 }` */

packages/angular/src/containers/xy-container/xy-container.component.ts

@@ -31,9 +31,17 @@ export class VisXYContainerComponent<Datum> implements AfterViewInit, AfterConte
   @ContentChild(VisTooltipComponent) tooltipComponent: VisTooltipComponent
   @ContentChild(VisAnnotationsComponent) annotationsComponent: VisAnnotationsComponent
 
-  /** Width in pixels. By default, Container automatically fits to the size of the parent element. Default: `undefined`. */
+  /** Width in pixels or in CSS units.
+   * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style` or `class`
+   * of the corresponding DOM element.
+   * Default: `undefined`
+  */
   @Input() width?: number
-  /** Height in pixels. By default, Container automatically fits to the size of the parent element. Default: `undefined`. */
+  /** Height in pixels or in CSS units.
+   * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style` or `class`
+   * of the corresponding DOM element.
+   * Default: `undefined`
+  */
   @Input() height?: number
 
   /** Scale for X dimension, e.g. Scale.scaleLinear(). Default: `Scale.scaleLinear()` */

packages/dev/cypress/e2e/unovis.cy.ts

@@ -14,7 +14,7 @@ describe('Unovis Test', () => {
           duration: test.duration,
         },
       })
-      cy.wait(test.duration > 100 ? test.duration : 100)
+      cy.wait(test.duration > 1000 ? test.duration : 1000)
       cy.percySnapshot(test.title, { scope: scopeSelector })
     })
   })

packages/dev/src/examples/misc/donut/donut-full-height/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { VisSingleContainer, VisDonut } from '@unovis/react'
+import { ExampleViewerDurationProps } from '@src/components/ExampleViewer/index'
+
+export const title = 'Donut: Full Height'
+export const subTitle = 'Testing the resize behavior'
+
+export const component = (props: ExampleViewerDurationProps): JSX.Element => {
+  const data = [3, 2, 5, 4, 0, 1]
+  return (
+    <VisSingleContainer style={{ height: '100%' }}>
+      <VisDonut
+        value={d => d}
+        data={data}
+        padAngle={0.02}
+        duration={props.duration}
+        arcWidth={80}
+      />
+    </VisSingleContainer>
+  )
+}
+

packages/ts/src/containers/single-container/index.ts

@@ -147,8 +147,8 @@ export class SingleContainer<Data> extends ContainerCore {
     if (!this._resizeObserver) this._setUpResizeObserver()
 
     // Schedule the actual rendering in the next frame
-    cancelAnimationFrame(this._requestedAnimationFrame)
-    this._requestedAnimationFrame = requestAnimationFrame(() => {
+    cancelAnimationFrame(this._renderAnimationFrameId)
+    this._renderAnimationFrameId = requestAnimationFrame(() => {
       this._preRender()
       this._render(duration)
     })

packages/ts/src/core/container/config.ts

@@ -14,16 +14,14 @@ export interface ContainerConfigInterface {
   /** Defines whether components should fit into the container or the container should expand to fit to the component's size. Default: `Sizing.Fit` */
   sizing?: Sizing | string;
   /** Width in pixels or in CSS units.
-   * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style`
+   * Percentage units `"%"` are not supported here. If you want to set `width` as a percentage, do it via `style` or `class`
    * of the corresponding DOM element.
-   * By default, Container automatically fits to the size of the parent element.
    * Default: `undefined`
   */
   width?: number | string;
   /** Height in pixels or in CSS units.
-   * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style`
+   * Percentage units `"%"` are not supported here. If you want to set `height` as a percentage, do it via `style` or `class`
    * of the corresponding DOM element.
-   * By default, Container automatically fits to the size of the parent element.
    * Default: `undefined`
   */
   height?: number | string;

packages/ts/src/core/container/index.ts

@@ -18,9 +18,10 @@ export class ContainerCore {
 
   protected _defaultConfig: ContainerConfigInterface = ContainerDefaultConfig
   protected _container: HTMLElement
-  protected _requestedAnimationFrame: number
+  protected _renderAnimationFrameId: number
   protected _isFirstRender = true
   protected _resizeObserver: ResizeObserver | undefined
+  protected _resizeObserverAnimationFrameId: number
   protected _svgDefs: Selection<SVGDefsElement, unknown, null, undefined>
   protected _svgDefsExternal: Selection<SVGDefsElement, unknown, null, undefined>
   private _containerSize: { width: number; height: number }
@@ -29,7 +30,7 @@ export class ContainerCore {
   static DEFAULT_CONTAINER_HEIGHT = 300
 
   constructor (element: HTMLElement) {
-    this._requestedAnimationFrame = null
+    this._renderAnimationFrameId = null
     this._container = element
 
     // Setting `role` attribute to `image` to make the container accessible
@@ -96,8 +97,8 @@ export class ContainerCore {
     if (!this._resizeObserver) this._setUpResizeObserver()
 
     // Schedule the actual rendering in the next frame
-    cancelAnimationFrame(this._requestedAnimationFrame)
-    this._requestedAnimationFrame = requestAnimationFrame(() => {
+    cancelAnimationFrame(this._renderAnimationFrameId)
+    this._renderAnimationFrameId = requestAnimationFrame(() => {
       this._preRender()
       this._render(duration)
     })
@@ -137,25 +138,32 @@ export class ContainerCore {
 
   protected _setUpResizeObserver (): void {
     if (this._resizeObserver) return
+
     const containerRect = this._container.getBoundingClientRect()
     this._containerSize = { width: containerRect.width, height: containerRect.height }
 
     this._resizeObserver = new ResizeObserver((entries, observer) => {
-      const resizedContainerRect = this._container.getBoundingClientRect()
-      const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }
-      const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)
-      // Do resize only if element is attached to the DOM
-      // will come in useful when some ancestor of container becomes detached
-      if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {
-        this._containerSize = resizedContainerSize
-        this._onResize()
-      }
+      // Using request animation frame to avoid multiple resize events when scrollbars appear/disappear
+      // See more: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
+      cancelAnimationFrame(this._resizeObserverAnimationFrameId)
+      this._resizeObserverAnimationFrameId = requestAnimationFrame(() => {
+        const resizedContainerRect = this._container.getBoundingClientRect()
+        const resizedContainerSize = { width: resizedContainerRect.width, height: resizedContainerRect.height }
+        const hasSizeChanged = !isEqual(this._containerSize, resizedContainerSize)
+        // Do resize only if element is attached to the DOM
+        // will come in useful when some ancestor of container becomes detached
+        if (hasSizeChanged && resizedContainerSize.width && resizedContainerSize.height) {
+          this._containerSize = resizedContainerSize
+          this._onResize()
+        }
+      })
     })
     this._resizeObserver.observe(this._container)
   }
 
   public destroy (): void {
-    cancelAnimationFrame(this._requestedAnimationFrame)
+    cancelAnimationFrame(this._renderAnimationFrameId)
+    cancelAnimationFrame(this._resizeObserverAnimationFrameId)
     this._resizeObserver?.disconnect()
     this.svg.remove()
   }