@pareto-engineering/design-system 5.2.0 → 5.3.0

package/dist/es/f/fields/ToggleInput/ToggleInput.js

@@ -0,0 +1,116 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useField } from 'formik';
+import styleNames from '@pareto-engineering/bem/exports';
+import { ToggleSwitch } from "../../../a";
+import { FormLabel, FormDescription } from "../../common";
+import "./styles.scss";
+
+// Local Definitions
+const baseClassName = styleNames.base;
+const componentClassName = 'toggle-input';
+
+/**
+ * Toggle input field component that wraps ToggleSwitch for use with Formik
+ */
+const ToggleInput = ({
+  id,
+  className: userClassName,
+  style,
+  name,
+  label,
+  color,
+  labelColor,
+  validate,
+  description,
+  disabled,
+  optional,
+  size
+  // ...otherProps
+}) => {
+  const [field,, helpers] = useField({
+    name,
+    validate,
+    type: 'checkbox'
+  });
+  const handleChange = () => {
+    helpers.setValue(!field.value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "toggle-wrapper"
+  }, /*#__PURE__*/React.createElement(ToggleSwitch, {
+    checked: Boolean(field.value),
+    handleOnChange: handleChange,
+    inputId: name,
+    size: size,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+ToggleInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: PropTypes.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: PropTypes.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: PropTypes.objectOf(PropTypes.string),
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: PropTypes.string.isRequired,
+  /**
+   * The input label
+   */
+  label: PropTypes.string.isRequired,
+  /**
+   * The input label color
+   */
+  labelColor: PropTypes.string,
+  /**
+   * The input field validator function
+   */
+  validate: PropTypes.func,
+  /**
+   * Input description
+   */
+  description: PropTypes.string,
+  /**
+   * Whether the toggle input should be disabled
+   */
+  disabled: PropTypes.bool,
+  /**
+   * The text input color
+   */
+  color: PropTypes.string,
+  /**
+   * Whether the input is optional or not
+   */
+  optional: PropTypes.bool,
+  /**
+   * The size of the toggle switch
+   */
+  size: PropTypes.string
+};
+ToggleInput.defaultProps = {
+  color: 'paragraph',
+  disabled: false
+};
+export default ToggleInput;

package/dist/es/f/fields/ToggleInput/index.js

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+export { default as ToggleInput } from "./ToggleInput";

package/dist/es/f/fields/ToggleInput/styles.scss

@@ -0,0 +1,22 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+
+@use "@pareto-engineering/bem";
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+.#{bem.$base}.toggle-input {
+  display: flex;
+  flex-direction: column;
+
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+  > .toggle-wrapper {
+    align-items: center;
+    display: flex;
+    margin-bottom: calc(var(--gap) / 2);
+  }
+}
+
+

package/dist/es/f/fields/index.js

@@ -10,4 +10,5 @@ export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
 export { EditorInput } from "./EditorInput";
 export { LatexPreviewInput, convertLatexToHtml } from "./LatexPreviewInput";
-export { FileUpload, fileUploadOptions, getFileType, getFileTypeFromUrl } from "./FileUpload";
+export { FileUpload, fileUploadOptions, getFileType, getFileTypeFromUrl } from "./FileUpload";
+export { ToggleInput } from "./ToggleInput";

package/dist/es/utils/formatting.js

@@ -1,5 +1,6 @@
 export const DATE_FORMATS = {
   HUMAN_READABLE: 'human_readable',
+  HUMAN_READABLE_WITH_TIME: 'human_readable_with_time',
   TIME: 'time',
   DATETIME: 'datetime',
   CHART_DATE: 'chart_date',
@@ -42,23 +43,6 @@ export const formatTime = seconds => {
   if (parts.length === 0) return '0s';
   return parts.join(' ');
 };
-const parseDate = input => {
-  if (input instanceof Date) return input;
-  if (typeof input === 'number') return new Date(input);
-  if (typeof input === 'string') {
-    if (isTimeSliceFormat(input)) {
-      return createTimeFromSlice(input);
-    }
-    const parsed = new Date(input);
-    if (isValidDate(parsed)) return parsed;
-    const timestamp = parseInt(input, 10);
-    if (!Number.isNaN(timestamp)) {
-      const date = new Date(timestamp * 1000);
-      if (isValidDate(date)) return date;
-    }
-  }
-  return null;
-};
 const formatStrategies = {
   [DATE_FORMATS.CHART_DATE]: date => {
     const monthDay = date.toLocaleDateString('en-US', {
@@ -75,8 +59,32 @@ const formatStrategies = {
     day: 'numeric',
     timeZone: 'UTC'
   }),
+  [DATE_FORMATS.HUMAN_READABLE_WITH_TIME]: date => date.toLocaleString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    timeZone: 'UTC'
+  }),
   default: date => date.toISOString()
 };
+export const parseDate = input => {
+  if (input instanceof Date) return input;
+  if (typeof input === 'number') return new Date(input);
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input);
+    }
+    const parsed = new Date(input);
+    if (isValidDate(parsed)) return parsed;
+    const timestamp = parseInt(input, 10);
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000);
+      if (isValidDate(date)) return date;
+    }
+  }
+  return null;
+};
 export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   try {
     if (typeof input === 'string' && isTimeSliceFormat(input)) {

package/dist/es/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -45,7 +45,8 @@
     "css-loader": "^6.7.3",
     "identity-obj-proxy": "^3.0.0",
     "jest-environment-jsdom": "^29.5.0",
-    "sass-loader": "^13.2.2",
+    "sass": "^1.85.1",
+    "sass-loader": "^16.0.5",
     "storybook": "^7.0.6",
     "style-loader": "^3.3.2"
   },
@@ -59,9 +60,9 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^5.1.1",
-    "@pareto-engineering/bem": "^5.0.0",
-    "@pareto-engineering/styles": "^5.0.0",
+    "@pareto-engineering/assets": "^5.3.0",
+    "@pareto-engineering/bem": "^5.3.0",
+    "@pareto-engineering/styles": "^5.3.0",
     "@pareto-engineering/utils": "^5.0.0",
     "better-react-mathjax": "^2.0.3",
     "codemirror": "^6.0.1",
@@ -87,5 +88,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "2f0f3c933a23635520aebf9b3bb932a4063c432e"
+  "gitHead": "74dc91892e6471a3c42e65ce673c62693ce943f5"
 }

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

