@pareto-engineering/design-system 5.0.0 → 5.0.2

package/src/ui/a/{AreaChart → Charts/AreaChart}/AreaChart.jsx

@@ -1,7 +1,7 @@
-// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
-
 import * as React from 'react'
 
+import { useState } from 'react'
+
 import PropTypes from 'prop-types'
 
 import {
@@ -16,9 +16,11 @@ import {
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
+import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
 
-// Local Definitions
+import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from '../Common'
+
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -37,18 +39,16 @@ const AreaChart = ({
   filled,
   height,
   width,
-  // ...otherProps
+  isTimeFormat,
+  dateFormat,
+  capitalizedLegend,
 }) => {
-  const processedData = data.map((item) => {
-    const yValues = yKeys.map((key) => item[key])
-    const lowerBound = Math.min(...yValues)
-    const upperBound = Math.max(...yValues)
-    const margin = (upperBound - lowerBound) * 0.1
-    return {
-      ...item,
-      bounds:[lowerBound - margin, upperBound + margin],
-    }
-  })
+  const allYLabels = yKeys.map((key) => ({
+    label:key,
+    color:colors[yKeys.indexOf(key)],
+  }))
+
+  const [selectedYLabels, setSelectedYLabels] = useState(allYLabels)
 
   const yAxisBounds = () => {
     const yValues = data.map((item) => yKeys.map((key) => item[key]))
@@ -58,37 +58,6 @@ const AreaChart = ({
     return [min - margin, max + margin]
   }
 
-  const CustomTooltipContent = ({ active, payload, label }) => {
-    if (active && payload && payload.length) {
-      const newPayload = payload.filter((item) => item.name !== 'bounds')
-      return (
-        <div className="custom-tooltip">
-          <p className="label">{`${xLabel}: ${label}`}</p>
-          {newPayload.map((entry) => (
-            <p className="label" key={`${entry.name}`} style={{ color: entry.color }}>
-              {`${entry.name}: ${entry.value}`}
-            </p>
-          ))}
-        </div>
-      )
-    }
-    return null
-  }
-
-  const CustomLegend = ({ colorsArray, yKeysArray }) => (
-    <div className="custom-legend">
-      {yKeysArray.map((key, index) => (
-        <div key={key} className="item">
-          <span
-            className="line"
-            style={{ backgroundColor: colorsArray[index] }}
-          />
-          <span className="text">{key}</span>
-        </div>
-      ))}
-    </div>
-  )
-
   return (
     <div
       id={id}
@@ -100,10 +69,21 @@ const AreaChart = ({
         .filter((e) => e)
         .join(' ')}
     >
-      <h3>{title}</h3>
-      <CustomLegend colorsArray={colors} yKeysArray={yKeys} />
+      <div className="chart-header">
+        <h3>{title}</h3>
+        <YLabelsDropDown
+          allYLabels={allYLabels}
+          selectedYLabels={selectedYLabels}
+          setSelectedYLabels={setSelectedYLabels}
+        />
+      </div>
+      <CustomLegend
+        colorsArray={colors}
+        yKeysArray={yKeys}
+        capitalizedLegend={capitalizedLegend}
+      />
       <ResponsiveContainer width={width} height={height}>
-        <RechartsAreaChart data={processedData}>
+        <RechartsAreaChart data={data}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xKey}
@@ -111,6 +91,7 @@ const AreaChart = ({
             axisLine={false}
             tickLine={false}
             tickCount={3}
+            tickFormatter={(value) => formatDate(value, dateFormat)}
           />
           <YAxis
             domain={yAxisBounds}
@@ -120,15 +101,26 @@ const AreaChart = ({
               value   :yLabel,
               angle   :-90,
               position:'left',
-              offset  :1,
+              offset  :-3,
               style   :{ textAnchor: 'middle' },
             }}
             padding={{ top: 10, bottom: 10 }}
             axisLine={false}
-            tickLine
-            tickFormatter={(value) => value.toFixed(2)}
+            tickLine={false}
+            tickFormatter={(value) => {
+              if (isTimeFormat) {
+                return formatTime(value)
+              }
+              return value.toFixed(2)
+            }}
+          />
+          <Tooltip content={(
+            <CustomTooltipContent
+              dateFormat={dateFormat}
+              isTimeFormat={isTimeFormat}
+            />
+          )}
           />
-          <Tooltip content={<CustomTooltipContent />} />
           {filled && (
             <Area
               id="bounds"
@@ -143,13 +135,13 @@ const AreaChart = ({
               isAnimationActive={false}
             />
           )}
-          {yKeys.map((key, index) => (
+          {selectedYLabels.map((key) => (
             <Area
-              id={key}
-              key={key}
+              id={key.label}
+              key={key.label}
               type="linear"
-              dataKey={key}
-              stroke={colors[index]}
+              dataKey={key.label}
+              stroke={key.color}
               fill="none"
               connectNulls
               dot={false}
@@ -164,29 +156,86 @@ const AreaChart = ({
 }
 
 AreaChart.propTypes = {
+  /**
+   * Array of data objects to be displayed in the chart.
+   */
   // eslint-disable-next-line react/forbid-prop-types
-  data  :PropTypes.arrayOf(PropTypes.object).isRequired,
-  title :PropTypes.string.isRequired,
-  xKey  :PropTypes.string.isRequired,
-  yKeys :PropTypes.arrayOf(PropTypes.string).isRequired,
+  data:PropTypes.arrayOf(PropTypes.object).isRequired,
+
+  /**
+   * Title of the chart.
+   */
+  title:PropTypes.string.isRequired,
+
+  /**
+   * Key for the x-axis data.
+   */
+  xKey:PropTypes.string.isRequired,
+
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeys:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Label for the x-axis.
+   */
   xLabel:PropTypes.string,
+
+  /**
+   * Label for the y-axis.
+   */
   yLabel:PropTypes.string,
+
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
   colors:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Boolean to determine if the area under the curve should be filled.
+   */
   filled:PropTypes.bool,
+
+  /**
+   * Height of the chart.
+   */
   height:PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
+
+  /**
+   * Width of the chart.
+   */
   width:PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
   ]),
+
+  /**
+   * Flag on whether to capitalize legend keys
+   */
+  capitalizedLegend:PropTypes.bool,
+
+  /**
+   * Flag on whether it is a timeformat or not
+   */
+  isTimeFormat:PropTypes.bool,
+
+  /**
+   * The type of format for the datetime value
+   */
+  dateFormat:PropTypes.oneOf(Object.values(DATE_FORMATS)),
 }
 
 AreaChart.defaultProps = {
-  filled:false,
-  width :'100%',
-  height:300,
+  filled           :false,
+  width            :'100%',
+  height           :300,
+  capitalizedLegend:false,
+  isTimeFormat     :false,
+  dateFormat       :DATE_FORMATS.HUMAN_READABLE,
 }
 
 export default AreaChart

package/src/ui/a/Charts/AreaChart/styles.scss

@@ -0,0 +1,48 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  &.area-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    .chart-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      h3 {
+        color: var(--subtitle);
+        margin: calc($default-margin / 5);
+        text-align: left;
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/src/ui/a/Charts/BarChart/BarChart.jsx

@@ -0,0 +1,167 @@
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  BarChart as RechartsBarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from '../Common'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'bar-chart'
+
+const BarChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  xKey,
+  yKeys,
+  xLabel,
+  yLabel,
+  colors,
+  height,
+  width,
+  isTimeFormat,
+  capitalizedLegend,
+}) => {
+  const allYLabels = yKeys.map((key) => ({
+    label:key,
+    color:colors[yKeys.indexOf(key)],
+  }))
+
+  const [selectedYLabels, setSelectedYLabels] = useState(allYLabels)
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <div className="chart-header">
+        <h3>{title}</h3>
+        <YLabelsDropDown
+          allYLabels={allYLabels}
+          selectedYLabels={selectedYLabels}
+          setSelectedYLabels={setSelectedYLabels}
+        />
+      </div>
+      <CustomLegend
+        colorsArray={selectedYLabels.map((item) => item.color)}
+        yKeysArray={selectedYLabels.map((item) => item.label)}
+        capitalizedLegend={capitalizedLegend}
+      />
+      <ResponsiveContainer width={width} height={height}>
+        <RechartsBarChart data={data}>
+          <CartesianGrid vertical={false} />
+          <XAxis
+            dataKey={xKey}
+            label={{ value: xLabel, position: 'insideBottom', offset: -5 }} // Adjusted offset for padding
+            axisLine={false}
+            tickLine={false}
+            tickCount={3}
+          />
+          <YAxis
+            label={{
+              value:yLabel, angle:-90, position:'insideLeft', offset:15,
+            }}
+            axisLine={false}
+            tickLine={false}
+          />
+          <Tooltip content={<CustomTooltipContent isTimeFormat={isTimeFormat} />} />
+          {selectedYLabels.map((key) => (
+            <Bar
+              stackId="a"
+              id={key.label}
+              key={key.label}
+              dataKey={key.label}
+              fill={key.color}
+            />
+          ))}
+        </RechartsBarChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+BarChart.propTypes = {
+  /**
+   * Array of data objects to be displayed in the chart.
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data:PropTypes.arrayOf(PropTypes.object).isRequired,
+
+  /**
+   * Title of the chart.
+   */
+  title:PropTypes.string.isRequired,
+
+  /**
+   * Key for the x-axis data.
+   */
+  xKey:PropTypes.string.isRequired,
+
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeys:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Label for the x-axis.
+   */
+  xLabel:PropTypes.string,
+
+  /**
+   * Label for the y-axis.
+   */
+  yLabel:PropTypes.string,
+
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colors:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Height of the chart.
+   */
+  height:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+
+  /**
+   * Width of the chart.
+   */
+  width:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+}
+
+BarChart.defaultProps = {
+  width :'100%',
+  height:300,
+}
+
+export default BarChart

package/src/ui/a/Charts/BarChart/index.js

@@ -0,0 +1 @@
+export { default as BarChart } from './BarChart'

package/src/ui/a/Charts/BarChart/styles.scss

@@ -0,0 +1,48 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  &.bar-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    .chart-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      h3 {
+        color: var(--subtitle);
+        margin: calc($default-margin / 5);
+        text-align: left;
+      }
+    }
+
+    /* stylelint-disable selector-max-compound-selectors -- nested elements */
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-cartesian-grid line {
+          stroke: var(--ui-lines);
+        }
+
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

package/src/ui/a/Charts/Common/CustomLegend/CustomLegend.jsx

@@ -0,0 +1,109 @@
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { snakeCaseToTitleCase } from 'ui/utils'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'custom-legend'
+
+const CustomLegend = ({
+  id,
+  className: userClassName,
+  colorsArray,
+  yKeysArray,
+  orientation,
+  getLegendItemTitle,
+  getLegendItemSubtitle,
+  capitalizedLegend,
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      orientation,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+  >
+    {yKeysArray.map((key, index) => (
+      <div key={key} className="item">
+        <div className="title">
+          <span
+            className="dot"
+            style={{ backgroundColor: colorsArray[index] }}
+          />
+          <span className="text">
+            {
+              capitalizedLegend
+                ? snakeCaseToTitleCase(getLegendItemTitle(key))
+                : getLegendItemTitle(key)
+            }
+          </span>
+        </div>
+        <span className="sub-title">
+          {getLegendItemSubtitle(key)}
+        </span>
+      </div>
+    ))}
+  </div>
+)
+
+CustomLegend.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id:PropTypes.string,
+
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className:PropTypes.string,
+
+  /**
+   * Array of colors corresponding to the y-axis data keys.
+   */
+  colorsArray:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * Array of keys for the y-axis data.
+   */
+  yKeysArray:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   * The orientation of the Legend
+   */
+  orientation:PropTypes.oneOf(['vertical', 'horizontal']),
+
+  /**
+   * The function to get the legendItemKey
+   */
+  getLegendItemTitle:PropTypes.func,
+
+  /**
+   * The function to get legend children
+   */
+  getLegendItemSubtitle:PropTypes.func,
+
+  /**
+   * Flag on whether to capitalize legend keys
+   */
+  capitalizedLegend:PropTypes.bool,
+}
+
+CustomLegend.defaultProps = {
+  orientation          :'horizontal',
+  getLegendItemTitle   :(key) => key,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle:() => {},
+  capitalizedLegend    :false,
+}
+
+export default CustomLegend

package/src/ui/a/Charts/Common/CustomLegend/index.js

@@ -0,0 +1 @@
+export { default as CustomLegend } from './CustomLegend'

package/src/ui/a/Charts/Common/CustomLegend/styles.scss

@@ -0,0 +1,67 @@
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-legend-gap: .625rem;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$default-legend-dot-width: .5rem;
+$default-legend-dot-height: .5rem;
+$default-legend-dot-margin-right: .3125rem;
+$default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
+
+.#{bem.$base} {
+  &.custom-legend {
+    gap: $default-legend-gap;
+    justify-content: flex-end;
+    padding-bottom: $default-padding;
+    padding-right: calc($default-padding * .25);
+
+    &.vertical {
+      display: block;
+      margin-right: calc($default-margin * 2);
+      min-width: fit-content;
+
+      .item {
+        box-shadow: $default-box-shadow;
+        padding-top: $default-padding;
+      }
+    }
+
+    &.horizontal {
+      display: flex;
+    }
+
+    .item {
+      border-radius: $default-border-radius;
+      padding: $default-legend-padding;
+
+      .title {
+        align-items: center;
+        display: flex;
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .text {
+          color: var(--paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+      }
+
+      .sub-title {
+        color: var(--heading);
+        display: flex;
+        font-size: calc($default-text-font-size * 1.2);
+        font-weight: 500;
+        justify-content: flex-end;
+      }
+    }
+  }
+}