ریچارٹس بوائلر پلیٹ لکھے بغیر Next.js ایپ میں shadcn چارٹس کیسے شامل کریں۔

By /

ٹکٹوں کے لیے چارٹس ایک چھوٹا سا کام لگتا ہے۔ پھر Recharts دستاویز کو کھولیں اور یاد رکھیں کہ آپ کو ہر چارٹ کے لیے کتنی سیٹنگز کی ضرورت ہے: لیبلز اور رنگوں کے لیے کنفیگریشن آبجیکٹ، محور، ٹول ٹِپس، لیجنڈز، وہ رنگ جو ڈارک موڈ میں کام کرتے ہیں، اور کنٹینرز جو مناسب سائز کے ہوں۔ ہم میں سے اکثر اپنے آخری پروجیکٹ سے سب کچھ کاپی کرتے ہیں اور چابیاں کا نام تبدیل کرتے ہیں۔

shadcn/ui چارٹ جزو اس کام میں سے کچھ کو ہٹاتا ہے۔ تھیم سے آگاہ رنگوں اور ٹول ٹپس کے ساتھ ریچارٹس کو لپیٹتا ہے۔ تاہم، ہم اب بھی اپنے تمام چارٹ ہاتھ سے بناتے ہیں۔

لہذا میں نے چارٹ سی این بنایا، ایک مفت اور اوپن سورس shadcn چارٹ جنریٹر۔ ڈیٹا چسپاں کریں، چارٹ کو منتخب کریں، پھر shadcn/ui چارٹ جزو اور ایک TSX فائل کاپی کریں جو صرف Recharts پر انحصار کرتی ہے۔ یہ MIT لائسنس یافتہ ہے اور اسے کسی اکاؤنٹ یا اضافی پیکیج کی ضرورت نہیں ہے۔

اس ٹیوٹوریل میں، آپ سیکھیں گے کہ اپنی نئی Next.js ایپ میں آمدنی بمقابلہ لاگت بار چارٹ کیسے شامل کیا جائے۔ آئیے دیکھتے ہیں کہ تیار کردہ کوڈ کا ہر حصہ کیا کرتا ہے، پھر چارٹ کو سرور کے جزو میں بھری ہوئی ڈیٹا سے جوڑیں۔ یہ ٹول آپ کے ان پٹ کو محفوظ کرے گا، لیکن اقدامات 5 اور 6 کسی بھی shadcn/ui چارٹ پر لاگو ہوں گے جو آپ خود بناتے یا لکھتے ہیں۔

شرائط: آپ کو React سے واقف ہونا چاہیے اور آپ کو Node.js انسٹال کرنا چاہیے۔ Next.js ایپ روٹر کے بارے میں کچھ بنیادی معلومات حاصل کرنا مددگار ثابت ہوگا، لیکن تمام مراحل کی وضاحت کی گئی ہے۔

انڈیکس

کیا تعمیر کرنا ہے

آخر میں آپ کے پاس درج ذیل دو صفحات ہوں گے۔

  • / ایک گروپ شدہ بار چارٹ دکھاتا ہے جس میں ڈیٹا کو براہ راست جزو میں لکھا جاتا ہے۔ یہ اسکرین پر چارٹ ڈسپلے کرنے کا تیز ترین طریقہ ہے۔

  • /live یہ ایک ہی چارٹ دکھاتا ہے، لیکن ڈیٹا سرور پر چلنے والے ایک غیر مطابقت پذیر فنکشن سے آتا ہے۔ یہ وہ ورژن ہے جسے آپ اپنے اصل ڈیٹا بیس یا API کے ساتھ استعمال کرتے ہیں۔

چارٹ میں گریڈینٹ بارز، کمپیکٹ ایکسس لیبلز (40000 کی بجائے 40K)، ایک لیجنڈ، اور ٹول ٹپس ہیں جو ہر سیریز کے لیے ماہانہ ٹوٹل اور شیئرز دکھاتے ہیں۔

مرحلہ 1: Next.js ایپ بنائیں اور shadcn/ui شروع کریں۔

ایک نئی ایپ بنائیں اور اس پر تشریف لے جائیں۔

npx create-next-app@latest my-charts-app
cd my-charts-app

