flikkui 0.2.0-beta.8 → 0.2.0-beta.9

package/dist/components/charts/AreaChart/AreaChart.js

@@ -9,102 +9,11 @@ import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { generateNiceTicks } from '../utils/chart-validation.js';
+import { generateCurvePath } from '../utils/path-utils.js';
 import { AREA_CHART_DEFAULTS } from './AreaChart.types.js';
 import { areaChartTheme, getSeriesFillColor, getSeriesColorClass } from './AreaChart.theme.js';
 
-// Simplified curve generation
-const generateMonotonePath = (points) => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        // Calculate control points for smooth curve
-        const dx = curr.x - prev.x;
-        const controlDistance = dx * 0.3;
-        const cp1x = prev.x + controlDistance;
-        const cp1y = prev.y;
-        const cp2x = curr.x - controlDistance;
-        const cp2y = curr.y;
-        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
-    }
-    return path;
-};
-const generateLinearPath = (points) => {
-    if (points.length === 0)
-        return "";
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        path += ` L ${points[i].x} ${points[i].y}`;
-    }
-    return path;
-};
-const generateStepPath = (points) => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        const midX = prev.x + (curr.x - prev.x) / 2;
-        // Step: horizontal to midpoint, vertical to current y, horizontal to current x
-        path += ` L ${midX} ${prev.y} L ${midX} ${curr.y} L ${curr.x} ${curr.y}`;
-    }
-    return path;
-};
-const generateStepBeforePath = (points) => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        // Step before: vertical first, then horizontal
-        path += ` L ${prev.x} ${curr.y} L ${curr.x} ${curr.y}`;
-    }
-    return path;
-};
-const generateStepAfterPath = (points) => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        // Step after: horizontal first, then vertical
-        path += ` L ${curr.x} ${prev.y} L ${curr.x} ${curr.y}`;
-    }
-    return path;
-};
-// Simple curve implementation
-const generateCurvePath = (points, curveType = "monotone") => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    switch (curveType) {
-        case "monotone":
-            return generateMonotonePath(points);
-        case "step":
-            return generateStepPath(points);
-        case "stepBefore":
-            return generateStepBeforePath(points);
-        case "stepAfter":
-            return generateStepAfterPath(points);
-        case "linear":
-        default:
-            return generateLinearPath(points);
-    }
-};
 const AreaChart = ({ data, config, 
 // Standardized display props with defaults
 showGrid = AREA_CHART_DEFAULTS.showGrid, showXAxis = AREA_CHART_DEFAULTS.showXAxis, showYAxis = AREA_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, variant = AREA_CHART_DEFAULTS.variant, theme, 
@@ -193,18 +102,16 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
             const value = item[key];
             return typeof value === "number" ? value : 0;
         }))));
-    const minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
-    const maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (() => {
-        if (rawMaxValue <= 10)
-            return Math.ceil(rawMaxValue);
-        if (rawMaxValue <= 100)
-            return Math.ceil(rawMaxValue / 5) * 5;
-        if (rawMaxValue <= 1000)
-            return Math.ceil(rawMaxValue / 50) * 50;
-        if (rawMaxValue <= 10000)
-            return Math.ceil(rawMaxValue / 500) * 500;
-        return Math.ceil(rawMaxValue / 1000) * 1000;
-    })();
+    const rawMinValue = Math.min(...data.map((item) => Math.min(...dataKeys.map((key) => {
+        const value = item[key];
+        return typeof value === "number" ? value : 0;
+    }))));
+    // Compute nice axis boundaries using Heckbert's algorithm
+    const dataMinWithZero = Math.min(rawMinValue, 0);
+    const dataMaxWithZero = Math.max(rawMaxValue, 0);
+    const { niceMin, niceMax } = generateNiceTicks(dataMinWithZero, dataMaxWithZero, 5);
+    let minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : niceMin;
+    let maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : niceMax;
     // Calculate point position
     const getPointPosition = (dataIndex, value) => {
         // Spread points evenly across the full width
@@ -256,7 +163,7 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
                 const value = typeof rawValue === "number" ? rawValue : 0;
                 let baselineValue = stacked && seriesStackedValues
                     ? seriesStackedValues[index]
-                    : minValue;
+                    : 0;
                 let topValue = stacked && seriesStackedValues
                     ? seriesStackedValues[index] + value
                     : value;
@@ -351,10 +258,11 @@ svgClassName, areaClassName, lineClassName, gridClassName, axisClassName, childr
                     })()
                     : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
             React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, className: axisClassName, tickFormatter: (value) => {
-                    if (value >= 1000)
+                    if (Math.abs(value) >= 1000)
                         return `${(value / 1000).toFixed(0)}k`;
                     return value.toString();
                 } }),
