@scality/core-ui 0.115.0

package/stories/linechart.stories.tsx

@@ -0,0 +1,319 @@
+import React from 'react';
+import { LineChart } from '../src/lib/components/linechart/LineChart.component';
+import {
+  data,
+  data_graph_with_axis,
+  forecast_data,
+  in_out_data,
+} from './data/linechart';
+import { Wrapper, Title } from './common';
+const xAxis = {
+  field: 'time',
+  type: 'temporal',
+  timeUnit: 'yearmonthdatehoursminutes',
+  title: 'time',
+};
+const yAxis = [
+  {
+    field: 'total_space',
+    type: 'quantitative',
+    title: 'TOTAL SPACE (GB)',
+    color: 'yellow',
+  },
+  {
+    field: 'used_space',
+    type: 'quantitative',
+    title: 'USED SPACE (GB)',
+    color: 'blue',
+  },
+];
+// the line chart without x axis and y axis
+const xAxis_without_axis = {
+  field: 'time',
+  type: 'temporal',
+  timeUnit: 'yearmonthdatehoursminutes',
+  title: 'time',
+  axis: null,
+};
+const yAxis_without_axis = [
+  {
+    field: 'Latency',
+    type: 'quantitative',
+    color: '#18DFAD',
+    axis: {
+      title: null,
+      ticks: false,
+      labels: false,
+    },
+  },
+  {
+    field: 'Latency',
+    type: 'quantitative',
+    color: '#968BFF',
+    axis: {
+      title: null,
+      ticks: false,
+      labels: false,
+    },
+  },
+  {
+    field: 'Latency',
+    type: 'quantitative',
+    color: '#F6B187',
+    axis: {
+      title: null,
+      ticks: false,
+      labels: false,
+    },
+  },
+  {
+    field: 'Latency',
+    type: 'quantitative',
+    color: '#4BE4E2',
+    axis: {
+      title: null,
+      ticks: false,
+      labels: false,
+    },
+  },
+];
+const color = {
+  field: 'resquest_method',
+  type: 'nominal',
+  legend: {
+    direction: 'horizontal',
+    orient: 'bottom',
+    title: null,
+    symbolType: 'stroke',
+    labelFontSize: 15,
+    columnPadding: 50,
+    symbolStrokeWidth: 5,
+  },
+  domain: ['Get', 'Put', 'Delete', 'List'],
+  scale: {
+    range: ['#18DFAD', '#968BFF', '#F6B187', '#4BE4E2'],
+  },
+};
+const lineConfig = {
+  strokeWidth: 1,
+  opacity: 0.5,
+};
+const id = 'vis';
+const id_without_axis = 'vis2';
+// forecast chart
+const xAxis_forecast_chart = {
+  field: 'time',
+  type: 'ordinal',
+  title: null,
+  axis: {
+    labelAngle: 0,
+  },
+  // sort the according the given xlabel
+  sort: ['-3m', 'Now', '+3m'],
+};
+const yAxis_forecast_chart = [
+  {
+    field: 'capacity',
+    type: 'quantitative',
+    color: '#968BFF',
+    axis: {
+      title: null,
+      ticks: false,
+      labels: false,
+    },
+  },
+];
+const lineConfig_forecast_chart = {
+  interpolate: 'monotone',
+};
+const id_forecast_chart = 'vis_forecast_chart';
+const xAxis_inout_chart = {
+  field: 'date',
+  type: 'temporal',
+  axis: {
+    format: '%m/%d',
+    ticks: true,
+    tickCount: 4,
+    labelAngle: -50,
+    labelColor: '#B5B5B5',
+  },
+  title: null,
+};
+const yAxis_inout_chart = [
+  {
+    field: 'value',
+    type: 'quantitative',
+    title: null,
+  },
+];
+const color_inout_chart = {
+  field: 'type',
+  type: 'nominal',
+  domain: ['in', 'out'],
+  scale: {
+    range: ['#F6B187', '#968BFF'],
+  },
+  legend: {
+    direction: 'horizontal',
+    orient: 'bottom',
+    title: null,
+    values: ['in', 'out'],
+    symbolSize: 300,
+    labelFontSize: 15,
+  },
+};
+const strokeDashConfig_inout = {
+  field: 'symbol',
+  type: 'nominal',
+  legend: {
+    direction: 'horizontal',
+    orient: 'bottom',
+    title: null,
+    values: ['Cluster avg'],
+    symbolSize: 300,
+    labelFontSize: 15,
+  },
+};
+const opacityConfig_inout = {
+  condition: {
+    test: 'datum.symbol == "Cluster avg"',
+    value: 0.5,
+  },
+  value: 1,
+};
+const lineConfigInOut = {
+  strokeWidth: 1.5,
+};
+// Overriding the tooltip config to format data properly through the tooltipConfig prop
+const tooltipConfigInOut = {
+  transform: [
+    {
+      pivot: 'type',
+      value: 'value',
+      groupby: ['date'],
+    },
+  ],
+  mark: 'rule',
+  encoding: {
+    opacity: {
+      condition: {
+        value: 1,
+        selection: 'hover',
+      },
+      value: 0,
+    },
+    tooltip: [
+      {
+        field: 'date',
+        type: 'temporal',
+        axis: {
+          format: '%d/%m %H:%M',
+          ticks: true,
+          tickCount: 4,
+          labelAngle: -50,
+          labelColor: '#B5B5B5',
+        },
+        title: 'Date',
+      },
+      {
+        field: 'in',
+        type: 'quantitative',
+        title: 'In',
+      },
+      {
+        field: 'out',
+        type: 'quantitative',
+        title: 'Out',
+      },
+      {
+        field: 'avgIn',
+        type: 'quantitative',
+        title: 'Avg In',
+      },
+      {
+        field: 'avgOut',
+        type: 'quantitative',
+        title: 'Avg Out',
+      },
+    ],
+    color: {
+      legend: null,
+    },
+  },
+  selection: {
+    hover: {
+      type: 'single',
+      fields: ['date'],
+      nearest: true,
+      on: 'mouseover',
+      empty: 'none',
+      clear: 'mouseout',
+    },
+  },
+};
+export default {
+  title: 'Components/Data Display/Charts/LineChart',
+  component: LineChart,
+  args: {
+    width: 800,
+    tooltip: true,
+  },
+  argTypes: {
+    data: {
+      control: false,
+    },
+  },
+};
+export const VegaLiteChart = {
+  name: 'Vega-Lite line chart demo',
+  args: {
+    id,
+    data,
+    xAxis,
+    yAxis,
+  },
+};
+
+export const VegaChartWithoutAxis = {
+  name: 'Vega-Lite line chart without axis',
+  args: {
+    id: id_without_axis,
+    data: data_graph_with_axis,
+    xAxis: xAxis_without_axis,
+    yAxis: yAxis_without_axis,
+    tooltip: false,
+    color,
+    lineConfig,
+  },
+};
+
+export const ForecastChart = {
+  args: {
+    id: id_forecast_chart,
+    data: forecast_data,
+    xAxis: xAxis_forecast_chart,
+    yAxis: yAxis_forecast_chart,
+    tooltip: false,
+    lineConfig: lineConfig_forecast_chart,
+    width: 300,
+    heigth: 150,
+    displayTrendLine: true,
+  },
+};
+
+export const AnotherExample = {
+  name: 'Vega-Lite with strokeDash config, opacity config and custom Tooltip',
+  args: {
+    id: 'id_strokedash',
+    data: in_out_data,
+    xAxis: xAxis_inout_chart,
+    yAxis: yAxis_inout_chart,
+    color: color_inout_chart,
+    height: 250,
+    lineConfig: lineConfigInOut,
+    strokeDashEncodingConfig: strokeDashConfig_inout,
+    opacityEncodingConfig: opacityConfig_inout,
+    tooltipConfig: tooltipConfigInOut,
+    tooltipTheme: 'dark',
+  },
+};

