@vx/responsive

@vx/responsive

The @vx/responsive package is here to help you make responsive graphs.

With Enhancers

withScreenSize

withParentSize

With Components

ParentSize

ScaleSVG

withScreenSize

If you would like your graph to adapt to the screen size, you can use withScreenSize(). The resulting component will pass screenWidth and screenHeight props to the wrapped component containing the respective screen dimensions.

Example:

import { withScreenSize } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// Responsive.withScreenSize(...);

let chartToRender = withScreenSize(MySuperCoolVxChart);

// ... Render the chartToRender somewhere

withParentSize

If you would like your graph to adapt to it's parent component's size, you can use withParentSize(). The resulting component will pass parentWidth and parentHeight props to the wrapped component containing the respective parent's dimensions.

Example:

import { withParentSize } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// Responsive.withParentSize(...);

let chartToRender = withParentSize(MySuperCoolVxChart);

// ... Render the chartToRender somewhere

ParentSize

You might do the same thing using the ParentSize component.

Example:

import { ParentSize } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// <Responsive.ParentSize />;

let chartToRender = (
  <ParentSize>
    {parent => (
      <MySuperCoolVxChart
        parentWidth={parent.width}
        parentHeight={parent.height}
        parentTop={parent.top}
        parentLeft={parent.left}
        // this is the referer to the wrapper component
        parentRef={parent.ref}
        // this function can be called inside MySuperCoolVxChart to cause a resize of the wrapper component
        resizeParent={parent.resize}
      />
    )}
  </ParentSize>
);

// ... Render the chartToRender somewhere

ScaleSVG

You can also create a responsive chart with a specific viewBox with the ScaleSVG component.

Example:

import { ScaleSVG } from '@vx/responsive';
// or
// import * as Responsive from '@vx/responsive';
// <Responsive.ScaleSVG />

let chartToRender = (
  <ScaleSVG width={400} height={400}>
    <MySuperCoolVXChart />
  </ScaleSVG>
);

// ... Render the chartToRender somewhere

Installation

npm install --save @vx/responsive

Changelog

v0.0.199

:boom: Breaking Changes

• [scale] Deprecate rangeRound field in the input of scaleLinear(), scaleLog(), scalePoint(), scalePower(), scaleSqrt(), scaleTime() and scaleUtc(). #766 Instead of

  scaleLinear({ rangeRound: xxx })
  

  Do this instead

  scaleLinear({ range: xxx, round: true });
  

• [scale] Deprecate ticks and tickFormat in the input of scaleQuantize(). It was not really doing anything anyway as both scale.ticks() and scale.tickFormat() do not mutate the scale. #766
• [scale] Remove scale.type field that was attached to the d3 scales. #766
• [grid] @vx/grid components now accept D3 Scale as generic type instead of ScaleInput. Developers should not expect to specify this generic type as it can be inferred from the passed scale. #775
• [grid] Renames GridColumnProps => GridColumnsProps (+s) to match GridRowsProps. #787
• [legend] Update generic types for legend components. #777
• [marker] remove old <Marker /> implementation of a Line and some Text. #783

:rocket: Enhancements

• [scale] new functions & New fields for the scale configs. #766
• [scale] add meta scale types. #770
• [scale] Add fallback overload for createScale. #791
• [scale] add new types: AnyD3Scale, InferD3ScaleOutput, InferD3ScaleDiscreteInput, InferD3ScaleThresholdInput and ScaleInput. Add new utilities functions: getTicks, coerceNumber and toString. #773
• [scale] add reverse field to scale config. This will reverse the range. Useful when the ranges are programmatically supplied to the scale factories such as in XYChart and developers want easy way to reverse the dynamic range. #780
• [legend] exports @vx/legend shapes from the index for convenience / non-deep imports. #772
• [grid] adds children prop to GridRows + GridColumns to support animated rendering. #787
• [shape] add <BarRounded /> shape. #774
• [shape] Create new factory functions for d3-shape and export as part of vx/shape (arc, area, line, pie, radialLine), similar to vx/scale has factories for d3-scale. #776
• [shape] add SplitLinePath component to @vx/shape that allows you to create a line path split into multiple smaller line paths that can be styled independently. #778
• [axis] consistent and compatible typings across vx/scale and vx/axis. More fields passed to child render props of Axis. #773
• [axis] Axis is refactored to accept a ticksComponent which allows us to animate them. #779
• [axis] adds a third argument values to tickFormat(value, index, values) so that format logic can more easily leverage all ticks (because numTicks is approximate, lib consumers do not know how many tick values exist a priori). #779
• [marker] add new <Marker /> that matches actual SVG <marker>. #783
• [marker] add <MarkerArrow />, <MarkerCross />, <MarkerX />, <MarkerCircle />, <MarkerLine />. #783
• [react-spring] adds a new package @vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring. #779
• [react-spring] Adds an <AnimatedAxis /> and <AnimatedTicksRender /> in @vx/react-spring. #779
• [react-spring] updates the vx-demo/axis demo to use <AnimatedAxis />. #779
• [react-spring] adds AnimatedGridRows + AnimatedGridColumns. #787
• [react-spring] modularizes AnimatedTicks/useAnimatedTicksConfig to spring-configs/useAnimatedLineTransitionConfig so it can power both animated tick + grid lines. #787
• [react-spring] adds animationTrajectory=outside | inside | min | max to AnimatedAxis and AnimatedGridRows/Columns. #787

