@vx/pattern

@vx/pattern

Inspired by: http://riccardoscalco.github.io/textures/

Example

import { AreaClosed } from '@vx/shape';
import { PatternLines } from '@vx/pattern';

const PatternArea = () => {
  return (
    <svg>
      <PatternLines
        id="lines"
        height={5}
        width={5}
        stroke={'black'}
        strokeWidth={1}
        orientation={['diagonal']}
      />
      <AreaClosed fill="url('#lines')" />
    </svg>
  );
};

The Definition Caveat

Like gradients, patterns are "defined." When you put down a <PatternXYZ />, it's putting a <pattern/> attribute in the SVG.

It's often better to think of these as variable definitions rather than true DOM elements. When you use fill="url('#pattern')" you're referencing the pattern's id: pattern.

Pre-Made Patterns

PatternsCircles

<PatternCircles id="circles" height={6} width={6} stroke={'black'} strokeWidth={1} />

PatternsHexagons

<PatternHexagons id="hexagons" height={3} size={8} stroke={'red'} strokeWidth={1} />

PatternsLines

<PatternLines
  id="lines"
  height={5}
  width={5}
  stroke={'black'}
  strokeWidth={1}
  orientation={['diagonal']}
/>

PatternsWaves

<PatternWaves id="waves" height={4} width={4} stroke={'blue'} strokeWidth={1} />

Installation

npm install --save @vx/pattern

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