와일드카드 위젯 예시
와일드카드(Wildcard) 위젯은 Vega-Lite(인터랙티브 그래픽을 만들기 위한 선언형 언어)를 사용해 Datadog 대시보드에서 커스텀 시각화를 만들 수 있는 강력한 방법을 제공해요. 표준 위젯을 넘어서는 시각화를 만들 수 있어서, 특정 모니터링·분석 요구에 가장 잘 맞는 방식으로 데이터를 표현할 수 있답니다.
출처: 문서
본문
개요
와일드카드 위젯은 Vega-Lite(인터랙티브 그래픽을 만드는 선언형 언어)를 사용해 Datadog 대시보드에서 커스텀 시각화를 만들 수 있는 강력한 방법을 제공해요. 이 유연성 덕분에 표준 위젯 제공 범위를 넘어서는 시각화를 구축할 수 있고, 특정 모니터링·분석 요구에 가장 잘 맞는 방식으로 데이터를 표현할 수 있어요.
이 예시들은 와일드카드 위젯의 유연성과 힘을 보여주도록 설계됐어요. 표준 위젯에서 사용할 수 있는 것 이상의 커스텀 시각화를 만들 수 있게 해 주죠. 각 예시에는 핵심 기능 설명, 시각적 미리보기, 그리고 자신의 대시보드에 복사해 적용할 수 있는 완전한 Vega-Lite 구성 코드가 포함돼 있어요.
데이터 변환이 있는 Geomap
와일드카드 위젯은 고급 데이터 변환 기능을 가진 커스터마이즈된 geomap을 만들 수 있게 해 줘요. 이 예시는 로그 데이터를 기반으로 인터넷 서비스 제공업체를 시각화하는 유럽 대륙 지도를 보여줘요. 지도에는 데이터 포인트에 마우스를 올렸을 때 추가 제공업체 정보를 표시하는 인터랙티브 툴팁이 포함돼 있어요.
핵심 기능:
- 유럽에 초점을 맞춘 커스텀 Albers 투영법
- 색상으로 구분된 제공업체 위치
- 제공업체 세부 정보가 있는 인터랙티브 툴팁
- 로그 쿼리에서 직접 가져온 데이터
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/geomap_with_data_transform.776f29173534d1748035547e2288851b.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/geomap_with_data_transform.776f29173534d1748035547e2288851b.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Continental European geomap showing internet service provider locations with color-coded markers and interactive tooltips" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/geomap_with_data_transform_config.6a7b09fb815520495b2c3553b7295656.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/geomap_with_data_transform_config.6a7b09fb815520495b2c3553b7295656.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration code for the geomap with data transform example" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"projection": {
"type": "albers",
"rotate": [
-12,
-15,
0
],
"scale": 700
},
"layer": [
{
"data": {
"sphere": true
},
"mark": {
"type": "geoshape",
"fill": "skyblue"
}
},
{
"data": {
"url": "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-50m.json",
"format": {
"type": "topojson",
"feature": "countries"
}
},
"mark": {
"type": "geoshape",
"fill": "#e0ffd4",
"stroke": "gray",
"strokeWidth": 5,
"strokeOpacity": 0.1,
"strokeJoin": "round",
"strokeCap": "round"
}
},
{
"data": {
"name": "table1"
},
"encoding": {
"latitude": {
"field": "attributes.network.client.geoip.location.latitude",
"type": "quantitative"
},
"longitude": {
"field": "attributes.network.client.geoip.location.longitude",
"type": "quantitative"
},
"color": {
"field": "attributes.network.client.geoip.as.name",
"type": "ordinal",
"title": "Provider",
"scale": {
"scheme": "set1"
}
}
},
"mark": {
"type": "point",
"filled": true,
"opacity": 0.75,
"size": 200,
"tooltip": true
}
}
]
}
{% /collapsible-section %}
참조 테이블(Reference Tables)로 데이터 조인
와일드카드 데이터 쿼리를 참조 테이블과 조인해 커스텀 매핑을 추가하면 시각화를 강화할 수 있어요. 이 예시는 서비스별 로그 볼륨을 보여주며, 참조 테이블의 팀 소유권 정보를 기반으로 색상 코딩해요.
핵심 기능:
- 운영 데이터와 비즈니스 컨텍스트 결합
- 조직 구조를 기반으로 의미 있는 그룹화 생성
- 커스텀 매핑으로 복잡한 관계 단순화
- 팀 기반 필터링과 분석 활성화
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/bar-chart-with-reference-table.c643f76a9ea475c4c4fafeabd1f669b9.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/bar-chart-with-reference-table.c643f76a9ea475c4c4fafeabd1f669b9.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Bar chart showing log data connected with service ownership to show the ability to join with a reference table" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/bar-chart-with-reference-table-config.83c1ce002f765ed4aac1020b33878a6a.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/bar-chart-with-reference-table-config.83c1ce002f765ed4aac1020b33878a6a.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration code for the bar chart with reference table example." /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Log volume by team ownership.",
"data": {
"name": "table1"
},
"mark": "bar",
"encoding": {
"x": {
"field": "service",
"type": "nominal",
"title": "Service"
},
"y": {
"field": "query1",
"type": "quantitative",
"title": "Log Count",
"scale": {
"type": "sqrt"
}
},
"color": {
"field": "team_name",
"type": "nominal",
"title": "Team",
"scale": {
"range": [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
"#393b79",
"#637939"
]
}
},
"tooltip": [
{
"field": "team_name",
"type": "nominal",
"title": "Team"
},
{
"field": "query1",
"type": "quantitative",
"title": "Log Count"
}
]
}
}
{% /collapsible-section %}
컨텍스트 메뉴가 있는 다중 메트릭 파이 차트
와일드카드 위젯은 "fold" 변환 연산자를 사용해 각 조각이 서로 다른 메트릭이나 수식을 나타내는 파이 차트를 만들 수 있어요. 이 접근 방식은 Fastly 같은 통합에서 개별 상태 코드에 대해 별도의 메트릭이 보고되는 경우(단일 메트릭에 서로 다른 상태 값을 태그하는 대신)의 데이터를 시각화할 때 특히 유용해요.
이 예시는 인터랙티브 컨텍스트 메뉴 기능이 있는 다중 메트릭 파이 차트를 만드는 방법을 보여주며, 사용자가 특정 데이터 포인트로 드릴다운할 수 있게 해 줘요.
핵심 기능:
- 여러 메트릭을 단일 시각화로 결합
- "fold" 변환을 사용해 별도의 쿼리를 파이 조각으로 변환
- 데이터 범주를 구분하기 위한 커스텀 색상 스킴 적용
- 마우스 올리기 시 상세 정보를 위한 인터랙티브 툴팁 활성화
- 드릴다운 분석을 위한 컨텍스트 메뉴 기능 구현
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_metric_pie_chart.f996b0f1331e298cb99f849e6d1d69e9.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_metric_pie_chart.f996b0f1331e298cb99f849e6d1d69e9.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Multi-metric pie chart with context menu" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_metric_pie_chart_config.09d58ff28ba3783c410585174e783727.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_metric_pie_chart_config.09d58ff28ba3783c410585174e783727.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration for multi-metric pie chart" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"description": "A simple pie chart with multiple scalar queries",
"encoding": {
"color": {
"field": "http\\.status_code",
"scale": {
"scheme": "dogcat"
},
"type": "nominal"
},
"theta": {
"field": "value",
"type": "quantitative"
},
"tooltip": [
{
"field": "http.status_code",
"type": "nominal"
},
{
"field": "value",
"type": "quantitative"
}
]
},
"transform": [
{
"fold": [
"400",
"403",
"404"
],
"as": [
"http.status_code",
"value"
]
}
],
"mark": "arc",
"params": [
{
"name": "datadogPointSelection",
"select": "point"
}
],
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "table1"
}
}
{% /collapsible-section %}
다중 레이어 히스토그램
이 예시는 오류 지속 시간을 전체 트레이스 지속 시간과 비교하는 다중 레이어 히스토그램을 만드는 방법을 보여줘요. 이 시각화는 오류 지속 시간이 정상 작업과 비교해 어떻게 분포하는지 보여줌으로써 성능 병목 현상을 식별하는 데 특히 유용해요. 이 분포들을 겹쳐 보면 오류가 처리하는 데 훨씬 오래 걸리는 패턴을 식별할 수 있고, 성능 영향에 따라 어떤 문제를 먼저 해결할지 우선순위를 정하는 데 도움이 돼요.
핵심 기능:
- 상대 빈도를 계산하기 위한
joinaggregate변환 사용 - 서식화된 값이 있는 커스텀 툴팁 구현
- 시간 측정(나노초)을 위한 단위 서식 구성
- 시각적 비교를 위한 여러 데이터 계열 겹침
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_layer_histogram_1.30f7d1f12de3c23853ae072f3e8b80d5.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_layer_histogram_1.30f7d1f12de3c23853ae072f3e8b80d5.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Multi-layer histogram comparing error durations against overall trace durations" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_layer_histogram_config.55f8c8e733885d074913eb752e78ab3b.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/multi_layer_histogram_config.55f8c8e733885d074913eb752e78ab3b.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration for multi-layer histogram visualization" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"config": {
"customFormatTypes": true
},
"encoding": {
"x": {
"field": "min",
"type": "quantitative",
"axis": {
"formatType": "hoverFormatter",
"format": {
"units": [
"nanosecond",
null
]
}
},
"title": "duration"
},
"x2": {
"field": "max"
},
"y": {
"field": "relative_frequency",
"type": "quantitative",
"title": "Relative Frequency"
},
"tooltip": [
{
"field": "count"
},
{
"field": "min",
"formatType": "hoverFormatter",
"format": {
"units": [
"nanosecond",
null
]
}
},
{
"field": "max",
"formatType": "hoverFormatter",
"format": {
"units": [
"nanosecond",
null
]
}
},
{
"field": "relative_frequency",
"format": "0.3f"
}
]
},
"layer": [
{
"data": {
"name": "table2"
},
"transform": [
{
"joinaggregate": [
{
"op": "sum",
"field": "count",
"as": "total_count"
}
]
},
{
"calculate": "datum.count / datum.total_count",
"as": "relative_frequency"
}
],
"mark": {
"type": "rect",
"color": "gray",
"opacity": 0.8
}
},
{
"data": {
"name": "table1"
},
"transform": [
{
"joinaggregate": [
{
"op": "sum",
"field": "count",
"as": "total_count"
}
]
},
{
"calculate": "datum.count / datum.total_count",
"as": "relative_frequency"
}
],
"mark": {
"type": "rect",
"color": "pink",
"tooltip": {
"content": "data"
}
}
}
]
}
{% /collapsible-section %}
텍스트 색상 산점도
포인트 대신 텍스트 마크를 사용하고 Datadog 팔레트에서 자동으로 색상을 지정하는 커스터마이즈된 산점도를 만들어 보세요. 이렇게 하면 기존 산점도의 위치 데이터 관계를 유지하면서 차트에 실제 텍스트 라벨을 직접 표시해 가독성이 향상돼요.
핵심 기능:
- 가독성 향상을 위해 데이터 포인트로 텍스트 요소 사용
- Datadog 색상 스킴을 사용한 자동 색상 할당
- 서로 다른 메트릭을 위한 커스터마이즈 가능한 축(이 예시에서는 p50/p95)
- 다차원 분석을 위해 위치와 색상을 결합한 시각 인코딩
- 양적 공간에서 범주형 데이터의 간결한 표현
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/text_color_scatterplot.92c77d238ac38987c42671565e216d99.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/text_color_scatterplot.92c77d238ac38987c42671565e216d99.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Text-based scatterplot using the Datadog color palette to visualize p50 vs p95 metrics" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/text_color_scatterplot_config.37a80da3afb47f2eb0636e234c56b6dd.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/text_color_scatterplot_config.37a80da3afb47f2eb0636e234c56b6dd.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration for the scatterplot wildcard widget" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "table1"
},
"encoding": {
"x": {
"field": "query1",
"type": "quantitative",
"axis": {
"title": "p50"
}
},
"y": {
"field": "query2",
"type": "quantitative",
"axis": {
"title": "p95"
}
},
"text": {
"field": "viz"
},
"color": {
"field": "viz",
"type": "nominal",
"scale": {
"scheme": "dogcat"
}
}
},
"mark": {
"type": "text"
}
}
{% /collapsible-section %}
시간 필터링이 있는 범주형 히트맵
이 예시는 고급 필터링 기능으로 시간과 범주에 걸쳐 데이터를 표시하는 범주형 히트맵을 만드는 방법을 보여줘요. 히트맵은 다차원 데이터에서 패턴과 이상치를 드러내는 데 도움이 되며, 시간과 범주에 걸쳐 메트릭을 추적하는 데 이상적이에요.
핵심 기능:
- 0 또는 음수 값을 제외하도록 데이터 필터링
- 시간 단위 서식을 사용해 시계열 데이터 그룹화
- 마우스 올리기 시 상세 정보를 표시하는 인터랙티브 툴팁
- 드릴다운 분석을 위한 컨텍스트 메뉴 기능
- 데이터 강도를 나타내는 색상 그라데이션
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/categorical_heatmap_1.c6866abc60c5bebf54628f2f40077d9a.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/categorical_heatmap_1.c6866abc60c5bebf54628f2f40077d9a.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Hourly variation of the categorical heatmap showing time-of-day patterns in repository activity" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/categorical_heatmap_config.80e80006702c84733d5e159f81599f5d.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/categorical_heatmap_config.80e80006702c84733d5e159f81599f5d.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration panel for the categorical heatmap showing time and category settings" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "table1"
},
"encoding": {
"x": {
"title": null,
"field": "_time",
"type": "temporal",
"timeUnit": "utcmonthdate"
},
"y": {
"title": null,
"field": "_time",
"type": "temporal",
"timeUnit": "utchours"
},
"color": {
"field": "result1",
"type": "quantitative",
"title": "PRs Closed",
"scale": {
"scheme": "blues"
}
}
},
"mark": {
"type": "rect",
"tooltip": {
"content": "data"
}
},
"transform": [
{
"filter": "datum.result1 > 0"
}
]
}
{% /collapsible-section %}
롤리팝 차트
이 예시는 항목을 명확하게 순위를 매기고 상대적 값을 강조하는 롤리팝 차트를 만드는 방법을 보여줘요. 롤리팝 차트는 시각적 혼란을 줄이면서 범주 간 값을 비교하는 데 유용해요. 포인트 마커의 정밀도와 선의 시각적 안내를 결합해, 전통적인 막대 차트보다 데이터를 훑고 비교하기 더 쉽게 만들어 줘요—특히 범주가 많거나 정확한 값 비교가 중요할 때 그렇죠.
핵심 기능:
- 전통적인 toplist보다 향상된 시각적 순위
- 가독성 향상을 위해 바와 포인트 마크 결합
- 상위/하위 수행자를 강조하는 자동 정렬
- 더 깔끔한 표현을 위한 축 라벨 커스텀 서식
- 순위와 메트릭 값을 시각적으로 구분
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/lollipop.6ce994c2ef6f9965a9687c6b78807ec9.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/lollipop.6ce994c2ef6f9965a9687c6b78807ec9.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Lollipop chart showing ranked CPU usage by team with horizontal lines and endpoint circles for clear visual comparison" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/lollipop_config.8eaf96931c8d079b4ca1fde876dd8584.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/lollipop_config.8eaf96931c8d079b4ca1fde876dd8584.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration panel for creating a lollipop chart showing settings for data sources, sorting, and visual styling" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"name": "table1"
},
"description": "A lollipop / dot plot",
"layer": [
{
"encoding": {
"x": {
"field": "query1",
"title": "cpu usage",
"type": "quantitative"
},
"y": {
"sort": "-x",
"field": "team",
"type": "nominal"
}
},
"mark": {
"type": "rule",
"color": "#3598eccc"
}
},
{
"encoding": {
"x": {
"field": "query1",
"title": "cpu usage",
"type": "quantitative"
},
"y": {
"sort": "-x",
"field": "team",
"type": "nominal",
"axis": {
"labelExpr": "upper(substring(replace(datum.label, /[-_]/g, ' '), 0, 1)) + lower(substring(replace(datum.label, /[-_]/g, ' '), 1))",
"labelPadding": 10
}
}
},
"mark": {
"type": "point",
"filled": true,
"color": "#3598ec",
"size": 100
}
}
]
}
{% /collapsible-section %}
커스텀 상태 텍스트 위젯
메트릭에 적용된 조건부 로직에 따라 색상이 바뀌는 반응형 텍스트 위젯을 만드세요.
이 예시는 Firefox 사용 통계를 표시하면서 Safari 사용 데이터와의 비교를 기반으로 조건부로 색상을 변경하는 상태 위젯을 만드는 방법을 보여줘요. Firefox 사용량이 Safari 사용량보다 최소 10배 높으면 텍스트가 초록색으로, 그렇지 않으면 빨간색으로 바뀌어요.
핵심 기능:
- 임계값 비교에 기반한 조건부 텍스트 색상 지정
- 여러 메트릭을 하나의 표시에 결합하는 커스텀 텍스트 서식
- 위젯 크기에 맞게 조정되는 반응형 글꼴 크기
- 절대값과 백분율의 결합 표시
- 결정 로직을 위한 파생 메트릭 생성 데이터 변환
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/custom_status_text.16b8b507ddd75700886b067622425901.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/custom_status_text.16b8b507ddd75700886b067622425901.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Custom status text widget showing Firefox usage statistics with conditional coloring based on comparison with Safari usage" /%}
{% image source="https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/custom_status_text_config.42061a96af59dc9b511f484b2812fc3e.png?auto=format&fit=max&w=850 1x, https://docs.dd-static.net/images/dashboards/guide/wildcard_examples/custom_status_text_config.42061a96af59dc9b511f484b2812fc3e.png?auto=format&fit=max&w=850&dpr=2 2x" alt="Configuration for the custom status text widget" /%}
{% collapsible-section %}
Vega-Lite 구성
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Customize a text display using a transform and conditional coloring",
"data": {
"name": "table1"
},
"transform": [
{
"calculate": "'Firefox: ' + datum.num_firefox + ' of ' + format(datum.num_total, '.3s') + ' (' + format(datum['fraction'], '.0%') + ')'",
"as": "display_text"
},
{
"calculate": "datum.num_firefox >= 10 * datum.num_safari",
"as": "is_firefox_ahead"
}
],
"mark": {
"type": "text",
"align": "center",
"baseline": "middle",
"fontSize": {
"expr": "width / 18"
}
},
"encoding": {
"text": {
"field": "display_text",
"type": "nominal"
},
"color": {
"condition": {
"test": "datum.is_firefox_ahead",
"value": "rgb(45,195,100)"
},
"value": "red"
}
}
}
{% /collapsible-section %}
더 알아보기 (Learn more)
도움이 되는 추가 문서, 링크, 아티클이에요: