fix: use gray color for other items (#541)

Author: sheepzh

package.json

@@ -31,16 +31,16 @@
     "devDependencies": {
         "@babel/plugin-transform-modules-commonjs": "^7.27.1",
         "@babel/preset-env": "^7.28.3",
-        "@crowdin/crowdin-api-client": "^1.46.2",
+        "@crowdin/crowdin-api-client": "^1.47.1",
         "@rsdoctor/rspack-plugin": "^1.2.3",
-        "@rspack/cli": "^1.5.3",
-        "@rspack/core": "^1.5.3",
+        "@rspack/cli": "^1.5.4",
+        "@rspack/core": "^1.5.4",
         "@swc/core": "^1.13.5",
         "@swc/jest": "^0.2.39",
-        "@types/chrome": "0.1.11",
+        "@types/chrome": "0.1.12",
         "@types/decompress": "^4.2.7",
         "@types/jest": "^30.0.0",
-        "@types/node": "^24.3.1",
+        "@types/node": "^24.5.1",
         "@types/punycode": "^2.1.4",
         "@vue/babel-plugin-jsx": "^1.5.0",
         "babel-loader": "^10.0.0",
@@ -54,7 +54,7 @@
         "postcss": "^8.5.6",
         "postcss-loader": "^8.2.0",
         "postcss-rtlcss": "^5.7.1",
-        "puppeteer": "^24.20.0",
+        "puppeteer": "^24.21.0",
         "sass": "^1.92.1",
         "sass-loader": "^16.0.5",
         "style-loader": "^4.0.0",

src/pages/popup/components/Percentage/chart.ts

@@ -1,5 +1,5 @@
 import { createTab } from "@api/chrome/tab"
-import { getCssVariable, getPrimaryTextColor, getSecondaryTextColor } from "@pages/util/style"
+import { getCssVariable, getInfoColor, getPrimaryTextColor, getSecondaryTextColor } from "@pages/util/style"
 import { calJumpUrl } from "@popup/common"
 import { t } from "@popup/locale"
 import { sum, toMap } from "@util/array"
@@ -204,23 +204,22 @@ export function generateSiteSeriesOption(rows: timer.stat.Row[], result: Percent
     const chartRows = cvt2ChartRows(rows, dimension, itemCount)
     const iconRich: PieLabelRichOption = {}
     const data = chartRows.map(row => {
-        const value = row[dimension]
-        let name = 'NaN'
+        const item: PieSeriesItemOption = { name: 'NaN', value: row[dimension], row }
         if (isOther(row)) {
-            const { count } = row
-            name = t(msg => msg.content.percentage.otherLabel, { count })
+            item.itemStyle = { color: getInfoColor() }
+            item.name = t(msg => msg.content.percentage.otherLabel, { count: row.count })
         } else if (isSite(row)) {
             const { siteKey, alias, iconUrl } = row
             const { host } = siteKey || {}
-            name = (displaySiteName ? (alias ?? host) : host) ?? ''
+            const name = item.name = (displaySiteName ? (alias ?? host) : host) ?? ''
             const richValue: PieLabelRichValueOption = { ...BASE_LABEL_RICH_VALUE }
             iconUrl && (richValue.backgroundColor = { image: iconUrl })
             iconRich[legend2LabelStyle(name)] = richValue
         } else if (isGroup(row)) {
-            name = getGroupName(groupMap, row)
+            item.name = getGroupName(groupMap, row)
         }
 
-        return { name, value, row } satisfies PieSeriesItemOption
+        return item
     })
 
     const textColor = getPrimaryTextColor()