@operato/chart 8.0.0-beta.0 → 8.0.0-beta.2

package/src/scichart/scichart-builder.ts

@@ -1,508 +0,0 @@
-import { TinyColor } from '@ctrl/tinycolor'
-import { format as formatText } from '@operato/utils/format.js'
-
-function getBaseColorFromTheme(theme?: 'light' | 'dark' | 'auto') {
-  return new TinyColor(theme == 'dark' ? '#fff' : '#000')
-}
-
-function getThemeFromBrowser() {
-  return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
-}
-
-function convertColor(color: string | string[] | undefined, defaultColor?: string) {
-  const tinyColor = new TinyColor(color as string)
-  return tinyColor.toHex8String() || defaultColor
-}
-
-function getLocalTimeOffset() {
-  const now = new Date()
-  return now.getTimezoneOffset() * -60
-}
-
-function calculatePrecision(stepSize: number = 1) {
-  // stepSize를 문자열로 변환한 다음, 소수점 이후 자릿수를 계산
-  const stepSizeString = stepSize.toString()
-
-  // 소수점이 있는 경우, 소수점 이후 자릿수 계산
-  if (stepSizeString.indexOf('.') !== -1) {
-    return stepSizeString.split('.')[1].length
-  }
-
-  // 소수점이 없는 경우, precision은 0
-  return 0
-}
-
-export async function buildSciChart(
-  config: OperatoChart.ChartConfig | undefined | null,
-  container: any,
-  { fontSize = 14, fontFamily = 'Roboto', fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
-): Promise<{ chart: any; dataSeries: any[] } | undefined> {
-  if (!config) {
-    return
-  }
-
-  const {
-    SciChartSurface,
-    SciChartJSLightTheme,
-    SciChartJSDarkv2Theme,
-    XyDataSeries,
-    FastLineRenderableSeries,
-    SplineLineRenderableSeries,
-    FastColumnRenderableSeries,
-    StackedColumnRenderableSeries,
-    StackedMountainRenderableSeries,
-    StackedColumnCollection,
-    StackedMountainCollection,
-    NumericAxis,
-    DateTimeNumericAxis,
-    ENumericFormat,
-    EAutoRange,
-    EAxisAlignment,
-    ECoordinateMode,
-    EHorizontalAnchorPoint,
-    EVerticalAnchorPoint,
-    NumberRange,
-    MouseWheelZoomModifier,
-    RubberBandXyZoomModifier,
-    ZoomPanModifier,
-    ZoomExtentsModifier,
-    RolloverModifier,
-    SmartDateLabelProvider,
-    NumericLabelProvider,
-    EllipsePointMarker,
-    SquarePointMarker,
-    TrianglePointMarker,
-    CrossPointMarker,
-    XPointMarker,
-    WaveAnimation,
-    LegendModifier,
-    XAxisDragModifier,
-    YAxisDragModifier,
-    TextAnnotation,
-    LineAnnotation,
-    BoxAnnotation,
-    HorizontalLineAnnotation,
-    VerticalLineAnnotation
-  } = SciChart
-
-  class LocalTimeLabelProvider extends SmartDateLabelProvider {
-    formatLabel(value: number): string {
-      const date = new Date(value)
-
-      try {
-        const formatter = new Intl.DateTimeFormat(navigator.language || 'en-US', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit'
-        })
-
-        return formatter.format(date)
-      } catch (e) {
-        console.warn('Invalid locale or options provided, falling back to default.', e)
-
-        const fallbackFormatter = new Intl.DateTimeFormat('en-US', {
-          year: 'numeric',
-          month: '2-digit',
-          day: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          second: '2-digit'
-        })
-
-        return fallbackFormatter.format(date)
-      }
-    }
-  }
-
-  const { type: chartType, options, data: fromData } = config
-  const { datasets = [] } = fromData || {}
-  var {
-    theme,
-    tooltip = true,
-    animation = true,
-    legend = {
-      display: true,
-      position: 'top'
-    },
-    scales: fromScales,
-    xGridLine = true,
-    yGridLine = true,
-    y2ndGridLine = false,
-    stacked = false,
-    multiAxis = false,
-    annotations = []
-  } = options || {}
-
-  var baseColor = getBaseColorFromTheme(theme)
-
-  if (theme === 'auto') {
-    theme = getThemeFromBrowser()
-  }
-
-  fontColor = fontColor || baseColor.clone().toString()
-
-  const { xAxes = [], yAxes = [] } = fromScales || {}
-
-  const chart = await SciChartSurface.create(container, {
-    theme: theme == 'dark' ? new SciChartJSDarkv2Theme() : new SciChartJSLightTheme()
-  })
-  const { sciChartSurface, wasmContext } = chart
-
-  // X 축 설정
-  xAxes.forEach((axis, index) => {
-    const { axisTitle, ticks } = axis
-    const {
-      autoMax,
-      autoMin,
-      min,
-      max,
-      stepSize,
-      beginAtZero,
-      color = fontColor,
-      textStrokeColor = fontColor,
-      display = !!axisTitle
-    } = ticks || {}
-
-    const labelProvider = new SmartDateLabelProvider({
-      showWiderDateOnFirstLabel: true,
-      showYearOnWiderDate: true,
-      dateOffset: getLocalTimeOffset()
-    })
-
-    labelProvider.cursorNumericFormat = ENumericFormat.Date_MMHHSS
-
-    const xAxis = new DateTimeNumericAxis(wasmContext, {
-      axisTitle,
-      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
-      axisAlignment: EAxisAlignment.Bottom,
-      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
-      majorDelta: stepSize,
-      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
-      labelStyle: {
-        fontFamily,
-        fontSize,
-        color
-      },
-      axisTitleStyle: {
-        fontFamily,
-        fontSize,
-        color: textStrokeColor
-      },
-      labelProvider
-    })
-
-    sciChartSurface.xAxes.add(xAxis)
-  })
-
-  // Y 축 설정
-  ;(multiAxis ? yAxes : [yAxes[0]]).forEach((axis, index) => {
-    const { axisTitle, ticks } = axis
-    const { autoMax, autoMin, min, max, stepSize, beginAtZero, display } = ticks || {}
-
-    const labelProvider = display ? new NumericLabelProvider() : undefined
-
-    if (labelProvider) {
-      labelProvider.numericFormat = ENumericFormat.Decimal
-      labelProvider.precision = calculatePrecision(stepSize || 0.1)
-      labelProvider.cursorNumericFormat = ENumericFormat.NoFormat
-    }
-
-    const yAxis = new NumericAxis(wasmContext, {
-      id: index == 0 ? undefined : `yAxis${index}`,
-      axisTitle,
-      autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
-      axisAlignment: index === 0 ? EAxisAlignment.Left : EAxisAlignment.Right,
-      visibleRange: min !== undefined && max !== undefined ? new NumberRange(min, max) : undefined,
-      majorDelta: stepSize || 0.1,
-      minorDelta: (stepSize || 1) * 0.1,
-      growBy: beginAtZero ? new NumberRange(0.1, 0.1) : undefined,
-      labelStyle: {
-        display: !!display,
-        fontFamily,
-        fontSize,
-        color: fontColor
-      },
-      axisTitleStyle: {
-        fontFamily,
-        fontSize,
-        color: fontColor
-      },
-      labelProvider
-    })
-
-    sciChartSurface.yAxes.add(yAxis)
-  })
-
-  // 시리즈 설정
-  const dataSeriesArray = datasets.map((dataset, index) => {
-    const dataSeries = new XyDataSeries(wasmContext, {
-      dataSeriesName: dataset.label,
-      containsNaN: false
-    })
-
-    const yAxisId = dataset.yAxisID == 'right' && multiAxis ? 'yAxis1' : undefined
-    const stackGroupId = dataset.stack || `__stack${index}__`
-
-    let series: any
-    if (dataset.type === 'bar') {
-      if (stacked) {
-        series = new StackedColumnRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: dataset.borderWidth || 2,
-          fill: convertColor(dataset.backgroundColor, '#FF6600'),
-          yAxisId,
-          stackedGroupId: stackGroupId
-        })
-      } else {
-        series = new FastColumnRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: dataset.borderWidth || 2,
-          stroke: convertColor(dataset.backgroundColor, '#FF6600'),
-          animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
-          yAxisId
-        })
-      }
-    } else {
-      const { pointStyle, pointRadius = 10, lineTension } = dataset
-      let pointMarker = null // 초기값을 null로 설정
-
-      if (pointStyle) {
-        switch (pointStyle) {
-          case 'circle':
-            pointMarker = new EllipsePointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-            break
-          case 'triangle':
-            pointMarker = new TrianglePointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-            break
-          case 'rect':
-            pointMarker = new SquarePointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-            break
-          case 'cross':
-            pointMarker = new CrossPointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-            break
-          case 'crossRot':
-            pointMarker = new XPointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-            break
-          default:
-            pointMarker = new EllipsePointMarker(wasmContext, {
-              width: pointRadius,
-              height: pointRadius,
-              strokeThickness: 2,
-              fill: convertColor(dataset.color, '#FF6600'),
-              stroke: '#000000'
-            })
-        }
-      }
-
-      if (stacked) {
-        series = new StackedMountainRenderableSeries(wasmContext, {
-          dataSeries,
-          strokeThickness: dataset.borderWidth || 2,
-          stroke: convertColor(dataset.color, '#FF6600'),
-          fill: dataset.backgroundColor || '#FF6600',
-          yAxisId,
-          stackedGroupId: stackGroupId
-        })
-      } else {
-        series =
-          !!lineTension && lineTension > 0
-            ? new SplineLineRenderableSeries(wasmContext, {
-                dataSeries,
-                strokeThickness: dataset.borderWidth || 2,
-                stroke: convertColor(dataset.color, '#FF6600'),
-                pointMarker,
-                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
-                yAxisId
-              })
-            : new FastLineRenderableSeries(wasmContext, {
-                dataSeries,
-                strokeThickness: dataset.borderWidth || 2,
-                stroke: convertColor(dataset.color, '#FF6600'),
-                pointMarker,
-                animation: animation && new WaveAnimation({ duration: 1000, fadeEffect: true }),
-                yAxisId
-              })
-      }
-    }
-
-    sciChartSurface.renderableSeries.add(series)
-
-    if (tooltip) {
-      const rolloverModifier = new RolloverModifier({
-        showTooltip: true,
-        showAxisLabel: false /* 한글의 크기를 잘 계산하지 못하므로 false */,
-        tooltipColor: 'white',
-        tooltipBackgroundColor: 'rgba(0, 0, 0, 0.7)',
-        rollOverDataSeries: dataSeries
-      })
-
-      sciChartSurface.chartModifiers.add(rolloverModifier)
-    }
-
-    return dataSeries
-  })
-
-  // Stacked collections 추가
-  if (stacked) {
-    const stackedColumnCollection = new StackedColumnCollection(wasmContext)
-    const stackedMountainCollection = new StackedMountainCollection(wasmContext)
-
-    sciChartSurface.renderableSeries.asArray().forEach((series: any) => {
-      if (series instanceof StackedColumnRenderableSeries) {
-        stackedColumnCollection.add(series)
-      } else if (series instanceof StackedMountainRenderableSeries) {
-        stackedMountainCollection.add(series)
-      }
-    })
-
-    if (stackedColumnCollection.size() > 0) {
-      sciChartSurface.renderableSeries.add(stackedColumnCollection)
-    }
-
-    if (stackedMountainCollection.size() > 0) {
-      sciChartSurface.renderableSeries.add(stackedMountainCollection)
-    }
-  }
-
-  if (annotations) {
-    annotations.forEach(annotation => {
-      let sciAnnotation
-      let horizontalAnchorPoint =
-        annotation.horizontalAnchorPoint == 'Right'
-          ? EHorizontalAnchorPoint.Right
-          : annotation.horizontalAnchorPoint == 'Left'
-            ? EHorizontalAnchorPoint.Left
-            : EHorizontalAnchorPoint.Center
-      let verticalAnchorPoint =
-        annotation.verticalAnchorPoint == 'Top'
-          ? EVerticalAnchorPoint.Top
-          : annotation.verticalAnchorPoint == 'Bottom'
-            ? EVerticalAnchorPoint.Bottom
-            : EVerticalAnchorPoint.Center
-
-      switch (annotation.type) {
-        case 'text':
-          sciAnnotation = new TextAnnotation({
-            x1: annotation.x1,
-            y1: annotation.y1,
-            text: annotation.text,
-            horizontalAnchorPoint,
-            verticalAnchorPoint,
-            fontSize: annotation.fontSize,
-            fontFamily: annotation.fontFamily,
-            textColor: convertColor(annotation.stroke, fontColor),
-            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-          })
-          break
-        case 'line':
-          sciAnnotation = new LineAnnotation({
-            x1: annotation.x1,
-            y1: annotation.y1,
-            x2: annotation.x2,
-            y2: annotation.y2,
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-          })
-          break
-        case 'box':
-          sciAnnotation = new BoxAnnotation({
-            x1: annotation.x1,
-            y1: annotation.y1,
-            x2: annotation.x2,
-            y2: annotation.y2,
-            fill: convertColor(annotation.fill, '#FF0000'),
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-          })
-          break
-        case 'horizontalLine':
-          sciAnnotation = new HorizontalLineAnnotation({
-            y1: annotation.y1,
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-          })
-          break
-        case 'verticalLine':
-          sciAnnotation = new VerticalLineAnnotation({
-            x1: annotation.x1,
-            stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
-            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
-          })
-          break
-        default:
-          console.error('Unknown annotation type:', annotation.type)
-          break
-      }
-      if (sciAnnotation) {
-        sciChartSurface.annotations.add(sciAnnotation)
-      } else {
-        console.error('Failed to create annotation:', annotation)
-      }
-    })
-  }
-
-  // 줌인/줌아웃 모디파이어 추가
-  sciChartSurface.chartModifiers.add(
-    // new RubberBandXyZoomModifier(),
-    new ZoomPanModifier(),
-    new MouseWheelZoomModifier(),
-    new ZoomExtentsModifier(),
-    new XAxisDragModifier(),
-    new YAxisDragModifier()
-  )
-
-  // Legend 설정
-  if (legend?.display) {
-    const legendModifier = new LegendModifier({
-      showCheckboxes: true,
-      showSeriesMarkers: true,
-      showLegend: true,
-      placement: legend.position || 'bottom-right'
-    })
-    sciChartSurface.chartModifiers.add(legendModifier)
-  }
-
-  return { chart, dataSeries: dataSeriesArray }
-}

