Feature/stats chart

package.json

@@ -64,11 +64,13 @@
     "@mui/system": "^5.12.1",
     "@mui/types": "^7.2.4",
     "attr-accept": "^2.2.2",
+    "chart.js": "3.9.1",
     "classnames": "^2.3.2",
     "i18next": "^22.4.15",
     "lodash": "^4.17.21",
     "ramda": "^0.29.0",
     "react": "^18.2.0",
+    "react-chartjs-2": "4.3.1",
     "react-dom": "18.2.0",
     "react-number-format": "^4.9.2",
     "react-router-dom": "^6.10.0",

src/components/charts/statsChart/StatsChart.tsx

@@ -0,0 +1,116 @@
+import React from 'react'
+import PropTypes, { number } from 'prop-types'
+import {
+  StyledCard,
+  CardActions,
+  CardCategory,
+  CardContent,
+  StyledCardHeader,
+  CardStatContainer,
+  CardTitle,
+  statIconStyle,
+  StatAction
+} from './StatsChartStyles'
+import { Chart } from 'react-chartjs-2'
+import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip } from 'chart.js'
+import Divider from '@mui/material/Divider'
+import { IconColor, StatsChartProps } from './types'
+
+ChartJS.register(CategoryScale, LinearScale, PointElement, LineElement, BarElement, Tooltip)
+
+/**
+ * The StatsChart component provides a set of frequently and customizable used chart types (`line` and `bar`).
+ */
+
+const StatsChart: React.FC<StatsChartProps> = ({
+  chartColor = 'info',
+  iconColor = 'grey',
+  title,
+  text,
+  statText,
+  StatIcon,
+  type = 'line',
+  data,
+  statAction,
+  ...rest
+}) => {
+  return (
+    <StyledCard disablePadding>
+      <StyledCardHeader color={chartColor} subheader={<Chart type={type} data={data} {...rest} />} />
+      <CardContent>
+        <CardTitle variant="subtitle1">{title}</CardTitle>
+        {text && <CardCategory variant="subtitle2">{text}</CardCategory>}
+      </CardContent>
+      {StatIcon || statText ? (
+        <>
+          <Divider />
+          <CardActions>
+            <CardStatContainer>
+              {StatIcon && <StatIcon style={statIconStyle} color={iconColor as IconColor} />}
+              {statText}
+            </CardStatContainer>
+            <StatAction>{statAction}</StatAction>
+          </CardActions>
+        </>
+      ) : null}
+    </StyledCard>
+  )
+}
+
+StatsChart.propTypes = {
+  /**
+   * @default 'line'
+   * Chart type.
+   */
+  type: PropTypes.oneOf(['line', 'bar']),
+  /**
+   * Chart title.
+   */
+  title: PropTypes.string,
+  /**
+   * The text content of chart.
+   */
+  text: PropTypes.string,
+  /**
+   * Chart icon.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  StatIcon: PropTypes.object,
+  /**
+   * @default 'grey'
+   * Chart icon color.
+   */
+  iconColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error']),
+  /**
+   * @default 'info'
+   * Chart color.
+   */
+  chartColor: PropTypes.oneOf(['primary', 'secondary', 'info', 'success', 'warning', 'error', 'rose', 'dark']),
+  /**
+   * Chart status text.
+   */
+  statText: PropTypes.node,
+  /**
+   * Chart data.
+   */
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //@ts-ignore
+  data: PropTypes.shape({
+    labels: PropTypes.arrayOf(PropTypes.string).isRequired,
+    datasets: PropTypes.arrayOf(
+      PropTypes.shape({
+        data: PropTypes.arrayOf(number).isRequired,
+        label: PropTypes.string.isRequired,
+        backgroundColor: PropTypes.string.isRequired,
+        borderColor: PropTypes.string.isRequired
+      }).isRequired
+    ).isRequired
+  }).isRequired,
+  /**
+   *  Actions to be displayed in the right corner of the card.
+   */
+  statAction: PropTypes.node
+}
+
+export default StatsChart