تجویز کردہ ڈیفالٹس کو قبول کریں۔ TypeScript، Tailwind CSS، اور App Router کی ضرورت ہے۔

اگلا، shadcn/ui شروع کریں۔

npx shadcn@latest init

یہ کمانڈ تین کام انجام دیتی ہے جن پر آپ بعد میں بھروسہ کریں گے۔

  1. یہ پیدا کرتا ہے components.jsonshadcn/ui CLI کو بتاتا ہے کہ اجزاء کہاں رکھنا ہے۔

  2. یہ اضافہ کرتا ہے lib/utils.ts اور cn() کلاس انضمام مددگار۔

  3. تھیم متغیرات لکھیں۔ app/globals.css5 چارٹ رنگوں پر مشتمل ہے: --chart-1 کے ذریعے --chart-5روشنی اور تاریک طریقوں کے لیے الگ الگ قدریں ہیں۔

پانچ چارٹ متغیرات اہم ہیں: ہر تخلیق کردہ چارٹ اس کا استعمال کرتا ہے، لہذا پوری ایپ میں چارٹ کا رنگ تبدیل کرنے کا مطلب ہے CSS کی ایک لائن میں ترمیم کرنا۔

مرحلہ 2: shadcn/ui چارٹ کا جزو شامل کریں۔

اب ایک چارٹ کا جزو شامل کرتے ہیں۔

npx shadcn@latest add chart

اسے انسٹال کریں recharts اور تخلیق کریں components/ui/chart.tsx. وہ فائل عمارت کے بلاکس کو برآمد کرتی ہے جو تیار کردہ کوڈ میں دیکھے جا سکتے ہیں۔

  • ChartContainer ریچارٹس ریپنگ. ResponsiveContainer، لہذا چارٹ بنیادی اشیاء کو بھرتا ہے۔

  • ChartConfig آبجیکٹ کی ایک قسم جو ہر ڈیٹا کلید کو لیبل اور رنگ سے نقشہ بناتی ہے۔

  • ChartTooltip, ChartTooltipContent, ChartLegendاور ChartLegendContent ٹول ٹپس اور لیجنڈز کا ریچارٹس اسٹائلڈ ورژن۔

آگے بڑھنے سے پہلے، چیک کریں کہ آپ نے Recharts کا کون سا ورژن انسٹال کیا ہے۔

npm ls recharts

ChartCN کوڈ اہداف تخلیق کرتا ہے۔ چارٹ 3 دوبارہ. اگر آپ ورژن 2.x دیکھتے ہیں تو اپ گریڈ کریں۔

npm install recharts@latest

ٹیک وے: shadcn/ui چارٹ کا جزو Recharts کے اوپر ایک پتلی تہہ ہے۔ یہ Recharts کی جگہ نہیں لیتا۔ ہم Recharts کے لیے تھیمز فراہم کرتے ہیں۔

مرحلہ 3: چارٹ سی این میں چارٹ کا ایک جزو بنائیں

ChartCN بار چارٹ کا صفحہ کھولیں۔ ڈیٹا پینل میں تین ٹیبز ہیں۔ ڈیٹا چسپاں کریں۔, فائل اپ لوڈاور ٹیبل ترمیم. یہ CSV ڈیٹا چسپاں کریں۔ ٹیگ:

Month,Revenue,Expenses
Jan,42000,31000
Feb,58000,34000
Mar,51000,29000
Apr,67000,38000
May,72000,41000
Jun,69000,37000

ChartCN پہلے کالم کو زمرہ کے محور (بار چارٹس کے لیے ایکس محور) اور دیگر تمام کالموں کو عددی سیریز کے طور پر مانتا ہے۔ JSON، TSV اور Markdown ٹیبل بھی کام کرتے ہیں، اور فارمیٹ خود بخود پتہ چل جاتا ہے۔

Shadcn چارٹ - بار چارٹ

پیش نظارہ کے اوپر درج ذیل اختیارات سیٹ کریں:

  • یہاں ایک محنتی فہرست ہے: گروپ

  • ٹول ٹِپ: خرابی

  • پاس ورڈ: ان لائن ڈیٹا

پھر کلک کریں۔ اجزاء کاپی کریں۔ پر chart.tsx پیش نظارہ کے نیچے پینل۔

