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

package/src/components/vis-controls/config.ts

@@ -0,0 +1,16 @@
+import { Config } from 'core/config'
+
+// Local Types
+import { VisControlItemInterface, VisControlsOrientation } from './types'
+
+export interface VisControlsConfigInterface {
+  /** Controls items array, VisControlItemInterface[]. Default: `[]` */
+  items?: VisControlItemInterface[];
+  /** Controls orientation. `VisControlsOrientation.Horizontal` or `VisControlsOrientation.Horizontal`. Default: `VisControlsOrientation.Horizontal` */
+  orientation?: VisControlsOrientation;
+}
+
+export class VisControlsConfig extends Config implements VisControlsConfigInterface {
+  items: VisControlItemInterface[] = []
+  orientation = VisControlsOrientation.Horizontal
+}

package/src/components/vis-controls/index.ts

@@ -0,0 +1,68 @@
+import { Selection, select } from 'd3-selection'
+
+// Local Types
+import { VisControlItemInterface, VisControlsOrientation } from './types'
+
+// Config
+import { VisControlsConfig, VisControlsConfigInterface } from './config'
+
+// Style
+import * as s from './style'
+
+export class VisControls {
+  div: Selection<HTMLDivElement, unknown, null, undefined>
+  element: HTMLDivElement
+  config: VisControlsConfig
+  protected _container: HTMLElement
+  protected _items: Selection<HTMLDivElement, unknown, null, undefined>
+
+  constructor (element: HTMLElement, config?: VisControlsConfigInterface) {
+    this._container = element
+
+    this.div = select(this._container)
+      .append('div')
+      .attr('class', s.root)
+    this.element = this.div.node()
+    this._items = this.div.append('div')
+      .attr('class', s.items)
+
+    if (config) this.update(config)
+  }
+
+  update (config: VisControlsConfigInterface): void {
+    this.config = new VisControlsConfig().init(config)
+    this.render()
+  }
+
+  render (): void {
+    const { config: { items, orientation } } = this
+    this._items
+      .classed(s.horizontalItems, orientation === VisControlsOrientation.Horizontal)
+    const controlItems = this._items.selectAll<HTMLDivElement, VisControlItemInterface>(`.${s.item}`)
+      .data(items)
+
+    const controlItemsEnter = controlItems.enter()
+      .append('div')
+      .attr('class', s.item)
+      .on('click', this._onItemClick.bind(this))
+
+    controlItemsEnter.append('button')
+      .attr('class', s.itemButton)
+
+    const controlItemsMerged = controlItemsEnter.merge(controlItems)
+    controlItemsMerged
+      .classed(s.borderLeft, d => d.borderLeft)
+      .classed(s.borderTop, d => d.borderTop)
+      .classed(s.borderRight, d => d.borderRight)
+      .classed(s.borderBottom, d => d.borderBottom)
+      .classed(s.disabled, d => d.disabled)
+    controlItemsMerged.select(`.${s.itemButton}`)
+      .html(item => item.icon)
+
+    controlItems.exit().remove()
+  }
+
+  _onItemClick (event: MouseEvent, item: VisControlItemInterface): void {
+    item.callback?.(event)
+  }
+}

package/{components/vis-controls/style.js → src/components/vis-controls/style.ts}

@@ -1,10 +1,11 @@
-import { css, injectGlobal } from '@emotion/css';
-import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from '../../styles/index.js';
+import { css, injectGlobal } from '@emotion/css'
+import { UNOVIS_ICON_FONT_FAMILY_DEFAULT } from 'styles/index'
 
-const root = css `
+export const root = css`
   label: vis-controls-component;
