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

package/src/components/xy-labels/config.ts

@@ -1,56 +0,0 @@
-// Core
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { ColorAccessor, GenericAccessor, NumericAccessor, StringAccessor } from 'types/accessor'
-
-// Local Types
-import { XYLabel, XYLabelPositioning } from './types'
-
-export interface XYLabelsConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
-  /** Single Y accessor function. Default: `undefined` */
-  y: NumericAccessor<Datum>;
-  /** Defines how to position the label horizontally: in data space or in screen space. Default: `XYLabelPositioning.DataSpace` */
-  xPositioning?: GenericAccessor<XYLabelPositioning | string, Datum>;
-  /** Defines how to position the label vertically: in data space or in screen space. Default: `XYLabelPositioning.DataSpace` */
-  yPositioning?: GenericAccessor<XYLabelPositioning | string, Datum>;
-  /** Font size accessor function or constant value in pixels. If not provided, the value of CSS variable `--vis-xy-label-font-size` will be used. Default: `undefined` */
-  labelFontSize?: NumericAccessor<Datum>;
-  /** Label accessor function or string. Default: `undefined` */
-  label?: StringAccessor<Datum>;
-  /** Label color. Default: `undefined` */
-  backgroundColor?: ColorAccessor<Datum>;
-  /** Optional label cursor. Default: `null` */
-  cursor?: StringAccessor<Datum>;
-  /** Label color brightness ratio for switching between dark and light text label color. Default: `0.65` */
-  labelTextBrightnessRatio?: number;
-  /** Enable label clustering. Default: `true` */
-  clustering?: boolean;
-  /** Label accessor for clusters. Default: `undefined` */
-  clusterLabel?: StringAccessor<XYLabel<Datum>[]>;
-  /** Font size accessor for clusters, the value is in pixels. If not provided, the value of CSS variable `--vis-xy-label-cluster-font-size` will be used. Default: `undefined` */
-  clusterFontSize?: NumericAccessor<XYLabel<Datum>[]>;
-  /** Background color accessor for clusters. Default: `undefined` */
-  clusterBackgroundColor?: ColorAccessor<XYLabel<Datum>[]>;
-  /** Optional cluster cursor. Default: `null` */
-  clusterCursor?: StringAccessor<XYLabel<Datum>[]>;
-  /** Cluster label color accessor function. Default: `null` */
-  clusterLabelColor?: ColorAccessor<XYLabel<Datum>[]>;
-}
-
-export class XYLabelsConfig<Datum> extends XYComponentConfig<Datum> implements XYLabelsConfigInterface<Datum> {
-  xPositioning = XYLabelPositioning.DataSpace
-  yPositioning = XYLabelPositioning.DataSpace
-  labelFontSize = undefined
-  label = undefined
-  backgroundColor = undefined
-  cursor = null
-  labelTextBrightnessRatio = 0.65
-
-  clustering = true
-  clusterLabel = (records: XYLabel<Datum>[]): string => records.length.toString()
-  clusterFontSize = undefined
-  clusterBackgroundColor = undefined
-  clusterCursor = undefined
-  clusterLabelColor = null
-}

package/src/components/xy-labels/index.ts