Shadcn چارٹ - چارٹ سی این کاپی اجزاء

مرحلہ 4: اپنے صفحہ پر ایک چارٹ شامل کریں۔

درج ذیل جگہ پر ایک نئی فائل بنائیں: components/revenue-chart.tsx پھر کاپی شدہ کوڈ پیسٹ کریں۔

اسے کسی اور نام سے محفوظ نہ کریں۔ components/ui/chart.tsx. چارٹ سی این آؤٹ پٹ کو لیبل کرتا ہے۔ chart.tsxتاہم، اس راستے میں پہلے سے ہی مرحلہ 2 سے shadcn جزو شامل ہے، اور اسے اوور رائٹ کرنے سے ایپ میں موجود تمام چارٹس ٹوٹ جائیں گے۔

تیار کردہ اجزاء ہمیشہ مندرجہ ذیل طور پر برآمد کیے جاتے ہیں: Chartلہذا درآمد کرتے وقت اسے ایک واضح نام دیں۔ تبدیلی app/page.tsx اس کے ساتھ:

// app/page.tsx
import { Chart as RevenueChart } from "@/components/revenue-chart"

export default function Home() {
  return (
    

      
      
    

  )
}

چلائیں npm run dev اور اسے کھولیں http://localhost:3000. آپ کو چارٹ کو دیکھنا چاہئے۔

ٹیک وے: تیار کردہ چارٹ اس منصوبے کا صرف ایک جزو ہے۔ ترتیب دینے کے لیے کچھ نہیں ہے اور مطابقت پذیری کے لیے کوئی پیکیج نہیں ہے۔

مرحلہ 5: تیار کردہ کوڈ کو سمجھیں۔

اب جب کہ آپ اس فائل کے مالک ہیں، یہ جاننا اچھا خیال ہے کہ ہر حصہ کیا کرتا ہے۔ لمبائی میں کٹے ہوئے اہم حصے یہ ہیں:

فائل ایک ہدایت اور اس کی درآمدات سے شروع ہوتی ہے۔

// components/revenue-chart.tsx
"use client"

import { useId } from "react"
import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts"
import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
} from "@/components/ui/chart"

ریچارٹس DOM کی پیمائش کرتے ہیں اور ماؤس کے واقعات کو ہینڈل کرتے ہیں، لہذا چارٹ کو کلائنٹ کا جزو ہونا چاہیے۔ app/page.tsx چونکہ یہ صرف چارٹ پیش کرتا ہے، اس لیے یہ سرور کا جزو رہ سکتا ہے۔

یہاں ڈیٹا اور ترتیب ہے:

const data = [
  { Month: "Jan", Revenue: 42000, Expenses: 31000 },
  { Month: "Feb", Revenue: 58000, Expenses: 34000 },
  // ...
]

const chartConfig = {
  Revenue: { label: "Revenue", color: "var(--chart-1)" },
  Expenses: { label: "Expenses", color: "var(--chart-2)" },
} satisfies ChartConfig

کلید chartConfig یہ آپ کے ڈیٹا میں موجود کلید سے مماثل ہونا چاہیے۔ ChartContainer یہ اس کنفیگریشن کو پڑھتا ہے اور درج ذیل چارٹ کے دائرہ کار میں ہر کلید کے لیے CSS متغیرات تخلیق کرتا ہے۔ --color-Revenue اور --color-Expenses. ہر ایک تھیم کے رنگ کی طرف اشارہ کرتا ہے، لہذا چارٹ اپنے طور پر ڈارک موڈ میں رنگ بدلتا ہے۔

چارٹ خود مندرجہ ذیل متغیرات کا استعمال کرتا ہے:


  
    {/* ...gradient , grid, axes, tooltip, legend... */}
     }
      radius={[6, 6, 0, 0]}
      maxBarSize={36}
    />

چند تفصیلات جاننے کے قابل ہیں۔

  • کلید کی طرف سے مقرر کیا جاتا ہے h-[350px] کو ChartContainer. اسے وہاں تبدیل کریں۔

  • میلان کی طرف سے تیار . shape سہارے، جبکہ fill ٹھوس رنگوں کو برقرار رکھا جاتا ہے۔ یہی وجہ ہے کہ لیجنڈ اور ٹول ٹپ نقطے میلان کے بجائے صاف رنگوں میں ظاہر ہوتے ہیں۔

  • uid سے آتا ہے useId()لہذا اگر آپ ایک ہی صفحہ پر دو چارٹ پیش کرتے ہیں، تو گریڈینٹ آئی ڈیز منفرد رہیں گی۔

