@pareto-engineering/design-system 5.2.1 → 5.3.0

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

@@ -5,6 +5,72 @@ import { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "../.
 import "./styles.scss";
 const baseClassName = styleNames.base;
 const componentClassName = 'custom-tooltip-content';
+const formatValue = (value, isTimeFormat) => {
+  if (isTimeFormat) {
+    return formatTime(value);
+  }
+  if (typeof value === 'number') {
+    return Number.isInteger(value) ? value : value.toFixed(2);
+  }
+  return value;
+};
+const PayoutPieChartLabel = ({
+  entry,
+  formatLabelValue
+}) => /*#__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'
+  }
+}, `${snakeCaseToTitleCase(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+  className: "value"
+}, `${formatLabelValue(entry.value)}`));
+const StandardPieChartLabel = ({
+  entry,
+  formatLabelValue
+}) => /*#__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'
+  }
+}, `${snakeCaseToTitleCase(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
+  className: "value"
+}, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
+  className: "percentage-title"
+}, `${entry?.payload?.percentage}%`)));
+const StandardChartLabel = ({
+  entry,
+  formatLabelValue
+}) => /*#__PURE__*/React.createElement("p", {
+  className: "label",
+  key: `${entry.name}`,
+  style: {
+    color: entry.color,
+    textTransform: 'capitalize'
+  }
+}, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`);
 const CustomTooltipContent = ({
   id,
   className: userClassName,
@@ -14,106 +80,96 @@ const CustomTooltipContent = ({
   active,
   payload,
   label,
-  isPieChart
+  isPieChart,
+  isPayOutChart
 }) => {
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return formatTime(value);
-    }
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value;
-      return value.toFixed(2);
+  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'
-        }
-      }, `${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'
-      }
-    }, `${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 ? 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 ? 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.string,
   /**
-   * Additional class names for the dropdown component.
+   * Additional class names for the tooltip component
    */
   className: PropTypes.string,
   /**
-   * Flag on whether it is a timeformat or not
+   * Flag indicating whether values should be formatted as time
    */
   isTimeFormat: PropTypes.bool,
   /**
-   * The type of format for the datetime value
+   * The format to use for date values
    */
   dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS)),
   /**
-   * Flag on whether the label is a date value or not
+   * Flag indicating whether the label is a date value
    */
   isDateValue: PropTypes.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.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.arrayOf(PropTypes.string).isRequired,
+  payload: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    payload: PropTypes.shape({}),
+    dataKey: PropTypes.string,
+    color: PropTypes.string
+  })).isRequired,
   /**
-   *The label value which is active now, usually calculated internally.
+   * The label value which is active
    */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   /**
-   * Flag on whether the chart is a pie chart or not
+   * Flag indicating whether the chart is a pie chart
+   */
+  isPieChart: PropTypes.bool,
+  /**
+   * Flag indicating whether the chart is a payout chart
    */
-  isPieChart: PropTypes.bool
+  isPayOutChart: PropTypes.bool
 };
 CustomTooltipContent.defaultProps = {
+  id: undefined,
+  className: undefined,
   isTimeFormat: false,
   isDateValue: true,
   dateFormat: DATE_FORMATS.HUMAN_READABLE,
-  isPieChart: false
+  isPieChart: false,
+  isPayOutChart: false
 };
-export default CustomTooltipContent;
+export default /*#__PURE__*/React.memo(CustomTooltipContent);

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

@@ -17,14 +17,18 @@ const PieChart = ({
   height,
   width,
   innerRadius,
-  outerRadius
+  outerRadius,
+  formatTotal,
+  subtitleToCurrency,
+  isPayOutChart
 }) => {
   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,
@@ -53,7 +57,8 @@ const PieChart = ({
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
       isDateValue: false,
-      isPieChart: true
+      isPieChart: true,
+      isPayOutChart: isPayOutChart
     })
   }), /*#__PURE__*/React.createElement("text", {
     x: "50%",
@@ -71,14 +76,16 @@ const PieChart = ({
     dy: "1.2em",
     fill: "var(--heading)",
     fontSize: "22"
-  }, `${total}`)))), /*#__PURE__*/React.createElement(CustomLegend, {
+  }, displayTotal)))), /*#__PURE__*/React.createElement(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 = {
@@ -94,7 +101,10 @@ PieChart.propTypes = {
   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])
+  outerRadius: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  formatTotal: PropTypes.func,
+  subtitleToCurrency: PropTypes.bool,
+  isPayOutChart: PropTypes.bool
 };
 PieChart.defaultProps = {
   id: undefined,
@@ -102,6 +112,9 @@ PieChart.defaultProps = {
   width: '100%',
   height: 300,
   innerRadius: '50%',
-  outerRadius: '100%'
+  outerRadius: '100%',
+  formatTotal: null,
+  subtitleToCurrency: false,
+  isPayOutChart: false
 };
 export default PieChart;

package/dist/es/a/ThroughPutIndicator/ThroughPutIndicator.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import "./styles.scss";
+
+// Local Definitions
+const baseClassName = styleNames.base;
+const componentClassName = 'throughput-indicator';
+const ThroughPutIndicator = ({
+  data,
+  keyName = 'reserved'
+}) => {
+  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 = (direction, percentage, icon = direction === 'positive' ? 'S' : 'R') => /*#__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.arrayOf(PropTypes.object).isRequired,
+  /**
+   * The key name to be displayed in the throughput indicator
+   */
+  keyName: PropTypes.string
+};
+export default ThroughPutIndicator;

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

@@ -0,0 +1,2 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as ThroughPutIndicator } from "./ThroughPutIndicator";

package/dist/es/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/es/a/ToggleSwitch/ToggleSwitch.js

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

package/dist/es/a/ToggleSwitch/styles.scss

@@ -7,7 +7,7 @@ $default-size: var(--size, 1.2em);
 $default-slider-color: var(--slider-color, var(--background-far));
 $default-slider-border-color: var(--slider-border-color, var(--ui-lines));
 $default-background-color: var(--slider-background-color, var(--interactive));
-
+$default-background-disabled: var(--disabled, var(--background-far));
 .#{bem.$base}.toggle-switch {
   background: transparent;
   border: none;
@@ -21,7 +21,6 @@ $default-background-color: var(--slider-background-color, var(--interactive));
   }
 
   >label {
-    background: $default-background-color;
     border-radius: $default-border-radius;
     cursor: pointer;
     display: block;
@@ -29,6 +28,14 @@ $default-background-color: var(--slider-background-color, var(--interactive));
     position: relative;
     width: calc($default-size * 2);
 
+    &.checked {
+      background: $default-background-color;
+    }
+
+    &:not(.checked) {
+      background: $default-background-disabled;
+    }
+
     &::after {
       background: $default-slider-color;
       border: 1px solid $default-slider-border-color;

package/dist/es/a/Tooltip/Tooltip.js

@@ -1,5 +1,6 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react';
+import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
 import "./styles.scss";
@@ -17,23 +18,37 @@ const Tooltip = ({
   className: userClassName,
   style,
   position,
+  isFloating,
   color,
   description,
   content,
   children
   // ...otherProps
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
-  style: style
-}, /*#__PURE__*/React.createElement("div", {
-  className: "tooltip-trigger-wrapper",
-  "aria-describedby": description
-}, children), /*#__PURE__*/React.createElement("div", {
-  className: `tooltip-content ${position}`,
-  role: "tooltip",
-  id: description
-}, content));
+}) => {
+  useEffect(() => {
+    const handleMouseMove = e => {
+      document.documentElement.style.setProperty('--mouse-x', `${e.clientX}px`);
+      document.documentElement.style.setProperty('--mouse-y', `${e.clientY}px`);
+    };
+    if (!isFloating) {
+      return () => window.removeEventListener('mousemove', handleMouseMove);
+    }
+    window.addEventListener('mousemove', handleMouseMove);
+    return () => window.removeEventListener('mousemove', handleMouseMove);
+  }, [isFloating]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `x-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tooltip-trigger-wrapper",
+    "aria-describedby": description
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: ['tooltip-content', position, isFloating ? 'floating' : ''].filter(e => e).join(' '),
+    role: "tooltip",
+    id: description
+  }, content));
+};
 Tooltip.propTypes = {
   /**
    * The HTML id for this element
@@ -63,6 +78,10 @@ Tooltip.propTypes = {
    * The position of the tooltip with respect to the trigger element
    */
   position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating: PropTypes.bool,
   /**
    * The base color of the tooltip
    */

package/dist/es/a/Tooltip/styles.scss

@@ -24,25 +24,53 @@ $default-width: var(--tooltip-width, 20rem);
     visibility: hidden;
     z-index: 10;
 
-    &.top {
+    &.floating.top {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) - $default-block-padding);
+      transform: translate(-50%, -100%);
+    }
+
+    &.floating.right {
+      left: calc(var(--mouse-x) + $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translateY(-50%);
+    }
+
+    &.floating.bottom {
+      left: var(--mouse-x);
+      position: fixed;
+      top: calc(var(--mouse-y) + $default-block-padding);
+      transform: translateX(-50%);
+    }
+
+    &.floating.left {
+      left: calc(var(--mouse-x) - $default-inline-padding);
+      position: fixed;
+      top: var(--mouse-y);
+      transform: translate(-100%, -50%);
+    }
+
+    &:not(.floating).top {
       --horizontal: -50%;
       bottom: calc(100% + $default-block-padding);
       left: 50%;
     }
 
-    &.right {
+    &:not(.floating).right {
       --vertical: 50%;
       bottom: 50%;
       left: calc(100% + $default-inline-padding);
     }
 
-    &.bottom {
+    &:not(.floating).bottom {
       --horizontal: -50%;
       left: 50%;
       top: calc(100% + $default-block-padding);
     }
 
-    &.left {
+    &:not(.floating).left {
       --vertical: 50%;
       bottom: 50%;
       right: calc(100% + $default-inline-padding);

package/dist/es/a/index.js

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

package/dist/es/f/FormInput/FormInput.js

@@ -3,7 +3,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import * as React from 'react';
 import { memo } from 'react';
 import PropTypes from 'prop-types';
-import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload, LatexPreviewInput } from "../fields";
+import { TextInput, TextareaInput, ChoicesInput, SelectInput, QueryCombobox, QuerySelect, RatingsInput, Checkbox, QueryChoices, LinkInput, EditorInput, FileUpload, LatexPreviewInput, ToggleInput } from "../fields";
 import "./styles.scss";
 
 // Local Definitions
@@ -60,6 +60,12 @@ const FormInput = ({
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'toggle') {
+    return /*#__PURE__*/React.createElement(ToggleInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (type === 'query-choices') {
     return /*#__PURE__*/React.createElement(QueryChoices, _extends({
       className: newClassName,
@@ -122,7 +128,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox',
+  type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox', 'toggle',
   // to be removed
   'extendedTypeInput']),
   /**