@scality/core-ui 0.186.0 → 0.187.0

package/stories/globalhealthbar.stories.tsx

@@ -1,191 +0,0 @@
-import React from 'react';
-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',
-    severity: 'warning',
-    startsAt: '2021-02-01T07:00:00Z',
-    endsAt: '2021-02-01T21:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '2',
-    severity: 'warning',
-    startsAt: '2021-02-01T23:00:00Z',
-    endsAt: '2021-02-02T23:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '3',
-    severity: 'critical',
-    startsAt: '2021-02-03T00:00:00Z',
-    endsAt: '2021-02-04T00:00:00Z',
-    description: 'Global health critical',
-  },
-  {
-    id: '4',
-    severity: 'warning',
-    startsAt: '2021-02-04T10:00:00Z',
-    endsAt: '2021-02-06T00:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '5',
-    severity: 'warning',
-    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 = [
-  {
-    id: '1',
-    severity: 'warning',
-    startsAt: '2021-02-01T07:00:00Z',
-    endsAt: '2021-02-01T08:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '5',
-    severity: 'warning',
-    startsAt: '2021-02-01T10:00:00Z',
-    endsAt: '2021-02-01T20:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '6',
-    severity: 'unavailable',
-    startsAt: '2021-02-01T02:00:00Z',
-    endsAt: '2021-02-01T03:00:00Z',
-    description: 'unavailable',
-  },
-];
-const emptyAlert = [];
-const alertRetrieveBefore = [
-  {
-    id: '1',
-    severity: 'warning',
-    startsAt: '2021-01-31T23:00:00Z',
-    endsAt: '2021-02-03T21:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '2',
-    severity: 'critical',
-    startsAt: '2021-02-05T23:00:00Z',
-    endsAt: '2021-02-07T00:00:00Z',
-    description: 'Global health warning',
-  },
-];
-const alertTriggerNotFirstDay = [
-  {
-    id: '1',
-    severity: 'warning',
-    startsAt: '2021-02-24T21:00:00Z',
-    endsAt: '2021-02-25T21:00:00Z',
-    description: 'Global health warning',
-  },
-  {
-    id: '2',
-    severity: 'critical',
-    startsAt: '2021-02-26T23:00:00Z',
-    endsAt: '2021-02-27T21:00:00Z',
-    description: 'Global health warning',
-  },
-];
-
-const start = '2021-01-31T23:00:00Z'; // UTC time
-const end = '2021-02-06T23:00:00Z';
-const startLast24h = '2021-02-01T00:00:00Z';
-const endLast24h = '2021-02-02T00:00:00Z';
-const startNotFirstDay = '2021-02-23T23:00:00Z';
-const endNotFirstDay = '2021-03-01T23:00:00Z';
-
-export default {
-  title: 'Components/Data Display/Charts/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', height: '400px' }}>
-          <SyncedCursorCharts>{story()}</SyncedCursorCharts>
-        </div>
-      </Wrapper>
-    ),
-  ],
-  args: {
-    start,
-    end,
-    width: 500,
-  },
-  argTypes: {
-    start: {
-      control: 'date',
-    },
-    end: {
-      control: 'date',
-    },
-  },
-};
-
-export const GlobalHealthComponentDemo = {
-  args: {
-    id: 'vis_globalhealth',
-    alerts,
-    width: 500,
-  },
-};
-
-export const GlobalHealthLast24Hours = {
-  args: {
-    id: 'vis_globalhealth_24h',
-    alerts: alertsLast24h,
-    start: startLast24h,
-    end: endLast24h,
-    width: 500,
-  },
-};
-export const GlobalHealthEmpty = {
-  args: {
-    id: 'vis_globalhealth_empty',
-    alerts: emptyAlert,
-    width: 500,
-  },
-};
-
-export const AlertTriggeredEarlierThanTheStartingTime = {
-  args: {
-    id: 'vis_globalhealth_alert_retrieve_before',
-    alerts: alertRetrieveBefore,
-    width: 500,
-  },
-};
-
-export const FirstLabel = {
-  name: 'First Label always includes the month label',
-  args: {
-    id: 'vis_globalhealth_display_month_1st_label',
-    alerts: alertTriggerNotFirstDay,
-    start: startNotFirstDay,
-    end: endNotFirstDay,
-    width: 500,
-  },
-};

package/stories/guideline/mdxExampleComponents.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { BarChart } from '../../src/lib/components/barchart/BarChart.component';
-import { verticalStackedData } from '../data/barchart';
-// props for vertical stacked bar chart
-const idVerticalStacked = 'vis_vertical_stacked';
-const xAxisVerticalStacked = {
-  field: 'xlabel',
-  type: 'ordinal',
-  title: null,
-  axis: {
-    labelAngle: 0,
-  },
-  sort: {
-    order: 'ascending',
-  },
-};
-const yAxisVerticalStacked = {
-  aggregate: 'count',
-  field: '*',
-  title: null,
-  type: 'quantitative',
-  scale: {
-    padding: 1,
-  },
-};
-const colorVerticalStacked = {
-  field: 'status',
-  type: 'nominal',
-  legend: {
-    direction: 'horizontal',
-    orient: 'top',
-    title: null,
-    symbolType: 'circle',
-    columnPadding: 50,
-  },
-  scale: {
-    domain: ['2XX', '401', '404', '4XX', '503', '5XX'],
-    range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
-  },
-};
-const width = 800;
-// the size control the size of each small item of the bar
-const barConfig = {
-  cornerRadius: 8,
-  size: 12,
-};
-export const ChartExample = ({}) => (
-  <BarChart
-    id={idVerticalStacked}
-    data={verticalStackedData}
-    xAxis={xAxisVerticalStacked}
-    yAxis={yAxisVerticalStacked}
-    color={colorVerticalStacked}
-    width={width}
-    barConfig={barConfig}
-  />
-);

package/stories/linecharttemporal.stories.tsx

@@ -1,88 +0,0 @@
-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/Deprecated/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',
-  },
-};