harshapitla/stackoverflow

1{"version":3,"file":"static/js/892.41939bdb.chunk.js","mappings":"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","sources":["components/charts/ChartCard.jsx","charts/CategoryDominanceTreemap.jsx"],"sourcesContent":["import React from \"react\";\r\n\r\nexport default function ChartCard({ title, subtitle, children, actions, footer }) {\r\n  return (\r\n    <section className=\"card chart-card\">\r\n      {(title || subtitle || actions) && (\r\n        <div className=\"chart-card-header\">\r\n          <div>\r\n            {title && <h3 className=\"chart-card-title\">{title}</h3>}\r\n            {subtitle && <p className=\"chart-card-subtitle\">{subtitle}</p>}\r\n          </div>\r\n          {actions && <div className=\"chart-card-actions\">{actions}</div>}\r\n        </div>\r\n      )}\r\n      <div className=\"chart-card-body\">{children}</div>\r\n      {footer && <div className=\"chart-card-footer\">{footer}</div>}\r\n    </section>\r\n  );\r\n}\r\n","import React, { useMemo } from \"react\";\r\nimport {\r\n  ResponsiveContainer,\r\n  PieChart,\r\n  Pie,\r\n  Cell,\r\n  Tooltip,\r\n  Legend,\r\n} from \"recharts\";\r\nimport ChartCard from \"../components/charts/ChartCard\";\r\n\r\n/* ================= HELPERS ================= */\r\nfunction parseNumber(value) {\r\n  const num = Number(value);\r\n  return isNaN(num) ? null : num;\r\n}\r\n\r\n// ✅ CLEAN CATEGORY NAME\r\nfunction cleanCategoryName(name) {\r\n  if (!name) return \"\";\r\n  return String(name)\r\n    .replace(/^\\[+|\\]+$/g, \"\")\r\n    .replace(/^\"+|\"+$/g, \"\")\r\n    .trim();\r\n}\r\n\r\n/* ================= COLORS ================= */\r\nconst COLORS = [\r\n  \"#4f46e5\",\r\n  \"#22c55e\",\r\n  \"#f97316\",\r\n  \"#06b6d4\",\r\n  \"#a855f7\",\r\n  \"#84cc16\",\r\n  \"#facc15\",\r\n  \"#ec4899\",\r\n  \"#14b8a6\",\r\n  \"#fb7185\",\r\n];\r\n\r\n/* ================= CUSTOM TOOLTIP (NO BLACK BOX) ================= */\r\nfunction CustomTooltip({ active, payload }) {\r\n  if (active && payload && payload.length) {\r\n    const d = payload[0];\r\n    return (\r\n      <div\r\n        style={{\r\n          background: \"#ffffff\",\r\n          padding: \"10px 14px\",\r\n          borderRadius: 6,\r\n          border: \"1px solid #cbd5e1\",\r\n          color: \"#0f172a\",\r\n        }}\r\n      >\r\n        <strong>{d.name}</strong>\r\n        <div style={{ marginTop: 6 }}>Products: {d.value}</div>\r\n        <div>Avg Rating: {d.payload.avgRating.toFixed(2)}</div>\r\n      </div>\r\n    );\r\n  }\r\n  return null;\r\n}\r\n\r\n/* ================= MAIN COMPONENT ================= */\r\nexport default function CategoryDominancePieChart({ rows = [] }) {\r\n  const chartData = useMemo(() => {\r\n    if (!Array.isArray(rows)) return [];\r\n\r\n    const categoryMap = {};\r\n\r\n    rows.forEach((row) => {\r\n      if (!row.categories) return;\r\n\r\n      const rating = parseNumber(row.rating_average);\r\n\r\n      const categories = Array.isArray(row.categories)\r\n        ? row.categories\r\n        : String(row.categories)\r\n            .split(\",\")\r\n            .map((c) => cleanCategoryName(c))\r\n            .filter(Boolean);\r\n\r\n      categories.forEach((cat) => {\r\n        if (!categoryMap[cat]) {\r\n          categoryMap[cat] = {\r\n            name: cat,\r\n            count: 0,\r\n            ratingSum: 0,\r\n            ratingCount: 0,\r\n          };\r\n        }\r\n\r\n        categoryMap[cat].count += 1;\r\n\r\n        if (rating !== null) {\r\n          categoryMap[cat].ratingSum += rating;\r\n          categoryMap[cat].ratingCount += 1;\r\n        }\r\n      });\r\n    });\r\n\r\n    return Object.values(categoryMap)\r\n      .map((c) => ({\r\n        name: c.name,\r\n        value: c.count,\r\n        avgRating: c.ratingCount > 0 ? c.ratingSum / c.ratingCount : 0,\r\n      }))\r\n      .sort((a, b) => b.value - a.value)\r\n      .slice(0, 10); // ✅ top 10 categories for clarity\r\n  }, [rows]);\r\n\r\n  if (!chartData.length) {\r\n    return (\r\n      <ChartCard\r\n        title=\"Category Dominance\"\r\n        subtitle=\"Product distribution by category\"\r\n      >\r\n        <p className=\"small\">No category data available.</p>\r\n      </ChartCard>\r\n    );\r\n  }\r\n\r\n  return (\r\n    <ChartCard\r\n      title=\"Category Dominance\"\r\n      subtitle=\"Product distribution by category (Top 10)\"\r\n    >\r\n      <ResponsiveContainer width=\"100%\" height={420}>\r\n        <PieChart>\r\n          <Pie\r\n            data={chartData}\r\n            dataKey=\"value\"\r\n            nameKey=\"name\"\r\n            cx=\"50%\"\r\n            cy=\"50%\"\r\n            outerRadius={140}\r\n            label={({ name, percent }) =>\r\n              `${name} (${(percent * 100).toFixed(1)}%)`\r\n            }\r\n          >\r\n            {chartData.map((_, index) => (\r\n              <Cell\r\n                key={`cell-${index}`}\r\n                fill={COLORS[index % COLORS.length]}\r\n              />\r\n            ))}\r\n          </Pie>\r\n\r\n          <Tooltip content={<CustomTooltip />} />\r\n          <Legend\r\n            verticalAlign=\"bottom\"\r\n            height={40}\r\n            wrapperStyle={{ fontSize: 12 }}\r\n          />\r\n        </PieChart>\r\n      </ResponsiveContainer>\r\n\r\n      {/* ================= INSIGHTS ================= */}\r\n      <div style={{ marginTop: 18 }}>\r\n        <strong>Key Insights</strong>\r\n        <ul style={{ marginTop: 8, paddingLeft: 18 }}>\r\n          <li>\r\n            All major categories fall within a narrow range of approximately\r\n            8%–14%, indicating an evenly distributed product landscape. AI\r\n            Chatbots and Productivity slightly lead this range, showing\r\n            marginally higher concentration compared to other categories.\r\n          </li>\r\n          <li>\r\n            Categories with unclear or malformed names were intentionally\r\n            excluded, ensuring the analysis focuses only on meaningful and valid\r\n            product categories.\r\n          </li>\r\n        </ul>\r\n      </div>\r\n    </ChartCard>\r\n  );\r\n}\r\n"],"names":["ChartCard","_ref","title","subtitle","children","actions","footer","_jsxs","className","_jsx","COLORS","CustomTooltip","active","payload","length","d","style","background","padding","borderRadius","border","color","name","marginTop","value","avgRating","toFixed","CategoryDominancePieChart","_ref2","rows","chartData","useMemo","Array","isArray","categoryMap","forEach","row","categories","rating","num","Number","isNaN","parseNumber","rating_average","String","split","map","c","cleanCategoryName","replace","trim","filter","Boolean","cat","count","ratingSum","ratingCount","Object","values","sort","a","b","slice","ResponsiveContainer","width","height","PieChart","Pie","data","dataKey","nameKey","cx","cy","outerRadius","label","_ref3","percent","concat","_","index","Cell","fill","Tooltip","content","Legend","verticalAlign","wrapperStyle","fontSize","paddingLeft"],"sourceRoot":""}