فائل میں ChartBreakdownTooltip یہ تقریباً 70 لائنوں کا ایک جزو ہے جو کل اور ہر سیریز کا فیصد دکھاتا ہے۔ معیاری shadcn ٹول ٹپس استعمال کرنے کے لیے، منتخب کریں: ٹول ٹپ: سادہ کاپی کرنے سے پہلے ChartCN سے۔ یہ مجموعی فائل کو تقریباً 120 لائنوں سے کم کر کے تقریباً 50 لائنوں تک پہنچا دیتا ہے۔

ٹیک وے: shadcn/ui چارٹس میں، رنگ تھیم متغیر سے آتے ہیں۔ chartConfig ~ میں --color- متغیر ایک بار جب آپ اس راستے کو سمجھ لیں، تو آپ چارٹ میں براہ راست ترمیم کر سکتے ہیں۔

مرحلہ 6: پروپ کو ریئل ٹائم ڈیٹا منتقل کریں۔

ہارڈ کوڈ شدہ ڈیٹا ڈیمو مقاصد کے لیے موزوں ہے۔ اصل ڈیٹا دیکھنے کے لیے، واپس ChartCN پر جائیں۔ پاس ورڈ کو ڈیٹا بطور پروپساور دوبارہ کاپی کریں۔ اس ورژن کو بطور محفوظ کریں۔ components/revenue-chart-live.tsx.

چارٹ مارک اپ ایک جیسا ہے۔ فائل کا صرف اوپری حصہ تبدیل ہوتا ہے۔ data صفوں کو اقسام سے تبدیل کیا جاتا ہے اور اجزاء کی اجازت ہے۔ data سہارے کے ساتھ:

// components/revenue-chart-live.tsx
export type ChartRow = { Month: string; Revenue: number | null; Expenses: number | null }

export interface ChartProps {
  data: ChartRow[]
}

// ...chartConfig is unchanged...

export function Chart({ data }: ChartProps) {
  // ...same JSX as before
}

سلسلہ درج ذیل ہے: number | null اس کی وجہ یہ ہے کہ اصل اعداد و شمار میں خلاء موجود ہیں۔ کوئی راستہ نہیں null اقدار کو صفر سلاخوں کے بجائے غائب سلاخوں کے طور پر پیش کیا جاتا ہے۔

اب سرور میں ڈیٹا لوڈ کرنے کے لیے ایک فنکشن بنائیں۔

// lib/get-revenue.ts
import type { ChartRow } from "@/components/revenue-chart-live"

export async function getRevenue(): Promise {
  // Replace this with your database query or API call.
  // For example: const res = await fetch("https://api.example.com/revenue")
  return [
    { Month: "Jan", Revenue: 42000, Expenses: 31000 },
    { Month: "Feb", Revenue: 58000, Expenses: 34000 },
    { Month: "Mar", Revenue: 51000, Expenses: 29000 },
    { Month: "Apr", Revenue: 67000, Expenses: 38000 },
    { Month: "May", Revenue: 72000, Expenses: null },
  ]
}

پھر میں اسے سرور کے جزو والے صفحے سے کال کرتا ہوں:

// app/live/page.tsx
import { Chart as RevenueChart } from "@/components/revenue-chart-live"
import { getRevenue } from "@/lib/get-revenue"

export default async function LivePage() {
  const data = await getRevenue()

  return (
    

      
      
    

  )
}

کھلا http://localhost:3000/live. مئی ایک ریونیو بار دکھاتا ہے جس کے آگے خرچہ بار نہیں ہوتا۔ اس کی وجہ یہ ہے کہ اس کی اقدار ہیں: null.