@@ -1,109 +0,0 @@
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { getValue, isNumber, isNumberWithinRange } from 'utils/data'
-import { rectIntersect } from 'utils/misc'
-
-// Local Types
-import { XYLabelCluster, XYLabel, XYLabelPositioning } from './types'
-
-// Config
-import { XYLabelsConfig, XYLabelsConfigInterface } from './config'
-
-// Modules
-import { createLabels, updateLabels, removeLabels, getLabelRenderProps } from './modules/label'
-
-// Styles
-import * as s from './style'
-
-export class XYLabels<Datum> extends XYComponentCore<Datum, XYLabelsConfig<Datum>, XYLabelsConfigInterface<Datum>> {
-  static selectors = s
-  clippable = false
-  config: XYLabelsConfig<Datum> = new XYLabelsConfig()
-  events = {
-    [XYLabels.selectors.label]: {},
-  }
-
-  constructor (config?: XYLabelsConfigInterface<Datum>) {
-    super()
-    if (config) this.setConfig(config)
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    const labelGroups = this.g
-      .selectAll<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>>(`.${s.labelGroup}`)
-      .data(this._getDataToRender())
-
-    const labelGroupsExit = labelGroups.exit<XYLabel<Datum> | XYLabelCluster<Datum>>()
-    removeLabels(labelGroupsExit, duration)
-
-    const labelGroupsEnter = labelGroups.enter().append('g')
-      .attr('class', s.labelGroup)
-      .call(createLabels)
-
-    const labelGroupsMerged = labelGroupsEnter
-      .merge(labelGroups)
-      .classed(s.cluster, d => !!(d as XYLabelCluster<Datum>).records)
-      .classed(s.label, d => !(d as XYLabelCluster<Datum>).records)
-
-    labelGroupsMerged.call(updateLabels, config, duration)
-  }
-
-  private _getDataToRender (): (XYLabel<Datum> | XYLabelCluster<Datum>)[] {
-    const { config, datamodel } = this
-
-    const xRange = this.xScale.range() as [number, number]
-    const yRange = this.xScale.range() as [number, number]
-
-    const labels = datamodel.data?.reduce<XYLabel<Datum>[]>((acc, d) => {
-      const xPositioning = getValue<Datum, XYLabelPositioning>(d, config.xPositioning)
-      const yPositioning = getValue<Datum, XYLabelPositioning>(d, config.yPositioning)
-      const props = getLabelRenderProps(d, this.element, config, this.xScale, this.yScale)
-
-      if (
-        ((xPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.x, xRange)) &&
-        ((yPositioning !== XYLabelPositioning.DataSpace) || isNumberWithinRange(props.y, yRange))
-      ) {
-        acc.push({ ...d, _screen: props })
-      }
-
-      return acc
-    }, []) ?? []
-
-    return this._getClusteredLabels(labels)
-  }
-
-  private _getClusteredLabels (labels: XYLabel<Datum>[]): (XYLabel<Datum> | XYLabelCluster<Datum>)[] {
-    const labelsNonOverlapping = [...labels]
-    const clusterMap = new Map<XYLabel<Datum>, XYLabel<Datum>[]>()
-    for (let i = 0; i < labelsNonOverlapping.length; i += 1) {
-      const label1 = labelsNonOverlapping[i]
-      for (let j = i + 1; j < labelsNonOverlapping.length; j += 1) {
-        const label2 = labelsNonOverlapping[j]
-        const isIntersecting = rectIntersect(label1._screen, label2._screen)
-        if (isIntersecting) {
-          if (!clusterMap.has(label1)) clusterMap.set(label1, [label1])
-          clusterMap.get(label1).push(label2)
-          labelsNonOverlapping.splice(j, 1)
-          j -= 1
-        }
-      }
-
-      if (clusterMap.has(label1)) {
-        labelsNonOverlapping.splice(i, 1)
-        i -= 1
-      }
-    }
-
-    const clusters = Array.from(clusterMap.values()).map(records => ({
-      _screen: getLabelRenderProps(records, this.element, this.config, this.xScale, this.yScale),
-      records,
-    }))
-
-    return [...labelsNonOverlapping, ...clusters]
-  }
-}

package/src/components/xy-labels/modules/label.ts

