> ## Documentation Index > Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-fbfa8bee.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # التكاملات > تكاملات مع ClickHouse export const IntegrationGrid = () => { function useDarkMode() { const [isDark, setIsDark] = useState(false); useEffect(() => { const checkDarkMode = () => { const theme = document.documentElement.getAttribute("data-theme") || document.body.getAttribute("data-theme"); if (theme === "dark") { setIsDark(true); return; } if (theme === "light") { setIsDark(false); return; } if (document.documentElement.classList.contains("dark") || document.body.classList.contains("dark")) { setIsDark(true); return; } setIsDark(window.matchMedia("(prefers-color-scheme: dark)").matches); }; checkDarkMode(); const observer = new MutationObserver(checkDarkMode); observer.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class"] }); observer.observe(document.body, { attributes: true, attributeFilter: ["data-theme", "class"] }); const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)"); const handleChange = () => checkDarkMode(); mediaQuery.addEventListener("change", handleChange); return () => { observer.disconnect(); mediaQuery.removeEventListener("change", handleChange); }; }, []); return isDark; } function getTierIcon(tier, withMargin = false) { const style = withMargin ? { marginRight: "6px" } : {}; switch (tier) { case "core": return ; case "partner": return ; case "community": return ; default: return null; } } function getProperCapitalization(text) { const specialCases = { "ai/ml": "AI/ML", clickpipes: "ClickPipes", "data ingestion": "Data ingestion", "data integration": "Data integration", "data management": "Data management", "data visualization": "Data visualization", "deployment method": "Deployment method", "language client": "Language client", "security governance": "Security governance", "sql client": "SQL client" }; const lowerText = text.toLowerCase(); if (specialCases[lowerText]) { return specialCases[lowerText]; } return text.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" "); } function getSectionDescription(type) { const descriptions = { ClickPipes: "ClickPipes هو محرك تكامل يجعل استيعاب كميات ضخمة من البيانات من مصادر متنوعة بسيطاً كالنقر على بضعة أزرار.", "Data ingestion": "بسّط خطوط أنابيب بياناتك مع ClickHouse! تضمن عمليات التكامل السلسة استيعاباً فعّالاً للبيانات، مما يُحسّن تحليلات الوقت الفعلي.", "Data visualization": "أضِئ قصص بياناتك! تُعزّز تكاملات ClickHouse التصور، مما يجعل الرؤى أكثر وضوحاً وقابلية للتنفيذ.", "SQL client": "تصفّح قواعد بيانات ClickHouse واستعلم عنها باستخدام أدوات وواجهات عميل SQL المألوفة.", "Language client": "برمج في بيئتك المفضّلة! تجعل تكاملات مكتبة العملاء للغات البرمجة في ClickHouse الوصول إلى البيانات سلساً عبر لغات برمجة متعددة.", "AI/ML": "استفد من ClickHouse في أعباء عمل التعلم الآلي والذكاء الاصطناعي باستخدام أدوات وأطر عمل ML المتكاملة.", "Data management": "أدِر بيانات ClickHouse وراقبها وحسّنها باستخدام أدوات إدارة متخصصة.", "Data integration": "ادمج ClickHouse مع البنية التحتية لبياناتك وسير عملك الحاليين.", "Security governance": "طبّق أطر الأمان والحوكمة لبيئة ClickHouse الخاصة بك." }; return descriptions[type] || "ادمج ClickHouse مع أدوات وخدمات متخصصة."; } function renderIntegrationCard(integration, isDark, key) { const getNavigationLink = (docsLink, slug) => { if (!docsLink) { return slug; } const clickhouseDocsMatch = docsLink.match(/https:\/\/clickhouse\.com\/docs\/(.+)/); if (clickhouseDocsMatch) { return `/${clickhouseDocsMatch[1]}`; } return docsLink; }; const getLogoSrc = () => { if (!isDark && integration.integration_logo_dark) { return integration.integration_logo_dark; } return integration.integration_logo; }; const linkTo = getNavigationLink(integration.docsLink, integration.slug); const isExternalLink = linkTo.startsWith("http") && !linkTo.includes("clickhouse.com/docs"); return