-`;
-const variables = injectGlobal `
+`
+
+export const variables = injectGlobal`
   :root {
     --vis-controls-buttons-border-color: rgba(108, 119, 140, 0.15);
     --vis-controls-buttons-background-color: rgba(255, 255, 255, 1);
@@ -21,23 +22,27 @@ const variables = injectGlobal `
     --vis-controls-buttons-background-color: var(--vis-dark-controls-buttons-background-color);
     --vis-controls-button-color: var(--vis-dark-controls-button-color);
   }
-`;
-const items = css `
+`
+
+export const items = css`
   label: items;
   background-color: var(--vis-controls-buttons-background-color);
   border: 1px solid var(--vis-controls-buttons-border-color);
   border-radius: 4px;
   opacity: 1;
   transition: all 300ms;
-`;
-const horizontalItems = css `
+`
+
+export const horizontalItems = css`
   label: horizontal;
   display: inline-flex;
-`;
-const item = css `
+`
+
+export const item = css`
   label: item;
-`;
-const itemButton = css `
+`
+
+export const itemButton = css`
   label: item-button;
   font-family: var(--vis-controls-button-icon-font);
   display: block;
@@ -52,24 +57,26 @@ const itemButton = css `
   box-sizing: border-box;
   color: var(--vis-controls-button-color);
   background-color: inherit;
-`;
-const borderLeft = css `
+`
+
+export const borderLeft = css`
   border-left: 1px solid var(--vis-controls-buttons-border-color);
-`;
-const borderTop = css `
+`
+
+export const borderTop = css`
   border-top: 1px solid var(--vis-controls-buttons-border-color);
-`;
-const borderRight = css `
+`
+
+export const borderRight = css`
   border-right: 1px solid var(--vis-controls-buttons-border-color);
-`;
-const borderBottom = css `
+`
+
+export const borderBottom = css`
   border-bottom: 1px solid var(--vis-controls-buttons-border-color);
-`;
-const disabled = css `
+`
+
+export const disabled = css`
   label: disabled;
   opacity: 0.4;
   pointer-events: none;
-`;
-
-export { borderBottom, borderLeft, borderRight, borderTop, disabled, horizontalItems, item, itemButton, items, root, variables };
-//# sourceMappingURL=style.js.map
+`

package/src/components/vis-controls/types.ts

@@ -0,0 +1,14 @@
+export interface VisControlItemInterface {
+  icon: string;
+  callback?: (event: MouseEvent) => any;
+  disabled?: boolean;
+  borderLeft?: boolean;
+  borderTop?: boolean;
+  borderRight?: boolean;
+  borderBottom?: boolean;
+}
+
+export enum VisControlsOrientation {
+  Horizontal = 'horizontal',
+  Vertical = 'vertical',
+}

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

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

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

@@ -0,0 +1,140 @@
+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/{components/xy-labels/style.js → src/components/xy-labels/style.ts}

@@ -1,6 +1,6 @@
-import { injectGlobal, css } from '@emotion/css';
+import { css, injectGlobal } from '@emotion/css'
 
-const globalStyles = injectGlobal `
+export const globalStyles = injectGlobal`
   :root {
     --vis-xy-label-cursor: default;
     // Undefined by default to allow proper fallback to var(--vis-color-main)
@@ -17,11 +17,13 @@ const globalStyles = injectGlobal `
     --vis-xy-label-text-color-light: #fff;
     --vis-xy-label-text-font-weight: 500;
   }
-`;
-const root = css `
+`
+
+export const root = css`
   label: xy-labels-component;
-`;
-const labelGroup = css `
+`
+
+export const labelGroup = css`
   label: label-g;
 
   > rect, text {
@@ -44,13 +46,12 @@ const labelGroup = css `
         stroke-width: var(--vis-xy-label-hover-stroke-width);
     }
   }
-`;
-const cluster = css `
+`
+
+export const cluster = css`
   label: cluster;
-`;
-const label = css `
-  label: label;
-`;
+`
 
-export { cluster, globalStyles, label, labelGroup, root };
-//# sourceMappingURL=style.js.map
+export const label = css`
+  label: label;
+`

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

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

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

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