@scality/core-ui 0.164.0 → 0.166.0

package/dist/components/text/Text.component.js

@@ -99,7 +99,7 @@ export const GentleEmphaseSecondaryText = styled(SecondaryText) `
     : ''}
 `;
 export const Text = styled.span `
-  color: ${(props) => props.theme[props.color || 'textPrimary']};
+  ${(props) => props.color && `color: ${props.theme[props.color]};`}
   ${(props) => props.variant === 'Larger'
     ? `
   font-size: 1.43rem;

package/dist/components/toast/Toast.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.component.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAY,MAAM,WAYnD,CAAC;AA6DF,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAsB,EACtB,MAAe,EACf,WAAkB,EAClB,QAAe,EACf,IAAsC,EACtC,KAAqB,EACrB,eAAuB,EACvB,KAAK,GACN,EAAE,UAAU,kDAmEZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Toast.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/toast/Toast.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAEnE,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,SAAS,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,qBAAqB,WAAY,MAAM,WAYnD,CAAC;AAsFF,iBAAS,KAAK,CAAC,EACb,IAAI,EACJ,OAAO,EACP,OAAO,EACP,QAAsB,EACtB,MAAe,EACf,WAAkB,EAClB,QAAe,EACf,IAAsC,EACtC,KAAqB,EACrB,eAAuB,EACvB,KAAK,GACN,EAAE,UAAU,kDAmDZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAC"}

package/dist/components/toast/Toast.component.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { motion } from 'framer-motion';
 import { useRef } from 'react';
 import { useTheme } from 'styled-components';
 import { Box } from '../box/Box';
@@ -75,6 +74,29 @@ const ContentContainer = styled.div `
   padding: 0px 16px;
   position: relative;
 `;
