diff --git a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass index 36e9eba94..4a154af5d 100644 --- a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass +++ b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass @@ -2,3 +2,7 @@ width: 100% display: flex justify-content: center + +.axisText + font-size: 12px + opacity: 0.9 diff --git a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx index 2681ffa04..0f3384c6b 100644 --- a/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx +++ b/ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx @@ -21,14 +21,14 @@ export const TimelineBarChart: React.FC = ({ timeLineBarC const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]); const [methodsStats, setMethodsStats] = useState(null); const [methodsNamesAndColors, setMethodsNamesAndColors] = useState(null); - + useEffect(() => { if (!data) return; const protocolsBarsData = []; const prtcNames = []; data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => { let newProtocolObj: { [k: string]: any } = {}; - newProtocolObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp); + newProtocolObj.timestamp = Utils.formatDate(protocolObj.timestamp); protocolObj.protocols.forEach(protocol => { newProtocolObj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]]; prtcNames.push({ name: protocol.name, color: protocol.color }); @@ -50,10 +50,10 @@ export const TimelineBarChart: React.FC = ({ timeLineBarC const protocolsMethods = []; data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => { let newMethodObj: { [k: string]: any } = {}; - newMethodObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp); + newMethodObj.timestamp = Utils.formatDate(protocolObj.timestamp); protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(method => { newMethodObj[`${method.name}`] = method[StatsMode[timeLineBarChartMode]] - protocolsMethodsNamesAndColors.push({name: method.name, color: method.color}); + protocolsMethodsNamesAndColors.push({ name: method.name, color: method.color }); }) protocolsMethods.push(newMethodObj); }) @@ -68,17 +68,13 @@ export const TimelineBarChart: React.FC = ({ timeLineBarC const renderTick = (tickProps) => { const { x, y, payload } = tickProps; - const { index, value } = payload; + const { offset, value } = payload; + const pathX = Math.floor(x - offset) + 0.5; - if (protocolStats.length > 5) { - if (index % 3 === 0) { - return {`${value}`}; - } - return null; - } - else { - return {`${value}`}; - } + return + {`${value}`}; + ; + }; return ( @@ -95,8 +91,8 @@ export const TimelineBarChart: React.FC = ({ timeLineBarC bottom: 5 }} > - - timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} interval="preserveEnd"/> + + timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} interval="preserveEnd" /> timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} /> {bars} } diff --git a/ui-common/src/helpers/Utils.ts b/ui-common/src/helpers/Utils.ts index 219405818..01fab2493 100644 --- a/ui-common/src/helpers/Utils.ts +++ b/ui-common/src/helpers/Utils.ts @@ -37,6 +37,20 @@ export class Utils { return hoursAndMinutes; } + static formatDate = (date) => { + let d = new Date(date), + month = '' + (d.getMonth() + 1), + day = '' + d.getDate(), + year = d.getFullYear(); + const hoursAndMinutes = Utils.getHoursAndMinutes(date); + if (month.length < 2) + month = '0' + month; + if (day.length < 2) + day = '0' + day; + const newDate = [year, month, day].join('-'); + return [hoursAndMinutes, newDate].join(' '); +} + static creatUniqueObjArrayByProp = (objArray, prop) => { const map = new Map(objArray.map((item) => [item[prop], item])).values() return Array.from(map);