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

package/src/utils/html.ts

@@ -0,0 +1,13 @@
+import { select } from 'd3-selection'
+
+export function getHTMLTransform (el: HTMLElement): number[] {
+  const results = select(el).style('transform')
+    // eslint-disable-next-line max-len
+    .match(/matrix(?:(3d)\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*)), -{0,1}\d+\.?\d*\)|\(-{0,1}\d+\.?\d*(?:, -{0,1}\d+\.?\d*)*(?:, (-{0,1}\d+\.?\d*))(?:, (-{0,1}\d+\.?\d*))\))/)
+
+  if (!results) return [0, 0, 0]
+  if (results[1] === '3d') return results.slice(2, 5).map(d => +d)
+
+  results.push('0')
+  return results.slice(5, 8).map(d => +d)
+}

package/src/utils/map.ts

@@ -0,0 +1,29 @@
+import { min, max } from 'd3-array'
+
+// Types
+import { NumericAccessor } from 'types/accessor'
+
+// Utils
+import { getNumber } from 'utils/data'
+
+export function getDataLatLngBounds<D> (
+  data: D[],
+  pointLatitude: NumericAccessor<D>,
+  pointLongitude: NumericAccessor<D>,
+  paddingDegrees = 1
+): [[number, number], [number, number]] {
+  const northWest = {
+    lat: max(data ?? [], d => getNumber(d, pointLatitude)),
+    lng: min(data ?? [], d => getNumber(d, pointLongitude)),
+  }
+
+  const southEast = {
+    lat: min(data ?? [], d => getNumber(d, pointLatitude)),
+    lng: max(data ?? [], d => getNumber(d, pointLongitude)),
+  }
+
+  return [
+    [northWest.lat + paddingDegrees || 90, northWest.lng - paddingDegrees || -180],
+    [southEast.lat - paddingDegrees || -70, southEast.lng + paddingDegrees || 180],
+  ]
+}

package/src/utils/misc.ts

@@ -0,0 +1,54 @@
+import { StringAccessor } from 'types/accessor'
+import { Rect } from 'types/misc'
+import { getString, isString } from 'utils/data'
+import toPx from 'to-px'
+
+export function guid (): string {
+  const s4 = (): string =>
+    Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1)
+
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`
+}
+
+export function stringToHtmlId (str: string): string {
+  return (str || '').replace(/\W/g, '_')
+}
+
+export function isStringCSSVariable (s: string): boolean {
+  return isString(s) ? (s.substring(0, 6) === 'var(--') : false
+}
+
+export function getCSSVariableValue (s: string, context: HTMLElement | SVGElement): string {
+  if (!isString(s)) return ''
+  const variableName = s.substr(4, s.length - 5)
+  return getComputedStyle(context).getPropertyValue(variableName)
+}
+
+export function getCSSVariableValueInPixels (s: string, context: HTMLElement | SVGElement): number {
+  const val = getCSSVariableValue(s, context)
+  return toPx(val)
+}
+
+export function rectIntersect (rect1: Rect, rect2: Rect, tolerancePx = 0): boolean {
+  const [left1, top1, right1, bottom1] = [
+    rect1.x + tolerancePx,
+    rect1.y + rect1.height - 2 * tolerancePx,
+    rect1.x + rect1.width - 2 * tolerancePx,
+    rect1.y + tolerancePx,
+  ]
+  const [left2, top2, right2, bottom2] = [
+    rect2.x + tolerancePx,
+    rect2.y + rect2.height - 2 * tolerancePx,
+    rect2.x + rect2.width - 2 * tolerancePx,
+    rect2.y + tolerancePx,
+  ]
+
+  return !(top1 < bottom2 || top2 < bottom1 || right1 < left2 || right2 < left1)
+}
+
+export function getHref<T> (d: T, identifier: StringAccessor<T>): string {
+  const id = getString(d, identifier)
+  return id ? `url(#${id})` : null
+}

package/src/utils/path.ts

