<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/dist/template/coForward_chart2.css">
</head>
<body>
  <!-- 차트가 마운트될 컨테이너 (id 필수) -->
  <div id="myChart" style="width:100%;height:500px;"></div>

  <script type="module">
    import { coForward_chart } from '/dist/coForward_chart2.min.js';

    const panel = new coForward_chart()
      .add('myChart')
      .setData(ohlcvArray);
  </script>
</body>
</html>

const panel = new coForward_chart({ displayCnt: 100 })
  .add('myChart')
  .setSymbol({ caption: 'SAMSUNG', symbol: '005930', decimal: 0, currency: 'KRW' })
  .setData(dailyData)
  .addSubPanel({ indicator: 'rsi', period: 14 })
  .addSubPanel({ indicator: 'macd' });

// 초기 분봉 데이터 로드
const panel = new coForward_chart()
  .add('myChart')
  .setData(intradayData);

// 틱 수신 시 addData()로 갱신
websocket.onmessage = (e) => {
  const tick = JSON.parse(e.data);
  panel.addData(tick); // 같은 분 → OHLCV 갱신, 새 분 → 봉 추가
};

npm install

npm run dev

npm run build

import { coForward_chart, PanelSync } from '/src/coForward_chart2.js';

<link rel="stylesheet" href="/dist/template/coForward_chart2.css">
<script type="module">
  import { coForward_chart, PanelSync } from '/dist/coForward_chart2.min.js';
</script>

const config = {
  layout: {
    main: {
      top: 10, right: 100, bottomWithX: 50, bottomNoX: 0, left: 10,
    },
    sub: {
      top: 0, right: 100, left: 10, bottomWithX: 30, bottomNoX: 0,
    },
    subPanel: {
      height: 100, // 서브패널 기본 높이(px)
      minHeight: 60,
      maxHeight: 300,
    },
    xPadRatio: 0.3,        // x 도메인 여백 비율
    yBottomVolRatio: 0.25, // 볼륨 공간 비율
    yTopPadRatio: 0.05,    // y 상단 여유 비율
    volDisplayRatio: 0.2,  // 볼륨 바 높이 비율
  },
};

const config = {
  fieldMap: {
    date: 'time',  // 기본: 'Date'
    open: 'o',     // 기본: 'Open'
    high: 'h',     // 기본: 'High'
    low: 'l',      // 기본: 'Low'
    close: 'c',    // 기본: 'Close'
    volume: 'vol', // 기본: 'Volume'
  },
};

const config = {
  sma: [
    { period: 20, enabled: true },
    { period: 60, enabled: false },
    { period: 120, enabled: false },
  ],
  ema: [
    { period: 20, enabled: false },
    { period: 50, enabled: false },
  ],
  volumeMA: [
    { period: 20, enabled: true },
  ],
};

const config = {
  vwap: [
    { anchor: 'session', enabled: true },
    { anchor: 'week', enabled: false },
    { anchor: 'month', enabled: false },
  ],
};

const config = {
  drawing: {
    strokeColor: '#e53935',
    strokeWidth: 1.5,
    fillColor: 'rgba(0,0,0,0)', // 투명
    dash: null,                 // 실선. 예: '6,3' → 파선
    opacity: 1.0,
    previewOpacity: 0.3,
  },
  drawingText: {
    color: '#e53935',
    fontSize: 13,
    bold: false,
  },
};

const config = {
  rsi: { period: 14, ob: 70, os: 30 },
  macd: { fast: 12, slow: 26, signal: 9 },
  stochastic: { kPeriod: 14, smooth: 3, dPeriod: 3, ob: 80, os: 20 },
  atr: { period: 14 },
  cci: { period: 14 },
  roc: { period: 12 },
  williamsR: { period: 14 },
  mfi: { period: 14 },
  bbWidth: { period: 20, multiplier: 2 },
  sar: { step: 0.02, max: 0.20 },
  ichimoku: { tenkan: 9, kijun: 26, senkou: 52, displacement: 26 },
};

const config = {
  alert: {
    enabled: true,
    alertTypes: ['horizontal', 'pricelabel', 'hzone'], // 알림 가능한 드로잉 타입
  },
};

const config = {
  templates: {
    drawingSetting: './template/drawingSetting.html',
    alertConfig: './template/alertConfig.html',
    priceInfo: './template/priceInfo.html',
    legend: './template/legend.html',
    subPanelLabel: './template/subPanelLabel.html',
    subPanelSetting: './template/subPanelSetting.html',
    dataMessage: './template/dataMessage.html',
  },
};