+const FadingToast = styled.div `
+  align-items: flex-end;
+  background-color: ${props => props.theme.backgroundLevel1};
+  border: 1px solid ${props => props.theme.border};
+  box-shadow: 0px 4px 10px 4px #000;
+  display: flex;
+  border-radius: 4px;
+  position: relative;
+
+  @keyframes toastEnter {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+const ToastEnter = styled(FadingToast) `
+  animation: toastEnter 0.3s ease forwards;
+`;
 function Toast({ open, message, onClose, position = 'top-right', status = 'info', autoDismiss = true, duration = 5000, icon = _jsx(DefaultIcon, { status: status }), width = DEFAULT_WIDTH, withProgressBar = false, style, }) {
     const ref = useRef(null);
     const { params } = useToastParameters({
@@ -85,7 +107,6 @@ function Toast({ open, message, onClose, position = 'top-right', status = 'info'
     const positionStyle = positionOutput[position];
     const bgColor = useGetBackgroundColor(status);
     const rgbBgColor = useGetRgbBackgroundColor(status);
-    const theme = useTheme();
     if (!open) {
         return null;
     }
@@ -93,14 +114,6 @@ function Toast({ open, message, onClose, position = 'top-right', status = 'info'
             position: 'fixed',
             ...(style || positionStyle),
             width,
-        }, children: [_jsxs(motion.div, { initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: 20 }, transition: { duration: 0.3 }, style: {
-                    alignItems: 'flex-end',
-                    backgroundColor: theme.backgroundLevel1,
-                    border: `1px solid ${theme.border}`,
-                    boxShadow: '0px 4px 10px 4px #000',
-                    display: 'flex',
-                    borderRadius: '4px',
-                    position: 'relative',
-                }, children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close", tooltip: { overlay: 'Close', placement: 'top' } }) })] }, "toast"), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
+        }, children: [_jsxs(ToastEnter, { children: [_jsx(IconContainer, { bgColor: rgbBgColor, children: icon }), _jsx(ContentContainer, { children: _jsx(BasicText, { children: message }) }), _jsx(Box, { display: "flex", alignItems: "center", alignSelf: "stretch", children: _jsx(Button, { icon: _jsx(Icon, { name: "Close", size: "lg", color: "textSecondary" }), onClick: params === null || params === void 0 ? void 0 : params.onClose, "aria-label": "Close", tooltip: { overlay: 'Close', placement: 'top' } }) })] }), withProgressBar && (_jsx(DurationBasedProgressBar, { duration: autoDismiss ? duration : null, color: bgColor }))] }));
 }
 export { Toast };

package/dist/index.d.ts

@@ -61,5 +61,4 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
-export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -61,4 +61,3 @@ export { InfoMessage } from './components/infomessage/InfoMessage.component';
 export { InputList } from './components/inputlist/InputList.component';
 export { InlineInput } from './components/inlineinput/InlineInput';
 export { UnsuccessfulResult } from './components/UnsuccessfulResult.component';
-export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/dist/next.d.ts

@@ -14,6 +14,8 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, BarchartSortFn, BarchartTooltipFn, } from './components/barchartv2/Barchart.component';
+export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
+export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
 //# sourceMappingURL=next.d.ts.map

package/dist/next.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"next.d.ts","sourceRoot":"","sources":["../src/lib/next.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC;AACnD,OAAO,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,UAAU,EAAE,MAAM,4CAA4C,CAAC;AACxE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,sCAAsC,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,wCAAwC,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4DAA4D,CAAC;AAC/F,OAAO,EACL,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,uDAAuD,CAAC;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,MAAM,EAAE,MAAM,0CAA0C,CAAC;AAClE,OAAO,EAAE,cAAc,EAAE,MAAM,wDAAwD,CAAC;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAC3F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,4CAA4C,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,cAAc,EACd,iBAAiB,GAClB,MAAM,4CAA4C,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6CAA6C,CAAC;AACjF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,8DAA8D,CAAC"}

package/dist/next.js

@@ -14,5 +14,7 @@ export { Box } from './components/box/Box';
 export { Input } from './components/inputv2/inputv2';
 export { Accordion } from './components/accordion/Accordion.component';
 export { Barchart, } from './components/barchartv2/Barchart.component';
+export { ChartTooltip } from './components/barchartv2/ChartTooltip';
 export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
+export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scality/core-ui",
-  "version": "0.164.0",
+  "version": "0.166.0",
   "description": "Scality common React component library",
   "author": "Scality Engineering",
   "license": "SEE LICENSE IN LICENSE",
@@ -112,7 +112,6 @@
     "@js-temporal/polyfill": "^0.4.4",
     "@storybook/preview-api": "^8.3.6",
     "downshift": "^7.0.5",
-    "framer-motion": "^4.1.17",
     "polished": "3.4.1",
     "pretty-bytes": "^5.6.0",
     "react-debounce-input": "3.2.2",

package/src/lib/components/barchartv2/Barchart.component.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import { getWrapper } from '../../testUtils';
-import { Barchart } from './Barchart.component';
+import { Barchart, CustomTick, formatDate } from './Barchart.component';
 import { ChartLegendWrapper } from '../chartlegend/ChartLegendWrapper';
+import React from 'react';
 
 const ONE_DAY_IN_MILLISECONDS = 24 * 60 * 60 * 1000;
 const ONE_HOUR_IN_MILLISECONDS = 60 * 60 * 1000;
@@ -362,7 +363,7 @@ describe('Barchart', () => {
     expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
   });
 
-  it('should render header with title, secondary title, right title and help tooltip', async () => {
+  it('should render header with title, secondary title, right title and helpIcon', async () => {
     const { Wrapper } = getWrapper();
     render(
       <Wrapper>
@@ -382,8 +383,103 @@ describe('Barchart', () => {
     expect(screen.getByText('Test Title')).toBeInTheDocument();
     expect(screen.getByText('Test Secondary Title')).toBeInTheDocument();
     expect(screen.getByText('Test Right Title')).toBeInTheDocument();
-    await waitFor(() => {
-      expect(screen.getByLabelText('Test Help Tooltip')).toBeInTheDocument();
+    expect(screen.getByLabelText('Info')).toBeInTheDocument();
+  });
+  describe('formatDate', () => {
+    it('should render the CustomTick component with over a day interval', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: 2 * ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('Fri05Jul 10:00')).toBeInTheDocument();
+    });
+
+    it('should render the CustomTick component with day format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_DAY_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('Fri05Jul')).toBeInTheDocument();
+    });
+    it('should render the CustomTick component with hour format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: ONE_HOUR_IN_MILLISECONDS,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(screen.getByText('10:00')).toBeInTheDocument();
+    });
+    it('should render the CustomTick component with minute format', () => {
+      const { Wrapper } = getWrapper();
+      render(
+        <Wrapper>
+          <CustomTick
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date('2024-07-05'),
+                endDate: new Date('2024-07-07'),
+                interval: 1000 * 30,
+              },
+            }}
+            x={100}
+            y={100}
+            payload={{ value: new Date('2024-07-05T10:00:00').getTime() }}
+            visibleTicksCount={10}
+            width={100}
+          />
+        </Wrapper>,
+      );
+      expect(
+        screen.getByText(new Date('2024-07-05T10:00:00').getTime()),
+      ).toBeInTheDocument();
     });
   });
 });

package/src/lib/components/barchartv2/Barchart.component.tsx

@@ -20,6 +20,7 @@ import { Loader } from '../loader/Loader.component';
 import { Text } from '../text/Text.component';
 import { renderTooltipContent, UnitRange, useChartData } from './utils';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
+import { FormattedDateTime } from '../date/FormattedDateTime';
 
 const CHART_CONSTANTS = {
   TICK_WIDTH_OFFSET: 5,
@@ -32,7 +33,7 @@ const CHART_CONSTANTS = {
     top: 0,
     bottom: 0,
   },
-} as const;
+};
 
 /* ---------------------------------- TYPE ---------------------------------- */
 
@@ -74,7 +75,7 @@ export type BarchartProps<T extends BarchartBars> = {
   tooltip?: BarchartTooltipFn<T>;
   defaultSort?: BarchartSortFn<T>;
   unitRange?: UnitRange;
-  helpTooltip?: string;
+  helpTooltip?: React.ReactNode;
   stacked?: boolean;
   /**
    * Sort the bars by default or by legend order
@@ -95,20 +96,53 @@ interface CustomTickProps {
   x: number;
   y: number;
   payload: {
-    value: string | number;
+    value: number;
   };
   visibleTicksCount: number;
   width: number;
+  type: TimeType;
 }
 
 /* ---------------------------------- COMPONENTS ---------------------------------- */
 
-const CustomTick = ({
+/**
+ * Formats a date based on the interval
+ * @param timestamp - Timestamp
+ * @param interval - Interval in milliseconds
+ * @returns Formatted string
+ */
+export const formatDate = (
+  timestamp: number,
+  interval: number,
+): React.ReactNode => {
+  const date = new Date(timestamp);
+  // More than 24 hours interval - use day and time format
+  if (interval > 24 * 60 * 60 * 1000) {
+    return (
+      <>
+        <FormattedDateTime format="chart-date" value={date} />{' '}
+        <FormattedDateTime format="time" value={date} />
+      </>
+    );
+  } else if (interval === 24 * 60 * 60 * 1000) {
+    // Daily interval - use day format
+    return <FormattedDateTime format="chart-date" value={date} />;
+  } else if (interval >= 60 * 1000) {
+    //Hourly and minute intervals - use minute format
+    return <FormattedDateTime format="time" value={date} />;
+  } else {
+    // minute interval or less - use full timestamp
+    return timestamp;
+  }
+};
+
+export const CustomTick = ({
   x,
   y,
   payload,
   visibleTicksCount,
   width,
+  type,
 }: CustomTickProps) => {
   const theme = useTheme();
   const tickWidth =
@@ -124,9 +158,12 @@ const CustomTick = ({
       overflow="visible"
     >
       <ConstrainedText
+        color="textSecondary"
         text={
-          <Text variant="Smaller" color="textSecondary">
-            {String(payload.value)}
+          <Text variant="Smaller">
+            {type.type === 'time'
+              ? formatDate(payload.value, type.timeRange.interval)
+              : String(payload.value)}
           </Text>
         }
         centered
@@ -157,16 +194,14 @@ const ChartHeader = ({
 }: {
   title?: string;
   secondaryTitle?: string;
-  helpTooltip?: string;
+  helpTooltip?: React.ReactNode;
   rightTitle?: React.ReactNode;
 }) => {
   return (
     <Wrap>
       <Stack gap="r4">
         <Text variant="ChartTitle">{title}</Text>
-        {helpTooltip && (
-          <IconHelp tooltipMessage={helpTooltip} title={helpTooltip} />
-        )}
+        {helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
 
         {secondaryTitle && (
           <Text
@@ -330,7 +365,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
             />
             <XAxis
               dataKey="category"
-              tick={(props) => <CustomTick {...props} />}
+              tick={(props) => <CustomTick {...props} type={type} />}
               type="category"
               interval={0}
               allowDataOverflow={true}

package/src/lib/components/barchartv2/ChartTooltip.tsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import { spacing, Stack, Wrap } from '../../spacing';
+import { Text } from '../text/Text.component';
+import { BarchartBars } from './Barchart.component';
+import { fontSize, fontWeight } from '../../style/theme';
+import { LegendShape } from '../chartlegend/ChartLegend';
+import { FormattedDateTime } from '../date/FormattedDateTime';
+
+export const ChartTooltipContainer = styled.div`
+  background-color: ${({ theme }) => theme.backgroundLevel1};
+  padding: ${spacing.r4} ${spacing.r8};
+  border-radius: 4px;
+  width: max-content;
+  max-width: 40rem;
+  border: 1px solid ${({ theme }) => theme.border};
+  display: flex;
+  font-size: ${fontSize.small};
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+`;
+
+export const ChartTooltipItem = styled.div<{ isHovered: boolean }>`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: ${({ isHovered }) =>
+    isHovered ? fontWeight.bold : fontWeight.base};
+`;
+
+export const ChartTooltip = <T extends BarchartBars>({
+  type,
+  currentPoint,
+  colorSet,
+}: {
+  type: 'time' | 'category';
+  currentPoint: {
+    category: string | number;
+    values: { label: T[number]['label']; value: number; isHovered: boolean }[];
+  };
+  colorSet: Record<string, string>;
+}) => {
+  return (
+    <ChartTooltipContainer>
+      <Text isEmphazed>
+        {type === 'time' ? (
+          <FormattedDateTime
+            format="long-date"
+            value={new Date(currentPoint.category)}
+          />
+        ) : (
+          currentPoint.category
+        )}
+      </Text>
+      <Stack direction="vertical" gap="r8" style={{ width: '100%' }}>
+        {currentPoint.values.map((value) => {
+          return (
+            <Wrap key={value.label}>
+              <ChartTooltipItem isHovered={value.isHovered}>
+                <LegendShape
+                  color={colorSet[value.label as keyof typeof colorSet]}
+                  shape="rectangle"
+                  chartColors={colorSet}
+                />
+                {value.label}
+              </ChartTooltipItem>
+              <ChartTooltipItem isHovered={value.isHovered}>
+                {value.value}
+              </ChartTooltipItem>
+            </Wrap>
+          );
+        })}
+      </Stack>
+    </ChartTooltipContainer>
+  );
+};