package/src/types.d.ts

@@ -1,124 +0,0 @@
-declare namespace OperatoChart {
-  export type SeriesType = 'bar' | 'horizontalBar' | 'line' | 'radar' | 'pie' | 'doughnut' | 'polarArea' | undefined
-  export type ChartType =
-    | 'bar'
-    | 'horizontalBar'
-    | 'line'
-    | 'radar'
-    | 'pie'
-    | 'doughnut'
-    | 'polarArea'
-    | 'mixed'
-    | 'timeseries'
-
-  export interface ChartConfig {
-    data: ChartData
-    options?: ChartOptions
-    type?: ChartType
-  }
-
-  export interface ChartData {
-    labels?: Array<string | string[]>
-    datasets: Dataset[]
-    labelDataKey?: string
-  }
-
-  export interface Dataset {
-    label?: string
-    data?: any[]
-    borderWidth?: number
-    dataKey?: string
-    yAxisID?: string
-    color?: string | string[]
-    type?: ChartType
-    backgroundColor?: string | string[]
-    stack?: string
-    fill?: boolean
-    lineTension?: number
-    pointStyle?:
-      | 'circle'
-      | 'triangle'
-      | 'rect'
-      | 'rectRot'
-      | 'cross'
-      | 'crossRot'
-      | 'star'
-      | 'line'
-      | 'dash'
-      | undefined
-    pointRadius?: number
-    valuePrefix?: string
-    valueSuffix?: string
-    valueFormat?: string
-    displayValue?: boolean | 'T' | 'F' | 'auto'
-    dataLabelAnchor?: string
-    dataLabelOffset?: number
-    dataLabelRotation?: number
-    [key: string]: any
-  }
-
-  export interface ChartOptions {
-    theme?: 'dark' | 'light' | 'auto'
-    tooltip?: boolean
-    animation?: boolean
-    legend?: LegendOptions
-    scales?: ScalesOptions
-    stacked?: boolean
-    xGridLine?: boolean
-    yGridLine?: boolean
-    y2ndGridLine?: boolean
-    multiAxis?: boolean
-    maintainAspectRatio?: boolean
-    plugins?: { [plugin: string]: any }
-    annotations?: Annotation[]
-  }
-
-  export interface LegendOptions {
-    display?: boolean
-    position?: 'top' | 'right' | 'bottom' | 'left'
-  }
-
-  export interface ScalesOptions {
-    xAxes?: AxisOptions[]
-    yAxes?: AxisOptions[]
-  }
-
-  export interface AxisOptions {
-    axisTitle?: string
-    barSpacing?: number
-    categorySpacing?: number
-    barPercentage?: number
-    ticks?: TickOptions
-  }
-
-  export interface TickOptions {
-    display?: boolean
-    autoMin?: boolean
-    autoMax?: boolean
-    min?: number
-    max?: number
-    stepSize?: number
-    beginAtZero?: boolean
-    color?: string
-    textStrokeColor?: string
-  }
-
-  export interface Annotation {
-    type: AnnotationType
-    x1?: number
-    y1?: number
-    x2?: number
-    y2?: number
-    stroke?: string
-    strokeThickness?: number
-    fill?: string
-    text?: string
-    horizontalAnchorPoint?: 'Left' | 'Center' | 'Right'
-    verticalAnchorPoint?: 'Top' | 'Center' | 'Bottom'
-    xCoordinateMode?: 'DataValue' | 'Pixel' | 'Relative'
-    yCoordinateMode?: 'DataValue' | 'Pixel' | 'Relative'
-    [key: string]: any
-  }
-
-  export type AnnotationType = 'line' | 'text' | 'box' | 'horizontalLine' | 'verticalLine' | undefined
-}

