added click handler and fixed some animation related UI issues and updated readme file

Author: GokulSNath

README.md

@@ -72,7 +72,7 @@ Props that can be passed to the component are listed below:
 			<td><code>undefined</code></td>
 		</tr>
 		<tr>
-			<td><code><b>renderLabel?:</b> (ratingId: number): ReactElement</code></td>
+			<td><code><b>renderLabel?:</b> (ratingId: string): ReactElement</code></td>
 			<td>A render function to customize your ratings label with your own element.</td>
 			<td><code>undefined</code></td>
 		</tr>
@@ -86,11 +86,17 @@ Props that can be passed to the component are listed below:
 			<td>Boolean to enable and disable showing animations and transitions on the chart.</td>
 			<td><code>true</code></td>
 		</tr>
+		<tr>
 			<td><code><b>styles?:</b> object</code></td>
 			<td>Provides you with a bunch of callback functions to override the default styles.(refer 
 			<a href="#style-customizations">Style Customizations</a>)
 			<td><code>undefined</code></td>
 		</tr>
+		<tr>
+			<td><code><b>onChartClick?:</b> (ratingId: string): void</code></td>
+			<td>Click handler for each ratings chart</td>
+			<td><code>undefined</code></td>
+		</tr>
 	</tbody>
 </table>
 

src/rating-summary/RatingSummary.tsx

@@ -13,7 +13,8 @@ const RatingSummary: FC<ISummaryProp> = (props) => {
     showCount = true,
     showAnimation = true,
     styles = {},
-    chartColors
+    chartColors,
+    onChartClick
   } = props;
 
   const totalRatingCount = useMemo(
@@ -41,8 +42,11 @@ const RatingSummary: FC<ISummaryProp> = (props) => {
             )}
             <div
               style={{ width: `${getBarWidth(Number(ratingId)) * 100}%` }}
-              className={classes.barWrapper}
+              className={`${classes.barWrapper}
+              ${showAnimation && classes.transitions}
+              ${onChartClick && classes.cursorPointer}`}
               id={`${ratingId}-bar`}
+              onClick={(): void => onChartClick && onChartClick(ratingId)}
             >
               <div
                 style={{
@@ -57,8 +61,7 @@ const RatingSummary: FC<ISummaryProp> = (props) => {
                     {}),
                   ...getStyles(Elements.Chart, Number(ratingId))
                 }}
-                className={`${classes.barContainer}
-              ${showAnimation && classes.transitions}`}
+                className={`${classes.barContainer} ${showAnimation && classes.animations}`}
               >
                 {showCount && (
                   <span

src/rating-summary/styles.module.scss

@@ -35,13 +35,18 @@
           padding-left: 8px;
         }
       }
-      .transitions {
-        animation-name: widthAnimation;
-        animation-duration: 300ms;
-        animation-timing-function: ease-in-out;
-        animation-iteration-count: 1;
-        transition: width 0.3s ease-in-out;
-      }
+    }
+    .transitions {
+      transition: width 0.3s ease-in-out;
+    }
+    .animations {
+      animation-name: widthAnimation;
+      animation-duration: 300ms;
+      animation-timing-function: ease-in-out;
+      animation-iteration-count: 1;
+    }
+    .cursorPointer {
+      cursor: pointer;
     }
     .five {
       background-color: #9fc05a;

src/rating-summary/types.d.ts

@@ -8,6 +8,7 @@ export type ISummaryProp = {
   showAnimation?: boolean;
   styles?: { [value in Elements]: IStyleFunction };
   chartColors?: { [value in RatingValue]: string };
+  onChartClick?: (ratingId: string) => void;
 };
 
 export type IRatings = {

src/stories/Component.stories.tsx

@@ -23,7 +23,7 @@ RatingSummary.args = {
     3: 141135,
     2: 57472,
     1: 134055
-  }
+  },
   // renderLabel: (ratingId: string) => ((ratingId === '1' && (<>now</>) || <>{ratingId}</>)),
   // showCount: true,
   // showAnimation: true,
@@ -37,4 +37,7 @@ RatingSummary.args = {
   //   2: 'blue',
   //   1: 'green'
   // },
+  onBarClick: (ratingId: string) => {
+    console.log("🚀 ~ ratingId:", ratingId)
+  }
 };