c2i

C2I 사용법 (Chart Intelligence Insights)

1. 설치

nvm use
npm install c2i d3
# 또는
nvm use
yarn add c2i d3

⚠️ d3는 peerDependency이므로 반드시 별도 설치 필요

2. 모듈별 사용법

2-1. ES Module (ESM)

최신 웹 개발 환경(React, Vue, Svelte, Vite, Webpack 등)에서 사용

// React, Svelte, Vue 등에서
import { FlameFurance } from 'c2i';

2-2. CommonJS (CJS)

Node.js, 구버전 번들러 환경에서 사용

// Node.js, 구버전 번들러
const { FlameFurance } = require('c2i');

2-3. UMD (Universal Module Definition)

CDN, script 태그로 바로 사용하는 경우

<script src="https://unpkg.com/c2i/dist/c2i.umd.js"></script>
<script>
  // 전역 변수 C2I로 접근
  C2I.FlameFurance();
</script>

3. 프레임워크별 예제

React (TypeScript/TSX)

import { FlameFurance } from 'c2i';

function App() {
  return  
  <div>
    <div
      style={{
        flex: 1,
        overflow: "hidden",
        textAlign: "center",
        position: "relative",
        paddingBottom: showChartPanel ? `${controlPanelHeight}px` : "0px",
        transition: "padding-bottom 0.4s ease-in-out",
      }}
    >
      {mapData && (
        <FlameFurance
          ref={furnaceRef}
          options={furnaceOptions}
          data={mapData as IDynamicData}
          theme={pageTheme?.key.includes("dark") ? "dark" : "light"}
          alertTrigger={alertTrigger}
        />
      )}
    </div>
  </div>;
}

Vue 3 (Composition API)

<script setup lang="ts">
import { C2iFlameFurance } from 'c2i';
</script>

<template>
  <C2iFlameFurance 
    options={furnaceOptions}
    data={mapData as IDynamicData}
    theme={pageTheme?.key.includes("dark") ? "dark" : "light"}
    alertTrigger={alertTrigger} />
</template>

Svelte

<script lang="ts">
  import { C2iFlameFurance } from 'c2i';
</script>

Node.js(시각화 용도로는 의미 없음)

const { C2iFlameFurance } = require('c2i');
console.log(C2iFlameFurance());

4. 모듈 포맷별 특징 정리

구분	문법	환경	용도/특징
ESM	import/export	브라우저, Node, 번들러	최신 웹, 트리쉐이킹, 모듈화, 표준
CJS	require/module.exports	Node.js	서버, CLI, 오래된 패키지
UMD	즉시실행함수(전역+모듈)	브라우저, Node, AMD	어디서나 동작, CDN, 전역 변수 접근

5. 빌드 및 배포 구조

• src/: 컴포넌트 및 라이브러리 소스 개발
• dist/: 빌드 결과물 (esm, cjs, umd, 타입정의 포함)
• public/i18n/: 다국어 json (c2i_ko.json, c2i_en.json)

package.json 주요 필드

• "main": CommonJS 엔트리 (dist/c2i.cjs.js)
• "module": ESM 엔트리 (dist/c2i.es.js)
• "types": 타입 정의 (dist/types/index.d.ts)
• "exports": 환경별 엔트리 지정 (import, require, browser)
• "peerDependencies": d3, react, vue, svelte, three 등

6. 참고

• ESM, CJS, UMD 3가지 포맷 모두 지원
• 사용자는 환경에 맞는 방식(import/require/script)으로 자유롭게 사용 가능

7. 통합 알림 시스템 사용법

7-1. 통합 알림 시스템 개요

C2iFlameFurance 컴포넌트는 C2iAlertLight와 C2iAlertSound를 통합한 완전한 알림 시스템을 제공합니다.

C2iAlertLight는 다음 기능들을 통합 제공합니다:

• 시각적 알림: 경광등 깜빡임과 회전 효과
• 음성 알림: 사이렌 소리와 음성 안내
• 정보 패널: 상세한 알림 정보 표시
• 우선순위 관리: 가장 긴급한 알림 하나만 표시

7-2. 자동 감지 알림

다음과 같은 온도 상태를 자동으로 감지합니다:

