Көрме: Визуалдаудың күші

Бұл бет тақырыпқа (theme) біріктірілген премиум деректерді визуалдау мүмкіндіктерін көрсетеді.

Astro Glass визуалдау көрмесіне қош келдіңіз. Бұл мақала біздің негізгі визуалдау стегінің — Shadcn Charts (Recharts), Visx және Expressive Code — деректерге бай, таңқаларлық тәжірибе жасау үшін қалай бірігетінін көрсетеді.

1. Аналитика және Бақылау тақталары (Dashboard) (Recharts)

Біз қарапайым диаграммалардан әлдеқайда асып түстік. Біздің реттелетін Astro Glass Charts іске асырылымы Recharts қуатын шыны морфизмі (glassmorphism) қозғалтқышымыздың сұлулығымен біріктіреді.

А. Бақылау тақтасы

KPI карталары, градиентпен тұндырылған аймақтық диаграммалар және жарқыраған пончик (donut) диаграммалары бар толық бақылау тақтасының көрінісі. Түстердің сіздің белсенді тақырыбыңызға қалай бейімделетінін байқаңыз (“Neo” немесе “Sunset” тақырыптарына ауысып көріңіз!).

В. Микро-Визуалдаулар

Деректердің көрнекі кедергісіз тығыздығы үшін біз BarLists (жолақ тізімдер) және Trackers (бақылаушылар) пайдаланамыз. Бұл компоненттерде тегіс анимациялар және “сұйық” үлгерім индикаторлары бар.

2. Интерактивті архитектура (React Flow)

Біз диаграммаларды тек файлдар үшін қолданбаймыз. Біз оларды Жүйе архитектурасын визуалдау үшін қолданамыз. Бұл интерактивті график түйіндерді сүйреуге, үлкейтуге және жоба құрылымын зерттеуге мүмкіндік береді.

А. Жоба құрылымы

Стандартты файлдар ағашының көрінісі.

3. Кинематографиялық код блоктары (Expressive Code)

Код - бұл контент. Біз оны ерекше етеміз.

А. Бөлектеу және Фокус

Пайдаланушының назарын маңызды нәрсеге бағыттаңыз.

// 1. Біз сиқырды импорттаймыз
import { motion } from 'framer-motion';

export const MagicCard = () => (
  // 2. Біз оны анимациялаймыз
  <motion.div
    initial={{ opacity: 0 }}
    animate={{ opacity: 1 }}
    transition={{ duration: 0.5 }}
  >
    Сиқыр!
  </motion.div>
);

B. Файл белгішелері бар Diff көріністері

Қосылған және жойылған нәрселерді контекстпен бірге анық көрсетеді.

export default defineConfig({
  integrations: [
    react(),
    react({ include: ['**/react/*'] }),
    tailwind(),
  ],
});

C. Терминал және Жақтаулар (Frames)

Терминал ортасын модельдеу.

$ pnpm run build
> astro build

09:41:22 [build] output target: server
09:41:22 [build] deploying to Cloudflare...
09:41:23 [success] Deployed to https://astroglass-preview.pages.dev 🚀

Қорытынды

Бұл көрме Astro Glass жай ғана үлгі (template) емес — бұл жоғары өнімді контент қозғалтқышы екенін дәлелдейді. Бұл құралдарды пайдалана отырып, сіз күрделі деректер мен логиканы функционалды және әдемі дизайндармен жеткізе аласыз.