panel.getConfig();   // 현재 적용된 설정 반환
panel.getDefaults(); // 라이브러리 기본값 반환

{
  Date: '2025-06-01T09:00:00', // 일봉: 'YYYY-MM-DD', 분봉: 'YYYY-MM-DDTHH:mm:ss'
  Open: 68000,
  High: 69500,
  Low: 67800,
  Close: 69200,
  Volume: 123456,
}

panel.setData(ohlcvArray);

// 1분봉을 저장하고 5분봉으로 표시
panel.setData(oneMinData, 1); // rawInterval = 1(분)
panel.setInterval(5);         // 5분봉으로 전환
panel.setInterval(15);        // 15분봉으로 전환

panel.addData({
  Date: '2025-06-01T09:02:38',
  Open: 69000,
  High: 69300,
  Low: 68900,
  Close: 69100,
  Volume: 3200,
});

// 최신 데이터 추가 (뒤에 붙음)
panel.addData(newBarsArray);

// 과거 데이터 추가 (앞에 붙음)
panel.addData(oldBarsArray); // 자동으로 prepend 감지

document.getElementById('myChart').addEventListener('needData', (e) => {
  const { direction, date } = e.detail;
  // direction: 'backward' (과거) | 'forward' (미래)
  // date: 현재 표시 범위의 끝 날짜 문자열

  if (direction === 'backward') {
    fetchOlderData(date).then(data => panel.addData(data));
  }
});

panel.setSymbol({
  caption: '삼성전자', // 화면 표시 이름
  symbol: '005930',   // 종목 코드
  decimal: 0,         // 가격 소수점 자릿수
  currency: 'KRW',    // 통화
});

panel.setInterval(1);  // 1분봉
panel.setInterval(5);  // 5분봉
panel.setInterval(60); // 60분봉(1시간봉)

panel.setAxisMode('session');  // 세션 모드: 시간 갭 없음 (기본)
panel.setAxisMode('calendar'); // 캘린더 모드: 날짜 기준 x축

panel.setCandleMode(); // 캔들스틱 (기본)
panel.setLineMode();   // 라인 차트
panel.setAreaMode();   // 영역 차트

panel.toggleMarks('volume');    // 거래량 바 토글
panel.toggleMarks('bollinger'); // 볼린저 밴드 토글
panel.toggleMarks('sma20');     // SMA 20 토글
panel.toggleMarks('highLow');   // 고가/저가 토글

// 추가 (이미 있으면 활성화)
panel.addSmaMark(20);        // 기간 20, 활성화
panel.addSmaMark(60, false); // 기간 60, 비활성으로 추가

// 제거
panel.removeSmaMark(20);

// 토글
panel.toggleMarks('sma20');

panel.addEmaMark(20);
panel.addEmaMark(50, false);
panel.removeEmaMark(20);
panel.toggleMarks('ema20');

panel.addVolumeMaMark(20);
panel.removeVolumeMaMark(20);
panel.toggleMarks('volumeMA20');

// 앵커 종류: 'session' | 'week' | 'month' | 'YYYY-MM-DD'
panel.addVwapMark('session');
panel.addVwapMark('week');
panel.addVwapMark('month');
panel.addVwapMark('2025-01-02'); // 고정 날짜 앵커

// 커스텀 스타일 적용
panel.addVwapMark('session', { strokeColor: '#2196f3', strokeWidth: 2 });

// 제거
panel.removeVwapMark('session');
panel.removeVwapMark('2025-01-02');

panel.addSarMark();           // 기본값 (step: 0.02, max: 0.20)
panel.addSarMark(0.01, 0.10); // 커스텀 파라미터
panel.toggleMarks('sar');     // 토글

panel.addIchimokuMark();
panel.addIchimokuMark({ tenkan: 9, kijun: 26, senkou: 52, displacement: 26 });
panel.toggleMarks('ichimoku');

panel.setNormalizeMode(true);  // % 변화율 y축으로 전환
panel.setNormalizeMode(false); // 절대 가격으로 복원

panel.isNormalizeMode();       // 현재 상태 반환 (boolean)

// 특정 날짜로 이동
panel.findDate('2025-05-15');

// 최근 데이터로 이동
panel.resetView();

// 표시 봉 개수 변경
panel.setDisplayCnt(100);

// 현재 보기 범위 조회
const range = panel.getVisibleRange();
// → { from: Date, to: Date, startIdx: number, displayCnt: number }

// 범위 지정 (외부 동기화용)
panel.setVisibleRange('2025-05-01', '2025-05-31');

