@scality/core-ui 0.171.0 → 0.172.0

package/src/lib/components/linetimeseriechart/linetimeseriechart.component.tsx

@@ -12,7 +12,7 @@ import {
 import { useCallback, useMemo, useRef, useState } from 'react';
 import styled, { useTheme } from 'styled-components';
 import { spacing } from '../../spacing';
-import { fontSize, fontWeight } from '../../style/theme';
+import { fontSize } from '../../style/theme';
 import { Box } from '../box/Box';
 import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
 import { FormattedDateTime } from '../date/FormattedDateTime';
@@ -25,6 +25,13 @@ import { Loader } from '../loader/Loader.component';
 import { ChartTitleText, SmallerText } from '../text/Text.component';
 import { Tooltip as TooltipComponent } from '../tooltip/Tooltip.component';
 import { formatXAxisLabel } from './utils';
+import {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from '../charttooltip/ChartTooltip';
+import { LegendShape } from '../chartlegend/ChartLegend';
 
 const LineTemporalChartWrapper = styled.div`
   display: flex;
@@ -38,61 +45,6 @@ const ChartHeader = styled.div`
   align-items: center;
 `;
 
-export const TooltipContainer = styled.div`
-  background-color: ${(props) => props.theme.backgroundLevel1};
-  padding: ${spacing.r8};
-  border: 1px solid ${(props) => props.theme.border};
-  border-radius: 4px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  max-width: 250px;
-`;
-
-export const TooltipTime = styled.div`
-  margin-bottom: ${spacing.r8};
-  color: ${(props) => props.theme.textPrimary};
-  font-size: ${fontSize.smaller};
-  font-weight: ${fontWeight.bold};
-  text-align: center;
-`;
-
-const TooltipValue = styled.div`
-  font-size: ${fontSize.smaller};
-  margin-top: 4px;
-  color: ${(props) => props.theme.textSecondary};
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  width: 100%;
-`;
-
-const TooltipLegend = styled.div<{ color: string }>`
-  width: 12px;
-  height: 3px;
-  background-color: ${(props) => props.color};
-  margin-right: 8px;
-  flex-shrink: 0;
-  margin-top: 8px;
-`;
-
-const TooltipLeftGroup = styled.div`
-  display: flex;
-  align-items: flex-start;
-  min-width: 0;
-  flex: 1;
-`;
-
-const TooltipName = styled.div`
-  word-wrap: break-word;
-  word-break: break-word;
-  flex: 1;
-`;
-
-const TooltipInstanceValue = styled.div`
-  margin-left: 16px;
-  flex-shrink: 0;
-  text-align: right;
-`;
-
 export type Serie = {
   // the name of the resource
   resource: string;
@@ -152,12 +104,13 @@ export type LineChartProps = (
   ) => React.ReactNode;
 };
 
-const CustomTooltip = ({
+const LineTimeSerieChartTooltip = ({
   unitLabel,
   timeFormat,
   isChartActive,
   tooltipProps,
   renderTooltip,
+  hoveredValue,
 }: {
   tooltipProps: TooltipContentProps<number, string>;
   unitLabel?: string;
@@ -168,8 +121,9 @@ const CustomTooltip = ({
     unitLabel?: string,
     timeFormat?: 'date-time' | 'date',
   ) => React.ReactNode;
+  hoveredValue?: string;
 }) => {
-  const { active, payload, label, ...rest } = tooltipProps;
+  const { active, payload, label } = tooltipProps;
 
   if (!active || !payload || !payload.length || !label || !isChartActive)
     return null;
@@ -193,8 +147,8 @@ const CustomTooltip = ({
   });
 
   return (
-    <TooltipContainer>
-      <TooltipTime>
+    <ChartTooltipContainer>
+      <ChartTooltipHeader>
         <FormattedDateTime
           format={
             timeFormat === 'date-time'
@@ -203,21 +157,35 @@ const CustomTooltip = ({
           }
           value={new Date(label)}
         />
-      </TooltipTime>
-      {sortedPayload.map((entry, index) => (
-        <TooltipValue key={index}>
-          <TooltipLeftGroup>
-            <TooltipLegend color={entry.color} />
-            <TooltipName>{entry.name}</TooltipName>
-          </TooltipLeftGroup>
-          <TooltipInstanceValue>
-            {!Number.isFinite(entry.value)
-              ? '-'
-              : `${entry.value.toFixed(2)} ${unitLabel}`}
-          </TooltipInstanceValue>
-        </TooltipValue>
-      ))}
-    </TooltipContainer>
+      </ChartTooltipHeader>
+      <ChartTooltipItemsContainer>
+        {sortedPayload.map((entry, index) => {
+          const legendIcon = (
+            <LegendShape
+              color={entry.color}
+              shape="line"
+              chartColors={{ [entry.color]: entry.color }}
+            />
+          );
+
+          const isHovered = entry.name === hoveredValue;
+
+          const formattedValue = !Number.isFinite(entry.value)
+            ? '-'
+            : `${entry.value.toFixed(2)} ${unitLabel}`;
+
+          return (
+            <ChartTooltipItem
+              key={index}
+              label={entry.name}
+              value={formattedValue}
+              legendIcon={legendIcon}
+              isHovered={isHovered}
+            />
+          );
+        })}
+      </ChartTooltipItemsContainer>
+    </ChartTooltipContainer>
   );
 };
 
@@ -249,7 +217,9 @@ export function LineTimeSerieChart({
   const chartRef = useRef(null);
 
   const [isChartActive, setIsChartActive] = useState(false);
-
+  const [hoveredValue, setHoveredValue] = useState<string | undefined>(
+    undefined,
+  );
   const chartData = useMemo(() => {
     // Guard against empty/undefined series data
     if (!series || (Array.isArray(series) && series.length === 0)) {
@@ -560,12 +530,13 @@ export function LineTimeSerieChart({
             />
             <Tooltip
               content={(props: TooltipContentProps<number, string>) => (
-                <CustomTooltip
+                <LineTimeSerieChartTooltip
                   unitLabel={unitLabel}
                   timeFormat={timeFormat}
                   renderTooltip={renderTooltip}
                   tooltipProps={props}
                   isChartActive={isChartActive}
+                  hoveredValue={hoveredValue}
                 />
               )}
             />
@@ -589,6 +560,8 @@ export function LineTimeSerieChart({
                     stroke={colorMapping[resource]}
                     dot={false}
                     isAnimationActive={false}
+                    onMouseEnter={() => setHoveredValue(label)}
+                    onMouseLeave={() => setHoveredValue(undefined)}
                   />
                 );
               }),

package/src/lib/components/sparkline/sparkline.component.tsx

@@ -0,0 +1,54 @@
+import { useMemo } from "react";
+import { Area, AreaChart, CartesianGrid, ResponsiveContainer } from "recharts";
+import { useTheme } from "styled-components";
+import { chartColors } from "../../style/theme";
+import { addMissingDataPoint } from "../linetemporalchart/ChartUtil";
+
+type SparklineProps = {
+  serie: {
+    data: [number, number|null][],
+    color?: string, // exa color code like '#ff0000'
+  },
+  startingTimeStamp: number,
+  sampleDuration: number,
+  sampleInterval: number
+};
+
+/**
+ * Sparkline is a simple dynamically sized area chart.
+ * Used to show trends in data over time.
+ */
+export function Sparkline({ serie, startingTimeStamp, sampleDuration, sampleInterval }: SparklineProps) {
+  const data = useMemo(
+    () => {
+      const dataMdp = addMissingDataPoint(serie.data, startingTimeStamp, sampleDuration, sampleInterval);
+      return dataMdp.map(([x, y]) => ({ x, y }));
+    },
+    [serie.data]
+  );
+  const color = serie.color ?? chartColors.lineColor1;
+  const strokeGridColor = useTheme().border;
+
+  return (
+    <ResponsiveContainer>
+      <AreaChart data={data}>
+        <defs>
+          <linearGradient id={`gradient-${color}`} x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor={color} stopOpacity={0.7} />
+            <stop offset="100%" stopColor={color} stopOpacity={0.1} />
+          </linearGradient>
+        </defs>
+      <CartesianGrid horizontal={false} stroke={strokeGridColor} strokeOpacity={0.5} />
+      <Area
+        type="linear"
+        dataKey="y"
+        stroke={color}
+        fill={`url(#gradient-${color})`}
+        dot={false}
+        activeDot={false}
+        isAnimationActive={false}
+      />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+}

package/src/lib/components/text/Text.component.tsx

@@ -8,7 +8,8 @@ export type TextVariant =
   | 'Basic'
   | 'Smaller'
   | 'Larger'
-  | 'Large';
+  | 'Large'
+  | 'Small';
 
 type Status = 'unknown' | 'healthy' | 'warning' | 'critical';
 type Props = {
@@ -158,7 +159,12 @@ export const Text = styled.span<{
   line-height: 1.4;
   letter-spacing: 2%;// to be defined, percentage value is not valid
       `
-          : `
+          : props.variant === 'Small'
+            ? `
+  font-size: 0.85rem;
+  line-height: 1.4;
+      `
+            : `
   font-size: 1rem;
   line-height: ${spacing.r24};
       `}

package/src/lib/next.ts

@@ -21,11 +21,18 @@ export {
   BarchartSortFn,
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
-export { ChartTooltip } from './components/barchartv2/ChartTooltip';
+export { BarchartTooltip } from './components/barchartv2/BarchartTooltip';
 export {
   ChartLegendWrapper,
   useChartId,
 } from './components/chartlegend/ChartLegendWrapper';
 export { ChartLegend } from './components/chartlegend/ChartLegend';
 export { LineTimeSerieChart } from './components/linetimeseriechart/linetimeseriechart.component';
+export {
+  ChartTooltipContainer,
+  ChartTooltipItem,
+  ChartTooltipHeader,
+  ChartTooltipItemsContainer,
+} from './components/charttooltip/ChartTooltip';
 export { CoreUITheme } from './style/theme';
+export { GlobalHealthBar } from './components/globalhealthbar/GlobalHealthBarRecharts.component';

package/stories/GlobalHealthBar/globalhealthbarRecharts.stories.tsx

@@ -0,0 +1,145 @@
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import {
+  Alert,
+  GlobalHealthBar,
+  GlobalHealthProps,
+} from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+
+import {
+  DATE_FORMATER,
+  TIME_SECOND_FORMATER,
+} from '../../src/lib/components/date/FormattedDateTime';
+import {
+  MetricsTimeSpanProvider,
+  useMetricsTimeSpan,
+} from '../../src/lib/next';
+import { Dropdown, Icon, Stack } from '../../src/lib';
+import {
+  LAST_ONE_HOUR,
+  LAST_SEVEN_DAYS,
+  LAST_TWENTY_FOUR_HOURS,
+  SAMPLE_DURATION_LAST_ONE_HOUR,
+  SAMPLE_DURATION_LAST_SEVEN_DAYS,
+  SAMPLE_DURATION_LAST_TWENTY_FOUR_HOURS,
+} from '../../src/lib/components/constants';
+
+type Story = StoryObj<GlobalHealthProps>;
+
+const meta: Meta<GlobalHealthProps> = {
+  title: 'Components/GlobalHealthBarRecharts',
+  component: GlobalHealthBar,
+};
+export default meta;
+
+const start = '2021-01-30T23:00:00Z'; // UTC time
+const end = '2021-02-06T23:00:00Z';
+const start2 = '2021-01-29T14:00:00Z';
+const end2 = '2021-02-05T14:00:00Z';
+const startLast24h = '2021-02-01T00:00:00Z';
+const endLast24h = '2021-02-02T00:00:00Z';
+const startLastHour = '2021-02-01T00:00:00Z';
+const endLastHour = '2021-02-01T01:00:00Z';
+
+const alerts = [
+  {
+    id: '0',
+    severity: 'unavailable',
+    startsAt: '2021-02-01T00:00:00Z',
+    endsAt: '2021-02-01T01:00:00Z',
+    description: 'Global health unavailable',
+  },
+  {
+    id: '1',
+    severity: 'critical',
+    startsAt: '2021-02-01T11:00:00Z',
+    endsAt: '2021-02-02T11:00:00Z',
+    description: 'Global health critical',
+  },
+  {
+    id: '2',
+    severity: 'warning',
+    startsAt: '2021-02-01T23:00:00Z',
+    endsAt: '2021-02-02T22:00:00Z',
+    description: 'Global health warning',
+  },
+  {
+    severity: 'critical',
+    startsAt: '2021-02-03T00:00:00Z',
+    endsAt: '2021-02-04T00:00:00Z',
+    description:
+      'Global health critical Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '4',
+    severity: 'warning',
+    startsAt: '2021-02-04T10:00:00Z',
+    endsAt: '2021-02-06T00:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '5',
+    severity: 'warning',
+    startsAt: '2021-02-06T12:00:00Z',
+    endsAt: '2021-02-07T00:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '6',
+    severity: 'warning',
+    startsAt: '2021-01-30T22:00:00Z',
+    endsAt: '2021-01-30T23:00:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+  {
+    id: '7',
+    severity: 'warning',
+    startsAt: '2021-02-01T00:47:30Z',
+    endsAt: '2021-02-01T01:30:00Z',
+    description:
+      'Global health warning Long descritpion so it takes more space. Add more text to see how it wraps.',
+  },
+];
+
+export const Default: Story = {
+  args: {
+    start: new Date(start),
+    end: new Date(end),
+    alerts: alerts as Alert[],
+  },
+};
+
+export const Last24Hours: Story = {
+  render: () => {
+    return (
+      <div style={{ width: '350px', height: '1000px', overflow: 'hidden' }}>
+        <div style={{ width: '500px', height: '400px' }} />
+        <GlobalHealthBar
+          start={new Date(startLast24h)}
+          end={new Date(endLast24h)}
+          alerts={alerts as Alert[]}
+          id="1"
+        />
+      </div>
+    );
+  },
+};
+
+export const LastHour: Story = {
+  render: () => {
+    return (
+      <div style={{ width: '250px', height: '1000px', overflow: 'hidden' }}>
+        <div style={{ width: '400px', height: '400px' }} />
+        <GlobalHealthBar
+          start={new Date(startLastHour)}
+          end={new Date(endLastHour)}
+          alerts={alerts as Alert[]}
+          id="1"
+        />
+      </div>
+    );
+  },
+};

package/stories/GlobalHealthBar/globalheathbarrecharts.guideline.mdx

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/blocks';
+import { GlobalHealthBar } from '../../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+import * as GlobalHealthBarStories from './globalhealthbarRecharts.stories';
+
+<Meta name="Guideline" of={GlobalHealthBarStories} />

package/stories/InlineInput/InlineInput.stories.tsx

@@ -26,7 +26,13 @@ export default {
         });
       },
     });