صفحہ سرور سے حاصل کیا جاتا ہے اور کلائنٹ کے جزو کو صرف قطاریں بھیجی جاتی ہیں۔ ڈیٹا بیس کی اسناد اور API کیز سرور پر موجود ہیں۔ جب اصل میں تبادلہ ہوتا ہے۔ fetch متبادل طور پر، ڈیٹا بیس کالز کے لیے، ڈیٹا ریفریش ریٹ کو کنٹرول کرنے کے لیے Next.js ڈیٹا فیچنگ دستاویزات کو چیک کریں۔

ٹیک وے: سرور کے جزو میں ڈیٹا لوڈنگ کو جاری رکھیں اور اسے کلائنٹ کے جزو میں پیش کریں۔ برآمد ChartRow type TypeScript کو بتاتا ہے کہ آیا ڈیٹا اس سے میل کھاتا ہے جس کی چارٹ کی توقع ہے۔

عام مسائل اور حل

ایک غلطی درج کریں جیسے "پراپرٹی ‘آئٹم سارٹر’ موجود نہیں ہے۔” میں نے اپنے پروجیکٹ میں ریچارٹس 2 انسٹال کیے ہیں۔ چلائیں npm install recharts@latest ریچارٹس 3 میں اپ گریڈ کریں۔

سلاخیں سیاہ ہیں اور لیجنڈ ڈاٹ غائب ہے۔ آپ کا app/globals.css وضاحت نہیں کرتا --chart-1 کے ذریعے --chart-5. چلائیں npx shadcn@latest init دوبارہ، یا shadcn/ui تھیم دستاویز سے چارٹ متغیرات کو کاپی کریں۔

میرے چسپاں کرنے کے بعد تمام چارٹس نے کام کرنا چھوڑ دیا۔ آپ نے شاید تیار کردہ فائلوں کو محفوظ کیا ہے: components/ui/chart.tsx. اس کے ساتھ بحال کریں: npx shadcn@latest add chart --overwrite چارٹ کو مختلف نام سے محفوظ کریں۔

ایک صفحے پر دو چارٹ ایک جیسے ہیں۔ تمام تیار کردہ اجزاء مندرجہ ذیل طور پر برآمد کیے جاتے ہیں: Chart. درآمد کرتے وقت اس کا نام تبدیل کریں جیسے import { Chart as SignupsChart } from "@/components/signups-chart".

خلاصہ

  1. shadcn/ui چارٹ اجزاء تھیم ریچارٹس۔ یہ اس کی جگہ نہیں لیتا ہے اور ChartCN کے آؤٹ پٹ کے لیے Recharts 3 کی ضرورت ہوتی ہے۔

  2. رنگ CSS متغیرات سے آتے ہیں۔ --chart-1 بن جاتا ہے۔ --color-Revenue کے ذریعے chartConfigلہذا ڈارک موڈ بغیر کسی اضافی کوڈ کے کام کرتا ہے۔

  3. بنائے گئے چارٹ کو اپنے نام سے محفوظ کریں۔ components/ui/chart.tsx اس کا تعلق shadcn/ui سے ہے۔

  4. ڈیٹا کو حقیقی ڈیٹا کے لیے بطور سہارا استعمال کریں۔ اسے سرور کے جزو میں لوڈ کریں اور درج کردہ قطاروں کو چارٹ میں منتقل کریں۔

  5. null اس کا مطلب ہے "کوئی ڈیٹا نہیں”۔ وقفوں کو غیر صفر وقفوں کے طور پر پیش کیا جاتا ہے۔

چونکہ ChartCN ایک shadcn چارٹ جنریٹر ہے نہ کہ جزو لائبریری، اس لیے انسٹال یا اپ ڈیٹ کرنے کے لیے کوئی ChartCN پیکجز نہیں ہیں۔ آپ کو تمام 13 shadcn چارٹس ملیں گے جن میں لائن، ایریا، پائی، ریڈار، KPI کارڈ، واٹر فال اور ہیٹ میپ شامل ہیں۔ وہ سب ایک ہی پیسٹ، سلیکٹ، کاپی ورک فلو کی پیروی کرتے ہیں جو یہاں استعمال ہوتا ہے۔

ذریعہ MIT لائسنس کے تحت GitHub پر ہے۔ اگر یہ مفید ہے، تو ستارہ دوسرے ڈویلپرز کو اسے تلاش کرنے میں مدد کرے گا۔

Related Posts

Scroll to Top