@@ -0,0 +1,196 @@
+import { range, min, max } from 'd3-array'
+import { line, curveCardinal, curveCardinalClosed } from 'd3-shape'
+
+// Utils
+import { clamp } from 'utils/data'
+
+export type RoundedRectPathOptions = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  r: number;
+  tl: boolean;
+  tr: boolean;
+  bl: boolean;
+  br: boolean;
+}
+
+/*
+ * Generate SVG path for rectangle with rounded corners
+ *
+ * @param {Object} props - Configuration object
+ * @param {Number} props.x - Rect top left X coordinate
+ * @param {Number} props.y - Rect top left Y coordinate
+ * @param {Number} props.w - Rect width
+ * @param {Number} props.h - Rect height
+ * @param {Bool} [props.tl=false] - Round top left corner
+ * @param {Bool} [props.tr=false] - Round top right corner
+ * @param {Bool} [props.bl=false] - Round bottom left corner
+ * @param {Bool} [props.br=false] - Round bottom right corner
+ * @param {Number} [props.r=0] - Corner Radius
+ * @return {String} Path string for the `d` attribute
+ */
+export function roundedRectPath ({
+  x,
+  y,
+  w,
+  h,
+  tl = false,
+  tr = false,
+  bl = false,
+  br = false,
+  r = 0,
+}: RoundedRectPathOptions): string {
+  let path
+  path = `M${x + r},${y}h${w - 2 * r}`
+
+  let roundedR = tr ? r : 0
+  let angularR = tr ? 0 : r
+  path += `a${roundedR},${roundedR} 0 0 1 ${roundedR},${roundedR}`
+  path += `h${angularR}v${angularR}`
+  path += `v${h - 2 * r}`
+
+  roundedR = br ? r : 0
+  angularR = br ? 0 : r
+  path += `a${roundedR},${roundedR} 0 0 1 ${-roundedR},${roundedR}`
+  path += `v${angularR}h${-angularR}`
+  path += `h${2 * r - w}`
+
+  roundedR = bl ? r : 0
+  angularR = bl ? 0 : r
+  path += `a${roundedR},${roundedR} 0 0 1 ${-roundedR},${-roundedR}`
+  path += `h${-angularR}v${-angularR}`
+  path += `v${2 * r - h}`
+
+  roundedR = tl ? r : 0
+  angularR = tl ? 0 : r
+  path += `a${roundedR},${roundedR} 0 0 1 ${roundedR},${-roundedR}`
+  path += `v${-angularR}h${angularR}`
+
+  path += 'z'
+  return path
+}
+
+export function polygon (size: number, n = 6, endAngle = 2 * Math.PI, open = false): string {
+  const r = n === 4 ? Math.sqrt(0.5) * size : size / 3.6 * 2
+  const deltaAngle = n === 4 ? Math.PI / 4 : 0 // rotate to 45 grads if shape is a rectangle
+  const shiftedEndAngle = endAngle - deltaAngle
+
+  const completion = (shiftedEndAngle < 0 ? endAngle : shiftedEndAngle) / (2 * Math.PI)
+  const nSegments = Math.ceil(n * completion)
+
+  const centerAngle = 1 / n * Math.PI * 2 //          /\
+  const baseAngle = (Math.PI - centerAngle) / 2 //   /__\
+
+  const data = range(nSegments + (shiftedEndAngle >= 0 ? 1 : 0))
+    .map((d, i) => {
+      const isLastSegment = i === nSegments || (nSegments === 1 && shiftedEndAngle < 0)
+      let mult = isLastSegment ? ((completion * n) % 1 || 1) : 1 // Handle partial shape
+      if (shiftedEndAngle < 0) {
+        mult += 0.5
+      }
+      const angle = centerAngle * (i - 1 + mult)
+
+      let radius
+      if (isLastSegment) {
+        const thirdAngle = Math.PI - baseAngle - centerAngle * mult
+        radius = r * Math.sin(baseAngle) / Math.sin(thirdAngle) // Law of sines
+      } else {
+        radius = r
+      }
+
+      return {
+        x: Math.sin(angle + deltaAngle) * radius,
+        y: -Math.cos(angle + deltaAngle) * radius,
+      }
+    })
+
+  if (n === 4) {
+    const angle = centerAngle * (-1 + 0.5)
+    const thirdAngle = Math.PI * 0.5
+    const radius = r * Math.sin(baseAngle) / Math.sin(thirdAngle) // Law of sines
+    data.unshift({
+      x: Math.sin(angle + deltaAngle) * radius,
+      y: -Math.cos(angle + deltaAngle) * radius,
+    })
+  }
+
+  const path = line<any>()
+    /* eslint-disable-next-line dot-notation */
+    .x(d => d['x'])
+    /* eslint-disable-next-line dot-notation */
+    .y(d => d['y'])
+    .curve((open ? curveCardinal : curveCardinalClosed).tension(0.95))
+
+  return path(data)
+}
+
+export function circlePath (cx: number, cy: number, r: number): string {
+  return `
+    M ${cx} ${cy}
+    m ${-r}, 0
+    a ${r},${r} 0 1,1 ${r * 2},0
+    a ${r},${r} 0 1,1 ${-r * 2},0`
+}
+
+export type ScoreRectPathOptions = {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  r: number;
+  score: number;
+}
+
+export function scoreRectPath ({ x, y, w, h, r = 0, score = 1 }: ScoreRectPathOptions): string {
+  let path
+  const side = 1 / 4
+  const halfSide = side / 2
+  let part = score
+
+  //    8 1
+  //    - -
+  // 7 |   | 2
+  // 6 |   | 3
+  //    - -
+  //    5 4
+
+  // 1
+  const hLength = min([w * 0.5 * (part / halfSide) + r, w * 0.5 - r])
+  path = `M${x + w * 0.5},${y}h${hLength}`
+
+  // 2, 3
+  part = score - 1 / 8
+  if (part > 0) {
+    path += `a${r},${r} 0 0 1 ${r},${r}`
+    const vLength = clamp(h * (part / side) - r, 0, h - 2 * r)
+    path += `v${vLength}`
+  }
+
+  // 4, 5
+  part = score - 3 / 8
+  if (part > 0) {
+    path += `a${r},${r} 0 0 1 ${-r},${r}`
+    const hLength = clamp(r - w * (part / side), 2 * r - w, 0)
+    path += `h${hLength}`
+  }
+
+  // 6, 7
+  part = score - 5 / 8
+  if (part > 0) {
+    path += `a${r},${r} 0 0 1 ${-r},${-r}`
+    const vLength = clamp(r - h * (part / side), 2 * r - h, 0)
+    path += `v${vLength}`
+  }
+
+  // 8
+  part = score - 7 / 8
+  if (part > 0) {
+    path += `a${r},${r} 0 0 1 ${r},${-r}`
+    const hLength = max([w * 0.5 * (part / halfSide) - r, 0])
+    path += `h${hLength}`
+  }
+
+  return path
+}

