@pareto-engineering/design-system 5.0.1 → 5.0.2

package/dist/es/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-legend';
@@ -9,28 +10,28 @@ const CustomLegend = ({
   className: userClassName,
   colorsArray,
   yKeysArray,
+  orientation,
+  getLegendItemTitle,
+  getLegendItemSubtitle,
   capitalizedLegend
-}) => {
-  const capitalizeWord = word => {
-    if (!capitalizedLegend) return word;
-    const wordsToCapitalize = ['average', 'best', 'worst'];
-    return word.split(' ').map(part => wordsToCapitalize.includes(part.toLowerCase()) ? part.charAt(0).toUpperCase() + part.slice(1).toLowerCase() : part).join(' ');
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
-    key: key,
-    className: "item"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "dot",
-    style: {
-      backgroundColor: colorsArray[index]
-    }
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "text"
-  }, capitalizeWord(key)))));
-};
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
+}, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+  key: key,
+  className: "item"
+}, /*#__PURE__*/React.createElement("div", {
+  className: "title"
+}, /*#__PURE__*/React.createElement("span", {
+  className: "dot",
+  style: {
+    backgroundColor: colorsArray[index]
+  }
+}), /*#__PURE__*/React.createElement("span", {
+  className: "text"
+}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+  className: "sub-title"
+}, getLegendItemSubtitle(key)))));
 CustomLegend.propTypes = {
   /**
    * The id of the dropdown component.
@@ -48,12 +49,28 @@ CustomLegend.propTypes = {
    * 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/dist/es/a/Charts/Common/CustomLegend/styles.scss

@@ -1,6 +1,7 @@
 @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;
@@ -8,33 +9,59 @@ $default-legend-padding: calc($default-padding * .125) calc($default-padding * .
 $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 {
-    display: flex;
     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 {
-      align-items: center;
       border-radius: $default-border-radius;
-      display: flex;
       padding: $default-legend-padding;
-    }
 
-    .dot {
-      border-radius: 50%;
-      display: inline-block;
-      height: $default-legend-dot-height;
-      margin-right: $default-legend-dot-margin-right;
-      width: $default-legend-dot-width;
-    }
+      .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);
+        }
+      }
 
-    .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;
+      }
     }
   }
 }

package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -1,20 +1,30 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS } from "../../../../utils";
+import { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-tooltip-content';
 const CustomTooltipContent = ({
   id,
   className: userClassName,
-  xLabel,
   dateFormat,
   isTimeFormat,
+  isDateValue,
   active,
   payload,
   label
 }) => {
+  const formatLabelValue = value => {
+    if (isTimeFormat) {
+      return formatTime(value);
+    }
+    if (typeof value === 'number') {
+      if (Number.isInteger(value)) return value;
+      return value.toFixed(2);
+    }
+    return value;
+  };
   if (active && payload && payload.length) {
     const newPayload = payload.filter(item => item.name !== 'bounds');
     return /*#__PURE__*/React.createElement("div", {
@@ -22,14 +32,14 @@ const CustomTooltipContent = ({
       className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
     }, /*#__PURE__*/React.createElement("p", {
       className: "label"
-    }, `${xLabel}: ${formatDate(label, dateFormat)}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+    }, isDateValue ? formatDate(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
       className: "label",
       key: `${entry.name}`,
       style: {
         color: entry.color,
         textTransform: 'capitalize'
       }
-    }, `${entry.name}: ${isTimeFormat ? formatTime(entry.value) : entry.value}`)));
+    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`)));
   }
   return null;
 };
@@ -42,10 +52,6 @@ CustomTooltipContent.propTypes = {
    * Additional class names for the dropdown component.
    */
   className: PropTypes.string,
-  /**
-   * The label for the x-axis.
-   */
-  xLabel: PropTypes.string,
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -54,6 +60,10 @@ CustomTooltipContent.propTypes = {
    * The type of format for the datetime value
    */
   dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS)),
