🐯 visx | visualization components

Related tags

React react visualization d3 svg chart data-visualization vx visx
Overview

Coverage Status

visx

visx is a collection of reusable low-level visualization components. visx combines the power of d3 to generate your visualization with the benefits of react for updating the DOM.


Docs • Gallery • Blog • Slack #visx • Changelog • Getting started tutorial

Usage

Remix on Glitch

Let's make a simple bar graph.

First we'll install the relevant packages:

$ npm install --save @visx/mock-data @visx/group @visx/shape @visx/scale


import React from 'react';
import { letterFrequency } from '@visx/mock-data';
import { Group } from '@visx/group';
import { Bar } from '@visx/shape';
import { scaleLinear, scaleBand } from '@visx/scale';

// We'll use some mock data from `@visx/mock-data` for this.
const data = letterFrequency;

// Define the graph dimensions and margins
const width = 500;
const height = 500;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };

// Then we'll create some bounds
const xMax = width - margin.left - margin.right;
const yMax = height - margin.top - margin.bottom;

// We'll make some helpers to get at the data we want
const x = d => d.letter;
const y = d => +d.frequency * 100;

// And then scale the graph by our data
const xScale = scaleBand({
  range: [0, xMax],
  round: true,
  domain: data.map(x),
  padding: 0.4,
});
const yScale = scaleLinear({
  range: [yMax, 0],
  round: true,
  domain: [0, Math.max(...data.map(y))],
});

// Compose together the scale and accessor functions to get point functions
const compose = (scale, accessor) => data => scale(accessor(data));
const xPoint = compose(xScale, x);
const yPoint = compose(yScale, y);

// Finally we'll embed it all in an SVG
function BarGraph(props) {
  return (
    <svg width={width} height={height}>
      {data.map((d, i) => {
        const barHeight = yMax - yPoint(d);
        return (
          <Group key={`bar-${i}`}>
            <Bar
              x={xPoint(d)}
              y={yMax - barHeight}
              height={barHeight}
              width={xScale.bandwidth()}
              fill="#fc2e1c"
            />
          </Group>
        );
      })}
    </svg>
  );
}

// ... somewhere else, render it ...
// <BarGraph />

For more examples using visx, check out the gallery.

Motivation

Goal

The goal is to create a library of components you can use to make both your own reusable chart library or your slick custom one-off chart. visx is largely unopinionated and is meant to be built upon. Keep your bundle sizes down and use only the packages you need.

How?

Under the hood, visx is using d3 for the calculations and math. If you're creating your own awesome chart library on top of visx, it's easy to create a component api that hides d3 entirely. Meaning your team could create charts as easily as using reusable react components.

But why?

Mixing two mental models for updating the DOM is never a good time. Copy and pasting d3 code into componentDidMount() is just that. This collection of components lets you easily build your own reusable visualization charts or library without having to learn d3. No more selections or enter()/exit()/update().

Roadmap

Lots coming soon, check out the roadmap.

In the wild

Have a project that's using visx? Open a pull request and we'll add it to the list.

FAQ

  1. What does visx stand for?

    visx stands for visualization components.

  2. Do you plan on supporting animation/transitions?

    A common criticism of visx is it doesn't have animation baked in, but this was a conscious choice. It's a powerful feature to not bake it in.

    Imagine your app already bundles react-motion, adding a hypothetical @visx/animation is bloat. Since visx is react, it already supports all react animation libs.

    Charting libraries are like style guides. Each org or app will eventually want full control over their own implementation.

    visx makes this easier for everyone. No need to reinvent the wheel each time.

    more info: https://github.com/airbnb/visx/issues/6

    examples:

  3. Do I have to use every package to make a chart?

    nope! pick and choose the packages you need.

  4. Can I use this to create my own library of charts for my team?

    Please do.

  5. Does visx work with preact?

    yup! need to alias react + react-dom and use preact-compat.

  6. I like using d3.

    Me too.

Development

Please see CONTRIBUTING.md

✌️

MIT

FOSSA Status

Comments
  • Collapsible tree example

    Collapsible tree example

    I derived a simple example from https://vx-demo.now.sh/trees available here: https://codesandbox.io/s/n3w687vmqj

    I'm not overly happy with the forceUpdate() and would like to have it animate similar to https://bl.ocks.org/mbostock/4339083, but it's a start

    👋 help wanted 🐯 example 
    opened by techniq 28
  • RFC: Proposal for new `xy-chart` package

    RFC: Proposal for new `xy-chart` package

    Motivation

    vx packages are (by design) low-level and modular which maximizes their flexibility, but also requires more work to create even simple charts. My library @data-ui/xy-chart is built on top of vx and was designed to make it easier to create common charts with less work. To solve this use-case within the vx ecosystem, and consolidate these efforts, @data-ui/xy-chart is being deprecated and we plan to port its functionality to a new vx package @vx/xy-chart.

    Goals of this RFC

    • align on near- and mid-term features
    • align on an XYChart API
    • align on a general direction for implementation

    Features

    To have feature parity with @data-ui/xychart, the new package should support the following:

    • Computes and provides x- and y- scales across all data series
    • Handles mouse events for the XYChart across all data series
      • Positions tooltips and provides tooltip data
      • Supports programmatic tooltip control
      • Mouse events can be defined at chart or series level, can be disabled at series level
    • Supports the following *Series which are mostly wrappers around vx
      • Bar, Line, Point, Area, AreaDifference, StackedArea, StackedBar, GroupedBar, BoxPlot, ViolinPlot, Interval
    • Exports CrossHair component for use with Tooltip
    • Exports XAxis and YAxis components from vx
    • Supports horizontal and vertical reference lines
    • Supports x- and y-gridlines
    • Supports brush functionality (pre @vx/brush)
    • Supports styles with LinearGradient, Patterns, and a chart theme via props
    • Wraps individual points in FocusBlur handlers that are a11y accessible / tab-able

    We would also like to add additional support for the following:

    New near-term features

    • re-written in TypeScript
    • responsive by default
    • supports arbitrary datum shape + x / y data accessors (currently requires { x, y } datum shape)
    • first-class hooks support

    New mid-term features

    • optionally render Tooltip in a Portal to fix z-index stacking context problem
    • easy creation of Legends
    • better support for overlays / annotations (points + regions)
    • integration with @vx primitives like brush, zoom, and drag
    • canvas support – vx is currently mostly svg based (this likely requires updates in other vx packages)
    • animation – @data-ui does not support animation. while this may not need to be fully baked in we should expose hooks to animate xy-chart

    API

    @techniq has done some great research on declarative react chart APIs here. Generally they are composable:

    <Chart {...}>
  <Axis {...} /> 
  <Gridlines {...} /> 
  <Legend />
  <DataSeries {...} /> 
  <DataSeries {...} />
