Skip to content

chart scripting for pro dashboard #1931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

chart scripting for pro dashboard #1931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8659400
chart script
ReynardoEW Jun 18, 2025
0f2fa1c
Merge branch 'main' of https://github.com/DefiLlama/defillama-app int…
ReynardoEW Jun 18, 2025
d5d6499
d
ReynardoEW Jun 18, 2025
4c2bdc3
Merge branch 'main' of https://github.com/DefiLlama/defillama-app int…
ReynardoEW Jun 19, 2025
239ac47
support chain selection for tvl
ReynardoEW Jun 19, 2025
2e57ea7
add highlight and more func
ReynardoEW Jun 19, 2025
4d777d8
Merge branch 'main' of https://github.com/defillama/defillama-app int…
ReynardoEW Jun 20, 2025
70ad4b3
Merge branch 'main' of https://github.com/DefiLlama/defillama-app int…
ReynardoEW Jun 23, 2025
6a38d8f
make chart preview to show next to editor and put hooks outside
ReynardoEW Jun 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"@tanstack/react-query-devtools": "5.61.3",
"@tanstack/react-table": "8.20.5",
"@tanstack/react-virtual": "3.10.9",
"chevrotain": "^11.0.3",
"colord": "2.9.3",
"dayjs": "1.11.3",
"echarts": "5.6.0",
Expand All @@ -43,6 +44,7 @@
"nprogress": "0.2.0",
"pocketbase": "0.25.2",
"polished": "4.2.2",
"prismjs": "^1.30.0",
"react": "18.3.1",
"react-datepicker": "4.16.0",
"react-dom": "18.3.1",
Expand All @@ -51,6 +53,7 @@
"react-intersection-observer": "9.2.2",
"react-markdown": "^10.1.0",
"react-select": "5.3.2",
"react-simple-code-editor": "^0.14.1",
"siwe": "3.0.0",
"swagger-ui": "4.12.0",
"viem": "2.21.57",
Expand Down
41 changes: 40 additions & 1 deletion src/components/ECharts/AreaChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export default function AreaChart({
title,
color,
hallmarks,
highlights,
customLegendName,
customLegendOptions,
tooltipSort = true,
Expand All @@ -33,7 +34,7 @@ export default function AreaChart({
hideDownloadButton = false,
containerClassName,
...props
}: IChartProps) {
}: IChartProps & { highlights?: any[] }) {
const id = useId()

const [legendOptions, setLegendOptions] = useState(customLegendOptions)
Expand All @@ -54,6 +55,31 @@ export default function AreaChart({
tooltipValuesRelative
})

const markLineData = []
const markAreaData = []
if (Array.isArray(highlights)) {
highlights.forEach((hl) => {
if (hl.type === 'vline') {
markLineData.push({
name: hl.label,
xAxis: hl.timestamp * 1000,
label: { formatter: hl.label }
})
} else if (hl.type === 'hline') {
markLineData.push({
name: hl.label,
yAxis: hl.value,
label: { formatter: hl.label }
})
} else if (hl.type === 'highlight_range') {
markAreaData.push([
{ xAxis: hl.start * 1000, itemStyle: { opacity: 0.15 }, label: { show: !!hl.label, formatter: hl.label } },
{ xAxis: hl.end * 1000 }
])
}
})
}

const series = useMemo(() => {
const chartColor = color || stringToColour()

Expand Down Expand Up @@ -105,6 +131,12 @@ export default function AreaChart({
}
])
}
}),
...(markLineData.length > 0 && {
markLine: { ...(hallmarks ? {} : {}), data: markLineData }
}),
...(markAreaData.length > 0 && {
markArea: { data: markAreaData }
})
}