+  /**
+   * Flag on whether the label is a date value or not
+   */
+  isDateValue: PropTypes.bool,
   /**
    * If set true, the tooltip is displayed.
    * If set false, the tooltip is hidden, usually calculated internally.
@@ -71,6 +81,7 @@ CustomTooltipContent.propTypes = {
 };
 CustomTooltipContent.defaultProps = {
   isTimeFormat: false,
+  isDateValue: true,
   dateFormat: DATE_FORMATS.HUMAN_READABLE
 };
 export default CustomTooltipContent;

package/dist/es/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -2,10 +2,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
+import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
-
-// Local Definitions
-
 const baseClassName = styleNames.base;
 const componentClassName = 'y-labels-dropdown';
 const YLabelsDropDown = ({
@@ -46,7 +44,7 @@ const YLabelsDropDown = ({
     style: {
       backgroundColor: item.color
     }
-  }), item.label, selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
+  }), snakeCaseToTitleCase(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
     className: "icon checkmark"
   }, "I")))));
 };
@@ -83,6 +81,6 @@ YLabelsDropDown.propTypes = {
   }))
 };
 YLabelsDropDown.defaultProps = {
-  placeholder: 'Submission status'
+  placeholder: 'Select Item'
 };
 export default YLabelsDropDown;

package/dist/es/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -1,7 +1,8 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border-radius: .25rem;
+$default-border: var(--theme-default-input-border);
+$default-border-radius: var(--theme-default-input-border-radius);
 $default-padding: 1rem;
 $default-width: 15rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
@@ -16,9 +17,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--soft-background-inputs);
-      border: none;
-      border-radius: $default-border-radius;
+      background-color: var(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -53,8 +54,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: $default-border-radius;
-        color: var(--hard-paragraph);
+        border-radius: calc($default-border-radius / 2);
+        color: var(--paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);

package/dist/es/a/Charts/PieChart/PieChart.js

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
+import styleNames from '@pareto-engineering/bem/exports';
+import { CustomLegend, CustomTooltipContent } from "../Common";
+import "./styles.scss";
+const baseClassName = styleNames.base;
+const componentClassName = 'pie-chart';
+const PieChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  valueKey,
+  labelKey,
+  colors,
+  height,
+  width,
+  innerRadius,
+  outerRadius
+}) => {
+  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
+  const formattedData = data.map(item => ({
+    ...item,
+    label: item[labelKey],
+    color: colors[data.indexOf(item)],
+    percentage: (item[valueKey] / total * 100).toFixed(0)
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-header"
+  }, /*#__PURE__*/React.createElement("h3", null, title)), /*#__PURE__*/React.createElement("div", {
+    className: "chart-content"
+  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(RechartsPieChart, null, /*#__PURE__*/React.createElement(Pie, {
+    data: formattedData,
+    dataKey: valueKey,
+    nameKey: labelKey,
+    cx: "50%",
+    cy: "50%",
+    innerRadius: innerRadius,
+    outerRadius: outerRadius,
+    label: false,
+    paddingAngle: 0
+  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(Cell, {
+    key: entry[labelKey],
+    fill: colors[index],
+    strokeWidth: 0
+  }))), /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
+      isDateValue: false
+    })
+  }))), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: formattedData,
+    capitalizedLegend: true,
+    orientation: "vertical",
+    getLegendItemTitle: entry => entry[labelKey],
+    getLegendItemSubtitle: entry => entry[valueKey]
+  })));
+};
+PieChart.propTypes = {
+  id: PropTypes.string,
+  className: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  })).isRequired,
+  title: PropTypes.string.isRequired,
+  valueKey: PropTypes.string.isRequired,
+  labelKey: PropTypes.string.isRequired,
+  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  outerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+};
+PieChart.defaultProps = {
+  id: undefined,
+  className: undefined,
+  width: '100%',
+  height: 300,
+  innerRadius: '0%',
+  outerRadius: '100%'
+};
+export default PieChart;

package/dist/es/a/Charts/PieChart/index.js

@@ -0,0 +1 @@
+export { default as PieChart } from "./PieChart";

