{
  "feature": "charts-visualization",
  "version": "1.0.0",
  "description": "Chart rendering system with bar, line, pie, donut, area, scatter, time-series, and heatmap types, responsive sizing, tooltips, legends, and real-time updates",
  "category": "ui",
  "tags": [
    "charts",
    "visualization",
    "graphs",
    "data-viz",
    "responsive",
    "real-time",
    "analytics"
  ],
  "fields": [
    {
      "name": "chart_type",
      "type": "select",
      "required": true,
      "label": "Chart Type",
      "validation": [
        {
          "type": "required",
          "message": "Chart type is required"
        }
      ],
      "options": [
        {
          "label": "Bar",
          "value": "bar"
        },
        {
          "label": "Line",
          "value": "line"
        },
        {
          "label": "Pie",
          "value": "pie"
        },
        {
          "label": "Donut",
          "value": "donut"
        },
        {
          "label": "Area",
          "value": "area"
        },
        {
          "label": "Scatter",
          "value": "scatter"
        },
        {
          "label": "Time Series",
          "value": "time-series"
        },
        {
          "label": "Heatmap",
          "value": "heatmap"
        }
      ]
    },
    {
      "name": "data_series",
      "type": "json",
      "required": true,
      "label": "Data Series",
      "validation": [
        {
          "type": "required",
          "message": "At least one data series is required"
        }
      ]
    },
    {
      "name": "x_axis",
      "type": "json",
      "required": false,
      "label": "X-Axis Configuration"
    },
    {
      "name": "y_axis",
      "type": "json",
      "required": false,
      "label": "Y-Axis Configuration"
    },
    {
      "name": "title",
      "type": "text",
      "required": false,
      "label": "Chart Title",
      "validation": [
        {
          "type": "maxLength",
          "value": 200,
          "message": "Title must be less than 200 characters"
        }
      ]
    },
    {
      "name": "subtitle",
      "type": "text",
      "required": false,
      "label": "Chart Subtitle"
    },
    {
      "name": "legend_position",
      "type": "select",
      "required": false,
      "label": "Legend Position",
      "default": "bottom",
      "options": [
        {
          "label": "Top",
          "value": "top"
        },
        {
          "label": "Bottom",
          "value": "bottom"
        },
        {
          "label": "Left",
          "value": "left"
        },
        {
          "label": "Right",
          "value": "right"
        },
        {
          "label": "Hidden",
          "value": "none"
        }
      ]
    },
    {
      "name": "color_palette",
      "type": "json",
      "required": false,
      "label": "Color Palette"
    },
    {
      "name": "animate",
      "type": "boolean",
      "required": false,
      "label": "Enable Animation",
      "default": true
    },
    {
      "name": "tooltip_enabled",
      "type": "boolean",
      "required": false,
      "label": "Show Tooltips",
      "default": true
    }
  ],
  "rules": {
    "data_series": {
      "max_series": 10,
      "empty_state_required": true
    },
    "rendering": {
      "responsive": true,
      "min_height_px": 200,
      "resize_debounce_ms": 100
    },
    "accessibility": {
      "colorblind_safe_palettes": true,
      "pattern_fills_available": true,
      "aria_labels": true,
      "keyboard_navigable": true
    },
    "axes": {
      "auto_scale": true,
      "grid_lines": true,
      "tick_rotation_threshold": 10
    },
    "animation": {
      "initial_duration_ms": 500,
      "update_duration_ms": 300,
      "respect_reduced_motion": true
    },
    "real_time": {
      "max_points_before_shift": 100,
      "update_throttle_ms": 200
    }
  },
  "outcomes": {
    "chart_rendered": {
      "priority": 1,
      "given": [
        "chart type is specified",
        "at least one data series is provided",
        "data series has at least one data point"
      ],
      "then": [
        {
          "action": "emit_event",
          "event": "chart.rendered",
          "payload": [
            "chart_type",
            "series_count",
            "data_point_count"
          ]
        }
      ],
      "result": "Chart renders with data, axes, legend, and tooltips according to configuration",
      "error": "CHART_RENDER_FAILED"
    },
    "chart_empty_state": {
      "priority": 2,
      "given": [
        "chart type is specified",
        "data series is empty or all values are null"
      ],
      "then": [
        {
          "action": "emit_event",
          "event": "chart.empty",
          "payload": [
            "chart_type"
          ]
        }
      ],
      "result": "Chart container displays an empty state message instead of blank space"
    },
    "data_updated": {
      "priority": 3,
      "given": [
        "chart is already rendered",
        "new data is provided for one or more series"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "data_series",
          "description": "Update data series with new values"
        },
        {
          "action": "emit_event",
          "event": "chart.data_updated",
          "payload": [
            "chart_type",
            "series_count",
            "is_real_time"
          ]
        }
      ],
      "result": "Chart animates to reflect new data without full re-render"
    },
    "data_point_clicked": {
      "priority": 4,
      "given": [
        "user clicks or taps a data point, bar, or slice"
      ],
      "then": [
        {
          "action": "emit_event",
          "event": "chart.clicked",
          "payload": [
            "chart_type",
            "series_name",
            "data_point",
            "value"
          ]
        }
      ],
      "result": "Click event emitted with the data point details for drill-down or linking"
    },
    "series_toggled": {
      "priority": 5,
      "given": [
        "user clicks a legend item",
        "chart has more than one data series"
      ],
      "then": [
        {
          "action": "set_field",
          "target": "data_series",
          "description": "Toggle visibility of the clicked series"
        },
        {
          "action": "emit_event",
          "event": "chart.series_toggled",
          "payload": [
            "series_name",
            "visible"
          ]
        }
      ],
      "result": "Series hidden or shown with animation, axes rescale if needed"
    },
    "max_series_exceeded": {
      "priority": 6,
      "error": "CHART_MAX_SERIES_EXCEEDED",
      "given": [
        {
          "field": "series_count",
          "source": "computed",
          "operator": "gt",
          "value": 10,
          "description": "More than 10 data series provided"
        }
      ],
      "result": "Only the first 10 series are rendered, user warned about the limit"
    }
  },
  "errors": [
    {
      "code": "CHART_MAX_SERIES_EXCEEDED",
      "status": 400,
      "message": "Maximum of 10 data series per chart. Additional series will not be displayed.",
      "retry": false
    },
    {
      "code": "CHART_INVALID_DATA",
      "status": 422,
      "message": "Data format is incompatible with the selected chart type",
      "retry": true
    },
    {
      "code": "CHART_RENDER_FAILED",
      "status": 500,
      "message": "Chart failed to render. Please check the data and configuration.",
      "retry": true
    }
  ],
  "events": [
    {
      "name": "chart.rendered",
      "description": "A chart was successfully rendered",
      "payload": [
        "chart_type",
        "series_count",
        "data_point_count"
      ]
    },
    {
      "name": "chart.data_updated",
      "description": "Chart data was updated (manually or via real-time stream)",
      "payload": [
        "chart_type",
        "series_count",
        "is_real_time"
      ]
    },
    {
      "name": "chart.clicked",
      "description": "A data point, bar, or slice was clicked",
      "payload": [
        "chart_type",
        "series_name",
        "data_point",
        "value"
      ]
    },
    {
      "name": "chart.empty",
      "description": "Chart rendered with no data",
      "payload": [
        "chart_type"
      ]
    },
    {
      "name": "chart.series_toggled",
      "description": "A data series was shown or hidden via legend",
      "payload": [
        "series_name",
        "visible"
      ]
    }
  ],
  "related": [
    {
      "feature": "dashboard-analytics",
      "type": "recommended",
      "reason": "Charts are commonly used as dashboard widgets"
    },
    {
      "feature": "dark-mode",
      "type": "optional",
      "reason": "Chart colors and grid lines should adapt to light and dark themes"
    },
    {
      "feature": "accessibility",
      "type": "recommended",
      "reason": "Charts need colorblind-safe palettes, ARIA labels, and keyboard navigation"
    },
    {
      "feature": "internationalization",
      "type": "optional",
      "reason": "Axis labels, tooltips, and number formatting depend on locale"
    }
  ],
  "agi": {
    "goals": [
      {
        "id": "reliable_charts_visualization",
        "description": "Chart rendering system with bar, line, pie, donut, area, scatter, time-series, and heatmap types, responsive sizing, tooltips, legends, and real-time updates",
        "success_metrics": [
          {
            "metric": "success_rate",
            "target": ">= 99%",
            "measurement": "Successful operations divided by total attempts"
          },
          {
            "metric": "error_rate",
            "target": "< 1%",
            "measurement": "Failed operations divided by total attempts"
          }
        ],
        "constraints": []
      }
    ],
    "autonomy": {
      "level": "semi_autonomous",
      "escalation_triggers": [
        "error_rate > 5"
      ]
    },
    "safety": {
      "action_permissions": [
        {
          "action": "chart_rendered",
          "permission": "autonomous"
        },
        {
          "action": "chart_empty_state",
          "permission": "autonomous"
        },
        {
          "action": "data_updated",
          "permission": "supervised"
        },
        {
          "action": "data_point_clicked",
          "permission": "autonomous"
        },
        {
          "action": "series_toggled",
          "permission": "autonomous"
        },
        {
          "action": "max_series_exceeded",
          "permission": "autonomous"
        }
      ]
    },
    "tradeoffs": [
      {
        "prefer": "accessibility",
        "over": "aesthetics",
        "reason": "UI must be usable by all users including those with disabilities"
      }
    ]
  }
}