@pareto-engineering/design-system 5.2.0 → 5.3.0

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,7 +77,15 @@ 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,
     yKeysArray: yKeys,
     capitalizedLegend: capitalizedLegend
@@ -67,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",
@@ -91,6 +135,9 @@ const AreaChart = ({
       if (isTimeFormat) {
         return formatTime(value);
       }
+      if (isWorkerSubmissionChart) {
+        return Math.round(value);
+      }
       return value.toFixed(2);
     }
   }), /*#__PURE__*/React.createElement(Tooltip, {
@@ -177,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,
@@ -185,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/BarChart/BarChart.js

@@ -40,6 +40,7 @@ const BarChart = ({
     selectedYLabels: selectedYLabels,
     setSelectedYLabels: setSelectedYLabels
   })), /*#__PURE__*/React.createElement(CustomLegend, {
+    key: id,
     colorsArray: selectedYLabels.map(item => item.color),
     yKeysArray: selectedYLabels.map(item => item.label),
     capitalizedLegend: capitalizedLegend

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(' ')
@@ -29,9 +38,13 @@ const CustomLegend = ({
   }
 }), /*#__PURE__*/React.createElement("span", {
   className: "text"
-}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("div", {
+  className: "sub-title-percentage-container"
+}, /*#__PURE__*/React.createElement("span", {
   className: "sub-title"
-}, getLegendItemSubtitle(key)))));
+}, subtitleToCurrency ? toCurrency(getLegendItemSubtitle(key)) : getLegendItemSubtitle(key)), Object.prototype.hasOwnProperty.call(key, 'percentage') && !isPayOutChart && /*#__PURE__*/React.createElement("span", {
+  className: "percentage-title"
+}, `${key?.percentage}%`)))));
 CustomLegend.propTypes = {
   /**
    * The id of the dropdown component.
@@ -64,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;

package/dist/es/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;
       }
     }
   }

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,
@@ -13,75 +79,97 @@ const CustomTooltipContent = ({
   isDateValue,
   active,
   payload,
-  label
+  label,
+  isPieChart,
+  isPayOutChart
 }) => {
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return formatTime(value);
+  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
+      });
     }
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value;
-      return value.toFixed(2);
+    if (isPieChart) {
+      return /*#__PURE__*/React.createElement(StandardPieChartLabel, {
+        entry: entry,
+        formatLabelValue: formatLabelValue
+      });
     }
-    return 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 => /*#__PURE__*/React.createElement("p", {
-      className: "label",
-      key: `${entry.name}`,
-      style: {
-        color: entry.color,
-        textTransform: 'capitalize'
-      }
-    }, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`)));
+    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.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
+   */
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  /**
+   * Flag indicating whether the chart is a pie chart
    */
-  payload: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isPieChart: PropTypes.bool,
   /**
-   *The label value which is active now, usually calculated internally.
+   * Flag indicating whether the chart is a payout chart
    */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired
+  isPayOutChart: PropTypes.bool
 };
 CustomTooltipContent.defaultProps = {
+  id: undefined,
+  className: undefined,
   isTimeFormat: false,
   isDateValue: true,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE
+  dateFormat: DATE_FORMATS.HUMAN_READABLE,
+  isPieChart: false,
+  isPayOutChart: false
 };
-export default CustomTooltipContent;
+export default /*#__PURE__*/React.memo(CustomTooltipContent);

package/dist/es/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -5,6 +5,9 @@ $default-padding: 1rem;
 $default-text-font-size: calc(var(--s-1) * 1rem);
 $default-border-radius: .25rem;
 $default-border-line-width: .0625rem;
+$default-legend-dot-width: .5rem;
+$default-legend-dot-height: .5rem;
+$default-legend-dot-margin-right: .3125rem;
 
 .#{bem.$base} {
   &.custom-tooltip-content {
@@ -20,3 +23,4 @@ $default-border-line-width: .0625rem;
     }
   }
 }
+

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,
@@ -52,15 +56,36 @@ const PieChart = ({
     strokeWidth: 0
   }))), /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isDateValue: false
+      isDateValue: false,
+      isPieChart: true,
+      isPayOutChart: isPayOutChart
     })
-  }))), /*#__PURE__*/React.createElement(CustomLegend, {
+  }), /*#__PURE__*/React.createElement("text", {
+    x: "50%",
+    y: "50%",
+    textAnchor: "middle",
+    dominantBaseline: "middle",
+    style: {}
+  }, /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "-1.2em",
+    fontSize: "14",
+    fill: "grey"
+  }, "Total"), /*#__PURE__*/React.createElement("tspan", {
+    x: "50%",
+    dy: "1.2em",
+    fill: "var(--heading)",
+    fontSize: "22"
+  }, 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 = {
@@ -76,14 +101,20 @@ 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,
   className: undefined,
   width: '100%',
   height: 300,
-  innerRadius: '0%',
-  outerRadius: '100%'
+  innerRadius: '50%',
+  outerRadius: '100%',
+  formatTotal: null,
+  subtitleToCurrency: false,
+  isPayOutChart: false
 };
 export default PieChart;