값을 비율·누계로 보기

숫자 컬럼을 합계 대비 %, 그룹 대비 %, 누계로 보여 줍니다(헤더 메뉴나 코드). 값 자체와 정렬·필터·내보내기는 그대로입니다.

실행 예제비율·누계 보기

지역별 매출을 그룹 비율과 누계로.

이 데모의 코드

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'country', header: h('Country', '국가'), width: 160 },
      { field: 'name', header: h('Name', '이름'), width: 170 },
      { field: 'q1', header: h('Q1 sales', '1분기 매출'), type: 'number', format: '#,##0', aggFunc: 'sum', width: 150 },
    ],
    data: makeRows(300), locale: ctx.lang, groupBy: ['country'], headerContextMenu: true,
    summary: { rows: [{ label: h('Total', '합계'), columns: { q1: 'sum' } }] },
  });
  grid.expandAll();
  const mode = (label: string, m: 'percentOfTotal' | 'percentOfParent' | 'runningTotal' | null) => button(ctx, label, () => { grid.setColumnValuesAs('q1', m); ctx.log(`valuesAs = ${m}`); });
  mode(h('Values', '값 그대로'), null);
  mode(h('% of total', '합계 대비 %'), 'percentOfTotal');
  mode(h('% of group', '그룹 대비 %'), 'percentOfParent');
  mode(h('Running total', '누계'), 'runningTotal');
  text(ctx, h('Group rows show their share; the Total row keeps the real sum. Right-click the Q1 header for the same choices.',
    '그룹 행은 비율을 보이고, 합계 행은 실제 합계를 유지합니다. 1분기 헤더를 우클릭해도 같은 선택이 있습니다.'));
  return grid;
}

숫자 컬럼은 값 대신 비율이나 누계로 보여 줄 수 있습니다. "이 지역이 전체의 얼마인가?", "지금까지 얼마인가?"를 컬럼을 늘리지 않고 봅니다. 표시만 바뀌므로 정렬·필터·편집·요약 행·내보내기는 실제 값을 씁니다.

방식

valuesAs	데이터 행	그룹 행
'percentOfTotal'	값 ÷ 컬럼 합계(보이는 행)	그룹 합계 ÷ 컬럼 합계
'percentOfParent'	값 ÷ 소속 그룹 합계(묶지 않으면 전체 합계)	그룹 합계 ÷ 상위 그룹 합계
'runningTotal'	보이는 순서대로 누적한 합(그룹마다 새로 시작)	그룹 값 그대로

설정

const columns = [
  { field: 'region' },
  { field: 'sales', type: 'number', aggFunc: 'sum', valuesAs: 'percentOfParent' },   // from the start
];
const grid = createGrid(el, { columns, data, groupBy: ['region'], headerContextMenu: true });

grid.setColumnValuesAs('sales', 'runningTotal');   // change it
grid.setColumnValuesAs('sales', null);             // back to the values

headerContextMenu를 켜면 숫자 컬럼 헤더 우클릭 메뉴에 값 표시 방식과 네 가지 선택(현재 방식에 체크)이 있습니다.

세부 동작

비율은 그리드 언어로 소수 한 자리 퍼센트(25%, 33.3%), 누계는 컬럼 서식으로 보여 줍니다.
합계는 필터를 통과한 행 기준이라 필터를 걸면 비율이 바뀝니다.
이렇게 보이는 셀은 구분되도록 강조색으로 그립니다.
datasource에서는 쓰지 않습니다(그리드에 모든 행이 없음).