mirror of
https://github.com/labring/FastGPT.git
synced 2025-10-21 19:42:07 +00:00
V4.12.0 features (#5435)
* add logs chart (#5352) * charts * chart data * log chart * delete * rename api * fix * move api * fix * fix * pro config * fix * feat: Repository interaction (#5356) * feat: 1好像功能没问题了，明天再测 * feat: 2 解决了昨天遗留的bug,但全选按钮又bug了 * feat: 3 第三版，解决了全选功能bug * feat: 4 第四版，下面改小细节 * feat: 5 我勒个痘 * feat: 6 * feat: 6 pr * feat: 7 * feat: 8 * feat: 9 * feat: 10 * feat: 11 * feat: 12 * perf: checkbox ui * refactor: tweak login loyout (#5357) Co-authored-by: Archer <545436317@qq.com> * login ui * app chat log chart pro display (#5392) * app chat log chart pro display * add canopen props * perf: pro tag tip * perf: pro tag tip * feat: openrouter provider (#5406) * perf: login ui * feat: openrouter provider * provider * perf: custom error throw * perf: emb batch (#5407) * perf: emb batch * perf: vector retry * doc * doc (#5411) * doc * fix: team folder will add to workflow * fix: generateToc shell * Tool price (#5376) * resolve conflicts for cherry-pick * fix i18n * Enhance system plugin template data structure and update ToolSelectModal to include CostTooltip component * refactor: update systemKeyCost type to support array of objects in plugin and workflow types * refactor: simplify systemKeyCost type across plugin and workflow types to a single number * refactor: streamline systemKeyCost handling in plugin and workflow components * fix * fix * perf: toolset price config;fix: workflow array selector ui (#5419) * fix: workflow array selector ui * update default model tip * perf: toolset price config * doc * fix: test * Refactor/chat (#5418) * refactor: add homepage configuration; add home chat page; add side bar animated collapse and layout * fix: fix lint rules * chore: improve logics and code * chore: more clearer logics * chore: adjust api --------- Co-authored-by: Archer <545436317@qq.com> * perf: chat setting code * del history * logo image * perf: home chat ui * feat: enhance chat response handling with external links and user info (#5427) * feat: enhance chat response handling with external links and user info * fix * cite code * perf: toolset add in workflow * fix: test * fix: search paraentId * Fix/chat (#5434) * wip: rebase了upstream * wip: adapt mobile UI * fix: fix chat page logic and UI * fix: fix UI and improve some logics * fix: model selector missing logo; vision model to retrieve file * perf: role selector * fix: chat ui * optimize export app chat log (#5436) * doc * chore: move components to proper directory; fix the api to get app list (#5437) * chore: improve team app panel display form (#5438) * feat: add home chat log tab * chore: improve team app panel display form * chore: improve log panel * fix: spec * doc * fix: log permission * fix: dataset schema required * add loading status * remove ui weight * manage log * fix: log detail per * doc * fix: log menu * rename permission * bg color * fix: app log per * fix: log key selector * fix: log * doc --------- Co-authored-by: heheer <zhiyu44@qq.com> Co-authored-by: colnii <1286949794@qq.com> Co-authored-by: 伍闲犬 <76519998+xqvvu@users.noreply.github.com> Co-authored-by: Ctrlz <143257420+ctrlz526@users.noreply.github.com> Co-authored-by: 伍闲犬 <whoeverimf5@gmail.com> Co-authored-by: heheer <heheer@sealos.io>
This commit is contained in:
Archer
@@ -5,6 +5,7 @@ export const iconPaths = {
|
||||
backup: () => import('./icons/backup.svg'),
|
||||
book: () => import('./icons/book.svg'),
|
||||
change: () => import('./icons/change.svg'),
|
||||
chart: () => import('./icons/chart.svg'),
|
||||
chatSend: () => import('./icons/chatSend.svg'),
|
||||
check: () => import('./icons/check.svg'),
|
||||
checkCircle: () => import('./icons/checkCircle.svg'),
|
||||
@@ -112,9 +113,9 @@ export const iconPaths = {
|
||||
'common/tickFill': () => import('./icons/common/tickFill.svg'),
|
||||
'common/toolkit': () => import('./icons/common/toolkit.svg'),
|
||||
'common/trash': () => import('./icons/common/trash.svg'),
|
||||
'common/upRightArrowLight': () => import('./icons/common/upRightArrowLight.svg'),
|
||||
'common/uploadFileFill': () => import('./icons/common/uploadFileFill.svg'),
|
||||
'common/upperRight': () => import('./icons/common/upperRight.svg'),
|
||||
'common/upRightArrowLight': () => import('./icons/common/upRightArrowLight.svg'),
|
||||
'common/userInfo': () => import('./icons/common/userInfo.svg'),
|
||||
'common/variable': () => import('./icons/common/variable.svg'),
|
||||
'common/viewLight': () => import('./icons/common/viewLight.svg'),
|
||||
@@ -151,6 +152,8 @@ export const iconPaths = {
|
||||
'core/app/simpleMode/tts': () => import('./icons/core/app/simpleMode/tts.svg'),
|
||||
'core/app/simpleMode/variable': () => import('./icons/core/app/simpleMode/variable.svg'),
|
||||
'core/app/simpleMode/whisper': () => import('./icons/core/app/simpleMode/whisper.svg'),
|
||||
'core/app/templates/TranslateRobot': () =>
|
||||
import('./icons/core/app/templates/TranslateRobot.svg'),
|
||||
'core/app/templates/animalLife': () => import('./icons/core/app/templates/animalLife.svg'),
|
||||
'core/app/templates/chinese': () => import('./icons/core/app/templates/chinese.svg'),
|
||||
'core/app/templates/divination': () => import('./icons/core/app/templates/divination.svg'),
|
||||
@@ -160,8 +163,6 @@ export const iconPaths = {
|
||||
'core/app/templates/plugin-dalle': () => import('./icons/core/app/templates/plugin-dalle.svg'),
|
||||
'core/app/templates/plugin-feishu': () => import('./icons/core/app/templates/plugin-feishu.svg'),
|
||||
'core/app/templates/stock': () => import('./icons/core/app/templates/stock.svg'),
|
||||
'core/app/templates/TranslateRobot': () =>
|
||||
import('./icons/core/app/templates/TranslateRobot.svg'),
|
||||
'core/app/toolCall': () => import('./icons/core/app/toolCall.svg'),
|
||||
'core/app/ttsFill': () => import('./icons/core/app/ttsFill.svg'),
|
||||
'core/app/type/httpPlugin': () => import('./icons/core/app/type/httpPlugin.svg'),
|
||||
@@ -180,6 +181,7 @@ export const iconPaths = {
|
||||
'core/app/variable/input': () => import('./icons/core/app/variable/input.svg'),
|
||||
'core/app/variable/select': () => import('./icons/core/app/variable/select.svg'),
|
||||
'core/app/variable/textarea': () => import('./icons/core/app/variable/textarea.svg'),
|
||||
'core/chat/QGFill': () => import('./icons/core/chat/QGFill.svg'),
|
||||
'core/chat/backText': () => import('./icons/core/chat/backText.svg'),
|
||||
'core/chat/cancelSpeak': () => import('./icons/core/chat/cancelSpeak.svg'),
|
||||
'core/chat/chatFill': () => import('./icons/core/chat/chatFill.svg'),
|
||||
@@ -196,15 +198,19 @@ export const iconPaths = {
|
||||
'core/chat/fileSelect': () => import('./icons/core/chat/fileSelect.svg'),
|
||||
'core/chat/finishSpeak': () => import('./icons/core/chat/finishSpeak.svg'),
|
||||
'core/chat/imgSelect': () => import('./icons/core/chat/imgSelect.svg'),
|
||||
'core/chat/QGFill': () => import('./icons/core/chat/QGFill.svg'),
|
||||
'core/chat/quoteFill': () => import('./icons/core/chat/quoteFill.svg'),
|
||||
'core/chat/quoteSign': () => import('./icons/core/chat/quoteSign.svg'),
|
||||
'core/chat/recordFill': () => import('./icons/core/chat/recordFill.svg'),
|
||||
'core/chat/sendFill': () => import('./icons/core/chat/sendFill.svg'),
|
||||
'core/chat/sendLight': () => import('./icons/core/chat/sendLight.svg'),
|
||||
'core/chat/setTopLight': () => import('./icons/core/chat/setTopLight.svg'),
|
||||
'core/chat/setting/share': () => import('./icons/core/chat/setting/share.svg'),
|
||||
'core/chat/sideLine': () => import('./icons/core/chat/sideLine.svg'),
|
||||
'core/chat/sidebar/expand': () => import('./icons/core/chat/sidebar/expand.svg'),
|
||||
'core/chat/sidebar/fold': () => import('./icons/core/chat/sidebar/fold.svg'),
|
||||
'core/chat/sidebar/home': () => import('./icons/core/chat/sidebar/home.svg'),
|
||||
'core/chat/sidebar/logout': () => import('./icons/core/chat/sidebar/logout.svg'),
|
||||
'core/chat/sidebar/menu': () => import('./icons/core/chat/sidebar/menu.svg'),
|
||||
'core/chat/speaking': () => import('./icons/core/chat/speaking.svg'),
|
||||
'core/chat/stopSpeech': () => import('./icons/core/chat/stopSpeech.svg'),
|
||||
'core/chat/think': () => import('./icons/core/chat/think.svg'),
|
||||
@@ -285,12 +291,13 @@ export const iconPaths = {
|
||||
'core/workflow/redo': () => import('./icons/core/workflow/redo.svg'),
|
||||
'core/workflow/revertVersion': () => import('./icons/core/workflow/revertVersion.svg'),
|
||||
'core/workflow/runError': () => import('./icons/core/workflow/runError.svg'),
|
||||
'core/workflow/running': () => import('./icons/core/workflow/running.svg'),
|
||||
'core/workflow/runSkip': () => import('./icons/core/workflow/runSkip.svg'),
|
||||
'core/workflow/runSuccess': () => import('./icons/core/workflow/runSuccess.svg'),
|
||||
'core/workflow/running': () => import('./icons/core/workflow/running.svg'),
|
||||
'core/workflow/template/BI': () => import('./icons/core/workflow/template/BI.svg'),
|
||||
'core/workflow/template/FileRead': () => import('./icons/core/workflow/template/FileRead.svg'),
|
||||
'core/workflow/template/aiChat': () => import('./icons/core/workflow/template/aiChat.svg'),
|
||||
'core/workflow/template/baseChart': () => import('./icons/core/workflow/template/baseChart.svg'),
|
||||
'core/workflow/template/BI': () => import('./icons/core/workflow/template/BI.svg'),
|
||||
'core/workflow/template/bing': () => import('./icons/core/workflow/template/bing.svg'),
|
||||
'core/workflow/template/bocha': () => import('./icons/core/workflow/template/bocha.svg'),
|
||||
'core/workflow/template/codeRun': () => import('./icons/core/workflow/template/codeRun.svg'),
|
||||
@@ -307,7 +314,6 @@ export const iconPaths = {
|
||||
'core/workflow/template/extractJson': () =>
|
||||
import('./icons/core/workflow/template/extractJson.svg'),
|
||||
'core/workflow/template/fetchUrl': () => import('./icons/core/workflow/template/fetchUrl.svg'),
|
||||
'core/workflow/template/FileRead': () => import('./icons/core/workflow/template/FileRead.svg'),
|
||||
'core/workflow/template/formInput': () => import('./icons/core/workflow/template/formInput.svg'),
|
||||
'core/workflow/template/getTime': () => import('./icons/core/workflow/template/getTime.svg'),
|
||||
'core/workflow/template/google': () => import('./icons/core/workflow/template/google.svg'),
|
||||
@@ -337,12 +343,12 @@ export const iconPaths = {
|
||||
'core/workflow/template/textConcat': () =>
|
||||
import('./icons/core/workflow/template/textConcat.svg'),
|
||||
'core/workflow/template/toolCall': () => import('./icons/core/workflow/template/toolCall.svg'),
|
||||
'core/workflow/template/toolParams': () =>
|
||||
import('./icons/core/workflow/template/toolParams.svg'),
|
||||
'core/workflow/template/toolkitActive': () =>
|
||||
import('./icons/core/workflow/template/toolkitActive.svg'),
|
||||
'core/workflow/template/toolkitInactive': () =>
|
||||
import('./icons/core/workflow/template/toolkitInactive.svg'),
|
||||
'core/workflow/template/toolParams': () =>
|
||||
import('./icons/core/workflow/template/toolParams.svg'),
|
||||
'core/workflow/template/userSelect': () =>
|
||||
import('./icons/core/workflow/template/userSelect.svg'),
|
||||
'core/workflow/template/variable': () => import('./icons/core/workflow/template/variable.svg'),
|
||||
@@ -387,6 +393,7 @@ export const iconPaths = {
|
||||
history: () => import('./icons/history.svg'),
|
||||
image: () => import('./icons/image.svg'),
|
||||
infoRounded: () => import('./icons/infoRounded.svg'),
|
||||
invisible: () => import('./icons/invisible.svg'),
|
||||
kbTest: () => import('./icons/kbTest.svg'),
|
||||
key: () => import('./icons/key.svg'),
|
||||
keyPrimary: () => import('./icons/keyPrimary.svg'),
|
||||
@@ -403,15 +410,17 @@ export const iconPaths = {
|
||||
'modal/selectSource': () => import('./icons/modal/selectSource.svg'),
|
||||
'modal/setting': () => import('./icons/modal/setting.svg'),
|
||||
'modal/teamPlans': () => import('./icons/modal/teamPlans.svg'),
|
||||
'model/BAAI': () => import('./icons/model/BAAI.svg'),
|
||||
'model/ai360': () => import('./icons/model/ai360.svg'),
|
||||
'model/alicloud': () => import('./icons/model/alicloud.svg'),
|
||||
'model/aws': () => import('./icons/model/aws.svg'),
|
||||
'model/azure': () => import('./icons/model/azure.svg'),
|
||||
'model/BAAI': () => import('./icons/model/BAAI.svg'),
|
||||
'model/baichuan': () => import('./icons/model/baichuan.svg'),
|
||||
'model/chatglm': () => import('./icons/model/chatglm.svg'),
|
||||
'model/claude': () => import('./icons/model/claude.svg'),
|
||||
'model/cloudflare': () => import('./icons/model/cloudflare.svg'),
|
||||
'model/cohere': () => import('./icons/model/cohere.svg'),
|
||||
'model/coze': () => import('./icons/model/coze.svg'),
|
||||
'model/deepseek': () => import('./icons/model/deepseek.svg'),
|
||||
'model/doubao': () => import('./icons/model/doubao.svg'),
|
||||
'model/ernie': () => import('./icons/model/ernie.svg'),
|
||||
@@ -428,13 +437,16 @@ export const iconPaths = {
|
||||
'model/mistral': () => import('./icons/model/mistral.svg'),
|
||||
'model/moka': () => import('./icons/model/moka.svg'),
|
||||
'model/moonshot': () => import('./icons/model/moonshot.svg'),
|
||||
'model/novita': () => import('./icons/model/novita.svg'),
|
||||
'model/ollama': () => import('./icons/model/ollama.svg'),
|
||||
'model/openai': () => import('./icons/model/openai.svg'),
|
||||
'model/openrouter': () => import('./icons/model/openrouter.svg'),
|
||||
'model/ppio': () => import('./icons/model/ppio.svg'),
|
||||
'model/qwen': () => import('./icons/model/qwen.svg'),
|
||||
'model/siliconflow': () => import('./icons/model/siliconflow.svg'),
|
||||
'model/sparkDesk': () => import('./icons/model/sparkDesk.svg'),
|
||||
'model/stepfun': () => import('./icons/model/stepfun.svg'),
|
||||
'model/vertexai': () => import('./icons/model/vertexai.svg'),
|
||||
'model/yi': () => import('./icons/model/yi.svg'),
|
||||
more: () => import('./icons/more.svg'),
|
||||
moreLine: () => import('./icons/moreLine.svg'),
|
||||
@@ -455,6 +467,7 @@ export const iconPaths = {
|
||||
'price/right': () => import('./icons/price/right.svg'),
|
||||
save: () => import('./icons/save.svg'),
|
||||
sliderTag: () => import('./icons/sliderTag.svg'),
|
||||
star: () => import('./icons/star.svg'),
|
||||
stop: () => import('./icons/stop.svg'),
|
||||
'support/account/coupon': () => import('./icons/support/account/coupon.svg'),
|
||||
'support/account/laf': () => import('./icons/support/account/laf.svg'),
|
||||
@@ -485,8 +498,8 @@ export const iconPaths = {
|
||||
'support/user/usersLight': () => import('./icons/support/user/usersLight.svg'),
|
||||
text: () => import('./icons/text.svg'),
|
||||
union: () => import('./icons/union.svg'),
|
||||
upload: () => import('./icons/upload.svg'),
|
||||
user: () => import('./icons/user.svg'),
|
||||
visible: () => import('./icons/visible.svg'),
|
||||
invisible: () => import('./icons/invisible.svg'),
|
||||
wx: () => import('./icons/wx.svg')
|
||||
};
|
||||
|
||||
4
packages/web/components/common/Icon/icons/chart.svg
Normal file
4
packages/web/components/common/Icon/icons/chart.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
|
||||
<path d="M2.9584 3.12996C2.9584 2.66973 2.58531 2.29663 2.12507 2.29663C1.66483 2.29663 1.29174 2.66973 1.29174 3.12996L1.29174 15.5642C1.29171 15.7738 1.29168 15.9802 1.30671 16.1554C1.32334 16.3492 1.36277 16.5786 1.48565 16.8082C1.65503 17.1248 1.92112 17.3748 2.23901 17.529C2.46599 17.6392 2.69137 17.6745 2.88572 17.6896C3.06445 17.7035 3.27645 17.7035 3.49883 17.7035L17.875 17.7035C18.3352 17.7035 18.7083 17.3304 18.7083 16.8701C18.7083 16.4099 18.3352 16.0368 17.875 16.0368H3.52506C3.26694 16.0368 3.12109 16.0362 3.01502 16.028C2.99523 16.0264 2.97985 16.0248 2.96822 16.0233L2.96728 16.0129C2.95912 15.9178 2.9584 15.7846 2.9584 15.5368V3.12996Z"/>
|
||||
<path d="M16.9187 5.51055C16.5893 5.20192 16.0721 5.21876 15.7634 5.54816L12.6451 8.87638L10.0927 7.55107L10.0622 7.53492C9.95289 7.47653 9.72586 7.35527 9.47286 7.33247C9.26053 7.31334 9.04688 7.34991 8.853 7.43856C8.622 7.54419 8.44823 7.73404 8.36455 7.82547L8.34115 7.85086L5.13814 11.2695C4.82951 11.5989 4.84635 12.1161 5.17575 12.4247C5.50516 12.7334 6.02239 12.7165 6.33102 12.3871L9.44934 9.0589L12.0018 10.3842L12.0322 10.4004C12.1416 10.4588 12.3686 10.58 12.6216 10.6028C12.8339 10.622 13.0476 10.5854 13.2414 10.4967C13.4725 10.3911 13.6462 10.2012 13.7299 10.1098L13.7533 10.0844L16.9563 6.66581C17.2649 6.33641 17.2481 5.81918 16.9187 5.51055Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.72906 1.85097L6.69706 1.85085C5.98971 1.84827 5.41291 1.84617 4.94529 1.88309C4.46218 1.92122 4.0274 2.00464 3.62397 2.21292C3.01771 2.52591 2.5262 3.01564 2.21101 3.62075C2.00144 4.02311 1.91634 4.45656 1.8764 4.93842C1.83778 5.40451 1.83778 5.97916 1.83779 6.68347V11.3274C1.83778 12.0263 1.83778 12.5969 1.87625 13.0602C1.91606 13.5396 2.0009 13.9708 2.20933 14.3721C2.52242 14.9748 3.01385 15.4662 3.61658 15.7793C4.01781 15.9877 4.44906 16.0726 4.92841 16.1124C5.39173 16.1509 5.96238 16.1508 6.66127 16.1508H11.3383C12.0372 16.1508 12.6078 16.1509 13.0711 16.1124C13.5505 16.0726 13.9817 15.9877 14.383 15.7793C14.9857 15.4662 15.4771 14.9748 15.7902 14.3721C15.9986 13.9708 16.0835 13.5396 16.1233 13.0602C16.1618 12.5969 16.1618 12.0263 16.1618 11.3274V9.50554C16.1618 9.09133 15.826 8.75554 15.4118 8.75554C14.9975 8.75554 14.6618 9.09133 14.6618 9.50554V11.2954C14.6618 12.0341 14.6612 12.5422 14.6284 12.9361C14.5965 13.321 14.5378 13.5291 14.4591 13.6806C14.2883 14.0094 14.0203 14.2774 13.6915 14.4482C13.5401 14.5269 13.3319 14.5856 12.947 14.6175C12.5531 14.6502 12.0449 14.6508 11.3063 14.6508H6.69329C5.9546 14.6508 5.44645 14.6502 5.05255 14.6175C4.66763 14.5856 4.45948 14.5269 4.30804 14.4482C3.97928 14.2774 3.71122 14.0094 3.54045 13.6806C3.46178 13.5291 3.40307 13.321 3.37111 12.9361C3.33839 12.5422 3.33779 12.034 3.33779 11.2953V6.71554C3.33779 5.97142 3.33839 5.45912 3.37128 5.06231C3.40345 4.67419 3.46254 4.46502 3.54137 4.31369C3.7136 3.98302 3.98078 3.71681 4.31207 3.54578C4.46337 3.46767 4.67323 3.40923 5.06333 3.37843C5.46189 3.34697 5.97654 3.34825 6.72362 3.35096C7.34582 3.35322 7.97156 3.35468 8.54741 3.35468C8.96163 3.35468 9.29741 3.0189 9.29741 2.60468C9.29741 2.19047 8.96163 1.85468 8.54741 1.85468C7.97394 1.85468 7.35012 1.85322 6.72906 1.85097ZM8.26244 8.66554C7.96954 8.95843 7.96954 9.4333 8.26244 9.7262C8.55533 10.0191 9.0302 10.0191 9.3231 9.72619L14.6618 4.38754V6.5054C14.6618 6.91962 14.9975 7.2554 15.4118 7.2554C15.826 7.2554 16.1618 6.91962 16.1618 6.5054V2.6698C16.1621 2.66102 16.1622 2.6522 16.1622 2.64334C16.1622 2.22913 15.8264 1.89334 15.4122 1.89334C15.4121 1.89334 15.4123 1.89334 15.4122 1.89334H11.5502C11.1359 1.89334 10.8002 2.22913 10.8002 2.64334C10.8002 3.05756 11.1359 3.39334 11.5502 3.39334H13.5346L8.26244 8.66554Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.167 8.77246C10.5026 8.38466 11.0886 8.34225 11.4766 8.67773L14.3096 11.127C14.559 11.3429 14.6642 11.6629 14.6191 11.9668C14.6208 12.2196 14.5221 12.4726 14.3223 12.6582L11.5889 15.1924C11.2107 15.543 10.6194 15.5214 10.2686 15.1436C9.91784 14.7654 9.94039 14.1741 10.3184 13.8232L12.3779 11.9121L10.2617 10.083C9.87373 9.74748 9.83152 9.16048 10.167 8.77246Z" fill="#667085"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.8086 2.53027C19.9789 2.6909 22.5 5.31226 22.5 8.52246V15.4785L22.4922 15.7871C22.3366 18.855 19.8766 21.3153 16.8086 21.4707L16.5 21.4785H7.5L7.19141 21.4707C4.12345 21.3153 1.66343 18.855 1.50781 15.7871L1.5 15.4785V8.52246C1.5 5.31226 4.02112 2.6909 7.19141 2.53027L7.5 2.52148H16.5L16.8086 2.53027ZM8.31055 19.4785H16.5C18.709 19.4785 20.4997 17.6874 20.5 15.4785V8.52246C20.5 6.31332 18.7091 4.52246 16.5 4.52246H8.31055V19.4785ZM6.4707 4.65625C4.82412 5.0935 3.59428 6.5545 3.50488 8.31641L3.5 8.52246V15.4785C3.50022 17.3315 4.76059 18.8896 6.4707 19.3438V4.65625Z" fill="#667085"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.9123 7.23183C11.2356 6.95242 11.724 6.98761 12.0036 7.31077C12.2829 7.63412 12.2479 8.12337 11.9246 8.40289L10.1611 9.92796L11.8774 11.5198C12.192 11.8122 12.2103 12.305 11.9181 12.62C11.6259 12.9347 11.1339 12.9531 10.8187 12.6615L8.54085 10.5497C8.37406 10.395 8.29205 10.1836 8.29346 9.97272C8.2559 9.7194 8.34339 9.45276 8.55143 9.27285L10.9123 7.23183Z" fill="#667085"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0072 2.10813C16.6489 2.24207 18.7498 4.42667 18.75 7.10162V12.8983L18.7435 13.1555C18.614 15.7122 16.5638 17.7622 14.0072 17.8918L13.75 17.8983H6.25L5.99284 17.8918C3.43607 17.7623 1.38599 15.7123 1.25651 13.1555L1.25 12.8983V7.10162C1.25019 4.42661 3.35104 2.24198 5.99284 2.10813L6.25 2.10162H13.75L14.0072 2.10813ZM6.92546 16.2317H13.75C15.5909 16.2316 17.0833 14.7392 17.0833 12.8983V7.10162C17.0831 5.26091 15.5907 3.7684 13.75 3.76829H6.92546V16.2317ZM5.39225 3.87978C4.02015 4.24418 2.99539 5.46178 2.92074 6.92991L2.91667 7.10162V12.8983C2.91667 14.4426 3.96708 15.7408 5.39225 16.1194V3.87978Z" fill="#667085"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.42432 9.62695C8.12696 9.62697 8.69653 10.1968 8.69678 10.8994C8.69678 11.6022 8.12711 12.1719 7.42432 12.1719C6.72151 12.1719 6.15186 11.6022 6.15186 10.8994C6.1521 10.1968 6.72166 9.62695 7.42432 9.62695Z" />
|
||||
<path d="M12.0005 9.62695C12.7031 9.62697 13.2727 10.1968 13.2729 10.8994C13.2729 11.6022 12.7033 12.1719 12.0005 12.1719C11.2977 12.1719 10.728 11.6022 10.728 10.8994C10.7283 10.1968 11.2978 9.62695 12.0005 9.62695Z" />
|
||||
<path d="M16.5767 9.62695C17.2793 9.62704 17.8489 10.1969 17.8491 10.8994C17.8491 11.6022 17.2794 12.1718 16.5767 12.1719C15.8738 12.1719 15.3042 11.6022 15.3042 10.8994C15.3044 10.1968 15.874 9.62695 16.5767 9.62695Z" />
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5005 2.42969C19.814 2.42995 22.5005 5.11614 22.5005 8.42969V13.3711C22.5002 16.6845 19.813 19.3711 16.4995 19.3711H11.939C11.7612 19.3711 11.5865 19.4189 11.4331 19.5088L8.19678 21.4053C7.56444 21.7758 6.74974 21.4982 6.47607 20.8184L5.97607 19.5732C5.86216 19.2897 5.62243 19.0779 5.3374 18.9678C3.09265 18.1 1.49977 15.9219 1.49951 13.3711V8.42969C1.49951 5.11598 4.18678 2.42969 7.50049 2.42969H16.5005ZM7.50049 4.42969C5.29093 4.42969 3.49951 6.22097 3.49951 8.42969V13.3711C3.49976 15.0681 4.55902 16.5233 6.05713 17.1025L6.36279 17.2061L6.82666 17.3428C7.11977 17.4296 7.35739 17.646 7.47119 17.9297L7.65088 18.3789C7.82678 18.8166 8.35027 18.9952 8.75732 18.7568L10.8901 17.5078C11.0434 17.4181 11.2184 17.3711 11.396 17.3711H16.4995C18.6396 17.3711 20.388 15.69 20.4956 13.5771L20.5005 13.3711V8.42969C20.5005 6.29002 18.8199 4.54206 16.7065 4.43457L16.5005 4.42969H7.50049Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6C2 5.44772 2.44772 5 3 5H21C21.5523 5 22 5.44772 22 6C22 6.55228 21.5523 7 21 7H3C2.44772 7 2 6.55228 2 6ZM2 12C2 11.4477 2.44772 11 3 11H21C21.5523 11 22 11.4477 22 12C22 12.5523 21.5523 13 21 13H3C2.44772 13 2 12.5523 2 12ZM2 18C2 17.4477 2.44772 17 3 17H21C21.5523 17 22 17.4477 22 18C22 18.5523 21.5523 19 21 19H3C2.44772 19 2 18.5523 2 18Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 470 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>AI360</title><path clip-rule="evenodd" d="M12 0h.018c1.473-.002 2.88.261 4.179.754C20.755 2.456 24 6.85 24 12c0 6.627-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm8.604 18.967A11.024 11.024 0 0023.07 12c0-1.717-.39-3.344-1.089-4.794a2.59 2.59 0 01-3.214.62 6.278 6.278 0 01-1.333-.992C16.283 5.73 15.109 4.66 13.696 3.9c-3.211-1.729-6.825-1.501-9.695.447A11.033 11.033 0 00.93 12c0 1.663.367 3.241 1.024 4.657.75-.973 2.131-1.346 3.232-.71.667.384 1.257.92 1.837 1.447l.176.16c1.365 1.234 2.794 2.355 4.558 2.965 3.053 1.053 6.356.437 8.847-1.552z" fill="url(#lobe-icons-ai360-fill-0)" fill-rule="evenodd"></path><path d="M5.643 10.312c-.83.11-1.401.766-1.408 1.618a1.715 1.715 0 001.45 1.72c.805.128 1.64-.426 1.87-1.26.046-.167.076-.338.106-.51.025-.14.05-.282.084-.42.318-1.317 1.237-1.95 2.788-1.93 1.086.013 1.318.271 1.68 1.855.017.076.043.151.07.226.26.714.976 1.17 1.67 1.065a1.647 1.647 0 001.38-1.438c.083-.729-.348-1.264-1.122-1.575-.34-.136-.664-.158-.995-.141-.726.037-1.121-.36-1.339-.977a3.359 3.359 0 01-.134-.65c-.014-.093-.027-.186-.043-.278-.156-.887-.835-1.51-1.669-1.532-.791-.02-1.464.551-1.665 1.418l-.06.27-.025.117c-.355 1.636-.974 2.205-2.638 2.422z" fill="url(#lobe-icons-ai360-fill-1)"></path><path d="M18.059 13.644c.989-.206 1.577-.838 1.592-1.697.015-.83-.624-1.582-1.46-1.724-.77-.13-1.599.383-1.844 1.18-.069.22-.117.448-.165.676-.06.29-.122.58-.225.854-.367.986-1.593 1.546-2.926 1.394-.824-.095-1.106-.446-1.342-1.674-.18-.938-.864-1.535-1.681-1.467-.85.07-1.515.829-1.468 1.673.05.892.678 1.44 1.705 1.489 1.375.064 1.75.396 1.926 1.787.067.531.267.967.685 1.288 1.02.783 2.407.208 2.66-1.108l.022-.114c.152-.796.3-1.577 1.04-2.101.36-.255.761-.326 1.166-.397.105-.019.21-.037.315-.06z" fill="url(#lobe-icons-ai360-fill-2)"></path><path d="M13.83 7.961a.755.755 0 11-1.51 0 .755.755 0 011.51 0z" fill="url(#lobe-icons-ai360-fill-3)"></path><path d="M10.809 16.678a.755.755 0 100-1.511.755.755 0 000 1.51z" fill="url(#lobe-icons-ai360-fill-4)"></path><defs><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai360-fill-0" x1="12" x2="12" y1="0" y2="24"><stop stop-color="#12B7FA"></stop><stop offset="1" stop-color="#006ffb"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai360-fill-1" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai360-fill-2" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai360-fill-3" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient><linearGradient gradientUnits="userSpaceOnUse" id="lobe-icons-ai360-fill-4" x1="11.943" x2="11.943" y1="6.085" y2="17.778"><stop stop-color="#006ffb"></stop><stop offset="1" stop-color="#12B7FA"></stop></linearGradient></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
1
packages/web/components/common/Icon/icons/model/coze.svg
Normal file
1
packages/web/components/common/Icon/icons/model/coze.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="currentColor" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Coze</title><path clip-rule="evenodd" d="M3.908 9.096A8.092 8.092 0 0111.998 1h.006c4.468 0 8.09 3.628 8.09 8.096v3.392h1.942c2.23 0 2.732 3.126.615 3.828l-2.556.85v1.466a1.947 1.947 0 01-2.818 1.742l-1.42-.707c-.067-.03-.149 0-.17.071-1.147 3.587-6.225 3.587-7.373 0a.123.123 0 00-.169-.07l-1.42.706c-1.29.65-2.817-.292-2.817-1.742v-1.466l-2.557-.85c-2.122-.697-1.614-3.828.615-3.828h1.942V9.096zm4.571 2.613a.784.784 0 00-.784.784v1.568a.784.784 0 101.568 0v-1.568a.784.784 0 00-.784-.784zm7.045.779a.784.784 0 100 1.568.784.784 0 000-1.568zm-6.186 3.415a.78.78 0 00.17.254 3.517 3.517 0 004.98 0 .782.782 0 10-1.106-1.107 1.958 1.958 0 01-2.767 0 .78.78 0 00-1.277.254.78.78 0 000 .6z"></path></svg>
|
||||
|
After Width: | Height: | Size: 866 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Novita AI</title><path clip-rule="evenodd" d="M9.167 4.17v5.665L0 19.003h9.167v-5.666l5.666 5.666H24L9.167 4.17z" fill="#23D57C" fill-rule="evenodd"></path></svg>
|
||||
|
After Width: | Height: | Size: 286 B |
@@ -0,0 +1 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" class="size-4" fill="currentColor" stroke="currentColor" aria-label="Logo"><g clip-path="url(#clip0_205_3)"><path d="M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945" stroke-width="90"></path><path d="M511 121.5L357.25 210.268L357.25 32.7324L511 121.5Z"></path><path d="M0 249C15 249 73 261.945 103 278.945C133 295.945 133 295.945 195 339.945C273.497 395.652 329 377 420 377" stroke-width="90"></path><path d="M508 376.445L354.25 287.678L354.25 465.213L508 376.445Z"></path></g><title style="display:none">OpenRouter</title><defs><clipPath id="clip0_205_3"><rect width="512" height="512" fill="white"></rect></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 773 B |
@@ -0,0 +1 @@
|
||||
<svg height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>VertexAI</title><path d="M11.995 20.216a1.892 1.892 0 100 3.785 1.892 1.892 0 000-3.785zm0 2.806a.927.927 0 11.927-.914.914.914 0 01-.927.914z" fill="#4285F4"></path><path clip-rule="evenodd" d="M21.687 14.144c.237.038.452.16.605.344a.978.978 0 01-.18 1.3l-8.24 6.082a1.892 1.892 0 00-1.147-1.508l8.28-6.08a.991.991 0 01.682-.138z" fill="#669DF6" fill-rule="evenodd"></path><path clip-rule="evenodd" d="M10.122 21.842l-8.217-6.066a.952.952 0 01-.206-1.287.978.978 0 011.287-.206l8.28 6.08a1.893 1.893 0 00-1.144 1.479z" fill="#AECBFA" fill-rule="evenodd"></path><path d="M4.273 4.475a.978.978 0 01-.965-.965V1.09a.978.978 0 111.943 0v2.42a.978.978 0 01-.978.965zM4.247 13.034a.978.978 0 100-1.956.978.978 0 000 1.956zM4.247 10.19a.978.978 0 100-1.956.978.978 0 000 1.956zM4.247 7.332a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#AECBFA"></path><path d="M19.718 7.307a.978.978 0 01-.965-.979v-2.42a.965.965 0 011.93 0v2.42a.964.964 0 01-.965.979zM19.743 13.047a.978.978 0 100-1.956.978.978 0 000 1.956zM19.743 10.151a.978.978 0 100-1.956.978.978 0 000 1.956zM19.743 2.068a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#4285F4"></path><path d="M11.995 15.917a.978.978 0 01-.965-.965v-2.459a.978.978 0 011.943 0v2.433a.976.976 0 01-.978.991zM11.995 18.762a.978.978 0 100-1.956.978.978 0 000 1.956zM11.995 10.64a.978.978 0 100-1.956.978.978 0 000 1.956zM11.995 7.783a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#669DF6"></path><path d="M15.856 10.177a.978.978 0 01-.965-.965v-2.42a.977.977 0 011.702-.763.979.979 0 01.241.763v2.42a.978.978 0 01-.978.965zM15.869 4.913a.978.978 0 100-1.956.978.978 0 000 1.956zM15.869 15.853a.978.978 0 100-1.956.978.978 0 000 1.956zM15.869 12.996a.978.978 0 100-1.956.978.978 0 000 1.956z" fill="#4285F4"></path><path d="M8.121 15.853a.978.978 0 100-1.956.978.978 0 000 1.956zM8.121 7.783a.978.978 0 100-1.956.978.978 0 000 1.956zM8.121 4.913a.978.978 0 100-1.957.978.978 0 000 1.957zM8.134 12.996a.978.978 0 01-.978-.94V9.611a.965.965 0 011.93 0v2.445a.966.966 0 01-.952.94z" fill="#AECBFA"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
22
packages/web/components/common/Icon/icons/star.svg
Normal file
22
packages/web/components/common/Icon/icons/star.svg
Normal file
@@ -0,0 +1,22 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7185 4.26976C16.312 2.62616 18.6365 2.62614 19.23 4.26976L21.8714 11.5851L29.1468 14.247C30.7805 14.8447 30.7805 17.1553 29.1468 17.753L21.8714 20.4149L19.23 27.7302C18.6365 29.3738 16.312 29.3739 15.7185 27.7302L13.0771 20.4149L5.80169 17.753C4.168 17.1553 4.16799 14.8447 5.80169 14.247L13.0771 11.5851L15.7185 4.26976ZM17.4742 7.25928L15.4584 12.842C15.2708 13.3615 14.8628 13.7712 14.3441 13.961L8.77134 16L14.3441 18.039C14.8628 18.2288 15.2708 18.6385 15.4584 19.158L17.4742 24.7407L19.4901 19.158C19.6776 18.6385 20.0857 18.2288 20.6044 18.039L26.1771 16L20.6044 13.961C20.0857 13.7712 19.6776 13.3615 19.4901 12.842L17.4742 7.25928Z" fill="url(#paint0_linear_24949_213)"/>
|
||||
<path d="M5.59038 3.55591C5.7622 3.09158 6.41894 3.09158 6.59075 3.55591L7.12584 5.00195C7.17985 5.14793 7.29495 5.26303 7.44094 5.31705L8.88697 5.85213C9.3513 6.02395 9.3513 6.68069 8.88697 6.8525L7.44094 7.38759C7.29495 7.4416 7.17985 7.5567 7.12584 7.70269L6.59075 9.14872C6.41894 9.61305 5.7622 9.61305 5.59038 9.14872L5.0553 7.70269C5.00128 7.5567 4.88618 7.44161 4.7402 7.38759L3.29416 6.8525C2.82983 6.68069 2.82983 6.02395 3.29416 5.85213L4.7402 5.31705C4.88618 5.26303 5.00128 5.14793 5.0553 5.00195L5.59038 3.55591Z" fill="url(#paint1_linear_24949_213)"/>
|
||||
<path d="M5.59038 22.5037C5.7622 22.0394 6.41894 22.0394 6.59075 22.5037L7.12584 23.9498C7.17985 24.0957 7.29495 24.2108 7.44094 24.2649L8.88697 24.7999C9.3513 24.9718 9.3513 25.6285 8.88697 25.8003L7.44094 26.3354C7.29495 26.3894 7.17985 26.5045 7.12584 26.6505L6.59075 28.0965C6.41894 28.5609 5.7622 28.5609 5.59038 28.0965L5.0553 26.6505C5.00128 26.5045 4.88618 26.3894 4.7402 26.3354L3.29416 25.8003C2.82983 25.6285 2.82983 24.9718 3.29416 24.7999L4.7402 24.2649C4.88618 24.2108 5.00128 24.0957 5.0553 23.9498L5.59038 22.5037Z" fill="url(#paint2_linear_24949_213)"/>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_24949_213" x1="16.659" y1="3.8788" x2="16.659" y2="28.1212" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#499DFF"/>
|
||||
<stop offset="0.432292" stop-color="#2770FF"/>
|
||||
<stop offset="1" stop-color="#6E80FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_24949_213" x1="16.659" y1="3.8788" x2="16.659" y2="28.1212" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#499DFF"/>
|
||||
<stop offset="0.432292" stop-color="#2770FF"/>
|
||||
<stop offset="1" stop-color="#6E80FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_24949_213" x1="16.659" y1="3.8788" x2="16.659" y2="28.1212" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#499DFF"/>
|
||||
<stop offset="0.432292" stop-color="#2770FF"/>
|
||||
<stop offset="1" stop-color="#6E80FF"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
3
packages/web/components/common/Icon/icons/upload.svg
Normal file
3
packages/web/components/common/Icon/icons/upload.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.8339 2.58684C12.2244 2.19631 12.8576 2.19631 13.2481 2.58684L17.2481 6.58684C17.6386 6.97736 17.6386 7.61053 17.2481 8.00105C16.8576 8.39158 16.2244 8.39158 15.8339 8.00105L13.541 5.70816V15.2939C13.541 15.8462 13.0933 16.2939 12.541 16.2939C11.9887 16.2939 11.541 15.8462 11.541 15.2939V5.70816L9.24812 8.00105C8.8576 8.39158 8.22443 8.39158 7.83391 8.00105C7.44339 7.61053 7.44339 6.97736 7.83391 6.58684L11.8339 2.58684ZM3.54102 11.2939C4.0933 11.2939 4.54102 11.7417 4.54102 12.2939V16.4939C4.54102 17.3505 4.54179 17.9328 4.57857 18.3829C4.61439 18.8213 4.67931 19.0455 4.759 19.2019C4.95075 19.5783 5.25671 19.8842 5.63303 20.076C5.78944 20.1556 6.01364 20.2206 6.45205 20.2564C6.90214 20.2932 7.48444 20.2939 8.34102 20.2939H16.741C17.5976 20.2939 18.1799 20.2932 18.63 20.2564C19.0684 20.2206 19.2926 20.1556 19.449 20.076C19.8253 19.8842 20.1313 19.5783 20.323 19.2019C20.4027 19.0455 20.4676 18.8213 20.5035 18.3829C20.5402 17.9328 20.541 17.3505 20.541 16.4939V12.2939C20.541 11.7417 20.9887 11.2939 21.541 11.2939C22.0933 11.2939 22.541 11.7417 22.541 12.2939V16.5353C22.541 17.3402 22.541 18.0046 22.4968 18.5458C22.4509 19.1079 22.3523 19.6246 22.105 20.1099C21.7215 20.8626 21.1096 21.4745 20.357 21.858C19.8716 22.1053 19.3549 22.2038 18.7928 22.2498C18.2517 22.294 17.5873 22.294 16.7823 22.2939H8.29969C7.49473 22.294 6.83038 22.294 6.28919 22.2498C5.72709 22.2038 5.21039 22.1053 4.72506 21.858C3.97241 21.4745 3.36048 20.8626 2.97699 20.1099C2.7297 19.6246 2.63114 19.1079 2.58521 18.5458C2.54099 18.0046 2.541 17.3402 2.54102 16.5352L2.54102 12.2939C2.54102 11.7417 2.98873 11.2939 3.54102 11.2939Z" fill="#3370FF"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -55,7 +55,7 @@ const MyNumberInput = (props: Props) => {
|
||||
}
|
||||
}}
|
||||
onChange={(e) => {
|
||||
const numE = e === '' ? '' : e.endsWith('.') ? e : Number(e);
|
||||
const numE = e === '' ? '' : e.endsWith('.') || /^\d+\.0+$/.test(e) ? e : Number(e);
|
||||
if (onChange) {
|
||||
if (numE === '') {
|
||||
// @ts-ignore
|
||||
|
||||
@@ -23,6 +23,7 @@ export interface MyModalProps extends ModalContentProps {
|
||||
onClose?: () => void;
|
||||
closeOnOverlayClick?: boolean;
|
||||
size?: 'md' | 'lg';
|
||||
showCloseButton?: boolean;
|
||||
}
|
||||
|
||||
const MyModal = ({
|
||||
@@ -38,6 +39,7 @@ const MyModal = ({
|
||||
closeOnOverlayClick = true,
|
||||
iconColor,
|
||||
size = 'md',
|
||||
showCloseButton = true,
|
||||
...props
|
||||
}: MyModalProps) => {
|
||||
const { isPc } = useSystem();
|
||||
@@ -65,7 +67,7 @@ const MyModal = ({
|
||||
boxShadow={'7'}
|
||||
{...props}
|
||||
>
|
||||
{!title && onClose && <ModalCloseButton zIndex={1} />}
|
||||
{!title && onClose && showCloseButton && <ModalCloseButton zIndex={1} />}
|
||||
{!!title && (
|
||||
<ModalHeader
|
||||
display={'flex'}
|
||||
|
||||
@@ -162,7 +162,8 @@ const MySelect = <T = any,>(
|
||||
: {
|
||||
color: 'myGray.900'
|
||||
})}
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (value !== item.value) {
|
||||
onClickChange(item.value);
|
||||
}
|
||||
@@ -172,7 +173,7 @@ const MySelect = <T = any,>(
|
||||
display={'block'}
|
||||
mb={0.5}
|
||||
>
|
||||
<Flex alignItems={'center'} fontWeight={value === item.value ? '600' : 'normal'}>
|
||||
<Flex alignItems={'center'}>
|
||||
{item.icon && (
|
||||
<Avatar mr={2} src={item.icon as any} w={item.iconSize ?? '1rem'} />
|
||||
)}
|
||||
@@ -303,6 +304,9 @@ const MySelect = <T = any,>(
|
||||
zIndex={99}
|
||||
maxH={'45vh'}
|
||||
overflowY={'auto'}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
{ScrollData ? <ScrollData>{ListRender}</ScrollData> : ListRender}
|
||||
</MenuList>
|
||||
|
||||
226
packages/web/components/common/charts/AreaChartComponent.tsx
Normal file
226
packages/web/components/common/charts/AreaChartComponent.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { Box, HStack, useTheme } from '@chakra-ui/react';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
type TooltipProps
|
||||
} from 'recharts';
|
||||
import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
||||
import { formatNumber } from '@fastgpt/global/common/math/tools';
|
||||
import FillRowTabs from '../Tabs/FillRowTabs';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { cloneDeep } from 'lodash';
|
||||
|
||||
type AreaConfig = {
|
||||
dataKey: string;
|
||||
name: string;
|
||||
color: string;
|
||||
gradient?: boolean;
|
||||
};
|
||||
|
||||
type TooltipItem = {
|
||||
label: string;
|
||||
dataKey: string;
|
||||
color: string;
|
||||
formatter?: (value: number) => string;
|
||||
customValue?: (data: Record<string, any>) => number;
|
||||
};
|
||||
|
||||
type AreaChartComponentProps = {
|
||||
data: Record<string, any>[];
|
||||
title: string;
|
||||
HeaderLeftChildren?: React.ReactNode;
|
||||
lines: AreaConfig[];
|
||||
tooltipItems?: TooltipItem[];
|
||||
|
||||
defaultDisplayMode?: 'incremental' | 'cumulative';
|
||||
enableIncremental?: boolean;
|
||||
enableCumulative?: boolean;
|
||||
enableTooltip?: boolean;
|
||||
startDateValue?: number;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({
|
||||
active,
|
||||
payload,
|
||||
tooltipItems
|
||||
}: TooltipProps<ValueType, NameType> & { tooltipItems?: TooltipItem[] }) => {
|
||||
const data = payload?.[0]?.payload;
|
||||
|
||||
if (!active || !data || !tooltipItems) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box bg="white" p={3} borderRadius="md" border="base" boxShadow="sm">
|
||||
<Box fontSize="sm" color="myGray.900" mb={2}>
|
||||
{data.xLabel || data.x}
|
||||
</Box>
|
||||
{tooltipItems.map((item, index) => {
|
||||
const value = item.customValue ? item.customValue(data) : data[item.dataKey];
|
||||
const displayValue = item.formatter ? item.formatter(value) : formatNumber(value);
|
||||
|
||||
return (
|
||||
<HStack key={index} fontSize="sm" _notLast={{ mb: 1 }}>
|
||||
<Box w={2} h={2} borderRadius="full" bg={item.color} />
|
||||
<Box>{item.label}</Box>
|
||||
<Box>{displayValue.toLocaleString()}</Box>
|
||||
</HStack>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const AreaChartComponent = ({
|
||||
data,
|
||||
title,
|
||||
HeaderLeftChildren,
|
||||
lines,
|
||||
tooltipItems,
|
||||
defaultDisplayMode = 'incremental',
|
||||
enableIncremental = true,
|
||||
enableCumulative = true,
|
||||
startDateValue = 0
|
||||
}: AreaChartComponentProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const [displayMode, setDisplayMode] = useState<'incremental' | 'cumulative'>(defaultDisplayMode);
|
||||
|
||||
// Tab list constant
|
||||
const tabList = useMemo(
|
||||
() => [
|
||||
...(enableIncremental
|
||||
? [{ label: t('common:chart_mode_incremental'), value: 'incremental' as const }]
|
||||
: []),
|
||||
...(enableCumulative
|
||||
? [{ label: t('common:chart_mode_cumulative'), value: 'cumulative' as const }]
|
||||
: [])
|
||||
],
|
||||
[enableCumulative, enableIncremental, t]
|
||||
);
|
||||
|
||||
// Y-axis number formatter function
|
||||
const formatYAxisNumber = useCallback((value: number): string => {
|
||||
if (value >= 1000000) {
|
||||
return value / 1000000 + 'M';
|
||||
} else if (value >= 1000) {
|
||||
return value / 1000 + 'K';
|
||||
}
|
||||
return value.toString();
|
||||
}, []);
|
||||
|
||||
// Process data based on display mode
|
||||
const processedData = useMemo(() => {
|
||||
if (displayMode === 'incremental') {
|
||||
return data;
|
||||
}
|
||||
|
||||
// Cumulative mode: accumulate values for each line's dataKey
|
||||
const cloneData = cloneDeep(data);
|
||||
|
||||
const dataKeys = lines.map((item) => item.dataKey);
|
||||
|
||||
return cloneData.map((item, index) => {
|
||||
if (index === 0) {
|
||||
item[dataKeys[0]] = startDateValue + item[dataKeys[0]];
|
||||
return item;
|
||||
}
|
||||
|
||||
dataKeys.forEach((key) => {
|
||||
if (typeof item[key] === 'number') {
|
||||
item[key] += cloneData[index - 1][key];
|
||||
}
|
||||
});
|
||||
|
||||
return item;
|
||||
});
|
||||
}, [displayMode, data, lines, startDateValue]);
|
||||
|
||||
// Generate gradient definitions
|
||||
const gradientDefs = useMemo(
|
||||
() => (
|
||||
<defs>
|
||||
{lines.map((line) => (
|
||||
<linearGradient
|
||||
key={`gradient-${line.color}`}
|
||||
id={`gradient-${line.color}`}
|
||||
x1="0"
|
||||
y1="0"
|
||||
x2="0"
|
||||
y2="1"
|
||||
>
|
||||
<stop offset="0%" stopColor={line.color} stopOpacity={0.25} />
|
||||
<stop offset="100%" stopColor={line.color} stopOpacity={0.01} />
|
||||
</linearGradient>
|
||||
))}
|
||||
</defs>
|
||||
),
|
||||
[lines]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HStack mb={4} justifyContent={'space-between'} alignItems={'flex-start'}>
|
||||
<Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
|
||||
{title}
|
||||
</Box>
|
||||
<HStack spacing={2}>
|
||||
{HeaderLeftChildren}
|
||||
{tabList.length > 1 && (
|
||||
<FillRowTabs<'incremental' | 'cumulative'>
|
||||
list={tabList}
|
||||
py={0.5}
|
||||
px={2}
|
||||
value={displayMode}
|
||||
onChange={setDisplayMode}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
<ResponsiveContainer width="100%" height={'100%'}>
|
||||
<AreaChart
|
||||
data={processedData}
|
||||
margin={{ top: 5, right: 30, left: 0, bottom: HeaderLeftChildren ? 20 : 15 }}
|
||||
>
|
||||
{gradientDefs}
|
||||
<XAxis
|
||||
dataKey="x"
|
||||
tickMargin={10}
|
||||
tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickSize={0}
|
||||
tickMargin={10}
|
||||
tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={formatYAxisNumber}
|
||||
/>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
|
||||
{tooltipItems && <Tooltip content={<CustomTooltip tooltipItems={tooltipItems} />} />}
|
||||
{lines.map((line, index) => (
|
||||
<Area
|
||||
key={line.dataKey}
|
||||
type="monotone"
|
||||
name={line.name}
|
||||
dataKey={line.dataKey}
|
||||
stroke={line.color}
|
||||
strokeWidth={2}
|
||||
fill={`url(#gradient-${line.color})`}
|
||||
dot={false}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AreaChartComponent;
|
||||
152
packages/web/components/common/charts/BarChartComponent.tsx
Normal file
152
packages/web/components/common/charts/BarChartComponent.tsx
Normal file
@@ -0,0 +1,152 @@
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Box, Flex, HStack, useTheme } from '@chakra-ui/react';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
type TooltipProps,
|
||||
BarChart,
|
||||
Bar
|
||||
} from 'recharts';
|
||||
import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
||||
import { formatNumber } from '@fastgpt/global/common/math/tools';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import QuestionTip from '../MyTooltip/QuestionTip';
|
||||
|
||||
type BarConfig = {
|
||||
dataKey: string;
|
||||
name: string;
|
||||
color: string;
|
||||
stackId?: string;
|
||||
};
|
||||
|
||||
type TooltipItem = {
|
||||
label: string;
|
||||
dataKey: string;
|
||||
color: string;
|
||||
formatter?: (value: number) => string;
|
||||
customValue?: (data: Record<string, any>) => number;
|
||||
};
|
||||
|
||||
type BarChartComponentProps = {
|
||||
data: Record<string, any>[];
|
||||
title: string;
|
||||
description?: string;
|
||||
HeaderRightChildren?: React.ReactNode;
|
||||
bars: BarConfig[];
|
||||
tooltipItems?: TooltipItem[];
|
||||
blur?: boolean;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({
|
||||
active,
|
||||
payload,
|
||||
tooltipItems
|
||||
}: TooltipProps<ValueType, NameType> & { tooltipItems?: TooltipItem[] }) => {
|
||||
const data = payload?.[0]?.payload;
|
||||
|
||||
if (!active || !data || !tooltipItems) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box bg="white" p={3} borderRadius="md" border="base" boxShadow="sm">
|
||||
<Box fontSize="sm" color="myGray.900" mb={2}>
|
||||
{data.xLabel || data.x}
|
||||
</Box>
|
||||
{tooltipItems.map((item, index) => {
|
||||
const value = item.customValue ? item.customValue(data) : data[item.dataKey];
|
||||
const displayValue = item.formatter ? item.formatter(value) : formatNumber(value);
|
||||
|
||||
return (
|
||||
<HStack key={index} fontSize="sm" _notLast={{ mb: 1 }}>
|
||||
<Box w={2} h={2} borderRadius="full" bg={item.color} />
|
||||
<Box>{item.label}</Box>
|
||||
<Box>{displayValue.toLocaleString()}</Box>
|
||||
</HStack>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const BarChartComponent = ({
|
||||
data,
|
||||
title,
|
||||
description,
|
||||
HeaderRightChildren,
|
||||
bars,
|
||||
tooltipItems,
|
||||
blur = false
|
||||
}: BarChartComponentProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Y-axis number formatter function
|
||||
const formatYAxisNumber = useCallback((value: number): string => {
|
||||
if (value >= 1000000) {
|
||||
return value / 1000000 + 'M';
|
||||
} else if (value >= 1000) {
|
||||
return value / 1000 + 'K';
|
||||
}
|
||||
return value.toString();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex mb={4} h={6}>
|
||||
<Flex flex={1} alignItems={'center'} gap={1}>
|
||||
<Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
|
||||
{title}
|
||||
</Box>
|
||||
<QuestionTip label={description} />
|
||||
</Flex>
|
||||
<Box filter={blur ? 'blur(7.5px)' : 'none'} pointerEvents={blur ? 'none' : 'auto'}>
|
||||
{HeaderRightChildren}
|
||||
</Box>
|
||||
</Flex>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={'100%'}
|
||||
style={{ filter: blur ? 'blur(7.5px)' : 'none' }}
|
||||
>
|
||||
<BarChart
|
||||
data={data}
|
||||
margin={{ top: 5, right: 30, left: 0, bottom: HeaderRightChildren ? 20 : 15 }}
|
||||
>
|
||||
<XAxis
|
||||
dataKey="x"
|
||||
tickMargin={10}
|
||||
tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
axisLine={false}
|
||||
tickSize={0}
|
||||
tickMargin={10}
|
||||
tick={{ fontSize: '12px', color: theme?.colors?.myGray['500'], fontWeight: '500' }}
|
||||
interval="preserveStartEnd"
|
||||
tickFormatter={formatYAxisNumber}
|
||||
/>
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
|
||||
{tooltipItems && <Tooltip content={<CustomTooltip tooltipItems={tooltipItems} />} />}
|
||||
{bars.map((bar) => (
|
||||
<Bar
|
||||
key={bar.dataKey}
|
||||
name={bar.name}
|
||||
dataKey={bar.dataKey}
|
||||
fill={bar.color}
|
||||
stackId={bar.stackId}
|
||||
radius={[2, 2, 0, 0]}
|
||||
maxBarSize={30}
|
||||
/>
|
||||
))}
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default BarChartComponent;
|
||||
@@ -1,20 +1,20 @@
|
||||
import React, { useCallback, useMemo, useState } from 'react';
|
||||
import { Box, HStack, useTheme } from '@chakra-ui/react';
|
||||
import React, { useCallback, useMemo } from 'react';
|
||||
import { Box, Flex, HStack, useTheme } from '@chakra-ui/react';
|
||||
import {
|
||||
ResponsiveContainer,
|
||||
AreaChart,
|
||||
Area,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
type TooltipProps
|
||||
type TooltipProps,
|
||||
LineChart,
|
||||
Line,
|
||||
ReferenceLine
|
||||
} from 'recharts';
|
||||
import { type NameType, type ValueType } from 'recharts/types/component/DefaultTooltipContent';
|
||||
import { formatNumber } from '@fastgpt/global/common/math/tools';
|
||||
import FillRowTabs from '../Tabs/FillRowTabs';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import QuestionTip from '../MyTooltip/QuestionTip';
|
||||
|
||||
type LineConfig = {
|
||||
dataKey: string;
|
||||
@@ -34,15 +34,13 @@ type TooltipItem = {
|
||||
type LineChartComponentProps = {
|
||||
data: Record<string, any>[];
|
||||
title: string;
|
||||
HeaderLeftChildren?: React.ReactNode;
|
||||
description?: string;
|
||||
HeaderRightChildren?: React.ReactNode;
|
||||
lines: LineConfig[];
|
||||
tooltipItems?: TooltipItem[];
|
||||
|
||||
defaultDisplayMode?: 'incremental' | 'cumulative';
|
||||
enableIncremental?: boolean;
|
||||
enableCumulative?: boolean;
|
||||
enableTooltip?: boolean;
|
||||
startDateValue?: number;
|
||||
showAverage?: boolean;
|
||||
averageKey?: string;
|
||||
blur?: boolean;
|
||||
};
|
||||
|
||||
const CustomTooltip = ({
|
||||
@@ -57,8 +55,15 @@ const CustomTooltip = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<Box bg="white" p={3} borderRadius="md" border="base" boxShadow="sm">
|
||||
<Box fontSize="sm" color="myGray.900" mb={2}>
|
||||
<Box
|
||||
bg="white"
|
||||
p={3}
|
||||
borderRadius="md"
|
||||
border="base"
|
||||
boxShadow="sm"
|
||||
{...(tooltipItems.length > 8 ? { position: 'relative', top: '-30px' } : {})}
|
||||
>
|
||||
<Box fontSize="sm" color="myGray.900" mb={tooltipItems.length > 5 ? 1 : 2}>
|
||||
{data.xLabel || data.x}
|
||||
</Box>
|
||||
{tooltipItems.map((item, index) => {
|
||||
@@ -66,7 +71,7 @@ const CustomTooltip = ({
|
||||
const displayValue = item.formatter ? item.formatter(value) : formatNumber(value);
|
||||
|
||||
return (
|
||||
<HStack key={index} fontSize="sm" _notLast={{ mb: 1 }}>
|
||||
<HStack key={index} fontSize="sm" _notLast={{ mb: tooltipItems.length > 5 ? 0 : 1 }}>
|
||||
<Box w={2} h={2} borderRadius="full" bg={item.color} />
|
||||
<Box>{item.label}</Box>
|
||||
<Box>{displayValue.toLocaleString()}</Box>
|
||||
@@ -80,30 +85,15 @@ const CustomTooltip = ({
|
||||
const LineChartComponent = ({
|
||||
data,
|
||||
title,
|
||||
HeaderLeftChildren,
|
||||
description,
|
||||
HeaderRightChildren,
|
||||
lines,
|
||||
tooltipItems,
|
||||
defaultDisplayMode = 'incremental',
|
||||
enableIncremental = true,
|
||||
enableCumulative = true,
|
||||
startDateValue = 0
|
||||
showAverage = false,
|
||||
averageKey,
|
||||
blur = false
|
||||
}: LineChartComponentProps) => {
|
||||
const theme = useTheme();
|
||||
const { t } = useTranslation();
|
||||
const [displayMode, setDisplayMode] = useState<'incremental' | 'cumulative'>(defaultDisplayMode);
|
||||
|
||||
// Tab list constant
|
||||
const tabList = useMemo(
|
||||
() => [
|
||||
...(enableIncremental
|
||||
? [{ label: t('common:chart_mode_incremental'), value: 'incremental' as const }]
|
||||
: []),
|
||||
...(enableCumulative
|
||||
? [{ label: t('common:chart_mode_cumulative'), value: 'cumulative' as const }]
|
||||
: [])
|
||||
],
|
||||
[enableCumulative, enableIncremental, t]
|
||||
);
|
||||
|
||||
// Y-axis number formatter function
|
||||
const formatYAxisNumber = useCallback((value: number): string => {
|
||||
@@ -115,32 +105,13 @@ const LineChartComponent = ({
|
||||
return value.toString();
|
||||
}, []);
|
||||
|
||||
// Process data based on display mode
|
||||
const processedData = useMemo(() => {
|
||||
if (displayMode === 'incremental') {
|
||||
return data;
|
||||
}
|
||||
// Calculate average value
|
||||
const averageValue = useMemo(() => {
|
||||
if (!showAverage || !averageKey || data.length === 0) return null;
|
||||
|
||||
// Cumulative mode: accumulate values for each line's dataKey
|
||||
const cloneData = cloneDeep(data);
|
||||
|
||||
const dataKeys = lines.map((item) => item.dataKey);
|
||||
|
||||
return cloneData.map((item, index) => {
|
||||
if (index === 0) {
|
||||
item[dataKeys[0]] = startDateValue + item[dataKeys[0]];
|
||||
return item;
|
||||
}
|
||||
|
||||
dataKeys.forEach((key) => {
|
||||
if (typeof item[key] === 'number') {
|
||||
item[key] += cloneData[index - 1][key];
|
||||
}
|
||||
});
|
||||
|
||||
return item;
|
||||
});
|
||||
}, [displayMode, data, lines, startDateValue]);
|
||||
const sum = data.reduce((acc, item) => acc + (item[averageKey] || 0), 0);
|
||||
return sum / data.length;
|
||||
}, [showAverage, averageKey, data]);
|
||||
|
||||
// Generate gradient definitions
|
||||
const gradientDefs = useMemo(
|
||||
@@ -165,28 +136,49 @@ const LineChartComponent = ({
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<HStack mb={4} justifyContent={'space-between'} alignItems={'flex-start'}>
|
||||
<Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
|
||||
{title}
|
||||
<Box
|
||||
onMouseEnter={(e) => {
|
||||
const chartElement = e.currentTarget.querySelector('.recharts-wrapper');
|
||||
if (chartElement && showAverage && averageValue !== null) {
|
||||
chartElement.classList.add('show-average');
|
||||
}
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
const chartElement = e.currentTarget.querySelector('.recharts-wrapper');
|
||||
if (chartElement) {
|
||||
chartElement.classList.remove('show-average');
|
||||
}
|
||||
}}
|
||||
h="100%"
|
||||
>
|
||||
<style jsx global>{`
|
||||
.recharts-wrapper .average-line {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.recharts-wrapper.show-average .average-line {
|
||||
opacity: 1;
|
||||
}
|
||||
`}</style>
|
||||
<Flex mb={4} h={6}>
|
||||
<Flex flex={1} alignItems={'center'} gap={1}>
|
||||
<Box fontSize={'sm'} color={'myGray.900'} fontWeight={'medium'}>
|
||||
{title}
|
||||
</Box>
|
||||
<QuestionTip label={description} />
|
||||
</Flex>
|
||||
<Box filter={blur ? 'blur(7.5px)' : 'none'} pointerEvents={blur ? 'none' : 'auto'}>
|
||||
{HeaderRightChildren}
|
||||
</Box>
|
||||
<HStack spacing={2}>
|
||||
{HeaderLeftChildren}
|
||||
{tabList.length > 1 && (
|
||||
<FillRowTabs<'incremental' | 'cumulative'>
|
||||
list={tabList}
|
||||
py={0.5}
|
||||
px={2}
|
||||
value={displayMode}
|
||||
onChange={setDisplayMode}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</HStack>
|
||||
<ResponsiveContainer width="100%" height={'100%'}>
|
||||
<AreaChart
|
||||
data={processedData}
|
||||
margin={{ top: 5, right: 30, left: 0, bottom: HeaderLeftChildren ? 20 : 15 }}
|
||||
</Flex>
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={'100%'}
|
||||
style={{ filter: blur ? 'blur(7.5px)' : 'none' }}
|
||||
>
|
||||
<LineChart
|
||||
data={data}
|
||||
margin={{ top: 5, right: 30, left: 0, bottom: HeaderRightChildren ? 20 : 15 }}
|
||||
>
|
||||
{gradientDefs}
|
||||
<XAxis
|
||||
@@ -206,9 +198,8 @@ const LineChartComponent = ({
|
||||
<CartesianGrid strokeDasharray="3 3" horizontal={true} vertical={false} />
|
||||
{tooltipItems && <Tooltip content={<CustomTooltip tooltipItems={tooltipItems} />} />}
|
||||
{lines.map((line, index) => (
|
||||
<Area
|
||||
<Line
|
||||
key={line.dataKey}
|
||||
type="monotone"
|
||||
name={line.name}
|
||||
dataKey={line.dataKey}
|
||||
stroke={line.color}
|
||||
@@ -217,9 +208,24 @@ const LineChartComponent = ({
|
||||
dot={false}
|
||||
/>
|
||||
))}
|
||||
</AreaChart>
|
||||
{showAverage && averageValue !== null && (
|
||||
<ReferenceLine
|
||||
y={averageValue}
|
||||
stroke={theme.colors.primary?.['400']}
|
||||
strokeDasharray="5 5"
|
||||
strokeWidth={1}
|
||||
className="average-line"
|
||||
label={{
|
||||
value: `${formatNumber(averageValue)}`,
|
||||
position: 'insideTopRight',
|
||||
fill: theme.colors.primary?.['400'],
|
||||
fontSize: 12
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user