+            minValue < 0 && maxValue > 0 && (React__default.createElement("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })),
             React__default.createElement("g", { className: cn(areaChartTheme.areaGroupStyle, areaClassName), clipPath: `url(#${clipId})` }, dataKeys.map((key, keyIndex) => {
                 const paths = generatePathData(key); // Actual path
                 const colorClass = getSeriesColorClass(keyIndex);

package/dist/components/charts/BarChart/BarChart.js

@@ -140,6 +140,19 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
       Z
     `.trim();
     };
+    // Helper function to create a path for bars with only bottom corners rounded (for negative bars)
+    const createRoundedBottomBarPath = (x, y, width, height, radius) => {
+        const r = Math.min(radius, width / 2, height / 2);
+        return `
+      M ${x},${y}
+      L ${x + width},${y}
+      L ${x + width},${y + height - r}
+      Q ${x + width},${y + height} ${x + width - r},${y + height}
+      L ${x + r},${y + height}
+      Q ${x},${y + height} ${x},${y + height - r}
+      Z
+    `.trim();
+    };
     // Calculate dimensions with safe math
     const margin = {
         top: 15,
@@ -193,11 +206,15 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 const key = dataKeys[0]; // Show first series for keyboard navigation
                 const value = item[key];
                 if (typeof value === "number" && isFinite(value)) {
-                    // Calculate position for focused bar with safe math
+                    // Calculate position for focused bar with safe math using zero baseline
                     const x = margin.left + focusedElementIndex * (barWidth + categoryGap);
                     const range = maxValue - minValue;
-                    const barHeight = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
-                    const y = margin.top + innerHeight - barHeight;
+                    const scaledValue = range > 0 ? ((value - minValue) / range) * innerHeight : 0;
+                    const scaledZero = range > 0 ? ((0 - minValue) / range) * innerHeight : 0;
+                    const zeroY = margin.top + innerHeight - scaledZero;
+                    const barHeight = Math.abs(scaledValue - scaledZero);
+                    const isNeg = value < 0;
+                    const y = isNeg ? zeroY : zeroY - barHeight;
                     // Get the fill color for the first series (index 0)
                     const fillColor = getSeriesFillColor(0);
                     const content = {
@@ -269,7 +286,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         return map;
     }, [sanitizedData.length, dataKeys.join(","), showPlaceholderBars]);
     // Helper function to render individual bar path
-    const renderBarPath = (item, index, key, keyIndex, barX, barY, barHeight, shouldAnimate = true) => {
+    const renderBarPath = (item, index, key, keyIndex, barX, barY, barHeight, shouldAnimate = true, isNegative = false) => {
         var _a;
         const rawValue = item[key];
         const isNull = rawValue === null ||
@@ -333,7 +350,9 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
         if (barHeight <= 0 || individualBarWidth <= 0) {
             return null;
         }
-        const pathD = createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
+        const pathD = isNegative
+            ? createRoundedBottomBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius)
+            : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, resolvedBarRadius);
         const delay = (index * dataKeys.length + keyIndex) * BAR_STAGGER;
         return (React__default.createElement(motion.path, { key: keyIndex, d: pathD, initial: shouldAnimate && showAnimation && !shouldReduceMotion
                 ? { scaleY: 0, opacity: 0 }
@@ -346,8 +365,8 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                 damping: 20,
                 delay,
             }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
-                originY: 1,
-                transformOrigin: "bottom",
+                originY: isNegative ? 0 : 1,
+                transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
                     ? "var(--color-background-tertiary)"
                     : shouldReduceOpacity
@@ -380,7 +399,7 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                         return (rawVal != null &&
                             typeof rawVal === "number" &&
                             isFinite(rawVal) &&
-                            rawVal > 0);
+                            rawVal !== 0);
                     });
                     const content = {
                         category: item.name || `Category ${index + 1}`,
@@ -430,33 +449,45 @@ className, title, description, enableKeyboardNavigation = BAR_CHART_DEFAULTS.ena
                         React__default.createElement("path", { d: "M-2,2 l4,-4\n                   M0,8 l8,-8\n                   M6,10 l4,-4", style: { stroke: "black", strokeWidth: 4, opacity: 0.1 } }))),
                 React__default.createElement(HorizontalGrid, { show: showGrid, x: margin.left, y: margin.top, width: innerWidth, height: innerHeight, lineCount: 5 }),
                 React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
-                        if (value >= 1000)
+                        if (Math.abs(value) >= 1000)
                             return `${(value / 1000).toFixed(0)}k`;
                         return value.toString();
                     } }),
-                React__default.createElement("g", { className: "chart-bars" }, sanitizedData.map((item, index) => {
-                    const x = margin.left + index * (barWidth + categoryGap);
-                    return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
-                        const rawValue = item[key];
-                        const value = typeof rawValue === "number" && isFinite(rawValue)
-                            ? rawValue
-                            : 0;
-                        const isNull = rawValue === null ||
-                            rawValue === undefined ||
-                            (typeof rawValue === "number" && !isFinite(rawValue));
-                        // For null values, use the average of non-null values
-                        const actualValue = isNull
-                            ? calculateAverageForKey(key)
-                            : value;
-                        const range = maxValue - minValue;
-                        const barHeight = range > 0
-                            ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
-                            : 0;
-                        const barX = x + keyIndex * (individualBarWidth + gap);
-                        const barY = margin.top + innerHeight - barHeight;
-                        return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true);
-                    })));
-                })),
+                minValue < 0 && maxValue > 0 && (React__default.createElement("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })),
+                React__default.createElement("g", { className: "chart-bars" }, (() => {
+                    // Calculate the zero baseline position (where value=0 maps to in pixel space)
+                    const range = maxValue - minValue;
+                    const scaledZero = range > 0
+                        ? safeMath.scale(0, minValue, maxValue, 0, innerHeight)
+                        : 0;
+                    const zeroY = margin.top + innerHeight - scaledZero;
+                    return sanitizedData.map((item, index) => {
+                        const x = margin.left + index * (barWidth + categoryGap);
+                        return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
+                            const rawValue = item[key];
+                            const value = typeof rawValue === "number" && isFinite(rawValue)
+                                ? rawValue
+                                : 0;
+                            const isNull = rawValue === null ||
+                                rawValue === undefined ||
+                                (typeof rawValue === "number" && !isFinite(rawValue));
+                            // For null values, use the average of non-null values
+                            const actualValue = isNull
+                                ? calculateAverageForKey(key)
+                                : value;
+                            const scaledValue = range > 0
+                                ? safeMath.scale(actualValue, minValue, maxValue, 0, innerHeight)
+                                : 0;
+                            const barHeight = Math.abs(scaledValue - scaledZero);
+                            const isNeg = actualValue < 0;
+                            const barX = x + keyIndex * (individualBarWidth + gap);
+                            // Positive: bar extends upward from zero baseline
+                            // Negative: bar extends downward from zero baseline
+                            const barY = isNeg ? zeroY : zeroY - barHeight;
+                            return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, isNeg);
+                        })));
+                    });
+                })()),
                 React__default.createElement(XAxis, { show: showXAxis, data: sanitizedData, x: margin.left, y: margin.top + innerHeight, width: innerWidth, categoryWidth: barWidth, categoryGap: categoryGap })),
             React__default.createElement(ChartTooltip, { tooltipRef: tooltipRef, content: tooltipData === null || tooltipData === void 0 ? void 0 : tooltipData.content, active: !!tooltipData, position: tooltipData
                     ? { x: tooltipData.x, y: tooltipData.y }

package/dist/components/charts/ComboChart/ComboChart.js

@@ -59,7 +59,7 @@ const ComboChartRenderers = ({ barKeys, lineKeys, stacked, barRadius, dotRadius,
             }).filter(series => {
                 // Only show series that have valid non-zero values
                 const rawVal = dataItem[series.key];
-                return rawVal != null && typeof rawVal === 'number' && isFinite(rawVal) && rawVal > 0;
+                return rawVal != null && typeof rawVal === 'number' && isFinite(rawVal) && rawVal !== 0;
             });
             const enhancedContent = {
                 category: content.category,

package/dist/components/charts/LineChart/LineChart.js

@@ -9,6 +9,8 @@ import { HorizontalGrid } from '../shared/ChartGrid/HorizontalGrid.js';
 import { ChartTooltip } from '../shared/ChartTooltip/ChartTooltip.js';
 import { ChartMarker } from '../shared/ChartMarker/ChartMarker.js';
 import { ChartCrosshair } from '../shared/ChartCrosshair/ChartCrosshair.js';
+import { generateNiceTicks } from '../utils/chart-validation.js';
+import { generateCurvePath } from '../utils/path-utils.js';
 import { LINE_CHART_DEFAULTS } from './LineChart.types.js';
 
 // Production-ready color system with CORRECT CSS variable syntax
@@ -31,53 +33,6 @@ const getSeriesFillColor = (index) => {
     ];
     return colorVars[index % colorVars.length];
 };
-// Monotone cubic interpolation implementation based on D3's curveMonotoneX
-const generateMonotonePath = (points) => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        const prev = points[i - 1];
-        const curr = points[i];
-        // Calculate control points for smooth curve
-        const dx = curr.x - prev.x;
-        curr.y - prev.y;
-        // Control point distance (adjust for smoothness)
-        const controlDistance = dx * 0.3;
-        const cp1x = prev.x + controlDistance;
-        const cp1y = prev.y;
-        const cp2x = curr.x - controlDistance;
-        const cp2y = curr.y;
-        path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${curr.x} ${curr.y}`;
-    }
-    return path;
-};
-const generateLinearPath = (points) => {
-    if (points.length === 0)
-        return "";
-    let path = `M ${points[0].x} ${points[0].y}`;
-    for (let i = 1; i < points.length; i++) {
-        path += ` L ${points[i].x} ${points[i].y}`;
-    }
-    return path;
-};
-// Simple curve implementation
-const generateCurvePath = (points, curveType = "monotone") => {
-    if (points.length === 0)
-        return "";
-    if (points.length === 1)
-        return `M ${points[0].x} ${points[0].y}`;
-    switch (curveType) {
-        case "monotone":
-            return generateMonotonePath(points);
-        case "linear":
-            return generateLinearPath(points);
-        default:
-            return generateLinearPath(points);
-    }
-};
 const LineChart = ({ data, config, 
 // Standardized display props with defaults
 showGrid = LINE_CHART_DEFAULTS.showGrid, showXAxis = LINE_CHART_DEFAULTS.showXAxis, showYAxis = LINE_CHART_DEFAULTS.showYAxis, minValue: propMinValue, maxValue: propMaxValue, 
@@ -160,18 +115,16 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
         const value = item[key];
         return typeof value === "number" ? value : 0;
     }))));
