Recharts से भारी हुए डैशबोर्ड बंडल को TanStack Charts से कैसे हल्का करें
TuBrief 편집팀
2026년 8월 12일
0
Computing/Software원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
यदि आप किसी डैशबोर्ड पेज पर जाते हैं और चार्ट लोड होने में समय लगता है, तो इसके पीछे 10 में से 9 बार Recharts की समस्या होती है। केवल कुछ चार्ट जोड़ने से बंडल का आकार सैकड़ों किलोबाइट बढ़ जाता है, जिसे देखकर निराशा होती है। Recharts, React DOM रीकॉन्सिليएशन चक्र के साथ बहुत गहराई से जुड़ा हुआ है। यूआई संरचना और डेटा प्रोसेसिंग आपस में इस तरह उलझे हुए हैं कि इसे हल्का रखना मुश्किल हो जाता है।
ऐसे में TanStack Charts एक बेहतरीन विकल्प साबित होता है। इसने विजुअलाइजेशन लॉजिक को ग्राफिक ग्रामर-आधारित कोर से अलग कर दिया है। जबकि Recharts आमतौर पर 150KiB से अधिक जगह लेता है, TanStack Charts लगभग 40KiB का होता है। बंडल का आकार लगभग 70% तक कम हो जाता है。
समस्या प्रोडक्शन कोड माइग्रेशन की है। सुचारू रूप से चल रहे स्क्रीन को बदलना हमेशा तनावपूर्ण होता है। टीम के सदस्यों को मनाने और बिना किसी गड़बड़ी के ट्रांजिशन करने के लिए एक स्पष्ट क्रम की आवश्यकता होती है।
एक बार में सब कुछ बदलने की कोशिश करने से यह पता लगाना मुश्किल हो जाता है कि त्रुटि कहाँ हुई। आपको एक घटक (component) को चुनना चाहिए और इसे ठीक 4 चरणों में विभाजित करना चाहिए।
defineChart डिक्लेरेशन ऑब्जेक्ट के marks ऐरे में ले जाएं।ResponsiveContainer और Tooltip को TanStack के स्वचालित स्केलर और @tanstack/charts/tooltip मॉड्यूल से बदलें।useMemo में लपेटें और इसे शीर्ष-स्तरीय Chart घटक में पास करें।यदि आप इस क्रम का पालन करते हैं, तो आप पहले चार्ट घटक को बदलने में लगने वाले समय को आधा कर सकते हैं।
`typescript
import React, { useMemo } from 'react';
import { defineChart, lineY, dot } from '@tanstack/charts';
import { scaleBand } from '@tanstack/charts/scales/band';
import { scaleLinear } from '@tanstack/charts/scales/linear';
import { tooltip } from '@tanstack/charts/tooltip';
import { Chart } from '@tanstack/charts/react';
interface DataRow {
date: string;
value: number;
}
export function MigratedRevenueChart({ data }: { data: DataRow[] }) {
const definition = useMemo(() => {
return defineChart({
marks: [
lineY(data, {
x: 'date',
y: 'value',
stroke: 'var(--ts-chart-1, #2563eb)',
strokeWidth: 2,
}),
dot(data, {
x: 'date',
y: 'value',
fill: 'var(--ts-chart-1, #2563eb)',
r: 4,
}),
],
x: {
scale: () => scaleBand().padding(0.2),
},
y: {
scale: scaleLinear,
nice: true,
grid: true,
},
tooltip: {
use: tooltip,
className: 'custom-tooltip',
},
});
}, [data]);
return (
<div style={{ width: '100%', height: 300 }}>
);
}
`
डार्क मोड टॉगल करते समय पूरे चार्ट घटक को फिर से रेंडर करना पुराना तरीका है। TanStack Charts हार्डकोडेड रंग मानों के बजाय CSS कस्टम प्रॉपर्टीज और currentColor का सीधा समर्थन करता है।
चार्ट रंगों को JavaScript स्थिति (state) के रूप में प्रबंधित करने के बजाय उन्हें CSS वेरिएबल के रूप में सेट करें। डिफ़ॉल्ट चार्ट पैलेट को --ts-chart-1 से लेकर --ts-chart-6 तक संदर्भित किया जाना चाहिए।
[data-theme='dark'] में चार्ट के लिए वेरिएबल को पहले से परिभाषित करें।defineChart विकल्पों में stroke या fill के लिए var(--ts-chart-1) फॉर्म का स्ट्रिंग डालें।इस तरह से कोड लिखने पर, जब डिज़ाइनर चार्ट के रंग बदलने के लिए कहता है, तो TSX फ़ाइल को छूने की कोई आवश्यकता नहीं होती है। केवल CSS को ठीक करना ही पर्याप्त है।
`css
:root {
--bg-chart-card: #ffffff;
--text-chart-main: #172033;
--border-chart-grid: #e2e8f0;
--ts-chart-1: #2563eb;
--ts-chart-2: #f97316;
}
[data-theme='dark'] {
--bg-chart-card: #0f172a;
--text-chart-main: #f8fafc;
--border-chart-grid: #334155;
--ts-chart-1: #60a5fa;
--ts-chart-2: #fb923c;
}
.custom-tooltip {
background-color: var(--bg-chart-card);
color: var(--text-chart-main);
border: 1px solid var(--border-chart-grid);
padding: 8px 12px;
border-radius: 6px;
}
`
जब 100,000 पॉइंट को SVG के रूप में रेंडर किया जाता है, तो 100,000 DOM नोड्स बन जाते हैं। ब्राउज़र का धागा (thread) इसे संभाल नहीं सकता है। लैगिंग स्पष्ट रूप से दिखाई देती है।
इसका समाधान दो चीज़ों को मिलाना है। DOM निर्माण लागत को समाप्त करने के लिए Canvas रेंडरर पर स्विच करें, और LTTB (Largest Triangle Three Buckets) एल्गोरिदम का उपयोग करके स्क्रीन पिक्सेल चौड़ाई से अधिक घने डेटा को संीक्षित करें। LTTB डेटा की विशिष्ट विशेषताओं (अधिकतम और न्यूनतम मान) को संरक्षित करते हुए बिंदुओं की संख्या को कम करता है।
`typescript
export function lttbDownsample(
data: T[],
xAccessor: (d: T) => number,
yAccessor: (d: T) => number,
threshold: number
): T[] {
const dataLength = data.length;
if (threshold >= dataLength || threshold === 0) return data;
const sampled: T[] = [];
let sampledIndex = 0;
const bucketSize = (dataLength - 2) / (threshold - 2);
sampled[sampledIndex++] = data[0];
for (let i = 0; i < threshold - 2; i++) {
let avgX = 0;
let avgY = 0;
const avgRangeStart = Math.floor((i + 1) * bucketSize) + 1;
const avgRangeEnd = Math.floor((i + 2) * bucketSize) + 1;
const currentAvgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
for (let j = avgRangeStart; j < currentAvgRangeEnd; j++) {
avgX += xAccessor(data[j]);
avgY += yAccessor(data[j]);
}
avgX /= (currentAvgRangeEnd - avgRangeStart);
avgY /= (currentAvgRangeEnd - avgRangeStart);
const rangeOffs = Math.floor((i + 0) * bucketSize) + 1;
const rangeTo = Math.floor((i + 1) * bucketSize) + 1;
const pointAX = xAccessor(sampled[sampledIndex - 1]);
const pointAY = yAccessor(sampled[sampledIndex - 1]);
let maxArea = -1;
let maxAreaPointIndex = rangeOffs;
for (let j = rangeOffs; j < rangeTo; j++) {
const area = Math.abs(
(pointAX - avgX) * (yAccessor(data[j]) - pointAY) -
(pointAX - xAccessor(data[j])) * (avgY - pointAY)
) * 0.5;
if (area > maxArea) {
maxArea = area;
maxAreaPointIndex = j;
}
}
sampled[sampledIndex++] = data[maxAreaPointIndex];
}
sampled[sampledIndex++] = data[dataLength - 1];
return sampled;
}
`
बड़े पैमाने पर समय-श्रृंखला (time-series) डेटा से निपटते समय, LTTB का उपयोग करके इसे लगभग 1000 स्तर तक कम करें। इसके अलावा, माउस पॉइंटर डिटेक्शन जटिलता को कम करने के लिए spatialIndex: true विकल्प चालू करें। अंत में, @tanstack/charts/react/canvas पैकेज से Canvas रेंडरर संलग्न करने पर 60fps प्राप्त होता है।
Recharts जैसे पुस्तकालयों में जहाँ JSX टैग गहराई से नेस्टेड होते हैं, AI सहायक अक्सर मतिभ्रम (hallucinations) का शिकार होते हैं। वे अजीब गुण बनाते हैं या खुले टैग बंद नहीं करते हैं।
TanStack Charts जैसी ऑब्जेक्ट डिक्लेरेशन शैलियों का उपयोग करने वाली लाइब्रेरी के साथ, जब तक टाइप स्कीमा अच्छी तरह से प्रदान किया जाता है, AI साफ-सुथरा कोड उत्पन्न करता है। प्रोजेक्ट में नीचे जैसी स्कीमा प्रकार को परिभाषित करें और इसे AI प्रॉम्प्ट या नियम फ़ाइल (.cursorrules) में शामिल करें।
`typescript
export type ScaleType = 'linear' | 'band' | 'utc' | 'point';
export type MarkType = 'lineY' | 'barY' | 'dot' | 'areaY';
export interface AIScaleConfig {
type: ScaleType;
nice?: boolean;
grid?: boolean;
padding?: number;
}
export interface AIMarkConfig {
type: MarkType;
xKey: string;
yKey: string;
color?: string;
strokeWidth?: number;
}
export interface AIChartGenerationSchema {
data: Record<string, unknown>[];
scales: {
x: AIScaleConfig;
y: AIScaleConfig;
};
marks: AIMarkConfig[];
tooltip?: {
enabled: boolean;
className?: string;
};
}
`
यदि आप प्रॉम्प्ट में सटीक उप-पथ (जैसे @tanstack/charts/scales/linear) से आयात करने के नियम और useMemo के उपयोग के नियम लिखते हैं, तो आप बिना किसी संशोधन के AI द्वारा आउटपुट कोड का सीधे उपयोग कर सकते हैं।