import React from 'react' import { storiesOf } from '@storybook/react' import { generateCountriesData } from '@nivo/generators' import { HeatMap } from '../src' const CustomCell = ({ value, x, y, width, height, color, opacity, borderWidth, borderColor, textColor, }) => ( {value} ) const keys = [ 'hot dogs', 'burgers', 'sandwich', 'kebab', 'fries', 'donut', 'junk', 'sushi', 'ramen', 'curry', 'udon', 'bagel', ] const commonProperties = { width: 900, height: 500, margin: { top: 60, right: 80, bottom: 60, left: 80 }, data: generateCountriesData(keys, { size: 9, min: 0, max: 100 }), indexBy: 'country', keys, } const stories = storiesOf('HeatMap', module) stories.add('default', () => ) stories.add('square cells', () => ( )) stories.add('circle cells', () => ( )) stories.add('alternative colors', () => ) stories.add('variable cell size', () => ( )) stories.add('Custom cell component', () => ( )) stories.add('with formatted values', () => ( `${Number(value).toLocaleString('ru-RU', { minimumFractionDigits: 2, })} ₽` } /> )) stories.add('custom tooltip', () => ( ( {xKey} / {yKey}: {value} )} theme={{ tooltip: { container: { background: 'gray', }, }, }} /> )) const App = () =>

Hello React!

;

React Starter

juliaric