mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-04-13 21:33:32 +08:00
4813ed753f
Ports functionality from 10+ separate plugins into ECC so users only need one plugin installed. Consolidates: pr-review-toolkit, feature-dev, commit-commands, hookify, code-simplifier, security-guidance, frontend-design, explanatory-output-style, and personal skills. New agents (8): code-architect, code-explorer, code-simplifier, comment-analyzer, conversation-analyzer, pr-test-analyzer, silent-failure-hunter, type-design-analyzer New commands (9): commit, commit-push-pr, clean-gone, review-pr, feature-dev, hookify, hookify-list, hookify-configure, hookify-help New skills (8): frontend-design, hookify-rules, github-ops, knowledge-ops, lead-intelligence, oura-health, pmx-guidelines, remotion Enhanced skills (8): article-writing, content-engine, market-research, investor-materials, investor-outreach, x-api, security-scan, autonomous-loops — merged with personal skill content New hook: security-reminder.py (pattern-based OWASP vulnerability warnings on file edits) Totals: 36 agents, 69 commands, 128 skills, 29 hook scripts
59 lines
1.7 KiB
Markdown
59 lines
1.7 KiB
Markdown
---
|
|
name: charts
|
|
description: Chart and data visualization patterns for Remotion. Use when creating bar charts, pie charts, histograms, progress bars, or any data-driven animations.
|
|
metadata:
|
|
tags: charts, data, visualization, bar-chart, pie-chart, graphs
|
|
---
|
|
|
|
# Charts in Remotion
|
|
|
|
You can create bar charts in Remotion by using regular React code - HTML and SVG is allowed, as well as D3.js.
|
|
|
|
## No animations not powered by `useCurrentFrame()`
|
|
|
|
Disable all animations by third party libraries.
|
|
They will cause flickering during rendering.
|
|
Instead, drive all animations from `useCurrentFrame()`.
|
|
|
|
## Bar Chart Animations
|
|
|
|
See [Bar Chart Example](assets/charts/bar-chart.tsx) for a basic example implmentation.
|
|
|
|
### Staggered Bars
|
|
|
|
You can animate the height of the bars and stagger them like this:
|
|
|
|
```tsx
|
|
const STAGGER_DELAY = 5;
|
|
const frame = useCurrentFrame();
|
|
const {fps} = useVideoConfig();
|
|
|
|
const bars = data.map((item, i) => {
|
|
const delay = i * STAGGER_DELAY;
|
|
const height = spring({
|
|
frame,
|
|
fps,
|
|
delay,
|
|
config: {damping: 200},
|
|
});
|
|
return <div style={{height: height * item.value}} />;
|
|
});
|
|
```
|
|
|
|
## Pie Chart Animation
|
|
|
|
Animate segments using stroke-dashoffset, starting from 12 o'clock.
|
|
|
|
```tsx
|
|
const frame = useCurrentFrame();
|
|
const {fps} = useVideoConfig();
|
|
|
|
const progress = interpolate(frame, [0, 100], [0, 1]);
|
|
|
|
const circumference = 2 * Math.PI * radius;
|
|
const segmentLength = (value / total) * circumference;
|
|
const offset = interpolate(progress, [0, 1], [segmentLength, 0]);
|
|
|
|
<circle r={radius} cx={center} cy={center} fill="none" stroke={color} strokeWidth={strokeWidth} strokeDasharray={`${segmentLength} ${circumference}`} strokeDashoffset={offset} transform={`rotate(-90 ${center} ${center})`} />;
|
|
```
|