package/dist/es/a/Charts/PieChart/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} {
+  &.pie-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;
+      }
+    }
+
+    .chart-content {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .recharts-wrapper {
+      .recharts-surface {
+        .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/dist/es/a/Charts/index.js

@@ -1,2 +1,3 @@
 export { AreaChart } from "./AreaChart";
-export { BarChart } from "./BarChart";
+export { BarChart } from "./BarChart";
+export { PieChart } from "./PieChart";

package/dist/es/a/index.js

@@ -28,4 +28,4 @@ export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
 export { Tooltip } from "./Tooltip";
-export { AreaChart, BarChart } from "./Charts";
+export { AreaChart, BarChart, PieChart } from "./Charts";

package/dist/es/utils/formatting.js

@@ -37,6 +37,9 @@ export const formatTime = seconds => {
   if (hours > 0) parts.push(`${hours}h`);
   if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
   if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s';
   return parts.join(' ');
 };
 const parseDate = input => {
@@ -99,4 +102,8 @@ export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   } catch (error) {
     return 'Invalid Date';
   }
+};
+export const snakeCaseToTitleCase = word => {
+  const result = word.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
 };

package/dist/es/utils/index.js

@@ -1,2 +1,2 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
-export { formatTime, formatDate, DATE_FORMATS } from "./formatting";
+export { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "./formatting";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -87,5 +87,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "874a3dc9198810523c6fe0edbaf72f43ddd6612d"
+  "gitHead": "af1d9f8a840222f80506834a9ed5402c4465b69a"
 }

package/src/stories/a/AreaChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { AreaChart } from 'ui'
 
 export default {
-  title    :'a/AreaChart',
+  title    :'a/Charts/AreaChart',
   component:AreaChart,
 }
 

package/src/stories/a/BarChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { BarChart } from 'ui'
 
 export default {
-  title    :'a/BarChart',
+  title    :'a/Charts/BarChart',
   component:BarChart,
 }
 

package/src/stories/a/PieChart.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { PieChart } from 'ui'
+
+export default {
+  title    :'a/Charts/PieChart',
+  component:PieChart,
+}
+
+const data = [
+  { status: 'pendingReview', value: 230 },
+  { status: 'accepted', value: 350 },
+  { status: 'rejected', value: 80 },
+  { status: 'toRevise', value: 10 },
+  { status: 'revised', value: 60 },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <PieChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  valueKey:'value',
+  labelKey:'status',
+  colors  :['#8CB0F8', '#7F7CF6', '#FFD66E', '#E8E9ED', '#F6BC7E'],
+  height  :400,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+  },
+]

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

@@ -50,18 +50,6 @@ const AreaChart = ({
 
   const [selectedYLabels, setSelectedYLabels] = useState(allYLabels)
 
-  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],
-      isTimeFormat,
-    }
-  })
-
   const yAxisBounds = () => {
     const yValues = data.map((item) => yKeys.map((key) => item[key]))
     const min = Math.min(...yValues.flat())
@@ -95,7 +83,7 @@ const AreaChart = ({
         capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
-        <RechartsAreaChart data={processedData}>
+        <RechartsAreaChart data={data}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xKey}
@@ -126,7 +114,13 @@ const AreaChart = ({
               return value.toFixed(2)
             }}
           />
-          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
+          <Tooltip content={(
+            <CustomTooltipContent
+              dateFormat={dateFormat}
+              isTimeFormat={isTimeFormat}
+            />
+          )}
+          />
           {filled && (
             <Area
               id="bounds"

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

@@ -38,7 +38,8 @@ const BarChart = ({
   colors,
   height,
   width,
-  // ...otherProps
+  isTimeFormat,
+  capitalizedLegend,
 }) => {
   const allYLabels = yKeys.map((key) => ({
     label:key,
@@ -69,6 +70,7 @@ const BarChart = ({
       <CustomLegend
         colorsArray={selectedYLabels.map((item) => item.color)}
         yKeysArray={selectedYLabels.map((item) => item.label)}
+        capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
         <RechartsBarChart data={data}>
@@ -87,7 +89,7 @@ const BarChart = ({
             axisLine={false}
             tickLine={false}
           />
-          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
+          <Tooltip content={<CustomTooltipContent isTimeFormat={isTimeFormat} />} />
           {selectedYLabels.map((key) => (
             <Bar
               stackId="a"