From cedbfecba85a43260f8ad8535961833c553e9149 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Wed, 10 Dec 2025 15:03:58 +0530 Subject: [PATCH 1/5] DatePicker offset fix --- .../DatePicker/helpers/components/HelperComponents.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/packages/react-ui/src/components/DatePicker/helpers/components/HelperComponents.tsx b/js/packages/react-ui/src/components/DatePicker/helpers/components/HelperComponents.tsx index b8d56b65b..1e16083df 100644 --- a/js/packages/react-ui/src/components/DatePicker/helpers/components/HelperComponents.tsx +++ b/js/packages/react-ui/src/components/DatePicker/helpers/components/HelperComponents.tsx @@ -232,8 +232,8 @@ export const YearsDropdown = ( "crayon-date-picker-select-viewport", botType === "mobile" && "crayon-date-picker-select-viewport-mobile", )} - sideOffset={12} - alignOffset={-75} + sideOffset={0} + alignOffset={-135} style={{ minHeight: `${containerHeight - 45}px`, maxHeight: `${containerHeight - 45}px`, From 3c9229eab351792c4734a86152e3832d0febc0a5 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Wed, 10 Dec 2025 15:08:39 +0530 Subject: [PATCH 2/5] Enhance FloatingDatePickerRenderer interaction handling by adding containerRef for improved click detection. This change allows the component to close when clicking outside both the menu and the container, enhancing user experience. --- .../helpers/components/FloatingDatePickerRenderer.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/js/packages/react-ui/src/components/DatePicker/helpers/components/FloatingDatePickerRenderer.tsx b/js/packages/react-ui/src/components/DatePicker/helpers/components/FloatingDatePickerRenderer.tsx index eded649e0..7ad682b39 100644 --- a/js/packages/react-ui/src/components/DatePicker/helpers/components/FloatingDatePickerRenderer.tsx +++ b/js/packages/react-ui/src/components/DatePicker/helpers/components/FloatingDatePickerRenderer.tsx @@ -93,12 +93,14 @@ export const FloatingDatePickerRenderer = ({ }) => { const { isOpen, setIsOpen } = useDatePicker(); const menuRef = useRef(null); + const containerRef = useRef(null); useEffect(() => { if (!isOpen) return; const handleInteraction = (e: MouseEvent | TouchEvent) => { - if (menuRef.current?.contains(e.target as Node)) { + const targetNode = e.target as Node; + if (menuRef.current?.contains(targetNode) || containerRef.current?.contains(targetNode)) { return; } setIsOpen(false); @@ -115,6 +117,7 @@ export const FloatingDatePickerRenderer = ({ return (
From 16a4053b9568975c2a4b0ad1f3407d5714502edf Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Wed, 10 Dec 2025 15:35:33 +0530 Subject: [PATCH 3/5] Refactor chart components to utilize getLineType for variant handling - Updated AreaChart, AreaChartCondensed, LineChart, LineChartCondensed, MiniAreaChart, and MiniLineChart components to use getLineType for determining the line variant based on the provided variant prop. - Changed variant prop initialization to improve clarity and consistency across chart components. --- .../src/components/Charts/AreaChart/AreaChart.tsx | 5 ++++- .../Charts/AreaChartCondensed/AreaChartCondensed.tsx | 5 ++++- .../src/components/Charts/LineChart/LineChart.tsx | 5 ++++- .../Charts/LineChartCondensed/LineChartCondensed.tsx | 5 ++++- .../Charts/MiniAreaChart/MiniAreaChart.tsx | 8 ++++++-- .../Charts/MiniLineChart/MiniLineChart.tsx | 8 ++++++-- .../components/Charts/utils/AreaAndLine/common.ts | 12 ++++++++++++ 7 files changed, 40 insertions(+), 8 deletions(-) create mode 100644 js/packages/react-ui/src/components/Charts/utils/AreaAndLine/common.ts diff --git a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx index a4e949e9b..0569c76f0 100644 --- a/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx +++ b/js/packages/react-ui/src/components/Charts/AreaChart/AreaChart.tsx @@ -23,6 +23,7 @@ import { getWidthOfData, getWidthOfGroup, } from "../utils/AreaAndLine/AreaAndLineUtils"; +import { getLineType } from "../utils/AreaAndLine/common"; import { PaletteName, useChartPalette } from "../utils/PalletUtils"; import { get2dChartConfig, @@ -64,7 +65,7 @@ const AreaChartComponent = ({ categoryKey, theme = "ocean", customPalette, - variant = "natural", + variant: areaChartVariant = "natural", tickVariant = "multiLine", grid = true, icons = {}, @@ -81,6 +82,8 @@ const AreaChartComponent = ({ return getDataKeys(data, categoryKey as string); }, [data, categoryKey]); + const variant = getLineType(areaChartVariant); + const { yAxisWidth, setLabelWidth } = useYAxisLabelWidth(data, dataKeys); const widthOfGroup = useMemo(() => { diff --git a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx index 2a4fa7380..8e32f2b32 100644 --- a/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/AreaChartCondensed/AreaChartCondensed.tsx @@ -23,6 +23,7 @@ import { } from "../shared"; import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip"; import { LegendItem } from "../types"; +import { getLineType } from "../utils/AreaAndLine/common"; import { get2dChartConfig, getDataKeys, getLegendItems } from "../utils/dataUtils"; import { PaletteName, useChartPalette } from "../utils/PalletUtils"; @@ -53,7 +54,7 @@ const AreaChartCondensedComponent = ({ categoryKey, theme = "ocean", customPalette, - variant = "natural", + variant: areaChartVariant = "natural", tickVariant = "singleLine", grid = true, icons = {}, @@ -70,6 +71,8 @@ const AreaChartCondensedComponent = ({ return getDataKeys(data, categoryKey as string); }, [data, categoryKey]); + const variant = getLineType(areaChartVariant); + const { yAxisWidth, setLabelWidth } = useYAxisLabelWidth(data, dataKeys); const maxLabelWidth = useMaxLabelWidth(data, categoryKey as string); diff --git a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx index 0b90aeb45..eff6f40e8 100644 --- a/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx +++ b/js/packages/react-ui/src/components/Charts/LineChart/LineChart.tsx @@ -23,6 +23,7 @@ import { getWidthOfData, getWidthOfGroup, } from "../utils/AreaAndLine/AreaAndLineUtils"; +import { getLineType } from "../utils/AreaAndLine/common"; import { PaletteName, useChartPalette } from "../utils/PalletUtils"; import { get2dChartConfig, @@ -63,7 +64,7 @@ export const LineChart = ({ categoryKey, theme = "ocean", customPalette, - variant = "natural", + variant: lineChartVariant = "natural", tickVariant = "multiLine", grid = true, icons = {}, @@ -81,6 +82,8 @@ export const LineChart = ({ return getDataKeys(data, categoryKey as string); }, [data, categoryKey]); + const variant = getLineType(lineChartVariant); + const { yAxisWidth, setLabelWidth } = useYAxisLabelWidth(data, dataKeys); const widthOfGroup = useMemo(() => { diff --git a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx index fe1d8af4d..f425b74be 100644 --- a/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx +++ b/js/packages/react-ui/src/components/Charts/LineChartCondensed/LineChartCondensed.tsx @@ -23,6 +23,7 @@ import { } from "../shared"; import { LabelTooltipProvider } from "../shared/LabelTooltip/LabelTooltip"; import { LegendItem } from "../types"; +import { getLineType } from "../utils/AreaAndLine/common"; import { get2dChartConfig, getDataKeys, getLegendItems } from "../utils/dataUtils"; import { PaletteName, useChartPalette } from "../utils/PalletUtils"; @@ -54,7 +55,7 @@ const LineChartCondensedComponent = ({ categoryKey, theme = "ocean", customPalette, - variant = "natural", + variant: lineChartVariant = "natural", tickVariant = "singleLine", grid = true, icons = {}, @@ -72,6 +73,8 @@ const LineChartCondensedComponent = ({ return getDataKeys(data, categoryKey as string); }, [data, categoryKey]); + const variant = getLineType(lineChartVariant); + const { yAxisWidth, setLabelWidth } = useYAxisLabelWidth(data, dataKeys); const maxLabelWidth = useMaxLabelWidth(data, categoryKey as string); diff --git a/js/packages/react-ui/src/components/Charts/MiniAreaChart/MiniAreaChart.tsx b/js/packages/react-ui/src/components/Charts/MiniAreaChart/MiniAreaChart.tsx index 0e83d6c39..f2dfc7198 100644 --- a/js/packages/react-ui/src/components/Charts/MiniAreaChart/MiniAreaChart.tsx +++ b/js/packages/react-ui/src/components/Charts/MiniAreaChart/MiniAreaChart.tsx @@ -2,12 +2,14 @@ import clsx from "clsx"; import { useEffect, useMemo, useRef, useState } from "react"; import { Area, AreaChart as RechartsAreaChart, XAxis } from "recharts"; import { useId } from "../../../polyfills"; +import { AreaChartVariant } from "../AreaChart/types"; import { ChartConfig, ChartContainer } from "../Charts"; import { DATA_KEY, getRecentDataThatFits, transformDataForChart, } from "../utils/AreaAndLine/MiniAreaAndLineUtils"; +import { getLineType } from "../utils/AreaAndLine/common"; import { useChartPalette, type PaletteName } from "../utils/PalletUtils"; import { get2dChartConfig } from "../utils/dataUtils"; import { MiniAreaChartData } from "./types"; @@ -16,7 +18,7 @@ export interface MiniAreaChartProps { data: MiniAreaChartData; theme?: PaletteName; customPalette?: string[]; - variant?: "linear" | "natural" | "step"; + variant?: AreaChartVariant; opacity?: number; isAnimationActive?: boolean; onAreaClick?: (data: any) => void; @@ -30,7 +32,7 @@ export const MiniAreaChart = ({ data, theme = "ocean", customPalette, - variant = "natural", + variant: areaChartVariant = "natural", opacity = 0.5, isAnimationActive = false, onAreaClick, @@ -42,6 +44,8 @@ export const MiniAreaChart = ({ const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(0); + const variant = getLineType(areaChartVariant); + useEffect(() => { if (!containerRef.current) { return () => {}; diff --git a/js/packages/react-ui/src/components/Charts/MiniLineChart/MiniLineChart.tsx b/js/packages/react-ui/src/components/Charts/MiniLineChart/MiniLineChart.tsx index 74250882a..4f9c5ce0e 100644 --- a/js/packages/react-ui/src/components/Charts/MiniLineChart/MiniLineChart.tsx +++ b/js/packages/react-ui/src/components/Charts/MiniLineChart/MiniLineChart.tsx @@ -2,11 +2,13 @@ import clsx from "clsx"; import { useEffect, useMemo, useRef, useState } from "react"; import { Line, LineChart as RechartsLineChart, XAxis } from "recharts"; import { ChartConfig, ChartContainer } from "../Charts"; +import { LineChartVariant } from "../LineChart/types"; import { DATA_KEY, getRecentDataThatFits, transformDataForChart, } from "../utils/AreaAndLine/MiniAreaAndLineUtils"; +import { getLineType } from "../utils/AreaAndLine/common"; import { useChartPalette, type PaletteName } from "../utils/PalletUtils"; import { get2dChartConfig } from "../utils/dataUtils"; import { MiniLineChartData } from "./types"; @@ -15,7 +17,7 @@ export interface MiniLineChartProps { data: MiniLineChartData; theme?: PaletteName; customPalette?: string[]; - variant?: "linear" | "natural" | "step"; + variant?: LineChartVariant; strokeWidth?: number; isAnimationActive?: boolean; onLineClick?: (data: any) => void; @@ -28,7 +30,7 @@ export const MiniLineChart = ({ data, theme = "ocean", customPalette, - variant = "natural", + variant: lineChartVariant = "natural", strokeWidth = 2, isAnimationActive = true, onLineClick, @@ -39,6 +41,8 @@ export const MiniLineChart = ({ const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(0); + const variant = getLineType(lineChartVariant); + useEffect(() => { if (!containerRef.current) { return () => {}; diff --git a/js/packages/react-ui/src/components/Charts/utils/AreaAndLine/common.ts b/js/packages/react-ui/src/components/Charts/utils/AreaAndLine/common.ts new file mode 100644 index 000000000..2081521fd --- /dev/null +++ b/js/packages/react-ui/src/components/Charts/utils/AreaAndLine/common.ts @@ -0,0 +1,12 @@ +import { AreaChartVariant, LineChartVariant } from "../.."; + +export const getLineType = (lineType: LineChartVariant | AreaChartVariant) => { + switch (lineType) { + case "linear": + return "linear"; + case "natural": + return "monotone"; + case "step": + return "step"; + } +}; From b72b3e8808012a9c875752f0ee60fbb7a34d747a Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Wed, 10 Dec 2025 15:50:10 +0530 Subject: [PATCH 4/5] Add SuperCondensedStory to BarChartCondensed stories and enforce minimum bar width logic - Introduced a new story, SuperCondensedStory, to demonstrate the BarChartCondensed with a high density of data points in a narrow container. - Implemented logic to remove rounded corners for bars thinner than 7px and enforce a minimum bar width of 2px. - Enhanced documentation for the new story to highlight its use cases and visual characteristics. --- .../stories/barChartCondensed.stories.tsx | 84 +++++++++++++++++++ .../shared/LineInBarShape/LineInBarShape.tsx | 7 ++ 2 files changed, 91 insertions(+) diff --git a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx index 1cab9d8c3..8559aecf6 100644 --- a/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx +++ b/js/packages/react-ui/src/components/Charts/BarChartCondensed/stories/barChartCondensed.stories.tsx @@ -1059,6 +1059,90 @@ export const TickVariantComparison: Story = { }, }; +/** + * ## Super Condensed Bar Chart + * + * This story demonstrates the chart with many data points in a very narrow container, + * creating extremely thin bars. This tests the minimum bar width logic and the + * automatic removal of rounded corners for bars thinner than 7px. + */ +export const SuperCondensedStory: Story = { + name: "🔬 Super Condensed (Many Bars)", + args: { + data: [ + { month: "Jan '23", desktop: 150, mobile: 90, tablet: 60 }, + { month: "Feb '23", desktop: 280, mobile: 180, tablet: 100 }, + { month: "Mar '23", desktop: 220, mobile: 140, tablet: 80 }, + { month: "Apr '23", desktop: 180, mobile: 160, tablet: 90 }, + { month: "May '23", desktop: 250, mobile: 120, tablet: 70 }, + { month: "Jun '23", desktop: 300, mobile: 180, tablet: 110 }, + { month: "Jul '23", desktop: 350, mobile: 220, tablet: 130 }, + { month: "Aug '23", desktop: 400, mobile: 240, tablet: 150 }, + { month: "Sep '23", desktop: 450, mobile: 260, tablet: 170 }, + { month: "Oct '23", desktop: 500, mobile: 280, tablet: 190 }, + { month: "Nov '23", desktop: 550, mobile: 300, tablet: 210 }, + { month: "Dec '23", desktop: 600, mobile: 320, tablet: 230 }, + { month: "Jan '24", desktop: 620, mobile: 340, tablet: 250 }, + { month: "Feb '24", desktop: 640, mobile: 360, tablet: 270 }, + { month: "Mar '24", desktop: 680, mobile: 380, tablet: 290 }, + { month: "Apr '24", desktop: 700, mobile: 400, tablet: 310 }, + { month: "May '24", desktop: 720, mobile: 420, tablet: 330 }, + { month: "Jun '24", desktop: 750, mobile: 440, tablet: 350 }, + { month: "Jul '24", desktop: 780, mobile: 460, tablet: 370 }, + { month: "Aug '24", desktop: 800, mobile: 480, tablet: 390 }, + { month: "Sep '24", desktop: 820, mobile: 500, tablet: 410 }, + { month: "Oct '24", desktop: 850, mobile: 520, tablet: 430 }, + { month: "Nov '24", desktop: 880, mobile: 540, tablet: 450 }, + { month: "Dec '24", desktop: 900, mobile: 560, tablet: 470 }, + ] as any, + categoryKey: "month" as any, + theme: "ocean", + variant: "grouped", + tickVariant: "angled", + radius: 4, + grid: true, + isAnimationActive: false, + showYAxis: true, + height: 180, + }, + render: (args: any) => ( +
+
+

🔬 Ultra Condensed View

+

+ 24 months × 3 series = 72 bars in 320px width. Each bar is ~4px wide or less! +

+
    +
  • Bars {"<"} 7px wide = no rounded corners
    • +
  • Minimum bar width: 2px enforced
    • +
  • Angled labels prevent overlap
    • +
  • Internal lines hidden on thin bars
    • +
+
+ + + +
+ ), + parameters: { + docs: { + description: { + story: + "**Extreme density test** with 24 data points × 3 series (72 total bars) in a 320px container, making each bar approximately 4px wide or less. This demonstrates:\n\n- **Automatic corner removal**: Bars thinner than 7px automatically become square (no rounded corners)\n- **Minimum width enforcement**: Bars maintain a minimum width of 2px for visibility\n- **Grouped bar handling**: Multiple series create even thinner individual bars\n- **Label handling**: Angled labels prevent overlap in ultra-dense scenarios\n- **Internal line hiding**: The internal line is hidden when bars are too thin to display it properly\n\nThis represents an extreme edge case useful for:\n- Compact dashboard widgets\n- Sidebar sparkline-style analytics\n- Mobile-optimized views\n- High-density data visualization in limited space", + }, + }, + }, +}; + /** * ## Responsive Behavior Demo * diff --git a/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx b/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx index b4af728bb..f984adef6 100644 --- a/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx +++ b/js/packages/react-ui/src/components/Charts/shared/LineInBarShape/LineInBarShape.tsx @@ -89,6 +89,13 @@ const LineInBarShape: FunctionComponent = React.memo((props return { rTL: 0, rTR: 0, rBL: 0, rBR: 0 }; } + // Check bar thickness and remove rounded corners if too thin + // For vertical bars: check width, for horizontal bars: check height + const barThickness = isVertical ? w : h; + if (barThickness < 7) { + return { rTL: 0, rTR: 0, rBL: 0, rBR: 0 }; + } + // If radius is an array, apply specific radius to each corner if (Array.isArray(r)) { // The radius array is expected to be in the format [rTL, rTR, rBR, rBL]. From 5742c6d0137d24653470c623ad0584e4fac761f4 Mon Sep 17 00:00:00 2001 From: ankit-thesys Date: Wed, 10 Dec 2025 16:01:35 +0530 Subject: [PATCH 5/5] Bump version to 0.9.7 in package.json for @crayonai/react-ui --- js/packages/react-ui/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/packages/react-ui/package.json b/js/packages/react-ui/package.json index 0f10f4380..f0f6afe4b 100644 --- a/js/packages/react-ui/package.json +++ b/js/packages/react-ui/package.json @@ -2,7 +2,7 @@ "type": "module", "name": "@crayonai/react-ui", "license": "MIT", - "version": "0.9.6", + "version": "0.9.7", "description": "Component library for Generative UI SDK", "main": "dist/index.js", "types": "dist/index.d.ts",