package/stories/linecharttemporal.stories.tsx

@@ -0,0 +1,88 @@
+import React, { useCallback, useState, useEffect } from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
+import {
+  LineTemporalChart,
+  YAXIS_TITLE_READ_WRITE,
+} from '../src/lib/components/linetemporalchart/LineTemporalChart.component';
+import { MetricsTimeSpanProvider } from '../src/lib/components/linetemporalchart/MetricTimespanProvider';
+import { Wrapper } from './common';
+import { dataLineChartV2, dataLineChartV2_readwrite } from './data/linechart';
+import { defaultRenderTooltipSerie } from '../src/lib/components/linetemporalchart/tooltip';
+export default {
+  title: 'Components/Data Display/Charts/LineTemporalChart',
+  component: LineTemporalChart,
+  decorators: [
+    (story) => (
+      <Wrapper>
+        <BrowserRouter>
+          <MetricsTimeSpanProvider>
+            <SyncedCursorCharts>{story()}</SyncedCursorCharts>
+          </MetricsTimeSpanProvider>
+        </BrowserRouter>
+      </Wrapper>
+    ),
+  ],
+  args: {
+    heigth: 300,
+    startingTimeStamp: 1629306229,
+  },
+};
+
+export const CPUUsage = {
+  render: (args) => {
+    const [tooltipText, setTooltipText] = useState('initial text');
+    useEffect(() => {
+      setInterval(() => {
+        setTooltipText('New text ' + new Date().toISOString());
+      }, 500);
+    }, []);
+    return (
+      <LineTemporalChart
+        renderTooltipSerie={useCallback(
+          (serie, tooltipData) => {
+            if (serie.key === 'bootstrap') {
+              return (
+                defaultRenderTooltipSerie(serie) +
+                `<tr><td colspan="3">${tooltipText}</td></tr>`
+              );
+            }
+            return defaultRenderTooltipSerie(serie);
+          },
+          [tooltipText],
+        )}
+        {...args}
+      />
+    );
+  },
+  args: {
+    title: 'CPU Usage',
+    yAxisType: 'default',
+    series: dataLineChartV2,
+    helpText: (
+      <>
+        This charts represents lorem ipsum
+        <br />
+        This charts represents lorem ipsum
+        <br />
+        This charts represents lorem ipsum
+        <br />
+        This charts represents lorem ipsum
+        <br />
+        This charts represents lorem ipsum
+        <br />
+        This charts represents lorem ipsum
+        <br />
+      </>
+    ),
+  },
+};
+
+export const IOPS = {
+  args: {
+    title: 'IOPS',
+    series: dataLineChartV2_readwrite,
+    yAxisTitle: YAXIS_TITLE_READ_WRITE,
+    yAxisType: 'symmetrical',
+  },
+};

