@scality/core-ui 0.170.0 → 0.172.0

package/stories/sparkline.stories.tsx

@@ -0,0 +1,168 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sparkline } from '../src/lib/components/sparkline/sparkline.component';
+import { lineColor5, lineColor6 } from '../src/lib/style/theme';
+
+const meta: Meta<typeof Sparkline> = {
+  title: 'Components/Data Display/Charts/Sparkline',
+  component: Sparkline,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    serie: { 
+      control: 'object',
+      description: 'Data series containing array of [timestamp, value] pairs'
+    },
+    startingTimeStamp: { 
+      control: 'number',
+      description: 'Starting timestamp in seconds for the data series'
+    },
+    sampleDuration: { 
+      control: 'number',
+      description: 'Total duration in seconds to cover in the sparkline'
+    },
+    sampleInterval: { 
+      control: 'number',
+      description: 'Interval in seconds between data points'
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 200, height: 100 }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof Sparkline>;
+
+// Sample data for different scenarios
+const volatileData: [number, number][] = [
+  [1740405600, 25.32],
+  [1740406320, 78.45],
+  [1740407040, 45.67],
+  [1740407760, 15.67],
+  [1740408480, 92.33],
+  [1740409200, 8.91],
+  [1740409920, 88.76],
+  [1740410640, 34.22],
+  [1740411360, 67.89],
+  [1740412080, 12.45],
+  [1740412800, 95.67],
+];
+
+const trendingUpData: [number, number][] = [
+  [1740405600, 10.5],
+  [1740406320, 15.2],
+  [1740407040, 20.3],
+  [1740407760, 18.9],
+  [1740408480, 22.1],
+  [1740409200, 28.7],
+  [1740409920, 35.4],
+  [1740410640, 42.8],
+  [1740411360, 48.3],
+  [1740412080, 55.9],
+  [1740412800, 62.1],
+];
+
+const trendingDownData: [number, number][] = [
+  [1740405600, 70.5],
+  [1740406320, 65.2],
+  [1740407040, 58.9],
+  [1740407760, 58.9],
+  [1740408480, 52.1],
+  [1740409200, 48.7],
+  [1740409920, 35.4],
+  [1740410640, 32.8],
+  [1740411360, 28.3],
+  [1740412080, 25.9],
+  [1740412800, 22.1],
+];
+
+const flatData: [number, number|null][] = [
+  [1740405600, 50.0],
+  [1740406320, 50.0],
+  [1740407760, 50.0],
+  [1740409200, 50.0],
+  [1740409920, 50.0],
+  [1740410640, 50.0],
+  [1740412080, 50.0],
+  [1740412800, 50.0],
+];
+
+export const Default: Story = {
+  args: {
+    serie: {
+      data: volatileData,
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline displaying highly volatile data with frequent peaks and valleys.',
+      },
+    },
+  },
+};
+
+export const TrendingUp: Story = {
+  args: {
+    serie: {
+      data: trendingUpData,
+      color: lineColor5, // Optional custom color (green)
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline showing a clear upward trend over time.',
+      },
+    },
+  },
+};
+
+export const TrendingDown: Story = {
+  args: {
+    serie: {
+      data: trendingDownData,
+      color: lineColor6,
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline illustrating a downward trend over time.',
+      },
+    },
+  },
+};
+
+export const FlatWithMissingData: Story = {
+  args: {
+    serie: {
+      data: flatData,
+    },
+    startingTimeStamp: 1740405600,
+    sampleDuration: 7200,
+    sampleInterval: 720,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Sparkline representing stable data with some missing values.',
+      },
+    },
+  },
+};

package/dist/components/barchartv2/ChartTooltip.d.ts

