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

package/src/components/scatter/index.ts

@@ -1,220 +0,0 @@
-import { Selection, select } from 'd3-selection'
-import { max, min } from 'd3-array'
-
-// Core
-import { XYComponentCore } from 'core/xy-component'
-
-// Utils
-import { isNumber, getExtent, getNumber, getString, isArray, flatten, getValue } from 'utils/data'
-import { getColor } from 'utils/color'
-import { smartTransition } from 'utils/d3'
-import { getCSSVariableValueInPixels } from 'utils/misc'
-
-// Types
-import { Spacing } from 'types/spacing'
-import { SymbolType } from 'types/symbol'
-import { NumericAccessor } from 'types/accessor'
-
-// Local Types
-import { ScatterPointGroupNode, ScatterPoint } from './types'
-
-// Config
-import { ScatterConfig, ScatterConfigInterface } from './config'
-
-// Modules
-import { createPoints, updatePoints, removePoints } from './modules/point'
-import { collideLabels, getEstimatedLabelBBox } from './modules/utils'
-
-// Styles
-import * as s from './style'
-
-export class Scatter<Datum> extends XYComponentCore<Datum, ScatterConfig<Datum>, ScatterConfigInterface<Datum>> {
-  static selectors = s
-  config: ScatterConfig<Datum> = new ScatterConfig()
-  events = {
-    [Scatter.selectors.point]: {
-      mouseenter: this._onPointMouseOver.bind(this),
-      mouseleave: this._onPointMouseOut.bind(this),
-    },
-  }
-
-  private _pointData: ScatterPoint<Datum>[][] = []
-  private _points: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>
-  private _collideLabelsAnimFrameId: ReturnType<typeof requestAnimationFrame>
-
-  constructor (config?: ScatterConfigInterface<Datum>) {
-    super()
-    if (config) this.setConfig(config)
-  }
-
-  setConfig (config: ScatterConfigInterface<Datum>): void {
-    super.setConfig(config)
-    this._updateSizeScale()
-  }
-
-  setData (data: Datum[]): void {
-    super.setData(data)
-    this._updateSizeScale()
-  }
-
-  get bleed (): Spacing {
-    this._pointData = this._getOnScreenData()
-    const pointDataFlat: ScatterPoint<Datum>[] = flatten(this._pointData)
-
-    const yRangeStart = min(this.yScale.range())
-    const yRangeEnd = max(this.yScale.range())
-    const xRangeStart = this.xScale.range()[0]
-    const xRangeEnd = this.xScale.range()[1]
-
-    const fontSizePx = getCSSVariableValueInPixels('var(--vis-scatter-point-label-text-font-size)', this.element)
-
-    const extent = pointDataFlat.reduce((ext, d) => {
-      const labelPosition = getValue(d, this.config.labelPosition, d._point.pointIndex)
-      const labelBBox = getEstimatedLabelBBox(d, labelPosition, this.xScale, this.yScale, fontSizePx)
-      const x = this.xScale(d._point.xValue)
-      const y = this.yScale(d._point.yValue)
-      const r = d._point.sizePx / 2
-
-      ext.minX = Math.min(ext.minX, x - r, labelBBox.x)
-      ext.maxX = Math.max(ext.maxX, x + r, labelBBox.x + labelBBox.width)
-      ext.minY = Math.min(ext.minY, y - r, labelBBox.y)
-      ext.maxY = Math.max(ext.maxY, y + r, labelBBox.y + labelBBox.height)
-      return ext
-    }, {
-      minX: Number.POSITIVE_INFINITY,
-      maxX: Number.NEGATIVE_INFINITY,
-      minY: Number.POSITIVE_INFINITY,
-      maxY: Number.NEGATIVE_INFINITY,
-    })
-
-    const coeff = 1.2 // Multiplier to take into account subsequent scale range changes and shape irregularities
-    const top = extent.minY < yRangeStart ? coeff * (yRangeStart - extent.minY) : 0
-    const bottom = extent.maxY > yRangeEnd ? coeff * (extent.maxY - yRangeEnd) : 0
-    const left = extent.minX < xRangeStart ? coeff * (xRangeStart - extent.minX) : 0
-    const right = extent.maxX > xRangeEnd ? coeff * (extent.maxX - xRangeEnd) : 0
-
-    return { top, bottom, left, right }
-  }
-
-  _render (customDuration?: number): void {
-    const { config } = this
-    const duration = isNumber(customDuration) ? customDuration : config.duration
-
-    // Groups
-    const pointGroups = this.g
-      .selectAll<SVGGElement, ScatterPoint<Datum>[]>(`.${s.pointGroup}`)
-      .data(this._pointData)
-
-    const pointGroupsEnter = pointGroups
-      .enter()
-      .append('g')
-      .attr('class', s.pointGroup)
-
-    const pointGroupsMerged = pointGroupsEnter.merge(pointGroups)
-    smartTransition(pointGroupsMerged, duration)
-      .style('opacity', 1)
-
-    const pointGroupExit = pointGroups.exit().attr('class', s.pointGroupExit)
-    smartTransition(pointGroupExit, duration).style('opacity', 0).remove()
-
-    // Points
-    const points = pointGroupsMerged
-      .selectAll<SVGGElement, ScatterPoint<Datum>>(`.${s.point}`)
-      .data(
-        d => d,
-        d => `${getString(d, config.id, d._point.pointIndex) ?? d._point.pointIndex}`
-      )
-
-    const pointsEnter = points.enter().append('g')
-      .attr('class', s.point)
-    createPoints(pointsEnter, this.xScale, this.yScale)
-
-    this._points = pointsEnter.merge(points)
-    updatePoints(this._points, config, this.xScale, this.yScale, duration)
-
-    removePoints(points.exit<ScatterPoint<Datum>>(), this.xScale, this.yScale, duration)
-
-    // Take care of overlapping labels
-    this._collideLabels()
-  }
-
-  private _collideLabels (): void {
-    cancelAnimationFrame(this._collideLabelsAnimFrameId)
-    this._collideLabelsAnimFrameId = requestAnimationFrame(() => {
-      collideLabels(this._points, this.config, this.xScale, this.yScale)
-    })
-  }
-
-  private _updateSizeScale (): void {
-    const { config, datamodel } = this
-
-    config.sizeScale
-      .domain(getExtent(datamodel.data, config.size))
-      .range(config.sizeRange ?? [0, 0])
-  }
-
-  private _getOnScreenData (): ScatterPoint<Datum>[][] {
-    const { config, datamodel: { data } } = this
-
-    const xDomain = this.xScale.domain().map(d => +d) // Convert Date to number
-    const yDomain = this.yScale.domain().map(d => +d) // Convert Date to number
-    const yAccessors = (isArray(config.y) ? config.y : [config.y]) as NumericAccessor<Datum>[]
-
-    const maxSizeValue = max<number>(flatten(yAccessors.map((y, j) => data?.map(d => getNumber(d, config.size, j)))))
-    const maxSizePx = config.sizeRange ? config.sizeScale(maxSizeValue) : maxSizeValue
-    const maxSizeXDomain = (this.xScale.invert(maxSizePx) as number) - (this.xScale.invert(0) as number)
-    const maxSizeYDomain = Math.abs((this.yScale.invert(maxSizePx) as number) - (this.yScale.invert(0) as number))
-
-    return yAccessors.map((y, j) => {
-      return data?.reduce<ScatterPoint<Datum>[]>((acc, d, i) => {
-        const xValue = getNumber(d, config.x, i)
-        const yValue = getNumber(d, y, j)
-        const pointSize = getNumber(d, config.size, i)
-        const pointSizeScaled = config.sizeRange ? config.sizeScale(pointSize) : pointSize
-        const pointSizeXDomain = (this.xScale.invert(pointSizeScaled) as number) - (this.xScale.invert(0) as number)
-        const pointSizeYDomain = Math.abs((this.yScale.invert(pointSizeScaled) as number) - (this.yScale.invert(0) as number))
-
-        if (
-          ((xValue - pointSizeXDomain / 2) >= (xDomain[0] - maxSizeXDomain / 2)) &&
-          ((xValue + pointSizeXDomain / 2) <= (xDomain[1] + maxSizeXDomain / 2)) &&
-          ((yValue - pointSizeYDomain / 2) >= (yDomain[0] - maxSizeYDomain / 2)) &&
-          ((yValue + pointSizeYDomain / 2) <= (yDomain[1] + maxSizeYDomain / 2))
-        ) {
-          acc.push({
-            ...d,
-            _point: {
-              xValue: xValue,
-              yValue: yValue,
-              sizePx: pointSizeScaled,
-              color: getColor(d, config.color, j),
-              shape: getString(d, config.shape, j) as SymbolType,
-              label: getString(d, config.label, j),
-              labelColor: getValue(d, config.labelColor, j),
-              cursor: getString(d, config.cursor, j),
-              groupIndex: j,
-              pointIndex: i,
-            },
-          })
-        }
-
-        return acc
-      }, []) ?? []
-    })
-  }
-
-  private _onPointMouseOver (d: ScatterPoint<Datum>, event: MouseEvent): void {
-    const point = select(event.target as SVGGElement)
-    const pointNode = point.node() as ScatterPointGroupNode | null
-    if (pointNode) pointNode._forceShowLabel = true
-
-    point.raise()
-    this._collideLabels()
-  }
-
-  private _onPointMouseOut (d: ScatterPoint<Datum>, event: MouseEvent): void {
-    const pointNode = select(event.target as SVGGElement).node() as ScatterPointGroupNode | null
-    if (pointNode) delete pointNode._forceShowLabel
-
-    this._collideLabels()
-  }
-}

