when using this code in web browser and web app, cannot scroll on VictoryChart component
it consumes all event and so scroll not working
plz check the code below
import { useContext, useEffect, useRef, useState } from 'react';
import "../styles/global-style.css";
import colors from "../assets/values/Colors";
import TextWithSubNoun from '../component/TextWithSubNoun';
import { VictoryChart } from 'victory-chart';
import { VictoryAxis, VictoryBar, VictoryContainer, VictoryLabel, VictoryLine, VictoryTheme } from 'victory';
import { getSummary } from '../api/Service';
import { AppContext } from '../App';
const weekOrder = ["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];
export const SettlementSummaryTab = () => {
const { userId,setUserId } = useContext(AppContext);
const [ isZoomedIn,setIsZoomedIn ] =useState(false);
const [weekSum, setWeekSum] = useState(0);
const [weekInfo, setWeekInfo] = useState([]);
const [monthSum, setMonthSum] = useState(0);
const [monthInfo, setMonthInfo] = useState([]);
const chartRef = useRef(null);
useEffect (()=> {
getInfo();
const logEvent= (event) => {
console.log(`이벤트: ${event.type}`);
console.log(`이벤트타겟: `+event.target);
console.log(`이벤트현재타겟: `+event.currentTarget);
console.log(`이벤트경로: `+event.composedPath?.() || event.path);
};
window.addEventListener('scroll', logEvent,true);
window.addEventListener('touchstart', logEvent,true);
window.addEventListener('wheel', logEvent,true);
return () => {
window.removeEventListener('scroll', logEvent,true);
window.removeEventListener('touchstart', logEvent,true);
window.removeEventListener('wheel', logEvent,true);
}
},[])
const getInfo = async() => {
try {
const response = await getSummary(userId);
const weekData = response.weekInfo_;
weekData.sort((a,b) => {
return weekOrder.indexOf(a.dayOfWeek) - weekOrder.indexOf(b.dayOfWeek);
})
setWeekSum(parseInt(response.weekSum_,10));
setWeekInfo(weekData.map ( item => ({
...item,
amount:parseInt(item.amount,10),
count:parseInt(item.count,10),
})));
const monthData= response.monthInfo_.sort((a,b) => a.month-b.month);
setMonthSum(parseInt(monthData[6].amount,10));
setMonthInfo(monthData.map ( item => ({
...item,
amount:parseInt(item.amount,10),
count:parseInt(item.count,10),
})));
} catch (err) {
console.log("fail :"+err);
}
}
return (
<div className="layout-vertical">
<div className="box-rounded-vertical">
<div className="layout-horizontal-spacebetween">
{/* Label - 이번주 매출*/}
<span style={{
color:colors.gray500,
alignItems:'flex-end',
fontFamily:'PretendardVariable',
fontSize:'18px',
fontWeight:400,
margin:'20px 0px 0px 20px'
}}>이번주 매출</span>
{/*Label - 이번주 매출*/}
</div>
<div className="layout-horizontal">
{/*이번주 매출 금액*/}
<TextWithSubNoun
text={weekSum.toLocaleString()}
textColor={colors.black}
textSize="30px"
subNoun={'원'}
subNounColor={colors.gray600}
subNounSize="16px"
margin='10px 0px 0px 20px'
/>
{/*이번주 매출 금액*/}
{/*상승하락 퍼센트*/}
<span style={{
color:colors.gray500,
alignItems:'flex-end',
fontFamily:'PretendardVariable',
fontSize:'18px',
fontWeight:400,
margin:'10px'
}}></span>
{/*상승하락 퍼센트*/}
</div>
<div
style={{
display:isZoomedIn? 'none':'flex',
width:'100%',
}}>
<VictoryChart
theme= { VictoryTheme.grayscale }
domainPadding={30}
style={{
pointerEvents:'none',
}}
>
<VictoryAxis
tickValues={[1,2,3,4,5,6,7]}
tickFormat={weekInfo.map(data => `${data.dayOfWeek.charAt(0)} \n ${
data.date.substring(4).charAt(0) === '0' ?
data.date.substring(4).charAt(1)+'/'+data.date.substring(6):
data.date.substring(4).substring(0,2)+'/'+data.date.substring(6)
}`) }
tickLabelComponent={
<VictoryLabel
lineHeight={[1,1.28]}
style={[{fill:colors.gray700, fontSize:'14.8px',fontFamily:'PretendardVariable'},{fill:colors.gray700, fontFamily:'PretendardVariable'}]}
/>
}
style={{
pointerEvents:'none',
axis:{ stroke:colors.gray200 }
}}
/>
<VictoryAxis
dependentAxis
tickFormat={(value)=>
{
if(value<0.1) {
return [];
}
return (`${value/10000}만`);
}
}
tickLabelComponent={
<VictoryLabel
style={{
pointerEvents:'none',
fill:colors.gray700,
fontSize:'13.8px',
fontFamily:'PretendardVariable'}}
/>
}
style={{
pointerEvents:'none',
axis:{ stroke:colors.gray200 }
}}/>
<VictoryBar
data={weekInfo}
x="dayOfWeek"
y="amount"
barRatio={0.8}
cornerRadius={5}
labels={({datum}) => datum.amount === 0 ? null:`${datum.count}건`}
labelComponent={
<VictoryLabel
lineHeight={1}
style={{
pointerEvents:'none',
fill:colors.tint,
fontFamily:'PretendardVariable'
}}
/>
}
style={{
pointerEvents:'none',
data:{fill:'rgba(89,183,164,0.4)'}
}}
/>
</VictoryChart>
</div>
</div>
<div
className="box-rounded-vertical"
style={{margin:'28px 0 0 0'}}
>
<div className="layout-horizontal-spacebetween">
{/* Label - 이번달 매출*/}
<span style={{
color:colors.gray500,
alignItems:'flex-end',
fontFamily:'PretendardVariable',
fontSize:'18px',
fontWeight:400,
margin:'20px 0px 0px 20px'
}}>이번달 매출</span>
{/*Label - 이번달 매출*/}
</div>
<div className="layout-horizontal">
{/*이번달 매출 금액*/}
<TextWithSubNoun
text={monthSum}
textColor={colors.black}
textSize="30px"
subNoun={'원'}
subNounColor={colors.gray600}
subNounSize="16px"
margin='10px 0px 0px 20px'
/>
{/*이번달 매출 금액*/}
{/*상승하락 퍼센트*/}
<span style={{
color:colors.gray500,
alignItems:'flex-end',
fontFamily:'PretendardVariable',
fontSize:'14px',
fontWeight:400,
margin:'10px'
}}></span>
{/*상승하락 퍼센트*/}
</div>
<div
style={{
display:isZoomedIn? 'none':'flex',
width:'100%',
paddingLeft:'10px'
}}>
<VictoryChart
theme= { VictoryTheme.grayscale }
domainPadding={30}>
<VictoryAxis
tickValues={[1,2,3,4,5,6,7]}
tickFormat={monthInfo.map(data => ` ${
data.month.charAt(4) === '0' ?
data.month.substring(5)+'월':
data.month.substring(4)+'월'
}`) }
tickLabelComponent={
<VictoryLabel
style={{fill:colors.gray700, fontSize:'16.8px',fontFamily:'PretendardVariable'}}
/>
}
style={{
axis:{ stroke:colors.gray200 }
}}/>
<VictoryAxis
dependentAxis
tickFormat={(value)=>
{
if(value<0.1) {
return [];
}
return (`${value/10000}만`);
}
}
tickLabelComponent={
<VictoryLabel
style={{fill:colors.gray700, fontSize:'13.8px',fontFamily:'PretendardVariable'}}
/>
}
style={{
axis:{ stroke:colors.gray200 }
}}/>
<VictoryLine
data={monthInfo}
x="month"
y="amount"
labels={({datum}) => datum.amount === 0 ? null:`${datum.count}건`}
labelComponent={
<VictoryLabel
renderInPortal dy={-20}
lineHeight={1}
style={{fill:colors.gray700,fontSize:'17px', fontFamily:'PretendardVariable'}}
/>
}
style={{
data:{stroke:'rgba(89,183,164,0.6)'},
parent:{border:`1px solid ${colors.gray400}`}
}}/>
</VictoryChart>
</div>
</div>
</div>
)
}
export default SettlementSummaryTab;
log result below when touching and scrolling on VictoryChart
이벤트: touchstart
이벤트타겟: [object SVGSVGElement]
이벤트현재타겟: [object Window]
이벤트경로: [object SVGSVGElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement],[object HTMLBodyElement],[object HTMLHtmlElement],[object HTMLDocument],[object Window]
when touching on VictoryChart, scroll working
You need to sign in to view this answers
Leave feedback about this