@unovis/ts 1.1.1-beta.5 → 1.1.1-beta.7

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

@@ -0,0 +1,150 @@
+// Global CSS variables (side effects import)
+import 'styles/index'
+
+// Core
+import { ContainerCore } from 'core/container'
+import { ComponentCore } from 'core/component'
+import { ComponentConfigInterface } from 'core/component/config'
+
+// Utils
+import { smartTransition } from 'utils/d3'
+
+// Types
+import { Sizing, ExtendedSizeComponent } from 'types/component'
+
+// Config
+import { SingleContainerConfig, SingleContainerConfigInterface } from './config'
+
+export class SingleContainer<Data> extends ContainerCore {
+  component: ComponentCore<Data>
+  config: SingleContainerConfig<Data> = new SingleContainerConfig()
+
+  constructor (element: HTMLElement, config?: SingleContainerConfigInterface<Data>, data?: Data) {
+    super(element)
+
+    if (config) {
+      this.updateContainer(config, true)
+      this.component = config.component
+    }
+
+    if (data) {
+      this.setData(data, true)
+    }
+
+    // Render if component exists and has data
+    if (this.component?.datamodel.data) this.render()
+  }
+
+  public setData (data: Data, preventRender?: boolean): void {
+    const { config } = this
+
+    if (this.component) this.component.setData(data)
+    if (!preventRender) this.render()
+    config.tooltip?.hide()
+  }
+
+  public updateContainer (containerConfig: SingleContainerConfigInterface<Data>, preventRender?: boolean): void {
+    super.updateContainer(containerConfig)
+    this.removeAllChildren()
+
+    this.component = containerConfig.component
+    if (containerConfig.sizing) this.component.sizing = containerConfig.sizing
+    this.element.appendChild(this.component.element)
+
+    const tooltip = containerConfig.tooltip
+    if (tooltip) {
+      if (!tooltip.hasContainer()) tooltip.setContainer(this._container)
+      tooltip.setComponents([this.component])
+    }
+
+    if (!preventRender) this.render()
+  }
+
+  public updateComponent (componentConfig: ComponentConfigInterface, preventRender?: boolean): void {
+    this.component.setConfig(componentConfig)
+    if (!preventRender) this.render()
+  }
+
+  public update (
+    containerConfig: SingleContainerConfigInterface<Data>,
+    componentConfig?: ComponentConfigInterface,
+    data?: Data
+  ): void {
+    if (containerConfig) this.updateContainer(containerConfig, true)
+    if (componentConfig) this.updateComponent(componentConfig, true)
+    if (data) this.setData(data, true)
+    this.render()
+  }
+
+  public getFitWidthScale (): number {
+    const { config, component } = this
+
+    const extendedSizeComponent = component as ExtendedSizeComponent
+    if (!extendedSizeComponent.getWidth) return 1
+
+    const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right
+    return this.width / componentWidth
+  }
+
+  _render (duration?: number): void {
+    const { config, component } = this
+    super._render(duration)
+
+    component.setSize(this.width, this.height, this.containerWidth, this.containerHeight)
+    component.g.attr('transform', `translate(${config.margin.left},${config.margin.top})`)
+    component.render(duration)
+
+    if (config.tooltip) config.tooltip.update()
+  }
+
+  // Re-defining the `render()` function to handle different sizing techniques (`Sizing.Extend` and `Sizing.FitWidth`)
+  // Not calling `super.render()` because we don't want it to interfere with setting the SVG size here.
+  render (duration = this.config.duration): void {
+    const { config, component } = this
+
+    if (config.sizing === Sizing.Extend || config.sizing === Sizing.FitWidth) {
+      const fitToWidth = config.sizing === Sizing.FitWidth
+      const extendedSizeComponent = component as ExtendedSizeComponent
+
+      const componentWidth = extendedSizeComponent.getWidth() + config.margin.left + config.margin.right
+      const componentHeight = extendedSizeComponent.getHeight() + config.margin.top + config.margin.bottom
+      const scale = fitToWidth ? this.getFitWidthScale() : 1
+
+      const currentWidth = this.svg.attr('width')
+      const currentHeight = this.svg.attr('height')
+      const scaledWidth = componentWidth * scale
+      const scaledHeight = componentHeight * scale
+      const animated = currentWidth || currentHeight
+
+      smartTransition(this.svg, animated ? duration : 0)
+        .attr('width', scaledWidth)
+        .attr('height', scaledHeight)
+        .attr('viewBox', `${0} ${0} ${componentWidth} ${fitToWidth ? scaledHeight : componentHeight}`)
+        .attr('preserveAspectRatio', 'xMinYMin')
+    } else {
+      this.svg
+        .attr('width', this.config.width || this.containerWidth)
+        .attr('height', this.config.height || this.containerHeight)
+    }
+
+    // Schedule the actual rendering in the next frame
+    cancelAnimationFrame(this._requestedAnimationFrame)
+    this._requestedAnimationFrame = requestAnimationFrame(() => {
+      this._render(duration)
+    })
+  }
+
+  _onResize (): void {
+    const { config } = this
+    super._onResize()
+    config.tooltip?.hide()
+  }
+
+  public destroy (): void {
+    const { component, config } = this
+    super.destroy()
+
+    component?.destroy()
+    config.tooltip?.destroy()
+  }
+}

