@ssa-ui-kit/core 1.0.11 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.11",
+  "version": "1.0.14",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "private": false,

package/src/components/AccordionGroup/stories/AccordionGroup.stories.tsx

@@ -1,7 +1,7 @@
+import { css, useTheme } from '@emotion/react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { AccordionGroup } from '../index';
 import { AccordionGroupDecorator } from './helpers';
-import { css, useTheme } from '@emotion/react';
 import { AccordionTemplate } from './helpers';
 
 type Args = StoryObj<typeof AccordionGroup>;

package/src/components/PieChart/PieChart.stories.tsx

@@ -88,7 +88,7 @@ export const AccountExample: StoryObj<typeof PieChart> = () => {
               font-size: 20px;
               line-height: 25px;
             `}>
-            147358 &nbsp;
+            18183 &nbsp;
             <Typography
               variant="body2"
               weight="regular"
@@ -97,7 +97,7 @@ export const AccountExample: StoryObj<typeof PieChart> = () => {
               css={css`
                 font-size: 14px;
               `}>
-              USD
+              USDT
             </Typography>
           </Typography>
         }>

package/src/components/PieChart/PieChartBases.tsx

@@ -15,13 +15,13 @@ export const PieChartBase = styled.div`
 
 export const PieChartTextBase = styled.div`
   position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  top: 0;
-  left: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
+  width: calc(100% - 34px);
+  height: calc(100% - 34px);
+  left: 17px;
+  top: 17px;
+  border-radius: 50%;
 `;

package/src/components/PieChart/types.ts

@@ -1,5 +1,5 @@
 import { SerializedStyles } from '@emotion/react';
-import { ResponsivePie } from '@nivo/pie';
+import { ResponsivePie, MayHaveLabel } from '@nivo/pie';
 import { CommonProps } from '../..';
 
 export interface PieChartProps
@@ -9,12 +9,12 @@ export interface PieChartProps
   children?: React.ReactNode;
 }
 
