Prompt file imported from GraphFoundry/integrated-dashboard (.github/prompts/create-chart-component.prompt.md). Copyright stays with the author.

Create Chart Component

Name: create-chart-component
Author: GraphFoundry

Create a new chart component using Recharts for data visualization.

Requirements

Create component in src/components/charts/
Use TypeScript for props and data types
Leverage Recharts library
Follow existing chart patterns

Chart Component Structure

Props interface with data, dimensions, colors
Responsive container wrapper
Proper axis configuration
Tooltip and legend (if applicable)
Loading and empty states

Follow Patterns

See src/components/charts/TimeSeriesLineChart.tsx for line chart patterns
See src/components/charts/LatencyMultiLineChart.tsx for multi-series patterns

Styling

Use Tailwind for container and wrapper styles
Use color tokens from tailwind.config.ts for chart colors
Ensure responsive behavior with ResponsiveContainer

Implementation Checklist

Define TypeScript interfaces for props and data
Implement chart component with Recharts
Add responsive wrapper
Configure axes, tooltip, legend
Handle loading state
Handle empty data state
Apply consistent color scheme
Export component

{ "prompt": "# Create Chart Component\r\n\r\nCreate a new chart component using Recharts for data visualization.\r\n\r\n## Requirements\r\n1. Create component in `src/components/charts/`\r\n2. Use TypeScript for props and data types\r\n3. Leverage Recharts library\r\n4. Follow existing chart patterns\r\n\r\n## Chart Component Structure\r\n- Props interface with data, dimensions, colors\r\n- Responsive container wrapper\r\n- Proper axis configuration\r\n- Tooltip and legend (if applicable)\r\n- Loading and empty states\r\n\r\n## Follow Patterns\r\n- See `src/components/charts/TimeSeriesLineChart.tsx` for line chart patterns\r\n- See `src/components/charts/LatencyMultiLineChart.tsx` for multi-series patterns\r\n\r\n## Styling\r\n- Use Tailwind for container and wrapper styles\r\n- Use color tokens from `tailwind.config.ts` for chart colors\r\n- Ensure responsive behavior with ResponsiveContainer\r\n\r\n## Implementation Checklist\r\n- [ ] Define TypeScript interfaces for props and data\r\n- [ ] Implement chart component with Recharts\r\n- [ ] Add responsive wrapper\r\n- [ ] Configure axes, tooltip, legend\r\n- [ ] Handle loading state\r\n- [ ] Handle empty data state\r\n- [ ] Apply consistent color scheme\r\n- [ ] Export component", "variables": [], "notes": "Create a new chart component using Recharts", "metadata": { "source": { "provider": "github-prompts", "repository": "https://github.com/GraphFoundry/integrated-dashboard", "path": ".github/prompts/create-chart-component.prompt.md", "ref": "5122253da69833cd2a7c6037ed1697fce022cf7b", "url": "https://github.com/GraphFoundry/integrated-dashboard/blob/5122253da69833cd2a7c6037ed1697fce022cf7b/.github/prompts/create-chart-component.prompt.md", "key": "GraphFoundry/integrated-dashboard/.github/prompts/create-chart-component.prompt.md" } } }

create-chart-component

About

Create Chart Component

Requirements

Chart Component Structure

Follow Patterns

Styling

Implementation Checklist

Use it

Manifest

Reviews