@pareto-engineering/design-system 5.2.0 → 5.3.0

package/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx

@@ -14,6 +14,64 @@ 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 }) => (
+  <div className="pie-chart-label">
+    <div className="status">
+      <span
+        className="dot"
+        style={{ backgroundColor: entry?.payload?.color }}
+      />
+      <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+        {`${snakeCaseToTitleCase(entry.name)}  `}
+      </p>
+    </div>
+    <p className="value">
+      {`${formatLabelValue(entry.value)}`}
+    </p>
+  </div>
+)
+
+const StandardPieChartLabel = ({ entry, formatLabelValue }) => (
+  <>
+    <p>Submissions</p>
+    <div className="pie-chart-label">
+      <div className="status">
+        <span
+          className="dot"
+          style={{ backgroundColor: entry?.payload?.color }}
+        />
+        <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+          {`${snakeCaseToTitleCase(entry.name)}  `}
+        </p>
+      </div>
+      <p className="value">
+        {`${formatLabelValue(entry.value)}`}
+      </p>
+      <p className="percentage-title">
+        {`${entry?.payload?.percentage}%`}
+      </p>
+    </div>
+  </>
+)
+
+const StandardChartLabel = ({ entry, formatLabelValue }) => (
+  <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+    {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
+  </p>
+)
+
 const CustomTooltipContent = ({
   id,
   className: userClassName,
@@ -23,95 +81,121 @@ const CustomTooltipContent = ({
   active,
   payload,
   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 <PayoutPieChartLabel entry={entry} formatLabelValue={formatLabelValue} />
     }
 
-    if (typeof value === 'number') {
-      if (Number.isInteger(value)) return value
-      return value.toFixed(2)
+    if (isPieChart) {
+      return <StandardPieChartLabel entry={entry} formatLabelValue={formatLabelValue} />
     }
 
-    return value
-  }
+    return <StandardChartLabel entry={entry} formatLabelValue={formatLabelValue} />
+  }, [isPieChart, isPayOutChart, formatLabelValue])
 
-  if (active && payload && payload.length) {
-    const newPayload = payload.filter((item) => item.name !== 'bounds')
-    return (
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-        ]
-          .filter((e) => e)
-          .join(' ')}
-      >
-        <p className="label">
-          {isDateValue ? formatDate(label, dateFormat) : label}
-        </p>
-        {newPayload.map((entry) => (
-          <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
-            {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
-          </p>
-        ))}
-      </div>
-    )
+  if (!active || !payload || !payload.length) {
+    return null
   }
-  return null
+
+  const filteredPayload = payload.filter((item) => item?.name !== 'bounds')
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <p className="label">
+        {isDateValue ? formatDate(label, dateFormat) : label}
+      </p>
+      {filteredPayload.map((entry) => (
+        <React.Fragment key={entry.name || entry.dataKey}>
+          {renderContent(entry)}
+        </React.Fragment>
+      ))}
+    </div>
+  )
 }
 
 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 indicating whether the chart is a pie chart
+   */
+  isPieChart:PropTypes.bool,
+
+  /**
+   * Flag indicating whether the chart is a payout chart
+   */
+  isPayOutChart:PropTypes.bool,
 }
 
 CustomTooltipContent.defaultProps = {
-  isTimeFormat:false,
-  isDateValue :true,
-  dateFormat  :DATE_FORMATS.HUMAN_READABLE,
+  id           :undefined,
+  className    :undefined,
+  isTimeFormat :false,
+  isDateValue  :true,
+  dateFormat   :DATE_FORMATS.HUMAN_READABLE,
+  isPieChart   :false,
+  isPayOutChart:false,
 }
 
-export default CustomTooltipContent
+export default React.memo(CustomTooltipContent)

package/src/ui/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/src/ui/a/Charts/PieChart/PieChart.jsx

@@ -32,14 +32,19 @@ const PieChart = ({
   width,
   innerRadius,
   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 (
@@ -78,16 +83,43 @@ const PieChart = ({
                 />
               ))}
             </Pie>
-            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
+            <Tooltip
+              content={(
+                <CustomTooltipContent
+                  isDateValue={false}
+                  isPieChart
+                  isPayOutChart={isPayOutChart}
+                />
+              )}
+            />
+
+            <text
+              x="50%"
+              y="50%"
+              textAnchor="middle"
+              dominantBaseline="middle"
+              style={{
+              }}
+            >
+              <tspan x="50%" dy="-1.2em" fontSize="14" fill="grey">
+                Total
+              </tspan>
+              <tspan x="50%" dy="1.2em" fill="var(--heading)" fontSize="22">
+                {displayTotal}
+              </tspan>
+            </text>
           </RechartsPieChart>
         </ResponsiveContainer>
         <CustomLegend
+          key={id}
           colorsArray={colors}
           yKeysArray={formattedData}
           capitalizedLegend
           orientation="vertical"
           getLegendItemTitle={(entry) => entry[labelKey]}
           getLegendItemSubtitle={(entry) => entry[valueKey]}
+          subtitleToCurrency={subtitleToCurrency}
+          isPayOutChart={isPayOutChart}
         />
       </div>
     </div>
@@ -103,23 +135,29 @@ PieChart.propTypes = {
       PropTypes.number,
     ]),
   })).isRequired,
