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

package/src/components/scatter/index.ts

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

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

@@ -0,0 +1,150 @@
+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/{components/scatter/style.js → src/components/scatter/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-scatter-cursor: default;
     --vis-scatter-fill-color: var(--vis-color-main);
@@ -17,17 +17,21 @@ const globalStyles = injectGlobal `
     // Undefined by default to allow proper fallback to var(--vis-font-family)
     /* --vis-scatter-point-label-text-font-family: */
   }
-`;
-const root = css `
+`
+
+export const root = css`
   label: scatter-component;
-`;
-const pointGroup = css `
+`
+
+export const pointGroup = css`
   label: point-group;
-`;
-const pointGroupExit = css `
+`
+
+export const pointGroupExit = css`
   label: point-group-exit;
-`;
-const point = css `
+`
+
+export const point = css`
   label: point;
 
   > path {
@@ -50,7 +54,4 @@ const point = css `
     fill: var(--vis-scatter-point-label-text-color-dark);
     user-select: none;
   }
-`;
-
-export { globalStyles, point, pointGroup, pointGroupExit, root };
-//# sourceMappingURL=style.js.map
+`

package/src/components/scatter/types.ts

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

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