@pareto-engineering/design-system 5.2.1 → 5.3.0

package/dist/cjs/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/cjs/a/Tooltip/Tooltip.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
 require("./styles.scss");
@@ -27,12 +28,24 @@ const Tooltip = _ref => {
     className: userClassName,
     style,
     position,
+    isFloating,
     color,
     description,
     content,
     children
     // ...otherProps
   } = _ref;
+  (0, _react.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(' '),
@@ -41,7 +54,7 @@ const Tooltip = _ref => {
     className: "tooltip-trigger-wrapper",
     "aria-describedby": description
   }, children), /*#__PURE__*/React.createElement("div", {
-    className: `tooltip-content ${position}`,
+    className: ['tooltip-content', position, isFloating ? 'floating' : ''].filter(e => e).join(' '),
     role: "tooltip",
     id: description
   }, content));
@@ -75,6 +88,10 @@ Tooltip.propTypes = {
    * The position of the tooltip with respect to the trigger element
    */
   position: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating: _propTypes.default.bool,
   /**
    * The base color of the tooltip
    */

package/dist/cjs/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/cjs/a/index.js

@@ -177,6 +177,12 @@ Object.defineProperty(exports, "TextSteps", {
     return _TextSteps.TextSteps;
   }
 });
+Object.defineProperty(exports, "ThroughPutIndicator", {
+  enumerable: true,
+  get: function () {
+    return _ThroughPutIndicator.ThroughPutIndicator;
+  }
+});
 Object.defineProperty(exports, "Timestamp", {
   enumerable: true,
   get: function () {
@@ -249,4 +255,5 @@ var _ToggleSwitch = require("./ToggleSwitch");
 var _XMLEditor = require("./XMLEditor");
 var _DatePicker = require("./DatePicker");
 var _Tooltip = require("./Tooltip");
-var _Charts = require("./Charts");
+var _Charts = require("./Charts");
+var _ThroughPutIndicator = require("./ThroughPutIndicator");

package/dist/cjs/f/FormInput/FormInput.js

@@ -68,6 +68,12 @@ const FormInput = _ref => {
       disabled: disabled
     }, otherProps));
   }