package/stories/loader.stories.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Loader } from '../src/lib/components/loader/Loader.component';
+import { Wrapper } from './common';
+import { Size } from '../src/lib/components/constants';
+
+const info = {
+  title: 'Components/Progress & loading/Loader',
+  component: Loader,
+  args: {
+    size: 'base',
+    children: 'Loading',
+  },
+  argTypes: {
+    color: {
+      control: 'color',
+    },
+  },
+};
+export default info;
+
+const sizes: Size[] = ['base', 'large', 'larger', 'huge', 'massive'];
+
+export const BasicLoader = {};
+
+export const DifferentColor = {
+  args: {
+    color: 'white',
+  },
+};
+
+export const DifferentSizes = {
+  render: ({}) => {
+    return (
+      <>
+        {sizes.map((size) => (
+          <Loader key={size} size={size}>
+            <span>Loader</span>
+          </Loader>
+        ))}
+      </>
+    );
+  },
+};
+
+export const CenteredLoader = {
+  args: {
+    centered: true,
+  },
+};

package/stories/modal.mdx

@@ -0,0 +1,17 @@
+import { Meta, Story, Canvas, Controls, Stories } from '@storybook/blocks';
+import { Modal } from '../src/lib/components/modal/Modal.component.tsx';
+import * as ModalStories from './modal.stories';
+
+<Meta of={ModalStories} />
+
+<Canvas of={ModalStories.SimpleModal} />
+
+<Controls of={ModalStories.SimpleModal} />
+
+#### With a customize Title
+
+<Story of={ModalStories.CustomizeTitle} />
+
+#### Inside a Table
+
+<Story of={ModalStories.WithinTable} />

