Some performance improvement and introducing multi line xaxis ticks, for line, bar and area charts, (#145)

* performance improvement for barChart scroll button extracted

* performance improvement for line and are area chart

* perf(charts): Optimize chart rendering by memoizing Y-axis

This commit improves the rendering performance of the AreaChart, BarChart, and LineChart components by memoizing the Y-axis.

The Y-axis for these charts is now wrapped in a `useMemo` hook to prevent unnecessary re-renders when unrelated props change. This results in a smoother experience, particularly for charts that are interactive or update frequently.

Additionally, the `chartSyncID` has been removed as it is no longer required with the new implementation.

* function changes

* better colition detection and xtick

* bar xtik colition detection

* xAxis multi

* feat(charts): Add useMaxLabelHeight hook for dynamic label height calculation

This commit introduces a new hook, useMaxLabelHeight, which calculates the maximum height of labels in a chart based on the provided data and category key. The hook utilizes memoization for performance optimization and ensures accurate height measurement by creating temporary DOM elements. Additionally, it cleans up by removing unused code from useTransformKey.

* feat(charts): Add XAxisTicks type for chart tick variants

This commit introduces a new type, XAxisTickVariant, which defines the possible variants for X-axis ticks in charts. The type is exported from a new file, enhancing the type definitions available for chart components.

* feat(charts): Export useMaxLabelHeight hook in charts hooks index

This commit updates the charts hooks index file to export the useMaxLabelHeight hook, allowing for dynamic label height calculations to be utilized in other components.

* fix(ThemeProvider): Update default theme reference to use themes.light

This commit modifies the ThemeProvider component to reference themes.light instead of lightTheme for the default theme. This change ensures consistency with the updated theme structure.

* feat(charts): Enhance AreaChart and LineChart with dynamic label height and X-axis tick improvements

This commit introduces the useMaxLabelHeight hook in both AreaChart and LineChart components to dynamically calculate the maximum height of X-axis labels based on their content. The X-axis tick rendering has been updated to utilize this height for better spacing. Additionally, the XAxisTick component has been refactored to support different tick variants, improving the overall flexibility and appearance of the charts. Unused code related to X-axis position handling has been removed for cleaner implementation.

* refactor(charts): Update chart height calculations and improve X-axis tick rendering

This commit modifies the AreaChart and LineChart components to include the maximum label height in their height calculations, ensuring better spacing for dynamic content. The XAxisTick component has been updated to accept a customizable width for improved layout flexibility. Additionally, a new utility function, getCanvasContext, has been introduced to streamline font style application for canvas rendering, enhancing overall chart rendering accuracy.

* refactor(charts): Improve BarChart utility functions and label width handling

This commit refactors the BarChart utility functions by introducing the getCanvasContext utility for better font style management in X-axis tick rendering. It also updates the padding values for chart content and adjusts the label width handling in the useMaxLabelHeight hook to enhance layout consistency and visual spacing.

* refactor(charts): Update chart components for multiLine tick variant and width handling

This commit refactors the AreaChart, BarChart, and LineChart components to support a new "multiLine" tick variant for X-axis labels. It introduces the widthOfGroup calculation to improve label height management and adjusts the useMaxLabelHeight hook accordingly. The XAxisTick component is updated to accommodate the new variant and width properties, enhancing layout flexibility and visual consistency across charts.

* refactor(charts): Enhance BarChart story data structure for improved readability

This commit refactors the data structure in the BarChart stories to enhance readability by formatting the data entries with consistent indentation and spacing. This change improves the clarity of the data variations used in the stories, making it easier for developers to understand and modify the chart data.

* refactor(charts): Simplify XAxisTick usage in chart components

This commit refactors the AreaChart, BarChart, and LineChart components to streamline the usage of the XAxisTick component by removing the unnecessary chartVariant prop. The tick rendering is simplified for better readability and maintainability, enhancing the overall code structure across the chart components.

* refactor(charts): Remove unused getCanvasContext utility from XAxisTick component

This commit removes the unused getCanvasContext utility from the XAxisTick component, streamlining the code and improving maintainability. The change contributes to a cleaner implementation by eliminating unnecessary references, enhancing overall code clarity.

* refactor(charts): Update XAxisTick component to support customizable label height

This commit enhances the XAxisTick component by adding a new labelHeight prop, allowing for more flexible height management of X-axis ticks across AreaChart, BarChart, and LineChart components. The tick rendering in these charts has been updated to utilize this new prop, improving layout consistency and visual appearance.

* refactor(charts): Standardize X-axis padding in AreaChart and LineChart components

This commit introduces a new constant, X_AXIS_PADDING, to standardize the left and right padding for the X-axis in both AreaChart and LineChart components. This change enhances code maintainability and ensures consistent layout across chart components.

* rename yaxis chart to yaxis

* hide shell stories

* fix type

Author: ankit-thesys

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

@@ -1,28 +1,27 @@
 import clsx from "clsx";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Area, AreaChart as RechartsAreaChart, XAxis, YAxis } from "recharts";
 import { useId } from "../../../polyfills";