package/src/components/scatter/modules/point.ts

@@ -1,123 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { symbol } from 'd3-shape'
-import { color } from 'd3-color'
-import { Position } from 'types/position'
-import { Symbol } from 'types/symbol'
-
-// Utils
-import { smartTransition } from 'utils/d3'
-import { getCSSVariableValue, isStringCSSVariable } from 'utils/misc'
-import { hexToBrightness } from 'utils/color'
-import { getValue } from 'utils/data'
-
-// Types
-import { ContinuousScale } from 'types/scale'
-
-// Config
-import { ScatterConfig } from '../config'
-
-// Local Types
-import { ScatterPoint } from '../types'
-
-// Local Utils
-import { getCentralLabelFontSize, getLabelShift } from './utils'
-
-export function createPoints<Datum> (
-  selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale
-): void {
-  selection.attr('transform', d => `translate(${d._point.xValue},${d._point.yValue})`)
-  selection.append('path').style('fill', d => d._point.color)
-  selection.append('text')
-    .style('pointer-events', 'none')
-
-  selection.attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(0)`)
-}
-
-export function updatePoints<Datum> (
-  selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,
-  config: ScatterConfig<Datum>,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale,
-  duration: number
-): void {
-  const symbolGenerator = symbol()
-
-  selection.each((d, index, elements) => {
-    const i = d._point.pointIndex
-    const group: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]> = select(elements[i])
-    const label = group.select('text')
-    const path = group.select('path')
-
-    // Shape
-    const pointDiameter = d._point.sizePx
-    const pointColor = d._point.color
-    path.attr('d', () => {
-      const svgPath = d._point.shape ? symbolGenerator
-        .size(Math.PI * pointDiameter * pointDiameter / 4)
-        .type(Symbol[d._point.shape])() : null
-      return svgPath
-    })
-
-    smartTransition(path, duration)
-      .style('fill', pointColor)
-      .style('stroke', pointColor)
-
-    // Label
-    const labelPosition = getValue(d, config.labelPosition, i) as `${Position}`
-    const isLabelPositionCenter = (labelPosition !== Position.Top) && (labelPosition !== Position.Bottom) &&
-      (labelPosition !== Position.Left) && (labelPosition !== Position.Right)
-    const pointLabelText = d._point.label ?? ''
-    const textLength = pointLabelText.length
-    const centralLabelFontSize = getCentralLabelFontSize(pointDiameter, textLength)
-
-    let labelColor = d._point.labelColor
-    if (!labelColor && isLabelPositionCenter) {
-      const c = pointColor || 'var(--vis-scatter-fill-color)'
-      const hex = color(isStringCSSVariable(c) ? getCSSVariableValue(c, group.node()) : c)?.hex()
-      const brightness = hexToBrightness(hex)
-      labelColor = brightness > config.labelTextBrightnessRatio ? 'var(--vis-scatter-point-label-text-color-dark)' : 'var(--vis-scatter-point-label-text-color-light)'
-    }
-
-    const labelShift = getLabelShift(labelPosition, pointDiameter)
-    label.html(pointLabelText)
-      .attr('x', labelShift[0])
-      .attr('y', labelShift[1])
-      .style('font-size', isLabelPositionCenter ? centralLabelFontSize : null)
-      .style('text-anchor', () => {
-        switch (labelPosition) {
-          case Position.Right: return null
-          case Position.Left: return 'end'
-          default: return 'middle'
-        }
-      })
-      .style('dominant-baseline', () => {
-        switch (labelPosition) {
-          case Position.Top: return null
-          case Position.Bottom: return 'hanging'
-          default: return 'central'
-        }
-      })
-
-    smartTransition(label, duration)
-      .style('fill', labelColor)
-
-    path.style('cursor', d._point.cursor)
-  })
-
-  smartTransition(selection, duration)
-    .attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(1)`)
-}
-
-export function removePoints<Datum> (
-  selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale,
-  duration: number
-): void {
-  smartTransition(selection, duration)
-    .attr('transform', d => `translate(${xScale(d._point.xValue)},${yScale(d._point.yValue)}) scale(0)`)
-    .remove()
-}
-