Expand Down Expand Up @@ -173,6 +205,12 @@ export default function AreaChart({
}
])
}
}),
...(markLineData.length > 0 && {
markLine: { ...(hallmarks ? {} : {}), data: markLineData }
}),
...(markAreaData.length > 0 && {
markArea: { data: markAreaData }
})
}
index++
Expand Down Expand Up @@ -207,6 +245,7 @@ export default function AreaChart({
color,
customLegendName,
hallmarks,
highlights,
isThemeDark,
legendOptions,
stackColors,
Expand Down
48 changes: 43 additions & 5 deletions src/components/ECharts/BarChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,9 @@ export default function BarChart({
groupBy,
hideDataZoom = false,
hideDownloadButton = false,
containerClassName
}: IBarChartProps) {
containerClassName,
highlights
}: IBarChartProps & { highlights?: any[] }) {
const id = useId()

const [legendOptions, setLegendOptions] = useState(customLegendOptions ? [...customLegendOptions] : [])
Expand Down Expand Up @@ -63,6 +64,31 @@ export default function BarChart({
: 'daily'
})

const markLineData = []
const markAreaData = []
if (Array.isArray(highlights)) {
highlights.forEach((hl) => {
if (hl.type === 'vline') {
markLineData.push({
name: hl.label,
xAxis: hl.timestamp * 1000,
label: { formatter: hl.label }
})
} else if (hl.type === 'hline') {
markLineData.push({
name: hl.label,
yAxis: hl.value,
label: { formatter: hl.label }
})
} else if (hl.type === 'highlight_range') {
markAreaData.push([
{ xAxis: hl.start * 1000, itemStyle: { opacity: 0.15 }, label: { show: !!hl.label, formatter: hl.label } },
{ xAxis: hl.end * 1000 }
])
}
})
}

const series = useMemo(() => {
const chartColor = color || stringToColour()

Expand All @@ -78,7 +104,13 @@ export default function BarChart({
itemStyle: {
color: chartColor
},
data: []
data: [],
...(markLineData.length > 0 && {
markLine: { data: markLineData }
}),
...(markAreaData.length > 0 && {
markArea: { data: markAreaData }
})
}

for (const [date, value] of chartData ?? []) {
Expand Down Expand Up @@ -109,7 +141,13 @@ export default function BarChart({
color: chartColor
}
: undefined,
data: []
data: [],
...(markLineData.length > 0 && {
markLine: { data: markLineData }
}),
...(markAreaData.length > 0 && {
markArea: { data: markAreaData }
})
}
}

Expand All @@ -121,7 +159,7 @@ export default function BarChart({

return Object.values(series).map((s: any) => (s.data.length === 0 ? { ...s, large: false } : s))
}
}, [chartData, color, defaultStacks, stackColors, stackKeys, selectedStacks])
}, [chartData, color, defaultStacks, stackColors, stackKeys, selectedStacks, highlights])

const chartRef = useRef<echarts.ECharts | null>(null)

Expand Down
41 changes: 39 additions & 2 deletions src/components/ECharts/MultiSeriesChart/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ interface IMultiSeriesChartProps {
hideDataZoom?: boolean
hideDownloadButton?: boolean
title?: string
highlights?: any
}

export default function MultiSeriesChart({
Expand All @@ -38,7 +39,8 @@ export default function MultiSeriesChart({
groupBy,
hideDataZoom = false,
hideDownloadButton = false,
alwaysShowTooltip
alwaysShowTooltip,
highlights
}: IMultiSeriesChartProps) {
const id = useId()

Expand Down Expand Up @@ -94,10 +96,45 @@ export default function MultiSeriesChart({
serieConfig.areaStyle = serie.areaStyle
}

if (Array.isArray(highlights)) {
const markLineData = []
const markAreaData = []
highlights.forEach((hl) => {
if (hl.type === 'vline') {
markLineData.push({
name: hl.label,
xAxis: hl.timestamp * 1000,
label: { formatter: hl.label }
})
} else if (hl.type === 'hline') {
markLineData.push({
name: hl.label,
yAxis: hl.value,
label: { formatter: hl.label }
})
} else if (hl.type === 'highlight_range') {
markAreaData.push([
{
xAxis: hl.start * 1000,
itemStyle: { opacity: 0.15 },
label: { show: !!hl.label, formatter: hl.label }
},
{ xAxis: hl.end * 1000 }
])
}
})
if (markLineData.length > 0) {
serieConfig.markLine = { data: markLineData }
}
if (markAreaData.length > 0) {
serieConfig.markArea = { data: markAreaData }
}
}

return serieConfig
}) || []
)
}, [series, isThemeDark])
}, [series, isThemeDark, highlights])