package/stories/common.ts

@@ -1,87 +0,0 @@
-export function getDefaultChartConfig(
-  type: OperatoChart.ChartType,
-  datasets?: OperatoChart.Dataset[]
-): OperatoChart.ChartConfig {
-  return {
-    data: {
-      datasets: datasets || [],
-      labelDataKey: ''
-    },
-    options: {
-      theme: 'light',
-      tooltip: true,
-      animation: true,
-      legend: {
-        display: true,
-        position: 'top'
-      },
-      scales: {
-        xAxes: [getDefaultAxisOptions()],
-        yAxes: [getDefaultAxisOptions(), getDefaultAxisOptions()] // Two y-axes for multi-axis support
-      },
-      stacked: false,
-      xGridLine: true,
-      yGridLine: true,
-      y2ndGridLine: false,
-      multiAxis: false
-    },
-    type
-  }
-}
-
-export function getDefaultAxisOptions(): OperatoChart.AxisOptions {
-  return {
-    axisTitle: '',
-    barSpacing: 0,
-    categorySpacing: 0,
-    barPercentage: 0.9,
-    ticks: {
-      display: true,
-      autoMin: true,
-      autoMax: true,
-      min: undefined,
-      max: undefined,
-      stepSize: undefined
-    }
-  }
-}
-
-// export const data = [
-//   { timestamp: 2010, count: 10, average: 120 },
-//   { timestamp: 2011, count: 20, average: 110 },
-//   { timestamp: 2012, count: 15, average: 80 },
-//   { timestamp: 2013, count: 25, average: 130 },
-//   { timestamp: 2014, count: 22, average: 120 },
-//   { timestamp: 2015, count: 30, average: 60 },
-//   { timestamp: 2016, count: 28, average: 90 }
-// ]
-// 랜덤한 범위의 숫자를 생성하는 함수
-function getRandomInRange(i: number, min: number, max: number) {
-  if (!(i % 11)) {
-    return null
-  }
-  return Math.floor(Math.random() * (max - min + 1)) + min
-}
-
-// 랜덤 데이터를 생성하는 함수
-function generateRandomData(count: number) {
-  const randomData = []
-  const startTimestamp = Math.floor(Date.now()) // 현재 시간을 Unix 타임스탬프로 설정
-
-  for (let i = 0; i < count; i++) {
-    const timestamp = startTimestamp + i * 360 * 30 * 1000 // 3초씩 증가하는 타임스탬프 설정
-    const randomCount = getRandomInRange(i, 5, 35) // count 값을 5에서 35 사이로 랜덤 생성
-    const randomAverage = getRandomInRange(i, 50, 150) // average 값을 50에서 150 사이로 랜덤 생성
-
-    randomData.push({
-      timestamp: timestamp,
-      count: randomCount,
-      average: randomAverage
-    })
-  }
-
-  return randomData
-}
-
-// 100개의 랜덤 데이터를 생성
-export const data = generateRandomData(100)