@ssa-ui-kit/core 1.0.12 → 1.0.16

package/package.json

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

@@ -15,9 +15,7 @@ const Indicator = ({
   const indicatorRef = useRef<HTMLDivElement>(null);
   const childrenRef = useRef<HTMLDivElement | null>(null);
   const [width, setWidth] = useState<number>(0);
-  const [childrenData, setChildrenData] = useState<ChildrenDataProps | null>(
-    {} || null,
-  );
+  const [childrenData, setChildrenData] = useState<ChildrenDataProps>({});
   const { width: windowWidth } = useWindowSize();
   const theme = useTheme();
 
@@ -32,8 +30,17 @@ const Indicator = ({
         width: childrenRef.current.offsetWidth,
         right: childrenRef.current.offsetWidth + childrenRef.current.offsetLeft,
       };
-      setWidth(refValue);
-      setChildrenData(refData);
+      if (refValue !== width) {
+        setWidth(refValue);
+      }
+      if (
+        childrenData.top !== refData.top ||
+        childrenData.left !== refData.left ||
+        childrenData.width !== refData.width ||
+        childrenData.right !== refData.right
+      ) {
+        setChildrenData(refData);
+      }
     }
   }, [width, childrenRef.current, windowWidth]);
 
@@ -44,7 +51,7 @@ const Indicator = ({
           data-testid={`indicator-${position}`}
           ref={indicatorRef}
           css={
-            childrenData && [
+            Object.keys(childrenData).length > 0 && [
               css`
                 top: ${childrenData.top + 2}px;
                 left: ${isRight ? '-6px' : '1px'};

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

@@ -7,6 +7,7 @@ import {
 import { SegmentedPieChartProps } from './types';
 import { ChartTitle, ChartTooltip, LegendItem } from './components';
 import { useData } from './hooks';
+import { SegmentedPieChartProvider } from './SegmentedPieChartContext';
 
 export const SegmentedPieChart = ({
   data,
@@ -22,6 +23,9 @@ export const SegmentedPieChart = ({
   legendPercentageRoundingDigits = 0,
   showDimensions = true,
   showPercentage = true,
+  titleTooltipOptions,
+  tooltipConfig,
+  renderTitleTooltipContent,
 }: SegmentedPieChartProps) => {
   const theme = useTheme();
 
@@ -32,58 +36,59 @@ export const SegmentedPieChart = ({
   });
 
   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
+    <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
+              }
+            />
+          )}
+          markerStyles={css`
+            width: 10px;
+            height: 10px;
+          `}
+          labelListStyles={css`
+            h6 {
+              font-weight: 700;
+            }
+          `}
+          valueListStyles={css`
+            h6 {
+              color: ${theme.colors.greyDarker80};
             }
-            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>
+          `}
+          {...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

@@ -1,34 +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 = ({
-  totalAmount,
-  totalDimension,
-}: {
-  totalAmount: number;
-  totalDimension: string;
-}) => {
+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 (
-    <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>
+    <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

@@ -3,14 +3,15 @@ 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,
-  legendPercentageRoundingDigits,
 }: {
   point: PieTooltipProps<MayHaveLabel>;
-  legendPercentageRoundingDigits: number;
 }) => {
+  const { legendPercentageRoundingDigits, showDimensions, showPercentage } =
+    useSegmentedPieChartContext();
   const theme = useTheme();
   const pointData = pathOr<typeof point, BalanceDataForGraph>({}, [
     'datum',
@@ -24,7 +25,7 @@ export const ChartTooltip = ({
             pointData.legendValueRoundingDigits,
           )
         : getRoundedNumber(
-            pointData.value,
+            pointData.mainValue,
             pointData.legendValueRoundingDigits,
           ),
     label: pointData.legendLabel || pointData.label,
@@ -65,9 +66,9 @@ export const ChartTooltip = ({
       <tr>
         <td css={{ fontWeight: 600, padding: '0 5px' }}>{pointData.label}</td>
         <td>
-          {mainData.value} {mainData.label}
+          {mainData.value} {showDimensions && mainData.label}
         </td>
-        <td>({mainData.percentage}%)</td>
+        {showPercentage && <td>({mainData.percentage}%)</td>}
       </tr>
       {pointData.partLabel && (
         <tr>
@@ -75,9 +76,10 @@ export const ChartTooltip = ({
             {pointData.partLabel}
           </td>
           <td>
-            {partData.value} {pointData.legendLabel || pointData.label}
+            {partData.value}{' '}
+            {showDimensions && (pointData.legendLabel || pointData.label)}
           </td>
-          <td>({partData.percentage}%)</td>
+          {showPercentage && <td>({partData.percentage}%)</td>}
         </tr>
       )}
     </table>

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { LegendItemProps } from '../types';
 import { getRoundedNumber } from '../utils';
+import { useSegmentedPieChartContext } from '../SegmentedPieChartContext';
 
 export const LegendItem = ({
   label,
@@ -8,12 +9,14 @@ export const LegendItem = ({
   percentage,
   legendValue,
   legendValueRoundingDigits,
-  legendPercentageRoundingDigits,
-  showDimensions,
-  showPercentage,
-  otherLabel,
-  currency,
 }: LegendItemProps) => {
+  const {
+    legendPercentageRoundingDigits,
+    showDimensions,
+    showPercentage,
+    otherLabel,
+    currency,
+  } = useSegmentedPieChartContext();
   const legendValueLocal = getRoundedNumber(
     legendValue,
     legendValueRoundingDigits as number,

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

@@ -15,51 +15,59 @@ export const useData = ({
   'data' | 'pieChartColors' | 'legendValueRoundingDigits'
 >) => {
   let calculatedTotalAmount = 0;
-  data.forEach((item) => {
+  const dataLocal = Array.isArray(data) ? data : [];
+  const pieChartColorsLocal = Array.isArray(pieChartColors)
+    ? pieChartColors
+    : [[]];
+  dataLocal?.forEach((item) => {
     calculatedTotalAmount += Number(item.value);
   });
   const balanceDataForTheGraph: BalanceDataForGraph[] = [];
   const balanceDataForTheLegend: BalanceDataForGraph[] = [];
-  data?.forEach((item, itemIndex) => {
+  dataLocal?.forEach((item, itemIndex) => {
     const mainPercentage = (Number(item.value) * 100) / calculatedTotalAmount;
     const newMainItem = {
       value: item.value,
       label: item.label,
       percentage: mainPercentage,
       mainId: Number(item.id),
+      mainValue: item.value,
       legendLabel: item.legendLabel,
       legendValue: item.legendValue,
       legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
         legendValueRoundingDigits,
         'legendValueRoundingDigits',
       )(item),
-      color: pieChartColors[itemIndex][0],
+      color: pieChartColorsLocal?.[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,
+      item.parts
+        ?.filter((part) => !!part.value)
+        .forEach((part, partIndex) => {
+          const partPercentage = (part.value * 100) / calculatedTotalAmount;
+          balanceDataForTheGraph.push({
+            value: part.value,
+            label: item.label,
+            percentage: mainPercentage,
+            mainId: Number(item.id),
+            mainValue: item.value,
+            legendLabel: item.legendLabel,
+            legendValue: item.legendValue,
+            legendValueRoundingDigits: propOr<SegmentedDataItem, number>(
+              legendValueRoundingDigits,
+              'legendValueRoundingDigits',
+            )(item),
+            color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
+            id: `${itemIndex}${partIndex}`,
+            partIndex,
+            partLabel: part.label,
+            partPercentage: Number(partPercentage),
+            partValue: part.value,
+            partLegendValue: part.legendValue,
+          });
         });
-      });
     } else {
       balanceDataForTheGraph.push(newMainItem);
     }

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

@@ -98,3 +98,26 @@ export const WithoutDimensions = {
     showDimensions: false,
   },
 };
+
+export const WithTotalTooltip = {
+  ...StoryTemplate,
+  args: {
+    titleTooltipOptions: [
+      {
+        value: 10500,
+        label: 'Option 1',
+        dimension: 'USDT',
+      },
+      {
+        value: 5000,
+        label: 'Option 2',
+        dimension: 'USDT',
+      },
+      {
+        value: 2237,
+        label: 'Option 3',
+        dimension: 'USDT',
+      },
+    ],
+  },
+};

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

@@ -100,6 +100,89 @@ export const balanceData: SegmentedDataSet = [
   },
 ];
 
+export const balanceDataNullable: SegmentedDataSet = [
+  {
+    id: 1,
+    value: 5843.37,
+    legendValue: 5843.37 / RATE.BTC,
+    legendLabel: 'BTC',
+    label: 'BTC',
+    legendValueRoundingDigits: 6,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 5843.37,
+        legendValue: 5843.37 / RATE.BTC,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+  {
+    id: 2,
+    value: 5249.25,
+    legendValue: 5249.25 / RATE.ETH,
+    legendLabel: 'ETH',
+    label: 'ETH',
+    legendValueRoundingDigits: 2,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 2800,
+        legendValue: 2800 / RATE.ETH,
+      },
+      {
+        label: 'Option 2',
+        value: 2449.25,
+        legendValue: 2449.25 / RATE.ETH,
+      },
+    ],
+  },
+  {
+    id: 3,
+    value: 3825.55,
+    legendValue: 3825.55 / RATE.FDUSD,
+    legendLabel: 'FDUSD',
+    label: 'FDUSD',
+    legendValueRoundingDigits: 2,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 3825.55,
+        legendValue: 3825.55 / RATE.FDUSD,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+  {
+    id: 4,
+    value: 2818.83,
+    legendValue: 2818.83 / RATE.USDT,
+    label: 'Other',
+    legendLabel: 'USDT',
+    legendValueRoundingDigits: 0,
+    parts: [
+      {
+        label: 'Option 1',
+        value: 2818.83,
+        legendValue: 2818.83 / RATE.USDT,
+      },
+      {
+        label: 'Option 2',
+        value: 0,
+        legendValue: 0,
+      },
+    ],
+  },
+];
+
 export const balanceTotalAmount = balanceData
   .map((item) => Number(item.value))
   .reduce((acc, currentValue) => acc + currentValue, 0);