View 스타일 및 규칙

구조 정의 외에도 View는 데이터가 시각적으로 해석되고 동적으로 계산되는 방식을 제어할 수 있습니다.

여기에는 다음이 포함됩니다.

조건부 서식
스파크라인 규칙
View 수준 스타일 규칙
자동 필터 및 정렬 재적용
데이터 길이 확인

조건부 서식(열 수준)

조건부 서식은 conditionalFormats 속성을 사용하여 열 구성에 직접 정의할 수 있습니다.

이 규칙은 셀 단위로 계산됩니다.

수식 기반 규칙

var formulaRule = {
    ruleType: "formulaRule",
    formula: "@ > 50",
    style: {
        backColor: "pink"
    }
};

var myView = productTable.addView("myView", [
    { value: "productId", caption: "ID" },
    { value: "unitPrice", caption: "Unit Price", conditionalFormats: [formulaRule] }
]);

@는 현재 셀 값을 참조합니다.
수식 결과가 true일 때 스타일이 적용됩니다.

스파크라인 규칙

스파크라인 규칙을 사용하면 셀 내에서 데이터를 직접 시각화할 수 있습니다.

이 역시 conditionalFormats를 통해 정의합니다.

Bullet 스파크라인 예제

var bulletRule = {
    ruleType: "sparklineRule",
    sparklineType: "BULLETSPARKLINE",
    sparklineOptions: {
        measure: '@',
        target: 500,
        maxi: 1000,
        good: 700,
        bad: 250
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual1", caption: "Performance", width: 220, conditionalFormats: [bulletRule] }
]);

Lollipop Variance 예제

var lollipopRule = {
    ruleType: "sparklineRule",
    sparklineType: "LOLLIPOPVARISPARKLINE",
    sparklineOptions: {
        plannedValue: '[target]',
        actualValue: '$CF_RANGE$',
        index: '@',
        reference: 0,
        mini: -0.3,
        maxi: 0.3
    },
    showSparklineOnly: true
};

var myView = salesTable.addView("salesView", [
    { value: "region", caption: "Region", width: 130 },
    { value: "target", caption: "Target ($K)", width: 100 },
    { value: "actual", caption: "Actual ($K)", width: 100 },
    { value: "actual2", caption: "Variance", width: 220, conditionalFormats: [lollipopRule] }
]);

스파크라인 규칙은 기본 데이터를 수정하지 않고도 인라인 데이터 시각화를 제공합니다.

View 수준 스타일 규칙

열 수준 조건부 서식 외에도 View 수준에서 스타일 규칙을 정의할 수 있습니다.

이 규칙은 다음과 같은 유형이 될 수 있습니다.

수식 기반
상태 기반

View 수준 규칙 추가

view.addStyleRule(
    "dirtyRowStyle",
    { backColor: "yellow" },
    {
        direction: GC.Data.StateRuleDirection.row,
        state: GC.Data.RowColumnStates.dirty
    }
);

View 수준 규칙 관리

view.getStyleRule();               // 모든 규칙 가져오기
view.getStyleRule("ruleName");     // 특정 규칙 가져오기
view.removeStyleRule("ruleName");  // 규칙 제거
view.clearStyleRules();            // 모든 규칙 제거

View 수준 규칙은 특정 열이 아닌 전체 View에 적용됩니다.

자동 필터 및 정렬 재적용

View는 다음 두 속성을 제공합니다.

view.autoFilter
view.autoSort

이 속성은 기본 데이터가 변경될 때 기존 필터 또는 정렬 정의를 자동으로 다시 적용할지 여부를 제어합니다.

true(기본값)인 경우 데이터 업데이트 후 필터링 및 정렬이 다시 계산됩니다.
false인 경우 수동으로 실행하기 전까지 기존 상태가 유지됩니다.

이 속성은 런타임 동작에만 영향을 줍니다.

데이터 길이 메서드

View는 데이터 크기를 확인하기 위한 두 가지 메서드를 제공합니다.

view.length();
view.visibleLength();

length()는 호스트 테이블의 전체 데이터 개수를 반환합니다.
visibleLength()는 View에서 현재 표시되는 데이터 개수를 반환합니다.

표시 데이터 개수는 필터링 또는 View 상태에 따라 전체 데이터 개수와 다를 수 있습니다.