fix: lint

pull/20101/head
crazywoola 1 year ago
parent f9d5aa5ca8
commit b4f12315d2

@ -141,10 +141,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
const handleResize = () => { const handleResize = () => {
// This gets the echarts instance from the component // This gets the echarts instance from the component
const instance = echartsRef.current?.getEchartsInstance?.() const instance = echartsRef.current?.getEchartsInstance?.()
if (instance) { if (instance)
instance.resize() instance.resize()
} }
}
window.addEventListener('resize', handleResize) window.addEventListener('resize', handleResize)
@ -179,85 +178,87 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
// Detect if this is historical data (already complete) // Detect if this is historical data (already complete)
// Historical data typically comes as a complete code block with complete JSON // Historical data typically comes as a complete code block with complete JSON
const isCompleteJson = const isCompleteJson
(trimmedContent.startsWith('{') && trimmedContent.endsWith('}') && = (trimmedContent.startsWith('{') && trimmedContent.endsWith('}')
trimmedContent.split('{').length === trimmedContent.split('}').length) || && trimmedContent.split('{').length === trimmedContent.split('}').length)
(trimmedContent.startsWith('[') && trimmedContent.endsWith(']') && || (trimmedContent.startsWith('[') && trimmedContent.endsWith(']')
trimmedContent.split('[').length === trimmedContent.split(']').length); && trimmedContent.split('[').length === trimmedContent.split(']').length)
// If the JSON structure looks complete, try to parse it right away // If the JSON structure looks complete, try to parse it right away
if (isCompleteJson && !processedRef.current) { if (isCompleteJson && !processedRef.current) {
try { try {
const parsed = JSON.parse(trimmedContent); const parsed = JSON.parse(trimmedContent)
if (typeof parsed === 'object' && parsed !== null) { if (typeof parsed === 'object' && parsed !== null) {
setFinalChartOption(parsed); setFinalChartOption(parsed)
setChartState('success'); setChartState('success')
processedRef.current = true; processedRef.current = true
return; return
}
} }
} catch { catch {
try { try {
// eslint-disable-next-line no-new-func, sonarjs/code-eval // eslint-disable-next-line no-new-func, sonarjs/code-eval
const result = new Function(`return ${trimmedContent}`)(); const result = new Function(`return ${trimmedContent}`)()
if (typeof result === 'object' && result !== null) { if (typeof result === 'object' && result !== null) {
setFinalChartOption(result); setFinalChartOption(result)
setChartState('success'); setChartState('success')
processedRef.current = true; processedRef.current = true
return; return
}
} }
} catch { catch {
// If we have a complete JSON structure but it doesn't parse, // If we have a complete JSON structure but it doesn't parse,
// it's likely an error rather than incomplete data // it's likely an error rather than incomplete data
setChartState('error'); setChartState('error')
processedRef.current = true; processedRef.current = true
return; return
} }
} }
} }
// If we get here, either the JSON isn't complete yet, or we failed to parse it // If we get here, either the JSON isn't complete yet, or we failed to parse it
// Check more conditions for streaming data // Check more conditions for streaming data
const isIncomplete = const isIncomplete
trimmedContent.length < 5 || = trimmedContent.length < 5
(trimmedContent.startsWith('{') && || (trimmedContent.startsWith('{')
(!trimmedContent.endsWith('}') || && (!trimmedContent.endsWith('}')
trimmedContent.split('{').length !== trimmedContent.split('}').length)) || || trimmedContent.split('{').length !== trimmedContent.split('}').length))
(trimmedContent.startsWith('[') && || (trimmedContent.startsWith('[')
(!trimmedContent.endsWith(']') || && (!trimmedContent.endsWith(']')
trimmedContent.split('[').length !== trimmedContent.split('}').length)) || || trimmedContent.split('[').length !== trimmedContent.split('}').length))
(trimmedContent.split('"').length % 2 !== 1) || || (trimmedContent.split('"').length % 2 !== 1)
(trimmedContent.includes('{"') && !trimmedContent.includes('"}')); || (trimmedContent.includes('{"') && !trimmedContent.includes('"}'))
// Only try to parse streaming data if it looks complete and hasn't been processed // Only try to parse streaming data if it looks complete and hasn't been processed
if (!isIncomplete && !processedRef.current) { if (!isIncomplete && !processedRef.current) {
let isValidOption = false; let isValidOption = false
try { try {
const parsed = JSON.parse(trimmedContent); const parsed = JSON.parse(trimmedContent)
if (typeof parsed === 'object' && parsed !== null) { if (typeof parsed === 'object' && parsed !== null) {
setFinalChartOption(parsed); setFinalChartOption(parsed)
isValidOption = true; isValidOption = true
} }
} catch(e) { }
catch {
try { try {
// eslint-disable-next-line no-new-func, sonarjs/code-eval // eslint-disable-next-line no-new-func, sonarjs/code-eval
const result = new Function(`return ${trimmedContent}`)(); const result = new Function(`return ${trimmedContent}`)()
if (typeof result === 'object' && result !== null) { if (typeof result === 'object' && result !== null) {
setFinalChartOption(result); setFinalChartOption(result)
isValidOption = true; isValidOption = true
} }
} catch(e2) {
// Both parsing methods failed, but content looks complete
if (!isIncomplete) {
setChartState('error');
processedRef.current = true;
} }
catch {
// Both parsing methods failed, but content looks complete
setChartState('error')
processedRef.current = true
} }
} }
if (isValidOption) { if (isValidOption) {
setChartState('success'); setChartState('success')
processedRef.current = true; processedRef.current = true
} }
} }
}, [language, children]) }, [language, children])
@ -283,7 +284,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
borderBottomLeftRadius: '10px', borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px', borderBottomRightRadius: '10px',
backgroundColor: isDarkMode ? 'var(--color-components-input-bg-normal)' : 'transparent', backgroundColor: isDarkMode ? 'var(--color-components-input-bg-normal)' : 'transparent',
color: 'var(--color-text-secondary)' color: 'var(--color-text-secondary)',
}}> }}>
<div style={{ <div style={{
marginBottom: '12px', marginBottom: '12px',
@ -322,7 +323,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
overflowX: 'auto', overflowX: 'auto',
borderBottomLeftRadius: '10px', borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px', borderBottomRightRadius: '10px',
transition: 'background-color 0.3s ease' transition: 'background-color 0.3s ease',
}}> }}>
<ErrorBoundary> <ErrorBoundary>
<ReactEcharts <ReactEcharts
@ -330,22 +331,21 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
option={finalChartOption} option={finalChartOption}
style={{ style={{
height: '350px', height: '350px',
width: '100%' width: '100%',
}} }}
theme={isDarkMode ? 'dark' : undefined} theme={isDarkMode ? 'dark' : undefined}
opts={{ opts={{
renderer: 'canvas', renderer: 'canvas',
width: 'auto' width: 'auto',
}} }}
notMerge={true} notMerge={true}
onEvents={{ onEvents={{
// Force resize when chart is finished rendering // Force resize when chart is finished rendering
'finished': () => { finished: () => {
const instance = echartsRef.current?.getEchartsInstance?.() const instance = echartsRef.current?.getEchartsInstance?.()
if (instance) { if (instance)
instance.resize() instance.resize()
} },
}
}} }}
/> />
</ErrorBoundary> </ErrorBoundary>
@ -356,9 +356,9 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
// Error state: show error message // Error state: show error message
const errorOption = { const errorOption = {
title: { title: {
text: "ECharts error - Wrong option." text: 'ECharts error - Wrong option.',
},
} }
};
return ( return (
<div style={{ <div style={{
@ -368,7 +368,7 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
overflowX: 'auto', overflowX: 'auto',
borderBottomLeftRadius: '10px', borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px', borderBottomRightRadius: '10px',
transition: 'background-color 0.3s ease' transition: 'background-color 0.3s ease',
}}> }}>
<ErrorBoundary> <ErrorBoundary>
<ReactEcharts <ReactEcharts
@ -376,12 +376,12 @@ const CodeBlock: any = memo(({ inline, className, children = '', ...props }: any
option={errorOption} option={errorOption}
style={{ style={{
height: '350px', height: '350px',
width: '100%' width: '100%',
}} }}
theme={isDarkMode ? 'dark' : undefined} theme={isDarkMode ? 'dark' : undefined}
opts={{ opts={{
renderer: 'canvas', renderer: 'canvas',
width: 'auto' width: 'auto',
}} }}
notMerge={true} notMerge={true}
/> />

Loading…
Cancel
Save