{% extends 'BaseLumenAgent/revise_output.jinja2' %}

{% block instructions %}
{{ super() }}

- Do NOT modify the data field
- For overlays: data at top level, encoding in layer

# Publication-Ready Requests

If user asks to "make it look better", "professional", "publication-ready", or similar, apply these changes:

1. **Remove clutter**: `config.view.stroke: null` (no border)
2. **Clean gridlines**: 
   - Horizontal bars: keep x-axis grid (`config.axisX.gridColor: '#eeeeee'`), disable y-axis (`config.axisY.grid: false`)
   - Vertical bars: keep y-axis grid (`config.axisY.gridColor: '#eeeeee'`), disable x-axis (`config.axisX.grid: false`)
3. **Increase font sizes**: `title.fontSize: 26`, `title.subtitleFontSize: 18`, `config.axis.labelFontSize: 16`
4. **Selective emphasis**: If multiple lines/series, reduce opacity of less important ones (`opacity: 0.2-0.3`)
5. **Use semantic colors**: map meaning to color (warm=red, cool=blue) with explicit `scale.domain` and `scale.range`
6. **Add value labels**: with units via `transform.calculate`, positioned with `dy` offset
7. **Clean tick labels**: use `labelExpr` to format values (snake_case → Title Case)
8. **Limit results**: For bar charts with 10+ categories, show top 5-10 using **top-level** `transform`
{% endblock %}

{%- block examples -%}
# EXAMPLES
{% if doc_examples is defined and doc_examples %}
{% for example in doc_examples %}
{{ example }}
{% endfor %}
{% endif %}

## Publication-ready config
```yaml
config:
  axis:
    labelFontSize: 21
    titleFontSize: 24
    titlePadding: 15
  axisX:
    grid: false
  axisY:
    gridColor: '#cccccc'
  title:
    fontSize: 30
    subtitleFontSize: 21
    subtitlePadding: 10
  view:
    stroke: null
```

## Semantic colors
```yaml
encoding:
  color:
    field: category
    scale:
      domain: ['el_nino', 'la_nina']
      range: ['#d62728', '#1f77b4']  # red=warm, blue=cool
    legend: null
    type: nominal
```

## Transform tick labels (snake_case → Display)
```yaml
encoding:
  x:
    axis:
      labelExpr: "datum.value == 'el_nino' ? 'El Niño' : datum.value == 'la_nina' ? 'La Niña' : datum.value"
    field: category
    type: nominal
```

## Value labels with conditional positioning
Do NOT use `expr` in `dy` - use separate filtered layers:
```yaml
# Positive values (labels above)
- transform:
    - filter: "datum.value > 0"
    - calculate: "format(datum.value, '+.2f') + '°C'"
      as: label
  encoding:
    x: {field: category, type: nominal}
    y: {field: value, type: quantitative}
    text: {field: label, type: nominal}
    color: {field: category, scale: {domain: ['a', 'b'], range: ['#d62728', '#1f77b4']}, legend: null}
  mark: {type: text, fontSize: 21, fontWeight: bold, dy: -15}
# Negative values (labels below)
- transform:
    - filter: "datum.value < 0"
    - calculate: "format(datum.value, '.2f') + '°C'"
      as: label
  encoding:
    x: {field: category, type: nominal}
    y: {field: value, type: quantitative}
    text: {field: label, type: nominal}
    color: {field: category, scale: {domain: ['a', 'b'], range: ['#d62728', '#1f77b4']}, legend: null}
  mark: {type: text, fontSize: 21, fontWeight: bold, dy: 25}
```

## Solid zero line
```yaml
- encoding: {y: {datum: 0}}
  mark: {type: rule, color: '#333333', size: 2}
```

## Static color (remove color encoding, add to mark)
```yaml
mark: {type: bar, color: '#888888'}
```

## Axis formatting
```yaml
encoding:
  x:
    axis: {labelAngle: -90, title: null}  # null removes redundant title
  y:
    axis: {format: '.1f', tickCount: 5}
```

## Limit to top N results (improves readability)
For charts with many categories, show only top 5-10:
```yaml
transform:
  - window:
      - op: rank
        as: rank
    sort:
      - field: value_field
        order: descending
  - filter: datum.rank <= 8
title:
  text: Top 8 Categories by Value
```
{%- endblock -%}
