@pareto-engineering/design-system 5.2.1 → 5.3.0

package/dist/cjs/a/Charts/AreaChart/AreaChart.js

@@ -10,6 +10,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _recharts = require("recharts");
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 var _utils = require("../../../utils");
+var _ThroughPutIndicator = require("../../ThroughPutIndicator");
 var _Common = require("../Common");
 require("./styles.scss");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -17,6 +18,33 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const baseClassName = _exports.default.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 => (0, _utils.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 = _ref => {
   let {
     id,
@@ -33,7 +61,9 @@ const AreaChart = _ref => {
     width,
     isTimeFormat,
     dateFormat,
-    capitalizedLegend
+    capitalizedLegend,
+    isWorkerSubmissionChart,
+    totalSubmissions
   } = _ref;
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -45,8 +75,9 @@ const AreaChart = _ref => {
     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 /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
@@ -56,6 +87,13 @@ const AreaChart = _ref => {
     allYLabels: allYLabels,
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
+  })), isWorkerSubmissionChart && /*#__PURE__*/React.createElement("div", {
+    className: "worker-submissions-total-percentage-container"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "total-submissions-text"
+  }, totalSubmissions), /*#__PURE__*/React.createElement(_ThroughPutIndicator.ThroughPutIndicator, {
+    data: data,
+    keyName: "reserved"
   })), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
     key: id,
     colorsArray: colors,
@@ -78,7 +116,12 @@ const AreaChart = _ref => {
     axisLine: false,
     tickLine: false,
     tickCount: 3,
-    tickFormatter: value => (0, _utils.formatDate)(value, dateFormat)
+    tickFormatter: value => {
+      if (showOnlyDate) {
+        return (0, _utils.formatDate)(value, dateFormat);
+      }
+      return (0, _utils.formatDate)(value, _utils.DATE_FORMATS.HUMAN_READABLE_WITH_TIME);
+    }
   }), /*#__PURE__*/React.createElement(_recharts.YAxis, {
     domain: yAxisBounds,
     scale: "linear",
@@ -102,6 +145,9 @@ const AreaChart = _ref => {
       if (isTimeFormat) {
         return (0, _utils.formatTime)(value);
       }
+      if (isWorkerSubmissionChart) {
+        return Math.round(value);
+      }
       return value.toFixed(2);
     }
   }), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
@@ -188,7 +234,15 @@ AreaChart.propTypes = {
   /**
    * The type of format for the datetime value
    */
-  dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS))
+  dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS)),
+  /**
+   * Flag on whether the chart is a worker submission chart or not
+   */
+  isWorkerSubmissionChart: _propTypes.default.bool,
+  /**
+   * Total submissions
+   */
+  totalSubmissions: _propTypes.default.number
 };
 AreaChart.defaultProps = {
   filled: false,
@@ -196,6 +250,7 @@ AreaChart.defaultProps = {
   height: 300,
   capitalizedLegend: false,
   isTimeFormat: false,
-  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
+  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE,
+  isWorkerSubmissionChart: false
 };
 var _default = exports.default = AreaChart;

package/dist/cjs/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/dist/cjs/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -14,6 +14,13 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const baseClassName = _exports.default.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 = _ref => {
   let {
     id,
@@ -23,7 +30,9 @@ const CustomLegend = _ref => {
     orientation,
     getLegendItemTitle,
     getLegendItemSubtitle,
-    capitalizedLegend
+    capitalizedLegend,
+    subtitleToCurrency,
+    isPayOutChart
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -44,9 +53,9 @@ const CustomLegend = _ref => {
     className: "sub-title-percentage-container"
   }, /*#__PURE__*/React.createElement("span", {
     className: "sub-title"
-  }, getLegendItemSubtitle(key)), key.percentage && /*#__PURE__*/React.createElement("span", {
+  }, subtitleToCurrency ? toCurrency(getLegendItemSubtitle(key)) : getLegendItemSubtitle(key)), Object.prototype.hasOwnProperty.call(key, 'percentage') && !isPayOutChart && /*#__PURE__*/React.createElement("span", {
     className: "percentage-title"
-  }, `${key.percentage}%`)))));
+  }, `${key?.percentage}%`)))));
 };
 CustomLegend.propTypes = {
   /**
@@ -80,13 +89,18 @@ CustomLegend.propTypes = {
   /**
    * Flag on whether to capitalize legend keys
    */
-  capitalizedLegend: _propTypes.default.bool
+  capitalizedLegend: _propTypes.default.bool,
+  /**
+   * Flag on whether to convert the subtitle to currency
+   */
+  subtitleToCurrency: _propTypes.default.bool
 };
 CustomLegend.defaultProps = {
   orientation: 'horizontal',
   getLegendItemTitle: key => key,
   /* eslint-disable no-unused-vars */
   getLegendItemSubtitle: () => {},
-  capitalizedLegend: false
+  capitalizedLegend: false,
+  subtitleToCurrency: false
 };
 var _default = exports.default = CustomLegend;

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

