@ssa-ui-kit/core 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "1.0.12",
+  "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/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',
@@ -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,12 +15,16 @@ 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,
@@ -33,7 +37,7 @@ export const useData = ({
         legendValueRoundingDigits,
         'legendValueRoundingDigits',
       )(item),
-      color: pieChartColors[itemIndex][0],
+      color: pieChartColorsLocal?.[itemIndex]?.[0],
       id: `${itemIndex}0`,
     };
     balanceDataForTheLegend.push(newMainItem);
@@ -51,7 +55,7 @@ export const useData = ({
             legendValueRoundingDigits,
             'legendValueRoundingDigits',
           )(item),
-          color: pieChartColors[itemIndex][partIndex],
+          color: pieChartColorsLocal?.[itemIndex]?.[partIndex],
           id: `${itemIndex}${partIndex}`,
           partIndex,
           partLabel: part.label,

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

@@ -1,5 +1,6 @@
 import { CommonProps } from '@global-types/emotion';
 import { PieChartLegend, PieChartLegendItem, PieChartProps } from '@components';
+import { TooltipProps } from '@components/Tooltip/types';
 
 type SegmentedDataMainInfo = {
   label: string;
@@ -29,6 +30,12 @@ export interface SegmentedPieChartProps extends CommonProps {
   legendPercentageRoundingDigits?: number;
   showDimensions?: boolean;
   showPercentage?: boolean;
+  titleTooltipOptions?: Array<ChartTitleOption>;
+  tooltipConfig?: Partial<TooltipProps>;
+  renderTitleTooltipContent?: (props: {
+    totalAmount: number;
+    totalDimension: string;
+  }) => React.ReactNode;
 }
 
 export interface BalanceDataForGraph extends PieChartLegendItem {
@@ -51,11 +58,10 @@ export type LegendItemProps = {
   percentage?: number;
   legendValue?: number;
   legendValueRoundingDigits: number;
-} & Pick<
-  SegmentedPieChartProps,
-  | 'showDimensions'
-  | 'legendPercentageRoundingDigits'
-  | 'otherLabel'
-  | 'currency'
-  | 'showPercentage'
->;
+};
+
+export type ChartTitleOption = Pick<BalanceDataForGraph, 'value' | 'label'> & {
+  dimension?: string;
+  legendValueRoundingDigits?: number;
+  legendPercentageRoundingDigits?: number;
+};