; } function renderIntegrationCards(integrations, isDark) { return

{integrations.map((integration, index) => renderIntegrationCard(integration, isDark, `${integration.slug}-${integration.integration_title || index}`))}

; } function transformCMSData(cmsData) { const categoryMapping = { AI_ML: "AI/ML", CLICKPIPES: "ClickPipes", DATA_INGESTION: "Data ingestion", DATA_INTEGRATION: "Data integration", DATA_MANAGEMENT: "Data management", DATA_VISUALIZATION: "Data visualization", LANGUAGE_CLIENT: "Language client", SECURITY_GOVERNANCE: "Security governance", SQL_CLIENT: "SQL client" }; return cmsData.map(item => { const integrationTypes = item.category ? [categoryMapping[item.category] || item.category] : []; const integrationTier = item.supportLevel?.toLowerCase() || ""; return { slug: item.slug.startsWith("/") ? item.slug : `/${item.slug}`, docsLink: item.docsLink, integration_logo: item.logo?.url ? `https://staging-cms.clickhouse.com${item.logo.url}` : "", integration_logo_dark: item.logo_dark?.url ? `https://staging-cms.clickhouse.com${item.logo_dark.url}` : undefined, integration_type: integrationTypes, integration_title: item.name, integration_tier: integrationTier }; }); } function useCMSIntegrations() { const cached = typeof window !== "undefined" && window.__chIntegrationsCache || null; const [integrations, setIntegrations] = useState(cached || []); const [loading, setLoading] = useState(!cached); const [error, setError] = useState(null); useEffect(() => { const cacheIntegrations = data => { if (typeof window !== "undefined") window.__chIntegrationsCache = data; }; const fetchIntegrations = async () => { try { const base = typeof window !== "undefined" && window.location.pathname.startsWith("/docs") ? "/docs" : ""; const fallbackResponse = await fetch(base + "/assets/integrations-fallback.json", { cache: "force-cache" }); if (fallbackResponse.ok) { const fallbackData = await fallbackResponse.json(); const transformedData = transformCMSData(fallbackData.data || []); setIntegrations(transformedData); cacheIntegrations(transformedData); setError(null); setLoading(false); console.log("تم تحميل بيانات التكاملات الاحتياطية"); } else { console.warn("الملف الاحتياطي غير متاح، سيتم المحاولة عبر CMS فقط"); } } catch (fallbackErr) { console.error("فشل تحميل بيانات التكاملات الاحتياطية:", fallbackErr); } try { const controller = new AbortController(); const timeoutId = setTimeout(() => { controller.abort(); console.log("انتهت مهلة طلب CMS بعد 8 ثوانٍ"); }, 8000); const response = await fetch("https://staging-cms.clickhouse.com/api/integrations?fields[0]=name&fields[1]=slug&fields[2]=category&fields[3]=supportLevel&fields[4]=docsLink&populate[logo][fields][0]=url&populate[logo_dark][fields][0]=url&pagination[pageSize]=500", { signal: controller.signal, headers: { Accept: "application/json" } }); clearTimeout(timeoutId); if (!response.ok) { throw new Error(`خطأ HTTP! الحالة: ${response.status}`); } const data = await response.json(); const transformedData = transformCMSData(data.data || []); setIntegrations(transformedData); cacheIntegrations(transformedData); setError(null); console.log("تم التحديث بنجاح ببيانات CMS الحديثة"); } catch (cmsErr) { if (cmsErr instanceof Error) { if (cmsErr.name === "AbortError") { console.log("تم إلغاء طلب CMS بسبب انتهاء المهلة، جارٍ استخدام البيانات الاحتياطية"); } else { console.error("خطأ في تحميل التكاملات من CMS:", cmsErr.message); } } if (integrations.length === 0) { setError("تعذّر تحميل التكاملات. يرجى تحديث الصفحة والمحاولة مجدداً."); } } finally { setLoading(false); } }; fetchIntegrations(); }, []); return { integrations, loading, error }; } const {integrations, loading, error} = useCMSIntegrations(); const isDark = useDarkMode(); const [searchTerm, setSearchTerm] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-search") || ""; } return ""; }); const [selectedFilter, setSelectedFilter] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-filter") || "All"; } return "All"; }); const [selectedTier, setSelectedTier] = useState(() => { if (typeof window !== "undefined") { return localStorage.getItem("integrations-tier") || "All"; } return "All"; }); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-search", searchTerm); } }, [searchTerm]); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-filter", selectedFilter); } }, [selectedFilter]); useEffect(() => { if (typeof window !== "undefined") { localStorage.setItem("integrations-tier", selectedTier); } }, [selectedTier]); const integrationTypes = useMemo(() => { const types = new Set(); integrations.forEach(integration => { integration.integration_type.forEach(type => { types.add(type); }); }); const sortOrder = ["Language client", "ClickPipes", "Data ingestion", "Data visualization", "AI/ML", "Data integration", "Data management", "Security governance", "SQL client"]; return Array.from(types).sort((a, b) => { const indexA = sortOrder.indexOf(a); const indexB = sortOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) { return indexA - indexB; } if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); }); }, [integrations]); const integrationTiers = useMemo(() => { const tiers = new Set(); integrations.forEach(integration => { if (integration.integration_tier) { tiers.add(integration.integration_tier); } }); const tierSortOrder = ["core", "partner", "community"]; return Array.from(tiers).sort((a, b) => { const indexA = tierSortOrder.indexOf(a); const indexB = tierSortOrder.indexOf(b); if (indexA !== -1 && indexB !== -1) { return indexA - indexB; } if (indexA !== -1) return -1; if (indexB !== -1) return 1; return a.localeCompare(b); }); }, [integrations]); const filteredIntegrations = useMemo(() => { const filtered = integrations.filter(integration => { const matchesSearch = integration.integration_title?.toLowerCase().includes(searchTerm.toLowerCase()) || integration.slug.toLowerCase().includes(searchTerm.toLowerCase()); const matchesFilter = selectedFilter === "All" || integration.integration_type.some(type => type === selectedFilter); const matchesTier = selectedTier === "All" || integration.integration_tier === selectedTier; return matchesSearch && matchesFilter && matchesTier; }); return filtered.sort((a, b) => { const tierOrder = ["core", "partner", "community", ""]; const tierA = a.integration_tier || ""; const tierB = b.integration_tier || ""; const tierIndexA = tierOrder.indexOf(tierA); const tierIndexB = tierOrder.indexOf(tierB); if (tierIndexA !== tierIndexB) { return tierIndexA - tierIndexB; } return (a.integration_title || "").localeCompare(b.integration_title || ""); }); }, [integrations, searchTerm, selectedFilter, selectedTier]); const groupedIntegrations = useMemo(() => { const grouped = new Map(); filteredIntegrations.forEach(integration => { integration.integration_type.forEach(type => { if (!grouped.has(type)) { grouped.set(type, []); } if (!grouped.get(type)?.find(item => item.slug === integration.slug && item.integration_title === integration.integration_title)) { grouped.get(type)?.push(integration); } }); }); grouped.forEach(integrationsArray => { integrationsArray.sort((a, b) => { const tierOrder = ["core", "partner", "community", ""]; const tierA = a.integration_tier || ""; const tierB = b.integration_tier || ""; const tierIndexA = tierOrder.indexOf(tierA); const tierIndexB = tierOrder.indexOf(tierB); if (tierIndexA !== tierIndexB) { return tierIndexA - tierIndexB; } return (a.integration_title || "").localeCompare(b.integration_title || ""); }); }); return grouped; }, [filteredIntegrations]); if (loading) { return

جارٍ تحميل التكاملات...

; } if (error) { return

فشل تحميل التكاملات: {error}

يرجى تحديث الصفحة والمحاولة مجدداً.

; } if (integrations.length === 0) { return

لم يتم العثور على أي تكاملات.

; } return <>