@scality/core-ui 0.166.0 → 0.167.0

package/stories/data/areachart.ts

@@ -1,122 +0,0 @@
-export const area_charts = [
-  {
-    time: '2019-10-01 00:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.4,
-  },
-  {
-    time: '2019-10-01 00:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 00:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 00:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 00:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 00:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 2.1,
-  },
-  {
-    time: '2019-10-01 00:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 00:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-  {
-    time: '2019-10-01 01:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.3,
-  },
-  {
-    time: '2019-10-01 01:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 2,
-  },
-  {
-    time: '2019-10-01 01:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 01:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.2,
-  },
-  {
-    time: '2019-10-01 01:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 01:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-  {
-    time: '2019-10-01 02:00:00',
-    Average: 'AvgIn',
-    Bandwidth: 1.4,
-  },
-  {
-    time: '2019-10-01 02:00:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 02:15:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 02:15:00',
-    Average: 'AvgOut',
-    Bandwidth: 1.2,
-  },
-  {
-    time: '2019-10-01 02:30:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.7,
-  },
-  {
-    time: '2019-10-01 02:30:00',
-    Average: 'AvgOut',
-    Bandwidth: 2.1,
-  },
-  {
-    time: '2019-10-01 02:45:00',
-    Average: 'AvgIn',
-    Bandwidth: 0.8,
-  },
-  {
-    time: '2019-10-01 02:45:00',
-    Average: 'AvgOut',
-    Bandwidth: 0.9,
-  },
-];

package/stories/data/sparklinechart.ts

@@ -1,164 +0,0 @@
-export const data = [
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Operation per sec',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Operation per sec',
-  },
-];
-export const multiLineData = [
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'CPU',
-  },
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Load',
-  },
-  {
-    date: '2019-10-10 00:00:00',
-    y: 33,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 01:00:00',
-    y: 100,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 02:00:00',
-    y: 103,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 03:00:00',
-    y: 350,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 04:00:00',
-    y: 225,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 05:00:00',
-    y: 124,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 06:00:00',
-    y: 248,
-    symbol: 'Memory',
-  },
-  {
-    date: '2019-10-10 07:00:00',
-    y: 99,
-    symbol: 'Memory',
-  },
-];

package/stories/linechart.stories.tsx

@@ -1,319 +0,0 @@
-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/multiselect.stories.tsx

@@ -1,126 +0,0 @@
-import React from 'react';
-import { MultiSelect } from '../src/lib/components/multiselect/MultiSelect.component';
-import { action } from '@storybook/addon-actions';
-import { Wrapper, Title } from './common';
-const items = [
-  {
-    selected: true,
-    isFavorite: true,
-    label: 'AWS',
-    description: 'Amazon',
-    onSelect: action('onSelect clicked'),
-    onFavoriteClick: action('onFavoriteClick clicked'),
-  },
-  {
-    selected: false,
-    isFavorite: false,
-    label: 'WM',
-    description: 'Walmart',
-    onSelect: action('onSelect clicked'),
-    onFavoriteClick: action('onFavoriteClick clicked'),
-  },
-];
-const itemsWithoutFavourite = [
-  {
-    selected: true,
-    label: 'AWS',
-    description: 'Amazon',
-    onSelect: action('onSelect clicked'),
-  },
-  {
-    selected: false,
-    label: 'WM',
-    description: 'Walmart',
-    onSelect: action('onSelect clicked'),
-  },
-];
-const itemsWithoutCheckboxFavourite = [
-  {
-    label: 'AWS',
-    description: 'Amazon',
-  },
-  {
-    label: 'WM',
-    description: 'Walmart',
-  },
-];
-const options = [
-  {
-    label: 'Azure',
-    value: 'Azure',
-  },
-  {
-    label: 'S3',
-    value: 'S3',
-  },
-];
-const search = {
-  placeholder: 'Select location to add',
-  options: options,
-  onSelect: action('onSelect clicked'),
-  onAdd: action('onAdd clicked'),
-  selectedOption: null,
-};
-export default {
-  title: 'Components/Deprecated/Selector/MultiSelect',
-  component: MultiSelect,
-};
-export const Default = {
-  render: ({}) => {
-    return (
-      <Wrapper>
-        <Title>MultiSelect List</Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect
-            title="Destination Locations"
-            items={items}
-            search={search}
-            onItemRemove={action('onItemRemove clicked')}
-          />
-        </div>
-        <Title>MultiSelect List without search</Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect
-            title="Destination Locations"
-            items={items}
-            onItemRemove={action('onItemRemove clicked')}
-          />
-        </div>
-        <Title>MultiSelect List without Favourite</Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect
-            title="Destination Locations"
-            items={itemsWithoutFavourite}
-            search={search}
-            onItemRemove={action('onItemRemove clicked')}
-          />
-        </div>
-        <Title>MultiSelect List without Favourite and Selectbox</Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect
-            title="Destination Locations"
-            items={itemsWithoutCheckboxFavourite}
-            search={search}
-            onItemRemove={action('onItemRemove clicked')}
-          />
-        </div>
-        <Title>
-          MultiSelect List without Remove Button, Favourite and Selectbox
-        </Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect
-            title="Destination Locations"
-            items={itemsWithoutCheckboxFavourite}
-            search={search}
-          />
-        </div>
-        <Title>
-          MultiSelect List without Title, Remove Button, Favourite and Selectbox
-        </Title>
-        <div className="storybook-mutiselect-container">
-          <MultiSelect items={itemsWithoutCheckboxFavourite} search={search} />
-        </div>
-      </Wrapper>
-    );
-  },
-};