</Chart>

    However there are some key differences:

    data provided at the DataSeries level vs the chart container level

    1. DataSeries level – ✅ favored
    () => <Chart><DataSeries data={...} /></Chart>

    Pros 👍

    • it's more "natural" to directly link data to the series that will visually represent it
    • @vx/shape's (the basis for DataSeries) currently require data, so this is more consistent with separate package APIs
    • Series can use any custom logic they need for computing the x- and y- extent from their data, and the Chart container can simply collect these
      • additionally this allows more advanced functionality like horizontal orientation to be pushed to the Series-level without requiring it to be implemented by all Series and the Chart container doesn't need to have any knowledge of it

    Cons 👎

    • Chart container needs a way to access the data across all series

    1. Chart container level – ❌ disfavored
    () => <Chart data={...}><DataSeries /></Chart>

    Pros 👍

    • ultimately the Chart needs access to all data in order to provide x- and y- scales; this makes that easy.

    Cons 👎

    • Series may require custom logic to compute x- and y- extent from their data (e.g., a bar stack) which the Chart needs to be aware of in this model
    • still requires key accessors at the Series-level for Series data
    • forces all DataSeries to have the same data length (or be filled with empty values)

    Mouse and Touch events

    Mouse and touch events are handled in several ways

    1. Standard mouse events – ✅ favored react-vis and @data-ui expose mouse and touch events at both the Chart and Series level; these use standard react events such as onClick, onTouchMove, etc.

    2. Custom event syntax – ❌ disfavored Some libraries like Victory have their own custom event system with non-standard syntax and selection language.

    react hooks

    I've not been able to find any react vis libraries which expose hooks. Feels like an opportunity on top of a render / component API 😏

    Implementation

    We'd like to improve upon the following limitations of @data-ui v1 implementation:

    1. Written in TypeScript @data-ui was written in JavaScript, but vx is now a TypeScript project and typings will be similarly useful for @data-ui.

    2. Use react context over cloning children @data-ui was implemented before the new / more robust 16.3 context API. Therefore chart styles and shared scales are passed via props + React.cloneElement. Combined with hooks, using context should open up a whole new set of API possibilities (see below).

    What is kept in context

    The function of the XYChart wrapper largely equates to managing shared state across the elements of a chart, which components can leverage as needed. . This includes

    • chart theme + styles
    • xScale that accounts for data range of all chart series and chart width + margin
    • yScale that accounts for data range of all chart series and chart height + margin
    • tooltipData + tooltipCoords, when applicable

    In addition to chart width + height, the Chart container must have knowledge of all data (+ annotation) values to compute scales appropriately. Rather than having the Chart introspect props from child DataSeries or Annotations (which can get gnarly) we propose that DataSeries and Annotations register their data, xValues, and yValues in context.

    This pushes the logic of data <> x/y extent mapping to DataSeries rather than the Chart, and allows the Chart to leverage these values to compute scales properly. It could look something like

    // in e.g., <LineSeries {...props} />
const { key, data, xAccessor, yAccessor } = props;
const { registerData } = useContext(XYChart);

registerData({
  dataKey: key,
  xValues: data.map(d => xAccessor(d)),
  yValues: data.map(d => yAccessor(d)),
  // other interesting things to do at this level
  mouseEvents: false,
  legendItemRenderer,
});

    Unknowns

    I'm unsure if there are major performance implications of using hooks ⚡ 🐌

    Proposed API

    // all of these items have access to the same Chart `context` which includes
// theme, dataRegistry, xScale, yScale, colorScale, tooltipData, tooltipCoords
const { ChartProvider, XYChart, Legend, Tooltip } = useChart({ theme, scaleConfig, ... }));

() => (
  {/* context provider */}
  <ChartProvider>
   {/** 
     * Chart renders `svg` container and computes `x-` and `y-scale`s using the 
     * data registry context. It is either passed `width`/`height`, or it uses 
     * `@vx/responsive` for auto-sizing
     */}
    <XYChart>
     {/** 
       * DataSeries register their data on mount. When `x-` and `y-scale`s 
       * are computed and available in context they render data. 
       */}
      <LineSeries key={dataRegistryKey} data={...} />
    
     {/** 
       * Axes use `x-` or `y-scale`s from context based on orientation.
       */}
      <Axis orientation="left" />

      {/* Custom axis component could use `scale`s from context */}
      <CustomAxis />
    </XYChart>

    {/** 
      * Tooltip is `html`-based so should be rendered outside the chart `svg`
      * It has access to `tooltipData` and `tooltipCoords` from context.
      */}
    <Tooltip renderInPortal={boolean} />

    {/** 
       * Legend is `html`-based so should be rendered outside the chart `svg`. 
       * It has access to all series via `dataRegistry` from context, 
       * or we could add a legend renderer registry.
       */}
    <Legend  />
  </ChartProvider>
)

    The same functionality could be provided in a component API:

    import { ChartProvider, XYChart, Legend, Tooltip } from '@vx/xy-chart`