package/stories/modal.stories.tsx

@@ -0,0 +1,177 @@
+import React, { useState } from 'react';
+import { Modal } from '../src/lib/components/modal/Modal.component';
+import { action } from '@storybook/addon-actions';
+import { Wrapper } from './common';
+import { Table } from '../src/lib/components/tablev2/Tablev2.component';
+import { IconHelp } from '../src/lib/components/IconHelper';
+import { Stack } from '../src/lib/spacing';
+import { Button } from '../src/lib/components/buttonv2/Buttonv2.component';
+import { useArgs } from '@storybook/preview-api';
+
+export default {
+  title: 'Components/Feedback/Modal',
+  component: Modal,
+  decorators: [
+    (story) => <Wrapper style={{ minHeight: '10vh' }}>{story()}</Wrapper>,
+  ],
+};
+
+export const SimpleModal = {
+  render: (args) => {
+    const [{ isOpen }, updateArgs] = useArgs();
+    return (
+      <>
+        <Button
+          onClick={() => updateArgs({ isOpen: true })}
+          label={'Show Modal'}
+        />
+        <Modal
+          close={() => updateArgs({ isOpen: false })}
+          isOpen={isOpen}
+          footer={
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+              }}
+            >
+              <Button
+                label="No"
+                size="default"
+                variant="outline"
+                onClick={() => updateArgs({ isOpen: false })}
+              />
+              <Button
+                variant="secondary"
+                label="Yes"
+                size="inline"
+                onClick={action('Yes clicked')}
+              />
+            </div>
+          }
+          {...args}
+        />
+      </>
+    );
+  },
+  args: {
+    title: 'Hello',
+    children: <span>Do you want a cookie?</span>,
+  },
+};
+
+export const CustomizeTitle = {
+  ...SimpleModal,
+  args: {
+    close: null,
+    title: 'Hello there',
+    children: <span>Do you want a cookie?</span>,
+    subTitle: (
+      <Stack>
+        <>Step 1/2</>
+        <IconHelp
+          tooltipMessage={
+            <ul>
+              <li>Hello, this is the tooltip of the modal</li>
+            </ul>
+          }
+        />
+      </Stack>
+    ),
+  },
+};
+
+const Demo = (myargs, args) => () => {
+  const [{ isOpen }, updateArgs] = myargs;
+  return (
+    <>
+      <Button
+        onClick={() => updateArgs({ isOpen: true })}
+        label={'Show Modal'}
+      />
+      <Modal
+        close={() => updateArgs({ isOpen: false })}
+        isOpen={isOpen}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+            }}
+          >
+            <Button
+              label="No"
+              size="default"
+              variant="outline"
+              onClick={() => updateArgs({ isOpen: false })}
+            />
+            <Button
+              variant="secondary"
+              label="Yes"
+              size="inline"
+              onClick={() => updateArgs({ isOpen: false })}
+            />
+          </div>
+        }
+        {...args}
+      />
+    </>
+  );
+};
+
+export const WithinTable = {
+  render: (args) => {
+    const myArgs = useArgs();
+
+    const columns = [
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+      {
+        Header: 'Last Name',
+        accessor: 'lastName',
+        cellStyle: {
+          textAlign: 'left',
+        },
+      },
+      {
+        Header: 'Actions',
+        accessor: 'health',
+        Cell: Demo(myArgs, args),
+        // disable the sorting on this column
+        disableSortBy: true,
+      },
+    ];
+    const data = [
+      {
+        firstName: 'Sotiria',
+        lastName: 'Agathangelou',
+        health: 'healthy',
+      },
+    ];
+    return (
+      <div
+        style={{
+          height: '300px',
+          paddingTop: '20px',
+        }}
+      >
+        <Table columns={columns} data={data} defaultSortingKey={'firstName'}>
+          <Table.SingleSelectableContent
+            rowHeight="h32"
+            separationLineVariant="backgroundLevel3"
+            backgroundVariant="backgroundLevel1"
+          />
+        </Table>
+      </div>
+    );
+  },
+  args: {
+    title: 'Hello',
+    children: <span>Do you want a cookie?</span>,
+  },
+};