When a chart can't be plotted or has no data, the empty state doesn't render anything

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Empty state for chart with no data about lightdash HOT 2 CLOSED

owlas commented on May 8, 2024

Empty state for chart with no data

from lightdash.

Comments (2)

ZeRego commented on May 8, 2024

@TuringLovesDeathMetal @owlas any thoughts on this layout and text ? Tried to mimic what we have in the results section + all buttons disabled

from lightdash.

owlas commented on May 8, 2024

@ZeRego that looks awesome!

I didn't mention before but the logic to determine whether the chart is valid is derived here:

lightdash/packages/frontend/src/hooks/useChartConfig.tsx

Lines 23 to 36 in 3e2c7aa

 export type ChartConfig = ChartConfigBase & ({ 

 seriesLayout: ValidSeriesLayout, 

 plotData: {[col: string]: any}[], 

 } | { 

 seriesLayout: SeriesLayout, 

 plotData: undefined, 

 }) 

 type ValidSeriesLayout = { 

 xDimension: string, 

 yMetrics: string[], 

 groupDimension: string | undefined, 

 } 

 type SeriesLayout = Partial<ValidSeriesLayout>

Where the ChartConfig.plotData can be undefined

Then there are two components that render depending on this hook:

SimpleChart.js

lightdash/packages/frontend/src/components/SimpleChart.tsx

Lines 41 to 43 in 3e2c7aa

 export const SimpleChart = ({chartType, chartConfig}: SimpleChartProps) => { 

 if(chartConfig.plotData === undefined) 

 return null

ChartConfigPanel.js

lightdash/packages/frontend/src/components/ChartConfigPanel.tsx

Lines 18 to 56 in 3e2c7aa

 const Content = ({ chartConfig }: ContentProps) => { 

 return ( 

 <div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', width: '300px'}}> 

 <span><b>Metrics</b></span> 

 <Divider /> 

 {chartConfig.metricOptions.map((metric, idx) => ( 

 <div key={idx} style={{width: '100%'}}> 

 <Switch 

 checked={chartConfig.seriesLayout.yMetrics?.find(m => m===metric) !== undefined} 

 label={friendlyName(metric)} 

 alignIndicator={Alignment.RIGHT} 

 onChange={e => chartConfig.toggleYMetric(metric)} 

 disabled={(chartConfig.seriesLayout.yMetrics?.find(m => m===metric) === undefined) && chartConfig.seriesLayout.groupDimension !== undefined} 

 /> 

 </div> 

 ))} 

 <span><b>Dimensions</b></span> 

 <Divider /> 

 {chartConfig.dimensionOptions.map(dimension => ( 

 <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}> 

 <span>{friendlyName(dimension)}</span> 

 <ButtonGroup minimal={true}> 

 <Button 

 outlined={true} 

 active={dimension === chartConfig.seriesLayout.xDimension} 

 onClick={() => chartConfig.setXDimension(dimension)} 

 >X-axis</Button> 

 <Button 

 outlined={true} 

 active={dimension === chartConfig.seriesLayout.groupDimension} 

 onClick={() => chartConfig.setGroupDimension(dimension === chartConfig.seriesLayout.groupDimension ? undefined : dimension)} 

 disabled={chartConfig.seriesLayout.yMetrics && chartConfig.seriesLayout.yMetrics.length > 1} 

 >Group</Button> 

 </ButtonGroup> 

 </div> 

 ))} 

 </div> 

 ) 

 }

from lightdash.

Empty state for chart with no data about lightdash HOT 2 CLOSED

Comments (2)

SimpleChart.js

ChartConfigPanel.js

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	export type ChartConfig = ChartConfigBase & ({
	seriesLayout: ValidSeriesLayout,
	plotData: {[col: string]: any}[],
	} \| {
	seriesLayout: SeriesLayout,
	plotData: undefined,
	})

	type ValidSeriesLayout = {
	xDimension: string,
	yMetrics: string[],
	groupDimension: string \| undefined,
	}
	type SeriesLayout = Partial<ValidSeriesLayout>

	export const SimpleChart = ({chartType, chartConfig}: SimpleChartProps) => {
	if(chartConfig.plotData === undefined)
	return null

	const Content = ({ chartConfig }: ContentProps) => {
	return (
	<div style={{display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', width: '300px'}}>
	<span><b>Metrics</b></span>
	<Divider />
	{chartConfig.metricOptions.map((metric, idx) => (
	<div key={idx} style={{width: '100%'}}>
	<Switch
	checked={chartConfig.seriesLayout.yMetrics?.find(m => m===metric) !== undefined}
	label={friendlyName(metric)}
	alignIndicator={Alignment.RIGHT}
	onChange={e => chartConfig.toggleYMetric(metric)}
	disabled={(chartConfig.seriesLayout.yMetrics?.find(m => m===metric) === undefined) && chartConfig.seriesLayout.groupDimension !== undefined}
	/>
	</div>
	))}
	<span><b>Dimensions</b></span>
	<Divider />
	{chartConfig.dimensionOptions.map(dimension => (
	<div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', width: '100%'}}>
	<span>{friendlyName(dimension)}</span>
	<ButtonGroup minimal={true}>
	<Button
	outlined={true}
	active={dimension === chartConfig.seriesLayout.xDimension}
	onClick={() => chartConfig.setXDimension(dimension)}
	>X-axis</Button>
	<Button
	outlined={true}
	active={dimension === chartConfig.seriesLayout.groupDimension}
	onClick={() => chartConfig.setGroupDimension(dimension === chartConfig.seriesLayout.groupDimension ? undefined : dimension)}
	disabled={chartConfig.seriesLayout.yMetrics && chartConfig.seriesLayout.yMetrics.length > 1}
	>Group</Button>
	</ButtonGroup>
	</div>
	))}
	</div>
	)
	}