sentry/docs-ui/components/chart-utilities.stories.js

import React from 'react';
import {action} from '@storybook/addon-actions';

import ChartZoom from 'app/components/charts/chartZoom';
import LineChart from 'app/components/charts/lineChart';

export default {
  title: 'DataVisualization/Charts/Utilities/ChartZoom',
  component: ChartZoom,
  args: {
    height: 300,
    grid: {
      top: 40,
      bottom: 20,
      left: '10%',
      right: '10%',
      containLabel: true,
    },
    legend: {
      data: ['sentry:user', 'environment', 'browser'],
      type: 'scroll',
    },
  },
};

export const _ChartZoom = ({grid, legend, height}) => (
  <div style={{backgroundColor: 'white', padding: 12}}>
    <ChartZoom onZoom={action('ChartZoom.onZoom')}>
      {zoomRenderProps => (
        <LineChart
          tooltip={{
            filter: value => value !== null,
            truncate: 80,
          }}
          {...zoomRenderProps}
          legend={legend}
          height={height}
          grid={grid}
          series={[
            {
              seriesName: 'sentry:user',
              data: [
                {value: 18, name: 1531094400000},
                {value: 31, name: 1531180800000},
                {value: 9, name: 1532070000000},
                {value: 100, name: 1532156400000},
                {value: 12, name: 1532242800000},
              ],
            },
            {
              seriesName: 'environment',
              data: [
                {value: 84, name: 1531094400000},
                {value: 1, name: 1531180800000},
                {value: 28, name: 1532070000000},
                {value: 1, name: 1532156400000},
                {value: 1, name: 1532242800000},
              ],
            },
            {
              seriesName: 'browser',
              data: [
                {value: 108, name: 1531094400000},
                {value: 1, name: 1531180800000},
                {value: 36, name: 1532070000000},
                {value: 0, name: 1532156400000},
                {value: 1, name: 1532242800000},
              ],
            },
          ]}
        />
      )}
    </ChartZoom>
  </div>
);
_ChartZoom.storyName = 'ChartZoom';
_ChartZoom.parameters = {
  docs: {
    description: {
      story: `This is a strongly opinionated component that takes a render prop through "children".
      It requires the Global Selection Header and will update the date range selector when zooming. It also
      has specific behavior to control when the component should update, as well as opinions for
      the time interval to use.`,
    },
  },
};