-export type PieChartLegendItem = {
+export interface PieChartLegendItem extends MayHaveLabel {
   id: string | number;
   value: string | number;
   label: string;
   [key: string | number | symbol]: unknown;
-};
+}
 
 export interface PieChartLegendProps {
   data: Array<PieChartLegendItem>;

package/src/components/SegmentedPieChart/SegmentedPieChart.spec.tsx

@@ -1,5 +1,5 @@
 import { SegmentedPieChart } from './index';
-import { balanceData } from './stories/fixtures';
+import { balanceData, balanceTotalAmount } from './stories/fixtures';
 
 const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
 
@@ -11,19 +11,21 @@ jest.mock('@nivo/pie', () => ({
 describe('SegmentedPieChart', () => {
   it('Renders with a Legend', () => {
     const { getByTestId, getByRole, getByText } = render(
-      <SegmentedPieChart data={balanceData} />,
+      <SegmentedPieChart
+        data={balanceData}
+        totalAmount={balanceTotalAmount}
+        totalDimension="USD"
+      />,
     );
 
     getByTestId('responsive-pie');
-    getByText('17737');
+    getByText(balanceTotalAmount);
 
-    for (const { label, value, percentage } of balanceData) {
+    for (const { label } of balanceData) {
       getByRole('heading', { name: label });
-      if (label === 'Other') {
-        getByRole('heading', { name: `${value} USD (${percentage}%)` });
-      } else {
-        getByRole('heading', { name: `${value} ${label} (${percentage}%)` });
-      }
+      getByRole('heading', {
+        name: `2819 USDT (16%)`,
+      });
     }
   });
 });

package/src/components/SegmentedPieChart/SegmentedPieChart.tsx

@@ -1,11 +1,13 @@
 import { css, useTheme } from '@emotion/react';
-import { pathOr } from '@ssa-ui-kit/utils';
-import { Typography, Wrapper, PieChart, PieChartLegend } from '@components';
+import { PieChart, PieChartLegend } from '@components';
 import {
   defaultLegendBackgrounds,
   defaultPieChartColors,
 } from './colorPalettes';
-import { BalanceDataForGraph, SegmentedPieChartProps } from './types';
+import { SegmentedPieChartProps } from './types';
+import { ChartTitle, ChartTooltip, LegendItem } from './components';
+import { useData } from './hooks';
+import { SegmentedPieChartProvider } from './SegmentedPieChartContext';
 
 export const SegmentedPieChart = ({
   data,
@@ -13,142 +15,80 @@ export const SegmentedPieChart = ({
   pieChartLegendProps,
   legendBackgrounds = defaultLegendBackgrounds,
   pieChartColors = defaultPieChartColors,
-  currency = 'USD',
+  currency = 'USDT',
   otherLabel = 'Other',
+  totalAmount,
+  totalDimension,
+  legendValueRoundingDigits = 2,
+  legendPercentageRoundingDigits = 0,
+  showDimensions = true,
+  showPercentage = true,
+  titleTooltipOptions,
+  tooltipConfig,
+  renderTitleTooltipContent,
 }: SegmentedPieChartProps) => {
   const theme = useTheme();
 
-  const balanceDataForTheGraph: BalanceDataForGraph[] = [];
-  let balanceDataTotal = 0;
-  data?.forEach((item, itemIndex) => {
-    if (item.parts?.length) {
-      item.parts?.forEach((part, partIndex) => {
-        balanceDataForTheGraph.push({
-          mainLabel: item.label,
-          mainPercentage: item.percentage,
-          partLabel: part.label,
-          partPercentage: part.percentage,
-          color: pieChartColors[itemIndex][partIndex],
-          id: `${itemIndex}${partIndex}`,
-          mainId: item.id,
-          value: part.percentage,
-        });
-      });
-    } else {
-      balanceDataForTheGraph.push({
-        mainLabel: item.label,
-        mainPercentage: item.percentage,
-        color: pieChartColors[itemIndex][0],
-        id: `${itemIndex}${0}`,
-        mainId: item.id,
-        value: item.percentage,
-      });
-    }
-    balanceDataTotal += item.value;
+  const { balanceDataForTheGraph, balanceDataForTheLegend } = useData({
+    data,
+    legendValueRoundingDigits,
+    pieChartColors,
   });
 
   return (
-    <PieChart
-      data={balanceDataForTheGraph}
-      animate={true}
-      css={{
-        width: 500,
-        padding: 50,
-      }}
-      isInteractive
-      activeInnerRadiusOffset={0}
-      activeOuterRadiusOffset={0}
-      tooltip={(point) => {
-        const pointData = pathOr<typeof point, BalanceDataForGraph>({}, [
-          'datum',
-          'data',
-        ])(point);
-        return (
-          <Wrapper
-            css={{
-              background: theme.colors.greyLighter,
-              flexDirection: 'column',
-              borderRadius: 8,
-              padding: 5,
-              fontSize: 12,
-              fontWeight: 500,
-            }}>
-            {['main', 'part'].map((item) => {
-              if (item === 'part' && !pointData['partLabel']) {
-                return null;
+    <SegmentedPieChartProvider
+      legendPercentageRoundingDigits={legendPercentageRoundingDigits}
+      legendValueRoundingDigits={legendValueRoundingDigits}
+      totalAmount={totalAmount}
+      totalDimension={totalDimension}
+      titleTooltipOptions={titleTooltipOptions}
+      showDimensions={showDimensions}
+      showPercentage={showPercentage}
+      otherLabel={otherLabel}
+      currency={currency}
+      renderTitleTooltipContent={renderTitleTooltipContent}
+      tooltipConfig={tooltipConfig}>
+      <PieChart
+        data={balanceDataForTheGraph}
+        animate={true}
+        css={{
+          width: 400,
+          margin: '40px 120px',
+        }}
+        isInteractive
+        activeInnerRadiusOffset={0}
+        activeOuterRadiusOffset={0}
+        tooltip={(point) => <ChartTooltip point={point} />}
+        title={<ChartTitle />}
+        {...pieChartProps}>
+        <PieChartLegend
+          data={balanceDataForTheLegend}
+          backgroundColors={legendBackgrounds}
+          renderValue={(props) => (
+            <LegendItem
+              {...props}
+              legendValueRoundingDigits={
+                props.legendValueRoundingDigits as number
               }
-              const currentItem =
-                item === 'main'
-                  ? {
-                      label: pointData['mainLabel'],
-                      percentage: pointData['mainPercentage'],
-                    }
-                  : {
-                      label: pointData['partLabel'],
-                      percentage: pointData['partPercentage'],
-                    };
-              return (
-                <Wrapper
-                  key={item}
-                  css={{
-                    justifyContent: 'space-between',
-                    gap: 10,
-                  }}>
-                  <span css={{ fontWeight: 600 }}>{currentItem.label}</span>
-                  <span>{currentItem['percentage']}%</span>
-                </Wrapper>
-              );
-            })}
-          </Wrapper>
-        );
-      }}
-      title={
-        <Typography
-          variant="body2"
-          weight="bold"
-          color={theme.colors.greyDarker}
-          css={css`
-            font-size: 20px;
-            line-height: 25px;
-          `}>
-          {balanceDataTotal} &nbsp;
-          <Typography
-            variant="body2"
-            weight="regular"
-            as="span"
-            color={theme.colors.greyDarker80}
-            css={css`
-              font-size: 14px;
-            `}>
-            {currency}
-          </Typography>
-        </Typography>
-      }
-      {...pieChartProps}>
-      <PieChartLegend
-        data={data}
-        backgroundColors={legendBackgrounds}
-        renderValue={({ value, label, percentage }) =>
-          label === otherLabel
-            ? value + ` ${currency}` + ` (${percentage}%)`
-            : value + ' ' + label + ` (${percentage}%)`
-        }
-        markerStyles={css`
-          width: 10px;
-          height: 10px;
-        `}
-        labelListStyles={css`
-          h6 {
-            font-weight: 700;
-          }
-        `}
-        valueListStyles={css`
-          h6 {
-            color: ${theme.colors.greyDarker80};
-          }
-        `}
-        {...pieChartLegendProps}
-      />
-    </PieChart>
+            />
+          )}
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+          `}
+          labelListStyles={css`
+            h6 {
+              font-weight: 700;
+            }
+          `}
+          valueListStyles={css`
+            h6 {
+              color: ${theme.colors.greyDarker80};
+            }
+          `}
+          {...pieChartLegendProps}
+        />
+      </PieChart>
+    </SegmentedPieChartProvider>
   );
 };

package/src/components/SegmentedPieChart/SegmentedPieChartContext.tsx

@@ -0,0 +1,58 @@
+import { createContext, useContext } from 'react';
+import { SegmentedPieChartProps } from './types';
+
+type ContextType = Pick<
+  SegmentedPieChartProps,
+  | 'renderTitleTooltipContent'
+  | 'totalAmount'
+  | 'totalDimension'
+  | 'titleTooltipOptions'
+  | 'legendValueRoundingDigits'
+  | 'tooltipConfig'
+  | 'showDimensions'
+  | 'showPercentage'
+  | 'otherLabel'
+  | 'currency'
+> & {
+  legendPercentageRoundingDigits: number;
+};
+
+export const SegmentedPieChartContext = createContext<ContextType>({
+  totalAmount: 0,
+  totalDimension: '',
+  legendPercentageRoundingDigits: 0,
+});
+
+export const SegmentedPieChartProvider = ({
+  children,
+  legendPercentageRoundingDigits,
+  totalAmount,
+  totalDimension,
+  titleTooltipOptions,
+  showDimensions,
+  showPercentage,
+  otherLabel,
+  currency,
+  renderTitleTooltipContent,
+}: {
+  children: React.ReactNode;
+} & ContextType) => (
+  <SegmentedPieChartContext.Provider
+    value={{
+      legendPercentageRoundingDigits,
+      totalAmount,
+      totalDimension,
+      titleTooltipOptions,
+      showDimensions,
+      showPercentage,
+      otherLabel,
+      currency,
+      renderTitleTooltipContent,
+    }}>
+    {children}
+  </SegmentedPieChartContext.Provider>
+);
+
+export const useSegmentedPieChartContext = () => {
+  return useContext(SegmentedPieChartContext);
+};

package/src/components/SegmentedPieChart/components/ChartTitle.tsx

@@ -0,0 +1,91 @@
+import { useTheme, css } from '@emotion/react';
+import Typography from '@components/Typography';
+import Tooltip from '@components/Tooltip';
+import TooltipTrigger from '@components/TooltipTrigger';
+import TooltipContent from '@components/TooltipContent';
+import { getRoundedNumber } from '../utils';
+import { useSegmentedPieChartContext } from '../SegmentedPieChartContext';
+
+export const ChartTitle = () => {
+  const {
+    totalAmount,
+    totalDimension,
+    titleTooltipOptions = [],
+    legendPercentageRoundingDigits = 0,
+    legendValueRoundingDigits = 0,
+    tooltipConfig = {},
+    showDimensions,
+    showPercentage,
+    renderTitleTooltipContent,
+  } = useSegmentedPieChartContext();
+  const theme = useTheme();
+  const tooltipContent = renderTitleTooltipContent ? (
+    renderTitleTooltipContent({ totalAmount, totalDimension })
+  ) : (
+    <table
+      css={{
+        background: theme.colors.greyLighter,
+        borderRadius: 8,
+        padding: 5,
+        fontSize: 12,
+        fontWeight: 500,
+        '& td': {
+          whiteSpace: 'nowrap',
+        },
+      }}>
+      {titleTooltipOptions.map((item, index) => {
+        const percentage = (Number(item.value) * 100) / totalAmount;
+        const roundedValue = getRoundedNumber(
+          item.value,
+          item.legendValueRoundingDigits || legendValueRoundingDigits,
+        );
+        const roundedPercentage = getRoundedNumber(
+          percentage,
+          item.legendPercentageRoundingDigits || legendPercentageRoundingDigits,
+        );
+        return (
+          <tr key={`chart-title-row-${index}`}>
+            <td css={{ fontWeight: 600, padding: '0 5px' }}>{item.label}</td>
+            <td>
+              {roundedValue} {showDimensions && item.dimension}
+            </td>
+            {showPercentage && <td>({roundedPercentage}%)</td>}
+          </tr>
+        );
+      })}
+    </table>
+  );
+  return (
+    <Tooltip
+      enableHover={titleTooltipOptions?.length > 0}
+      enableClick={false}
+      {...tooltipConfig}>
+      <TooltipTrigger>
+        <Typography
+          variant="body2"
+          weight="bold"
+          color={theme.colors.greyDarker}
+          css={css`
+            font-size: 20px;
+            line-height: 25px;
+            cursor: default;
+          `}>
+          {totalAmount} &nbsp;
+          <Typography
+            variant="body2"
+            weight="regular"
+            as="span"
+            color={theme.colors.greyDarker80}
+            css={css`
+              font-size: 14px;
+            `}>
+            {totalDimension}
+          </Typography>
+        </Typography>
+      </TooltipTrigger>
+      <TooltipContent css={{ padding: '3px 0' }}>
+        {tooltipContent}
+      </TooltipContent>
+    </Tooltip>
+  );
+};

package/src/components/SegmentedPieChart/components/ChartTooltip.tsx

@@ -0,0 +1,87 @@
+import { useTheme } from '@emotion/react';
+import { MayHaveLabel, PieTooltipProps } from '@nivo/pie';
+import { pathOr } from '@ssa-ui-kit/utils';
+import { BalanceDataForGraph } from '../types';
+import { getRoundedNumber } from '../utils';
+import { useSegmentedPieChartContext } from '../SegmentedPieChartContext';
+
+export const ChartTooltip = ({
+  point,
+}: {
+  point: PieTooltipProps<MayHaveLabel>;
+}) => {
+  const { legendPercentageRoundingDigits, showDimensions, showPercentage } =
+    useSegmentedPieChartContext();
+  const theme = useTheme();
+  const pointData = pathOr<typeof point, BalanceDataForGraph>({}, [
+    'datum',
+    'data',
+  ])(point);
+  const mainData = {
+    value:
+      typeof pointData.legendValue !== 'undefined'
+        ? getRoundedNumber(
+            pointData.legendValue,
+            pointData.legendValueRoundingDigits,
+          )
+        : getRoundedNumber(
+            pointData.value,
+            pointData.legendValueRoundingDigits,
+          ),
+    label: pointData.legendLabel || pointData.label,
+    percentage: getRoundedNumber(
+      pointData.percentage,
+      legendPercentageRoundingDigits,
+    ),
+  };
+  const partData = {
+    value:
+      pointData.partLegendValue !== undefined
+        ? getRoundedNumber(
+            pointData.partLegendValue,
+            pointData.legendValueRoundingDigits,
+          )
+        : getRoundedNumber(
+            pointData.partValue,
+            pointData.legendValueRoundingDigits,
+          ),
+    label: pointData.partLabel || pointData.legendLabel || pointData.label,
+    percentage: getRoundedNumber(
+      pointData.partPercentage,
+      legendPercentageRoundingDigits,
+    ),
+  };
+  return (
+    <table
+      css={{
+        background: theme.colors.greyLighter,
+        borderRadius: 8,
+        padding: 5,
+        fontSize: 12,
+        fontWeight: 500,
+        '& td': {
+          whiteSpace: 'nowrap',
+        },
+      }}>
+      <tr>
+        <td css={{ fontWeight: 600, padding: '0 5px' }}>{pointData.label}</td>
+        <td>
+          {mainData.value} {showDimensions && mainData.label}
+        </td>
+        {showPercentage && <td>({mainData.percentage}%)</td>}
+      </tr>
+      {pointData.partLabel && (
+        <tr>
+          <td css={{ fontWeight: 600, padding: '0 5px' }}>
+            {pointData.partLabel}
+          </td>
+          <td>
+            {partData.value}{' '}
+            {showDimensions && (pointData.legendLabel || pointData.label)}
+          </td>
+          {showPercentage && <td>({partData.percentage}%)</td>}
+        </tr>
+      )}
+    </table>
+  );
+};

package/src/components/SegmentedPieChart/components/LegendItem.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { LegendItemProps } from '../types';
+import { getRoundedNumber } from '../utils';
+import { useSegmentedPieChartContext } from '../SegmentedPieChartContext';
+
+export const LegendItem = ({
+  label,
+  legendLabel,
+  percentage,
+  legendValue,
+  legendValueRoundingDigits,
+}: LegendItemProps) => {
+  const {
+    legendPercentageRoundingDigits,
+    showDimensions,
+    showPercentage,
+    otherLabel,
+    currency,
+  } = useSegmentedPieChartContext();
+  const legendValueLocal = getRoundedNumber(
+    legendValue,
+    legendValueRoundingDigits as number,
+  );
+  const percentageLocal = getRoundedNumber(
+    percentage,
+    legendPercentageRoundingDigits as number,
+  );
+  const dimension = showDimensions
+    ? label === otherLabel
+      ? (legendLabel as string | undefined) || currency
+      : (legendLabel as string | undefined) || label
+    : '';
+  return (
+    <React.Fragment>
+      {legendValueLocal} {showDimensions && dimension}
+      {showPercentage && ` (${percentageLocal}%)`}
+    </React.Fragment>
+  );
+};

package/src/components/SegmentedPieChart/components/index.ts

@@ -0,0 +1,3 @@
+export * from './ChartTooltip';
+export * from './ChartTitle';
+export * from './LegendItem';

package/src/components/SegmentedPieChart/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useData';