@campxdev/react-blueprint 1.2.15 → 1.2.16

package/package.json

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

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

@@ -142,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}
             >
@@ -155,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}
             >
@@ -176,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}
             >
@@ -190,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 && (

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

@@ -49,6 +49,7 @@ export type BaseAxisProps = {
 export type TickProps = {
   angle?: number;
   tickMargin?: number;
+  tick?: any;
 };
 
 export type LegendProps = {