@scality/core-ui 0.162.0 → 0.164.0

package/src/lib/index.ts

@@ -82,3 +82,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';

package/src/lib/next.ts

@@ -21,3 +21,5 @@ export {
   BarchartSortFn,
   BarchartTooltipFn,
 } from './components/barchartv2/Barchart.component';
+export { ChartLegendWrapper } from './components/chartlegend/ChartLegendWrapper';
+export { ChartLegend } from './components/chartlegend/ChartLegend';

package/src/lib/style/theme.ts

@@ -1,3 +1,4 @@
+import { lighten, darken } from 'polished';
 //== Colors
 export const hotPink = '#E40046';
 export const pink = '#EB4962';
@@ -291,3 +292,31 @@ export const navbarItemWidth = '4.286rem';
 //sidebar
 export const sidebarItemHeight = spacing.sp40;
 export const sidebarWidth = spacing.sp40;
+
+// We use 8 main color from the palette and decline them (lighter/ darker) when we have more than 8 datasets
+export const lineTimeSeriesColorRange = [
+  lineColor1,
+  lineColor2,
+  lineColor3,
+  lineColor4,
+  lineColor5,
+  lineColor6,
+  lineColor7,
+  lineColor8,
+  lighten(0.3, lineColor1),
+  lighten(0.3, lineColor2),
+  lighten(0.3, lineColor3),
+  lighten(0.3, lineColor4),
+  lighten(0.3, lineColor5),
+  lighten(0.3, lineColor6),
+  lighten(0.3, lineColor7),
+  lighten(0.3, lineColor8),
+  darken(0.2, lineColor1),
+  darken(0.2, lineColor2),
+  darken(0.2, lineColor3),
+  darken(0.2, lineColor4),
+  darken(0.3, lineColor5),
+  darken(0.3, lineColor6),
+  darken(0.3, lineColor7),
+  darken(0.3, lineColor8),
+];

package/stories/BarChart/barchart.stories.tsx

@@ -10,13 +10,10 @@ import {
 import { Button } from '../../src/lib/components/buttonv2/Buttonv2.component';
 import { Text } from '../../src/lib/components/text/Text.component';
 import { spacing, Stack, Wrap } from '../../src/lib/spacing';
-import {
-  CoreUITheme,
-  lineColor1,
-  lineColor2,
-  lineColor3,
-} from '../../src/lib/style/theme';
+import { CoreUITheme } from '../../src/lib/style/theme';
 import { Wrapper } from '../common';
+import { ChartLegendWrapper } from '../../src/lib/components/chartlegend/ChartLegendWrapper';
+import { ChartLegend } from '../../src/lib/components/chartlegend/ChartLegend';
 
 type Story = StoryObj<typeof Barchart>;
 
@@ -57,14 +54,17 @@ export const Playground: Story = {
       },
     ] as const;
     return (
-      <Barchart
-        type="category"
-        bars={exampleData}
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
-      />
+      >
+        <Stack direction="vertical" gap="r16">
+          <Barchart type="category" bars={exampleData} />
+          <ChartLegend shape="rectangle" direction="horizontal" />
+        </Stack>
+      </ChartLegendWrapper>
     );
   },
 };
@@ -114,27 +114,33 @@ export const Time7Days: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
     return (
-      <Barchart
-        type={{
-          type: 'time',
-          timeRange: {
-            startDate: new Date(
-              new Date(Date.now()).setHours(0, 0, 0, 0) -
-                7 * 24 * 60 * 60 * 1000,
-            ),
-            endDate: new Date(
-              new Date(Date.now()).setHours(0, 0, 0, 0) -
-                1 * 24 * 60 * 60 * 1000,
-            ),
-            interval: 24 * 60 * 60 * 1000,
-          },
-        }}
-        bars={timeData7Days}
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
-      />
+      >
+        <Stack direction="vertical" gap="r16">
+          <Barchart
+            type={{
+              type: 'time',
+              timeRange: {
+                startDate: new Date(
+                  new Date(Date.now()).setHours(0, 0, 0, 0) -
+                    7 * 24 * 60 * 60 * 1000,
+                ),
+                endDate: new Date(
+                  new Date(Date.now()).setHours(0, 0, 0, 0) -
+                    1 * 24 * 60 * 60 * 1000,
+                ),
+                interval: 24 * 60 * 60 * 1000,
+              },
+            }}
+            bars={timeData7Days}
+          />
+          <ChartLegend shape="line" />
+        </Stack>
+      </ChartLegendWrapper>
     );
   },
 };
