@pareto-engineering/design-system 5.2.1 → 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,
@@ -24,131 +82,120 @@ const CustomTooltipContent = ({
   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])
 
-  const renderContent = (entry) => {
-    if (isPieChart) {
-      return (
-        <>
-          <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>
-        </>
-      )
-    }
-    return (
-      <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
-        {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
-      </p>
-    )
+  if (!active || !payload || !payload.length) {
+    return null
   }
 
-  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) => (
-          renderContent(entry)
-        ))}
-      </div>
-    )
-  }
-  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 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
+   */
+  isPayOutChart:PropTypes.bool,
 }
 
 CustomTooltipContent.defaultProps = {
-  isTimeFormat:false,
-  isDateValue :true,
-  dateFormat  :DATE_FORMATS.HUMAN_READABLE,
-  isPieChart  :false,
+  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/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,7 +83,15 @@ const PieChart = ({
                 />
               ))}
             </Pie>
-            <Tooltip content={<CustomTooltipContent isDateValue={false} isPieChart />} />
+            <Tooltip
+              content={(
+                <CustomTooltipContent
+                  isDateValue={false}
+                  isPieChart
+                  isPayOutChart={isPayOutChart}
+                />
+              )}
+            />
 
             <text
               x="50%"
@@ -92,7 +105,7 @@ const PieChart = ({
                 Total
               </tspan>
               <tspan x="50%" dy="1.2em" fill="var(--heading)" fontSize="22">
-                {`${total}`}
+                {displayTotal}
               </tspan>
             </text>
           </RechartsPieChart>
@@ -105,6 +118,8 @@ const PieChart = ({
           orientation="vertical"
           getLegendItemTitle={(entry) => entry[labelKey]}
           getLegendItemSubtitle={(entry) => entry[valueKey]}
+          subtitleToCurrency={subtitleToCurrency}
+          isPayOutChart={isPayOutChart}
         />
       </div>
     </div>
@@ -120,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:'50%',
-  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/ThroughPutIndicator/ThroughPutIndicator.jsx

@@ -0,0 +1,90 @@
+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 = () => (
+    <div
+      className={[
+        baseClassName,
+        componentClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <span className="no-change-text">No change</span>
+    </div>
+  )
+
+  const renderChange = (direction, percentage, icon = direction === 'positive' ? 'S' : 'R') => (
+    <div
+      className={[
+        baseClassName,
+        componentClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <span className={`ai-icon ${direction}-throughput-indicator`}>{icon}</span>
+      <p>
+        {percentage}
+        %
+      </p>
+    </div>
+  )
+
+  // 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/src/ui/a/ThroughPutIndicator/index.js

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

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

@@ -51,7 +51,7 @@ const ToggleSwitch = ({
       onChange={handleOnChange}
     />
     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-    <label htmlFor={inputId} />
+    <label htmlFor={inputId} className={checked ? 'checked' : ''} />
   </button>
 )
 

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

@@ -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'
 
@@ -21,40 +22,63 @@ const Tooltip = ({
   className:userClassName,
   style,
   position,
+  isFloating,
   color,
   description,
   content,
   children,
   // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      `x-${color}`,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-
-  >
-    <div
-      className="tooltip-trigger-wrapper"
-      aria-describedby={description}
-    >
-      {children}
-    </div>
+}) => {
+  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 (
     <div
-      className={`tooltip-content ${position}`}
-      role="tooltip"
-      id={description}
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        `x-${color}`,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
     >
-      {content}
+      <div
+        className="tooltip-trigger-wrapper"
+        aria-describedby={description}
+      >
+        {children}
+      </div>
+      <div
+        className={[
+          'tooltip-content',
+          position,
+          isFloating ? 'floating' : '',
+        ]
+          .filter((e) => e)
+          .join(' ')}
+        role="tooltip"
+        id={description}
+      >
+        {content}
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Tooltip.propTypes = {
   /**
@@ -92,6 +116,11 @@ Tooltip.propTypes = {
    */
   position:PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 
+  /**
+   * Whether or not the tooltip should be floating
+   */
+  isFloating:PropTypes.bool,
+
   /**
    * The base color of the tooltip
    */