:bug: Bug Fix

• [responsive] exclude enableDebounceLeadingCall prop being passed into div. #763
• [responsive] fix prettier format. #764
• [text] fix warning for NaN or invalid values are passed as x or y. #790

:memo: Documentation

• [scale] Improve documentation of the fields in scale configs. #766

:house: Internal

• [scale] rewrite individual scale factory with composition of shared operators. This ensure order of operators and simplified code. #766
• [scale] add 100+ unit tests to make this vx/scale package has 100% test coverage. #766
• [stats] use updated @vx/scale types. #770
• [legend] extract defaultDomain helper. #777
• [demo] updated curves demo to use new <Marker>. #783
• [demo] updates the /axis demo to include AnimatedGrid* and a animationTrajectory config. #787
• [jest] ignore vx-demo, vx-vx code coverage. #784
• [annotation] 100% coverage. #784
• [bounds] 100% coverage. #784
• [brush] add utils test. #786
• [event] add tests. #786
• [test] add tests for vx/grid, vx/zoom, vx/threshold, vx/shape. #793

:trophy: Contributors

• robinsoncol
• kristw
• williaster
• hshoff

 - @vx/annotation: 0.0.198 => 0.0.199
 - @vx/axis: 0.0.198 => 0.0.199
 - @vx/bounds: 0.0.198 => 0.0.199
 - @vx/brush: 0.0.198 => 0.0.199
 - @vx/chord: 0.0.198 => 0.0.199
 - @vx/clip-path: 0.0.198 => 0.0.199
 - @vx/curve: 0.0.198 => 0.0.199
 - @vx/demo: 0.0.198 => 0.0.199
 - @vx/drag: 0.0.198 => 0.0.199
 - @vx/event: 0.0.198 => 0.0.199
 - @vx/geo: 0.0.198 => 0.0.199
 - @vx/glyph: 0.0.198 => 0.0.199
 - @vx/gradient: 0.0.198 => 0.0.199
 - @vx/grid: 0.0.198 => 0.0.199
 - @vx/group: 0.0.198 => 0.0.199
 - @vx/heatmap: 0.0.198 => 0.0.199
 - @vx/hierarchy: 0.0.198 => 0.0.199
 - @vx/legend: 0.0.198 => 0.0.199
 - @vx/marker: 0.0.198 => 0.0.199
 - @vx/mock-data: 0.0.198 => 0.0.199
 - @vx/network: 0.0.198 => 0.0.199
 - @vx/pattern: 0.0.198 => 0.0.199
 - @vx/point: 0.0.198 => 0.0.199
 - @vx/react-spring: 0.0.198 => 0.0.199
 - @vx/responsive: 0.0.198 => 0.0.199
 - @vx/scale: 0.0.198 => 0.0.199
 - @vx/shape: 0.0.198 => 0.0.199
 - @vx/stats: 0.0.198 => 0.0.199
 - @vx/text: 0.0.198 => 0.0.199
 - @vx/threshold: 0.0.198 => 0.0.199
 - @vx/tooltip: 0.0.198 => 0.0.199
 - @vx/voronoi: 0.0.198 => 0.0.199
 - @vx/vx: 0.0.198 => 0.0.199
 - @vx/xychart: 0.0.0 => 0.0.199 (private)
 - @vx/zoom: 0.0.198 => 0.0.199