@campxdev/react-blueprint 1.2.14 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.2.14",
+  "version": "1.2.16",
   "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,
@@ -118,7 +142,10 @@ export const BarChart = ({
               type="category"
               dataKey={dataKey}
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.xAxis?.tick,
+              }}
               angle={baseAxisProps?.xAxis?.angle}
               tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
@@ -131,7 +158,10 @@ export const BarChart = ({
             <YAxis
               type="number"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.yAxis?.tick,
+              }}
               tickMargin={baseAxisProps?.yAxis?.tickMargin}
               domain={domain}
             >
@@ -152,7 +182,10 @@ export const BarChart = ({
             <XAxis
               type="number"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.xAxis?.tick,
+              }}
               angle={baseAxisProps?.xAxis?.angle}
               tickMargin={baseAxisProps?.xAxis?.tickMargin}
             >
@@ -166,7 +199,10 @@ export const BarChart = ({
               dataKey={dataKey}
               type="category"
               stroke={theme.palette.border.primary}
-              tick={{ fill: theme.palette.text.tertiary }}
+              tick={{
+                fill: theme.palette.text.tertiary,
+                ...baseAxisProps?.yAxis?.tick,
+              }}
               tickMargin={baseAxisProps?.yAxis?.tickMargin}
             >
               {yLabel && (
@@ -186,3 +222,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/LineChart/LineChart.tsx

@@ -12,9 +12,11 @@ import {
 } from 'recharts';
 import {
   AxisLabelProps,
+  BaseAxisProps,
   CartesianGridProps,
   LegendProps,
   MarginProps,
+  SubTitleProps,
   TitleProps,
 } from '../types/types';
 import { CurveType } from 'recharts/types/shape/Curve';
@@ -22,7 +24,10 @@ import { Typography } from '../../export';
 
 export type LineChartProps = {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   width?: number;
   height?: number;
   dataKey: string;
@@ -32,6 +37,7 @@ export type LineChartProps = {
   showLegend?: boolean;
   cartesianGrid?: CartesianGridProps;
   axisLabelProps?: AxisLabelProps;
+  baseAxisProps?: BaseAxisProps;
   legendSx?: LegendProps;
   containerSx?: SxProps;
   margin?: MarginProps;
@@ -46,6 +52,9 @@ type LineItem = {
 
 export const LineChart = ({
   title = 'Line Chart',
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   titleProps = { variant: 'subtitle2' },
   width = 700,
   height = 500,
@@ -57,6 +66,7 @@ export const LineChart = ({
   showLegend = true,
   cartesianGrid = { showCartesianGrid: false },
   axisLabelProps,
+  baseAxisProps,
   legendSx,
   containerSx,
 }: LineChartProps) => {
@@ -73,6 +83,15 @@ export const LineChart = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <ReLineChart width={width} height={height} margin={margin} data={data}>
         {showCartesianGrid && (
           <CartesianGrid strokeDasharray={`${size} ${size}`} />
@@ -98,7 +117,12 @@ export const LineChart = ({
           type="category"
           dataKey={dataKey}
           stroke={theme.palette.border.primary}
-          tick={{ fill: theme.palette.text.tertiary }}
+          tick={{
+            fill: theme.palette.text.tertiary,
+            ...baseAxisProps?.xAxis?.tick,
+          }}
+          angle={baseAxisProps?.xAxis?.angle}
+          tickMargin={baseAxisProps?.xAxis?.tickMargin}
         >
           <Label
             {...xLabel}
@@ -109,7 +133,11 @@ export const LineChart = ({
         <YAxis
           type="number"
           stroke={theme.palette.border.primary}
-          tick={{ fill: theme.palette.text.tertiary }}
+          tick={{
+            fill: theme.palette.text.tertiary,
+            ...baseAxisProps?.yAxis?.tick,
+          }}
+          tickMargin={baseAxisProps?.yAxis?.tickMargin}
         >
           {yLabel && (
             <Label

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

@@ -1,11 +1,19 @@
 import { Stack, SxProps, useTheme } from '@mui/material';
 import { Cell, Legend, Pie, PieChart as RePieChart, Tooltip } from 'recharts';
-import { LegendProps, MarginProps, TitleProps } from '../types/types';
+import {
+  LegendProps,
+  MarginProps,
+  SubTitleProps,
+  TitleProps,
+} from '../types/types';
 import { Typography } from '../../export';
 
 export type PieChartProps = {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   margin?: MarginProps;
   width?: number;
   height?: number;
@@ -31,6 +39,9 @@ type PieProps = {
 
 export const PieChart = ({
   title = 'Pie Chart',
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   titleProps = { variant: 'subtitle2' },
   margin,
   width = 500,
@@ -53,6 +64,15 @@ export const PieChart = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <RePieChart width={width} height={height} margin={margin}>
         {showToolTip && (
           <Tooltip

package/src/components/Charts/TreeMap/TreeMap.tsx

@@ -1,12 +1,15 @@
 import { Box, Stack, styled, SxProps, useTheme } from '@mui/material';
 import { Treemap as ReTreeMap, Tooltip } from 'recharts';
 import { AnimationTiming } from 'recharts/types/util/types';
-import { MarginProps, TitleProps } from '../types/types';
+import { MarginProps, SubTitleProps, TitleProps } from '../types/types';
 import { Typography } from '../../export';
 
 interface TreeMapProps {
   title?: string;
+  showSubtitle?: boolean;
+  subTitle?: string;
   titleProps?: TitleProps;
+  subTitleProps?: SubTitleProps;
   data: any;
   dataKey: string | number;
   width?: number;
@@ -26,6 +29,9 @@ interface TreeMapProps {
 const TreeMap = ({
   title = 'Tree Map',
   titleProps = { variant: 'subtitle2' },
+  showSubtitle = false,
+  subTitle = '',
+  subTitleProps = { variant: 'caption' },
   data,
   dataKey,
   width = 400,
@@ -49,6 +55,15 @@ const TreeMap = ({
       >
         {title}
       </Typography>
+      {showSubtitle && (
+        <Typography
+          variant={subTitleProps.variant}
+          align={'center'}
+          sx={subTitleProps.sx}
+        >
+          {title}
+        </Typography>
+      )}
       <ReTreeMap
         data={data}
         dataKey={dataKey}

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;
@@ -44,6 +49,7 @@ export type BaseAxisProps = {
 export type TickProps = {
   angle?: number;
   tickMargin?: number;
+  tick?: any;
 };
 
 export type LegendProps = {

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: {