-import { IconButton } from "../../IconButton";
 import { ChartConfig, ChartContainer, ChartTooltip } from "../Charts";
 import { SideBarChartData, SideBarTooltipProvider } from "../context/SideBarTooltipContext";
-import { useTransformedKeys } from "../hooks";
+import { useMaxLabelHeight, useTransformedKeys } from "../hooks";
 import {
   ActiveDot,
   cartesianGrid,
   CustomTooltipContent,
   DefaultLegend,
+  ScrollButtonsHorizontal,
   SideBarTooltip,
   XAxisTick,
   YAxisTick,
 } from "../shared";
-import { LegendItem } from "../types";
+import { LegendItem, XAxisTickVariant } from "../types";
 import {
   findNearestSnapPosition,
   getOptimalXAxisTickFormatter,
   getSnapPositions,
   getWidthOfData,
-  getXAxisTickPositionData,
+  getWidthOfGroup,
 } from "../utils/AreaAndLine/AreaAndLineUtils";
 import { PaletteName, useChartPalette } from "../utils/PalletUtils";
 import {
@@ -45,6 +44,7 @@ export interface AreaChartProps<T extends AreaChartData> {
   theme?: PaletteName;
   customPalette?: string[];
   variant?: AreaChartVariant;
+  tickVariant?: XAxisTickVariant;
   grid?: boolean;
   legend?: boolean;
   icons?: Partial<Record<keyof T[number], React.ComponentType>>;
@@ -58,13 +58,15 @@ export interface AreaChartProps<T extends AreaChartData> {
 }
 
 const Y_AXIS_WIDTH = 40; // Width of Y-axis chart when shown
+const X_AXIS_PADDING = 36;
 
 const AreaChartComponent = <T extends AreaChartData>({
   data,
   categoryKey,
   theme = "ocean",
   customPalette,
   variant = "natural",
+  tickVariant = "multiLine",
   grid = true,
   icons = {},
   isAnimationActive = false,
@@ -80,6 +82,12 @@ const AreaChartComponent = <T extends AreaChartData>({
     return getDataKeys(data, categoryKey as string);
   }, [data, categoryKey]);
 
+  const widthOfGroup = useMemo(() => {
+    return getWidthOfGroup(data);
+  }, [data]);
+
+  const maxLabelHeight = useMaxLabelHeight(data, categoryKey as string, tickVariant, widthOfGroup);
+
   const transformedKeys = useTransformedKeys(dataKeys);
 
   const colors = useChartPalette({
@@ -125,19 +133,14 @@ const AreaChartComponent = <T extends AreaChartData>({
   }, [data]);
 
   const chartHeight = useMemo(() => {
-    return height ?? 296;
-  }, [height]);
+    return height ?? 296 + maxLabelHeight;
+  }, [height, maxLabelHeight]);
 
   // Calculate optimal tick formatter for collision detection and truncation
   const xAxisTickFormatter = useMemo(() => {
     return getOptimalXAxisTickFormatter(data, effectiveContainerWidth);
   }, [data, effectiveContainerWidth]);
 
-  // Calculate position data for X-axis tick offset handling
-  const xAxisPositionData = useMemo(() => {
-    return getXAxisTickPositionData(data, categoryKey as string);
-  }, [data, categoryKey]);
-
   // Check scroll boundaries
   const updateScrollState = useCallback(() => {
     if (mainContainerRef.current) {
@@ -225,8 +228,6 @@ const AreaChartComponent = <T extends AreaChartData>({
 
   const id = useId();
 
-  const chartSyncID = useMemo(() => `area-chart-sync-${id}`, [id]);
-
   const gradientID = useMemo(() => `area-chart-gradient-${id}`, [id]);
 
   const onAreaClick = useCallback(
@@ -246,6 +247,51 @@ const AreaChartComponent = <T extends AreaChartData>({
     [dataKeys, colors],
   );
 
+  const yAxis = useMemo(() => {
+    if (!showYAxis) {
+      return null;
+    }
+    return (
+      <div className="crayon-area-chart-y-axis-container">
+        {/* Y-axis only chart - synchronized with main chart */}
+        <RechartsAreaChart
+          key={`y-axis-chart-${id}`}
+          width={Y_AXIS_WIDTH}
+          height={chartHeight}
+          data={data}
+          margin={{
+            top: 20,
+            bottom: maxLabelHeight, // this is required for to give space for x-axis
+            left: 0,
+            right: 0,
+          }}
+        >
+          <YAxis
+            width={Y_AXIS_WIDTH}
+            tickLine={false}
+            axisLine={false}
+            tickFormatter={getYAxisTickFormatter()}
+            tick={<YAxisTick />}
+          />
+          {/* Invisible area to maintain scale synchronization */}
+          {dataKeys.map((key) => {
+            return (
+              <Area
+                key={`y-axis-${key}`}
+                dataKey={key}
+                type={variant}
+                stroke="none"
+                fill="transparent"
+                fillOpacity={0}
+                stackId="a"
+              />
+            );
+          })}
+        </RechartsAreaChart>
+      </div>
+    );
+  }, [showYAxis, chartHeight, data, dataKeys, variant, id, maxLabelHeight]);
+
   return (
     <SideBarTooltipProvider
       isSideBarTooltipOpen={isSideBarTooltipOpen}
@@ -260,46 +306,8 @@ const AreaChartComponent = <T extends AreaChartData>({
         }}
       >
         <div className="crayon-area-chart-container-inner" ref={chartContainerRef}>
-          {showYAxis && (
-            <div className="crayon-area-chart-y-axis-container">
-              {/* Y-axis only chart - synchronized with main chart */}
-              <RechartsAreaChart
-                key={`y-axis-chart-${id}`}
-                width={Y_AXIS_WIDTH}
-                height={chartHeight}
-                data={data}
-                margin={{
-                  top: 20,
-                  bottom: 32, // this is required for to give space for x-axis
-                  left: 0,
-                  right: 0,
-                }}
-                syncId={chartSyncID}
-              >
-                <YAxis
-                  width={Y_AXIS_WIDTH}
-                  tickLine={false}
-                  axisLine={false}
-                  tickFormatter={getYAxisTickFormatter()}
-                  tick={<YAxisTick />}
-                />
-                {/* Invisible area to maintain scale synchronization */}
-                {dataKeys.map((key) => {
-                  return (
-                    <Area
-                      key={`y-axis-${key}`}
-                      dataKey={key}
-                      type={variant}
-                      stroke="none"
-                      fill="transparent"
-                      fillOpacity={0}
-                      stackId="a"
-                    />
-                  );
-                })}
-              </RechartsAreaChart>
-            </div>
-          )}
+          {/* Y-axis of the chart */}
+          {yAxis}
           <div className="crayon-area-chart-main-container" ref={mainContainerRef}>
             <ChartContainer
               config={chartConfig}
@@ -317,7 +325,6 @@ const AreaChartComponent = <T extends AreaChartData>({
                   top: 20,
                   bottom: 0,
                 }}
-                syncId={chartSyncID}
                 onClick={onAreaClick}
               >
                 {grid && cartesianGrid()}
@@ -328,17 +335,18 @@ const AreaChartComponent = <T extends AreaChartData>({
                   textAnchor="middle"
                   interval={0}
                   tickFormatter={xAxisTickFormatter}
+                  height={maxLabelHeight}
                   tick={
                     <XAxisTick
-                      getPositionOffset={xAxisPositionData.getPositionOffset}
-                      isFirstTick={xAxisPositionData.isFirstTick}
-                      isLastTick={xAxisPositionData.isLastTick}
+                      variant={tickVariant}
+                      widthOfGroup={widthOfGroup}
+                      labelHeight={maxLabelHeight}
                     />
                   }
                   orientation="bottom"
                   padding={{
-                    left: 25,
-                    right: 20,
+                    left: X_AXIS_PADDING,
+                    right: X_AXIS_PADDING,
                   }}
                 />
 
@@ -387,37 +395,15 @@ const AreaChartComponent = <T extends AreaChartData>({
           {isSideBarTooltipOpen && <SideBarTooltip height={chartHeight} />}
         </div>
         {/* if the data width is greater than the effective width, then show the scroll buttons */}
-        {dataWidth > effectiveWidth && (
-          <div className="crayon-area-chart-scroll-container">
-            <IconButton
-              className={clsx(
-                "crayon-area-chart-scroll-button crayon-area-chart-scroll-button--left",
-                {
-                  "crayon-area-chart-scroll-button--disabled": !canScrollLeft,
-                },
-              )}
-              icon={<ChevronLeft />}
-              variant="secondary"
-              onClick={scrollLeft}
-              size="extra-small"
-              disabled={!canScrollLeft}
-            />
-            <IconButton
-              className={clsx(
-                "crayon-area-chart-scroll-button crayon-area-chart-scroll-button--right",
-                {
-                  "crayon-area-chart-scroll-button--disabled": !canScrollRight,
-                  "crayon-area-chart-scroll-button--SideBarTooltip": isSideBarTooltipOpen,
-                },
-              )}
-              icon={<ChevronRight />}
-              variant="secondary"
-              size="extra-small"
-              onClick={scrollRight}
-              disabled={!canScrollRight}
-            />
-          </div>
-        )}
+        <ScrollButtonsHorizontal
+          dataWidth={dataWidth}
+          effectiveWidth={effectiveWidth}
+          canScrollLeft={canScrollLeft}
+          canScrollRight={canScrollRight}
+          isSideBarTooltipOpen={isSideBarTooltipOpen}
+          onScrollLeft={scrollLeft}
+          onScrollRight={scrollRight}
+        />
         {legend && (
           <DefaultLegend
             items={legendItems}

js/packages/react-ui/src/components/Charts/AreaChart/areaChart.scss

@@ -23,40 +23,3 @@
   /* Hide scrollbar for IE and Edge */
   -ms-overflow-style: none;
 }
-
-.crayon-area-chart-scroll-container {
-  position: relative;
-}
-
-button.crayon-area-chart-scroll-button {
-  position: absolute;
-  background-color: cssUtils.$bg-container;
-
-  &:hover {
-    background-color: cssUtils.$bg-container;
-  }
-
-  &--left {
-    top: -15px;
-    transform: translateY(-50%);
-    left: 20px;
-  }
-
-  &--right {
-    top: -15px;
-    transform: translateY(-50%);
-    right: 0px;
-  }
-
-  &--disabled {
-    visibility: hidden;
-    cursor: not-allowed;
-    transition: visibility 0.1s linear;
-  }
-
-  &--SideBarTooltip {
-    top: -15px;
-    transform: translateY(-50%);
-    right: 185px;
-  }
-}