@aptpod/data-viz-create-visual-parts-react/template/visual-parts-react/src/entrypoint/samples/line-graph/utils.ts

template of npm project with typescript

import { color as d3$color } from 'd3'
import bound from 'binary-search-bounds'

/**
 * グラフ表示を表示ピクセルサイズにフィットするか判定する
 */
export const shouldContentFit = (colSpan: number, rowSpan: number): boolean => {
  return colSpan <= 1 || rowSpan <= 1
}

/**
 * RGB, またはRGBAのカラー文字列を作成します。
 */
export const buildColorWithOpacity = (
  color: string,
  opacity: number,
): string | null => {
  const c = d3$color(color)
  if (!c) {
    return null
  }
  c.opacity = opacity
  return String(c)
}

/**
 * 配列に指定文字を含むか判定します
 */
export const arrayIncludes = <T>(array: T[], searchElement: T): boolean => {
  return array.includes(searchElement)
}

/**
 * 指定要素以下 (less than or equal to) のIndexを検索する。
 * 見つからない場合は-1を返す。
 */
export const arraySearchIndexLe = <T>(
  array: T[],
  searchElement: T,
  compiler: (sourceElement: T, searchElement_: T) => number,
): number => {
  return bound.le(array, searchElement, compiler)
}

/**
 * 配列の指定要素以上 (geater than or equal to) のIndexを取得する。
 * 見つからない場合は-1を返す。
 */
export const arraySearchIndexGe = <T>(
  array: T[],
  searchElement: T,
  compiler: (sourceElement: T, searchElement_: T) => number,
): number => {
  const index = bound.ge(array, searchElement, compiler)
  if (index >= array.length) {
    return -1
  }
  return index
}