panel.addSubPanel({ indicator: 'rsi', period: 14 });
panel.addSubPanel({ indicator: 'macd' }); // 기본 파라미터 사용
panel.addSubPanel({ indicator: 'macd', fast: 8, slow: 21, signal: 5 });
panel.addSubPanel({ indicator: 'stochastic', kPeriod: 14, smooth: 3, dPeriod: 3 });
panel.addSubPanel({ indicator: 'atr', period: 14 });
panel.addSubPanel({ indicator: 'cci', period: 20 });
panel.addSubPanel({ indicator: 'roc', period: 12 });
panel.addSubPanel({ indicator: 'williamsR', period: 14 });
panel.addSubPanel({ indicator: 'mfi', period: 14 });
panel.addSubPanel({ indicator: 'obv' });
panel.addSubPanel({ indicator: 'bbWidth', period: 20, multiplier: 2 });

new coForward_chart()
  .add('myChart')
  .setData(data)
  .addSubPanel({ indicator: 'rsi', period: 14 })
  .addSubPanel({ indicator: 'macd' });

panel.removeSubPanels('rsi');     // RSI 서브패널 제거
panel.removeSubPanels('rsi', 14); // 기간 14인 RSI만 제거
panel.removeSubPanels('macd');

panel.addSubPanel({ indicator: 'rsi', period: 14, height: 150 });

new coForward_chart({ layout: { subPanel: { height: 150 } } })
  .add('myChart')
  .setData(data);

panel.getDrawingTypes(); // 사용 가능한 드로잉 타입 목록 반환

// 드로잉 모드 활성화
panel.setDrawMode('trendline');
panel.setDrawMode('horizontal');
panel.setDrawMode('fibonacci');

// 드로잉 모드 해제
panel.setDrawMode('none');

panel.setDrawingColor('#2196f3'); // 선 색상
panel.setDrawingWidth(2);         // 선 굵기
panel.setDrawingDash('6,3');      // 파선 패턴 (null: 실선)
panel.setDrawingFill('#f0f0f0');  // 채우기 색상
panel.setDrawingOpacity(0.8);     // 불투명도 (0~1)

panel.setTextColor('#ffffff');
panel.setTextSize(14);
panel.setTextBold(true);

panel.showDrawingSettings();

panel.clearDrawings(); // 모든 드로잉 삭제 (마크/지표는 유지)

// 알림 설정
panel.setAlert(drawingIdx, {
  enabled: true,
  direction: 'up',
  mode: 'repeat',
  cooldown: 60, // 반복 간격(초)
  label: '상향 돌파',
});

// 알림 조회
const alertInfo = panel.getAlert(drawingIdx);

// 알림 삭제
panel.clearAlert(drawingIdx);

document.getElementById('myChart').addEventListener('priceAlert', (e) => {
  const { symbol, price, target, direction, label, triggeredAt } = e.detail;
  console.log(`[알림] ${symbol}: ${price} ${direction} ${target}`);
});

document.getElementById('myChart').addEventListener('needData', (e) => {
  console.log(e.detail);
});

// 등록
panel.on('crosshairMove', (e) => {
  console.log(e.detail.date, e.detail.candle);
});

// 해제
panel.off('crosshairMove', handler);

panel.on('needData', (e) => {
  const { direction, date } = e.detail;
  // direction: 'backward' (과거) | 'forward' (미래)
  // date: 현재 표시 범위 끝 날짜 문자열
});

panel.on('rangeChange', (e) => {
  const { from, to, startIdx, displayCnt } = e.detail;
  // from, to: Date 객체
});

panel.on('crosshairMove', (e) => {
  const { date, candle } = e.detail;
  // date: 날짜 문자열
  // candle: { Date, Open, High, Low, Close, Volume }
});

panel.on('crosshairClick', (e) => {
  const { date, candle } = e.detail;
});

panel.on('priceAlert', (e) => {
  const { symbol, price, target, direction, label, drawingIdx, triggeredAt } = e.detail;
  // direction: 'up' | 'down'
  alert(`${symbol} 가격 알림: ${price} (${direction})`);
});

panel.on('modeChange', (e) => {
  const { mode } = e.detail;
  // mode: 드로잉 타입 문자열 | 'none'
  console.log('현재 모드:', mode);
});

// 특정 날짜에 십자선 표시
panel.showCrosshairAtDate('2025-06-01T09:30:00');

// 십자선 숨김
panel.hideCrosshair();

panel.saveToLocal();   // 현재 상태를 localStorage에 저장
panel.loadFromLocal(); // localStorage에서 상태 복원
panel.clearLocal();    // localStorage에서 해당 상태 항목 삭제

