@@ -38,7 +38,7 @@ function createMark(type: string, data: Record<string, unknown>[], stacked: bool
3838export function Chart ( { args = { } , data } : ComponentProps ) {
3939 const ref = useRef < HTMLDivElement > ( null )
4040 const { variables, fileLoader } = useDashboard ( )
41- const formatted = format_value ( { ...args } , variables ) as Record < string , unknown >
41+ const formatted = format_value ( { ...args } , variables )
4242
4343 for ( const v of validators ) v ( formatted )
4444
@@ -47,26 +47,38 @@ export function Chart({ args = {}, data }: ComponentProps) {
4747 data : loaded ,
4848 loading,
4949 error,
50- } = useExternalData ( formattedData , formatted . loader as string | undefined , fileLoader , ! ! formatted . is_file )
51- const { data : queried , loading : qLoading , error : qError } = useQuery ( loaded , formatted . query as string | undefined )
50+ } = useExternalData (
51+ formattedData ,
52+ typeof formatted . loader === 'string' ? formatted . loader : undefined ,
53+ fileLoader ,
54+ ! ! formatted . is_file ,
55+ )
56+ const {
57+ data : queried ,
58+ loading : qLoading ,
59+ error : qError ,
60+ } = useQuery ( loaded , typeof formatted . query === 'string' ? formatted . query : undefined )
5261
5362 useEffect ( ( ) => {
5463 if ( ! ref . current || queried == null ) return
5564 ref . current . innerHTML = ''
56- const plotData = queried as Record < string , unknown > [ ]
57- const rotated = ! ! ( formatted . axis && ( formatted . axis as Record < string , unknown > ) . rotated )
58- const mark = createMark ( formatted . type as string , plotData , ! ! formatted . stacked , rotated )
65+ const plotData = ( Array . isArray ( queried ) ? queried : [ ] ) as Record < string , unknown > [ ]
66+ const axisConfig =
67+ typeof formatted . axis === 'object' && formatted . axis !== null ? ( formatted . axis as Record < string , unknown > ) : null
68+ const rotated = ! ! axisConfig ?. rotated
69+ const chartType = typeof formatted . type === 'string' ? formatted . type : 'bar'
70+ const mark = createMark ( chartType , plotData , ! ! formatted . stacked , rotated )
5971 const plotOptions : Record < string , unknown > = { marks : [ mark ] }
60- if ( formatted . axis ) {
61- const axisConfig = formatted . axis as Record < string , unknown >
72+ if ( axisConfig ) {
6273 if ( axisConfig . x ) plotOptions . x = axisConfig . x
6374 if ( axisConfig . y ) plotOptions . y = axisConfig . y
6475 }
6576 ref . current . appendChild ( Plot . plot ( plotOptions ) )
6677 } , [ queried , formatted . type , formatted . stacked , formatted . axis ] )
6778
6879 if ( loading || qLoading ) return < Spinner />
69- if ( error || qError ) return < ErrorMessage message = { ( error || qError ) ! } />
80+ if ( error ) return < ErrorMessage message = { error } />
81+ if ( qError ) return < ErrorMessage message = { qError } />
7082
7183 return < div ref = { ref } className = "ds--chart" />
7284}
0 commit comments