@@ -14,7 +14,82 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const baseClassName = _exports.default.base;
 const componentClassName = 'custom-tooltip-content';
-const CustomTooltipContent = _ref => {
+const formatValue = (value, isTimeFormat) => {
+  if (isTimeFormat) {
+    return (0, _utils.formatTime)(value);
+  }
+  if (typeof value === 'number') {
+    return Number.isInteger(value) ? value : value.toFixed(2);
+  }
+  return value;
+};
+const PayoutPieChartLabel = _ref => {
+  let {
+    entry,
+    formatLabelValue
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pie-chart-label"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "status"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot",
+    style: {
+      backgroundColor: entry?.payload?.color
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "label",
+    key: `${entry.name}`,
+    style: {
+      color: entry.color,
+      textTransform: 'capitalize'
+    }
+  }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+    className: "value"
+  }, `${formatLabelValue(entry.value)}`));
+};
+const StandardPieChartLabel = _ref2 => {
+  let {
+    entry,
+    formatLabelValue
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
+    className: "pie-chart-label"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "status"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "dot",
+    style: {
+      backgroundColor: entry?.payload?.color
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    className: "label",
+    key: `${entry.name}`,
+    style: {
+      color: entry.color,
+      textTransform: 'capitalize'
+    }
+  }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+    className: "value"
+  }, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
+    className: "percentage-title"
+  }, `${entry?.payload?.percentage}%`)));
+};
+const StandardChartLabel = _ref3 => {
+  let {
+    entry,
+    formatLabelValue
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("p", {
+    className: "label",
+    key: `${entry.name}`,
+    style: {
+      color: entry.color,
+      textTransform: 'capitalize'
+    }
+  }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`);
+};
+const CustomTooltipContent = _ref4 => {
   let {
     id,
     className: userClassName,
@@ -24,106 +99,96 @@ const CustomTooltipContent = _ref => {
     active,
     payload,
     label,
-    isPieChart
-  } = _ref;
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return (0, _utils.formatTime)(value);
-    }
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value;
-      return value.toFixed(2);
+    isPieChart,
+    isPayOutChart
+  } = _ref4;
+  const formatLabelValue = React.useCallback(value => formatValue(value, isTimeFormat), [isTimeFormat]);
+  const renderContent = React.useCallback(entry => {
+    if (isPieChart && isPayOutChart) {
+      return /*#__PURE__*/React.createElement(PayoutPieChartLabel, {
+        entry: entry,
+        formatLabelValue: formatLabelValue
+      });
     }
-    return value;
-  };
-  const renderContent = entry => {
     if (isPieChart) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
-        className: "pie-chart-label"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "status"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: "dot",
-        style: {
-          backgroundColor: entry?.payload?.color
-        }
-      }), /*#__PURE__*/React.createElement("p", {
-        className: "label",
-        key: `${entry.name}`,
-        style: {
-          color: entry.color,
-          textTransform: 'capitalize'
-        }
-      }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
-        className: "value"
-      }, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
-        className: "percentage-title"
-      }, `${entry?.payload?.percentage}%`)));
+      return /*#__PURE__*/React.createElement(StandardPieChartLabel, {
+        entry: entry,
+        formatLabelValue: formatLabelValue
+      });
     }
-    return /*#__PURE__*/React.createElement("p", {
-      className: "label",
-      key: `${entry.name}`,
-      style: {
-        color: entry.color,
-        textTransform: 'capitalize'
-      }
-    }, `${(0, _utils.snakeCaseToTitleCase)(entry.name)}: ${formatLabelValue(entry.value)}`);
-  };
-  if (active && payload && payload?.length) {
-    const newPayload = payload.filter(item => item?.name !== 'bounds');
-    return /*#__PURE__*/React.createElement("div", {
-      id: id,
-      className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-    }, /*#__PURE__*/React.createElement("p", {
-      className: "label"
-    }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => renderContent(entry)));
+    return /*#__PURE__*/React.createElement(StandardChartLabel, {
+      entry: entry,
+      formatLabelValue: formatLabelValue
+    });
+  }, [isPieChart, isPayOutChart, formatLabelValue]);
+  if (!active || !payload || !payload.length) {
+    return null;
   }
-  return null;
+  const filteredPayload = payload.filter(item => item?.name !== 'bounds');
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(Boolean).join(' ')
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "label"
+  }, isDateValue ? (0, _utils.formatDate)(label, dateFormat) : label), filteredPayload.map(entry => /*#__PURE__*/React.createElement(React.Fragment, {
+    key: entry.name || entry.dataKey
+  }, renderContent(entry))));
 };
 CustomTooltipContent.propTypes = {
   /**
-  * The id of the dropdown component.
-  */
+   * The id of the tooltip component
+   */
   id: _propTypes.default.string,
   /**
-   * Additional class names for the dropdown component.
+   * Additional class names for the tooltip component
    */
   className: _propTypes.default.string,
   /**
-   * Flag on whether it is a timeformat or not
+   * Flag indicating whether values should be formatted as time
    */
   isTimeFormat: _propTypes.default.bool,
   /**
-   * The type of format for the datetime value
+   * The format to use for date values
    */
   dateFormat: _propTypes.default.oneOf(Object.values(_utils.DATE_FORMATS)),
   /**
-   * Flag on whether the label is a date value or not
+   * Flag indicating whether the label is a date value
    */
   isDateValue: _propTypes.default.bool,
   /**
-   * If set true, the tooltip is displayed.
-   * If set false, the tooltip is hidden, usually calculated internally.
+   * If true, the tooltip is displayed
    */
   active: _propTypes.default.bool.isRequired,
   /**
-   * The source data of the content to be displayed in the tooltip,
-   * always calculated internally and cannot be user set.
+   * The source data to be displayed in the tooltip
    */
-  payload: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  payload: _propTypes.default.arrayOf(_propTypes.default.shape({
+    name: _propTypes.default.string,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    payload: _propTypes.default.shape({}),
+    dataKey: _propTypes.default.string,
+    color: _propTypes.default.string
+  })).isRequired,
   /**
-   *The label value which is active now, usually calculated internally.
+   * The label value which is active
    */
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
   /**
-   * Flag on whether the chart is a pie chart or not
+   * Flag indicating whether the chart is a pie chart
+   */
+  isPieChart: _propTypes.default.bool,
+  /**
+   * Flag indicating whether the chart is a payout chart
    */
-  isPieChart: _propTypes.default.bool
+  isPayOutChart: _propTypes.default.bool
 };
 CustomTooltipContent.defaultProps = {
+  id: undefined,
+  className: undefined,
   isTimeFormat: false,
   isDateValue: true,
   dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE,
-  isPieChart: false
+  isPieChart: false,
+  isPayOutChart: false
 };
-var _default = exports.default = CustomTooltipContent;
+var _default = exports.default = /*#__PURE__*/React.memo(CustomTooltipContent);

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

@@ -27,14 +27,18 @@ const PieChart = _ref => {
     height,
     width,
     innerRadius,
-    outerRadius
+    outerRadius,
+    formatTotal,
+    subtitleToCurrency,
+    isPayOutChart
   } = _ref;
   const total = data.reduce((sum, item) => sum + item[valueKey], 0);
+  const displayTotal = formatTotal ? formatTotal(total) : `${total}`;
   const formattedData = data.map(item => ({
     ...item,
     label: item[labelKey],
     color: colors[data.indexOf(item)],
-    percentage: (item[valueKey] / total * 100).toFixed(0)
+    percentage: total === 0 ? 0.0 : (item[valueKey] / total * 100).toFixed(0)
   }));
   return /*#__PURE__*/React.createElement("div", {
     id: id,
@@ -63,7 +67,8 @@ const PieChart = _ref => {
   }))), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
       isDateValue: false,
-      isPieChart: true
+      isPieChart: true,
+      isPayOutChart: isPayOutChart
     })
   }), /*#__PURE__*/React.createElement("text", {
     x: "50%",
@@ -81,14 +86,16 @@ const PieChart = _ref => {
     dy: "1.2em",
     fill: "var(--heading)",
     fontSize: "22"
-  }, `${total}`)))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
+  }, displayTotal)))), /*#__PURE__*/React.createElement(_Common.CustomLegend, {
     key: id,
     colorsArray: colors,
     yKeysArray: formattedData,
     capitalizedLegend: true,
     orientation: "vertical",
     getLegendItemTitle: entry => entry[labelKey],
-    getLegendItemSubtitle: entry => entry[valueKey]
+    getLegendItemSubtitle: entry => entry[valueKey],
+    subtitleToCurrency: subtitleToCurrency,
+    isPayOutChart: isPayOutChart
   })));
 };
 PieChart.propTypes = {
@@ -104,7 +111,10 @@ PieChart.propTypes = {
   height: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   width: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   innerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  outerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+  outerRadius: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  formatTotal: _propTypes.default.func,
+  subtitleToCurrency: _propTypes.default.bool,
+  isPayOutChart: _propTypes.default.bool
 };
 PieChart.defaultProps = {
   id: undefined,
@@ -112,6 +122,9 @@ PieChart.defaultProps = {
   width: '100%',
   height: 300,
   innerRadius: '50%',
-  outerRadius: '100%'
+  outerRadius: '100%',
+  formatTotal: null,
+  subtitleToCurrency: false,
+  isPayOutChart: false
 };
 var _default = exports.default = PieChart;

package/dist/cjs/a/ThroughPutIndicator/ThroughPutIndicator.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+require("./styles.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'throughput-indicator';
+const ThroughPutIndicator = _ref => {
+  let {
+    data,
+    keyName = 'reserved'
+  } = _ref;
+  const renderNoChange = () => /*#__PURE__*/React.createElement("div", {
+    className: [baseClassName, componentClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "no-change-text"
+  }, "No change"));
+  const renderChange = function (direction, percentage) {
+    let icon = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : direction === 'positive' ? 'S' : 'R';
+    return /*#__PURE__*/React.createElement("div", {
+      className: [baseClassName, componentClassName].filter(e => e).join(' ')
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `ai-icon ${direction}-throughput-indicator`
+    }, icon), /*#__PURE__*/React.createElement("p", null, percentage, "%"));
+  };
+
+  // Handle invalid or insufficient data
+  if (!data || data.length < 2) {
+    return renderNoChange();
+  }
+  const first = data[0][keyName];
+  const last = data[data.length - 1][keyName];
+
+  // Handle no change scenarios
+  if (first === 0 && last === 0) {
+    return renderNoChange();
+  }
+
+  // Handle special case: starting from zero
+  if (first === 0 && last !== 0) {
+    return renderChange('positive', '100');
+  }
+
+  // Calculate percentage change
+  const percentChange = (last - first) / Math.abs(first) * 100;
+  const rounded = Math.abs(percentChange).toFixed(1);
+
+  // No change
+  if (percentChange === 0) {
+    return renderNoChange();
+  }
+
+  // Positive or negative change
+  const direction = percentChange > 0 ? 'positive' : 'negative';
+  const icon = direction === 'positive' ? 'S' : 'R';
+  return renderChange(direction, rounded, icon);
+};
+ThroughPutIndicator.propTypes = {
+  /**
+   * The data to be displayed in the throughput indicator
+   */
+  // eslint-disable-next-line react/forbid-prop-types
+  data: _propTypes.default.arrayOf(_propTypes.default.object).isRequired,
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName: _propTypes.default.string
+};
+var _default = exports.default = ThroughPutIndicator;

package/dist/cjs/a/ThroughPutIndicator/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ThroughPutIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ThroughPutIndicator.default;
+  }
+});
+var _ThroughPutIndicator = _interopRequireDefault(require("./ThroughPutIndicator"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/cjs/a/ThroughPutIndicator/styles.scss

@@ -0,0 +1,35 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  .throughput-indicator {
+    align-items: center;
+    border: 1px solid var(--hard-grey);
+    border-radius: 2rem;
+    display: flex;
+    gap: .5rem;
+    height: 3rem;
+    padding: .5rem;
+
+    .positive-throughput-indicator {
+      color: var(--success);
+      font-size: 1rem;
+    }
+
+    .negative-throughput-indicator {
+      color: var(--error);
+      font-size: .75rem;
+    }
+
+    .no-change-text {
+      color: var(--paragraph);
+    }
+
+    p {
+      font-size: 1rem;
+    }
+  }
+}

package/dist/cjs/a/ToggleSwitch/ToggleSwitch.js

@@ -47,7 +47,8 @@ const ToggleSwitch = _ref => {
     checked: checked,
     onChange: handleOnChange
   }), /*#__PURE__*/React.createElement("label", {
-    htmlFor: inputId
+    htmlFor: inputId,
+    className: checked ? 'checked' : ''
   }));
 };
 ToggleSwitch.propTypes = {