Untitled

// import React from 'react';
// import { Box } from '@mui/material';
// import ReactECharts from 'echarts-for-react';
// // import ScrollSlider from 'assets/images/icons/scroll-slider.svg'

// const DistributionByBranch = () => {
//   const getOption = () => {
//     return {
//       tooltip: {
//         trigger: 'axis',
//         axisPointer: {
//           type: 'shadow'
//         }
//       },
//       legend: {},
//       grid: {
//         left: 0,
//         right: '10%',
//         bottom: '3%',
//         containLabel: true
//       },
//       xAxis: {
//         type: 'value',
//         boundaryGap: [0, 0.01],
//         axisLabel: {
//           interval: 1 // Tampilkan label setiap interval
//         },
//         splitNumber: 4 // Tentukan jumlah label yang ingin ditampilkan
//       },
//       yAxis: {
//         type: 'category',
//         data: [
//           'Brazil',
//           'Indonesia',
//           'USA',
//           'India',
//           'China',
//           'World',
//           'Russia',
//           'Japan',
//           'Germany',
//           'UK',
//           'France',
//           'Italy',
//           'Spain',
//           'Mexico',
//           'Canada',
//           'South Korea',
//           'Australia',
//           'Saudi Arabia',
//           'Turkey',
//           'South Africa'
//         ],
//         axisLine: {
//           show: false
//         },
//         axisTick: {
//           show: false
//         }
//       },
//       itemStyle: {
//         borderRadius: 100
//       },
//       series: [
//         {
//           type: 'bar',
//           data: [
//             18203, 23489, 29034, 104970, 131744, 630230, 140500, 127300, 81350, 62400, 65200, 60400, 46500, 12300, 34500, 50200, 23500,
//             29000, 75000, 51500
//           ],
//           itemStyle: {
//             borderRadius: 100,
//             color: '#D07516'
//           },
//           label: {
//             show: true,
//             position: 'right',
//             formatter: '{c}',
//             fontSize: 10,
//             color: '#2E75B6'
//           }
//         }
//       ],
//       dataZoom: [
//         {
//           type: 'slider',
//           yAxisIndex: 0,
//           zoomLock: true,
//           width: 8,
//           right: 0,
//           start: 20,
//           end: 0,
//           handleSize: '100%',
//           handleStyle: {
//             borderRadius: 100,
//             backgroundColor: '#F82C17',
//             borderType: 'solid',
//             borderCap: 'round',
//             opacity: 0.2
//           },
//           fillerColor: '#F82C17',
//           backgroundColor: '#E6E6E6',
//           handleIcon: 'arrow',
//           borderRadius: [100, 100, 100, 100]
//         },
//         {
//           type: 'inside',
//           yAxisIndex: 0,
//           start: 20,
//           end: 0,
//           zoomOnMouseWheel: false,
//           moveOnMouseMove: true,
//           moveOnMouseWheel: true
//         }
//       ]
//     };
//   };

//   return (
//     <Box
//       sx={{
//         width: '100%',
//         height: '100%',
//         borderRadius: '16px',
//         padding: '16px',
//         maxHeight: '100%',
//         position: 'relative',
//         bgcolor: '#fff',
//         display: 'flex',
//         justifyContent: 'space-between',
//         alignItems: 'center'
//       }}
//     >
//       <ReactECharts option={getOption()} style={{ width: '100%', height: '120%', inset: '0', top: '-15%' }} />
//     </Box>
//   );
// };

// export default DistributionByBranch;