{ uniqCharts.map( ( chart ) => {
return hiddenBlocks.includes(
chart.endpoint + '_' + chart.key
) ? null : (
);
} ) }
);
};
const DashboardCharts = ( props ) => {
const {
controls: Controls,
hiddenBlocks,
isFirst,
isLast,
onMove,
onRemove,
onTitleBlur,
onTitleChange,
onToggleHiddenBlock,
path,
title,
titleInput,
filters,
defaultDateRange,
} = props;
const { updateUserPreferences, ...userPrefs } = useUserPreferences();
const [ chartType, setChartType ] = useState(
userPrefs.dashboard_chart_type || 'line'
);
const [ chartInterval, setChartInterval ] = useState(
userPrefs.dashboard_chart_interval || 'day'
);
const query = { ...props.query, chartType, interval: chartInterval };
const handleTypeToggle = ( type ) => {
return () => {
setChartType( type );
const userDataFields = {
dashboard_chart_type: type,
};
updateUserPreferences( userDataFields );
recordEvent( 'dash_charts_type_toggle', { chart_type: type } );
};
};
const renderMenu = () => (
(
{ __( 'Charts', 'woocommerce' ) }
{ renderChartToggles( {
hiddenBlocks,
onToggleHiddenBlock,
} ) }
) }
/>
);
const setInterval = ( interval ) => {
setChartInterval( interval );
const userDataFields = {
dashboard_chart_interval: interval,
};
updateUserPreferences( userDataFields );
recordEvent( 'dash_charts_interval', { interval } );
};
return (
{ renderIntervalSelector( {
chartInterval,
setInterval,
query,
defaultDateRange,
} ) }
{ renderChartBlocks( { hiddenBlocks, path, query, filters } ) }
);
};
DashboardCharts.propTypes = {
path: PropTypes.string.isRequired,
query: PropTypes.object.isRequired,
defaultDateRange: PropTypes.string.isRequired,
};
export default DashboardCharts;