perf: gh-135 field distribution chart only show top 10 fields.

riccox · Oct 14, 2024 · a05f970 · a05f970
1 parent aad00fc
commit a05f970
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/locales/en/index.json b/src/locales/en/index.json
@@ -1,6 +1,7 @@
 {
   "fieldDistribution": {
     "label": "Field Distribution",
+    "tip": "Only the first 10 fields are shown, sorted by distribution",
     "subtitle": "Click me to go for official docs about “Field Distribution”"
   },
   "count": "Count",

diff --git a/src/locales/zh/index.json b/src/locales/zh/index.json
@@ -1,6 +1,7 @@
 {
   "fieldDistribution": {
     "label": "字段分布",
+    "tip": "仅展示前十个字段，按分布排序",
     "subtitle": "点我转到有关 Field Distribution 的官方文档"
   },
   "count": "文档计数",

diff --git a/src/routes/ins/$insID/_layout/index/$indexUID/_layout/index.tsx b/src/routes/ins/$insID/_layout/index/$indexUID/_layout/index.tsx
@@ -32,7 +32,7 @@ const Page = () => {
         <ReactECharts
           option={{
             title: {
-              text: t('fieldDistribution.label'),
+              text: `${t('fieldDistribution.label')} (${t('fieldDistribution.tip')})`,
               textStyle: { fontSize: '1rem', color: 'black' },
               subtext: t('fieldDistribution.subtitle'),
               sublink: 'https://www.meilisearch.com/docs/reference/api/stats',
@@ -75,7 +75,10 @@ const Page = () => {
                     },
                   },
                 },
-                data: Object.entries(fieldDistribution).map(([k, v]) => ({ name: k, value: v })),
+                data: Object.entries(fieldDistribution)
+                  .map(([k, v]) => ({ name: k, value: v }))
+                  .sort((a, b) => b.value - a.value)
+                  .slice(0, 10),
               },
             ],
           }}