• 모든 데이터가 0인 경우: 전체 시스템 OFF 알림
• 온도가 0인 경우: OFF 상태로 긴급 알림
• 온도가 alertMin 미만 또는 alertMax 초과: 긴급 알람 (기본값: 426~690°C)
• 온도가 warnMin 미만 또는 warnMax 초과: 경고 알람 (기본값: 428~680°C)
• 20개 도금로 평균 대비 ±50도 이상: 큰 편차 경고 알림
• 20개 도금로 평균 대비 ±25도 이상: 작은 편차 경고 알림

복합 알림 통합: 여러 도금로에서 동시에 알림이 발생하는 경우, 가장 긴급한 알림 하나만 제공하여 알림 중복을 방지합니다.

알림 우선순위:

• OFF 상태 (모든 데이터 OFF, 개별 도금로 OFF) - 가장 긴급
• CRITICAL 상태 (고온/저온 등) - 높은 우선순위
• WARNING 상태 (경고 범위, 평균 편차) - 중간 우선순위
• NORMAL 상태 - 낮은 우선순위

7-2. 알림 콜백 설정

const furnaceVis = new C2iFlameFurance({
  // ... 기타 옵션들
  onAlertStateChange: (alertStates) => {
    // 알림 상태가 변경될 때마다 호출됨
    console.log('현재 알림 상태:', alertStates)
    
    // 외부에서 소리나 경광등 처리
    alertStates.forEach(alert => {
      if (alert.status === 'CRITICAL') {
        // 긴급 알림 처리
        playEmergencySound()
        activateEmergencyLight()
      } else if (alert.status === 'WARNING') {
        // 경고 알림 처리
        playWarningSound()
        activateWarningLight()
      }
    })
  },
  alertCheckInterval: 1000 // 알림 체크 간격 (밀리초)
})

7-3. 알림 상태 관리 API

// 현재 알림 상태 조회
const alertStates = furnaceVis.getAlertStates()

// 특정 알림 제거
furnaceVis.clearAlertState('alert_id')

// 모든 알림 제거
furnaceVis.clearAllAlertStates()

// 알림 콜백 동적 설정
furnaceVis.setAlertStateChangeCallback((alertStates) => {
  // 새로운 콜백 함수
})

// 알림 임계값 설정
furnaceVis.setAlertLimitData({
  alertMin: 426,  // 긴급 알림 최소 온도
  alertMax: 690,  // 긴급 알림 최대 온도
  warnMin: 428,   // 경고 알림 최소 온도
  warnMax: 680    // 경고 알림 최대 온도
})

7-4. 알림 상태 객체 구조

interface IAlertState {
  id: string                    // 알림 고유 ID
  type: AlertType              // 통합된 알림 타입
  category: AlertCategory      // 알림 카테고리 (SYSTEM_OFF/TEMPERATURE_CRITICAL/TEMPERATURE_WARNING/DEVIATION_BIG/DEVIATION_SMALL)
  severity: AlertSeverity      // 알림 심각도 (CRITICAL/WARNING/NORMAL/OFF)
  message: string              // 알림 메시지
  furnaceId?: string          // 도금로 ID (개별 도금로 알림인 경우)
  zoneIndex?: number          // 존 인덱스
  temperature?: number        // 현재 온도
  averageTemp?: number        // 평균 온도
  deviation?: number          // 평균 대비 편차
  timestamp: number           // 알림 발생 시간
}

7-5. React에서 사용 예시

import { useEffect, useRef } from 'react'
import { C2iFlameFurance } from 'c2i'

function FurnaceDashboard() {
  const furnaceRef = useRef(null)

  useEffect(() => {
    if (furnaceRef.current) {
      // 알림 콜백 설정
      furnaceRef.current.setAlertStateChangeCallback((alertStates) => {
        // React 상태 업데이트
        setAlerts(alertStates)
        
        // 외부 알림 시스템 연동
        if (alertStates.some(alert => alert.status === 'CRITICAL')) {
          triggerEmergencyProtocol()
        }
      })
    }
  }, [])

  return (
    <div>
      <C2iFlameFurance
        ref={furnaceRef}
        options={furnaceOptions}
        data={furnaceData}
      />
      {/* 알림 상태 표시 */}
      <AlertStatusPanel alerts={alerts} />
    </div>
  )
}

추가로 궁금한 점이나, 특정 프레임워크/환경에서의 사용법이 더 필요하시면 언제든 문의해 주세요!