package/src/utils/scale.ts

@@ -0,0 +1 @@
+export const DefaultRange = [1, 40]

package/src/utils/style.ts

@@ -0,0 +1,37 @@
+import { injectGlobal } from '@emotion/css'
+
+import { kebabCaseToCamel } from 'utils/text'
+import type { KebabToCamelCase, RemovePrefix } from 'utils/type'
+
+export function getCssVarNames<
+  T extends Record<string, unknown>,
+  Prefix extends string = '--vis-',
+> (cssVarsObject: T, prefix?: Prefix): {
+  [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property
+} {
+  const defaultPrefix = '--vis-'
+  const entries = Object.entries(cssVarsObject)
+  return Object.fromEntries(
+    entries.map(([key]) => [kebabCaseToCamel(key.replace(prefix ?? defaultPrefix, '')), key])
+  ) as {
+    [Property in Extract<keyof T, string> as KebabToCamelCase<RemovePrefix<Property, Prefix>>]: Property
+  }
+}
+
+export function injectGlobalCssVariables<T extends Record<string, string | number | undefined>> (
+  cssVarsObject: T,
+  componentRootClassName: string
+): void {
+  injectGlobal({
+    ':root': cssVarsObject,
+    [`body.theme-dark .${componentRootClassName}`]: Object.keys(cssVarsObject)
+      .filter(key => key.includes('--vis-dark'))
+      .map(key => ({
+        [key.replace('--vis-dark', '--vis')]: `var(${key})`,
+      })),
+  })
+}
+
+export function cssvar<T extends string> (name: T): `var(${T})` {
+  return `var(${name})` as `var(${T})`
+}

package/src/utils/svg.ts

@@ -0,0 +1,49 @@
+import { TransformValues } from 'types/svg'
+
+export function getTransformValues (svgElement: SVGElement): TransformValues {
+  // Get the transform attribute value from the SVG element
+  const transformAttribute = svgElement.getAttribute('transform')
+
+  // Regular expressions to extract translate and scale values from the transform attribute
+  const translateRegex = /translate\(\s*(-?[\d.]+)\s*,?\s*(-?[\d.]+)?\s*\)/
+  const scaleRegex = /scale\(\s*(-?[\d.]+)\s*,?\s*(-?[\d.]+)?\s*\)/
+
+  // Initialize default values
+  const transformValues: TransformValues = {
+    translate: { x: 0, y: 0 },
+    scale: { x: 1, y: 1 },
+  }
+
+  if (transformAttribute) {
+    // Extract translate values
+    const translateMatches = transformAttribute.match(translateRegex)
+    if (translateMatches) {
+      transformValues.translate.x = parseFloat(translateMatches[1])
+      transformValues.translate.y = translateMatches[2] ? parseFloat(translateMatches[2]) : 0
+    }
+
+    // Extract scale values
+    const scaleMatches = transformAttribute.match(scaleRegex)
+    if (scaleMatches) {
+      transformValues.scale.x = parseFloat(scaleMatches[1])
+      transformValues.scale.y = scaleMatches[2] ? parseFloat(scaleMatches[2]) : transformValues.scale.x
+    }
+  }
+
+  return transformValues
+}
+
+export function transformValuesToString (transformValues: TransformValues): string {
+  const translateString = `translate(${transformValues.translate.x} ${transformValues.translate.y})`
+
+  // Only include scaleString when both scale values are not 1
+  const shouldIncludeScaleString = transformValues.scale.x !== 1 || transformValues.scale.y !== 1
+  const scaleString = shouldIncludeScaleString ? `scale(${transformValues.scale.x} ${transformValues.scale.y})` : ''
+
+  // Combine the translate and scale strings into a single transform attribute string
+  const transformString = scaleString
+    ? `${translateString} ${scaleString}`
+    : translateString
+
+  return transformString
+}