@campxdev/react-blueprint 2.3.10 → 3.0.0-alpha.1

package/src/components/Charts/BarChart/BarChart.tsx

@@ -1,247 +1,35 @@
-import { Box, Stack, SxProps, Typography, useTheme } from '@mui/material';
-import {
-  Bar,
-  CartesianGrid,
-  Label,
-  Legend,
-  BarChart as ReBarChart,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts';
-import { LayoutType } from 'recharts/types/util/types';
-import { StyledContainer } from '../../export';
-import {
-  AxisLabelProps,
-  BaseAxisProps,
-  CartesianGridProps,
-  LegendProps,
-  MarginProps,
-  SubTitleProps,
-  TitleProps,
-} from '../types/types';
+import React from 'react';
+import HorizontalBarChart, {
+  type HorizontalBarChartData,
+  type HorizontalBarChartProps,
+} from './HorizontalBarChart';
+import VerticalBarChart, {
+  type VerticalBarChartData,
+  type VerticalBarChartProps,
+} from './VerticalBarChart';
 
-export type BarChartProps = {
-  title?: string;
-  showSubtitle?: boolean;
-  subTitle?: string;
-  titleProps?: TitleProps;
-  subTitleProps?: SubTitleProps;
-  width?: number;
-  height?: number;
-  layout?: LayoutType;
-  dataKey: string;
-  data: any[];
-  bars: BarItem[];
-  domain?: any[];
-  barGap?: number | string;
-  barSize?: number | string;
-  showToolTip?: boolean;
-  showLegend?: boolean;
-  cartesianGrid?: CartesianGridProps;
-  axisLabelProps?: AxisLabelProps;
-  baseAxisProps?: BaseAxisProps;
-  legendSx?: LegendProps;
-  containerSx?: SxProps;
-  margin?: MarginProps;
-};
+export type BarChartVariant = 'vertical' | 'horizontal';
 
-type BarItem = {
-  dataKey: string;
-  stackId?: string;
-  fill: string;
-};
+export type BarChartData = HorizontalBarChartData | VerticalBarChartData;
 
-export const BarChart = ({
-  title = 'Bar Chart',
-  showSubtitle = false,
-  subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  titleProps = { variant: 'subtitle2' },
-  width = 700,
-  height = 500,
-  margin,
-  layout = 'horizontal',
-  dataKey,
-  domain = [0, 'auto'],
-  data,
-  bars,
-  barGap = 10,
-  barSize = 20,
-  showToolTip = true,
-  showLegend = true,
-  baseAxisProps,
-  cartesianGrid = { showCartesianGrid: false },
-  axisLabelProps,
-  legendSx,
-  containerSx,
-}: BarChartProps) => {
-  const { showCartesianGrid, size } = cartesianGrid;
-  const isVerticalLayout = layout === 'vertical';
-  const { xLabel, yLabel } = axisLabelProps ?? {};
-  const theme = useTheme();
+export interface BarChartProps
+  extends Omit<VerticalBarChartProps, 'data'>,
+    Omit<HorizontalBarChartProps, 'data' | keyof VerticalBarChartProps> {
+  data: BarChartData[];
+  variant?: BarChartVariant;
+}
 
-  return (
-    <Stack alignItems={'center'} sx={{ ...containerSx }} width={'fit-content'}>
-      <Typography
-        variant={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
-        <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
-        >
-          {title}
-        </Typography>
-      )}
-      <ReBarChart
-        width={width}
-        height={height}
-        margin={margin}
-        layout={isVerticalLayout ? 'horizontal' : 'vertical'}
-        data={data}
-        barGap={barGap}
-        barSize={barSize}
-      >
-        {showCartesianGrid && (
-          <CartesianGrid strokeDasharray={`${size} ${size}`} />
-        )}
-        {showToolTip && (
-          <Tooltip
-            content={CustomTooltip}
-            cursor={{ fill: theme.palette.secondary.light, fillOpacity: '50%' }}
-            itemStyle={{
-              color: theme.palette.text.secondary,
-            }}
-            contentStyle={{
-              color: theme.palette.text.primary,
-              backgroundColor: theme.palette.background.paper,
-              borderColor: theme.palette.border.primary,
-              borderRadius: '5px',
-              padding: '5px 10px',
-            }}
-          />
-        )}
-        {showLegend && <Legend {...legendSx} />}
-        {bars?.map((item, index) => (
-          <Bar key={index} {...item} />
-        ))}
-        {isVerticalLayout ? (
-          <>
-            <XAxis
-              type="category"
-              dataKey={dataKey}
-              stroke={theme.palette.border.primary}
-              tick={{
-                fill: theme.palette.text.tertiary,
-                ...baseAxisProps?.xAxis?.tick,
-              }}
-              angle={baseAxisProps?.xAxis?.angle}
-              tickMargin={baseAxisProps?.xAxis?.tickMargin}
-            >
-              <Label
-                {...xLabel}
-                dy={xLabel?.dy}
-                style={{ fill: theme.palette.text.primary }}
-              />
-            </XAxis>
-            <YAxis
-              type="number"
-              stroke={theme.palette.border.primary}
-              tick={{
-                fill: theme.palette.text.tertiary,
-                ...baseAxisProps?.yAxis?.tick,
-              }}
-              tickMargin={baseAxisProps?.yAxis?.tickMargin}
-              domain={domain}
-            >
-              {yLabel && (
-                <Label
-                  offset={10}
-                  position={'insideLeft'}
-                  {...yLabel}
-                  angle={yLabel.angle ?? -90}
-                  dx={yLabel?.dx}
-                  style={{ fill: theme.palette.text.primary }}
-                />
-              )}
-            </YAxis>
-          </>
-        ) : (
-          <>
-            <XAxis
-              type="number"
-              stroke={theme.palette.border.primary}
-              tick={{
-                fill: theme.palette.text.tertiary,
-                ...baseAxisProps?.xAxis?.tick,
-              }}
-              angle={baseAxisProps?.xAxis?.angle}
-              tickMargin={baseAxisProps?.xAxis?.tickMargin}
-            >
-              <Label
-                {...xLabel}
-                dy={xLabel?.dy}
-                style={{ fill: theme.palette.text.primary }}
-              />
-            </XAxis>
-            <YAxis
-              dataKey={dataKey}
-              type="category"
-              stroke={theme.palette.border.primary}
-              tick={{
-                fill: theme.palette.text.tertiary,
-                ...baseAxisProps?.yAxis?.tick,
-              }}
-              tickMargin={baseAxisProps?.yAxis?.tickMargin}
-            >
-              {yLabel && (
-                <Label
-                  offset={10}
-                  position={'insideLeft'}
-                  {...yLabel}
-                  angle={yLabel.angle ?? -90}
-                  dx={yLabel?.dx}
-                  style={{ fill: theme.palette.text.primary }}
-                />
-              )}
-            </YAxis>
-          </>
-        )}
-      </ReBarChart>
-    </Stack>
-  );
-};
-
-const CustomTooltip = ({ active, payload }: any) => {
-  const theme = useTheme();
-  if (active && payload && payload.length) {
-    return (
-      <StyledContainer>
-        <Typography variant="body2">{`${payload[0].payload.name}`}</Typography>
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          {payload.map((p: any, index: number) => (
-            <Typography variant="caption" key={index}>
-              <span>{`${p.name}`}</span>
-              <span
-                style={{
-                  fontWeight: 'bold',
-                  color: theme.palette.text.primary,
-                }}
-              >
-                {`\xa0\xa0${p.value}`}
-              </span>
-            </Typography>
-          ))}
-        </Box>
-      </StyledContainer>
-    );
+const BarChart: React.FC<BarChartProps> = ({
+  variant = 'vertical',
+  ...props
+}) => {
+  if (variant === 'horizontal') {
+    return <HorizontalBarChart {...(props as HorizontalBarChartProps)} />;
   }
 
-  return null;
+  return <VerticalBarChart {...(props as VerticalBarChartProps)} />;
 };
+
+export default BarChart;
+export { HorizontalBarChart, VerticalBarChart };
+export type { HorizontalBarChartProps, VerticalBarChartProps };

package/src/components/Charts/BarChart/HorizontalBarChart.tsx

@@ -0,0 +1,211 @@
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/shadcn-components/Charts/Chart';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import React from 'react';
+import { Bar, BarChart as RechartsBarChart, XAxis, YAxis } from 'recharts';
+import type {
+  LegendProps,
+  MarginProps,
+  SubTitleProps,
+  TitleProps,
+} from '../types/types';
+
+export interface HorizontalBarChartData {
+  [key: string]: string | number;
+}
+
+export interface HorizontalBarChartProps {
+  // Core data
+  data: HorizontalBarChartData[];
+  dataKeys: string[];
+  xAxisKey: string;
+
+  // Chart configuration
+  config: ChartConfig;
+
+  // Dimension controls
+  height?: number;
+  margin?: MarginProps;
+
+  // Bar customization
+  barSize?: number;
+  radius?: number | [number, number, number, number];
+  stackId?: string;
+
+  // Axes
+  hideXAxis?: boolean;
+  yAxisWidth?: number;
+  yAxisTickFormatter?: (value: string | number) => string;
+  xAxisTickFormatter?: (value: number | string) => string;
+
+  // Tooltip
+  showTooltip?: boolean;
+  tooltipCursor?: boolean | object;
+  hideTooltipLabel?: boolean;
+  tooltipIndicator?: 'line' | 'dot' | 'dashed';
+
+  // Legend
+  legend?: LegendProps;
+  showLegend?: boolean;
+
+  // Title & subtitle
+  title?: string;
+  titleProps?: TitleProps;
+  subtitle?: string;
+  subtitleProps?: SubTitleProps;
+
+  // Container props
+  className?: string;
+
+  // Interaction
+  onBarClick?: (data: any, index: number) => void;
+
+  // Animation
+  animationDuration?: number;
+  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+
+  // Accessibility
+  accessibilityLayer?: boolean;
+}
+
+const HorizontalBarChart: React.FC<HorizontalBarChartProps> = ({
+  data,
+  dataKeys,
+  xAxisKey,
+  config,
+  height,
+  margin = { top: 20, right: 30, bottom: 20, left: -20 },
+  barSize = 32,
+  radius = 5,
+  stackId,
+  hideXAxis = false,
+  yAxisWidth = 100,
+  yAxisTickFormatter,
+  xAxisTickFormatter,
+  showTooltip = true,
+  tooltipCursor = false,
+  hideTooltipLabel = true,
+  tooltipIndicator = 'line',
+  legend,
+  showLegend = false,
+  title,
+  titleProps = { variant: 'h3', className: '' },
+  subtitle,
+  subtitleProps = { variant: 'muted', className: '' },
+  className,
+  onBarClick,
+  animationDuration = 750,
+  animationEasing = 'ease-in-out',
+  accessibilityLayer = true,
+}) => {
+  // Calculate dynamic height based on data length
+  const containerHeight = React.useMemo(() => {
+    if (height) return height;
+    const itemCount = data.length;
+    const minHeight = 400;
+    const heightPerItem = 60;
+    return Math.max(minHeight, itemCount * heightPerItem);
+  }, [data.length, height]);
+
+  // Compute bar radius
+  const barRadius = React.useMemo(() => {
+    if (Array.isArray(radius)) return radius;
+    return radius;
+  }, [radius]);
+
+  const defaultYAxisFormatter = (value: string | number) =>
+    String(value).slice(0, 3);
+
+  return (
+    <div className={className}>
+      {title && (
+        <Typography
+          variant={titleProps.variant || 'h3'}
+          className={titleProps.className}
+        >
+          {title}
+        </Typography>
+      )}
+      {subtitle && (
+        <Typography
+          variant={subtitleProps.variant || 'muted'}
+          className={subtitleProps.className}
+        >
+          {subtitle}
+        </Typography>
+      )}
+      <ChartContainer
+        config={config}
+        className="w-full [&>div]:!aspect-auto"
+        style={{ height: containerHeight }}
+      >
+        <RechartsBarChart
+          accessibilityLayer={accessibilityLayer}
+          data={data}
+          layout="vertical"
+          margin={margin}
+        >
+          <XAxis
+            type="number"
+            hide={hideXAxis}
+            tickLine={false}
+            axisLine={false}
+            tickMargin={10}
+            tickFormatter={xAxisTickFormatter}
+          />
+          <YAxis
+            dataKey={xAxisKey}
+            type="category"
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            width={yAxisWidth}
+            tickFormatter={yAxisTickFormatter || defaultYAxisFormatter}
+          />
+
+          {showTooltip && (
+            <ChartTooltip
+              cursor={tooltipCursor}
+              content={
+                <ChartTooltipContent
+                  hideLabel={hideTooltipLabel}
+                  indicator={tooltipIndicator}
+                />
+              }
+            />
+          )}
+
+          {showLegend && (
+            <ChartLegend content={<ChartLegendContent />} {...legend} />
+          )}
+
+          {dataKeys.map((key) => {
+            const fillColor = `var(--color-${key})`;
+
+            return (
+              <Bar
+                key={key}
+                dataKey={key}
+                fill={fillColor}
+                radius={barRadius}
+                stackId={stackId}
+                animationDuration={animationDuration}
+                animationEasing={animationEasing}
+                onClick={onBarClick}
+                barSize={barSize}
+              />
+            );
+          })}
+        </RechartsBarChart>
+      </ChartContainer>
+    </div>
+  );
+};
+
+export default HorizontalBarChart;