src/components/charts/statsChart/StatsChartStyles.ts

@@ -0,0 +1,82 @@
+import MuiCardContent from '@mui/material/CardContent'
+import MuiCardActions from '@mui/material/CardActions'
+import { styled } from '@mui/material/styles'
+import { Card, CardHeader } from 'components/surfaces/Card'
+import Typography from 'components/dataDisplay/Typography'
+import { Gradient } from 'components'
+
+export const StyledCard = styled(Card)(({ theme }) => ({
+  display: 'inline-block',
+  position: 'relative',
+  width: '100%',
+  margin: '25px 0',
+  boxShadow: '0 1px 4px 0 rgba(0, 0, 0, 0.14)',
+  borderRadius: '6px',
+  color: theme.palette.primary.main,
+  background: '#fff',
+  overflow: 'visible'
+}))
+
+export const StyledCardHeader = styled(CardHeader)(({ theme, color }) => ({
+  margin: '-20px 15px 0',
+  borderRadius: '3px',
+  padding: '0',
+  minHeight: '160px',
+  ...theme.typography.defaultFont,
+  position: 'relative',
+  zIndex: 3,
+  transition: 'all 300ms cubic-bezier(0.34, 1.61, 0.7, 1)',
+  transform: 'translate3d(0, -10px, 0)',
+  background: theme.palette.gradients[color as Gradient],
+  ['& .MuiCardHeader-content']: {
+    maxWidth: '100%'
+  }
+}))
+
+export const CardContent = styled(MuiCardContent)(() => ({
+  padding: '15px 20px',
+  position: 'relative'
+}))
+
+export const CardTitle = styled(Typography)(({ theme }) => ({
+  marginTop: '0',
+  marginBottom: '5px',
+  ...theme.typography.defaultFont,
+  fontSize: '1.175em'
+}))
+
+export const CardCategory = styled(Typography)(({ theme }) => ({
+  marginBottom: '0',
+  color: theme.palette.grey[500],
+  ...theme.typography.defaultFont,
+  fontSize: '0.9em'
+}))
+
+export const CardActions = styled(MuiCardActions)(({ theme }) => ({
+  margin: '0 20px 10px',
+  paddingTop: '10px',
+  height: 'auto',
+  ...theme.typography.defaultFont,
+  padding: '10px 0 0 0',
+  justifyContent: 'space-between'
+}))
+
+export const CardStatContainer = styled('div')(({ theme }) => ({
+  lineHeight: '22px',
+  color: theme.palette.grey[500],
+  fontSize: '12px',
+  display: 'inline-block',
+  margin: '0'
+}))
+
+export const StatAction = styled(MuiCardActions)(() => ({
+  padding: '8px'
+}))
+
+export const statIconStyle = {
+  position: 'relative',
+  top: '4px',
+  width: '16px',
+  height: '16px',
+  marginRight: '5px'
+} as React.CSSProperties

src/components/charts/statsChart/index.ts

@@ -0,0 +1,3 @@
+export * from './types'
+import StatsChart from './StatsChart'
+export default StatsChart

src/components/charts/statsChart/types.ts

@@ -0,0 +1,55 @@
+// Copyright (c) TotalSoft.
+// This source code is licensed under the MIT license.
+
+import { SvgIconComponent } from '@mui/icons-material'
+import { Color } from 'components'
+import { ChartProps } from 'react-chartjs-2'
+
+export interface DataSetsChart {
+  data: number[]
+  label: string
+  backgroundColor: string
+  borderColor: string
+}
+
+export type IconColor = Exclude<Color, 'default' | 'white' | 'transparent' | 'dark' | 'rose'>
+
+export interface StatsChartProps extends Omit<ChartProps, 'type' | 'data'> {
+  /**
+   * Chart type.
+   */
+  type?: 'line' | 'bar'
+  /**
+   * The text content of chart.
+   */
+  text?: string
+  /**
+   * Chart icon.
+   */
+  StatIcon?: SvgIconComponent
+  /**
+   * @default 'grey'
+   * Chart icon color.
+   */
+  iconColor?: IconColor
+  /**
+   * @default 'info'
+   * Chart color.
+   */
+  chartColor?: Color
+  /**
+   * Chart status text.
+   */
+  statText?: React.ReactNode
+  /**
+   * Chart data.
+   */
+  data: {
+    labels: string[]
+    datasets: DataSetsChart[]
+  }
+  /**
+   *  Action to be displayed in the right corner of the card.
+   */
+  statAction?: React.ReactNode
+}

