@scality/core-ui 0.166.0 → 0.168.0

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>
-    );
-  },
-};

package/stories/select.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Select } from '../src/lib/components/select/Select.component';
-import { Wrapper } from './common';
-const options = Array.from(new Array(100), (_, index) => ({
-  label: `Item ${index}`,
-  value: index,
-  title: `Item ${index}`,
-  'data-cy': `Item_${index}`,
-}));
-
-const customFormatOptionLabel = ({ value, label, ...rest }) => (
-  <div className="sc-select-option-custom-label" {...rest}>
-    {label} {value % 2 === 0 ? <i className="fas fa-flag-usa"></i> : null}
-  </div>
-);
-
-export default {
-  title: 'Components/Deprecated/Selector/Select',
-  component: Select,
-  argTypes: {
-    options: {
-      description: 'Array of objects with label, title and value properties',
-      control: false,
-    },
-    isMulti: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-};
-
-export const Playground = {
-  args: {
-    options,
-  },
-};
-
-export const WithCustomLabel = {
-  args: {
-    options,
-    formatOptionLabel: customFormatOptionLabel,
-  },
-};
-
-export const MultiSelect = {
-  args: {
-    options,
-    isMulti: true,
-    value: [options[0], options[1]],
-  },
-};

package/stories/sparkline.stories.tsx

@@ -1,85 +0,0 @@
-import React from 'react';
-import { Sparkline as SparkLine } from '../src/lib/components/sparkline/SparkLine.component';
-import { data, multiLineData } from './data/sparklinechart';
-import { Wrapper, Title } from './common';
-const xAxis = {
-  field: 'date',
-  type: 'temporal',
-  axis: null,
-};
-const yAxis = {
-  field: 'y',
-  type: 'quantitative',
-  axis: {
-    title: null,
-    ticks: false,
-    labels: false,
-  },
-};
-const row = {
-  field: 'symbol',
-  type: 'nominal',
-  title: null,
-  // the header of the subplot
-  header: {
-    labelAngle: 0,
-    labelAlign: 'left',
-  },
-};
-const id = 'vis';
-const id_multi = 'multiVis';
-const lineConfig = {
-  interpolate: 'monotone',
-};
-export default {
-  title: 'Components/Data Display/Charts/SparkLine',
-  component: SparkLine,
-  args: {
-    xAxis,
-    yAxis,
-    row,
-  },
-};
-
-export const ChartDemo = {
-  args: {
-    id,
-    data,
-    title: 'OPERATIONS BY SECONDS',
-    lineConfig,
-  },
-};
-
-export const MultiChartDmeo = {
-  args: {
-    id: id_multi,
-    data: multiLineData,
-  },
-};
-
-export const Default = {
-  render: ({}) => {
-    return (
-      <Wrapper>
-        <Title>Vege-Lite sparkline chart demo</Title>
-        <SparkLine
-          id={id}
-          data={data}
-          xAxis={xAxis}
-          yAxis={yAxis}
-          title={'OPERATIONS PER SECONDS'}
-          row={row}
-          lineConfig={lineConfig}
-        />
-        <Title>Vege-Lite sparkline multi chart demo</Title>
-        <SparkLine
-          id={id_multi}
-          data={multiLineData}
-          xAxis={xAxis}
-          yAxis={yAxis}
-          row={row}
-        />
-      </Wrapper>
-    );
-  },
-};

package/stories/vegachart.stories.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { VegaChart } from '../src/lib/components/vegachart/VegaChart.component';
-import { data } from './data/linechart';
-import { Wrapper, Title } from './common';
-const spec = {
-  data: {
-    values: data,
-  },
-  encoding: {
-    x: {
-      field: 'time',
-      type: 'temporal',
-      timeUnit: 'yearmonthdatehoursminutes',
-      title: 'time',
-    },
-    tooltip: [
-      {
-        field: 'time',
-        type: 'temporal',
-        timeUnit: 'yearmonthdatehoursminutes',
-      },
-      {
-        field: 'total_space',
-        type: 'quantitative',
-        title: 'TOTAL SPACE',
-      },
-      {
-        field: 'used_space',
-        type: 'quantitative',
-        title: 'USED SPACE',
-      },
-    ],
-  },
-  layer: [
-    {
-      mark: {
-        type: 'line',
-        color: 'green',
-      },
-      encoding: {
-        y: {
-          field: 'total_space',
-          type: 'quantitative',
-          title: 'TOTAL SPACE (GB)',
-        },
-      },
-    },
-    {
-      mark: {
-        type: 'line',
-        color: 'orange',
-      },
-      encoding: {
-        y: {
-          field: 'used_space',
-          type: 'quantitative',
-          title: 'USED SPACE (GB)',
-        },
-      },
-    },
-    {
-      mark: 'rule',
-      selection: {
-        index: {
-          type: 'single',
-          on: 'mousemove',
-          encodings: ['x'],
-          nearest: true,
-        },
-      },
-      encoding: {
-        color: {
-          condition: {
-            selection: {
-              not: 'index',
-            },
-            value: 'transparent',
-          },
-        },
-      },
-    },
-  ],
-};
-const id = 'vis';
-export default {
-  title: 'Components/Data Display/Charts/VegaChart',
-  component: VegaChart,
-};
-export const Default = {
-  render: (args) => {
-    return (
-      <Wrapper>
-        <Title>Vega-Lite wrapper - need to specify the entire spec</Title>
-        <VegaChart id={id} spec={spec} {...args} />
-      </Wrapper>
-    );
-  },
-};