@pareto-engineering/design-system 5.0.4 → 5.1.0

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

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import { snakeCaseToTitleCase } from 'ui/utils'
+
 import './styles.scss'
 
 const baseClassName = styleNames.base
@@ -15,40 +17,44 @@ 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 (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-    >
-      {yKeysArray.map((key, index) => (
-        <div key={key} className="item">
+}) => (
+  <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">{capitalizeWord(key)}</span>
+          <span className="text">
+            {
+              capitalizedLegend
+                ? snakeCaseToTitleCase(getLegendItemTitle(key))
+                : getLegendItemTitle(key)
+            }
+          </span>
         </div>
-      ))}
-    </div>
-  )
-}
+        <span className="sub-title">
+          {getLegendItemSubtitle(key)}
+        </span>
+      </div>
+    ))}
+  </div>
+)
 
 CustomLegend.propTypes = {
   /**
@@ -71,6 +77,21 @@ CustomLegend.propTypes = {
    */
   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
    */
@@ -78,7 +99,11 @@ CustomLegend.propTypes = {
 }
 
 CustomLegend.defaultProps = {
-  capitalizedLegend:false,
+  orientation          :'horizontal',
+  getLegendItemTitle   :(key) => key,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle:() => {},
+  capitalizedLegend    :false,
 }
 
 export default CustomLegend

package/src/ui/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/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
+import {
+  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+} from 'ui/utils'
 
 import './styles.scss'
 
@@ -15,13 +17,26 @@ 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 (
@@ -36,15 +51,11 @@ const CustomTooltipContent = ({
           .join(' ')}
       >
         <p className="label">
-          {`${xLabel}: ${formatDate(label, dateFormat)}`}
+          {isDateValue ? formatDate(label, dateFormat) : label}
         </p>
         {newPayload.map((entry) => (
           <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)}`}
           </p>
         ))}
       </div>
@@ -64,11 +75,6 @@ CustomTooltipContent.propTypes = {
    */
   className:PropTypes.string,
 
-  /**
-   * The label for the x-axis.
-   */
-  xLabel:PropTypes.string,
-
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -79,6 +85,11 @@ CustomTooltipContent.propTypes = {
    */
   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.
@@ -99,6 +110,7 @@ CustomTooltipContent.propTypes = {
 
 CustomTooltipContent.defaultProps = {
   isTimeFormat:false,
+  isDateValue :true,
   dateFormat  :DATE_FORMATS.HUMAN_READABLE,
 }
 

package/src/ui/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.jsx

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
+import { snakeCaseToTitleCase } from 'ui/utils'
 
-// Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -65,7 +65,7 @@ const YLabelsDropDown = ({
               className="status-dot"
               style={{ backgroundColor: item.color }}
             />
-            {item.label}
+            {snakeCaseToTitleCase(item.label)}
             {selectedYLabels.some((label) => label.label === item.label) && (
               <span className="icon checkmark">I</span>
             )}
@@ -115,7 +115,7 @@ YLabelsDropDown.propTypes = {
 }
 
 YLabelsDropDown.defaultProps = {
-  placeholder:'Submission status',
+  placeholder:'Select Item',
 }
 
 export default YLabelsDropDown

package/src/ui/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/src/ui/a/Charts/PieChart/PieChart.jsx

@@ -0,0 +1,125 @@
+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 (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <div className="chart-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="chart-content">
+        <ResponsiveContainer width={width} height={height}>
+          <RechartsPieChart>
+            <Pie
+              data={formattedData}
+              dataKey={valueKey}
+              nameKey={labelKey}
+              cx="50%"
+              cy="50%"
+              innerRadius={innerRadius}
+              outerRadius={outerRadius}
+              label={false}
+              paddingAngle={0}
+            >
+              {formattedData.map((entry, index) => (
+                <Cell
+                  key={entry[labelKey]}
+                  fill={colors[index]}
+                  strokeWidth={0}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
+          </RechartsPieChart>
+        </ResponsiveContainer>
+        <CustomLegend
+          colorsArray={colors}
+          yKeysArray={formattedData}
+          capitalizedLegend
+          orientation="vertical"
+          getLegendItemTitle={(entry) => entry[labelKey]}
+          getLegendItemSubtitle={(entry) => entry[valueKey]}
+        />
+      </div>
+    </div>
+  )
+}
+
+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/src/ui/a/Charts/PieChart/index.js

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

package/src/ui/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/src/ui/a/Charts/index.js

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

package/src/ui/a/Notification/styles.scss

@@ -4,6 +4,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-border: 1px solid var(--x);
 $default-padding: 1rem;
 $default-margin: 1rem;
 $default-border-radius: 1.5rem;
@@ -12,10 +13,11 @@ $default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
-  background-color: var(--x);
+  background-color: var(--background-far);
+  border: $default-border;
   border-radius: $default-border-radius;
   bottom: 0;
-  color: var(--on-x);
+  color: var(--paragraph);
   display: flex;
   justify-content: space-between;
   margin-bottom: $default-margin;
@@ -31,8 +33,16 @@ $default-height: var(--notification-height, 5rem);
   > .message-container {
     align-items: center;
     display: flex;
+    gap: $default-padding;
     overflow: auto;
 
+    > .icon {
+      background-color: var(--x);
+      border-radius: 50%;
+      color: var(--white);
+      padding: calc($default-padding / 2);
+    }
+
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
@@ -44,12 +54,14 @@ $default-height: var(--notification-height, 5rem);
   }
 
   .#{bem.$base}.button {
+    background-color: transparent;
+    color: var(--paragraph);
     padding: calc($default-padding / 2);
 
-    &:focus {
+    &:focus,
+    &:hover {
       background-color: transparent;
+      color: var(--hard-paragraph);
     }
   }
 }
-
-

package/src/ui/a/index.js

@@ -30,4 +30,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/src/ui/f/FormInput/FormInput.jsx

@@ -42,6 +42,7 @@ const FormInput = ({
   const newClassName = [
     className,
     componentClassName,
+    otherProps.hasCharacterLimit && otherProps.maxLength && `limit-character-count-${otherProps.maxLength}`,
   ].filter(Boolean).join(' ')
 
   if (type === 'textarea') {

package/src/ui/f/fields/LatexPreviewInput/LatexPreviewInput.jsx

@@ -44,6 +44,7 @@ const LatexPreviewInput = ({
       className={[
         baseClassName,
         componentClassName,
+        className,
         userClassName,
         'form-input',
       ]

package/src/ui/f/fields/LatexPreviewInput/styles.scss

@@ -11,6 +11,7 @@ $default-margin: 1em;
 
   > .preview-child {
     flex: 1;
+    position: relative;
   }
 
   > .latex-container {

package/src/ui/f/fields/TextareaInput/TextareaInput.jsx

@@ -38,6 +38,7 @@ const TextareaInput = ({
   placeholder,
   autoComplete,
   resize,
+  maxLength,
   // ...otherProps
 }) => {
   const [field] = useField({ name, validate })
@@ -73,6 +74,7 @@ const TextareaInput = ({
         rows={rows}
         disabled={disabled}
         autoComplete={autoComplete}
+        maxLength={maxLength}
       >
         {/* It was a dark and stormy night... */}
       </textarea>

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx

@@ -70,6 +70,8 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
   }
 
+  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input']
+
   return (
     <div
       id={id}
@@ -179,6 +181,38 @@ const InputBuilder = ({
             />
           )}
         </div>
+        {textChoices.includes(input?.type) && (
+          <div className="character-limit-container">
+            <div className="is-required">
+              <span className="s0">
+                Limit number of characters permitted for this input
+              </span>
+              <ToggleSwitch
+                handleOnChange={() => {
+                  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit)
+                  if (!input?.hasCharacterLimit) {
+                    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '')
+                  }
+                }}
+                checked={input?.hasCharacterLimit}
+                style={getToggleSwitchStyles(!input?.hasCharacterLimit)}
+                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`}
+              />
+            </div>
+            <div className="character-limit-input">
+              {input?.hasCharacterLimit && (
+              <TextInput
+                label="Enter the maximum number of characters permitted."
+                name={`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`}
+                placeholder=""
+                type="number"
+                validate={integerAndGreaterThanZero}
+                value={input?.maxLength}
+              />
+              )}
+            </div>
+          </div>
+        )}
         {shouldRenderOptions && (
           <FieldArray name={`sections.${sectionIndex}.inputs.${inputIndex}.options`}>
             {({ push, remove }) => (