package/src/containers/xy-container/config.ts

@@ -0,0 +1,112 @@
+// Core
+import { XYComponentCore } from 'core/xy-component'
+import { ContainerConfig, ContainerConfigInterface } from 'core/container/config'
+import { Tooltip } from 'components/tooltip'
+
+// Components
+import { Axis } from 'components/axis'
+import { Crosshair } from 'components/crosshair'
+
+// Types
+import { ContinuousScale } from 'types/scale'
+import { Direction } from 'types/direction'
+
+export interface XYContainerConfigInterface<Datum> extends ContainerConfigInterface {
+  /** An array of visualization components. Default: `[]` */
+  components?: XYComponentCore<Datum>[];
+
+  /** Scale for X dimension, e.g. Scale.scaleLinear().
+   * If set, this value will override the components' xScale and they will have a single shared xScale instance.
+   * By default the components have their own scale instances but their `domain` and `range` values are synchronized.
+   * Default: `undefined` */
+  xScale?: ContinuousScale;
+  /** Scale domain (data extent) for X dimension. By default this value is calculated automatically based on data. */
+  xDomain?: [number | undefined, number | undefined];
+  /** Constraint the minimum value of the X scale domain. Useful when the data is plotted along the X axis.
+   * For example, imagine that you have a chart with dynamic data that has negative values. When values are small
+   * (let's say in the range of [-0.01, 0]), you might still want the chart to display some meaningful value range (e.g. [-1, 0]). That can
+   * be achieved by setting `xDomainMinConstraint` to `[undefined, -1]`. In addition to that, if you want to cut off the
+   * values that are too low (let's say lower than -100), you can set the constraint to `[-100, -1]`
+   * Default: `undefined` */
+  xDomainMinConstraint?: [number | undefined, number | undefined];
+  /** Constraint the minimum value of the X scale domain. Useful when the data is plotted along the X axis.
+   * For example, imagine that you have a chart with dynamic data. When values are small
+   * (let's say < 0.01), you might still want the chart to display some meaningful value range (e.g. [0, 1]). That can
+   * be achieved by setting `xDomainMaxConstraint` to `[1, undefined]`. In addition to that, if you want to cut off the
+   * values that are too high (let's say higher than 100), you can set the constraint to `[1, 100]`
+   * Default: `undefined` */
+  xDomainMaxConstraint?: [number | undefined, number | undefined];
+  /** Force set the X scale range (in the screen space). By default the range is calculated automatically based on the
+   * chart's set up */
+  xRange?: [number, number];
+
+  /** Scale for Y dimension, e.g. Scale.scaleLinear().
+   * If set, this value will override the components' yScale and they will have a single shared yScale instance.
+   * By default the components have their own scale instances but their `domain` and `range` values are synchronized.
+   * Default: `undefined` */
+  yScale?: ContinuousScale;
+  /** Scale domain (data extent) for Y dimension. By default this value is calculated automatically based on data. */
+  yDomain?: [number | undefined, number | undefined];
+  /** Constraint the minimum value of the Y scale domain.
+   * For example, imagine that you have a chart with dynamic data that has negative values. When values are small
+   * (let's say in the range of [-0.01, 0]), you might still want the chart to display some meaningful value range (e.g. [-1, 0]). That can
+   * be achieved by setting `yDomainMinConstraint` to `[undefined, -1]`. In addition to that, if you want to cut off the
+   * values that are too low (let's say lower than -100), you can set the constraint to `[-100, -1]`
+   * Default: `undefined` */
+  yDomainMinConstraint?: [number | undefined, number | undefined];
+  /** Constraint the minimum value of the Y scale domain.
+   * For example, imagine that you have a chart with dynamic data. When values are small
+   * (let's say < 0.01), you might still want the chart to display some meaningful value range (e.g. [0, 1]). That can
+   * be achieved by setting `yDomainMaxConstraint` to `[1, undefined]`. In addition to that, if you want to cut off the
+   * values that are too high (let's say higher than 100), you can set the constraint to `[1, 100]`
+   * Default: `undefined` */
+  yDomainMaxConstraint?: [number | undefined, number | undefined];
+  /** Force set the Y scale range (in the screen space). By default the range is calculated automatically based on the
+   * chart's set up */
+  yRange?: [number, number];
+  /** Y Axis direction. Default: `Direction.North` */
+  yDirection?: Direction.South | Direction.North | string;
+
+  /** X Axis component instance. Default: `undefined` */
+  xAxis?: Axis<Datum>;
+  /** Y Axis component instance. Default: `undefined` */
+  yAxis?: Axis<Datum>;
+  /** Enables automatic calculation of chart margins based on the size of the axes. Default: `true` */
+  autoMargin?: boolean;
+  /** Tooltip component. Default: `undefined` */
+  tooltip?: Tooltip | undefined;
+  /** Crosshair component. Default: `undefined` */
+  crosshair?: Crosshair<Datum> | undefined;
+  /** Prevents the chart domain from being empty (when domain's min and max values are equal).
+   *  That usually happens when all the data values are the same.
+   *  Setting to `true` will automatically extend the domain by `+1` when needed.
+   *  Default: `true` */
+  preventEmptyDomain?: boolean;
+  /** Sets the Y scale domain based on the current X scale domain (not the whole dataset). Default: `false` */
+  scaleByDomain?: boolean;
+}
+
+export class XYContainerConfig<Datum> extends ContainerConfig implements XYContainerConfigInterface<Datum> {
+  components = []
+  tooltip: Tooltip = undefined
+  crosshair: Crosshair<Datum> = undefined
+  xAxis: Axis<Datum> = undefined
+  yAxis: Axis<Datum> = undefined
+  autoMargin = true
+
+  xScale = undefined
+  xDomain = undefined
+  xDomainMinConstraint = undefined
+  xDomainMaxConstraint = undefined
+  xRange = undefined
+
+  yScale = undefined
+  yDomain = undefined
+  yDomainMinConstraint = undefined
+  yDomainMaxConstraint = undefined
+  yRange = undefined
+  yDirection = Direction.North
+
+  preventEmptyDomain = true
+  scaleByDomain = false
+}

