Added tooltip to area chart , bar chart , line chart

js/packages/react-ui/package.json

@@ -2,7 +2,7 @@
   "type": "module",
   "name": "@crayonai/react-ui",
   "license": "MIT",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "Component library for Generative UI SDK",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -66,6 +66,7 @@
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
     "@radix-ui/react-toggle-group": "^1.1.2",
+    "@radix-ui/react-tooltip": "^1.2.7",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
@@ -96,6 +97,7 @@
     "@storybook/theming": "^8.5.3",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^22.12.0",
+    "@types/node-fetch": "2.6.11",
     "@types/react": ">=17.0.0",
     "@types/react-dom": ">=17.0.0",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -108,7 +110,6 @@
     "eslint-plugin-storybook": "^0.11.1",
     "eslint-plugin-unused-imports": "^3.1.0",
     "form-data": "^4.0.0",
-    "@types/node-fetch": "2.6.11",
     "postcss": "^8.5.1",
     "postcss-js": "^4.0.1",
     "postcss-remove-duplicate-values": "^1.0.0",

js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx

@@ -15,6 +15,7 @@ import {
   XAxisTick,
   YAxisTick,
 } from "../shared";
+import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip";
 import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
@@ -293,129 +294,131 @@ const AreaChartComponent = <T extends AreaChartData>({
   }, [showYAxis, chartHeight, data, dataKeys, variant, id, maxLabelHeight]);
 
   return (
-    <SideBarTooltipProvider
-      isSideBarTooltipOpen={isSideBarTooltipOpen}
-      setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
-      data={sideBarTooltipData}
-      setData={setSideBarTooltipData}
-    >
-      <div
-        className={clsx("crayon-area-chart-container", className)}
-        style={{
-          width: width ? `${width}px` : undefined,
-        }}
+    <LabelTooltipProvider>
+      <SideBarTooltipProvider
+        isSideBarTooltipOpen={isSideBarTooltipOpen}
+        setIsSideBarTooltipOpen={setIsSideBarTooltipOpen}
+        data={sideBarTooltipData}
+        setData={setSideBarTooltipData}
       >
-        <div className="crayon-area-chart-container-inner" ref={chartContainerRef}>
-          {/* Y-axis of the chart */}
-          {yAxis}
-          <div className="crayon-area-chart-main-container" ref={mainContainerRef}>
-            <ChartContainer
-              config={chartConfig}
-              style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
-              rechartsProps={{
-                width: "100%",
-                height: chartHeight,
-              }}
-            >
-              <RechartsAreaChart
-                accessibilityLayer
-                key={`area-chart-${id}`}
-                data={data}
-                margin={{
-                  top: 20,
-                  bottom: 0,
+        <div
+          className={clsx("crayon-area-chart-container", className)}
+          style={{
+            width: width ? `${width}px` : undefined,
+          }}
+        >
+          <div className="crayon-area-chart-container-inner" ref={chartContainerRef}>
+            {/* Y-axis of the chart */}
+            {yAxis}
+            <div className="crayon-area-chart-main-container" ref={mainContainerRef}>
+              <ChartContainer
+                config={chartConfig}
+                style={{ width: dataWidth, minWidth: "100%", height: chartHeight }}
+                rechartsProps={{
+                  width: "100%",
+                  height: chartHeight,
                 }}
-                onClick={onAreaClick}
               >
-                {grid && cartesianGrid()}
-                <XAxis
-                  dataKey={categoryKey as string}
-                  tickLine={false}
-                  axisLine={false}
-                  textAnchor="middle"
-                  interval={0}
-                  tickFormatter={xAxisTickFormatter}
-                  height={maxLabelHeight}
-                  tick={
-                    <XAxisTick
-                      variant={tickVariant}
-                      widthOfGroup={widthOfGroup}
-                      labelHeight={maxLabelHeight}
-                    />
-                  }
-                  orientation="bottom"
-                  padding={{
-                    left: X_AXIS_PADDING,
-                    right: X_AXIS_PADDING,
+                <RechartsAreaChart
+                  accessibilityLayer
+                  key={`area-chart-${id}`}
+                  data={data}
+                  margin={{
+                    top: 20,
+                    bottom: 0,
                   }}
-                />
-
-                <ChartTooltip content={<CustomTooltipContent />} offset={15} />
-
-                {dataKeys.map((key) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  return (
-                    <defs key={`gradient-${transformedKey}`}>
-                      <linearGradient
-                        id={`${gradientID}-${transformedKey}`}
-                        x1="0"
-                        y1="0"
-                        x2="0"
-                        y2="1"
-                      >
-                        <stop offset="5%" stopColor={color} stopOpacity={0.6} />
-                        <stop offset="95%" stopColor={color} stopOpacity={0} />
-                      </linearGradient>
-                    </defs>
-                  );
-                })}
-
-                {dataKeys.map((key) => {
-                  const transformedKey = transformedKeys[key];
-                  const color = `var(--color-${transformedKey})`;
-                  return (
-                    <Area
-                      key={`main-${key}`}
-                      dataKey={key}
-                      type={variant}
-                      stroke={color}
-                      fill={`url(#${gradientID}-${transformedKey})`}
-                      fillOpacity={1}
-                      stackId="a"
-                      activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
-                      dot={false}
-                      isAnimationActive={isAnimationActive}
-                    />
-                  );
-                })}
-              </RechartsAreaChart>
-            </ChartContainer>
+                  onClick={onAreaClick}
+                >
+                  {grid && cartesianGrid()}
+                  <XAxis
+                    dataKey={categoryKey as string}
+                    tickLine={false}
+                    axisLine={false}
+                    textAnchor="middle"
+                    interval={0}
+                    tickFormatter={xAxisTickFormatter}
+                    height={maxLabelHeight}
+                    tick={
+                      <XAxisTick
+                        variant={tickVariant}
+                        widthOfGroup={widthOfGroup}
+                        labelHeight={maxLabelHeight}
+                      />
+                    }
+                    orientation="bottom"
+                    padding={{
+                      left: X_AXIS_PADDING,
+                      right: X_AXIS_PADDING,
+                    }}
+                  />
+
+                  <ChartTooltip content={<CustomTooltipContent />} offset={15} />
+
+                  {dataKeys.map((key) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    return (
+                      <defs key={`gradient-${transformedKey}`}>
+                        <linearGradient
+                          id={`${gradientID}-${transformedKey}`}
+                          x1="0"
+                          y1="0"
+                          x2="0"
+                          y2="1"
+                        >
+                          <stop offset="5%" stopColor={color} stopOpacity={0.6} />
+                          <stop offset="95%" stopColor={color} stopOpacity={0} />
+                        </linearGradient>
+                      </defs>
+                    );
+                  })}
+
+                  {dataKeys.map((key) => {
+                    const transformedKey = transformedKeys[key];
+                    const color = `var(--color-${transformedKey})`;
+                    return (
+                      <Area
+                        key={`main-${key}`}
+                        dataKey={key}
+                        type={variant}
+                        stroke={color}
+                        fill={`url(#${gradientID}-${transformedKey})`}
+                        fillOpacity={1}
+                        stackId="a"
+                        activeDot={<ActiveDot key={`active-dot-${key}-${id}`} />}
+                        dot={false}
+                        isAnimationActive={isAnimationActive}
+                      />
+                    );
+                  })}
+                </RechartsAreaChart>
+              </ChartContainer>
+            </div>
+            {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
           </div>
-          {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
-        </div>
-        {/* if the data width is greater than the effective width, then show the scroll buttons */}
-        <ScrollButtonsHorizontal
-          dataWidth={dataWidth}
-          effectiveWidth={effectiveWidth}
-          canScrollLeft={canScrollLeft}
-          canScrollRight={canScrollRight}
-          isSideBarTooltipOpen={isSideBarTooltipOpen}
-          onScrollLeft={scrollLeft}
-          onScrollRight={scrollRight}
-        />
-        {legend && (
-          <DefaultLegend
-            items={legendItems}
-            yAxisLabel={yAxisLabel}
-            xAxisLabel={xAxisLabel}
-            containerWidth={effectiveWidth}
-            isExpanded={isLegendExpanded}
-            setIsExpanded={setIsLegendExpanded}
+          {/* if the data width is greater than the effective width, then show the scroll buttons */}
+          <ScrollButtonsHorizontal
+            dataWidth={dataWidth}
+            effectiveWidth={effectiveWidth}
+            canScrollLeft={canScrollLeft}
+            canScrollRight={canScrollRight}
+            isSideBarTooltipOpen={isSideBarTooltipOpen}
+            onScrollLeft={scrollLeft}
+            onScrollRight={scrollRight}
           />
-        )}
-      </div>
-    </SideBarTooltipProvider>
+          {legend && (
+            <DefaultLegend
+              items={legendItems}
+              yAxisLabel={yAxisLabel}
+              xAxisLabel={xAxisLabel}
+              containerWidth={effectiveWidth}
+              isExpanded={isLegendExpanded}
+              setIsExpanded={setIsLegendExpanded}
+            />
+          )}
+        </div>
+      </SideBarTooltipProvider>
+    </LabelTooltipProvider>
   );
 };