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

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

@@ -0,0 +1,266 @@
+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,
+  CartesianGrid,
+  LabelList,
+  BarChart as RechartsBarChart,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import type {
+  LegendProps,
+  MarginProps,
+  SubTitleProps,
+  TitleProps,
+} from '../types/types';
+
+export interface VerticalBarChartData {
+  [key: string]: string | number;
+}
+
+export interface VerticalBarChartProps {
+  // Core data
+  data: VerticalBarChartData[];
+  dataKeys: string[];
+  xAxisKey: string;
+
+  // Chart configuration
+  config: ChartConfig;
+
+  // Dimension controls
+  height?: number;
+  margin?: MarginProps;
+
+  // Bar customization
+  barSize?: number;
+  barGap?: number;
+  barCategoryGap?: number | string;
+  radius?: number | [number, number, number, number];
+  stackId?: string;
+
+  // Grid & Axes
+  showGrid?: boolean;
+  gridStrokeDasharray?: string | number;
+  xAxisTickFormatter?: (value: string | number) => string;
+  yAxisTickFormatter?: (value: number | string) => string;
+
+  // Labels on bars
+  showLabels?: boolean;
+  labelPosition?:
+    | 'top'
+    | 'bottom'
+    | 'left'
+    | 'right'
+    | 'inside'
+    | 'outside'
+    | 'insideLeft'
+    | 'insideRight'
+    | 'insideTop'
+    | 'insideBottom'
+    | 'center';
+  labelFormatter?: (value: any) => 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;
+
+  // Active bar interaction
+  activeBar?: boolean;
+  activeBarIndex?: number;
+  onBarClick?: (data: any, index: number) => void;
+
+  // Animation
+  animationDuration?: number;
+  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
+
+  // Accessibility
+  accessibilityLayer?: boolean;
+}
+
+const VerticalBarChart: React.FC<VerticalBarChartProps> = ({
+  data,
+  dataKeys,
+  xAxisKey,
+  config,
+  height = 400,
+  margin = { top: 20, right: 30, bottom: 20, left: 30 },
+  barSize,
+  barGap = 4,
+  barCategoryGap = '10%',
+  radius = 4,
+  stackId,
+  showGrid = true,
+  gridStrokeDasharray = '3 3',
+  xAxisTickFormatter,
+  yAxisTickFormatter,
+  showLabels = false,
+  labelPosition = 'top',
+  labelFormatter,
+  showTooltip = true,
+  tooltipCursor = false,
+  hideTooltipLabel = false,
+  tooltipIndicator = 'dashed',
+  legend,
+  showLegend = false,
+  title,
+  titleProps = { variant: 'h3', className: '' },
+  subtitle,
+  subtitleProps = { variant: 'muted', className: '' },
+  className,
+  activeBar = false,
+  activeBarIndex,
+  onBarClick,
+  animationDuration = 750,
+  animationEasing = 'ease-in-out',
+  accessibilityLayer = true,
+}) => {
+  const [activeIndex, setActiveIndex] = React.useState<number | undefined>(
+    activeBarIndex,
+  );
+
+  // Compute bar radius
+  const barRadius = React.useMemo(() => {
+    if (Array.isArray(radius)) return radius;
+    return radius;
+  }, [radius]);
+
+  const handleBarClick = (data: any, index: number) => {
+    if (activeBar) {
+      setActiveIndex(index);
+    }
+    onBarClick?.(data, index);
+  };
+
+  const defaultXAxisFormatter = (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" style={{ height }}>
+        <RechartsBarChart
+          accessibilityLayer={accessibilityLayer}
+          data={data}
+          margin={margin}
+          barSize={barSize}
+          barGap={barGap}
+          barCategoryGap={barCategoryGap}
+        >
+          {showGrid && (
+            <CartesianGrid
+              vertical={false}
+              strokeDasharray={gridStrokeDasharray}
+            />
+          )}
+
+          <XAxis
+            dataKey={xAxisKey}
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            tickFormatter={xAxisTickFormatter || defaultXAxisFormatter}
+          />
+          <YAxis
+            tickLine={false}
+            axisLine={false}
+            tickMargin={10}
+            tickFormatter={yAxisTickFormatter}
+          />
+
+          {showTooltip && (
+            <ChartTooltip
+              cursor={tooltipCursor}
+              content={
+                <ChartTooltipContent
+                  hideLabel={hideTooltipLabel}
+                  indicator={tooltipIndicator}
+                />
+              }
+            />
+          )}
+
+          {showLegend && (
+            <ChartLegend content={<ChartLegendContent />} {...legend} />
+          )}
+
+          {dataKeys.map((key, index) => {
+            const fillColor = `var(--color-${key})`;
+            const isActive = activeBar && activeIndex === index;
+
+            return (
+              <Bar
+                key={key}
+                dataKey={key}
+                fill={fillColor}
+                radius={barRadius}
+                stackId={stackId}
+                animationDuration={animationDuration}
+                animationEasing={animationEasing}
+                onClick={(data, idx) => handleBarClick(data, idx)}
+                style={{
+                  opacity:
+                    activeBar && activeIndex !== undefined && !isActive
+                      ? 0.3
+                      : 1,
+                  cursor: onBarClick || activeBar ? 'pointer' : 'default',
+                }}
+              >
+                {showLabels && (
+                  <LabelList
+                    dataKey={key}
+                    position={labelPosition}
+                    offset={12}
+                    className="fill-foreground"
+                    fontSize={12}
+                    formatter={labelFormatter}
+                  />
+                )}
+              </Bar>
+            );
+          })}
+        </RechartsBarChart>
+      </ChartContainer>
+    </div>
+  );
+};
+
+export default VerticalBarChart;