@@ -1,140 +0,0 @@
-import { Selection, select } from 'd3-selection'
-import { mean } from 'd3-array'
-import { color } from 'd3-color'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-import { getCSSVariableValueInPixels, getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
-import { getColor, hexToBrightness } from 'utils/color'
-import { getNumber, getString, getValue } from 'utils/data'
-
-// Types
-import { ContinuousScale } from 'types/scale'
-
-// Config
-import { XYLabelsConfig } from '../config'
-
-// Local Types
-import { XYLabel, XYLabelCluster, XYLabelPositioning, XYLabelRenderProps } from '../types'
-
-export function createLabels<Datum> (
-  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>
-): void {
-  selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y})`)
-  selection.append('rect').style('fill', d => d._screen.backgroundColor)
-  selection.append('text')
-    .style('text-anchor', 'middle')
-    .style('dominant-baseline', 'central')
-    .style('fill', d => d._screen.backgroundColor)
-    .style('pointer-events', 'none')
-
-  selection.attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)
-}
-
-export function updateLabels<Datum> (
-  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>,
-  config: XYLabelsConfig<Datum>,
-  duration: number
-): void {
-  selection.each((d, i, elements) => {
-    const group: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any> = select(elements[i])
-    const text = group.select('text')
-    const rect = group.select('rect')
-
-    const backgroundColor = d._screen.backgroundColor
-    const labelText = d._screen.labelText ?? ''
-    const labelFontSize = d._screen.fontSize
-    let labelColor = d._screen.labelColor
-
-    // Label background
-    const backgroundHeight = labelFontSize * 1.7
-    let backgroundWidth = labelFontSize * labelText.length * 0.7
-    if (backgroundWidth < backgroundHeight) backgroundWidth = backgroundHeight
-    smartTransition(rect, duration)
-      .attr('width', backgroundWidth)
-      .attr('height', backgroundHeight)
-      .attr('x', -backgroundWidth / 2)
-      .attr('y', -backgroundHeight / 2)
-      .attr('rx', labelFontSize)
-      .attr('ry', labelFontSize)
-      .style('fill', backgroundColor)
-
-    // Label
-    if (!labelColor) {
-      const hex = color(isStringCSSVariable(backgroundColor) ? getCSSVariableValue(backgroundColor, group.node()) : backgroundColor)?.hex()
-      const brightness = hexToBrightness(hex)
-      labelColor = brightness > config.labelTextBrightnessRatio
-        ? 'var(--vis-xy-label-text-color-dark)'
-        : 'var(--vis-xy-label-text-color-light)'
-    }
-
-    text.html(labelText)
-      .attr('font-size', labelFontSize)
-
-    smartTransition(text, duration)
-      .style('fill', labelColor)
-
-    rect.style('cursor', d._screen.cursor)
-  })
-
-  smartTransition(selection, duration)
-    .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(1)`)
-}
-
-export function removeLabels<Datum> (
-  selection: Selection<SVGGElement, XYLabel<Datum> | XYLabelCluster<Datum>, any, any>,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .attr('transform', d => `translate(${d._screen.x},${d._screen.y}) scale(0)`)
-    .remove()
-}
-
-export function getLabelPosition (value: number, positioning: XYLabelPositioning, scale: ContinuousScale): number {
-  switch (positioning) {
-    case XYLabelPositioning.DataSpace: return scale(value) ?? 0
-    case XYLabelPositioning.AbsolutePx: return value
-    case XYLabelPositioning.AbsolutePercentage: {
-      const scaleRange = scale.range()
-      return scaleRange[0] + (scaleRange[1] - scaleRange[0]) * value / 100
-    }
-  }
-}
-
-export function getLabelRenderProps<Datum> (
-  data: Datum | XYLabel<Datum>[],
-  el: SVGGraphicsElement,
-  config: XYLabelsConfig<Datum>,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale
-): XYLabelRenderProps {
-  const isCluster = Array.isArray(data)
-  const fontSize = isCluster
-    ? (getNumber(data, config.clusterFontSize) ?? getCSSVariableValueInPixels('var(--vis-xy-label-cluster-font-size)', el))
-    : (getNumber(data, config.labelFontSize) ?? getCSSVariableValueInPixels('var(--vis-xy-label-font-size)', el))
-
-  const labelText = (isCluster ? config.clusterLabel(data as XYLabel<Datum>[]) : getString(data, config.label)) || ''
-  const backgroundHeight = fontSize * 1.7
-  let backgroundWidth = fontSize * labelText.length * 0.7
-  if (backgroundWidth < backgroundHeight) backgroundWidth = backgroundHeight
-
-  const x = isCluster
-    ? mean(data as XYLabel<Datum>[], d => d._screen.x)
-    : getLabelPosition(getNumber(data, config.x), getValue(data, config.xPositioning), xScale)
-
-  const y = isCluster
-    ? mean(data as XYLabel<Datum>[], d => d._screen.y)
-    : getLabelPosition(getNumber(data, config.y), getValue(data, config.yPositioning), yScale)
-
-  return {
-    x,
-    y,
-    fontSize,
-    labelText,
-    labelColor: isCluster ? getColor(data, config.clusterLabelColor) : getColor(data, config.color),
-    backgroundColor: isCluster ? getColor(data, config.clusterBackgroundColor) : getColor(data, config.backgroundColor),
-    cursor: isCluster ? getString(data, config.clusterCursor) : getString(data, config.cursor),
-    width: backgroundWidth,
-    height: backgroundHeight,
-  }
-}

package/src/components/xy-labels/types.ts

