How to use the @vx/mock-data.browserUsage.length function in @vx/mock-data

To help you get started, we’ve selected a few @vx/mock-data examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github williaster / data-ui / packages / demo / examples / 05-radial-chart / index.jsx View on Github external
import { browserUsage } from '@vx/mock-data';
import React from 'react';
import { LegendOrdinal } from '@vx/legend';

import {
  RadialChart,
  ArcSeries,
  ArcLabel,
  singleHueScaleFactory,
  multiHueScaleFactory,
} from '@data-ui/radial-chart';

import readme from '../../node_modules/@data-ui/radial-chart/README.md';

const browsersLast = browserUsage[browserUsage.length - 1];
const browserFractions = Object.entries(browsersLast)
  .filter(([key]) => key !== 'date')
  .map(([key, fraction]) => ({
    value: parseFloat(fraction),
    label: key,
  }));

const width = 400;
const height = 400;

const pinkColorScale = singleHueScaleFactory('pink');
const categoryColorScale = multiHueScaleFactory();

const wrapperStyles = { display: 'flex', alignItems: 'center' };

/* eslint-disable react/prop-types */