package/src/components/Charts/LineChart/LineChart.tsx

@@ -1,16 +1,21 @@
-import { Stack, SxProps, useTheme } from '@mui/material';
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/shadcn-components/Charts/Chart';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
 import {
   CartesianGrid,
   Label,
-  Legend,
   Line,
   LineChart as ReLineChart,
-  Tooltip,
   XAxis,
   YAxis,
 } from 'recharts';
 import { CurveType } from 'recharts/types/shape/Curve';
-import { Typography } from '../../export';
 import {
   AxisLabelProps,
   BaseAxisProps,
@@ -22,24 +27,41 @@ import {
 } from '../types/types';
 
 export type LineChartProps = {
+  // Core data
   title?: string;
   showSubtitle?: boolean;
   subTitle?: string;
   titleProps?: TitleProps;
   subTitleProps?: SubTitleProps;
+
+  // Chart configuration
+  config: ChartConfig;
+
+  // Dimension controls
   width?: number;
   height?: number;
+
+  // Data
   dataKey: string;
   data: any[];
   lines: LineItem[];
+
+  // Features
   showToolTip?: boolean;
   showLegend?: boolean;
   cartesianGrid?: CartesianGridProps;
   axisLabelProps?: AxisLabelProps;
   baseAxisProps?: BaseAxisProps;
   legendSx?: LegendProps;
-  containerSx?: SxProps;
+  className?: string;
   margin?: MarginProps;
+
+  // Tooltip options
+  hideTooltipLabel?: boolean;
+  tooltipIndicator?: 'line' | 'dot' | 'dashed';
+
+  // Accessibility
+  accessibilityLayer?: boolean;
 };
 
 type LineItem = {
@@ -53,11 +75,12 @@ export const LineChart = ({
   title = 'Line Chart',
   showSubtitle = false,
   subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  titleProps = { variant: 'subtitle2' },
+  subTitleProps = { variant: 'small' },
+  titleProps = { variant: 'large' },
+  config,
   width = 700,
   height = 500,
-  margin,
+  margin = { top: 20, right: 30, bottom: 20, left: 30 },
   dataKey,
   data,
   lines,
@@ -67,92 +90,100 @@ export const LineChart = ({
   axisLabelProps,
   baseAxisProps,
   legendSx,
-  containerSx,
+  className,
+  hideTooltipLabel = false,
+  tooltipIndicator = 'line',
+  accessibilityLayer = true,
 }: LineChartProps) => {
   const { showCartesianGrid, size } = cartesianGrid;
   const { xLabel, yLabel } = axisLabelProps ?? {};
-  const theme = useTheme();
 
   return (
-    <Stack alignItems={'center'} sx={containerSx}>
-      <Typography
-        variant={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
+    <div className={className}>
+      {title && (
         <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
+          variant={titleProps.variant || 'large'}
+          className={titleProps.className}
         >
           {title}
         </Typography>
       )}
-      <ReLineChart width={width} height={height} margin={margin} data={data}>
-        {showCartesianGrid && (
-          <CartesianGrid strokeDasharray={`${size} ${size}`} />
-        )}
-        {showToolTip && (
-          <Tooltip
-            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} />}
-
-        <XAxis
-          padding={'gap'}
-          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}
+      {showSubtitle && subTitle && (
+        <Typography
+          variant={subTitleProps.variant || 'small'}
+          className={subTitleProps.className}
         >
-          <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}
+          {subTitle}
+        </Typography>
+      )}
+      <ChartContainer
+        config={config}
+        className="w-full"
+        style={{ height, width }}
+      >
+        <ReLineChart
+          accessibilityLayer={accessibilityLayer}
+          data={data}
+          margin={margin}
         >
-          {yLabel && (
-            <Label
-              offset={10}
-              position={'insideLeft'}
-              {...yLabel}
-              angle={yLabel.angle ?? -90}
-              dx={yLabel?.dx}
-              style={{ fill: theme.palette.text.primary }}
+          {showCartesianGrid && (
+            <CartesianGrid
+              vertical={false}
+              strokeDasharray={size ? `${size} ${size}` : '3 3'}
+            />
+          )}
+
+          <XAxis
+            padding={'gap'}
+            type="category"
+            dataKey={dataKey}
+            tickLine={false}
+            tickMargin={baseAxisProps?.xAxis?.tickMargin ?? 10}
+            axisLine={false}
+            angle={baseAxisProps?.xAxis?.angle}
+            tick={baseAxisProps?.xAxis?.tick}
+          >
+            {xLabel && <Label {...xLabel} dy={xLabel?.dy} />}
+          </XAxis>
+
+          <YAxis
+            type="number"
+            tickLine={false}
+            axisLine={false}
+            tickMargin={baseAxisProps?.yAxis?.tickMargin ?? 10}
+            tick={baseAxisProps?.yAxis?.tick}
+          >
+            {yLabel && (
+              <Label
+                offset={10}
+                position={'insideLeft'}
+                {...yLabel}
+                angle={yLabel.angle ?? -90}
+                dx={yLabel?.dx}
+              />
+            )}
+          </YAxis>
+
+          {showToolTip && (
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  hideLabel={hideTooltipLabel}
+                  indicator={tooltipIndicator}
+                />
+              }
             />
           )}
-        </YAxis>
-        {lines?.map((item, index) => (
-          <Line key={index} {...item} />
-        ))}
-      </ReLineChart>
-    </Stack>
+
+          {showLegend && (
+            <ChartLegend content={<ChartLegendContent />} {...legendSx} />
+          )}
+
+          {lines?.map((item, index) => (
+            <Line key={index} {...item} />
+          ))}
+        </ReLineChart>
+      </ChartContainer>
+    </div>
   );
 };

package/src/components/Charts/PieChart/PieChart.tsx

@@ -1,6 +1,13 @@
-import { Stack, SxProps, useTheme } from '@mui/material';
-import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import { Typography } from '../../export';
+import {
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from '@/shadcn-components/Charts/Chart';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Cell, Pie, PieChart as RePieChart } from 'recharts';
 import {
   LegendProps,
   MarginProps,
@@ -19,15 +26,18 @@ export type PieChartProps = {
   height?: number;
   pie1: PieProps;
   pie2?: PieProps;
-  containerSx?: SxProps;
+  className?: string;
   showLegend?: boolean;
   legendSx?: LegendProps;
   showToolTip?: boolean;
+  config: ChartConfig;
+  hideTooltipLabel?: boolean;
 };
 
 type PieProps = {
   data: any[];
   dataKey: string;
+  nameKey?: string;
   innerRadius?: number;
   outerRadius?: number;
   fill?: string;
@@ -43,8 +53,8 @@ export const PieChart = ({
   title = 'Pie Chart',
   showSubtitle = false,
   subTitle = '',
-  subTitleProps = { variant: 'caption' },
-  titleProps = { variant: 'subtitle2' },
+  subTitleProps = { variant: 'small' },
+  titleProps = { variant: 'large' },
   margin,
   width = 500,
   height = 500,
@@ -53,71 +63,70 @@ export const PieChart = ({
   legendSx,
   pie1,
   pie2,
-  containerSx,
+  className,
+  config,
+  hideTooltipLabel = false,
 }: PieChartProps) => {
-  const theme = useTheme();
-
   return (
-    <Stack alignItems="center" sx={{ ...containerSx }}>
-      <Typography
-        variant={titleProps.variant}
-        align={'center'}
-        sx={titleProps.sx}
-      >
-        {title}
-      </Typography>
-      {showSubtitle && (
+    <div className={className}>
+      {title && (
         <Typography
-          variant={subTitleProps.variant}
-          align={'center'}
-          sx={subTitleProps.sx}
+          variant={titleProps.variant || 'large'}
+          className={titleProps.className}
         >
           {title}
         </Typography>
       )}
-      <RePieChart width={width} height={height} margin={margin}>
-        {showToolTip && (
-          <Tooltip
-            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} />}
-        <Pie {...pie1} cx={pie1?.cx ?? '50%'} cy={pie1?.cy ?? '50%'}>
-          {pie1?.data.map((entry, index) => (
-            <Cell
-              key={`cell-${index}`}
-              fill={
-                pie1.colors
-                  ? pie1.colors[index % pie1.colors.length]
-                  : pie1.fill
-              }
+      {showSubtitle && subTitle && (
+        <Typography
+          variant={subTitleProps.variant || 'small'}
+          className={subTitleProps.className}
+        >
+          {subTitle}
+        </Typography>
+      )}
+      <ChartContainer
+        config={config}
+        className="w-full"
+        style={{ height, width }}
+      >
+        <RePieChart margin={margin}>
+          {showToolTip && (
+            <ChartTooltip
+              content={<ChartTooltipContent hideLabel={hideTooltipLabel} />}
             />
-          ))}
-        </Pie>
-        {pie2 && (
-          <Pie {...pie2} cx={pie2?.cx ?? '50%'} cy={pie2?.cy ?? '50%'}>
-            {pie2?.data.map((entry, index) => (
+          )}
+          {showLegend && (
+            <ChartLegend content={<ChartLegendContent />} {...legendSx} />
+          )}
+          <Pie {...pie1} cx={pie1?.cx ?? '50%'} cy={pie1?.cy ?? '50%'}>
+            {pie1?.data.map((entry, index) => (
               <Cell
                 key={`cell-${index}`}
                 fill={
-                  pie2.colors
-                    ? pie2.colors[index % pie2.colors.length]
-                    : pie2.fill
+                  pie1.colors
+                    ? pie1.colors[index % pie1.colors.length]
+                    : pie1.fill
                 }
               />
             ))}
           </Pie>
-        )}
-      </RePieChart>
-    </Stack>
+          {pie2 && (
+            <Pie {...pie2} cx={pie2?.cx ?? '50%'} cy={pie2?.cy ?? '50%'}>
+              {pie2?.data.map((entry, index) => (
+                <Cell
+                  key={`cell-${index}`}
+                  fill={
+                    pie2.colors
+                      ? pie2.colors[index % pie2.colors.length]
+                      : pie2.fill
+                  }
+                />
+              ))}
+            </Pie>
+          )}
+        </RePieChart>
+      </ChartContainer>
+    </div>
   );
 };