-  title      :PropTypes.string.isRequired,
-  valueKey   :PropTypes.string.isRequired,
-  labelKey   :PropTypes.string.isRequired,
-  colors     :PropTypes.arrayOf(PropTypes.string).isRequired,
-  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]),
+  title             :PropTypes.string.isRequired,
+  valueKey          :PropTypes.string.isRequired,
+  labelKey          :PropTypes.string.isRequired,
+  colors            :PropTypes.arrayOf(PropTypes.string).isRequired,
+  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]),
+  formatTotal       :PropTypes.func,
+  subtitleToCurrency:PropTypes.bool,
+  isPayOutChart     :PropTypes.bool,
 }
 
 PieChart.defaultProps = {
-  id         :undefined,
-  className  :undefined,
-  width      :'100%',
-  height     :300,
-  innerRadius:'0%',
-  outerRadius:'100%',
+  id                :undefined,
+  className         :undefined,
+  width             :'100%',
+  height            :300,
+  innerRadius       :'50%',
+  outerRadius       :'100%',
+  formatTotal       :null,
+  subtitleToCurrency:false,
+  isPayOutChart     :false,
 }
 
 export default PieChart

package/src/ui/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;

package/src/ui/a/HamburgerButton/styles.scss

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
+@use "sass:math";
+@use "sass:list";
 
 /*
 $hamburger-padding-x           : 15px !default;
@@ -22,17 +24,157 @@ $hamburger-hover-filter       : opacity(50%) !default;
 $hamburger-active-hover-filter: $hamburger-hover-filter !default;
 */
 
-$hamburgers-types:(
-  squeeze
-);
-$hamburger-layer-color         : var(--x);
-$hamburger-padding-x           : .5em;
-$hamburger-padding-y           : .5em;
+// Define the variables to be used with the hamburgers library
+$hamburger-types: (squeeze);
+$hamburger-layer-color: var(--x);
+$hamburger-padding-x: .5em;
+$hamburger-padding-y: .5em;
 
-// Open the following file for the template
+// Additional hamburger variables with defaults
+$hamburger-layer-width: 40px !default;
+$hamburger-layer-height: 4px !default;
+$hamburger-layer-spacing: 6px !default;
+$hamburger-layer-border-radius: 4px !default;
+$hamburger-hover-opacity: .7 !default;
+$hamburger-hover-use-filter: false !default;
+$hamburger-hover-filter: opacity(50%) !default;
+$hamburger-active-layer-color: $hamburger-layer-color !default;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity !default;
+$hamburger-active-hover-filter: $hamburger-hover-filter !default;
+
+// Base Hamburger Styles
+// ==================================================
+.hamburger {
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  display: inline-block;
+
+  // Normalize (<button>)
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  padding: $hamburger-padding-y $hamburger-padding-x;
+  text-transform: none;
+  transition-duration: .15s;
+
+  transition-property: opacity, filter;
+  transition-timing-function: linear;
+
+  &:hover {
+    @if $hamburger-hover-use-filter == true {
+      filter: $hamburger-hover-filter;
+    }
+    @else {
+      opacity: $hamburger-hover-opacity;
+    }
+  }
+
+  &.is-active {
+    &:hover {
+      @if $hamburger-hover-use-filter == true {
+        filter: $hamburger-active-hover-filter;
+      }
+      @else {
+        opacity: $hamburger-active-hover-opacity;
+      }
+    }
+
+    .hamburger-inner,
+    .hamburger-inner::before,
+    .hamburger-inner::after {
+      background-color: $hamburger-active-layer-color;
+    }
+  }
+}
+
+.hamburger-box {
+  display: inline-block;
+  height: $hamburger-layer-height * 3 + $hamburger-layer-spacing * 2;
+  position: relative;
+  width: $hamburger-layer-width;
+}
+
+.hamburger-inner {
+  display: block;
+  margin-top: math.div($hamburger-layer-height, -2);
+  top: 50%;
+
+  &,
+  &::before,
+  &::after {
+    background-color: $hamburger-layer-color;
+    border-radius: $hamburger-layer-border-radius;
+    height: $hamburger-layer-height;
+    position: absolute;
+    transition-duration: .15s;
+    transition-property: transform;
+    transition-timing-function: ease;
+    width: $hamburger-layer-width;
+  }
+
+  &::before,
+  &::after {
+    content: "";
+    display: block;
+  }
+
+  &::before {
+    top: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+
+  &::after {
+    bottom: ($hamburger-layer-spacing + $hamburger-layer-height) * -1;
+  }
+}
+
+// Squeeze Type
+// ==================================================
+
+@if list.index($hamburger-types, squeeze) {
+  /*
+    * Squeeze
+    */
+  .hamburger-squeeze {
+    .hamburger-inner {
+      transition-duration: .1s;
+      transition-timing-function: cubic-bezier(.55, .055, .675, .19);
+
+      &::before {
+        transition: top .1s .12s ease,
+          opacity .1s ease;
+      }
+
+      &::after {
+        transition: bottom .1s .12s ease,
+          transform .1s cubic-bezier(.55, .055, .675, .19);
+      }
+    }
+
+    &.is-active {
+      .hamburger-inner {
+        transform: rotate(45deg);
+        transition-delay: .12s;
+        transition-timing-function: cubic-bezier(.215, .61, .355, 1);
+
+        &::before {
+          opacity: 0;
+          top: 0;
+          transition: top .1s ease,
+            opacity .1s .12s ease;
+        }
 
-@import "hamburgers/_sass/hamburgers/hamburgers";
-@import "hamburgers/_sass/hamburgers/types/squeeze";
+        &::after {
+          bottom: 0;
+          transform: rotate(-90deg);
+          transition: bottom .1s ease,
+            transform .1s .12s cubic-bezier(.215, .61, .355, 1);
+        }
+      }
+    }
+  }
+}
 
 /*
 .#{bem.$base}.hamburger-button{