merge main

.github/workflows/chromatic.yml

@@ -9,7 +9,6 @@ on:
     paths:
       - 'stories/**'
       - 'packages/**'
-    types: [ready_for_review]
 
 jobs:
   chromatic:

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Victory Changelog
 
+## 35.8.6 (2021-06-11)
+
+- [#1878](https://github.com/FormidableLabs/victory/pull/1878) - Downgrade `d3-array` dependency to correct for babel issue
+
+## 35.8.5 (2021-06-09)
+
+- [#1874](https://github.com/FormidableLabs/victory/pull/1874) - Adds missing `allowDraw` type definition for `VictoryBrushContainer`. Thanks @justindomingue!
+
+## 35.8.4 (2021-06-01)
+
+- [#1871](https://github.com/FormidableLabs/victory/pull/1871) - Fixes a bug impacting log scale charts using `VictoryVoronoiContainer` with `voronoiDimension`.
+
+## 35.8.3 (2021-05-31)
+
+- [#1870](https://github.com/FormidableLabs/victory/pull/1870) - Fixes a regression impacting `offsetX` and `offsetY` props for multi-quadrant charts
+
 ## 35.8.2 (2021-05-26)
 
 - [#1865](https://github.com/FormidableLabs/victory/pull/1865) - Improves the `interpolation` type definition for `VictoryArea`. Thanks @pmilic021!

demo/js/components/victory-voronoi-container-demo.js

@@ -13,6 +13,26 @@ import { Flyout, VictoryTooltip } from "Packages/victory-tooltip/src/index";
 import { VictoryLegend } from "Packages/victory-legend/src/index";
 import { VictoryLabel, VictoryTheme } from "Packages/victory-core/src/index";
 
+const series1 = [
+  { x: 0, y: 2500 },
+  { x: 2, y: 3300 },
+  { x: 4, y: 4300 },
+  { x: 6, y: 2400 },
+  { x: 8, y: 3300 },
+  { x: 10, y: 5400 },
+  { x: 12, y: 8900 }
+];
+
+const series2 = [
+  { x: 0, y: 200 },
+  { x: 2, y: 3100 },
+  { x: 4, y: 2500 },
+  { x: 6, y: 870 },
+  { x: 8, y: 2300 },
+  { x: 10, y: 550 },
+  { x: 12, y: 5200 }
+];
+
 class App extends React.Component {
   constructor() {
     super();
@@ -84,6 +104,22 @@ class App extends React.Component {
     return (
       <div className="demo">
         <div style={containerStyle}>
+          <VictoryChart
+            style={chartStyle}
+            scale={{ y: "log" }}
+            containerComponent={
+              <VictoryVoronoiContainer
+                voronoiDimension="x"
+                labels={({ datum }) => `y: ${datum.y}`}
+              />
+            }
+          >
+            <VictoryScatter
+              style={{ data: { fill: "red" }, labels: { fill: "red" } }}
+              data={series1}
+            />
+            <VictoryScatter data={series2} />
+          </VictoryChart>
           <VictoryChart
             style={chartStyle}
             domain={{ y: [0, 6] }}

docs/package.json

@@ -13,6 +13,7 @@
   },
   "homepage": "https://github.com/FormidableLabs/victory-docs#readme",
   "dependencies": {
+    "@d3fc/d3fc-discontinuous-scale": "^4.0.2",
     "@juggle/resize-observer": "^3.0.2",
     "axios": "^0.19.2",
     "babel-standalone": "^6.26.0",

docs/src/content/common-props/common-props.md

@@ -6,6 +6,9 @@ type: docs
 scope:
   - range
   - sampleData
+  - d3Scale
+  - scaleDiscontinuous
+  - discontinuitySkipWeekends
 ---
 
 # Common Props
@@ -310,7 +313,7 @@ _examples:_
 
 `type: number || array[left, right] || { x: [left, right], y: [bottom, top] }`
 
-The `domainPadding` prop specifies a number of pixels of padding to add the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, `domainPadding` will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for `domainPadding`, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.
+The `domainPadding` prop specifies a number of pixels of padding to add to the beginning or end of a domain. This prop is useful for explicitly spacing data elements farther from the beginning or end of a domain to prevent axis crowding. When given as a single number, `domainPadding` will be applied to the upper and lower bound of both the x and y domains. This prop may also be given as an object with numbers or two-element arrays specified for x and y. When specifying arrays for `domainPadding`, the first element of the array will specify the padding to be applied to domain minimum, and the second element will specify padding the be applied to domain maximum.
 
 _note:_ The `x` value supplied to the `domainPadding` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
 
@@ -736,7 +739,9 @@ _default:_ `samples={50}`
 
 `type: scale || { x: scale, y: scale }`
 
-The `scale` prop determines which scales your chart should use. This prop can be given as a string specifying a supported scale ("linear", "time", "log", "sqrt"), or as an object with scales specified for x and y. For "time" scales, data points should be `Date` objects or `getTime()` instances.
+The `scale` prop determines which scales your chart should use. In this case, scale refers to the d3 scale that is used inside Victory to determine he placement of data, ticks, and labels. A scale type can be either a string ("linear", "time", "log", "sqrt"), or a custom d3 scale function. This prop can be passed as a single scale, or as an object with scales specified for x and y. For "time" scales, data points should be `Date` objects or `getTime()` instances.
+
+This prop should be set at the top-level of the chart in order to avoid being overwritten by the default value. In other words, unless an individual chart component is being used as a standalone component (without a `VictoryChart` wrapper), this prop should be added to the `VictoryChart` component. 
 
 _note:_ The `x` value supplied to the `scale` prop refers to the _independent_ variable, and the `y` value refers to the _dependent_ variable. This may cause confusion in horizontal charts, as the independent variable will corresponds to the y axis.
 
@@ -758,6 +763,40 @@ _examples:_
   />
 </VictoryChart>
 ```
+In this example, a [discontinous scale plugin from d3fc](https://github.com/d3fc/d3fc/blob/master/packages/d3fc-discontinuous-scale/README.md) can be used to create a custom scale function to skip weekends along the x-axis. 
+
+_note_: The data set has already been filtered to only include weekdays. 
+
+```playground_norender
+function App() {
+  const data = [
+    { x: new Date(2021, 5, 1), y: 8 },
+    { x: new Date(2021, 5, 2), y: 10 },
+    { x: new Date(2021, 5, 3), y: 7 },
+    { x: new Date(2021, 5, 4), y: 4 },
+    { x: new Date(2021, 5, 7), y: 6 },
+    { x: new Date(2021, 5, 8), y: 3 },
+    { x: new Date(2021, 5, 9), y: 7 },
+    { x: new Date(2021, 5, 10), y: 9 },
+    { x: new Date(2021, 5, 11), y: 6 }
+  ];
+
+  const discontinuousScale = scaleDiscontinuous(
+    d3Scale.scaleTime()
+  ).discontinuityProvider(discontinuitySkipWeekends());
+
+  return (
+    <VictoryChart scale={{ x: discontinuousScale }}>
+      <VictoryArea 
+        data={data} 
+        style={{data: { fill: 'lightblue', stroke: 'teal' }}} 
+      />
+    </VictoryChart>
+  );
+}
+
+ReactDOM.render(<App />, mountNode);
+```
 
 ## sharedEvents
 

docs/src/content/gallery/discontinuous-scale.md

@@ -0,0 +1,45 @@
+---
+id: 26
+title: Discontinuous Scale
+scope:
+  - d3Scale
+  - scaleDiscontinuous
+  - discontinuitySkipWeekends
+---
+
+```playground_norender
+function App() {
+  const data = [
+    { x: new Date(2021, 5, 1), y: 8 },
+    { x: new Date(2021, 5, 2), y: 10 },
+    { x: new Date(2021, 5, 3), y: 7 },
+    { x: new Date(2021, 5, 4), y: 4 },
+    { x: new Date(2021, 5, 7), y: 6 },
+    { x: new Date(2021, 5, 8), y: 3 },
+    { x: new Date(2021, 5, 9), y: 7 },
+    { x: new Date(2021, 5, 10), y: 9 },
+    { x: new Date(2021, 5, 11), y: 6 }
+  ];
+
+  // scaleDiscontinuous and discontinuitySkipWeekends are both
+  // plugins imported from @d3fc/d3fc-discontinuous-scale
+  const discontinuousScale = scaleDiscontinuous(
+    d3Scale.scaleTime()
+  ).discontinuityProvider(discontinuitySkipWeekends());
+
+  return (
+    <VictoryChart 
+      width={400} 
+      height={400} 
+      scale={{ x: discontinuousScale }}
+    >
+      <VictoryArea 
+        data={data} 
+        style={{data: { fill: 'lightblue', stroke: 'teal' }}} 
+      />
+    </VictoryChart>
+  );
+}
+
+ReactDOM.render(<App />, mountNode);
+```

docs/src/pages/gallery.js

@@ -5,6 +5,11 @@ import ReactDOM from "react-dom";
 import { withRouteData } from "react-static";
 import { Link } from "react-router-dom";
 import * as Victory from "victory";
+import * as d3Scale from "d3-scale";
+import {
+  scaleDiscontinuous,
+  discontinuitySkipWeekends
+} from "@d3fc/d3fc-discontinuous-scale";
 
 import createPath from "../helpers/path-helpers";
 import Page from "../partials/page";
@@ -101,7 +106,10 @@ const Gallery = ({ gallery, sidebarContent }) => {
                 PropTypes,
                 Slider,
                 basketballData,
-                listeningData
+                listeningData,
+                d3Scale,
+                scaleDiscontinuous,
+                discontinuitySkipWeekends
               }}
             />
           )}

docs/src/partials/markdown/index.js

@@ -10,6 +10,10 @@ import { Link } from "react-router-dom";
 import ComponentPlayground from "component-playground";
 import * as Victory from "victory";
 import styled, { withTheme } from "styled-components";
+import {
+  scaleDiscontinuous,
+  discontinuitySkipWeekends
+} from "@d3fc/d3fc-discontinuous-scale";
 import scopeMap from "./scope-map";
 import PlaygroundContainer from "./playground-container";
 import createPath from "../../helpers/path-helpers";
@@ -42,6 +46,8 @@ const renderPlayground = (props, scope, theme) => {
   const playgroundScope = Object.assign({}, scopeObject, {
     ...Victory,
     styled,
+    scaleDiscontinuous,
+    discontinuitySkipWeekends,
     React,
     ReactDOM
   });

docs/yarn.lock

@@ -829,6 +829,18 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@d3fc/d3fc-discontinuous-scale@^4.0.2":
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/@d3fc/d3fc-discontinuous-scale/-/d3fc-discontinuous-scale-4.0.2.tgz#b06d0be8e5b555a867bfe08347fe9135b3d933f7"
+  integrity sha512-m1H/fL3BQmkytTjUNd0GVGE6KC0CEervrgRNnM5FluouycsbUCQPhiiN1CY1bRh8xcFDQx9vpOUU7DNCjiEbAQ==
+  dependencies:
+    "@d3fc/d3fc-rebind" "^6.0.1"
+
+"@d3fc/d3fc-rebind@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/@d3fc/d3fc-rebind/-/d3fc-rebind-6.0.1.tgz#b66e21d938893a92dd939e55e3147f24f46b652e"
+  integrity sha512-+ryBZ53ALMffbADwnFAtTYQJcT7PE5BwpducGYS0X6Jux6ESnp+fP+cDQvBGbDBOVqaziGnfeLeJXjtMnZujmQ==
+
 "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"

lerna.json

@@ -2,7 +2,7 @@
   "lerna": "2.11.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
-  "version": "35.8.2",
+  "version": "35.8.6",
   "packages": [
     "packages/*"
   ]

packages/victory-axis/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-axis",
-  "version": "35.8.1",
+  "version": "35.8.3",
   "description": "Axis Component for Victory",
   "keywords": [
     "data visualization",

packages/victory-axis/src/helper-methods.js

@@ -8,6 +8,8 @@ const orientationSign = {
   bottom: 1
 };
 
+const exists = (val) => val !== null && val !== undefined;
+
 const getCurrentAxis = (props, axis) => {
   const { orientation, horizontal } = props;
   if (orientation) {
@@ -298,14 +300,8 @@ const getOffset = (props, calculatedValues) => {
   const y = originPosition.y
     ? Math.abs(originOffset.y - originPosition.y)
     : orientationOffset.y;
-  const offsetX =
-    props.offsetX !== null && props.offsetX !== undefined
-      ? x - props.offsetX
-      : x;
-  const offsetY =
-    props.offsetY !== null && props.offsetY !== undefined
-      ? y - props.offsetY
-      : y;
+  const offsetX = exists(props.offsetX) ? props.offsetX : x;
+  const offsetY = exists(props.offsetY) ? props.offsetY : y;
 
   return {
     x: offsetX,
@@ -356,14 +352,8 @@ const getHorizontalOffset = (props, calculatedValues) => {
   const x = originPosition.y
     ? Math.abs(originOffset.y - originPosition.y)
     : orientationOffset.y;
-  const offsetX =
-    props.offsetX !== null && props.offsetX !== undefined
-      ? x - props.offsetX
-      : x;
-  const offsetY =
-    props.offsetY !== null && props.offsetY !== undefined
-      ? y - props.offsetY
-      : y;
+  const offsetX = exists(props.offsetX) ? props.offsetX : x;
+  const offsetY = exists(props.offsetY) ? props.offsetY : y;
 
   return {
     x: offsetX,

packages/victory-brush-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-brush-container",
-  "version": "35.8.1",
+  "version": "35.8.5",
   "description": "Interactive Brush Component for Victory",
   "keywords": [
     "data visualization",

packages/victory-brush-container/src/index.d.ts

@@ -3,6 +3,7 @@ import { DomainTuple, VictoryContainerProps } from "victory-core";
 
 export interface VictoryBrushContainerProps extends VictoryContainerProps {
   allowDrag?: boolean;
+  allowDraw?: boolean;
   allowResize?: boolean;
   brushComponent?: React.ReactElement;
   brushDimension?: "x" | "y";

packages/victory-chart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-chart",
-  "version": "35.8.1",
+  "version": "35.8.3",
   "description": "Chart Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,7 +22,7 @@
     "lodash": "^4.17.19",
     "prop-types": "^15.5.8",
     "react-fast-compare": "^2.0.0",
-    "victory-axis": "^35.8.1",
+    "victory-axis": "^35.8.3",
     "victory-core": "^35.8.1",
     "victory-polar-axis": "^35.8.1",
     "victory-shared-events": "^35.8.1"

packages/victory-create-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-create-container",
-  "version": "35.8.1",
+  "version": "35.8.5",
   "description": "Container Helper for Victory",
   "keywords": [
     "data visualization",
@@ -20,11 +20,11 @@
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.19",
-    "victory-brush-container": "^35.8.1",
+    "victory-brush-container": "^35.8.5",
     "victory-core": "^35.8.1",
     "victory-cursor-container": "^35.8.1",
     "victory-selection-container": "^35.8.1",
-    "victory-voronoi-container": "^35.8.1",
+    "victory-voronoi-container": "^35.8.4",
     "victory-zoom-container": "^35.8.1"
   },
   "scripts": {

packages/victory-histogram/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-histogram",
-  "version": "35.8.1",
+  "version": "35.8.6",
   "description": "Histogram Component for Victory",
   "keywords": [
     "data visualization",
@@ -19,7 +19,7 @@
   "author": "Formidable",
   "license": "MIT",
   "dependencies": {
-    "d3-array": "^2.4.0",
+    "d3-array": "~2.3.0",
     "d3-scale": "^1.0.0",
     "lodash": "^4.17.19",
     "prop-types": "^15.5.8",