src/components/index.ts

@@ -12,6 +12,9 @@ export * from './buttons/BackToButton'
 export { default as UploadButton } from './buttons/UploadButton'
 export * from './buttons/UploadButton'
 
+export { default as StatsChart } from './charts/statsChart'
+export * from './charts/statsChart'
+
 export { default as Typography } from './dataDisplay/Typography'
 export * from './dataDisplay/Typography'
 

src/components/surfaces/Card/types.ts

@@ -61,7 +61,7 @@ export interface CardHeaderProps extends Omit<MuiCardHeaderProps, 'action'> {
    * @default 'secondary'
    * Icon color.
    */
-  iconColor?: Color
+  iconColor?: CardColor
 }
 
 export interface CardProps extends Omit<MuiCardProps, 'title'> {

src/components/types.ts

@@ -1,6 +1,7 @@
 // Copyright (c) TotalSoft.
 // This source code is licensed under the MIT license.
 
+// Available theme color options.
 export type Color =
   | 'primary'
   | 'secondary'
@@ -14,6 +15,8 @@ export type Color =
   | 'dark'
   | 'transparent'
 
+// Available gradient color options.
 export type Gradient = Exclude<Color, 'transparent' | 'white'>
 
+// Available size options.
 export type Size = 'tiny' | 'small' | 'medium' | 'large'

src/stories/charts/statsChart/BarPreview.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) TotalSoft.
+// This source code is licensed under the MIT license.
+
+import React from 'react'
+import { Button, StatsChart } from 'components'
+import { AccessTime } from '@mui/icons-material'
+import { Grid } from '@mui/material'
+import { statsChartData, statsChartOptions } from './_mocks'
+
+const BarPreview = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        <StatsChart
+          type="bar"
+          data={statsChartData}
+          chartColor={'info'}
+          StatIcon={AccessTime}
+          statText={'Bar chart infos'}
+          title={'Bar Chart'}
+          options={statsChartOptions}
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <StatsChart
+          type="bar"
+          data={statsChartData}
+          chartColor={'info'}
+          StatIcon={AccessTime}
+          statText={'Bar chart infos'}
+          title={'Bar chart with action button'}
+          options={statsChartOptions}
+          statAction={<Button size="tiny">Ok</Button>}
+          iconColor="info"
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default BarPreview

src/stories/charts/statsChart/LinePreview.tsx

@@ -0,0 +1,41 @@
+// Copyright (c) TotalSoft.
+// This source code is licensed under the MIT license.
+
+import React from 'react'
+import { Button, StatsChart } from 'components'
+import { AccessTime } from '@mui/icons-material'
+import { Grid } from '@mui/material'
+import { statsChartData, statsChartOptions } from './_mocks'
+
+const LinePreview = () => {
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={6}>
+        <StatsChart
+          type="line"
+          data={statsChartData}
+          chartColor={'info'}
+          StatIcon={AccessTime}
+          statText={'Line chart'}
+          title={'Line Chart with warning icon color'}
+          options={statsChartOptions}
+          iconColor="error"
+        />
+      </Grid>
+      <Grid item xs={6}>
+        <StatsChart
+          type="line"
+          data={statsChartData}
+          chartColor={'info'}
+          StatIcon={AccessTime}
+          statText={'Line chart infos'}
+          title={'Line Chart with action button'}
+          options={statsChartOptions}
+          statAction={<Button size="tiny">Ok</Button>}
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default LinePreview