@@ -1,26 +0,0 @@
-export type XYLabelRenderProps = {
-  x: number;
-  y: number;
-  fontSize: number;
-  backgroundColor: string | null;
-  labelText: string | null;
-  labelColor: string | null;
-  cursor: string | null;
-  width: number;
-  height: number;
-}
-
-export type XYLabel<D> = D & {
-  _screen: XYLabelRenderProps;
-}
-
-export type XYLabelCluster<D> = {
-  _screen: XYLabelRenderProps;
-  records: XYLabel<D>[];
-}
-
-export enum XYLabelPositioning {
-  AbsolutePx = 'absolute_px',
-  AbsolutePercentage = 'absolute_percentage',
-  DataSpace = 'data_space',
-}

package/src/components.ts

@@ -1,56 +0,0 @@
-// Core
-export { ComponentCore } from 'core/component'
-export type { ComponentConfigInterface } from 'core/component/config'
-export { XYComponentCore } from 'core/xy-component'
-export type { XYComponentConfigInterface } from 'core/xy-component/config'
-
-// Components
-export { Tooltip } from 'components/tooltip'
-export { Line } from './components/line'
-export { StackedBar } from './components/stacked-bar'
-export { GroupedBar } from './components/grouped-bar'
-export { Axis } from './components/axis'
-export { Scatter } from './components/scatter'
-export { Brush } from './components/brush'
-export { BulletLegend } from './components/bullet-legend'
-export { FlowLegend } from './components/flow-legend'
-export { Crosshair } from './components/crosshair'
-export { Timeline } from './components/timeline'
-export { Sankey } from './components/sankey'
-export { Area } from './components/area'
-export { TopoJSONMap } from './components/topojson-map'
-export { LeafletMap } from './components/leaflet-map'
-export { MapLibreArcticDark, MapLibreArcticLight } from './components/leaflet-map/renderer/map-style'
-export { LeafletFlowMap } from './components/leaflet-flow-map'
-export { ChordDiagram } from './components/chord-diagram'
-export { Graph } from './components/graph'
-export { VisControls } from './components/vis-controls'
-export { Donut } from './components/donut'
-export { FreeBrush } from './components/free-brush'
-export { XYLabels } from './components/xy-labels'
-export { NestedDonut } from './components/nested-donut'
-
-// Config Interfaces
-export type { LineConfigInterface } from './components/line/config'
-export type { StackedBarConfigInterface } from './components/stacked-bar/config'
-export type { GroupedBarConfigInterface } from './components/grouped-bar/config'
-export type { ScatterConfigInterface } from './components/scatter/config'
-export type { TooltipConfigInterface } from './components/tooltip/config'
-export type { BrushConfigInterface } from './components/brush/config'
-export type { AxisConfigInterface } from './components/axis/config'
-export type { BulletLegendConfigInterface } from './components/bullet-legend/config'
-export type { FlowLegendConfigInterface } from './components/flow-legend/config'
-export type { CrosshairConfigInterface } from './components/crosshair/config'
-export type { TimelineConfigInterface } from './components/timeline/config'
-export type { SankeyConfigInterface } from './components/sankey/config'
-export type { AreaConfigInterface } from './components/area/config'
-export type { TopoJSONMapConfigInterface } from './components/topojson-map/config'
-export type { LeafletMapConfigInterface } from './components/leaflet-map/config'
-export type { LeafletFlowMapConfigInterface } from './components/leaflet-flow-map/config'
-export type { ChordDiagramConfigInterface } from './components/chord-diagram/config'
-export type { GraphConfigInterface } from './components/graph/config'
-export type { VisControlsConfigInterface } from './components/vis-controls/config'
-export type { DonutConfigInterface } from './components/donut/config'
-export type { FreeBrushConfigInterface } from './components/free-brush/config'
-export type { XYLabelsConfigInterface } from './components/xy-labels/config'
-export type { NestedDonutConfigInterface } from './components/nested-donut/config'

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

@@ -1,15 +0,0 @@
-// Core
-import { ContainerConfig, ContainerConfigInterface } from 'core/container/config'
-import { ComponentCore } from 'core/component'
-import { Tooltip } from 'components/tooltip'
-
-export interface SingleContainerConfigInterface<Datum> extends ContainerConfigInterface {
-  /** Visualization component. Default: `undefined` */
-  component?: ComponentCore<Datum>;
-  /** Tooltip component. Default: `undefined` */
-  tooltip?: Tooltip;
-}
-
-export class SingleContainerConfig<Datum> extends ContainerConfig implements SingleContainerConfigInterface<Datum> {
-  tooltip = undefined
-}

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

@@ -1,150 +0,0 @@
-// 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

@@ -1,112 +0,0 @@
-// 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
-}