@@ -1,14 +0,0 @@
-import { BarchartBars, BarchartTooltipFn, CategoryType, TimeType } from './Barchart.component';
-import { TooltipContentProps } from 'recharts';
-export declare const ChartTooltipContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ChartTooltipItem: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
-    isHovered: boolean;
-}, never>;
-export declare const ChartTooltip: <T extends BarchartBars>({ type, tooltipProps, colorSet, hoveredValue, tooltip, }: {
-    type: TimeType | CategoryType;
-    tooltipProps: TooltipContentProps<number, string>;
-    colorSet?: Record<string, string>;
-    hoveredValue: string | undefined;
-    tooltip?: BarchartTooltipFn<T>;
-}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-//# sourceMappingURL=ChartTooltip.d.ts.map

package/dist/components/barchartv2/ChartTooltip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ChartTooltip.d.ts","sourceRoot":"","sources":["../../../src/lib/components/barchartv2/ChartTooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,YAAY,EACZ,QAAQ,EACT,MAAM,sBAAsB,CAAC;AAI9B,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAG/C,eAAO,MAAM,qBAAqB,yGAYjC,CAAC;AAEF,eAAO,MAAM,gBAAgB;eAA2B,OAAO;SAM9D,CAAC;AAEF,eAAO,MAAM,YAAY,GAAI,CAAC,SAAS,YAAY,4DAMhD;IACD,IAAI,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC9B,YAAY,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAClC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,OAAO,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC;CAChC,iIAwDA,CAAC"}

package/dist/components/barchartv2/ChartTooltip.js

@@ -1,41 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import styled from 'styled-components';
-import { spacing, Stack, Wrap } from '../../spacing';
-import { Text } from '../text/Text.component';
-import { fontSize, fontWeight } from '../../style/theme';
-import { LegendShape } from '../chartlegend/ChartLegend';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { getCurrentPoint } from './utils';
-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 `
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: ${({ isHovered }) => isHovered ? fontWeight.bold : fontWeight.base};
-`;
-export const ChartTooltip = ({ type, tooltipProps, colorSet, hoveredValue, tooltip, }) => {
-    const { active } = tooltipProps;
-    if (!active) {
-        return null;
-    }
-    const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
-    if (tooltip) {
-        return tooltip(currentPoint);
-    }
-    return (_jsxs(ChartTooltipContainer, { children: [_jsx(Text, { isEmphazed: true, children: type.type === 'time' ? (_jsxs(_Fragment, { children: [_jsx(FormattedDateTime, { format: "long-date", value: new Date(currentPoint.category) }), ' ', type.type === 'time' &&
-                            type.timeRange.interval < 24 * 60 * 60 * 1000 && (_jsx(FormattedDateTime, { format: "time", value: new Date(currentPoint.category) }))] })) : (currentPoint.category) }), _jsx(Stack, { direction: "vertical", gap: "r8", style: { width: '100%' }, children: currentPoint.values.map((value) => {
-                    return (_jsxs(Wrap, { gap: spacing.r32, children: [_jsxs(ChartTooltipItem, { isHovered: value.isHovered, children: [colorSet && (_jsx(LegendShape, { color: colorSet[value.label], shape: "rectangle", chartColors: colorSet })), value.label] }), _jsx(ChartTooltipItem, { isHovered: value.isHovered, children: value.value })] }, value.label));
-                }) })] }));
-};

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

@@ -1,106 +0,0 @@
-import styled from 'styled-components';
-import { spacing, Stack, Wrap } from '../../spacing';
-import { Text } from '../text/Text.component';
-import {
-  BarchartBars,
-  BarchartTooltipFn,
-  CategoryType,
-  TimeType,
-} from './Barchart.component';
-import { fontSize, fontWeight } from '../../style/theme';
-import { LegendShape } from '../chartlegend/ChartLegend';
-import { FormattedDateTime } from '../date/FormattedDateTime';
-import { TooltipContentProps } from 'recharts';
-import { getCurrentPoint } from './utils';
-
-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,
-  tooltipProps,
-  colorSet,
-  hoveredValue,
-  tooltip,
-}: {
-  type: TimeType | CategoryType;
-  tooltipProps: TooltipContentProps<number, string>;
-  colorSet?: Record<string, string>;
-  hoveredValue: string | undefined;
-  tooltip?: BarchartTooltipFn<T>;
-}) => {
-  const { active } = tooltipProps;
-
-  if (!active) {
-    return null;
-  }
-
-  const currentPoint = getCurrentPoint(tooltipProps, hoveredValue);
-  if (tooltip) {
-    return tooltip(currentPoint);
-  }
-
-  return (
-    <ChartTooltipContainer>
-      <Text isEmphazed>
-        {type.type === 'time' ? (
-          <>
-            <FormattedDateTime
-              format="long-date"
-              value={new Date(currentPoint.category)}
-            />{' '}
-            {type.type === 'time' &&
-              type.timeRange.interval < 24 * 60 * 60 * 1000 && (
-                <FormattedDateTime
-                  format="time"
-                  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} gap={spacing.r32}>
-              <ChartTooltipItem isHovered={value.isHovered}>
-                {colorSet && (
-                  <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>
-  );
-};