@ssa-ui-kit/core 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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.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

@@ -18,7 +18,8 @@ export type PieChartLegendItem = {
 
 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,29 @@
+import { SegmentedPieChart } from './index';
+import { balanceData } 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} />,
+    );
+
+    getByTestId('responsive-pie');
+    getByText('17737');
+
+    for (const { label, value, percentage } of balanceData) {
+      getByRole('heading', { name: label });
+      if (label === 'Other') {
+        getByRole('heading', { name: `${value} USD (${percentage}%)` });
+      } else {
+        getByRole('heading', { name: `${value} ${label} (${percentage}%)` });
+      }
+    }
+  });
+});

package/src/components/SegmentedPieChart/SegmentedPieChart.tsx

@@ -0,0 +1,154 @@
+import { css, useTheme } from '@emotion/react';
+import { pathOr } from '@ssa-ui-kit/utils';
+import { Typography, Wrapper, PieChart, PieChartLegend } from '@components';
+import {
+  defaultLegendBackgrounds,
+  defaultPieChartColors,
+} from './colorPalettes';
+import { BalanceDataForGraph, SegmentedPieChartProps } from './types';
+
+export const SegmentedPieChart = ({
+  data,
+  pieChartProps,
+  pieChartLegendProps,
+  legendBackgrounds = defaultLegendBackgrounds,
+  pieChartColors = defaultPieChartColors,
+  currency = 'USD',
+  otherLabel = 'Other',
+}: 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;
+  });
+
+  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;
+              }
+              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>
+  );
+};

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

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

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { balanceData, balanceMissedPartsData } 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 StoryTemplate: Args = {
+  render: ({ ...args }) => <SegmentedPieChart data={balanceData} {...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'],
+    ],
+    pieChartProps: {
+      tooltip: undefined,
+    },
+  },
+};
+
+export const CustomCurrency = {
+  ...StoryTemplate,
+  args: {
+    currency: 'EUR',
+  },
+};
+
+export const WithoutTooltip = {
+  ...StoryTemplate,
+  args: {
+    pieChartProps: {
+      isInteractive: false,
+    },
+  },
+};
+
+export const MissedPartsData = {
+  ...StoryTemplate,
+  args: {
+    data: balanceMissedPartsData,
+  },
+};

package/src/components/SegmentedPieChart/stories/fixtures.ts

@@ -0,0 +1,147 @@
+import { BalanceData } from '../types';
+
+export const balanceData: BalanceData = [
+  {
+    id: 1,
+    value: 5843.37,
+    label: 'BTC',
+    percentage: 33,
+    parts: [
+      {
+        label: 'BTC. Option 1',
+        percentage: 13,
+        value: 2300,
+      },
+      {
+        label: 'BTC. Option 2',
+        percentage: 10,
+        value: 1800,
+      },
+      {
+        label: 'BTC. Option 3',
+        percentage: 10,
+        value: 1743.37,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    label: 'ETH',
+    percentage: 30,
+    parts: [
+      {
+        label: 'ETH. Option 1',
+        percentage: 17,
+        value: 2800,
+      },
+      {
+        label: 'ETH. Option 2',
+        percentage: 13,
+        value: 2449.25,
+      },
+    ],
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    label: 'USDT',
+    percentage: 22,
+    parts: [
+      {
+        label: 'USDT. Option 1',
+        percentage: 5,
+        value: 1000,
+      },
+      {
+        label: 'USDT. Option 2',
+        percentage: 12,
+        value: 1840,
+      },
+      {
+        label: 'USDT. Option 3',
+        percentage: 5,
+        value: 985.55,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    label: 'Other',
+    percentage: 15,
+    parts: [
+      {
+        label: 'Other. Option 1',
+        percentage: 7,
+        value: 1400,
+      },
+      {
+        label: 'Other. Option 2',
+        percentage: 8,
+        value: 1418.83,
+      },
+    ],
+  },
+];
+
+export const balanceMissedPartsData: BalanceData = [
+  {
+    id: 1,
+    value: 5843.37,
+    label: 'BTC',
+    percentage: 33,
+    parts: [
+      {
+        label: 'BTC. Option 1',
+        percentage: 13,
+        value: 2300,
+      },
+      {
+        label: 'BTC. Option 2',
+        percentage: 10,
+        value: 1800,
+      },
+      {
+        label: 'BTC. Option 3',
+        percentage: 10,
+        value: 1743.37,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    label: 'ETH',
+    percentage: 30,
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    label: 'USDT',
+    percentage: 22,
+    parts: [
+      {
+        label: 'USDT. Option 1',
+        percentage: 5,
+        value: 1000,
+      },
+      {
+        label: 'USDT. Option 2',
+        percentage: 12,
+        value: 1840,
+      },
+      {
+        label: 'USDT. Option 3',
+        percentage: 5,
+        value: 985.55,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    label: 'Other',
+    percentage: 15,
+  },
+];

package/src/components/SegmentedPieChart/types.ts

@@ -0,0 +1,40 @@
+import { CommonProps } from '@global-types/emotion';
+import { MayHaveLabel } from '@nivo/pie';
+import { PieChartLegend, PieChartProps } from '@components';
+
+type BalanceDataPartsItem = {
+  label: string;
+  percentage: number;
+  value: number;
+};
+
+type BalanceDataItem = {
+  id: number;
+  value: number;
+  label: string;
+  percentage: number;
+  parts?: BalanceDataPartsItem[];
+};
+
+export type BalanceData = Array<BalanceDataItem>;
+
+export interface SegmentedPieChartProps extends CommonProps {
+  data: BalanceData;
+  pieChartProps?: Partial<PieChartProps>;
+  pieChartLegendProps?: Partial<React.ComponentProps<typeof PieChartLegend>>;
+  legendBackgrounds?: string[];
+  pieChartColors?: string[][];
+  currency?: string;
+  otherLabel?: string;
+}
+
+export interface BalanceDataForGraph extends MayHaveLabel {
+  mainLabel: string;
+  mainPercentage: number;
+  partLabel?: string;
+  partPercentage?: number;
+  id: number | string;
+  mainId: number;
+  value: number | string;
+  color: string;
+}

package/src/components/index.ts

@@ -97,6 +97,7 @@ export * from './SearchBox';
 export * from './UserProfile';
 export * from './AddNewAccountCard';
 export * from './PieChart';
+export * from './SegmentedPieChart';
 export * from './CollapsibleNavBar';
 export * from './Filters';
 export * from './TableFilters';