-    const minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0;
-    const maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : (() => {
-        if (rawMaxValue <= 10)
-            return Math.ceil(rawMaxValue);
-        if (rawMaxValue <= 100)
-            return Math.ceil(rawMaxValue / 5) * 5;
-        if (rawMaxValue <= 1000)
-            return Math.ceil(rawMaxValue / 50) * 50;
-        if (rawMaxValue <= 10000)
-            return Math.ceil(rawMaxValue / 500) * 500;
-        return Math.ceil(rawMaxValue / 1000) * 1000;
-    })();
+    const rawMinValue = Math.min(...data.map((item) => Math.min(...dataKeys.map((key) => {
+        const value = item[key];
+        return typeof value === "number" ? value : 0;
+    }))));
+    // Compute nice axis boundaries using Heckbert's algorithm
+    const dataMinWithZero = Math.min(rawMinValue, 0);
+    const dataMaxWithZero = Math.max(rawMaxValue, 0);
+    const { niceMin, niceMax } = generateNiceTicks(dataMinWithZero, dataMaxWithZero, 5);
+    let minValue = propMinValue !== null && propMinValue !== void 0 ? propMinValue : niceMin;
+    let maxValue = propMaxValue !== null && propMaxValue !== void 0 ? propMaxValue : niceMax;
     // Calculate point position
     const getPointPosition = (dataIndex, value) => {
         // Spread points evenly across the full width
@@ -316,10 +269,11 @@ className, title, description, enableKeyboardNavigation = LINE_CHART_DEFAULTS.en
                     })()
                     : undefined, margin: margin, innerWidth: innerWidth, innerHeight: innerHeight, showHorizontal: dataKeys.length === 1 }),
             React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
