Conversation
| /** | ||
| * Card component that displays a card with a title and recharts chart content as children. | ||
| * | ||
| * @param {Object} props - The properties object. |
There was a problem hiding this comment.
I think we want to specify the tiltle, children and darkmode as props properties,
The way this is currently formatted makes it seem like the component takes 4 input parameters: props, title, children, isDarkMode. (I think the props.____ might be confusing, and the limited description for props as well)
How does the VScode mouseover look for this? If it is similar to other react component's documentation, you can disregard this
There was a problem hiding this comment.
Using CardProps as the type of props instead of Object may help
There was a problem hiding this comment.
I looked into more JSDoc documentation, and using dot notation seems to be the standard way to do this, so I think the CardProps type is the only change needed here
| * | ||
| * @component | ||
| * @param {Object} props - The props object. | ||
| * @param {Object} props.event - The event object containing details about the event. |
There was a problem hiding this comment.
I think we can use our own types here (TGEvent instead of Object as a type is more descriptive)
| * @param {Function} props.setCurrentIp - Function to update the currently selected IP address. | ||
| * @returns {JSX.Element} The rendered component. | ||
| * | ||
| * @typedef {Object} IPLocation |
There was a problem hiding this comment.
Oooo, Okay maybe this is how we should be doing it then. Didn't know about this formatting.
| {currentIpLoc?.country} | ||
| </p> | ||
| {/* Make sure the chart renders only when IP is selected */} | ||
| {/* TODO: Render the IpAccessOverTimeChart component only when an IP is selected//possible display styling issue */} |
There was a problem hiding this comment.
This is currently how it works, (see line 71)
| * @typedef {IPLocation & CountedEvent} IPLocationCountedEvent | ||
| * | ||
| * @example | ||
| * <IpAccessCombined currentIp="192.168.1.1" setCurrentIp={setIp} /> |
| * | ||
| * @returns {JSX.Element} The rendered bar chart component. | ||
| * | ||
| * @remarks |
| * @property {string} source - The source of the event. | ||
| * @property {number} count - The count of events from this source. | ||
| * | ||
| * @state {CountedEvent[]} events - The fetched events data. |
| * @state {boolean} loading - The loading status of the data fetch. | ||
| * @state {string | null} selectedEventSource - The selected event source when a bar is clicked. | ||
| * | ||
| * @hook {useEffect} Fetches events data on component mount. |
| * | ||
| * @hook {useEffect} Fetches events data on component mount. | ||
| * | ||
| * @function handleClick |
| * @component | ||
| * @example | ||
| * return ( | ||
| * <UserActivityChart /> |
There was a problem hiding this comment.
You used the tsx ... markdown before, I think that is probably preferred to this return ( ... ) syntax
2 participants
Linked issue/ticket
#51
Description
adds comments in JsDocs syntax to front-end charts and components.
Reproduction steps
Inside source folder under components, and charts subfolders. Each file now has comments for future developers.
Checklist