@campxdev/react-blueprint 1.2.14 → 1.2.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.14",
+  "version": "1.2.15",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

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

@@ -1,4 +1,11 @@
-import { Stack, SxProps, useTheme } from '@mui/material';
+import {
+  Box,
+  Stack,
+  styled,
+  SxProps,
+  useTheme,
+  Typography,
+} from '@mui/material';
 import {
   Bar,
   CartesianGrid,
@@ -15,14 +22,18 @@ import {
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  SubTitleProps,
   TitleProps,
 } from '../types/types';
 import { LayoutType } from 'recharts/types/util/types';
-import { Typography } from '../../export';
+import { StyledContainer } from '../../export';
 
 export type BarChartProps = {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   width?: number;
   height?: number;
   layout?: LayoutType;
@@ -50,6 +61,9 @@ type BarItem = {
 
 export const BarChart = ({
   title = 'Bar Chart',
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
@@ -83,6 +97,15 @@ export const BarChart = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <ReBarChart
         width={width}
         height={height}
@@ -97,6 +120,7 @@ export const BarChart = ({
         )}
         {showToolTip && (
           <Tooltip
+            content={CustomTooltip}
             cursor={{ fill: theme.palette.secondary.light, fillOpacity: '50%' }}
             itemStyle={{
               color: theme.palette.text.secondary,
@@ -186,3 +210,31 @@ export const BarChart = ({
     </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>
+    );
+  }
+
+  return null;
+};

package/src/components/Charts/types/types.ts

@@ -22,6 +22,11 @@ export type TitleProps = {
   sx?: any;
 };
 
+export type SubTitleProps = {
+  variant?: Variant;
+  sx?: any;
+};
+
 export type MarginProps = {
   top?: number;
   right?: number;

package/src/stories/Charts/BarChart.stories.tsx

@@ -7,18 +7,21 @@ import {
 const data = [
   {
     name: 'Page A',
+    sub: 'PA',
     uv: 4000,
     pv: 2400,
     amt: 2400,
   },
   {
     name: 'Page B',
+    sub: 'PB',
     uv: 3000,
     pv: 1398,
     amt: 2210,
   },
   {
     name: 'Page C',
+    sub: 'PC',
     uv: 2000,
     pv: 9800,
     amt: 2290,
@@ -122,7 +125,7 @@ export const Default = {
   args: {
     data: data,
     bars: bars,
-    dataKey: 'name',
+    dataKey: 'sub',
     containerSx: { width: '800px', height: '800px' },
     cartesianGrid: { showCartesianGrid: true, size: 5 },
     axisLabelProps: {