package/src/components/scatter/modules/utils.ts

@@ -1,150 +0,0 @@
-import { select, Selection } from 'd3-selection'
-import { Position } from 'types/position'
-
-// Utils
-import { rectIntersect } from 'utils/misc'
-import { estimateStringPixelLength } from 'utils/text'
-import { getValue } from 'utils/data'
-
-// Types
-import { ContinuousScale } from 'types/scale'
-import { Rect } from 'types/misc'
-
-// Local Types
-import { ScatterPoint, ScatterPointGroupNode } from '../types'
-
-// Config
-import { ScatterConfig } from '../config'
-
-export function isLabelPositionCenter (labelPosition: Position | `${Position}`): boolean {
-  return (labelPosition !== Position.Top) && (labelPosition !== Position.Bottom) &&
-  (labelPosition !== Position.Left) && (labelPosition !== Position.Right)
-}
-
-export function getCentralLabelFontSize (pointDiameter: number, textLength: number): number {
-  return textLength ? 0.7 * pointDiameter / Math.pow(textLength, 0.5) : 0
-}
-
-export function getLabelShift (
-  labelPosition: `${Position}`,
-  pointDiameter: number,
-  labelPadding = 5
-): [number, number] {
-  switch (labelPosition) {
-    case Position.Top:
-      return [0, -pointDiameter / 2 - labelPadding]
-    case Position.Bottom:
-      return [0, pointDiameter / 2 + labelPadding]
-    case Position.Left:
-      return [-pointDiameter / 2 - labelPadding, 0]
-    case Position.Right:
-      return [pointDiameter / 2 + labelPadding, 0]
-    default:
-      return [0, 0]
-  }
-}
-
-export function getEstimatedLabelBBox<Datum> (
-  d: ScatterPoint<Datum>,
-  labelPosition: Position | `${Position}`,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale,
-  fontSizePx: number
-): Rect {
-  const x = xScale(d._point.xValue)
-  const y = yScale(d._point.yValue)
-  const pointDiameter = d._point.sizePx
-
-  const pointLabelText = d._point.label ?? ''
-  const textLength = pointLabelText.length
-  const centralLabelFontSize = getCentralLabelFontSize(pointDiameter, textLength)
-
-  const width = estimateStringPixelLength(pointLabelText, isLabelPositionCenter(labelPosition) ? centralLabelFontSize : fontSizePx, 0.6)
-  const height = fontSizePx
-
-  const labelShift = getLabelShift(labelPosition, pointDiameter)
-  const dx = labelPosition === Position.Left ? -width
-    : labelPosition === Position.Right ? 0 : -width / 2
-  const dy = labelPosition === Position.Top ? -height
-    : labelPosition === Position.Bottom ? 0 : -height / 2
-
-  const bbox: Rect = {
-    x: x + labelShift[0] + dx,
-    y: y + labelShift[1] + dy,
-    width: width,
-    height: height,
-  }
-
-  return bbox
-}
-
-export function collideLabels<Datum> (
-  selection: Selection<SVGGElement, ScatterPoint<Datum>, SVGGElement, ScatterPoint<Datum>[]>,
-  config: ScatterConfig<Datum>,
-  xScale: ContinuousScale,
-  yScale: ContinuousScale
-): void {
-  // Reset visibility of all labels
-  selection.each((datum1: ScatterPoint<Datum>, i, elements) => {
-    const node = elements[i] as ScatterPointGroupNode
-    node._labelVisible = true
-  })
-
-  // Run collision detection and set labels visibility
-  selection.each((datum1: ScatterPoint<Datum>, i, elements) => {
-    const group1Node = elements[i] as ScatterPointGroupNode
-    const label1Position = getValue(datum1, config.labelPosition, datum1._point.pointIndex)
-    if (!group1Node._labelVisible || isLabelPositionCenter(label1Position)) return
-
-    const label1 = select<SVGGElement, ScatterPoint<Datum>>(group1Node).select<SVGTextElement>('text')
-    const label1FontSize = Number.parseFloat(window.getComputedStyle(label1.node())?.fontSize)
-
-    // Calculate bounding rect of point's label
-    const label1BoundingRect = getEstimatedLabelBBox(datum1, label1Position, xScale, yScale, label1FontSize)
-
-    for (let j = 0; j < elements.length; j += 1) {
-      if (i === j) continue
-      const group2Node = elements[j] as ScatterPointGroupNode
-      const group2 = select<SVGGElement, ScatterPoint<Datum>>(group2Node)
-      const label2 = group2.select<SVGTextElement>('text')
-      const datum2 = group2.datum()
-
-      // Calculate bounding rect of the second point's circle
-      const p2Pos = [xScale(datum2._point.xValue), yScale(datum2._point.yValue)]
-      const p2Radius = datum2._point.sizePx / 2
-      const point2BoundingRect = {
-        x: p2Pos[0] - p2Radius,
-        y: p2Pos[1] - p2Radius,
-        width: 2 * p2Radius,
-        height: 2 * p2Radius,
-      }
-
-      let intersect = rectIntersect(label1BoundingRect, point2BoundingRect, 2)
-
-      // If there's no intersection, check for collision with the second point's label
-      const label2Visible = group2Node._labelVisible
-      if (!intersect && label2Visible) {
-        const label2FontSize = Number.parseFloat(window.getComputedStyle(label2.node())?.fontSize)
-        const label2Position = getValue(datum2, config.labelPosition, datum2._point.pointIndex)
-        const label2BoundingRect = getEstimatedLabelBBox(datum2, label2Position, xScale, yScale, label2FontSize)
-
-        intersect = rectIntersect(label1BoundingRect, label2BoundingRect, 0.25)
-      }
-
-      if (intersect) {
-        if (group1Node._forceShowLabel) group2Node._labelVisible = false
-        else {
-          group1Node._labelVisible = false
-          break
-        }
-      }
-    }
-  })
-
-  // Hide the overlapping labels
-  selection.each((datum1: ScatterPoint<Datum>, i, elements) => {
-    const node = elements[i] as ScatterPointGroupNode
-    const label = select<SVGGElement, ScatterPoint<Datum>>(node).select<SVGTextElement>('text')
-    label.attr('opacity', node._labelVisible ? 1 : 0)
-  })
-}

