AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 18:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add ECharts feature ( #6385 ) (#6961)

Browse Source
This commit is contained in:
zhujinle 2024-08-13 17:35:12 +08:00 committed by GitHub
parent 9381c08c43
commit 4423710a13
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
web/app/components/base/markdown.tsx
View File

@ -1,4 +1,5 @@
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import ReactEcharts from 'echarts-for-react'
import 'katex/dist/katex.min.css' import 'katex/dist/katex.min.css'
import RemarkMath from 'remark-math' import RemarkMath from 'remark-math'
import RemarkBreaks from 'remark-breaks' import RemarkBreaks from 'remark-breaks'
@ -30,6 +31,7 @@ const capitalizationLanguageNameMap: Record<string, string> = {
mermaid: 'Mermaid', mermaid: 'Mermaid',
markdown: 'MarkDown', markdown: 'MarkDown',
makefile: 'MakeFile', makefile: 'MakeFile',
echarts: 'ECharts',
} }
const getCorrectCapitalizationLanguageName = (language: string) => { const getCorrectCapitalizationLanguageName = (language: string) => {
if (!language) if (!language)
@ -107,6 +109,14 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
const match = /language-(\w+)/.exec(className || '') const match = /language-(\w+)/.exec(className || '')
const language = match?.[1] const language = match?.[1]
const languageShowName = getCorrectCapitalizationLanguageName(language || '') const languageShowName = getCorrectCapitalizationLanguageName(language || '')
let chartData = JSON.parse(String('{"title":{"text":"Something went wrong."}}').replace(/\n$/, ''))
if (language === 'echarts') {
try {
chartData = JSON.parse(String(children).replace(/\n$/, ''))
}
catch (error) {
}
}
// Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary // Use `useMemo` to ensure that `SyntaxHighlighter` only re-renders when necessary
return useMemo(() => { return useMemo(() => {
@ -136,19 +146,25 @@ const CodeBlock: CodeComponent = memo(({ inline, className, children, ...props }
</div> </div>
{(language === 'mermaid' && isSVG) {(language === 'mermaid' && isSVG)
? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />) ? (<Flowchart PrimitiveCode={String(children).replace(/\n$/, '')} />)
: (<SyntaxHighlighter : (
{...props} (language === 'echarts')
style={atelierHeathLight} ? (<div style={{ minHeight: '250px', minWidth: '250px' }}><ReactEcharts
customStyle={{ option={chartData}
paddingLeft: 12, >
backgroundColor: '#fff', </ReactEcharts></div>)
}} : (<SyntaxHighlighter
language={match[1]} {...props}
showLineNumbers style={atelierHeathLight}
PreTag="div" customStyle={{
> paddingLeft: 12,
{String(children).replace(/\n$/, '')} backgroundColor: '#fff',
</SyntaxHighlighter>)} }}
language={match[1]}
showLineNumbers
PreTag="div"
>
{String(children).replace(/\n$/, '')}
</SyntaxHighlighter>))}
</div> </div>
) )
: ( : (