@ssa-ui-kit/core 1.0.10 → 1.0.12

package/package.json

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

package/src/components/LinksTabBar/LinksTabBar.spec.tsx

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 import userEvent from '@testing-library/user-event';
 import { links } from './stories/mockData';
 import { MemoryRouterDecorator } from './stories/decorators';
-
 import { LinksTabBar } from './index';
 
 function setup(Component: React.ElementType) {

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/PieChart.tsx

@@ -4,7 +4,6 @@ import { PieChartProps } from './types';
 import { PieChartBase, PieChartTextBase } from './PieChartBases';
 
 export const PieChart = ({
-  data,
   as,
   className,
   title,
@@ -15,7 +14,6 @@ export const PieChart = ({
     <PieChartBase as={as} className={className}>
       <div className="pie-chart-wrapper">
         <ResponsivePie
-          data={data}
           isInteractive={false}
           innerRadius={0.8}
           enableArcLinkLabels={false}
@@ -29,7 +27,7 @@ export const PieChart = ({
           arcLinkLabelsThickness={2}
           arcLinkLabelsColor={{ from: 'color' }}
           arcLabelsSkipAngle={10}
-          layers={['arcs']}
+          layers={['arcs', 'arcLinkLabels', 'arcLabels']}
           {...chartProps}
         />
         {title && <PieChartTextBase>{title}</PieChartTextBase>}

package/src/components/PieChart/PieChartBases.tsx

@@ -17,6 +17,7 @@ export const PieChartTextBase = styled.div`
   position: absolute;
   width: 100%;
   height: 100%;
+  pointer-events: none;
   top: 0;
   left: 0;
   display: flex;

package/src/components/PieChart/PieChartLegend.tsx

@@ -9,6 +9,7 @@ import { PieChartLegendProps } from './types';
 export const PieChartLegend = ({
   data,
   colors,
+  backgroundColors,
   renderLabel,
   renderValue,
   markerStyles,
@@ -27,7 +28,12 @@ export const PieChartLegend = ({
           return (
             <li key={`tag-${id}`}>
               <PieChartLegendMarker
-                color={colors[index] || 'purple'}
+                color={
+                  backgroundColors ? undefined : colors?.[index] || 'purple'
+                }
+                background={
+                  backgroundColors ? backgroundColors[index] : undefined
+                }
                 as={'span'}
                 css={markerStyles}
               />

package/src/components/PieChart/PieChartLegendMarker.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import Badge from '@components/Badge';
 
-export const PieChartLegendMarker = styled(Badge)`
+export const PieChartLegendMarker = styled(Badge)<{ background?: string }>`
   display: inline-block;
 
   padding: 0;
@@ -9,4 +9,6 @@ export const PieChartLegendMarker = styled(Badge)`
 
   width: 8px;
   height: 8px;
+
+  background: ${({ background }) => background};
 `;

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,16 +9,17 @@ 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>;
-  colors: Array<keyof MainColors>;
+  colors?: Array<keyof MainColors>;
+  backgroundColors?: Array<string>;
   renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
   className?: string;

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

@@ -0,0 +1,31 @@
+import { SegmentedPieChart } from './index';
+import { balanceData, balanceTotalAmount } from './stories/fixtures';
+
+const ResponsivePieMock = () => <div data-testid="responsive-pie"></div>;
+
+jest.mock('@nivo/pie', () => ({
+  PieCustomLayerProps: {},
+  ResponsivePie: ResponsivePieMock,
+}));
+
+describe('SegmentedPieChart', () => {
+  it('Renders with a Legend', () => {
+    const { getByTestId, getByRole, getByText } = render(
+      <SegmentedPieChart
+        data={balanceData}
+        totalAmount={balanceTotalAmount}
+        totalDimension="USD"
+      />,
+    );
+
+    getByTestId('responsive-pie');
+    getByText(balanceTotalAmount);
+
+    for (const { label } of balanceData) {
+      getByRole('heading', { name: label });
+      getByRole('heading', {
+        name: `2819 USDT (16%)`,
+      });
+    }
+  });
+});

package/src/components/SegmentedPieChart/SegmentedPieChart.tsx

@@ -0,0 +1,89 @@
+import { css, useTheme } from '@emotion/react';
+import { PieChart, PieChartLegend } from '@components';
+import {
+  defaultLegendBackgrounds,
+  defaultPieChartColors,
+} from './colorPalettes';
+import { SegmentedPieChartProps } from './types';
+import { ChartTitle, ChartTooltip, LegendItem } from './components';
+import { useData } from './hooks';
+
+export const SegmentedPieChart = ({
+  data,
+  pieChartProps,
+  pieChartLegendProps,
+  legendBackgrounds = defaultLegendBackgrounds,
+  pieChartColors = defaultPieChartColors,
+  currency = 'USDT',
+  otherLabel = 'Other',
+  totalAmount,
+  totalDimension,
+  legendValueRoundingDigits = 2,
+  legendPercentageRoundingDigits = 0,
+  showDimensions = true,
+  showPercentage = true,
+}: SegmentedPieChartProps) => {
+  const theme = useTheme();
+
+  const { balanceDataForTheGraph, balanceDataForTheLegend } = useData({
+    data,
+    legendValueRoundingDigits,
+    pieChartColors,
+  });
+
+  return (
+    <PieChart
+      data={balanceDataForTheGraph}
+      animate={true}
+      css={{
+        width: 400,
+        margin: '40px 120px',
+      }}
+      isInteractive
+      activeInnerRadiusOffset={0}
+      activeOuterRadiusOffset={0}
+      tooltip={(point) => (
+        <ChartTooltip
+          point={point}
+          legendPercentageRoundingDigits={legendPercentageRoundingDigits}
+        />
+      )}
+      title={
+        <ChartTitle totalAmount={totalAmount} totalDimension={totalDimension} />
+      }
+      {...pieChartProps}>
+      <PieChartLegend
+        data={balanceDataForTheLegend}
+        backgroundColors={legendBackgrounds}
+        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;
+        `}
+        labelListStyles={css`
+          h6 {
+            font-weight: 700;
+          }
+        `}
+        valueListStyles={css`
+          h6 {
+            color: ${theme.colors.greyDarker80};
+          }
+        `}
+        {...pieChartLegendProps}
+      />
+    </PieChart>
+  );
+};

package/src/components/SegmentedPieChart/colorPalettes.ts

@@ -0,0 +1,13 @@
+export const defaultLegendBackgrounds = [
+  'linear-gradient(90deg, #ED995D 0%, #EDBA5D 100%)',
+  'linear-gradient(247deg, #7599DE 14.71%, #4178E1 85.29%)',
+  'linear-gradient(296deg, #89D996 16.38%, #52C587 83.62%)',
+  'linear-gradient(68deg, #EB7556 12.3%, #F2888E 88.95%)',
+];
+
+export const defaultPieChartColors = [
+  ['#ED995D', '#EDAA5D', '#EDBA5D', '#FFCF78', '#FFDFA5'],
+  ['#4178E1', '#7599DE', '#8BB2FD', '#A6C4FF', '#CEDFFF'],
+  ['#36AB6C', '#52C587', '#89D996', '#A7F3B3', '#C0FFCA'],
+  ['#EB7556', '#FF917E', '#F2888E', '#FFA6A8', '#FFD4CB'],
+];

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/index.ts

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

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

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  balanceData,
+  balanceMissedPartsData,
+  balanceMissedPartsDataTotalAmount,
+  balanceTotalAmount,
+} from './fixtures';
+import { SegmentedPieChart } from '../SegmentedPieChart';
+
+export default {
+  title: 'Widgets/SegmentedPieChart',
+  component: SegmentedPieChart,
+} as Meta<typeof SegmentedPieChart>;
+
+type Args = StoryObj<Partial<Parameters<typeof SegmentedPieChart>[0]>>;
+
+const currency = 'USDT';
+const StoryTemplate: Args = {
+  render: ({ ...args }) => (
+    <SegmentedPieChart
+      data={balanceData}
+      totalAmount={Number(balanceTotalAmount)}
+      totalDimension={currency}
+      {...args}
+    />
+  ),
+};
+
+export const AccountExample = {
+  ...StoryTemplate,
+  args: {},
+};
+
+export const CustomColors = {
+  ...StoryTemplate,
+  args: {
+    legendBackgrounds: [
+      'linear-gradient(90deg, #6A9FDC 0%, #85BCE8 100%)',
+      'linear-gradient(247deg, #A34EC6 14.71%, #D678F8 85.29%)',
+      'linear-gradient(296deg, #5FD1E4 16.38%, #7AE4F5 83.62%)',
+      'linear-gradient(68deg, #D77A61 12.3%, #E89C91 88.95%)',
+    ],
+    pieChartColors: [
+      ['#6A9FDC', '#85BCE8', '#A3D7F2', '#BAE7FF', '#D1F2FF'],
+      ['#A34EC6', '#D678F8', '#E597FF', '#F5C0FF', '#FFD9FF'],
+      ['#5FD1E4', '#7AE4F5', '#A1F3FF', '#C0FFFF', '#D9FFFF'],
+      ['#D77A61', '#E89C91', '#F1B5A4', '#FFC3B5', '#FFDACC'],
+    ],
+  },
+};
+
+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,
+  },
+};
+
+export const WithoutTooltip = {
+  ...StoryTemplate,
+  args: {
+    pieChartProps: {
+      isInteractive: false,
+    },
+  },
+};
+
+export const WithoutPercentage = {
+  ...StoryTemplate,
+  args: {
+    showPercentage: false,
+  },
+};
+
+export const WithoutDimensions = {
+  ...StoryTemplate,
+  args: {
+    showDimensions: false,
+  },
+};