@ssa-ui-kit/core 1.0.11 → 1.0.12

package/package.json

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

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/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,12 @@
 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';
 
 export const SegmentedPieChart = ({
   data,
@@ -13,38 +14,21 @@ export const SegmentedPieChart = ({
   pieChartLegendProps,
   legendBackgrounds = defaultLegendBackgrounds,
   pieChartColors = defaultPieChartColors,
-  currency = 'USD',
+  currency = 'USDT',
   otherLabel = 'Other',
+  totalAmount,
+  totalDimension,
+  legendValueRoundingDigits = 2,
+  legendPercentageRoundingDigits = 0,
+  showDimensions = true,
+  showPercentage = true,
 }: 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 (
@@ -52,87 +36,38 @@ export const SegmentedPieChart = ({
       data={balanceDataForTheGraph}
       animate={true}
       css={{
-        width: 500,
-        padding: 50,
+        width: 400,
+        margin: '40px 120px',
       }}
       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;
-              }
-              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>
-        );
-      }}
+      tooltip={(point) => (
+        <ChartTooltip
+          point={point}
+          legendPercentageRoundingDigits={legendPercentageRoundingDigits}
+        />
+      )}
       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>
+        <ChartTitle totalAmount={totalAmount} totalDimension={totalDimension} />
       }
       {...pieChartProps}>
       <PieChartLegend
-        data={data}
+        data={balanceDataForTheLegend}
         backgroundColors={legendBackgrounds}
-        renderValue={({ value, label, percentage }) =>
-          label === otherLabel
-            ? value + ` ${currency}` + ` (${percentage}%)`
-            : value + ' ' + label + ` (${percentage}%)`
-        }
+        renderValue={(props) => (
+          <LegendItem
+            {...props}
+            legendValueRoundingDigits={
+              props.legendValueRoundingDigits as number
+            }
+            legendPercentageRoundingDigits={legendPercentageRoundingDigits}
+            showDimensions={showDimensions}
+            showPercentage={showPercentage}
+            otherLabel={otherLabel}
+            currency={currency}
+          />
+        )}
         markerStyles={css`
           width: 10px;
           height: 10px;

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

@@ -0,0 +1,34 @@
+import { useTheme, css } from '@emotion/react';
+import Typography from '@components/Typography';
+
+export const ChartTitle = ({
+  totalAmount,
+  totalDimension,
+}: {
+  totalAmount: number;
+  totalDimension: string;
+}) => {
+  const theme = useTheme();
+  return (
+    <Typography
+      variant="body2"
+      weight="bold"
+      color={theme.colors.greyDarker}
+      css={css`
+        font-size: 20px;
+        line-height: 25px;
+      `}>
+      {totalAmount} &nbsp;
+      <Typography
+        variant="body2"
+        weight="regular"
+        as="span"
+        color={theme.colors.greyDarker80}
+        css={css`
+          font-size: 14px;
+        `}>
+        {totalDimension}
+      </Typography>
+    </Typography>
+  );
+};

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

@@ -0,0 +1,85 @@
+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';
+
+export const ChartTooltip = ({
+  point,
+  legendPercentageRoundingDigits,
+}: {
+  point: PieTooltipProps<MayHaveLabel>;
+  legendPercentageRoundingDigits: number;
+}) => {
+  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} {mainData.label}
+        </td>
+        <td>({mainData.percentage}%)</td>
+      </tr>
+      {pointData.partLabel && (
+        <tr>
+          <td css={{ fontWeight: 600, padding: '0 5px' }}>
+            {pointData.partLabel}
+          </td>
+          <td>
+            {partData.value} {pointData.legendLabel || pointData.label}
+          </td>
+          <td>({partData.percentage}%)</td>
+        </tr>
+      )}
+    </table>
+  );
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { LegendItemProps } from '../types';
+import { getRoundedNumber } from '../utils';
+
+export const LegendItem = ({
+  label,
+  legendLabel,
+  percentage,
+  legendValue,
+  legendValueRoundingDigits,
+  legendPercentageRoundingDigits,
+  showDimensions,
+  showPercentage,
+  otherLabel,
+  currency,
+}: LegendItemProps) => {
+  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';

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

@@ -0,0 +1,71 @@
+import { propOr } from '@ssa-ui-kit/utils';
+import {
+  BalanceDataForGraph,
+  SegmentedDataItem,
+  SegmentedPieChartProps,
+} from '../types';
+import { defaultPieChartColors } from '../colorPalettes';
+
+export const useData = ({
+  data,
+  pieChartColors = defaultPieChartColors,
+  legendValueRoundingDigits,
+}: Pick<
+  SegmentedPieChartProps,
+  'data' | 'pieChartColors' | 'legendValueRoundingDigits'
+>) => {
+  let calculatedTotalAmount = 0;
+  data.forEach((item) => {
+    calculatedTotalAmount += Number(item.value);
+  });
+  const balanceDataForTheGraph: BalanceDataForGraph[] = [];
+  const balanceDataForTheLegend: BalanceDataForGraph[] = [];
+  data?.forEach((item, itemIndex) => {
+    const mainPercentage = (Number(item.value) * 100) / calculatedTotalAmount;
+    const newMainItem = {
+      value: item.value,
+      label: item.label,
+      percentage: mainPercentage,
+      mainId: Number(item.id),
+      legendLabel: item.legendLabel,
+      legendValue: item.legendValue,
+      legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
+        legendValueRoundingDigits,
+        'legendValueRoundingDigits',
+      )(item),
+      color: pieChartColors[itemIndex][0],
+      id: `${itemIndex}0`,
+    };
+    balanceDataForTheLegend.push(newMainItem);
+    if (item.parts?.length) {
+      item.parts?.forEach((part, partIndex) => {
+        const partPercentage = (part.value * 100) / calculatedTotalAmount;
+        balanceDataForTheGraph.push({
+          value: item.value,
+          label: item.label,
+          percentage: mainPercentage,
+          mainId: Number(item.id),
+          legendLabel: item.legendLabel,
+          legendValue: item.legendValue,
+          legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
+            legendValueRoundingDigits,
+            'legendValueRoundingDigits',
+          )(item),
+          color: pieChartColors[itemIndex][partIndex],
+          id: `${itemIndex}${partIndex}`,
+          partIndex,
+          partLabel: part.label,
+          partPercentage: Number(partPercentage),
+          partValue: part.value,
+          partLegendValue: part.legendValue,
+        });
+      });
+    } else {
+      balanceDataForTheGraph.push(newMainItem);
+    }
+  });
+  return {
+    balanceDataForTheGraph,
+    balanceDataForTheLegend,
+  };
+};

package/src/components/SegmentedPieChart/stories/SegmentedPieChart.stories.tsx

@@ -1,5 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { balanceData, balanceMissedPartsData } from './fixtures';
+import {
+  balanceData,
+  balanceMissedPartsData,
+  balanceMissedPartsDataTotalAmount,
+  balanceTotalAmount,
+} from './fixtures';
 import { SegmentedPieChart } from '../SegmentedPieChart';
 
 export default {
@@ -9,8 +14,16 @@ export default {
 
 type Args = StoryObj<Partial<Parameters<typeof SegmentedPieChart>[0]>>;
 
+const currency = 'USDT';
 const StoryTemplate: Args = {
-  render: ({ ...args }) => <SegmentedPieChart data={balanceData} {...args} />,
+  render: ({ ...args }) => (
+    <SegmentedPieChart
+      data={balanceData}
+      totalAmount={Number(balanceTotalAmount)}
+      totalDimension={currency}
+      {...args}
+    />
+  ),
 };
 
 export const AccountExample = {
@@ -33,9 +46,6 @@ export const CustomColors = {
       ['#5FD1E4', '#7AE4F5', '#A1F3FF', '#C0FFFF', '#D9FFFF'],
       ['#D77A61', '#E89C91', '#F1B5A4', '#FFC3B5', '#FFDACC'],
     ],
-    pieChartProps: {
-      tooltip: undefined,
-    },
   },
 };
 
@@ -43,6 +53,26 @@ export const CustomCurrency = {
   ...StoryTemplate,
   args: {
     currency: 'EUR',
+    totalDimension: 'PLN',
+    totalAmount: 17737.12,
+  },
+};
+
+CustomCurrency.storyName = 'Custom currency, total dimension and amount';
+
+export const MissedPartsData = {
+  ...StoryTemplate,
+  args: {
+    data: balanceMissedPartsData,
+    totalAmount: balanceMissedPartsDataTotalAmount,
+  },
+};
+
+export const PercentageRoundingDigits = {
+  ...StoryTemplate,
+  args: {
+    legendValueRoundingDigits: 1,
+    legendPercentageRoundingDigits: 2,
   },
 };
 
@@ -55,9 +85,16 @@ export const WithoutTooltip = {
   },
 };
 
-export const MissedPartsData = {
+export const WithoutPercentage = {
   ...StoryTemplate,
   args: {
-    data: balanceMissedPartsData,
+    showPercentage: false,
+  },
+};
+
+export const WithoutDimensions = {
+  ...StoryTemplate,
+  args: {
+    showDimensions: false,
   },
 };