Sunlight Chart

한국어 | English

일출/일몰 데이터를 받아 하루의 채광 구간을 SVG 그래프로 그려주는 작은 차트 라이브러리입니다. API 응답에서 받은 컬럼명을 매핑하고, 색상 테마를 넘겨 다른 프로젝트 UI에 맞게 사용할 수 있습니다.

데모

주요 기능

• 의존성 없는 SVG 렌더링
• API row 배열과 컬럼명 매핑 지원
• 일출, 일몰, 기준 시간 marker 표시
• timeline, line 두 가지 차트 스타일 지원
• 낮 구간 안에 부드러운 cubic line/area curve 표시
• 골든아워, 태양 정오 같은 line/range annotation 표시
• API 숫자 컬럼 기반 색상 스케일 표시
• 낮/밤/일출/일몰/marker 색상 커스터마이징
• 여러 날짜의 채광 그래프를 한 번에 렌더링
• 컨테이너 폭에 맞춘 자동 리사이즈
• SVG 문자열 변환과 SVG 파일 다운로드
• Vanilla JS, React, Vue, Svelte 등에서 사용 가능한 DOM 기반 API
• TypeScript 타입 제공

설치

npm에 배포한 뒤에는 아래처럼 설치할 수 있습니다.

npm install sunlight-chart

GitHub 저장소에서 바로 설치할 때는 아래 명령을 사용할 수 있습니다.

npm install github:BeomHui-Lee/sunlight-chart

빠른 사용 예

import { createSunlightChart } from "sunlight-chart";

const apiRows = [
  { date: "2026-07-01", sunrise: "05:15", sunset: "19:57", now: "13:30" },
  { date: "2026-07-02", sunrise: "05:16", sunset: "19:57", now: "13:30" },
];

createSunlightChart("#chart", {
  rows: apiRows,
  autoResize: true,
  chartStyle: "line",
  showIntensityCurve: true,
  intensitySteps: 18,
  columns: {
    label: "date",
    sunrise: "sunrise",
    sunset: "sunset",
    marker: "now",
  },
  annotations: [
    { label: "Solar noon", time: "12:36", color: "#7c3aed" },
    { label: "Golden hour", start: "18:58", end: "19:57", color: "#f59e0b" },
  ],
  valueScale: {
    column: "uvIndex",
    label: "UV",
    min: 0,
    max: 11,
    colors: ["#dcfce7", "#fde047", "#fb923c", "#dc2626"],
  },
  title: "Seoul daylight",
  theme: {
    daylight: "#facc15",
    daylightStart: "#f97316",
    daylightEnd: "#fb923c",
    curve: "#ffffff",
    curveFill: "#fff7ed",
    marker: "#0f766e",
    night: "#172033",
    series: ["#fb7185", "#f9a8d4", "#fbbf24", "#86efac"],
  },
});

API

createSunlightChart(target, options)

DOM 요소 또는 selector에 차트를 렌더링합니다. 반환값은 update, destroy, element를 가진 인스턴스입니다.

const chart = createSunlightChart("#chart", options);

chart.update({
  rows: nextRows,
  theme: {
    daylight: "#38bdf8",
    night: "#1f2937",
  },
});

chart.destroy();

SVG 내보내기

const svgText = chart.toSvgString();
chart.downloadSvg("daylight.svg");

주요 옵션

옵션	설명
rows	API 응답처럼 생긴 객체 배열
columns.sunrise	일출 시간이 들어있는 컬럼명
columns.sunset	일몰 시간이 들어있는 컬럼명
columns.label	행 라벨로 쓸 컬럼명
columns.marker	기준 시간 marker로 쓸 컬럼명
annotations	시간 기준선 또는 시간 범위 강조 표시
valueScale	숫자 컬럼을 색상으로 매핑하는 설정
chartStyle	"timeline" 또는 "line" 렌더링 스타일
theme	낮, 밤, marker, tick 등의 색상
autoResize	컨테이너 폭에 맞춰 SVG를 다시 렌더링
minWidth, maxWidth	자동 리사이즈 폭 제한
showDuration	낮 길이 표시 여부
showIntensityCurve	낮 구간 안의 채광 강도 곡선 표시 여부
intensitySteps	채광 강도 곡선을 그릴 때 사용할 점 개수
showTicks	시간 tick 표시 여부
startHour, endHour	그래프 시간 범위

Annotation 예

annotations: [
  { label: "Solar noon", time: "12:36" },
  { label: "Golden hour", start: "18:58", end: "19:57", color: "#f59e0b" },
  { label: "Special window", row: "2026-07-02", start: "10:00", end: "11:30" },
]

Value Scale 예

valueScale: {
  column: "uvIndex",
  label: "UV",
  min: 0,
  max: 11,
  colors: ["#dcfce7", "#fde047", "#fb923c", "#dc2626"],
}

시간 포맷

아래 형식을 사용할 수 있습니다.

• "05:15"
• "19:57:30"
• "1:30 PM"
• ISO date string
• Date
• 분 단위 숫자, 예: 315

로컬 개발

npm install
npm run dev
npm run build

npm run dev를 실행하면 데모 페이지가 열립니다.

로드맵

• Canvas renderer 추가
• React wrapper 제공
• 계절별/월별 채광 비교 차트
• 온도, 자외선 지수 같은 보조 값 레이어
• npm 배포 자동화

라이선스

MIT