+  if (type === 'toggle') {
+    return /*#__PURE__*/React.createElement(_fields.ToggleInput, _extends({
+      className: newClassName,
+      disabled: disabled
+    }, otherProps));
+  }
   if (type === 'query-choices') {
     return /*#__PURE__*/React.createElement(_fields.QueryChoices, _extends({
       className: newClassName,
@@ -130,7 +136,7 @@ FormInput.propTypes = {
   /**
    * The HTML class names for this element
    */
-  type: _propTypes.default.oneOf(['text', 'email', 'password', 'number', 'date', 'datetime', 'month', 'tel', 'hidden', 'select', 'choices', 'textarea', 'query-combobox', 'query-select', 'url', 'rating', 'checkbox',
+  type: _propTypes.default.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']),
   /**

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

@@ -0,0 +1,126 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _formik = require("formik");
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _a = require("../../../a");
+var _common = require("../../common");
+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; }
+/* @pareto-engineering/generator-front 1.1.1-alpha.3 */
+
+// Local Definitions
+const baseClassName = _exports.default.base;
+const componentClassName = 'toggle-input';
+
+/**
+ * Toggle input field component that wraps ToggleSwitch for use with Formik
+ */
+const ToggleInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    color,
+    labelColor,
+    validate,
+    description,
+    disabled,
+    optional,
+    size
+    // ...otherProps
+  } = _ref;
+  const [field,, helpers] = (0, _formik.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(_common.FormLabel, {
+    name: name,
+    color: labelColor,
+    optional: optional
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "toggle-wrapper"
+  }, /*#__PURE__*/React.createElement(_a.ToggleSwitch, {
+    checked: Boolean(field.value),
+    handleOnChange: handleChange,
+    inputId: name,
+    size: size,
+    disabled: disabled
+  })), /*#__PURE__*/React.createElement(_common.FormDescription, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+ToggleInput.propTypes = {
+  /**
+   * The HTML id for this element
+   */
+  id: _propTypes.default.string,
+  /**
+   * The HTML class names for this element
+   */
+  className: _propTypes.default.string,
+  /**
+   * The React-written, css properties for this element.
+   */
+  style: _propTypes.default.objectOf(_propTypes.default.string),
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: _propTypes.default.string.isRequired,
+  /**
+   * The input label
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * The input label color
+   */
+  labelColor: _propTypes.default.string,
+  /**
+   * The input field validator function
+   */
+  validate: _propTypes.default.func,
+  /**
+   * Input description
+   */
+  description: _propTypes.default.string,
+  /**
+   * Whether the toggle input should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The text input color
+   */
+  color: _propTypes.default.string,
+  /**
+   * Whether the input is optional or not
+   */
+  optional: _propTypes.default.bool,
+  /**
+   * The size of the toggle switch
+   */
+  size: _propTypes.default.string
+};
+ToggleInput.defaultProps = {
+  color: 'paragraph',
+  disabled: false
+};
+var _default = exports.default = ToggleInput;

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

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

package/dist/cjs/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/cjs/f/fields/index.js

@@ -81,6 +81,12 @@ Object.defineProperty(exports, "TextareaInput", {
     return _TextareaInput.TextareaInput;
   }
 });
+Object.defineProperty(exports, "ToggleInput", {
+  enumerable: true,
+  get: function () {
+    return _ToggleInput.ToggleInput;
+  }
+});
 Object.defineProperty(exports, "convertLatexToHtml", {
   enumerable: true,
   get: function () {
@@ -117,4 +123,5 @@ var _QueryChoices = require("./QueryChoices");
 var _LinkInput = require("./LinkInput");
 var _EditorInput = require("./EditorInput");
 var _LatexPreviewInput = require("./LatexPreviewInput");
-var _FileUpload = require("./FileUpload");
+var _FileUpload = require("./FileUpload");
+var _ToggleInput = require("./ToggleInput");

package/dist/cjs/utils/formatting.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.snakeCaseToTitleCase = exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
+exports.snakeCaseToTitleCase = exports.parseDate = exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
 const DATE_FORMATS = exports.DATE_FORMATS = {
   HUMAN_READABLE: 'human_readable',
+  HUMAN_READABLE_WITH_TIME: 'human_readable_with_time',
   TIME: 'time',
   DATETIME: 'datetime',
   CHART_DATE: 'chart_date',
@@ -49,23 +50,6 @@ const formatTime = seconds => {
   return parts.join(' ');
 };
 exports.formatTime = formatTime;
-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', {
@@ -82,8 +66,33 @@ 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()
 };
+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;
+};
+exports.parseDate = parseDate;
 const formatDate = function (input) {
   let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DATE_FORMATS.HUMAN_READABLE;
   try {

package/dist/cjs/utils/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "formatTime", {
     return _formatting.formatTime;
   }
 });
+Object.defineProperty(exports, "parseDate", {
+  enumerable: true,
+  get: function () {
+    return _formatting.parseDate;
+  }
+});
 Object.defineProperty(exports, "snakeCaseToTitleCase", {
   enumerable: true,
   get: function () {

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

@@ -3,11 +3,39 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS } from "../../../utils";
+import { formatTime, formatDate, DATE_FORMATS, parseDate } from "../../../utils";
+import { ThroughPutIndicator } from "../../ThroughPutIndicator";
 import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from "../Common";
 import "./styles.scss";
 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,
@@ -23,7 +51,9 @@ const AreaChart = ({
   width,
   isTimeFormat,
   dateFormat,
-  capitalizedLegend
+  capitalizedLegend,
+  isWorkerSubmissionChart,
+  totalSubmissions
 }) => {
   const allYLabels = yKeys.map(key => ({
     label: key,
@@ -35,8 +65,9 @@ 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 /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
@@ -46,6 +77,13 @@ const AreaChart = ({
     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, {
+    data: data,
+    keyName: "reserved"
   })), /*#__PURE__*/React.createElement(CustomLegend, {
     key: id,
     colorsArray: colors,
@@ -68,7 +106,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);
+    }
   }), /*#__PURE__*/React.createElement(YAxis, {
     domain: yAxisBounds,
     scale: "linear",
@@ -92,6 +135,9 @@ const AreaChart = ({
       if (isTimeFormat) {
         return formatTime(value);
       }
+      if (isWorkerSubmissionChart) {
+        return Math.round(value);
+      }
       return value.toFixed(2);
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
@@ -178,7 +224,15 @@ AreaChart.propTypes = {
   /**
    * The type of format for the datetime value
    */
-  dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS))
+  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,
@@ -186,6 +240,7 @@ AreaChart.defaultProps = {
   height: 300,
   capitalizedLegend: false,
   isTimeFormat: false,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE
+  dateFormat: DATE_FORMATS.HUMAN_READABLE,
+  isWorkerSubmissionChart: false
 };
 export default AreaChart;

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

@@ -5,6 +5,13 @@ import { snakeCaseToTitleCase } from "../../../../utils";
 import "./styles.scss";
 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,
@@ -13,7 +20,9 @@ const CustomLegend = ({
   orientation,
   getLegendItemTitle,
   getLegendItemSubtitle,
-  capitalizedLegend
+  capitalizedLegend,
+  subtitleToCurrency,
+  isPayOutChart
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
   className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
@@ -33,9 +42,9 @@ const CustomLegend = ({
   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 = {
   /**
    * The id of the dropdown component.
@@ -68,13 +77,18 @@ CustomLegend.propTypes = {
   /**
    * Flag on whether to capitalize legend keys
    */
-  capitalizedLegend: PropTypes.bool
+  capitalizedLegend: PropTypes.bool,
+  /**
+   * Flag on whether to convert the subtitle to currency
+   */
+  subtitleToCurrency: PropTypes.bool
 };
 CustomLegend.defaultProps = {
   orientation: 'horizontal',
   getLegendItemTitle: key => key,
   /* eslint-disable no-unused-vars */
   getLegendItemSubtitle: () => {},
-  capitalizedLegend: false
+  capitalizedLegend: false,
+  subtitleToCurrency: false
 };
 export default CustomLegend;