How to use the victory.createContainer function in victory

To help you get started, we’ve selected a few victory 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 DefinitelyTyped / DefinitelyTyped / types / victory / victory-tests.tsx View on Github external
],
                },
            },
        ]}
    />
);

// VictoryPortal test
test = (
    groupComponent}>
        <div>Child</div>
    
);

// createContainer test
const VictoryZoomBrushContainer = createContainer(
    'zoom',
    'brush',
);

test = ;

// Gutter test
test = (
    
);
github sebastianquek / commute / src / modules / datetime-manager / components / Chart.js View on Github external
import React from 'react'
import { VictoryChart, VictoryAxis, VictoryStack, VictoryTheme, VictoryTooltip, createContainer } from 'victory'
import PropTypes from 'prop-types'
import moment from 'moment'
import styled from 'styled-components'
import theme from '../../../utils/theme'

export const formatTime = time =&gt; moment(time).format('h.mma Do MMM')
const formatYAxisTick = value =&gt; Math.abs(Number(value))

const ChartWrapper = styled.div`
  height: 50%;
`

const VictoryZoomAndVoronoiContainer = createContainer('zoom', 'voronoi')

class Chart extends React.Component {
  constructor (props) {
    super(props)
    this.handleZoom = this.handleZoom.bind(this)
  }

  handleZoom (domain) {
    // for (let i = 0; i &lt; 2; i++) {
    //   const newDate = new Date(domain.x[i])
    //   newDate.setMilliseconds(0)
    //   newDate.setSeconds(0)
    //   newDate.setMinutes(0)
    //   domain.x[i] = newDate
    // }
    this.props.setDatetimeZoomDomain({x: domain.x})
github kiali / kiali / vendor / github.com / kiali / k-charted / web / pf4 / src / components / Container.tsx View on Github external
export const newBrushVoronoiContainer = (onClick?: (event: any) =&gt; void, handlers?: BrushHandlers) =&gt; {
  const voronoiProps = {
    labels: obj =&gt; `${obj.datum.name}: ${getFormatter(d3Format, obj.datum.unit)(obj.datum.actualY || obj.datum.y)}`,
    labelComponent: ,
    // We blacklist "parent" as a workaround to avoid the VictoryVoronoiContainer crashing.
    // See https://github.com/FormidableLabs/victory/issues/1355
    voronoiBlacklist: ['parent']
  };
  if (handlers) {
    const VoronoiBrushContainer = createContainer('brush', 'voronoi');
    return (
      
    );
  }
  return ;
};
github narinluangrath / victory-gui / src / presentational / Chart.jsx View on Github external
data, 
		chart, 
		enableZoom, 
		toggleZoom, 
		changeInterpolation, 
		interpolation, 
		backgroundColor, 
		changeBackground, 
		toggleTooltips, 
		enableTooltips,
		enablePoints,
		togglePoints,
		loadTheme,
		isTimeseries } = props
	const opts = [ enableZoom &amp;&amp; 'zoom', enableTooltips &amp;&amp; 'voronoi' ].filter( x =&gt; x != null &amp;&amp; x != false )
	const VictoryZoomVoronoiContainer = createContainer( ...opts )

	return (
		<div>
			
			<h2>Chart Preview</h2>
			<div style="{{backgroundColor,">
				}
					domainPadding={{y : [0,5]}}
				&gt;
					 d.y}</div></div>
github mozilla / treeherder / ui / perfherder / graphs / GraphsContainer.jsx View on Github external
VictoryAxis,
  VictoryBrushContainer,
  VictoryScatter,
  createContainer,
} from 'victory';
import moment from 'moment';
import debounce from 'lodash/debounce';
import last from 'lodash/last';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTimes } from '@fortawesome/free-solid-svg-icons';

import { formatNumber } from '../helpers';

import GraphTooltip from './GraphTooltip';

const VictoryZoomSelectionContainer = createContainer('zoom', 'selection');

class GraphsContainer extends React.Component {
  constructor(props) {
    super(props);
    this.updateZoom = debounce(this.updateZoom.bind(this), 500);
    this.hideTooltip = debounce(this.hideTooltip.bind(this), 250);
    this.tooltip = React.createRef();
    this.leftChartPadding = 25;
    this.rightChartPadding = 10;
    this.state = {
      highlights: [],
      scatterPlotData: this.props.testData.flatMap(item =>
        item.visible ? item.data : [],
      ),
      showTooltip: false,
      lockTooltip: false,
github Nexusoft / NexusInterface / src / App / Transactions / TransactionsChartModal.js View on Github external
VictoryTooltip,
  createContainer,
} from 'victory';

import Modal from 'components/Modal';

import {
  getChartData,
  getFilteredTransactions,
  getTransactionsList,
} from './selectors';
import { categoryText } from './utils';

__ = __context('Transactions.TransactionsChart');

const VictoryZoomVoronoiContainer = createContainer('voronoi', 'zoom');

const barFillColor = inData =>
  inData.category == 'credit'
    ? '#0ca4fb'
    : inData.category == 'debit'
    ? '#035'
    : '#fff';

const barStrokeColor = inData =>
  inData.category == 'credit'
    ? '#0ca4fb'
    : inData.category == 'debit'
    ? '#035'
    : '#fff';

const TransactionsChartModal = ({ theme, chartData }) => (