sgcHTML의 새로운 시각화 컴포넌트 6종: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode, Barcode

sgcHTML에 새로 추가된 25개 컴포넌트를 살펴보는 시리즈의 두 번째 글입니다. 이번 편의 주제는 픽셀입니다. 서버에서 곧바로 인라인 SVG로 렌더링되는 6개 컴포넌트로, Chart.js도, QR 라이브러리도, 로드하거나 버전을 관리해야 할 클라이언트 측 JavaScript도 전혀 필요하지 않습니다. 속성을 설정하고 HTML을 호출하면 끝입니다. 그중 세 개는 데이터 시각화 컴포넌트인 Heatmap, Sparkline, CandlestickChart, TreeMap이고, 나머지 두 개는 스캔 가능한 코드인 QRCode와 Barcode입니다.

Heatmap — 색상 스케일 그리드

TsgcHTMLComponent_Heatmap은 행/열로 이루어진 숫자 그리드를 받아 낮은 값과 높은 값을 서로 다른 색상으로 표현하는 색상 스케일 SVG로 렌더링하며, 범례를 선택적으로 표시할 수 있습니다. RowLabels와 ColumnLabels를 채운 다음, 데이터 포인트마다 SetCell을 호출하면 됩니다.

uses
  sgcHTML_Component_Heatmap;

var
  oHeatmap: TsgcHTMLComponent_Heatmap;
begin
  oHeatmap := TsgcHTMLComponent_Heatmap.Create(nil);
  try
    oHeatmap.RowLabels.CommaText := 'Mon,Tue,Wed,Thu,Fri';
    oHeatmap.ColumnLabels.CommaText := '9h,12h,15h,18h';
    oHeatmap.ShowLegend := True;
    oHeatmap.ShowValues := True;

    oHeatmap.SetCell(0, 0, 12);
    oHeatmap.SetCell(0, 1, 48);
    oHeatmap.SetCell(1, 2, 76);
    oHeatmap.SetCell(4, 3, 92);

    WebModule.Response := oHeatmap.HTML;   // SVG grid, min->max colour scale
  finally
    oHeatmap.Free;
  end;
end;

// Or bind it straight to a dataset:
oHeatmap.LoadFromDataSet(qryTraffic, 'DayName', 'HourSlot', 'Visits');

시간대별 트래픽, 요일별 활동, 엔드포인트별 오류율 등 색상으로 구분된 표가 필요한 곳이라면 어디든, LoadFromDataSet으로 쿼리에서 바로 만들 수 있습니다.

Sparkline — 작은 인라인 추세선

TsgcHTMLComponent_Sparkline은 숫자 옆에 인라인으로 배치하는, 레이블 없는 작은 선/막대/영역 차트입니다. KPI 타일의 추세 표시기나 테이블 셀의 미니 히스토리로 사용할 수 있습니다. 컴포넌트 인스턴스를 유지할 필요가 없는 진짜 한 줄짜리 용도를 위한 정적 Build 헬퍼도 제공됩니다.

uses
  sgcHTML_Component_Sparkline;

var
  oSpark: TsgcHTMLComponent_Sparkline;
  sHTML: string;
begin
  oSpark := TsgcHTMLComponent_Sparkline.Create(nil);
  try
    oSpark.ChartType := slArea;
    oSpark.Width := 160;
    oSpark.Height := 32;
    oSpark.ShowLastPoint := True;
    oSpark.SetData([14, 18, 12, 22, 30, 26, 34]);

    WebModule.Response := oSpark.HTML;   // inline SVG, no chart library
  finally
    oSpark.Free;
  end;
end;

// Or bind it straight to a dataset:
oSpark.LoadFromDataSet(qryRevenue, 'Amount');

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_Sparkline.Build([5, 9, 4, 12, 7], slBar);

CandlestickChart — 차트 라이브러리 없는 OHLC

TsgcHTMLComponent_CandlestickChart는 진짜 OHLC 캔들스틱 차트를 인라인 SVG로 렌더링합니다. 심지, 몸통, 상승/하락 색상 구분, 선택적인 거래량 스트립까지 포함합니다. AddPoint는 레이블과 함께 봉마다 시가/고가/저가/종가(및 선택적으로 거래량)를 받습니다.

uses
  sgcHTML_Component_CandlestickChart;

var
  oChart: TsgcHTMLComponent_CandlestickChart;
begin
  oChart := TsgcHTMLComponent_CandlestickChart.Create(nil);
  try
    oChart.Width := 800;
    oChart.Height := 400;
    oChart.ShowVolume := True;

    oChart.AddPoint('Mon', 101.2, 104.8, 100.1, 103.5, 125000);
    oChart.AddPoint('Tue', 103.5, 106.0, 102.8, 105.1, 98000);
    oChart.AddPoint('Wed', 105.1, 105.4, 101.0, 101.9, 154000);

    WebModule.Response := oChart.HTML;   // SVG candles + wicks + volume strip
  finally
    oChart.Free;
  end;