@@ -16,7 +16,11 @@ import {
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
+import {
+  formatTime, formatDate, DATE_FORMATS, parseDate,
+} from 'ui/utils'
+
+import { ThroughPutIndicator } from '../../ThroughPutIndicator'
 
 import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from '../Common'
 
@@ -26,6 +30,34 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'area-chart'
 
+/**
+ * Determines whether to show only date or date with time based on the data range
+ *
+ * @param {Array} data - The chart data array
+ * @param {string} xKey - The key for the x-axis values (dates)
+ * @returns {boolean} - True if only date should be shown, false if date and time should be shown
+ */
+const shouldShowOnlyDate = (data, xKey) => {
+  if (!data || data.length < 2 || !xKey) return true
+
+  // Extract dates from the data
+  const dates = data.map((item) => parseDate(item[xKey])).filter((date) => date !== null)
+
+  if (dates.length < 2) return true
+
+  // Sort dates chronologically
+  dates.sort((a, b) => a.getTime() - b.getTime())
+
+  // Calculate the difference in days between the first and last date
+  const firstDate = dates[0]
+  const lastDate = dates[dates.length - 1]
+  const diffInMs = lastDate.getTime() - firstDate.getTime()
+  const diffInDays = diffInMs / (1000 * 60 * 60 * 24)
+
+  // If the data spans less than 4 days, show only date
+  return diffInDays > 4
+}
+
 const AreaChart = ({
   id,
   className: userClassName,
@@ -42,6 +74,8 @@ const AreaChart = ({
   isTimeFormat,
   dateFormat,
   capitalizedLegend,
+  isWorkerSubmissionChart,
+  totalSubmissions,
 }) => {
   const allYLabels = yKeys.map((key) => ({
     label:key,
@@ -55,9 +89,11 @@ const AreaChart = ({
     const min = Math.min(...yValues.flat())
     const max = Math.max(...yValues.flat())
     const margin = (max - min) * 0.1
-    return [min - margin, max + margin]
+    return [Math.max(min - margin, 0), max + margin]
   }
 
+  const showOnlyDate = shouldShowOnlyDate(data, xKey)
+
   return (
     <div
       id={id}
@@ -71,13 +107,22 @@ const AreaChart = ({
     >
       <div className="chart-header">
         <h3>{title}</h3>
+
         <YLabelsDropDown
           allYLabels={allYLabels}
           selectedYLabels={selectedYLabels}
           setSelectedYLabels={setSelectedYLabels}
         />
       </div>
+
+      {isWorkerSubmissionChart && (
+      <div className="worker-submissions-total-percentage-container">
+        <p className="total-submissions-text">{totalSubmissions}</p>
+        <ThroughPutIndicator data={data} keyName="reserved" />
+      </div>
+      )}
       <CustomLegend
+        key={id}
         colorsArray={colors}
         yKeysArray={yKeys}
         capitalizedLegend={capitalizedLegend}
@@ -91,7 +136,12 @@ const AreaChart = ({
             axisLine={false}
             tickLine={false}
             tickCount={3}
-            tickFormatter={(value) => formatDate(value, dateFormat)}
+            tickFormatter={(value) => {
+              if (showOnlyDate) {
+                return formatDate(value, dateFormat)
+              }
+              return formatDate(value, DATE_FORMATS.HUMAN_READABLE_WITH_TIME)
+            }}
           />
           <YAxis
             domain={yAxisBounds}
@@ -111,6 +161,9 @@ const AreaChart = ({
               if (isTimeFormat) {
                 return formatTime(value)
               }
+              if (isWorkerSubmissionChart) {
+                return Math.round(value)
+              }
               return value.toFixed(2)
             }}
           />
@@ -227,15 +280,27 @@ AreaChart.propTypes = {
    * The type of format for the datetime value
    */
   dateFormat:PropTypes.oneOf(Object.values(DATE_FORMATS)),
+
+  /**
+   * Flag on whether the chart is a worker submission chart or not
+   */
+  isWorkerSubmissionChart:PropTypes.bool,
+
+  /**
+   * Total submissions
+   */
+  totalSubmissions:PropTypes.number,
 }
 
 AreaChart.defaultProps = {
-  filled           :false,
-  width            :'100%',
-  height           :300,
-  capitalizedLegend:false,
-  isTimeFormat     :false,
-  dateFormat       :DATE_FORMATS.HUMAN_READABLE,
+  filled                 :false,
+  width                  :'100%',
+  height                 :300,
+  capitalizedLegend      :false,
+  isTimeFormat           :false,
+  dateFormat             :DATE_FORMATS.HUMAN_READABLE,
+  isWorkerSubmissionChart:false,
+
 }
 
 export default AreaChart

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

@@ -26,6 +26,17 @@ $default-text-font-size: calc(var(--s-1) * 1rem);
       }
     }
 
+    .worker-submissions-total-percentage-container {
+      align-items: center;
+      display: flex;
+      gap: 1rem;
+      justify-content: flex-start;
+
+      .total-submissions-text {
+        font-size: calc($default-text-font-size * 2);
+      }
+    }
+
     /* stylelint-disable selector-max-compound-selectors -- nested elements */
     .recharts-wrapper {
       .recharts-surface {
@@ -46,3 +57,14 @@ $default-text-font-size: calc(var(--s-1) * 1rem);
     }
   }
 }
+
+.worker-submissions-total-percentage-container {
+  align-items: center;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
+
+  .total-submissions-text {
+    font-size: calc($default-text-font-size * 2);
+  }
+}

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

@@ -68,6 +68,7 @@ const BarChart = ({
         />
       </div>
       <CustomLegend
+        key={id}
         colorsArray={selectedYLabels.map((item) => item.color)}
         yKeysArray={selectedYLabels.map((item) => item.label)}
         capitalizedLegend={capitalizedLegend}

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

@@ -12,6 +12,11 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'custom-legend'
 
+const toCurrency = (value) => {
+  const formatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' })
+  return formatter.format(value)
+}
+
 const CustomLegend = ({
   id,
   className: userClassName,
@@ -21,6 +26,8 @@ const CustomLegend = ({
   getLegendItemTitle,
   getLegendItemSubtitle,
   capitalizedLegend,
+  subtitleToCurrency,
+  isPayOutChart,
 }) => (
   <div
     id={id}
@@ -46,11 +53,21 @@ const CustomLegend = ({
                 ? snakeCaseToTitleCase(getLegendItemTitle(key))
                 : getLegendItemTitle(key)
             }
+
           </span>
         </div>
-        <span className="sub-title">
-          {getLegendItemSubtitle(key)}
-        </span>
+        <div className="sub-title-percentage-container">
+          <span className="sub-title">
+            {subtitleToCurrency
+              ? toCurrency(getLegendItemSubtitle(key))
+              : getLegendItemSubtitle(key)}
+          </span>
+          { Object.prototype.hasOwnProperty.call(key, 'percentage') && !isPayOutChart && (
+          <span className="percentage-title">
+            {`${key?.percentage}%`}
+          </span>
+          )}
+        </div>
       </div>
     ))}
   </div>
@@ -96,6 +113,11 @@ CustomLegend.propTypes = {
    * Flag on whether to capitalize legend keys
    */
   capitalizedLegend:PropTypes.bool,
+
+  /**
+   * Flag on whether to convert the subtitle to currency
+   */
+  subtitleToCurrency:PropTypes.bool,
 }
 
 CustomLegend.defaultProps = {
@@ -104,6 +126,7 @@ CustomLegend.defaultProps = {
   /* eslint-disable no-unused-vars */
   getLegendItemSubtitle:() => {},
   capitalizedLegend    :false,
+  subtitleToCurrency   :false,
 }
 
 export default CustomLegend

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

@@ -24,7 +24,6 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
       min-width: fit-content;
 
       .item {
-        box-shadow: $default-box-shadow;
         padding-top: $default-padding;
       }
     }
@@ -55,12 +54,21 @@ $default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
         }
       }
 
+
+
       .sub-title {
         color: var(--heading);
         display: flex;
         font-size: calc($default-text-font-size * 1.2);
         font-weight: 500;
-        justify-content: flex-end;
+        justify-content: flex-start;
+        margin-left: 1rem;
+      }
+
+      .percentage-title {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+        justify-content: flex-start;
       }
     }
   }