() => (
  <ChartProvider theme={...} {...scaleConfig} >
    <XYChart {...} />
    <Legend {...} />
    <Tooltip {...} />
  </ChartProvider>
)

    cc @hshoff @techniq @kristw

    🚀enhancement 💬 discussion 
    opened by williaster 25
  • feat(brush): add using widows move events with brush

    feat(brush): add using widows move events with brush

    The new param isUseWindowMoveEvents will allow window event listeners to control dragging move and end.

    :rocket: Enhancements

    It's possible to move the cursor away from the brush area (and finish brushing there).

    Related PR and issues: PR: PR-1110 Issue: #1109

    My goal here - in the "isUseWindowMoveEvents" mode handle all mouse movements and mouse up events on the Base Brush component level. If there are examples for BrushCorner in the gallery I could try to handle it too.

    🚀enhancement @visx/brush @visx/drag minor-release 
    opened by d3x42 24
  • deps: upgrade deps to allow react@^17

    deps: upgrade deps to allow react@^17

    opened by williaster 21
  • new: add `XYChart` proof-of-concept

    new: add `XYChart` proof-of-concept

    :rocket: Enhancements

    This is a proof-of-concept PR for the XYChart discussed in #734, hopefully to become @vx/xy-chart. The Example is becoming somewhat overloaded / large, but it's mostly to play with and test different functionality.

    Check out the sandbox link for a live demo.

    image

    Implemented functionality

    • [x] ChartProvider context
      • handles data registry for Series and computes scales, considering data in the registry
    • [x] TooltipProvider context
    • [x] responsive dimensions
      • [ ] super performant (currently context width/height updates aren't great)
    • [x] theming
      • [x] default light + dark themes
      • [x] series use context colorScale by default, which uses theme colors. can be overwritten with props
    • [x] multiple series types
      • [x] LineSeries
      • [x] BarSeries
        • [x] requires mechanism to override findNearestDatum logic
      • [x] Stack
        • [x] requires mechanism to override x/yDomain to account for sum of stack values
        • [x] requires mechanism to override findNearestDatum logic
      • [x] Group
        • [x] requires mechanism to override findNearestDatum logic
    • [x] animation
      • [x] proof-of-concept animated series
        • ~[ ] export animated + unanimated versions~ I think this can be done in actual implementation
      • [x] AnimatedAxis (should go to @vx/axis)
      • [x] animate complex series Group
      • [x] animate complex series Stack
    • [x] tooltips
      • [x] render tooltip in a Portal, uses react-use-measure for bounds detection
      • [x] add Portal to @vx/tooltip #755
      • ~uses a voronoi based algorithm to find closes datum across all series; this seems to work well for LineSeries & BarSeries~ need to update this UX / logic
      • [x] tooltips get access to closestDatum, and the closestData across all series
      • [x] series can opt out of mouse events
      • [x] series like horizontal Bar + GroupedBar need a mechanism to override tooltip triggering logic
    • [x] legends
      • [x] smart defaults using context (colorScale + theme) + per-series legendShape
      • supports full override of any of @vx/legend API
      • [x] new functionality required in @vx/legend #749
    • [ ] ~generics for Datum, XScaleInput, and YScaleInput work correctly (partially done)~ I think types can be fixed in actual implementation
    • [ ] ~integration with @vx/brush (partially done, not in demo)~ will complete in actual implementation
    • [ ] ~integration with @vx/zoom~ will complete in actual implementation

    @techniq @hshoff @kristw

    🚀enhancement 
    opened by williaster 18
  • deps(scale): bump `d3-interpolate` and `d3-scale`

    deps(scale): bump `d3-interpolate` and `d3-scale`

    Closes #1577

    Bumping these packages allows for d3-color version 3.1.0 or higher to be installed, fixing this vulnerability: https://github.com/advisories/GHSA-36jr-mh4h-2g58

    :bug: Bug Fix

    🐛 bug @visx/scale minor-release security 
    opened by jreyes33 16
  • ReactDOM.findDOMNode() in @vx/bounds

    ReactDOM.findDOMNode() in @vx/bounds

    Hi, we encountered this warning

    Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of withBoundingRects() which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by Tooltip)
    in Tooltip (created by TooltipWithBounds)
    in TooltipWithBounds (created by withBoundingRects())

    Is it possible to replace findDOMNode with a ref in WrappedComponent.componentDidMount here?

    👋 help wanted needs followup 
    opened by sosloow 16
  • fix: tickLabelProps dy and dx work again

    fix: tickLabelProps dy and dx work again

    This should fix the bug mentioned in https://github.com/hshoff/vx/issues/267. I had several problems with this which made me come to the solution of using transforms for this bug fix.

    1. px values for dx and dy were fine and worked.
    2. em values were fine as long as fontSize was explicitly provided for <Text />. Without fontSize there is no value to use for the transformation from em -> px without accessing the DOM.
    3. rem units had the same problem that there is no way of transforming to px without the DOM.
    4. I couldn't do <text dy="1em">...</text> because the child <tspan> defines a dy value that overwrites the one from <text>. I'm not quite sure why. example

    In the end setting a CSS transform seemed like the easiest solution and has the nice benefit of supporting rem.

    If there is a better solution please let me know, this took longer than I want to admit 😅.

    :bug: Bug Fix

    • @vx/text support dx and dy again
    opened by sto3psl 16
  • Is it possible to fill above and below two AreaClosed?

    Is it possible to fill above and below two AreaClosed?

    example

    I have two AreaClosed components like so: https://pastebin.com/i7Dh5ZTQ

    Is there a way to fill in between the black lines? I've tried @vx/threshold but that didn't seem to work.

    threshold code: https://pastebin.com/cmySkwwV

    Thanks!

    🔮 question 
    opened by kevinxia787 15
  • [future] cross-platform support

    [future] cross-platform support

    vx should work on web, native, vr, everywhere. The current implementation depends on react-dom which means it's only available on web.

    @lelandrichardson's talk React as a Platform https://www.youtube.com/watch?v=hNwQPJy-XZY https://github.com/lelandrichardson/react-primitives-art

    🚀enhancement 
    opened by hshoff 15
  • React 18 Support

    React 18 Support

    Would it be possible to check on having React 18 support? This seems like it might be trivial, and it seems like a number of projects are dependent on React 18 support #1470 (including my own).

    (New issue created because the original issue was created due to a vx vs visx difference and therefore closed).

    Thanks so much!

    🚀enhancement 👋 help wanted @visx/visx 
    opened by AndrewJSchoen 13
  • deps(demo): upgrade to next@11

    deps(demo): upgrade to next@11

    :house: Internal

    Before it was reverted, https://github.com/airbnb/visx/pull/1578 broke the nextjs site due to the resulting d3-* ESM modules with the error

    Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/christopher-williams/dev/visx/packages/visx-demo/node_modules/@visx/scale/node_modules/d3-scale/src/index.js from /Users/christopher-williams/dev/visx/packages/visx-demo/node_modules/@visx/scale/lib/scales/band.js not supported.

    This PR

    • updates the demo site from [email protected] to next@^11 and turns on its experimental support for esm modules
      • no breaking changes for 9=>10
      • no breaking changes for us for 10=>11 because we're on react@18, but some SSR mismatch errors surfaced which I fixed
    • adds next-transpile-modules with config for the problematic d3-* packages
      • when trying different combinations I found this was still necessary
    • updated some misc deps (e.g., added webpack for happo) and updated the tsconfig for visx-demo which was trying to extend a base root config which wasn't working great

    verified that the site builds locally when rebased on #1578

    🏠 internal 📝 docs @visx/demo 
    opened by williaster 0
  • breaking(responsive, xychart): require ResizeObserver or polyfill

    breaking(responsive, xychart): require ResizeObserver or polyfill

    :boom: Breaking Changes

    Cleaning up some legacy stuff here in preparation for the 3.0.0 breaking release:

    • removes ParentSizeModern and withParentSizeModern which assume a globally-available ResizeObserver polyfill
    • removes the global ResizeObserver polyfill in ParentSize and withParentSize, and add resizeObserverPolyfill as an optional prop (component) / option (enhancer)
    :boom: breaking changes @visx/responsive @visx/xychart 
    opened by williaster 1
  • Is it possible to create a group and stacked vertical bar chart?

    Is it possible to create a group and stacked vertical bar chart?

    Hi, people.

    I've been tried so many ways in last weeks to create a group stacked vertical bar, like this:

    image

    But I just got the standard bar group that can be found in Gallery examples

    image

    I also queried some discussions on the repo and found this https://github.com/airbnb/visx/issues/1442, but I haven't success.

    Thanks for helping.

    opened by victorodgs 0
  • XYChart not showing tooltip on right end of the x-axis scale

    XYChart not showing tooltip on right end of the x-axis scale

    I've reproduced a codesandbox MVE showing a case where tooltips do not show up on the right end of the x-axis scale.

    Am i missing something in the setup or is this a bug? I have the impression that I'm following pretty closely the XYChart kitchen sink implementation from the Visx gallery but I may have skipped something.

    CleanShot 2022-11-23 at 10 46 02

    import React from "react";
import { Axis, BarSeries, BarStack, Tooltip, XYChart } from "@visx/xychart";
import { timeFormat } from "d3-time-format";
import { format } from "date-fns";

import { data } from "./data";

type Datum = typeof data[0];

const accessors = {
  xAccessor: ({ _time }: Datum) => new Date(_time).getTime(),
  totalAccessor: ({ total }: Datum) => total,
  londonAccessor: ({ london }: Datum) => london,
  parisAccessor: ({ paris }: Datum) => paris
};

