feat: custom props and children

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@tremor/react",
-  "version": "0.0.0-development",
+  "name": "@traceloop/tremor",
+  "version": "0.0.0",
   "description": "The React library to build dashboards faster.",
   "scripts": {
     "prebuild": "rm -rf dist",
@@ -15,14 +15,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/tremorlabs/tremor.git"
+    "url": "https://github.com/traceloop/tremor.git"
   },
-  "author": "tremor",
+  "author": "tremor (forked by traceloop)",
   "license": "Apache 2.0",
   "bugs": {
-    "url": "https://github.com/tremorlabs/tremor/issues"
+    "url": "https://github.com/traceloop/tremor/issues"
   },
-  "homepage": "https://github.com/tremorlabs/tremor#readme",
+  "homepage": "https://github.com/traceloop/tremor#readme",
   "dependencies": {
     "@floating-ui/react": "^0.19.2",
     "@headlessui/react": "^1.7.18",

src/components/chart-elements/AreaChart/AreaChart.tsx

@@ -48,6 +48,7 @@ interface ActiveDot {
 
 const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref) => {
   const {
+    children,
     data = [],
     categories = [],
     index,
@@ -77,6 +78,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
     enableLegendSlider = false,
     customTooltip,
     rotateLabelX,
+    rechartProps,
     tickGap = 5,
     ...other
   } = props;
@@ -139,6 +141,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
       <ResponsiveContainer className="h-full w-full">
         {data?.length ? (
           <ReChartsAreaChart
+          {...rechartProps}
             data={data}
             onClick={
               hasOnValueChange && (activeLegend || activeDot)
@@ -150,6 +153,7 @@ const AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>((props, ref)
                 : undefined
             }
           >
+            {children}
             {showGridLines ? (
               <CartesianGrid
                 className={tremorTwMerge(

src/components/chart-elements/BarChart/BarChart.tsx

@@ -64,6 +64,7 @@ export interface BarChartProps extends BaseChartProps {
 
 const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) => {
   const {
+    children,
     data = [],
     categories = [],
     index,
@@ -93,6 +94,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
     rotateLabelX,
     tickGap = 5,
     className,
+    rechartProps,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -145,6 +147,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
       <ResponsiveContainer className="h-full w-full">
         {data?.length ? (
           <ReChartsBarChart
+          {...rechartProps}
             data={data}
             stackOffset={stack ? "sign" : relative ? "expand" : "none"}
             layout={layout === "vertical" ? "vertical" : "horizontal"}
@@ -158,6 +161,7 @@ const BarChart = React.forwardRef<HTMLDivElement, BarChartProps>((props, ref) =>
                 : undefined
             }
           >
+            {children}
             {showGridLines ? (
               <CartesianGrid
                 className={tremorTwMerge(

src/components/chart-elements/LineChart/LineChart.tsx

@@ -45,6 +45,7 @@ interface ActiveDot {
 
 const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref) => {
   const {
+    children,
     data = [],
     categories = [],
     index,
@@ -73,6 +74,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
     customTooltip,
     rotateLabelX,
     tickGap = 5,
+    rechartProps,
     ...other
   } = props;
   const CustomTooltip = customTooltip;
@@ -135,6 +137,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
       <ResponsiveContainer className="h-full w-full">
         {data?.length ? (
           <ReChartsLineChart
+            {...rechartProps}
             data={data}
             onClick={
               hasOnValueChange && (activeLegend || activeDot)
@@ -146,6 +149,7 @@ const LineChart = React.forwardRef<HTMLDivElement, LineChartProps>((props, ref)
                 : undefined
             }
           >
+            {children}
             {showGridLines ? (
               <CartesianGrid
                 className={tremorTwMerge(

src/components/chart-elements/common/BaseChartProps.tsx

@@ -41,6 +41,7 @@ interface BaseChartProps extends BaseAnimationTimingProps, React.HTMLAttributes<
     xAxisHeight?: number;
   };
   tickGap?: number;
+  rechartProps?: { [key: string]: any };
 }
 
 export default BaseChartProps;