const chartRef = useRef<echarts.ECharts | null>(null)

Expand Down
4 changes: 3 additions & 1 deletion src/containers/ProDashboard/ProDashboardAPIContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ interface ProDashboardContextType {
saveDashboard: () => Promise<void>
saveDashboardName: () => Promise<void>
copyDashboard: () => Promise<void>
setItems: React.Dispatch<React.SetStateAction<DashboardItemConfig[]>>
}

const ProDashboardContext = createContext<ProDashboardContextType | undefined>(undefined)
Expand Down Expand Up @@ -519,7 +520,8 @@ export function ProDashboardAPIProvider({
deleteDashboard: deleteDashboardWithConfirmation,
saveDashboard,
saveDashboardName,
copyDashboard
copyDashboard,
setItems
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

better to create handler within context for new chart or reuse existing

}

return <ProDashboardContext.Provider value={value}>{children}</ProDashboardContext.Provider>
Expand Down
28 changes: 28 additions & 0 deletions src/containers/ProDashboard/components/AddChartModal/AddChartModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,21 @@ import { TextTab } from './TextTab'
import { SubmitButton } from './SubmitButton'
import { useModalActions } from './useModalActions'
import { AddChartModalProps } from './types'
import React, { useState, useEffect } from 'react'

export function AddChartModal({ isOpen, onClose, editItem }: AddChartModalProps) {
const { state, actions, computed } = useModalActions(editItem, isOpen, onClose)

const [selectedTab, setSelectedTab] = useState<'charts' | 'script'>('charts')
const [script, setScript] = useState('')

useEffect(() => {
if (editItem && editItem.kind === 'chart' && editItem.type === 'llamascript') {
setSelectedTab('script')
setScript(state.composerScript || '')
}
}, [editItem, state.composerScript])

const getCurrentItemType = () => {
if (state.selectedMainTab === 'chart') {
return state.selectedChartTab
Expand Down Expand Up @@ -54,6 +65,10 @@ export function AddChartModal({ isOpen, onClose, editItem }: AddChartModalProps)
const showPreview =
shouldFetchPreviewData && state.selectedChartTypes.some((type) => availableChartTypes.includes(type))

const handleAddLlamaScriptChart = (chart: { id: string; name: string; llamascript: string }) => {
actions.handleAddLlamaScriptChart(chart)
}

if (!isOpen) return null

return (
Expand Down Expand Up @@ -115,6 +130,13 @@ export function AddChartModal({ isOpen, onClose, editItem }: AddChartModalProps)
onChartTypeChange={actions.setSelectedChartType}
onAddToComposer={actions.handleAddToComposer}
onRemoveFromComposer={actions.handleRemoveFromComposer}
onAddLlamaScriptChart={handleAddLlamaScriptChart}
selectedTab={selectedTab}
onSelectedTabChange={setSelectedTab}
script={script}
onScriptChange={setScript}
composerScript={state.composerScript}
setComposerScript={actions.setComposerScript}
/>
)}

Expand Down Expand Up @@ -143,7 +165,9 @@ export function AddChartModal({ isOpen, onClose, editItem }: AddChartModalProps)
onTextContentChange={actions.setTextContent}
/>
)}
</div>

<div className="px-6 pt-2 pb-6 border-t pro-border bg-inherit sticky bottom-0 z-10">
<SubmitButton
editItem={editItem}
selectedMainTab={state.selectedMainTab}
Expand All @@ -159,6 +183,10 @@ export function AddChartModal({ isOpen, onClose, editItem }: AddChartModalProps)
selectedDatasetChain={state.selectedDatasetChain}
selectedTokens={state.selectedTokens}
onSubmit={actions.handleSubmit}
selectedTab={selectedTab}
script={script}
composerChartName={state.composerChartName}
onAddLlamaScriptChart={handleAddLlamaScriptChart}
/>
</div>
</div>
Expand Down
Loading