export const StackedBarChart = ({
  width,
  height
}: {
  width: number;
  height: number;
}) => {
  console.log(width, height);
  return (
    <XYChart
      width={width}
      height={height}
      xScale={{ type: "band", paddingOuter: 1, paddingInner: 0.05 }}
      yScale={{ type: "linear" }}
    >
      <Axis
        orientation={"bottom"}
        numTicks={4}
        tickFormat={timeFormat("%b %d")}
      />
      <Axis orientation={"left"} numTicks={10} />
      <BarStack offset={"diverging"}>
        <BarSeries
          data={data}
          dataKey="Time"
          xAccessor={accessors.xAccessor}
          yAccessor={accessors.londonAccessor}
          radius={2}
        />
        <BarSeries
          data={data}
          dataKey={"paris"}
          xAccessor={accessors.xAccessor}
          yAccessor={accessors.parisAccessor}
          radius={2}
        />
      </BarStack>
      <Tooltip<Datum>
        snapTooltipToDatumX
        snapTooltipToDatumY
        showVerticalCrosshair
        renderTooltip={({ tooltipData }) => {
          console.log(tooltipData?.nearestDatum);
          if (
            !tooltipData?.nearestDatum?.datum ||
            !tooltipData?.nearestDatum?.key
          ) {
            return;
          }

          return (
            <div
              key={tooltipData.nearestDatum.key}
              style={{
                minWidth: 100
              }}
            >
              <p>
                {format(
                  new Date(accessors.xAccessor(tooltipData.nearestDatum.datum)),
                  "yyyy MMMM dd"
                )}
              </p>
              <hr />
              <p>
                Total:
                {accessors
                  .totalAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
              <p>
                paris:
                {accessors
                  .parisAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
              <p>
                london:
                {accessors
                  .londonAccessor(tooltipData.nearestDatum.datum)
                  ?.toFixed(0)}
              </p>
            </div>
          );
        }}
      />
    </XYChart>
  );
};
    opened by jodoox 0
  • tickLabelProps: width calculation in based on style object only

    tickLabelProps: width calculation in based on style object only

    Hello, I was working with AxisBottom.tickLabelProps recently and discovered a quirk - ignore if this behavior is intended, but I didn't find it intuitive and figure others might not.

    In my <AxisBottom> component, I had

    tickLabelProps={(value) => ({
  fontSize: 11,
  width: 75
})}

    Through some investigation, I found that strings in the tick labels with pixel widths shorter than 75 were still getting split up into two lines. Eventually, through digging in the text utils and finding getStringWidth from '@visx/text', I learned that the width is calculated using a style object. So, my intended behavior was achieved by reorganizing the tickLabelProps arg:

    tickLabelProps={(value) => ({
  style: {
    fontSize: 11,
  },
  width: 75
})}

    I think it would help users out to apply any tickLabelProps that are allowed in the style object to the width calculation. Or, perhaps it makes more sense to restrict those args so that they can't be directly passed to tickLabelProps and can only be passed within a style object.

    opened by devinsimmons 0
Releases(v2.18.0)

  • v2.18.0(Jan 3, 2023)

    v2.18.0 (2023-01-03)

    :bug: Bug Fix

    • fix(demo/pages/docs): use relative imports to fix API docs #1612
    • Revert breaking "deps(scale): bump d3-interpolate and d3-scale" #1619

    :memo: Documentation

    • fix(demo/pages/docs): use relative imports to fix API docs #1612

    :trophy: Contributors

    Source code(tar.gz)
    Source code(zip)

  • v2.17.0(Dec 22, 2022)

  • v2.16.1(Dec 20, 2022)

  • v2.10.0(May 9, 2022)

    What's Changed

    • docs: add WHO in the wild by @artidata in https://github.com/airbnb/visx/pull/1486
    • deps: Update to support React 18 by @Gaya in https://github.com/airbnb/visx/pull/1483
    • new(react-spring): add tickLineProps to AnimatedTicks by @Zenith00 in https://github.com/airbnb/visx/pull/1490
    • feat(xychart): add colorAccessor to LineSeries by @Zenith00 in https://github.com/airbnb/visx/pull/1489

    New Contributors

    • @artidata made their first contribution in https://github.com/airbnb/visx/pull/1486
    • @Gaya made their first contribution in https://github.com/airbnb/visx/pull/1483
    • @Zenith00 made their first contribution in https://github.com/airbnb/visx/pull/1490

    Full Changelog: https://github.com/airbnb/visx/compare/v2.9.2...v2.10.0

    Source code(tar.gz)
    Source code(zip)

  • v1.6.1(Mar 8, 2021)

    :bug: Bug Fix

    • fix(network): string type in node/linkComponent #1078
    • fix(xychart/Axis): export AxisScale type, set default Scale generic #1094

    :memo: Documentation

    • fix(network): string type in node/linkComponent #1078

    :house: Internal

    • build(happo): decrease compare threshold #1088
    • new(workflows/push): automate releases #1073

    :trophy: Contributors

    Source code(tar.gz)
    Source code(zip)

  • v1.6.0(Feb 18, 2021)

    :rocket: Enhancements

    • [xychart] add x/y0Accessor functions to support AreaSeries bands #1071

    :bug: Bug Fix

    • [xychart] make AnnotationLabel's make dataKey optional #1072
    • [annotation] account for fontFamily in Label styles so Text uses it in its size calculations #1072
    Source code(tar.gz)
    Source code(zip)

  • v1.5.0(Feb 12, 2021)

    :rocket: Enhancements

    • [grid] add GridPolar, GridAngle, and GridRadial #1007
    • [mock-data] add stable randomness #1033
    • [xychart] add AreaStack #1019 closes #994
    • [visx/visx] export @visx/xychart package #1043 closes #974
    • [axis] pass all tick values in tickLabelProps signature #1044

    :bug: Bug Fix

    • [xychart] improve Tooltip positioning with missing data #1068 closes #1054
    • [xychart] make Tooltip postion robust to container changes #1045 closes #983
    • [xychart] fix scales for BarStack offset #1019
    • [xychart] add SVGPathElement props to BaseAreaSeries lineProps #1046

    :memo: Documentation

    • sync code of conduct with Airbnb #1013
    • [demo/*] respect prefersReducedMotion #1037
    • [demo/barstack] improve Tooltip positining logic #1018 closes #1018
    • [demo/xychart] add AreaStack, stackOffset control #1020
    • [in the wild] add eft.monster #1010

    :house: Internal

    • [testing] add happo for screenshot testing #1030
    • [xychart/areastack] add tests #1036
    • [CI] add package size checks + auto gallery deploy #1048
    Source code(tar.gz)
    Source code(zip)

  • v1.4.0(Jan 11, 2021)

    :rocket: Enhancements

    • [xychart] make event in EventHandlerParams optional #972
    • [xychart] add colorAccessor to relevant series #1005, closes #996
    • [xychart] include zero in scale domains by default #1008

    :bug: Bug Fix

    • [xychart] fix scale options not applied in XYChart #987, closes #986
    • [xychart] expose more AnnotationLineSubject types, fix strokeWidth application #991
    • [annotation] fix application of object type Label props.backgroundPadding, add default anchorLineStroke #989
    • [stats] fix handling of 0 in BoxPlot valueScale #993
    • [xychart] enable style overflow in crosshairs #997

    :memo: Documentation

    • [xychart] add advanced usage sandbox examples #972
    • [xychart] fix missing #972
    • [annotation] add docs for Label #989
    Source code(tar.gz)
    Source code(zip)

  • v1.3.0(Dec 15, 2020)

    :rocket: Enhancements

    • [responsive] Add ParentSizeModern, withParentSizeModern that don't add ResizeObserver polyfill #925
    • [scale] add scaleRadial #958
    • [text] add useText hook, refactor Text to use it #946
    • [event] support FocusEvents in localPoint #956
    • [xychart] release package #965
    • [xychart] add PointerEvent handlers to XYChart, all Series #947
    • [xychart] add support for FocusEvents #959
    • [xychart] integrate Annotations #938

    :bug: Bug Fix

    • [shape] set y0 when it equals zero #955

    :memo: Documentation

    • [xychart] add README and /docs/xychart to demo site #963
    • [demo] fix view demo hover pointer style #929
    • [tooltip] fix offsetTop documentation #970

    :house: Internal

    • [xychart] add FocusEvent tests #962
    • [xychart] add PointerEvent tests #952
    • [xychart] add Annotations tests #948
    Source code(tar.gz)
    Source code(zip)

  • v1.2.0(Nov 25, 2020)

    :rocket: Enhancements

    • [brush] expose updateBrush method via innerRef #934, closes #577
    • [annotation] add new Annotation components (Annotation, EditableAnnotation, Label, CircleSubject, LineSubject) #907
    • [drag] add useDrag hook #902
    • [drag] allow x,y,dx,dy overrides in useDrag + Drag #906, closes #905
    • [annotation] add canEditSubject, canEditLabel to EditableAnnotation #919
    • [xychart (unpublished)] make DataProvider optional #913
    • [xychart (unpublished)] expose curve types in BaseAreaSeries, BaseLineSeries #899
    • [xychart (unpublished)] handle rendering + tweening missing values #898
    • [xychart (unpublished)] add (Animated)GlyphSeries #885
    • [xychart (unpublished)] add AreaSeries + AnimatedAreaSeries #878
    • [xychart (unpublished)] add AnimatedLineSeries #874
    • [xychart (unpublished)] add Animated(BarSeries, BarStack, BarGroup) #873

    :bug: Bug Fix

    • [shape] conditionally render Arc without data #937

    :memo: Documentation

    • [demo/annotation] add annotation demo #909
    • [demo] visx rebrand, move to github pages #890, fixes #850 #861
    • [in the wild] add tokenizedbtc #931

    :house: Internal

    Source code(tar.gz)
    Source code(zip)

  • v1.1.0(Oct 17, 2020)

    v1.1.0

    :rocket: Enhancements

    • [scale] bump @types/d3-scale to ^3.1.0 #856 closes #855
    • [shape] set Line shapeRendering to crispEdges if rectilinear #840
    • [network] apply fill & radius to DefaultNode #859
    • [tooltip] add applyPositionStyle prop so users don't have to set absolute positioning when unstyled=true #857
    • [responsive] add initialWidth and initialHeight to withParentSize #836 closes #554
    • [responsive] add ignoreDimensions prop to optimize re-renders #834 closes #247
    • [xychart (unpublished)] add BarSeries #808
    • [xychart (unpublished)] add BarGroup #870 #871
    • [xychart (unpublished)] add BarStack #865 #866
    • [xychart (unpublished)] add EventEmitterContext, TooltipContext #825
    • [xychart (unpublished)] add Tooltip #852

    :bug: Bug Fix

    • [tooltip] fix TooltipWithBounds overlowing its parent on small screens #837 closes #466
    • [tooltip] fix TooltipWithBounds positioning when unstyled=true #828
    • [stats] don't throw when first and third quartile are equal #841 closes #427
    • [stats] update min/max to handle no outliers case #853 closes #851
    • [text] render 0 as number #814 fixes #813
    • [shape] render LinkHorizontalStep horizontally not vertically #847 closes #820
    • [axis] fix tickLabelProps when hideZero=true #818 fixes #815
    • [demo/areas] handle non-zero margins #877

    :house: Internal

    • [responsive] refactor ParentSize to function component #834
    • [text] improve test coverage #833
    • [pattern] remove code duplication #838

    :memo: Documentation

    • [in the wild] add Wall Street Journal: Americans Familiarize Themselves with the Word ‘Forbearance’ #843
    • [in the wild] add dollar-to-food-emoji #860
    • [in the wild] remove deadlinks, add Taiwan Real-time Air Quality Index #867
    • [project readme] fix typos #826
    Source code(tar.gz)
    Source code(zip)

  • v1.0.0(Sep 22, 2020)

    v1.0.0

    :house: Internal

    • project renamed from vx => visx, migrated from hshoff/vx => airbnb/visx #802, #803

    :memo: Documentation

    • Demo site migrated from https://vx-demo.now.sh/ => https://airbnb.io/visx #804
    • Demo site re-brand

    :boom: Breaking Changes

    • [all packages] vx-... classNames are renamed to visx-... #803
    • [demo] existing codesandbox links which reference vx-demo directory structure will break #803
    • [tooltip] className="vx-tooltip-portal" => visx-tooltip (so as not to be confused with the new TooltipInPortal) #803

    :bug: Bug Fix

    • [demo] fix /axis codesandbox dependency #799
    Source code(tar.gz)
    Source code(zip)

  • v0.0.199(Sep 9, 2020)

    :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

     - @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
    Source code(tar.gz)
    Source code(zip)

  • v0.0.198(Jul 6, 2020)

    :rocket: Enhancements

    • feat(tooltip): add Portal and useTooltipInPortal #756
    • feat(responsive): add leading option to resize debounce #754
    • feat(axis): use numTicks when falling back on scale.domain #752
    • feat(pattern): add diagonal right to left pattern #744
    • feat(legend): add Line shape, legendLabelProps, and more props in renderShape #749

    💥 Breaking Changes

    • feat(responsive): resize debounce now defaults to true which will result in an additional render #754
    • feat(tooltip): add offsetLeft/Top to TooltipProps, making TooltipProps === TooltipWithBoundsProps, adds additional 10px of padding to Tooltip left/top #756

    :bug: Bug Fix

    • fix(responsive): remove debounced calls after unmounnt #558

    :house: Internal

    • (demo): add static export deploys #741
    Source code(tar.gz)
    Source code(zip)

  • v0.0.197(Jun 4, 2020)

    :rocket: Enhancements

    • feat(tooltip): add unstyled prop to TooltipWithBounds #721
    • perf(tooltip): use useCallback in useTooltip #668

    :bug: Bug Fix

    • fix(zoom): fix zoom.dragMove on touchmove event y-coord #725

    :memo: Documentation

    :house: Internal

    • deps(root): bump yarn.lock, add @types/webpack #740
    • fix(demo/package.json): lock next.js version #740
    • fix(demo): prettier config updated so lots of minor style updates #740
    • fix(demo/next.config.js): fix invalid webpack config error #740
    • fix(demo/pages): routes are case sensitive (/Docs => /docs) #740
    • feat(demo/gallery): gallery filter persists on query param ?pkg instead of local state #740

    :trophy: Contributors

    Changes: 
 - @vx/annotation: 0.0.196 => 0.0.197
 - @vx/axis: 0.0.196 => 0.0.197
 - @vx/bounds: 0.0.196 => 0.0.197
 - @vx/brush: 0.0.196 => 0.0.197
 - @vx/chord: 0.0.196 => 0.0.197
 - @vx/clip-path: 0.0.196 => 0.0.197
 - @vx/curve: 0.0.196 => 0.0.197
 - @vx/demo: 0.0.196 => 0.0.197
 - @vx/drag: 0.0.196 => 0.0.197
 - @vx/event: 0.0.196 => 0.0.197
 - @vx/geo: 0.0.196 => 0.0.197
 - @vx/glyph: 0.0.196 => 0.0.197
 - @vx/gradient: 0.0.196 => 0.0.197
 - @vx/grid: 0.0.196 => 0.0.197
 - @vx/group: 0.0.196 => 0.0.197
 - @vx/heatmap: 0.0.196 => 0.0.197
 - @vx/hierarchy: 0.0.196 => 0.0.197
 - @vx/legend: 0.0.196 => 0.0.197
 - @vx/marker: 0.0.196 => 0.0.197
 - @vx/mock-data: 0.0.196 => 0.0.197
 - @vx/network: 0.0.196 => 0.0.197
 - @vx/pattern: 0.0.196 => 0.0.197
 - @vx/point: 0.0.196 => 0.0.197
 - @vx/responsive: 0.0.196 => 0.0.197
 - @vx/scale: 0.0.196 => 0.0.197
 - @vx/shape: 0.0.196 => 0.0.197
 - @vx/stats: 0.0.196 => 0.0.197
 - @vx/text: 0.0.196 => 0.0.197
 - @vx/threshold: 0.0.196 => 0.0.197
 - @vx/tooltip: 0.0.196 => 0.0.197
 - @vx/voronoi: 0.0.196 => 0.0.197
 - @vx/vx: 0.0.196 => 0.0.197
 - @vx/zoom: 0.0.16 =>  0.0.19
    Source code(tar.gz)
    Source code(zip)

  • v0.0.196(May 2, 2020)

    v0.0.196

    :rocket: Enhancements

    • [tooltip] Remove tooltip default styles #666
    • [brush] Add initialBrushPosition #618, fix in #667

    :memo: Documentation

    • [demo] Several demos refactored to link out to codesandbox
    Source code(tar.gz)
    Source code(zip)

  • v0.0.195(Feb 27, 2020)

    :rocket: Enhancements #631

    • [tooltip] useTooltip hook added

    :boom: Breaking Changes #631

    • [tooltip] internally introduces useState, requires bumping the peerDep for react to ^16.8.0-0

    :memo: Documentation #631

    • [tooltip] add useState to readme, add advice on HOC vs hooks
    • [demo] Rewrite the BarStack demo to use useTooltip instead of withTooltip
    Source code(tar.gz)
    Source code(zip)

  • v0.0.194(Feb 14, 2020)

    :rocket: Enhancements

    • [brush] Add resetOnEnd prop #614
    • [tooltip] Add hook for custom Tooltip container to support SVG tooltips #610
    • [scale] Add sqrtScale #615

    :bug: Bug Fix

    • [zoom] Don't use stale zoom constraint prop #578
    • [responsive] Don't render withParentSize base component until size is known #621
    Source code(tar.gz)
    Source code(zip)

  • v0.0.193(Jan 30, 2020)

    See the TypeScript project for a full list of issues + PRs.

    :rocket: Enhancements

    • [@vx/*]
      • all packages re-written in TypeScript and export types under lib/index.d.ts
      • Many misc bug fixes with improved type safety, most propTypes are likely stricter now
    • [brush] @vx/brush now exports a working Brush component :tada:
    • [demo]
      • all gallery demos re-written with react hooks + types
      • new @vx/brush demo is added

    :memo: Documentation

    • [@vx/*] all components in all packages now have full doc strings. note: these is not yet reflected on the docs site.

    :boom: Breaking Changes

    • [boxplot] @vx/boxplot deprecated in favor of @vx/stats #561
    • [mock-data] radius and distance values in the @vx/mock-data exoplanet dataset were updated from strings to numbers to remove the need for consumers to coerce to numbers themselves #579
    • [drag] #499
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • Empty parent <g> wrapper around Drag children was replaced with a React.Fragment which removes a DOM element.
    • [pattern] PatternOrientation is no longer the default export of @vx/patterns/lib/constants and is instead a named export. PatternOrientation is still used as the export name if importing from the index: import { PatternOrientation } from '@vx/pattern' #503
    • [shape] #507
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • the Arc centroid prop was removed as it was not functional (it was called as if it was an arc.centroid() configuration parameter, but in reality the .centroid method is for returning the centroid of a datum.
      • the Area component is no longer wrapped in an empty <g> element
      • order and offset props for Stack, BarStack, BarStackHorizontal, and AreaStack previously supported string, array, or functions. Only the string prop was functional, and only the enumerated string presets are now allowed.
    • [voronoi] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #512
    • [network] #535
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • <Nodes /> inner node wrapper <g> element className changed to singular (vx-network-nodes => vx-network-node) and outer wrapper <g> was replaced with a React.Fragment
      • <Links /> inner link wrapper <g> element className changed to singular (vx-network-links => vx-network-link) and outer wrapper <g> was replaced with a React.Fragment
    • [glyph] #518
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • (non-functional) children prop removed from GlyphDot component
    • [heatmap] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #520
    • [hierarchy] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #524
    • [threshold] makes the Threshold id prop required #533
    • [geo] now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15 #537
    • [legend] #551
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • the following directory structures were changed which will break deep imports: src/legends/* => src/*
    • [stats] #570
      • now has a peerDep react@^16.3 for React.Fragment, dropping support for react@^15
      • the following directory structures were changed which will break deep imports
        • src/violinplot/ViolinPlot.jsx => src/ViolinPlot.tsx
        • src/boxplot/BoxPlot.jsx => src/BoxPlot.tsx

    :house: Internal

    • add TypeScript build support to monorepo #488
    • [text] Remove deprecated lifecycles used in Text #576
    Source code(tar.gz)
    Source code(zip)

  • v0.0.192(Oct 3, 2019)

    See #484 for details.

    :boom: Breaking Changes

    • [breaking] Deprecate build/ and dist/, use lib/ and esm/ instead
    • [breaking] Deprecate umd builds

    :house: Internal

    • use babel not rollup
    • use yarn not npm
      • this will enable workspaces so that we can push all config to the root instead of duplicating across every package as is the case now
    • Stricter linting rules (e.g., .jsx required for React files)
    Source code(tar.gz)
    Source code(zip)

  • v0.0.191(Sep 6, 2019)

    See #487 for details.

    :boom: Breaking Changes

    • [text] peerDep react@^16.3, deprecate react 15
    • [text] prefix lifecycle methods with UNSAFE_
    • [axis] peerDep react@^16.3, deprecate react 15 due to @vx/text dep
    • [demo] use react 16.9
    • [demo] prefix lifecycle methods with UNSAFE_

    :house: Internal

    • [internal] update deps: coveralls, lint-staged, marked

    :trophy: Contributors

    Changes:
 - @vx/axis: 0.0.190 => 0.0.191
 - @vx/demo: 0.0.190 => 0.0.191
 - @vx/text: 0.0.190 => 0.0.191
 - @vx/vx: 0.0.190 => 0.0.191
    Source code(tar.gz)
    Source code(zip)

  • v0.0.190(Jul 17, 2019)

    💥 Breaking Changes

    • [scale] d3-scale 2.2.2 changed the behavior of a collapsed domain. See this comment for how to handle the updated behavior. #477
    • [text] Don't split strings rendered by <Text /> when encountering a set of non-breaking space characters. #460

    :rocket: Enhancements

    • [group] add innerRef prop. #480
    • [scale] bump d3-scale dep to ^2.2.2 for scaleSymlog. #477
    • [scale] add scaleSymlog. #470

    :bug: Bug Fix

    • [stats] fix horizontal boxplot in @vx/stats. #476
    • [boxplot] fix horizontal boxplot in @vx/boxplot. #472
    • [heatmap] remove bin.x0. The x0 offset is accounted for in bin.x. #475

    :memo: Documentation

    • [docs][group] add innerRef prop. #480
    • [axis] fix tickLabelProps() prop default args for docs. #478
    • [glyph] remove outdated readme description. #478
    • [docs] run doc:gen script. #478

    :trophy: Contributors

    Changes:
 - @vx/annotation: 0.0.189 => 0.0.190
 - @vx/axis: 0.0.189 => 0.0.190
 - @vx/boxplot: 0.0.189 => 0.0.190
 - @vx/demo: 0.0.189 => 0.0.190
 - @vx/geo: 0.0.189 => 0.0.190
 - @vx/glyph: 0.0.189 => 0.0.190
 - @vx/grid: 0.0.189 => 0.0.190
 - @vx/group: 0.0.189 => 0.0.190
 - @vx/heatmap: 0.0.189 => 0.0.190
 - @vx/hierarchy: 0.0.189 => 0.0.190
 - @vx/legend: 0.0.189 => 0.0.190
 - @vx/marker: 0.0.189 => 0.0.190
 - @vx/network: 0.0.189 => 0.0.190
 - @vx/scale: 0.0.189 => 0.0.190
 - @vx/shape: 0.0.189 => 0.0.190
 - @vx/stats: 0.0.189 => 0.0.190
 - @vx/text: 0.0.189 => 0.0.190
 - @vx/threshold: 0.0.189 => 0.0.190
 - @vx/voronoi: 0.0.189 => 0.0.190
 - @vx/vx: 0.0.189 => 0.0.190
    Source code(tar.gz)
    Source code(zip)

  • v0.0.189(May 16, 2019)

    :boom: Breaking Changes

    • [shape] <Arc /> and <Pie pieValue={} /> props now check for !== undefined. Before 0 wouldn't set the prop to 0 because if (0) is false. This is only a breaking change if you were passing 0 before and happy with <Arc /> treating that as undefined and using d3.arc() defaults. #464
    • [zoom] make wheel event active by default. fixes Chrome 73 scroll intervention warning. #456
      • To keep the default behavior before Chrome 73 and remove console warnings in Chrome 73, remove: 
        <MyComponent
- onWheel={zoom.handleWheel}
/>
      • To make the onWheel events passive, add: 
        <Zoom
+ passive={true}
>
  {zoom => {
    return (
      <MyComponent
+      onWheel={zoom.handleWheel}
      /> 
    );
  }}
</Zoom>

    :rocket: Enhancements

    • [responsive][shape][text][geo] update innerRef propType to include PropType.object. #446

    :bug: Bug Fix

    • [text] move Babel dependencies to dev only. #461
    • [shape] <Arc /> now respects 0 as an allowed prop value. #464
    • [shape] <Pie /> pieValue now respects 0 as an allowed prop value. #464

    :memo: Documentation

    • [docs] update docs. #446
    • [glyph] fixes outdated @vx/glyph examples in the readme docs. #454

    :house: Internal

    • [internal] fix jest code coverage, update jest, move to babel.config.js + jest.config.js. #439
    • [internal] babel preset env target explorer => ie. #446
    • [internal] babel preset env target remove ucandroid. #446
    • [shape] add more <Arc /> tests. #464
    • [shape] convert Arc.test from CRLF => LF. #464

    :trophy: Contributors

    Changes:
 - @vx/annotation: 0.0.184 => 0.0.189
 - @vx/axis: 0.0.184 => 0.0.189
 - @vx/bounds: 0.0.182 => 0.0.189
 - @vx/boxplot: 0.0.183 => 0.0.189
 - @vx/brush: 0.0.182 => 0.0.189
 - @vx/chord: 0.0.183 => 0.0.189
 - @vx/clip-path: 0.0.183 => 0.0.189
 - @vx/curve: 0.0.182 => 0.0.189
 - @vx/demo: 0.0.188 => 0.0.189
 - @vx/drag: 0.0.183 => 0.0.189
 - @vx/event: 0.0.182 => 0.0.189
 - @vx/geo: 0.0.187 => 0.0.189
 - @vx/glyph: 0.0.183 => 0.0.189
 - @vx/gradient: 0.0.183 => 0.0.189
 - @vx/grid: 0.0.184 => 0.0.189
 - @vx/group: 0.0.183 => 0.0.189
 - @vx/heatmap: 0.0.183 => 0.0.189
 - @vx/hierarchy: 0.0.183 => 0.0.189
 - @vx/legend: 0.0.183 => 0.0.189
 - @vx/marker: 0.0.184 => 0.0.189
 - @vx/mock-data: 0.0.185 => 0.0.189
 - @vx/network: 0.0.183 => 0.0.189
 - @vx/pattern: 0.0.183 => 0.0.189
 - @vx/point: 0.0.182 => 0.0.189
 - @vx/responsive: 0.0.188 => 0.0.189
 - @vx/scale: 0.0.182 => 0.0.189
 - @vx/shape: 0.0.184 => 0.0.189
 - @vx/stats: 0.0.183 => 0.0.189
 - @vx/text: 0.0.183 => 0.0.189
 - @vx/threshold: 0.0.184 => 0.0.189
 - @vx/tooltip: 0.0.184 => 0.0.189
 - @vx/voronoi: 0.0.183 => 0.0.189
 - @vx/vx: 0.0.188 => 0.0.189
 - @vx/zoom: 0.0.185 => 0.0.189
    Source code(tar.gz)
    Source code(zip)

  • v0.0.188(Mar 15, 2019)

    :bug: Bug Fix

    • [responsive] add debounceTime back to prevent it spreading on children through restProps. #437

    :trophy: Contributors

    Changes:
 - @vx/demo: 0.0.187 => 0.0.188
 - @vx/responsive: 0.0.186 => 0.0.188
 - @vx/vx: 0.0.187 => 0.0.188
    Source code(tar.gz)
    Source code(zip)

  • v0.0.187(Mar 14, 2019)

    :rocket: Enhancements

    • [geo] add <CustomProjection projection={someProjectionFunction} />. #434

    :memo: Documentation

    • [demo] add <CustomProjection /> tile. #434

    :house: Internal

    • [geo] add <CustomProjection /> test. #435

    :trophy: Contributors

    Changes:
 - @vx/demo: 0.0.186 => 0.0.187
 - @vx/geo: 0.0.184 => 0.0.187
 - @vx/vx: 0.0.186 => 0.0.187
    Source code(tar.gz)
    Source code(zip)

  • v0.0.186(Feb 28, 2019)

    :memo: Documentation

    • [demo] cleanup DragII demo. #424
    • [demo] fixed broken BarStacks example. Bar Stack Horizontal example works correct, but BarStack for some reason uses ({ barStacks }) instead of barStacks. #423

    :bug: Bug Fix

    • [responsive] <ParentSize /> replace for..of with forEach() to fix IE11 error without having to sham Symbol. More info: https://github.com/hshoff/vx/issues/258 #428

    :trophy: Contributors

    Changes:
 - @vx/demo: 0.0.185 => 0.0.186
 - @vx/responsive: 0.0.184 => 0.0.186
 - @vx/vx: 0.0.185 => 0.0.186
    Source code(tar.gz)
    Source code(zip)

  • v0.0.185(Jan 31, 2019)

    :rocket: Enhancements

    • [zoom] add <Zoom />. #418
    • [mock data] add genPhyllotaxis(). #418

    :trophy: Contributors

    Changes:
 - @vx/demo: 0.0.184 => 0.0.185
 - @vx/mock-data: 0.0.182 => 0.0.185
 - @vx/vx: 0.0.184 => 0.0.185
 - @vx/zoom: 0.0.182 => 0.0.185
    Source code(tar.gz)
    Source code(zip)

  • v0.0.184(Jan 28, 2019)

    :rocket: Enhancements

    • [geo] add albersUsa projection in d3-geo to @vx/geo. #415
    • [geo] add equalEarth projection in d3-geo to @vx/geo. #407

    :bug: Bug Fix

    • [shape] fix proptype for LinePath defined prop. Should use oneOfType rather than oneOf. #414
    • [demo] remove unnecessary destructuring of props in demo code. #409
    • [responsive] fix proptype for ScaleSVG children prop. #408

    :memo: Documentation

    • [tooltip] fix tooltip docs. #403

    :trophy: Contributors

    Changes:
 - @vx/annotation: 0.0.183 => 0.0.184
 - @vx/axis: 0.0.183 => 0.0.184
 - @vx/demo: 0.0.183 => 0.0.184
 - @vx/geo: 0.0.183 => 0.0.184
 - @vx/grid: 0.0.183 => 0.0.184
 - @vx/marker: 0.0.183 => 0.0.184
 - @vx/responsive: 0.0.183 => 0.0.184
 - @vx/shape: 0.0.183 => 0.0.184
 - @vx/threshold: 0.0.183 => 0.0.184
 - @vx/tooltip: 0.0.182 => 0.0.184
 - @vx/vx: 0.0.183 => 0.0.184
    Source code(tar.gz)
    Source code(zip)

  • v0.0.183(Jan 4, 2019)

  • v0.0.182(Dec 12, 2018)

    :bug: Bug Fix

    • [tooltip] fractional pixel values can sometimes lead to shaky rendering when using Firefox. #389

    :memo: Documentation

    • [gallery] add <BarStackHorizontal /> example code back. #387
    • [readme] add a new demo of a project using vx components. #391

    :house: Internal

    :trophy: Contributors

    Changes:
 - @vx/annotation: 0.0.181 => 0.0.182
 - @vx/axis: 0.0.181 => 0.0.182
 - @vx/bounds: 0.0.165 => 0.0.182
 - @vx/boxplot: 0.0.181 => 0.0.182
 - @vx/brush: 0.0.179 => 0.0.182
 - @vx/chord: 0.0.166 => 0.0.182
 - @vx/clip-path: 0.0.165 => 0.0.182
 - @vx/curve: 0.0.165 => 0.0.182
 - @vx/demo: 0.0.181 => 0.0.182
 - @vx/drag: 0.0.179 => 0.0.182
 - @vx/event: 0.0.179 => 0.0.182
 - @vx/geo: 0.0.181 => 0.0.182
 - @vx/glyph: 0.0.181 => 0.0.182
 - @vx/gradient: 0.0.165 => 0.0.182
 - @vx/grid: 0.0.181 => 0.0.182
 - @vx/group: 0.0.170 => 0.0.182
 - @vx/heatmap: 0.0.181 => 0.0.182
 - @vx/hierarchy: 0.0.181 => 0.0.182
 - @vx/legend: 0.0.181 => 0.0.182
 - @vx/marker: 0.0.181 => 0.0.182
 - @vx/mock-data: 0.0.179 => 0.0.182
 - @vx/network: 0.0.179 => 0.0.182
 - @vx/pattern: 0.0.179 => 0.0.182
 - @vx/point: 0.0.165 => 0.0.182
 - @vx/responsive: 0.0.179 => 0.0.182
 - @vx/scale: 0.0.179 => 0.0.182
 - @vx/shape: 0.0.181 => 0.0.182
 - @vx/stats: 0.0.181 => 0.0.182
 - @vx/text: 0.0.179 => 0.0.182
 - @vx/threshold: 0.0.181 => 0.0.182
 - @vx/tooltip: 0.0.179 => 0.0.182
 - @vx/voronoi: 0.0.181 => 0.0.182
 - @vx/vx: 0.0.181 => 0.0.182
 - @vx/zoom: 0.0.165 => 0.0.182
    Source code(tar.gz)
    Source code(zip)
Owner
Airbnb
Airbnb
GitHub https://airbnb.io/visx
A React utility belt for function components and higher-order components.

A Note from the Author (acdlite, Oct 25 2018): Hi! I created Recompose about three years ago. About a year after that, I joined the React team. Today,

Andrew Clark 14.8k Jan 4, 2023
we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

we are make our components in story book. So if we add some components you can find document and example of useage in storybook.

고스락 6 Aug 12, 2022
Providing accessible components with Web Components & Material You

tiny-material Still on developing, DO NOT use for production environment Run well on Google Chrome, Firefox, Chrome for Android, Microsoft Edge (Chrom

HugePancake 11 Dec 31, 2022
Nextjs-components: A collection of React components

nextjs-components A collection of React components, transcribed from https://vercel.com/design. 1 Motivation Blog post from 01/09/2022 Todo's Unit tes

null 94 Nov 30, 2022
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!

Build bulletproof UI components faster Storybook is a development environment for UI components. It allows you to browse a component library, view the

Storybook 75.8k Jan 4, 2023
React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Brian Vaughn 24.5k Jan 7, 2023
Bootstrap components built with React

React-Bootstrap Bootstrap 4 components built with React. Docs See the documentation with live editable examples and API documentation. To find the doc

react-bootstrap 21.4k Jan 5, 2023
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

Chakra UI 30.5k Jan 4, 2023
:hourglass_flowing_sand: A higher order component for loading components with promises.

A higher order component for loading components with dynamic imports. Install yarn add react-loadable Example import Loadable from 'react-loadable'; i

Jamie Kyle 16.5k Jan 3, 2023
Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

React Hot Loader Tweak React components in real time ⚛️ ⚡️ Watch Dan Abramov's talk on Hot Reloading with Time Travel. Moving towards next step React-

Dan Abramov 12.2k Jan 1, 2023
React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Brian Vaughn 13.5k Jan 4, 2023
Simple React Bootstrap 4 components

reactstrap Stateless React Components for Bootstrap 4. Getting Started Follow the create-react-app instructions to get started and then follow the rea

reactstrap 10.4k Jan 5, 2023
🏎 A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components.

downshift ?? Primitives to build simple, flexible, WAI-ARIA compliant React autocomplete, combobox or select dropdown components. Read the docs | See

Downshift 11.1k Dec 28, 2022
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️

A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude

Claudéric Demers 10.3k Jan 2, 2023
React UI Components for macOS High Sierra and Windows 10

React UI Components for macOS High Sierra and Windows 10. npm install react-desktop --save Help wanted! I am looking for developers to help me develop

Gabriel Bull 9.4k Dec 24, 2022
A collection of composable React components for building interactive data visualizations

an ecosystem of composable React components for building interactive data visualizations. Victory Contents Getting Started Victory Native API Document

Formidable 10.1k Jan 3, 2023
A set of React components implementing Google's Material Design specification with the power of CSS Modules

React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integra

React Toolbox 8.7k Dec 30, 2022
nivo provides a rich set of dataviz components, built on top of the awesome d3 and Reactjs libraries

nivo provides supercharged React components to easily build dataviz apps, it's built on top of d3. Several libraries already exist for React d3 integr

Raphaël Benitte 10.9k Dec 31, 2022
Mobile app development framework and SDK using HTML5 and JavaScript. Create beautiful and performant cross-platform mobile apps. Based on Web Components, and provides bindings for Angular 1, 2, React and Vue.js.

Onsen UI - Cross-Platform Hybrid App and PWA Framework Onsen UI is an open source framework that makes it easy to create native-feeling Progressive We

null 8.7k Jan 8, 2023