@pareto-engineering/design-system 5.2.0 → 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,7 +87,15 @@ 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,
     yKeysArray: yKeys,
     capitalizedLegend: capitalizedLegend
@@ -77,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",
@@ -101,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, {
@@ -187,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,
@@ -195,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/BarChart/BarChart.js

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

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,
@@ -40,9 +49,13 @@ const CustomLegend = _ref => {
     }
   }), /*#__PURE__*/React.createElement("span", {
     className: "text"
-  }, capitalizedLegend ? (0, _utils.snakeCaseToTitleCase)(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("span", {
+  }, capitalizedLegend ? (0, _utils.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 = {
   /**
@@ -76,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/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/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,
@@ -23,75 +98,97 @@ const CustomTooltipContent = _ref => {
     isDateValue,
     active,
     payload,
-    label
-  } = _ref;
-  const formatLabelValue = value => {
-    if (isTimeFormat) {
-      return (0, _utils.formatTime)(value);
+    label,
+    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
+      });
     }
-    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 ? (0, _utils.formatDate)(label, dateFormat) : label), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
-      className: "label",
-      key: `${entry.name}`,
-      style: {
-        color: entry.color,
-        textTransform: 'capitalize'
-      }
-    }, `${(0, _utils.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 ? (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.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
+   */
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  /**
+   * Flag indicating whether the chart is a pie chart
    */
-  payload: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
+  isPieChart: _propTypes.default.bool,
   /**
-   *The label value which is active now, usually calculated internally.
+   * Flag indicating whether the chart is a payout chart
    */
-  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  isPayOutChart: _propTypes.default.bool
 };
 CustomTooltipContent.defaultProps = {
+  id: undefined,
+  className: undefined,
   isTimeFormat: false,
   isDateValue: true,
-  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE
+  dateFormat: _utils.DATE_FORMATS.HUMAN_READABLE,
+  isPieChart: false,
+  isPayOutChart: false
 };
-var _default = exports.default = CustomTooltipContent;
+var _default = exports.default = /*#__PURE__*/React.memo(CustomTooltipContent);

package/dist/cjs/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/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,
@@ -62,15 +66,36 @@ const PieChart = _ref => {
     strokeWidth: 0
   }))), /*#__PURE__*/React.createElement(_recharts.Tooltip, {
     content: /*#__PURE__*/React.createElement(_Common.CustomTooltipContent, {
-      isDateValue: false
+      isDateValue: false,
+      isPieChart: true,
+      isPayOutChart: isPayOutChart
     })
-  }))), /*#__PURE__*/React.createElement(_Common.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(_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 = {
@@ -86,14 +111,20 @@ 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,
   className: undefined,
   width: '100%',
   height: 300,
-  innerRadius: '0%',
-  outerRadius: '100%'
+  innerRadius: '50%',
+  outerRadius: '100%',
+  formatTotal: null,
+  subtitleToCurrency: false,
+  isPayOutChart: false
 };
 var _default = exports.default = PieChart;

package/dist/cjs/a/Charts/PieChart/styles.scss

@@ -3,7 +3,11 @@
 $default-margin: 1rem;
 $default-padding: 1rem;
 $default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$soft-box-shadow: 0 .25rem 1rem var(--soft-shadow);
 $default-text-font-size: calc(var(--s-1) * 1rem);
+$default-legend-dot-width: .75rem;
+$default-legend-dot-height: .75rem;
+$default-legend-dot-margin-right: .3125rem;
 
 .#{bem.$base} {
   &.pie-chart {
@@ -13,6 +17,90 @@ $default-text-font-size: calc(var(--s-1) * 1rem);
     margin: $default-margin 0;
     padding: $default-padding;
 
+    .custom-legend {
+      .item {
+        padding-top: 0;
+      }
+
+      .title .dot {
+        height: $default-legend-dot-height;
+        width: $default-legend-dot-width;
+      }
+
+      .title .text {
+        font-size: calc($default-text-font-size * 1.5);
+      }
+
+      .sub-title-percentage-container {
+        align-items: center;
+        display: flex;
+        gap: .8rem;
+        margin-left: .5rem;
+        width: fit-content;
+      }
+
+      .sub-title-percentage-container .sub-title {
+        font-size: calc($default-text-font-size * 1.25);
+      }
+
+      .sub-title-percentage-container .percentage-title {
+        font-size: calc($default-text-font-size * 1);
+      }
+    }
+
+    .custom-tooltip-content {
+      box-shadow: $soft-box-shadow;
+
+      p {
+        color: var(--hard-paragraph);
+        font-size: calc($default-text-font-size * .8);
+        font-weight: 600;
+        margin: 0;
+      }
+
+      .pie-chart-label {
+        align-items: center;
+        display: flex;
+        gap: 1.25rem;
+        justify-content: flex-start;
+
+        .status {
+          align-items: center;
+          display: flex;
+          gap: .1rem;
+        }
+
+        .label {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .value {
+          color: var(--hard-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 600;
+          text-transform: capitalize;
+        }
+
+        .percentage-title {
+          color: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * 1);
+          font-weight: 300;
+          text-transform: capitalize;
+        }
+      }
+    }
+
     .chart-header {
       align-items: center;
       display: flex;