@@ -179,27 +185,30 @@ export const Time7DaysWithMissingData: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
     return (
-      <Barchart
-        type={{
-          type: 'time',
-          timeRange: {
-            startDate: new Date(
-              new Date(Date.now()).setHours(0, 0, 0, 0) -
-                7 * 24 * 60 * 60 * 1000,
-            ),
-            endDate: new Date(
-              new Date(Date.now()).setHours(0, 0, 0, 0) -
-                1 * 24 * 60 * 60 * 1000,
-            ),
-            interval: 24 * 60 * 60 * 1000,
-          },
-        }}
-        bars={timeData7DaysWithMissingData}
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
-      />
+      >
+        <Barchart
+          type={{
+            type: 'time',
+            timeRange: {
+              startDate: new Date(
+                new Date(Date.now()).setHours(0, 0, 0, 0) -
+                  7 * 24 * 60 * 60 * 1000,
+              ),
+              endDate: new Date(
+                new Date(Date.now()).setHours(0, 0, 0, 0) -
+                  1 * 24 * 60 * 60 * 1000,
+              ),
+              interval: 24 * 60 * 60 * 1000,
+            },
+          }}
+          bars={timeData7DaysWithMissingData}
+        />
+      </ChartLegendWrapper>
     );
   },
 };
@@ -269,23 +278,26 @@ export const TimeLast24Hours: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
     return (
-      <Barchart
-        type={{
-          type: 'time',
-          timeRange: {
-            startDate: new Date(
-              new Date(Date.now()).setMinutes(0, 0, 0) - 24 * 60 * 60 * 1000,
-            ),
-            endDate: new Date(new Date(Date.now()).setMinutes(0, 0, 0)),
-            interval: 60 * 60 * 1000,
-          },
-        }}
-        bars={timeDataLast24Hours}
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
-      />
+      >
+        <Barchart
+          type={{
+            type: 'time',
+            timeRange: {
+              startDate: new Date(
+                new Date(Date.now()).setMinutes(0, 0, 0) - 24 * 60 * 60 * 1000,
+              ),
+              endDate: new Date(new Date(Date.now()).setMinutes(0, 0, 0)),
+              interval: 60 * 60 * 1000,
+            },
+          }}
+          bars={timeDataLast24Hours}
+        />
+      </ChartLegendWrapper>
     );
   },
 };
@@ -313,39 +325,42 @@ export const CapacityWithUnitRange: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
     return (
-      <Barchart
-        type="category"
-        bars={capacityDataWithUnitRange}
-        unitRange={[
-          {
-            threshold: 0,
-            label: 'B',
-          },
-          {
-            threshold: 1024,
-            label: 'KiB',
-          },
-          {
-            threshold: 1024 * 1024,
-            label: 'MiB',
-          },
-          {
-            threshold: 1024 * 1024 * 1024,
-            label: 'GiB',
-          },
-        ]}
+      <ChartLegendWrapper
         colorSet={{
           Free: theme.selectedActive,
           Used: theme.infoSecondary,
         }}
-      />
+      >
+        <Barchart
+          type="category"
+          bars={capacityDataWithUnitRange}
+          unitRange={[
+            {
+              threshold: 0,
+              label: 'B',
+            },
+            {
+              threshold: 1024,
+              label: 'KiB',
+            },
+            {
+              threshold: 1024 * 1024,
+              label: 'MiB',
+            },
+            {
+              threshold: 1024 * 1024 * 1024,
+              label: 'GiB',
+            },
+          ]}
+        />
+      </ChartLegendWrapper>
     );
   },
 };
 
 const stackedData: BarchartProps<
   {
-    label: 'Success' | 'Failed';
+    label: 'Success' | 'Failed' | 'Warning';
     data: [string, number][];
   }[]
 >['bars'] = [
@@ -360,9 +375,17 @@ const stackedData: BarchartProps<
   {
     label: 'Failed',
     data: [
-      ['category1', 8],
-      ['category2', 10],
-      ['category3', 25],
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
+    ],
+  },
+  {
+    label: 'Warning',
+    data: [
+      ['category1', 0],
+      ['category2', 0],
+      ['category3', 0],
     ],
   },
 ];
@@ -371,15 +394,18 @@ export const Stacked: Story = {
   render: () => {
     const theme = useTheme() as CoreUITheme;
     return (
-      <Barchart
-        type="category"
-        bars={stackedData}
-        stacked
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
+          Warning: theme.statusWarning,
         }}
-      />
+      >
+        <Stack direction="vertical" gap="r16">
+          <Barchart type="category" bars={stackedData} stacked />
+          <ChartLegend shape="rectangle" />
+        </Stack>
+      </ChartLegendWrapper>
     );
   },
 };
