);
}
// ====================================================================
// WORD CLOUD — mapa de palabras más frecuentes en reseñas
// ====================================================================
const WC_STOP = new Set(("el la los las lo un una unos unas de del al a ante bajo con contra desde durante en entre hacia hasta mediante para por " +
"segun según sin sobre tras que qué quien quién quienes cual cuál cuales como cómo cuando cuándo donde dónde y e ni o u pero aunque sino porque " +
"pues si sí no ya mas más menos muy mucho mucha muchos muchas poco poca pocos pocas tan tanto tanta tantos tantas todo toda todos todas otro otra " +
"otros otras mismo misma mismos mismas este esta estos estas ese esa esos esas aquel aquella aquellos aquellas esto eso aquello mi mis tu tus su " +
"sus nuestro nuestra nuestros nuestras me te se nos os le les yo él ella ellos ellas usted ustedes nosotros vosotros ser es soy eres somos son era " +
"eran fue fueron sea sean siendo sido estar estoy esta está están estaba estaban estuvo estuve haber he ha han hay había habían hube tener tengo " +
"tiene tienen tenia tenía tenían tuve tuvo hacer hago hace hacen hacia hacía hicieron hizo ir voy va van iba fui poder puedo puede pueden podía " +
"pudo puedes querer quiero quiere quieren decir digo dice dicen dijo dar doy da dan dio ver veo ve ven vio saber sé sabe saben supo deber debo " +
"debe deben así solo sólo también tampoco además luego entonces ahora antes después siempre nunca jamás aquí ahí allí allá bien casi cada vez " +
"veces día días etc uno dos tres cuatro cinco vez algo alguien nada nadie ninguna ningún ningun cualquier ahi aun aún les esto estás estás vas " +
"the and for with that this you your they have has not are was were but app aplicacion aplicación apps").split(/\s+/));
function _wcCompute(reviews) {
const freq = {};
for (const m of reviews) {
const ex = m.excerpt;
const txt = (typeof ex === "string" ? ex : (ex && (ex.es || ex.zh))) || "";
const tokens = txt.toLowerCase().match(/[a-záéíóúüñ]{3,}/g) || [];
const seen = new Set();
for (const tk of tokens) {
if (WC_STOP.has(tk)) continue;
if (!freq[tk]) freq[tk] = { count: 0, docs: 0, neg: 0, pos: 0 };
freq[tk].count++;
if (!seen.has(tk)) {
seen.add(tk);
freq[tk].docs++;
if (m.sentiment === "neg") freq[tk].neg++;
else if (m.sentiment === "pos") freq[tk].pos++;
}
}
}
return Object.entries(freq)
.filter(([, v]) => v.docs >= 2)
.sort((a, b) => b[1].count - a[1].count)
.slice(0, 44)
.map(([text, v]) => ({ text, count: v.count, docs: v.docs, neg: v.neg, pos: v.pos }));
}
// Mide texto real usando canvas para evitar estimaciones imprecisas
let _wcCtx = null;
function _wcMeasure(text, size) {
if (!_wcCtx) {
const c = document.createElement('canvas');
_wcCtx = c.getContext('2d');
}
_wcCtx.font = `800 ${size}px 'Arial', sans-serif`;
const m = _wcCtx.measureText(text);
return m.width;
}
// Coloca palabras en espiral desde el centro evitando colisiones
function _wcLayout(words, W, H) {
if (!words.length || W < 120) return [];
const max = words[0].count;
const placed = [];
const cx = W / 2, cy = H / 2;
words.forEach((w, rank) => {
const size = Math.round(13 + 33 * Math.sqrt(w.count / max));
const fw = _wcMeasure(w.text, size) + 14;
const fh = size * 1.28;
let t = 0;
while (t < 16000) {
const r = 2.1 * Math.sqrt(t);
const a = t * 0.42;
const x = cx + r * Math.cos(a) * 1.7;
const y = cy + r * Math.sin(a);
const rect = { l: x - fw / 2, t: y - fh / 2, r: x + fw / 2, b: y + fh / 2 };
if (rect.l >= 2 && rect.r <= W - 2 && rect.t >= 2 && rect.b <= H - 2 &&
!placed.some(p => !(rect.r < p.l - 2 || rect.l > p.r + 2 || rect.b < p.t - 2 || rect.t > p.b + 2))) {
placed.push({ ...rect, x, y, size, rank, word: w });
return;
}
t += 2;
}
});
return placed;
}
function WordCloud({ reviews, lang, active, onWord }) {
const zh = lang === "zh";
const en = lang === "en";
const targetLang = zh ? "zh-CN" : en ? "en" : null;
const boxRef = React.useRef(null);
const [width, setWidth] = React.useState(0);
const H = 300;
React.useLayoutEffect(() => {
const measure = () => { if (boxRef.current) setWidth(boxRef.current.clientWidth); };
measure();
window.addEventListener("resize", measure);
return () => window.removeEventListener("resize", measure);
}, []);
const words = React.useMemo(() => _wcCompute(reviews || []), [reviews]);
const cacheKey = targetLang === "zh-CN" ? "esToZh" : "esToEn";
const reverseCacheKey = targetLang === "zh-CN" ? "zhToEs" : "enToEs";
const [translations, setTranslations] = React.useState(() => {
if (!window._WC_TRANSLATIONS) window._WC_TRANSLATIONS = {};
if (!window._WC_TRANSLATIONS.esToZh) window._WC_TRANSLATIONS.esToZh = {};
if (!window._WC_TRANSLATIONS.zhToEs) window._WC_TRANSLATIONS.zhToEs = {};
if (!window._WC_TRANSLATIONS.esToEn) window._WC_TRANSLATIONS.esToEn = {};
if (!window._WC_TRANSLATIONS.enToEs) window._WC_TRANSLATIONS.enToEs = {};
return window._WC_TRANSLATIONS[cacheKey] || {};
});
React.useEffect(() => {
if (!targetLang || !words.length) return;
if (!window._WC_TRANSLATIONS) window._WC_TRANSLATIONS = {};
if (!window._WC_TRANSLATIONS.esToZh) window._WC_TRANSLATIONS.esToZh = {};
if (!window._WC_TRANSLATIONS.zhToEs) window._WC_TRANSLATIONS.zhToEs = {};
if (!window._WC_TRANSLATIONS.esToEn) window._WC_TRANSLATIONS.esToEn = {};
if (!window._WC_TRANSLATIONS.enToEs) window._WC_TRANSLATIONS.enToEs = {};
const missing = words.map(w => w.text).filter(txt => !window._WC_TRANSLATIONS[cacheKey][txt]);
if (missing.length === 0) {
setTranslations({ ...window._WC_TRANSLATIONS[cacheKey] });
return;
}
const translateBatch = async (chunk) => {
const params = chunk.map(w => `q=${encodeURIComponent(w)}`).join('&');
const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=es&tl=${targetLang}&dt=t&${params}`;
try {
const res = await fetch(url);
if (!res.ok) return;
const data = await res.json();
if (Array.isArray(data)) {
let joinedTranslation = "";
if (Array.isArray(data[0])) {
joinedTranslation = data[0].map(x => (Array.isArray(x) && x[0]) ? x[0] : '').join('');
}
const translatedArray = joinedTranslation.split('\n');
if (translatedArray.length === chunk.length) {
chunk.forEach((original, idx) => {
const translated = translatedArray[idx].trim();
if (translated) {
window._WC_TRANSLATIONS[cacheKey][original] = translated;
window._WC_TRANSLATIONS[reverseCacheKey][translated.toLowerCase()] = original;
}
});
} else {
// Fallback: translate individually
for (const original of chunk) {
const urlSingle = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=es&tl=${targetLang}&dt=t&q=${encodeURIComponent(original)}`;
const resSingle = await fetch(urlSingle);
if (resSingle.ok) {
const dataSingle = await resSingle.json();
const translated = (Array.isArray(dataSingle[0]) ? dataSingle[0] : [])
.map(x => (Array.isArray(x) && x[0]) ? x[0] : '')
.join('').trim();
if (translated) {
window._WC_TRANSLATIONS[cacheKey][original] = translated;
window._WC_TRANSLATIONS[reverseCacheKey][translated.toLowerCase()] = original;
}
}
}
}
}
} catch (err) {
console.warn("Error translating word cloud batch:", err);
}
};
const runTranslation = async () => {
const chunks = [];
const chunkSize = 15;
for (let i = 0; i < missing.length; i += chunkSize) {
chunks.push(missing.slice(i, i + chunkSize));
}
for (const chunk of chunks) {
await translateBatch(chunk);
}
setTranslations({ ...window._WC_TRANSLATIONS[cacheKey] });
};
runTranslation();
}, [words, targetLang, cacheKey]);
const mappedWords = React.useMemo(() => {
if (lang === "es") return words;
return words.map(w => {
const translatedText = translations[w.text] || w.text;
return { ...w, text: translatedText, originalText: w.text };
});
}, [words, lang, translations]);
const placed = React.useMemo(() => _wcLayout(mappedWords, width, H), [mappedWords, width]);
if (!words.length) return null;
const colorFor = (p) => {
const negShare = p.word.docs ? p.word.neg / p.word.docs : 0;
const posShare = p.word.docs ? p.word.pos / p.word.docs : 0;
if (negShare > 0.55) return "var(--neg)";
if (posShare > 0.55) return "var(--brand)";
return p.rank < 8 ? "var(--blue-soft)" : "var(--ice-dim)";
};
return (
{lang === "zh" ? "高频词云" : lang === "en" ? "Most Frequent Words Cloud" : "Mapa de palabras más frecuentes"}
{lang === "zh" ? "字号 = 出现频率 · 点击词语筛选评价" : lang === "en" ? "Size = frequency · Click a word to filter reviews" : "Tamaño = frecuencia · Haz clic en una palabra para filtrar las reseñas"}