-                    if (value >= 1000)
+                    if (Math.abs(value) >= 1000)
                         return `${(value / 1000).toFixed(0)}k`;
                     return value.toString();
                 } }),
+            minValue < 0 && maxValue > 0 && (React__default.createElement("line", { x1: margin.left, y1: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, x2: margin.left + innerWidth, y2: margin.top + innerHeight - ((0 - minValue) / (maxValue - minValue)) * innerHeight, className: "stroke-[var(--color-text-secondary)]", strokeWidth: 1, opacity: 0.6 })),
             React__default.createElement("g", { className: "chart-lines" }, dataKeys.map((key, keyIndex) => {
                 const targetPath = generatePath(key);
                 const colorClass = getSeriesColorClass(keyIndex);

package/dist/components/charts/StackedBarChart/StackedBarChart.js

@@ -300,7 +300,7 @@ className, title, description, enableKeyboardNavigation = STACKED_BAR_CHART_DEFA
                 React__default.createElement(YAxis, { show: showYAxis, min: minValue, max: maxValue, x: margin.left, y: margin.top, height: innerHeight, showGrid: false, gridWidth: innerWidth, tickFormatter: (value) => {
                         if (stackOffset === "expand")
                             return `${value}%`;
-                        if (value >= 1000)
+                        if (Math.abs(value) >= 1000)
                             return `${(value / 1000).toFixed(0)}k`;
                         return value.toString();
                     } }),

package/dist/components/charts/hooks/useChartScales.d.ts

@@ -31,10 +31,6 @@ export interface UseChartScalesOptions {
      * Gap between categories
      */
     categoryGap?: number;
-    /**
-     * Whether to use smart rounding for line charts
-     */
-    useSmartRounding?: boolean;
 }
 export interface ChartScales {
     /**

package/dist/components/charts/hooks/useChartScales.js

@@ -1,26 +1,12 @@
 import { useMemo } from 'react';
 import { useChartValidation } from './useChartValidation.js';
 
-/**
- * Smart rounding for line chart Y-axis (matches LineChart logic)
- */
-function smartRoundMaxValue(rawMax) {
-    if (rawMax <= 10)
-        return Math.ceil(rawMax);
-    if (rawMax <= 100)
-        return Math.ceil(rawMax / 5) * 5;
-    if (rawMax <= 1000)
-        return Math.ceil(rawMax / 50) * 50;
-    if (rawMax <= 10000)
-        return Math.ceil(rawMax / 500) * 500;
-    return Math.ceil(rawMax / 1000) * 1000;
-}
 /**
  * Unified hook for chart scale calculations
  * Handles both bar and line charts with consistent logic
  */
 function useChartScales(options) {
-    const { data, config, chartType = 'bar', stacked = false, minValue: propMinValue, maxValue: propMaxValue, includeZero = true, innerWidth = 600, categoryGap = 8, useSmartRounding = false, } = options;
+    const { data, config, chartType = 'bar', stacked = false, minValue: propMinValue, maxValue: propMaxValue, includeZero = true, innerWidth = 600, categoryGap = 8, } = options;
     // Use validation hook for data sanitization and safe calculations
     const { validation, sanitizedData, isValid, hasWarnings, safeScale, safeMath, } = useChartValidation(data, config, {
         autoSanitize: true,
@@ -96,18 +82,6 @@ function useChartScales(options) {
                 includeZero,
             });
         }
-        // Apply smart rounding for line charts if requested
-        if (useSmartRounding && chartType === 'line' && propMaxValue === undefined) {
-            const rawMaxValue = Math.max(...sanitizedData.map((item) => Math.max(...dataKeys.map((key) => {
-                const value = item[key];
-                return typeof value === "number" ? value : 0;
-            }))));
-            return {
-                min: propMinValue !== null && propMinValue !== void 0 ? propMinValue : 0,
-                max: smartRoundMaxValue(rawMaxValue),
-                hasValidData: scaleRange.hasValidData,
-            };
-        }
         return scaleRange;
     }, [
         sanitizedData,
@@ -119,7 +93,6 @@ function useChartScales(options) {
         propMaxValue,
         includeZero,
         safeScale,
-        useSmartRounding,
     ]);
     // Calculate X-axis scale
     const xScale = useMemo(() => {

package/dist/components/charts/index.d.ts

@@ -44,7 +44,7 @@ export type { ComboChartProps, ComboChartConfig, SeriesType, } from "./ComboChar
 export type { ActivityRingsProps, RingData, ActivityRingsThemeOverrides, } from "./ActivityRings/ActivityRings.types";
 export { chartTheme } from "./theme/chart.theme";
 export { extractFillClass, extractStrokeClass, colorClassToVariable, combineClasses, createColorClass, generateSeriesColors, DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, } from "./utils/color-utils";
-export { validateChart, validateChartData, validateChartConfig, sanitizeChartData, calculateSafeScaleRange, SafeMath, } from "./utils/chart-validation";
+export { validateChart, validateChartData, validateChartConfig, sanitizeChartData, calculateSafeScaleRange, niceNum, generateNiceTicks, SafeMath, } from "./utils/chart-validation";
 export { BAR_CHART_DEFAULTS } from "./BarChart/BarChart.types";
 export { STACKED_BAR_CHART_DEFAULTS } from "./StackedBarChart/StackedBarChart.types";
 export { LINE_CHART_DEFAULTS } from "./LineChart/LineChart.types";

package/dist/components/charts/index.js

@@ -31,7 +31,7 @@ export { useChartAccessibility } from './hooks/useChartAccessibility.js';
 export { useChartValidation } from './hooks/useChartValidation.js';
 export { DEFAULT_CHART_COLORS, EXTENDED_CHART_COLORS, MINIMAL_CHART_COLORS, colorClassToVariable, combineClasses, createColorClass, extractFillClass, extractStrokeClass, generateColorPalette, generateSeriesColors, getContrastColor } from './utils/color-utils.js';
 export { chartTheme } from './theme/chart.theme.js';
-export { SafeMath, calculateSafeScaleRange, sanitizeChartData, validateChart, validateChartConfig, validateChartData } from './utils/chart-validation.js';
+export { SafeMath, calculateSafeScaleRange, generateNiceTicks, niceNum, sanitizeChartData, validateChart, validateChartConfig, validateChartData } from './utils/chart-validation.js';
 export { BAR_CHART_DEFAULTS } from './BarChart/BarChart.types.js';
 export { LINE_CHART_DEFAULTS } from './LineChart/LineChart.types.js';
 export { AREA_CHART_DEFAULTS } from './AreaChart/AreaChart.types.js';

package/dist/components/charts/shared/BarRenderer/BarRenderer.js

@@ -33,6 +33,21 @@ const createRoundedTopBarPath = (x, y, width, height, radius) => {
     Z
   `.trim();
 };
+/**
+ * Helper function to create a path for bars with only bottom corners rounded (for negative bars)
+ */
+const createRoundedBottomBarPath = (x, y, width, height, radius) => {
+    const r = Math.min(radius, width / 2, height / 2);
+    return `
+    M ${x},${y}
+    L ${x + width},${y}
+    L ${x + width},${y + height - r}
+    Q ${x + width},${y + height} ${x + width - r},${y + height}
+    L ${x + r},${y + height}
+    Q ${x},${y + height} ${x},${y + height - r}
+    Z
+  `.trim();
+};
 /**
  * BarRenderer Component
  *
@@ -84,7 +99,7 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         return safeDivide(sum, nonNullValues.length);
     }, [data]);
     // Render individual bar path
-    const renderBarPath = useCallback((item, index, key, keyIndex, barX, barY, barHeight, applyRadius, isStacked, stackOrderIndex) => {
+    const renderBarPath = useCallback((item, index, key, keyIndex, barX, barY, barHeight, applyRadius, isStacked, stackOrderIndex, isNegative) => {
         var _a;
         const rawValue = item[key];
         const isNull = rawValue === null ||
@@ -104,7 +119,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         if (barHeight <= 0 || individualBarWidth <= 0) {
             return null;
         }
-        const pathD = createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0);
+        const pathD = isNegative
+            ? createRoundedBottomBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0)
+            : createRoundedTopBarPath(barX, barY, individualBarWidth, barHeight, applyRadius ? radius : 0);
         const stackedDelayOrder = typeof stackOrderIndex === "number" ? stackOrderIndex : keyIndex;
         const delay = isStacked
             ? index * STACKED_CATEGORY_DELAY +
@@ -127,8 +144,8 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                     damping: 20,
                     delay,
                 }, className: cn("transition-colors duration-200", !isNull && "cursor-pointer", isFocused && "stroke-2"), style: {
-                originY: 1,
-                transformOrigin: "bottom",
+                originY: isNegative ? 0 : 1,
+                transformOrigin: isNegative ? "top" : "bottom",
                 fill: isNull
                     ? "var(--color-background-tertiary)"
                     : shouldReduceOpacity
@@ -163,7 +180,7 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                         return (rawVal != null &&
                             typeof rawVal === "number" &&
                             isFinite(rawVal) &&
-                            rawVal > 0);
+                            rawVal !== 0);
                     });
                     const content = {
                         category: item.name || `Category ${index + 1}`,
@@ -220,7 +237,7 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
         return data.map((item, index) => {
             const x = margin.left + index * (barWidth + categoryGap);
             if (stacked) {
-                const visibleBarCount = dataKeys.filter((key) => typeof item[key] === 'number' && item[key] > 0).length;
+                const visibleBarCount = dataKeys.filter((key) => typeof item[key] === 'number' && item[key] !== 0).length;
                 let stackedY = margin.top + innerHeight;
                 let visibleStackIndex = 0;
                 // Find the index of the topmost visible (non-zero) bar to apply radius
@@ -228,7 +245,7 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                     const rawVal = item[key];
                     const isVisible = typeof rawVal === "number" &&
                         isFinite(rawVal) &&
-                        rawVal > 0;
+                        rawVal !== 0;
                     return isVisible ? idx : topIndex;
                 }, -1);
                 return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
@@ -256,6 +273,9 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                 })));
             }
             else {
+                // Calculate the zero baseline position (where value=0 maps to in pixel space)
+                const scaledZero = safeScale(0, minValue, maxValue, 0, innerHeight);
+                const zeroY = margin.top + innerHeight - scaledZero;
                 return (React__default.createElement("g", { key: index }, dataKeys.map((key, keyIndex) => {
                     const rawValue = item[key];
                     const value = typeof rawValue === "number" && isFinite(rawValue)
@@ -269,12 +289,16 @@ const BarRenderer = ({ data, config, scales, dimensions, margin, stacked = false
                         ? calculateAverageForKey(key)
                         : value;
                     const range = maxValue - minValue;
-                    const barHeight = range > 0
+                    const scaledValue = range > 0
                         ? safeScale(actualValue, minValue, maxValue, 0, innerHeight)
                         : 0;
+                    const barHeight = Math.abs(scaledValue - scaledZero);
+                    const isNeg = actualValue < 0;
                     const barX = x + keyIndex * (individualBarWidth + gap);
-                    const barY = margin.top + innerHeight - barHeight;
-                    return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, false, undefined);
+                    // Positive: bar extends upward from zero baseline
+                    // Negative: bar extends downward from zero baseline
+                    const barY = isNeg ? zeroY : zeroY - barHeight;
+                    return renderBarPath(item, index, key, keyIndex, barX, barY, barHeight, true, false, undefined, isNeg);
                 })));
             }
         });