@@ -420,16 +446,19 @@ export const DefaultSort: Story = {
       return totalA - totalB > 0 ? -1 : totalA - totalB < 0 ? 1 : 0; // Descending order
     };
     return (
-      <Barchart
-        type="category"
-        stacked
-        bars={defaultSortData}
-        defaultSort={customSort}
+      <ChartLegendWrapper
         colorSet={{
           Success: theme.statusHealthy,
           Failed: theme.statusCritical,
         }}
-      />
+      >
+        <Barchart
+          type="category"
+          stacked
+          bars={defaultSortData}
+          defaultSort={customSort}
+        />
+      </ChartLegendWrapper>
     );
   },
 };
@@ -494,16 +523,22 @@ export const WithCustomTooltip: Story = {
         <Text variant="Basic" color="textSecondary">
           Tooltip and sort functions defined outside with full type safety
         </Text>
-        <Barchart
-          type="category"
-          bars={exampleData}
-          tooltip={customTooltip}
-          height={300}
+        <ChartLegendWrapper
           colorSet={{
             Success: theme.statusHealthy,
             Failed: theme.statusCritical,
           }}
-        />
+        >
+          <Stack direction="vertical" gap="r16">
+            <Barchart
+              type="category"
+              bars={exampleData}
+              tooltip={customTooltip}
+              height={300}
+            />
+            <ChartLegend shape="line" />
+          </Stack>
+        </ChartLegendWrapper>
       </Stack>
     );
   },
@@ -558,17 +593,236 @@ export const StatusColors: Story = {
       },
     ] as const;
     return (
-      <Barchart
-        type="category"
-        bars={statusData}
-        stacked
+      <ChartLegendWrapper
         colorSet={{
           'Success Rate': theme.statusHealthy,
           'Failed Requests': theme.statusCritical,
           'Warning Events': theme.statusWarning,
         }}
-        title="System Health Metrics"
-      />
+      >
+        <Stack direction="vertical" gap="r16">
+          <Barchart
+            type="category"
+            bars={statusData}
+            stacked
+            title="System Health Metrics"
+          />
+          <ChartLegend shape="rectangle" />
+        </Stack>
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+export const LegendShapes: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const exampleData = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 25],
+          ['category2', 40],
+          ['category3', 35],
+        ],
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 15],
+          ['category2', 20],
+          ['category3', 18],
+        ],
+      },
+      {
+        label: 'Warning',
+        data: [
+          ['category1', 8],
+          ['category2', 12],
+          ['category3', 10],
+        ],
+      },
+    ] as const;
+    return (
+      <Stack direction="vertical" gap="r24">
+        <Text variant="Large">Legend Shapes</Text>
+
+        <ChartLegendWrapper
+          colorSet={{
+            Success: theme.statusHealthy,
+            Failed: theme.statusCritical,
+            Warning: theme.statusWarning,
+          }}
+        >
+          <Stack direction="vertical" gap="r16">
+            <Barchart
+              type="category"
+              bars={exampleData}
+              height={200}
+              title="Horizontal Rectangle Legend"
+            />
+            <ChartLegend shape="rectangle" />
+          </Stack>
+        </ChartLegendWrapper>
+        <ChartLegendWrapper
+          colorSet={{
+            Success: theme.statusHealthy,
+            Failed: theme.statusCritical,
+            Warning: theme.statusWarning,
+          }}
+        >
+          <Stack direction="vertical" gap="r16">
+            <Barchart
+              type="category"
+              bars={exampleData}
+              height={200}
+              title="Vertical Line Legend"
+            />
+            <ChartLegend shape="line" direction="vertical" />
+          </Stack>
+        </ChartLegendWrapper>
+      </Stack>
+    );
+  },
+};
+
+export const BarchartsWithSingleLegend: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const exampleData = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 25],
+          ['category2', 40],
+          ['category3', 35],
+        ],
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 15],
+          ['category2', 20],
+          ['category3', 18],
+        ],
+      },
+      {
+        label: 'Warning',
+        data: [
+          ['category1', 8],
+          ['category2', 12],
+          ['category3', 10],
+        ],
+      },
+    ] as const;
+    return (
+      <Stack direction="vertical" gap="r24">
+        <Text variant="Large">Barcharts with Single Shared Legend</Text>
+
+        <ChartLegendWrapper
+          colorSet={{
+            Success: theme.statusHealthy,
+            Failed: theme.statusCritical,
+            Warning: theme.statusWarning,
+          }}
+        >
+          <Barchart
+            type="category"
+            bars={exampleData}
+            height={200}
+            title="Barchart 1"
+          />
+
+          <Barchart
+            type="category"
+            bars={exampleData}
+            height={200}
+            title="Barchart 2"
+          />
+          <ChartLegend shape="rectangle" />
+        </ChartLegendWrapper>
+      </Stack>
+    );
+  },
+};
+
+export const ErrorState: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={[]}
+          isError
+          title="Error State"
+          helpTooltip="This chart data could not be loaded"
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
+    );
+  },
+};
+
+export const StackedBarSort: Story = {
+  render: () => {
+    const theme = useTheme() as CoreUITheme;
+    const [sort, setSort] = useState<'default' | 'legend'>('default');
+    const statusesData = [
+      {
+        label: 'Success',
+        data: [
+          ['category1', 100],
+          ['category2', 80],
+          ['category3', 50],
+        ],
+      },
+      {
+        label: 'Warning',
+        data: [
+          ['category1', 10],
+          ['category2', 20],
+          ['category3', 30],
+        ],
+      },
+      {
+        label: 'Failed',
+        data: [
+          ['category1', 30],
+          ['category2', 40],
+          ['category3', 50],
+        ],
+      },
+    ] as const;
+    return (
+      <ChartLegendWrapper
+        colorSet={{
+          Success: theme.statusHealthy,
+          Warning: theme.statusWarning,
+          Failed: theme.statusCritical,
+        }}
+      >
+        <Barchart
+          type="category"
+          bars={statusesData}
+          stacked
+          stackedBarSort={sort}
+          title="Stacked Bar Chart"
+          helpTooltip="This chart data could not be loaded"
+          rightTitle={
+            <Button
+              label={sort === 'default' ? 'Sort by Legend' : 'Sort by Default'}
+              onClick={() => setSort(sort === 'default' ? 'legend' : 'default')}
+            />
+          }
+        />
+        <ChartLegend shape="rectangle" />
+      </ChartLegendWrapper>
     );
   },
 };