package/src/components/scatter/types.ts

@@ -1,21 +0,0 @@
-import { SymbolType } from 'types/symbol'
-
-export type ScatterPoint<D> = D & {
-  _point: {
-    xValue: number;
-    yValue: number;
-    sizePx: number;
-    color: string | null;
-    shape: SymbolType | string;
-    label: string | null;
-    labelColor: string | null;
-    cursor: string | null;
-    groupIndex: number;
-    pointIndex: number;
-  };
-}
-
-export type ScatterPointGroupNode = SVGGElement & {
-  _labelVisible: boolean;
-  _forceShowLabel?: boolean;
-}

package/src/components/stacked-bar/config.ts

@@ -1,42 +0,0 @@
-import { XYComponentConfigInterface, XYComponentConfig } from 'core/xy-component/config'
-
-// Types
-import { StringAccessor } from 'types/accessor'
-import { Orientation } from 'types/position'
-
-export interface StackedBarConfigInterface<Datum> extends XYComponentConfigInterface<Datum> {
-  /** Force set bar width in pixels. Default: `undefined` */
-  barWidth?: number;
-  /** Maximum bar width for dynamic sizing. Default: `undefined` */
-  barMaxWidth?: number;
-  /** Expected step between the bars in the X axis units.
-   * Needed to correctly calculate the width of the bars when there are gaps in the data.
-   * Default: `undefined` */
-  dataStep?: number;
-  /** Fractional padding between the bars in the range of [0,1). Default: `0` */
-  barPadding?: number;
-  /** Rounded corners for top bars. Boolean or number (to set the radius in pixels). Default: `2` */
-  roundedCorners?: number | boolean;
-  /** Configurable bar cursor when hovering over. Default: `null` */
-  cursor?: StringAccessor<Datum>;
-  /** Sets the minimum bar height to 1 pixel for better visibility of small values. Default: `false` */
-  barMinHeight1Px?: boolean;
-  /** Base value to test data existence when `barMinHeight1Px` is set to `true`.
-   * Everything equal to barMinHeightZeroValue will not be rendered on the chart.
-   * Default: `null` */
-  barMinHeightZeroValue?: any;
-  /** Chart orientation: `Orientation.Vertical` or `Orientation.Horizontal`. Default `Orientation.Vertical` */
-  orientation?: Orientation | string;
-}
-
-export class StackedBarConfig<Datum> extends XYComponentConfig<Datum> implements StackedBarConfigInterface<Datum> {
-  barMaxWidth = undefined
-  barWidth = undefined
-  dataStep = undefined
-  barPadding = 0.0
-  roundedCorners = 2
-  cursor = null
-  barMinHeight1Px = false
-  barMinHeightZeroValue = null
-  orientation = Orientation.Vertical
-}