end;

// Or bind it straight to a dataset:
oChart.LoadFromDataSet(qryOHLC, 'TradeDate', 'OpenPrice', 'HighPrice',
  'LowPrice', 'ClosePrice', 'Volume');

TreeMap — 비례 사각형

TsgcHTMLComponent_TreeMap은 이름이 붙은 값들의 집합을 스퀘어파이드 트리맵으로 배치합니다. "부서별 예산"이나 "폴더별 디스크 사용량" 같은 전형적인 시각화로, 각 사각형의 면적이 값에 비례합니다. 레이아웃 알고리즘은 전적으로 서버 측에서 실행됩니다.

uses
  sgcHTML_Component_TreeMap;

var
  oTreeMap: TsgcHTMLComponent_TreeMap;
begin
  oTreeMap := TsgcHTMLComponent_TreeMap.Create(nil);
  try
    oTreeMap.Width := 640;
    oTreeMap.Height := 360;
    oTreeMap.ColorScheme := tmCool;
    oTreeMap.ShowValues := True;

    oTreeMap.AddItem('Engineering', 420000);
    oTreeMap.AddItem('Sales', 260000);
    oTreeMap.AddItem('Marketing', 140000);
    oTreeMap.AddItem('Support', 90000, '#20c997');   // explicit colour overrides the scheme

    WebModule.Response := oTreeMap.HTML;   // <svg> squarified rectangles, no client-side library
  finally
    oTreeMap.Free;
  end;
end;

// Or bind it straight to a dataset:
oTreeMap.LoadFromDataSet(qryBudget, 'Department', 'Amount');

// One-shot helper, no instance to manage:
Response := TsgcHTMLComponent_TreeMap.Build(['Engineering', 'Sales'], [420000, 260000]);

QRCode와 Barcode — 스캔 가능한 코드, 의존성 제로

둘 다 순수 Pascal로 구현되어 외부 인코딩 라이브러리도, 이미지 서비스 호출도 필요하지 않습니다. TsgcHTMLComponent_QRCode는 오류 정정 레벨을 선택할 수 있는 진짜 ISO/IEC 18004 인코더이고, TsgcHTMLComponent_Barcode는 하단에 사람이 읽을 수 있는 캡션을 선택적으로 표시하는 Code 128을 생성합니다. 둘 다 정적 Build 헬퍼도 제공합니다.

uses
  sgcHTML_Component_QRCode;

var
  oQR: TsgcHTMLComponent_QRCode;
begin
  oQR := TsgcHTMLComponent_QRCode.Create(nil);
  try
    oQR.Data := 'https://www.esegece.com';
    oQR.ECCLevel := qrHigh;
    oQR.ModuleSize := 6;
    oQR.Caption := 'Scan to open';
    oQR.CaptionVisible := True;

    WebModule.Response := oQR.HTML;   // SVG QR modules + optional caption
  finally
    oQR.Free;
  end;
end;

// One-liner for inline use inside a bigger page:
sHTML := TsgcHTMLComponent_QRCode.Build('https://www.esegece.com', qrHigh, 6);

uses
  sgcHTML_Component_Barcode;

var
  oBarcode: TsgcHTMLComponent_Barcode;
begin
  oBarcode := TsgcHTMLComponent_Barcode.Create(nil);
  try
    oBarcode.Data := 'ACME-00219841';
    oBarcode.Symbology := bsCode128;
    oBarcode.ModuleWidth := 2;
    oBarcode.Height := 60;
    oBarcode.ShowText := True;

    WebModule.Response := oBarcode.HTML;   // SVG bars + human-readable text
  finally
    oBarcode.Free;
  end;
end;

청구서 번호, 자산 태그, 창고 빈, 이벤트 티켓 등 앱이 이미 참조 코드를 출력하는 모든 곳에서, 이 두 컴포넌트는 외부 자산 요청을 단 한 번도 하지 않고 휴대폰 카메라나 핸드헬드 스캐너로 읽을 수 있는 코드로 바꿔줍니다.

직접 사용해보기

전체 문서, 주요 속성 레퍼런스, Delphi/C++Builder/.NET 코드 샘플은 각 컴포넌트의 전용 페이지에서 확인할 수 있습니다: Heatmap, Sparkline, CandlestickChart, TreeMap, QRCode, Barcode. 이 시리즈의 다음 편에서는 더 똑똑한 폼 입력 컴포넌트를 다룹니다.

질문이나 피드백, 마이그레이션 도움이 필요하신가요? 문의하기 — 실제로 코드를 작성한 사람에게서 답변을 받으실 수 있습니다.