@@ -622,33 +876,37 @@ export const CompleteExample: Story = {
           backgroundColor: theme.backgroundLevel2,
         }}
       >
-        <Barchart
-          type="category"
-          title="Loading BarChart"
-          helpTooltip="Click on the button to load or unload data"
-          secondaryTitle={isLoading ? 'Loading...' : 'Loaded data'}
-          rightTitle={
-            <Button
-              label={isLoading ? 'Load data' : 'Fake loading data'}
-              onClick={() => {
-                setIsLoading(!isLoading);
-                if (isLoading) {
-                  setData(exampleData);
-                } else {
-                  setData(undefined);
-                }
-              }}
-            />
-          }
-          bars={data || []}
-          tooltip={customTooltip}
-          isLoading={isLoading}
-          height={200}
+        <ChartLegendWrapper
           colorSet={{
             Success: 'lineColor1',
             Failed: 'lineColor2',
           }}
-        />
+        >
+          <Barchart
+            type="category"
+            title="Loading BarChart"
+            helpTooltip="Click on the button to load or unload data"
+            secondaryTitle={isLoading ? 'Loading...' : 'Loaded data'}
+            rightTitle={
+              <Button
+                label={isLoading ? 'Load data' : 'Fake loading data'}
+                onClick={() => {
+                  setIsLoading(!isLoading);
+                  if (isLoading) {
+                    setData(exampleData);
+                  } else {
+                    setData(undefined);
+                  }
+                }}
+              />
+            }
+            bars={data}
+            tooltip={customTooltip}
+            isLoading={isLoading}
+            height={200}
+          />
+          <ChartLegend shape="rectangle" direction="horizontal" />
+        </ChartLegendWrapper>
       </div>
     );
   },

package/stories/format.mdx

@@ -32,8 +32,10 @@ import { Meta } from '@storybook/blocks';
 | Short#1 | DD MMM                   | 20 Jul                   | 5      | Chart time axis                                        |
 | Short#2 | DDMMM HH:mm              | 20Jul 09:00              | 11     | Limited space, year not needed                         |
 | Short#3 | YYYY-MM-DD               | 2020-07-20               | 10     | Tables                                                 |
-| Mid#1   | YYYY-MM-DD HH:mm         | 2020-07-20 09:00         | 16     | Tables (creation/modification dates)                   |
-| Mid#2   | YYYY-MM-DD HH:mm:ss      | 2020-07-20 09:00:00      | 19     | When the seconds are needed                            |
+| Mid#1   | DD MMM HH:mm             | 20 Jul 09:00             | 12     | Chart Axis ticks                                       |
+| Mid#2   | DD MMM HH:mm:ss          | 20 Jul 09:00:00          | 15     | Chart Tooltip title                                    |
+| Mid#3   | YYYY-MM-DD HH:mm         | 2020-07-20 09:00         | 16     | Tables (creation/modification dates)                   |
+| Mid#4   | YYYY-MM-DD HH:mm:ss      | 2020-07-20 09:00:00      | 19     | When the seconds are needed                            |
 | Full#1  | EEE MMM DD YYYY HH:mm:ss | Mon Jul 20 2020 09:00:00 | 24     | When a lot of space (hover) - When precision is needed |
 
 ### Remarks: