Merge pull request #19 from oslabs-beta/jeffrey/comments

Jeffrey/comments

Author: jcpoirier20

app/charts/AwsChart.tsx

@@ -18,6 +18,11 @@ interface SoloStyles {
   width: number;
 }
 
+/** 
+ * @params props - the props object containing relevant data.
+ * @desc Handles AWS Charts. Memoized component to generate an AWS chart with formatted data.
+ * @returns {JSX.Element} The JSX element with the AWS chart.
+ */
 const AwsChart: React.FC<any> = React.memo(props => {
   const { renderService, metric, timeList, valueList, colourGenerator, sizing } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);

app/charts/EventChart.tsx

@@ -28,6 +28,11 @@ type PlotlyData = {
   marker: { colors: string[] };
 };
 
+/** 
+ * @params {EventChartProps} props - the props object containing relevant data.
+ * @desc Handles k8s metrics. Memoized component to generate event chart with formatted data 
+ * @returns {JSX.Element} The JSX element with the event chart.
+ */
 const EventChart: React.FC<EventChartProps> = React.memo(props => {
   const { metricName, chartData, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);

app/charts/HealthChart.tsx

@@ -25,6 +25,11 @@ type PlotlyData = {
   marker: { colors: string[] };
 };
 
+/**
+ * @params {HealthChartProps} props - the props object containing relevant data.
+ * @desc Handles microservices metrics. Memoized component to generate a health chart with formatted data.
+ * @returns {JSX.Element} The JSX element with the health chart. 
+ */
 const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
   const { dataType, serviceName, chartData, categoryName, sizing, colourGenerator } = props;
   const [solo, setSolo] = useState<SoloStyles | null>(null);
@@ -76,6 +81,10 @@ const HealthChart: React.FC<HealthChartProps> = React.memo(props => {
     }
   }, 20);
 
+  /**
+   * @desc Takes the chart data and configures Plotly object to render associated health chart.
+   * @returns {JSX.Element} Configured Plotly object representing health chart.
+   */
   const createChart = () => {
     const dataArray = generatePlotlyDataObjects(chartData);
     const sizeSwitch = sizing === 'all' ? all : solo;