> ## Documentation Index > Fetch the complete documentation index at: https://private-7c7dfe99-mintlify-8c05c8a2.mintlify.site/llms.txt > Use this file to discover all available pages before exploring further. # Integraciones > Integraciones con 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 es un motor de integración que hace que la ingestión de grandes volúmenes de datos desde una variedad de fuentes sea tan sencilla como hacer clic en unos pocos botones.", "Data ingestion": "¡Optimiza tus canalizaciones de datos con ClickHouse! Las integraciones fluidas garantizan una ingestión eficiente y optimizan el análisis en tiempo real.", "Data visualization": "¡Dale vida a tus datos! Las integraciones de ClickHouse potencian la visualización, haciendo que los hallazgos sean más claros y accionables.", "SQL client": "Accede y realiza consultas en bases de datos de ClickHouse con las herramientas e interfaces de cliente SQL que ya conoces.", "Language client": "¡Programa en tu entorno habitual! Las integraciones de cliente de lenguaje de ClickHouse hacen que el acceso a los datos sea fluido en múltiples lenguajes de programación.", "AI/ML": "Aprovecha ClickHouse para cargas de trabajo de machine learning e inteligencia artificial con herramientas y frameworks de ML integrados.", "Data management": "Gestiona, supervisa y optimiza tus datos en ClickHouse con herramientas de administración especializadas.", "Data integration": "Integra ClickHouse con tu infraestructura de datos y flujos de trabajo existentes.", "Security governance": "Implementa marcos de seguridad y gobernanza para tu entorno de ClickHouse." }; return descriptions[type] || "Integra ClickHouse con herramientas y servicios especializados."; } 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

${`${integration.integration_title$

; } 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("Se cargaron los datos de integración de respaldo"); } else { console.warn("El archivo de respaldo no está disponible, se intentará solo con el CMS"); } } catch (fallbackErr) { console.error("Error al cargar los datos de integración de respaldo:", fallbackErr); } try { const controller = new AbortController(); const timeoutId = setTimeout(() => { controller.abort(); console.log("La solicitud al CMS superó el tiempo de espera de 8 segundos"); }, 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(`¡Error HTTP! estado: ${response.status}`); } const data = await response.json(); const transformedData = transformCMSData(data.data || []); setIntegrations(transformedData); cacheIntegrations(transformedData); setError(null); console.log("Actualizado correctamente con datos frescos del CMS"); } catch (cmsErr) { if (cmsErr instanceof Error) { if (cmsErr.name === "AbortError") { console.log("La solicitud al CMS fue cancelada por timeout, usando datos de respaldo"); } else { console.error("Error al cargar las integraciones desde el CMS:", cmsErr.message); } } if (integrations.length === 0) { setError("No se pueden cargar las integraciones. Intente actualizar la página."); } } 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

Cargando integraciones...

; } if (error) { return

Error al cargar las integraciones: {error}

Intente actualizar la página.

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

No se encontraron integraciones.

; } return <>