add line graph, associated changes to utils/config/styles & test

component/charts/bar-graph/bar-graph.tsx

@@ -31,7 +31,7 @@ interface Props {
 export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID, ...props }) => {
   if (!data) {
     return null
-  }
+  } // TODO:#38
   const {
     xValues,
     yData,
@@ -52,9 +52,9 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
         formatLeftYAxisLabel
       }
     }
-  // Proper error/loading handling from useQueryHandler can work with this rule
+  // Proper error/loading handling from useQueryHandler can work with this rule #38
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  } = useGraphData(data, props);
+  } = useGraphData(data, { includeColors: false, ...props});
 
   // TODO: Will come from BE & destructured / color assigned in useGraphData
   const yLabels = [{ displayName: 'Shots Taken', axis: 'LEFT' as 'LEFT', color: barColors[0] }, { displayName:'Make Percentage', axis: 'RIGHT' as 'RIGHT', color: barColors[1] }]
@@ -80,7 +80,6 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
             style={graphStyles.flex}
             data={yData}
             gridMin={min}
-            svg={{ stroke: 'transparent' }} // might want to do the transparent from here - if so may be best built as coming from defaultConfig
             numberOfTicks={numberOfTicks} // rethink numberOfTicks, it should be determined automatically if we do our y axis scaling properly
             yAccessor={({ item }) => (item as unknown as { value: number }).value}
             contentInset={contentInset}