wix-style-react/src/RadarChart/docs/RadarChart.demo.js

wix-style-react

import React from 'react';
import RadarChart from '..';
import { StorybookComponents } from 'wix-storybook-utils/StorybookComponents';

export default () => {
  const data = [
    {
      value: 70,
      label: 'Conversion Rate',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Total Orders',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Visitors',
      color: 'A1',
    },
    {
      value: 25,
      label: '% of New Users',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Av. Order Value',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Site Sessions',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="50%">
      <RadarChart data={data} scale={scale} />
    </StorybookComponents.Stack>
  );
};