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

wix-style-react

export const _fillExample = `
() => {
  const data = [
    {
      value: 70,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 3',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Data point 4',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Data point 5',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Data point 6',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return <RadarChart data={data} scale={scale} />;
};
`;

export const _widthExample = `
() => {
  const data = [
    {
      value: 50,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 55,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 65,
      label: 'Data point 3',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box>
        <RadarChart data={data} scale={scale} />
      </Box>
      <Box>
        <RadarChart data={data} scale={scale} width={200} />
      </Box>
    </Box>
  );
};
`;

export const _dataPointsExample = `
() => {
  const threeDataPoints = [
    {
      value: 50,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 55,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 65,
      label: 'Data point 3',
      color: 'A6',
    },
  ];
  const tenDataPoints = [
    {
      value: 70,
      label: 'Data point 1',
      color: 'A1',
    },
    {
      value: 70,
      label: 'Data point 2',
      color: 'A1',
    },
    {
      value: 40,
      label: 'Data point 3',
      color: 'A1',
    },
    {
      value: 70,
      label: 'Data point 4',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 5',
      color: 'A1',
    },
    {
      value: 30,
      label: 'Data point 6',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Data point 7',
      color: 'A6',
    },
    {
      value: 65,
      label: 'Data point 8',
      color: 'A6',
    },
    {
      value: 80,
      label: 'Data point 9',
      color: 'A6',
    },
    {
      value: 55,
      label: 'Data point 10',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box direction="vertical" align="center">
      <Box>
        <RadarChart data={threeDataPoints} scale={scale} />
      </Box>
      <Box>
        <RadarChart data={tenDataPoints} scale={scale} />
      </Box>
    </Box>
  );
};
`;

export const _labelDistanceExample = `
() => {
  const dataForSmallLabelDistance = [
    {
      value: 70,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Small',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Small',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Small',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Small',
      color: 'A6',
    },
  ];
  const dataForMediumLabelDistance = [
    {
      value: 70,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Medium',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Medium',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Medium',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Medium',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart
          data={dataForSmallLabelDistance}
          scale={scale}
          labelDistance={24}
        />
      </Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart
          data={dataForMediumLabelDistance}
          scale={scale}
          labelDistance={48}
        />
      </Box>
    </Box>
  );
};
`;

export const _scaleExample = `
() => {
  const data = [
    {
      value: 70,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 50,
      label: 'Label',
      color: 'A1',
    },
    {
      value: 25,
      label: 'Label',
      color: 'A6',
    },
    {
      value: 75,
      label: 'Label',
      color: 'A6',
    },
    {
      value: 70,
      label: 'Label',
      color: 'A6',
    },
  ];
  const scale = [
    { value: 20, label: '20%' },
    { value: 40, label: '40%' },
    { value: 60, label: '60%' },
    { value: 80, label: '80%' },
    { value: 100, label: '100%' },
  ];

  return (
    <Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart data={data} />
      </Box>
      <Box width="50%" align="center" verticalAlign="middle">
        <RadarChart data={data} scale={scale} />
      </Box>
    </Box>
  );
};
`;

export const _disabledExample = `
() => {
  const data = [
    {
      value: 70,
      label: 'Label',
    },
    {
      value: 25,
      label: 'Label',
    },
    {
      value: 50,
      label: 'Label',
    },
    {
      value: 25,
      label: 'Label',
    },
    {
      value: 75,
      label: 'Label',
    },
    {
      value: 70,
      label: 'Label',
    },
  ];
  const scale = [
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ];

  return <RadarChart data={data} scale={scale} disabled />;
};
`;

export const _emptyStateExample = `
() => {
  const data = [
    { value: 80, label: 'Unique Visitors' },
    { value: 80, label: 'Avg. Session Duration' },
    { value: 80, label: 'Bounce Rate' },
    { value: 80, label: '% Returning Visitors' },
    { value: 80, label: '% Organic Search' },
    { value: 80, label: '% Social' },
  ];
  const scale = [
    { value: 20, label: '20%' },
    { value: 40, label: '40%' },
    { value: 60, label: '60%' },
    { value: 80, label: '80%' },
    { value: 100, label: '100%' },
  ];
  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);

  return (
    <Card>
      <Card.Header
        title={
          <Box>
            <Text weight="bold">Competition Radar</Text>
          </Box>
        }
        subtitle={
          <Text size="tiny">
            This is visual representation of your benchmarks. The more coverage
            you have, the better you're doing compared to others.
          </Text>
        }
      />
      <Card.Divider />
      <div
        style={{ position: 'relative', cursor: 'pointer' }}
        onMouseEnter={() => setIsTooltipVisible(true)}
        onMouseLeave={() => setIsTooltipVisible(false)}
      >
        <Box align="center" verticalAlign="middle">
          <RadarChart data={data} scale={scale} width={200} disabled />
        </Box>
        {isTooltipVisible && (
          <div
            style={{
              position: 'absolute',
              top: 0,
              left: 0,
              width: '100%',
              height: '100%',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(255, 255, 255, 0.8)',
              textAlign: 'center',
            }}
          >
            <Box width={400} direction="vertical" align="center">
              <Text size="small">
                Your site doesn't have enough data to show benchmarks
              </Text>
            </Box>
          </div>
        )}
      </div>
      <Box direction="vertical" padding="0 SP5 SP5 SP5">
        <Divider />
        <Box direction="vertical" height={94} align="center" padding="SP5">
          <Box margin="0 SP3" width={228} textAlign="center">
            <Text size="small">
              Need help driving more traffic to your site
            </Text>
          </Box>
          <Box marginTop="SP3">
            <Button size="tiny" priority="secondary">
              Hire a Professional
            </Button>
          </Box>
        </Box>
      </Box>
    </Card>
  );
};
`;