-    return <InlineInput {...args} changeMutation={changeMutation} />;
+    return (
+      <InlineInput
+        id="inline-input-story"
+        {...args}
+        changeMutation={changeMutation}
+      />
+    );
   },
 };
 

package/stories/globalhealthbar.stories.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
+import { GlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBarRecharts.component';
+import { GlobalHealthBar as VegaGlobalHealthBar } from '../src/lib/components/globalhealthbar/GlobalHealthBar.component';
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
 import { Wrapper } from './common';
+import { Stack } from '../src/lib/spacing';
 const alerts = [
   {
     id: '1',
@@ -34,10 +36,17 @@ const alerts = [
   {
     id: '5',
     severity: 'warning',
-    startsAt: '2021-02-06T12:00:00Z',
+    startsAt: '2021-02-06T10:00:00Z',
     endsAt: '2021-02-06T20:00:00Z',
     description: 'Global health warning',
   },
+  {
+    id: '6',
+    severity: 'warning',
+    startsAt: '2021-02-06T12:00:00Z',
+    endsAt: '2021-02-06T22:30:00Z',
+    description: 'Global health warning',
+  },
 ];
 const alertsLast24h = [
   {
@@ -75,7 +84,7 @@ const alertRetrieveBefore = [
     id: '2',
     severity: 'critical',
     startsAt: '2021-02-05T23:00:00Z',
-    endsAt: '2021-02-06T21:00:00Z',
+    endsAt: '2021-02-07T00:00:00Z',
     description: 'Global health warning',
   },
 ];
@@ -105,13 +114,18 @@ const endNotFirstDay = '2021-03-01T23:00:00Z';
 
 export default {
   title: 'Components/Data Display/Charts/GlobalHealthBar',
-  component: GlobalHealthBar,
+  component: (props) => (
+    <Stack direction="vertical">
+      <GlobalHealthBar {...props} />
+      <VegaGlobalHealthBar {...props} />
+    </Stack>
+  ),
   decorators: [
     (story) => (
       <Wrapper
         style={{ minHeight: '50vh', display: 'flex', alignItems: 'center' }}
       >
-        <div style={{ width: '500px' }}>
+        <div style={{ width: '500px', height: '400px' }}>
           <SyncedCursorCharts>{story()}</SyncedCursorCharts>
         </div>
       </Wrapper>
@@ -120,6 +134,7 @@ export default {
   args: {
     start,
     end,
+    width: 500,
   },
   argTypes: {
     start: {
@@ -135,6 +150,7 @@ export const GlobalHealthComponentDemo = {
   args: {
     id: 'vis_globalhealth',
     alerts,
+    width: 500,
   },
 };
 
@@ -144,12 +160,14 @@ export const GlobalHealthLast24Hours = {
     alerts: alertsLast24h,
     start: startLast24h,
     end: endLast24h,
+    width: 500,
   },
 };
 export const GlobalHealthEmpty = {
   args: {
     id: 'vis_globalhealth_empty',
     alerts: emptyAlert,
+    width: 500,
   },
 };
 
@@ -157,6 +175,7 @@ export const AlertTriggeredEarlierThanTheStartingTime = {
   args: {
     id: 'vis_globalhealth_alert_retrieve_before',
     alerts: alertRetrieveBefore,
+    width: 500,
   },
 };
 
@@ -167,5 +186,6 @@ export const FirstLabel = {
     alerts: alertTriggerNotFirstDay,
     start: startNotFirstDay,
     end: endNotFirstDay,
+    width: 500,
   },
 };