React Range Selector - Discrete scale

import React, { useCallback, useState } from 'react'; import RangeSelector, { Chart, Series } from 'devextreme-react/range-selector'; import type { RangeSelectorTypes } from 'devextreme-react/range-selector'; import { dataSource } from './data.ts'; const formatNumber = new Intl.NumberFormat('en-US', { minimumFractionDigits: 0 }).format; function calculateTotalProduction(range: string[] = []) { let startIndex = 0; let endIndex = dataSource.length; dataSource.forEach((item, index) => { if (item.country === range[0]) { startIndex = index; } if (item.country === range[1]) { endIndex = index + 1; } }); return formatNumber(dataSource .slice(startIndex, endIndex) .reduce((total, item) => total + item.copper, 0)); } function App() { const [totalProduction, setTotalProduction] = useState(calculateTotalProduction()); const processRange = useCallback((e: RangeSelectorTypes.ValueChangedEvent) => { setTotalProduction(calculateTotalProduction(e.value as string[])); }, []); return ( <div id="range-selector-demo"> <RangeSelector id="range-selector" title="Copper Production in 2013" dataSource={dataSource} onValueChanged={processRange} > <Chart> <Series type="bar" argumentField="country" valueField="copper" /> </Chart> </RangeSelector> <h2>Total: {totalProduction} tons</h2> </div> ); } export default App;