package/src/containers/xy-container/index.ts

@@ -0,0 +1,407 @@
+import { css } from '@emotion/css'
+import { extent, merge as mergeArrays } from 'd3-array'
+import { Selection } from 'd3-selection'
+
+// Global CSS variables (side effects import)
+import 'styles/index'
+
+// Core
+import { ContainerCore } from 'core/container'
+import { XYComponentCore } from 'core/xy-component'
+import { XYComponentConfigInterface } from 'core/xy-component/config'
+
+// Data Model
+import { CoreDataModel } from 'data-models/core'
+
+// Types
+import { Spacing } from 'types/spacing'
+import { AxisType } from 'components/axis/types'
+import { ScaleDimension } from 'types/scale'
+import { Direction } from 'types/direction'
+
+// Utils
+import { clamp, clean, flatten } from 'utils/data'
+import { guid } from 'utils/misc'
+
+// Config
+import { XYContainerConfig, XYContainerConfigInterface } from './config'
+import {
+  AreaConfigInterface,
+  BrushConfigInterface,
+  LineConfigInterface,
+  ScatterConfigInterface,
+  StackedBarConfigInterface,
+  TimelineConfigInterface,
+} from '../../components'
+
+export type XYConfigInterface<Datum> = XYComponentConfigInterface<Datum>
+| StackedBarConfigInterface<Datum>
+| LineConfigInterface<Datum>
+| ScatterConfigInterface<Datum>
+| BrushConfigInterface<Datum>
+| TimelineConfigInterface<Datum>
+| AreaConfigInterface<Datum>
+
+export class XYContainer<Datum> extends ContainerCore {
+  config: XYContainerConfig<Datum> = new XYContainerConfig()
+  datamodel: CoreDataModel<Datum[]> = new CoreDataModel()
+  private _svgDefs: Selection<SVGDefsElement, unknown, null, undefined>
+  private _clipPath: Selection<SVGClipPathElement, unknown, null, undefined>
+  private _clipPathId = guid()
+  private _axisMargin: Spacing = { top: 0, bottom: 0, left: 0, right: 0 }
+  private _firstRender = true
+
+  constructor (element: HTMLElement, config?: XYContainerConfigInterface<Datum>, data?: Datum[]) {
+    super(element)
+
+    this._clipPath = this.svg.append('clipPath')
+      .attr('id', this._clipPathId)
+    this._clipPath.append('rect')
+
+    // When the base tag is specified on the HTML head,
+    //  Safari fails to find the corresponding filter URL.
+    //  We have to provide tull url in order to fix that
+    const highlightFilterId = 'saturate'
+    const baseUrl = window.location.href.replace(window.location.hash, '')
+    this.svg.attr('class', css`
+      --highlight-filter-id: url(${baseUrl}#${highlightFilterId}); // defining a css variable
+    `)
+
+    this._svgDefs = this.svg.append('defs')
+    this._svgDefs.append('filter')
+      .attr('id', highlightFilterId)
+      .attr('filterUnits', 'objectBoundingBox')
+      .html('<feColorMatrix type="saturate" in="SourceGraphic" values="1.35"/>')
+
+    if (config) {
+      this.updateContainer(config, true)
+    }
+
+    if (data) {
+      this.setData(data, true)
+    }
+
+    // Render if components are present and have data
+    if (this.components?.some(c => c.datamodel.data)) {
+      this.render()
+    }
+
+    // Force re-render axes when fonts are loaded
+    (document as any).fonts?.ready.then(() => {
+      if (!this._firstRender) this._renderAxes(0)
+    })
+  }
+
+  get components (): XYComponentCore<Datum>[] {
+    return this.config.components
+  }
+
+  // Overriding ContainerCore default get width method to work with axis auto margin
+  get width (): number {
+    const margin = this._getMargin()
+    return clamp(this.containerWidth - margin.left - margin.right, 0, Number.POSITIVE_INFINITY)
+  }
+
+  // Overriding ContainerCore default get height method to work with axis auto margin
+  get height (): number {
+    const margin = this._getMargin()
+
+    return clamp(this.containerHeight - margin.top - margin.bottom, 0, Number.POSITIVE_INFINITY)
+  }
+
+  setData (data: Datum[], preventRender?: boolean): void {
+    const { components, config } = this
+    if (!data) return
+    this.datamodel.data = data
+
+    components.forEach((c) => {
+      c.setData(data)
+    })
+
+    config.crosshair?.setData(data)
+    config.xAxis?.setData(data)
+    config.yAxis?.setData(data)
+    config.tooltip?.hide()
+    if (!preventRender) this.render()
+  }
+
+  updateContainer (containerConfig: XYContainerConfigInterface<Datum>, preventRender?: boolean): void {
+    super.updateContainer(containerConfig)
+    this.removeAllChildren()
+
+    // If there were any new components added we need to pass them data
+    this.setData(this.datamodel.data, true)
+
+    // Set up the axes
+    if (containerConfig.xAxis) {
+      this.config.xAxis.config.type = AxisType.X
+      this.element.appendChild(containerConfig.xAxis.element)
+    }
+    if (containerConfig.yAxis) {
+      this.config.yAxis.config.type = AxisType.Y
+      this.element.appendChild(containerConfig.yAxis.element)
+    }
+
+    // Re-insert elements to the DOM
+    for (const c of this.components) {
+      this.element.appendChild(c.element)
+    }
+
+    // Set up the tooltip
+    const tooltip = containerConfig.tooltip
+    if (tooltip) {
+      if (!tooltip.hasContainer()) tooltip.setContainer(this._container)
+      tooltip.setComponents(this.components)
+    }
+
+    // Set up the crosshair
+    const crosshair = containerConfig.crosshair
+    if (crosshair) {
+      crosshair.setContainer(this.svg)
+      crosshair.tooltip = tooltip
+
+      this.element.appendChild(crosshair.element)
+    }
+
+    // Clipping path
+    this.element.appendChild(this._clipPath.node())
+
+    // Defs
+    this.element.appendChild(this._svgDefs.node())
+
+    // Rendering
+    if (!preventRender) this.render()
+  }
+
+  updateComponents (componentConfigs: XYConfigInterface<Datum>[], preventRender?: boolean): void {
+    const { config } = this
+
+    this.components.forEach((c, i) => {
+      const componentConfig = componentConfigs[i]
+      if (componentConfig) {
+        c.setConfig(componentConfigs[i])
+      }
+    })
+
+    this.updateScales(...this.components, config.xAxis, config.yAxis, config.crosshair)
+    if (!preventRender) this.render()
+  }
+
+  update (containerConfig: XYContainerConfigInterface<Datum>, componentConfigs?: XYComponentConfigInterface<Datum>[], data?: Datum[]): void {
+    if (data) this.datamodel.data = data // Just updating the data model because the `updateContainer` method has the `setData` step inside
+    if (containerConfig) this.updateContainer(containerConfig, true)
+    if (componentConfigs) this.updateComponents(componentConfigs, true)
+    this.render()
+  }
+
+  _render (customDuration?: number): void {
+    const { config } = this
+    super._render()
+
+    // Calculate extra margin required to fit the axes
+    if (config.autoMargin) {
+      this._setAutoMargin()
+    }
+
+    // Get chart total margin after auto margin calculations
+    const margin = this._getMargin()
+
+    // Update Scales of all the components at once to calculate required paddings and sync them
+    this.updateScales(...this.components, config.xAxis, config.yAxis, config.crosshair)
+
+    // Render components
+    for (const c of this.components) {
+      c.g.attr('transform', `translate(${margin.left},${margin.top})`)
+        .style('clip-path', c.clippable ? `url(#${this._clipPathId})` : null)
+        .style('-webkit-clip-path', c.clippable ? `url(#${this._clipPathId})` : null)
+
+      c.render(customDuration)
+    }
+
+    this._renderAxes(this._firstRender ? 0 : customDuration)
+
+    // Clip Rect
+    // Extending the clipping path to allow small overflow (e.g. Line will looks better that way when it touches the edges)
+    const clipPathExtension = 2
+    this._clipPath.select('rect')
+      .attr('x', -clipPathExtension)
+      .attr('y', -clipPathExtension)
+      .attr('width', this.width + 2 * clipPathExtension)
+      .attr('height', this.height + 2 * clipPathExtension)
+
+    // Tooltip
+    config.tooltip?.update() // Re-bind events
+
+    // Crosshair
+    const crosshair = config.crosshair
+    if (crosshair) {
+      // Pass accessors
+      const yAccessors = this.components.filter(c => !c.stacked).map(c => c.config.y)
+      const yStackedAccessors = this.components.filter(c => c.stacked).map(c => c.config.y)
+      // eslint-disable-next-line dot-notation
+      const baselineAccessor = this.components.find(c => c.config['baseline'])?.config['baseline']
+
+      crosshair.accessors = {
+        x: this.components[0]?.config.x,
+        y: flatten(yAccessors),
+        yStacked: flatten(yStackedAccessors),
+        baseline: baselineAccessor,
+      }
+
+      crosshair.g.attr('transform', `translate(${margin.left},${margin.top})`)
+        .style('clip-path', `url(#${this._clipPathId})`)
+        .style('-webkit-clip-path', `url(#${this._clipPathId})`)
+      crosshair.hide()
+    }
+
+    this._firstRender = false
+  }
+
+  updateScales<T extends XYComponentCore<Datum>> (...components: T[]): void {
+    const c = clean(components || this.components)
+    this._setScales(...c)
+    this._updateScalesDomain(...c)
+    this._updateScalesRange(...c)
+  }
+
+  _setScales<T extends XYComponentCore<Datum>> (...components: T[]): void {
+    const { config } = this
+    if (!components) return
+
+    // Set the X and Y scales
+    if (config.xScale) components.forEach(c => c.setScale(ScaleDimension.X, config.xScale))
+    if (config.yScale) components.forEach(c => c.setScale(ScaleDimension.Y, config.yScale))
+  }
+
+  _updateScalesDomain<T extends XYComponentCore<Datum>> (...components: T[]): void {
+    const { config } = this
+    if (!components) return
+
+    // Loop over all the dimensions
+    Object.values(ScaleDimension).forEach((dimension: ScaleDimension) => {
+      const [min, max] = extent(
+        mergeArrays(
+          components
+            .filter(c => !c.config.excludeFromDomainCalculation)
+            .map(c => c.getDataExtent(dimension, config.scaleByDomain))
+        ) as number[]
+      ) // Components with undefined dimension accessors will return [undefined, undefined] but d3.extent will take care of that
+
+      const configuredDomain = dimension === ScaleDimension.Y ? config.yDomain : config.xDomain
+      const configuredDomainMinConstraint = dimension === ScaleDimension.Y ? config.yDomainMinConstraint : config.xDomainMinConstraint
+      const configuredDomainMaxConstraint = dimension === ScaleDimension.Y ? config.yDomainMaxConstraint : config.xDomainMaxConstraint
+      const domainMin = configuredDomain?.[0] ?? min ?? 0
+      const domainMax = configuredDomain?.[1] ?? max ?? 1
+      const domain = [
+        clamp(domainMin, configuredDomainMinConstraint?.[0] ?? Number.NEGATIVE_INFINITY, configuredDomainMinConstraint?.[1] ?? Number.POSITIVE_INFINITY),
+        clamp(domainMax, configuredDomainMaxConstraint?.[0] ?? Number.NEGATIVE_INFINITY, configuredDomainMaxConstraint?.[1] ?? Number.POSITIVE_INFINITY),
+      ]
+
+      if (config.preventEmptyDomain && (domain[0] === domain[1]) && isFinite(domain[0])) {
+        domain[1] = domain[0] + 1
+      }
+
+      components.forEach(c => c.setScaleDomain(dimension, domain))
+    })
+  }
+
+  _updateScalesRange<T extends XYComponentCore<Datum>> (...components: T[]): void {
+    const { config } = this
+    if (!components) return
+
+    // Set initial scale range
+    const isYDirectionSouth = config.yDirection === Direction.South
+    const xRange: [number, number] = [config.padding.left ?? 0, this.width - config.padding.right ?? 0]
+    const yRange: [number, number] = [this.height - config.padding.bottom ?? 0, config.padding.top ?? 0]
+    if (isYDirectionSouth) yRange.reverse()
+
+    for (const c of components) {
+      c.setSize(this.width, this.height, this.containerWidth, this.containerHeight)
+      c.setScaleRange(ScaleDimension.X, config.xRange ?? xRange)
+      c.setScaleRange(ScaleDimension.Y, config.yRange ?? yRange)
+    }
+
+    // Get and combine bleed
+    const bleed = components.map(c => c.bleed).reduce((bleed, b) => {
+      for (const key of Object.keys(bleed)) {
+        if (bleed[key] < b[key]) bleed[key] = b[key]
+      }
+      return bleed
+    }, { top: 0, bottom: 0, left: 0, right: 0 })
+
+    // Update scale range
+    for (const c of components) {
+      c.setScaleRange(ScaleDimension.X, [xRange[0] + bleed.left, xRange[1] - bleed.right])
+      c.setScaleRange(
+        ScaleDimension.Y,
+        isYDirectionSouth
+          ? [yRange[0] + bleed.top, yRange[1] - bleed.bottom] // if Y axis is directed downwards
+          : [yRange[0] - bleed.bottom, yRange[1] + bleed.top] // if Y axis is directed upwards
+      )
+    }
+  }
+
+  _renderAxes (duration: number): void {
+    const { config: { xAxis, yAxis } } = this
+    const margin = this._getMargin()
+
+    const axes = clean([xAxis, yAxis])
+    axes.forEach(axis => {
+      const offset = axis.getOffset(margin)
+      axis.g.attr('transform', `translate(${offset.left},${offset.top})`)
+      axis.render(duration)
+    })
+  }
+
+  _setAutoMargin (): void {
+    const { config: { xAxis, yAxis } } = this
+
+    // At first we need to set the domain to the scales
+    const components = clean([...this.components, xAxis, yAxis])
+    this._updateScalesDomain(...components)
+
+    // Calculate margin required by the axes
+    // We do two iterations on the first render, because the amount and size of ticks can change
+    //    after new margin are calculated and applied (axes dimensions will change).
+    //    That's needed for correct label placement.
+    const numIterations = this._firstRender ? 2 : 1
+    for (let i = 0; i < numIterations; i += 1) {
+      const axisMargin: Spacing = { top: 0, bottom: 0, left: 0, right: 0 }
+      this._updateScalesRange(...components)
+      const axes = clean([xAxis, yAxis])
+      axes.forEach(axis => {
+        axis.preRender()
+
+        const m = axis.getRequiredMargin()
+        if (axisMargin.top < m.top) axisMargin.top = m.top
+        if (axisMargin.bottom < m.bottom) axisMargin.bottom = m.bottom
+        if (axisMargin.left < m.left) axisMargin.left = m.left
+        if (axisMargin.right < m.right) axisMargin.right = m.right
+      })
+
+      this._axisMargin = axisMargin
+    }
+  }
+
+  private _getMargin (): Spacing {
+    const { config: { margin } } = this
+
+    return {
+      top: margin.top + this._axisMargin.top,
+      bottom: margin.bottom + this._axisMargin.bottom,
+      left: margin.left + this._axisMargin.left,
+      right: margin.right + this._axisMargin.right,
+    }
+  }
+
+  public destroy (): void {
+    const { components, config: { tooltip, crosshair, xAxis, yAxis } } = this
+    super.destroy()
+
+    for (const c of components) c?.destroy()
+    tooltip?.destroy()
+    crosshair?.destroy()
+    xAxis?.destroy()
+    yAxis?.destroy()
+  }
+}

package/src/containers.ts

@@ -0,0 +1,6 @@
+export { ContainerCore } from './core/container'
+export type { ContainerConfigInterface } from './core/container/config'
+export { SingleContainer } from './containers/single-container'
+export type { SingleContainerConfigInterface } from './containers/single-container/config'
+export { XYContainer } from './containers/xy-container'
+export type { XYContainerConfigInterface } from './containers/xy-container/config'