const panel = new coForward_chart()
  .add('myChart')
  .setSymbol({ symbol: '005930', decimal: 0, currency: 'KRW' })
  .setData(data);

panel.loadFromLocal(); // setData() 이후에 호출

// 저장
const json = panel.saveState();
// → JSON 문자열 (drawings, indicators, subPanels, drawingStyle 포함)

// 복원
panel.loadState(json);

// 드로잉만 복원
panel.loadState(json, { drawingsOnly: true });

{
  "version": 1,
  "symbol": "005930",
  "timeframe": 1,
  "savedAt": "2025-06-01T09:00:00.000Z",
  "indicators": {
    "marks": [
      { "name": "candle", "enabled": true },
      { "name": "bollinger", "enabled": false }
    ],
    "sma": [{ "period": 20, "enabled": true }],
    "ema": [],
    "volumeMA": [],
    "vwap": []
  },
  "subPanels": [
    { "indicator": "rsi", "period": 14 }
  ],
  "drawings": [ ... ],
  "drawingStyle": {
    "drawing": { "strokeColor": "#e53935", "strokeWidth": 1.5, ... },
    "drawingText": { "color": "#e53935", "fontSize": 13, "bold": false }
  }
}

// 드로잉만 초기화
panel.clearDrawings();

// 드로잉 + 마크 모두 초기화 (config 기본값으로 복원)
panel.resetState();

// 개별 초기화 옵션
panel.resetState({ drawings: true, markers: false }); // 드로잉만
panel.resetState({ drawings: false, markers: true }); // 마크만

panel.autoSave(false); // 자동 저장 비활성화
panel.autoSave(true);  // 자동 저장 활성화

import { coForward_chart, PanelSync } from '/dist/coForward_chart2.min.js';

const panel1 = new coForward_chart().add('chart1').setData(data1);
const panel2 = new coForward_chart().add('chart2').setData(data2);
const panel3 = new coForward_chart().add('chart3').setData(data3);

const sync = new PanelSync();

// 패널 추가 (단일 또는 배열)
sync.add(panel1, panel2);
sync.add(panel3); // 나중에 추가 가능

// 특정 패널만 제거 (패널 상태 복원됨)
sync.remove(panel2);

// 전체 해제
sync.removeAll();

// 전체 해제 + 인스턴스 정리
sync.destroy();

new coForward_chart({
  templates: {
    drawingSetting: '/assets/templates/drawingSetting.html',
    alertConfig: '/assets/templates/alertConfig.html',
    priceInfo: '/assets/templates/priceInfo.html',
    legend: '/assets/templates/legend.html',
    subPanelLabel: '/assets/templates/subPanelLabel.html',
    subPanelSetting: '/assets/templates/subPanelSetting.html',
    dataMessage: '/assets/templates/dataMessage.html',
  },
})

<article class="coForward-chart2-price-info">
  <h1>
    <span data-coforward-price-info-caption></span>
    <span data-coforward-price-info-symbol></span>
  </h1>
  <ul>
    <li>시가 <span data-coforward-price-info-ohlcv="open"></span></li>
    <li>고가 <span data-coforward-price-info-ohlcv="high"></span></li>
    <li>저가 <span data-coforward-price-info-ohlcv="low"></span></li>
    <li>종가 <span data-coforward-price-info-ohlcv="close"></span></li>
    <li>거래량 <span data-coforward-price-info-ohlcv="volume"></span></li>
  </ul>
</article>

<div class="subPanel-setting-dialog">
  <form>
    <div data-subpanel-setting-item="period">
      <label>기간</label>
      <input type="number" name="period" min="1">
    </div>
    <footer>
      <button type="button" class="btn-cancel">취소</button>
      <button type="button" class="btn-submit">확인</button>
    </footer>
  </form>
</div>

<div class="cf-empty-overlay">
  <div data-message-type="empty">데이터가 없습니다.</div>
  <div data-message-type="invalid">
    잘못된 데이터 형식입니다.
    <ul data-message-detail></ul>
  </div>
</div>

new coForward_chart(config?)

{
  indicator: 'rsi', // 지표 키
  period: 14,       // 기간
  fast: 12,         // MACD fast
  slow: 26,         // MACD slow
  signal: 9,        // MACD signal
  kPeriod: 14,      // Stochastic %K
  smooth: 3,        // Stochastic smooth
  dPeriod: 3,       // Stochastic %D
  multiplier: 2,    // BBWidth multiplier
  height: 100,      // 초기 높이(px)
}

{ drawings: true, markers: true } // 기본: 모두 초기화

import { PanelSync } from '/dist/coForward_chart2.min.js';