Merge pull request #766 from kristw/kristw--scale

feat: re-type vx/scale with new functionalities

README.md

@@ -103,12 +103,14 @@ const y = d => +d.frequency * 100;
 
 // And then scale the graph by our data
 const xScale = scaleBand({
-  rangeRound: [0, xMax],
+  range: [0, xMax],
+  round: true,
   domain: data.map(x),
   padding: 0.4,
 });
 const yScale = scaleLinear({
-  rangeRound: [yMax, 0],
+  range: [yMax, 0],
+  round: true,
   domain: [0, Math.max(...data.map(y))],
 });
 

package.json

@@ -53,13 +53,15 @@
     "enzyme-to-json": "^3.4.0",
     "fs-jetpack": "^1.3.0",
     "husky": "^3.0.0",
+    "jest-mock-console": "^1.0.1",
     "lerna": "^3.15.0",
     "marked": "^0.7.0",
     "raf": "^3.4.0",
     "react": "^15.0.0-0 || ^16.0.0-0",
     "react-dom": "^15.0.0-0 || ^16.0.0-0",
     "react-test-renderer": "^16.8.6",
-    "regenerator-runtime": "^0.10.5"
+    "regenerator-runtime": "^0.10.5",
+    "timezone-mock": "^1.1.0"
   },
   "workspaces": [
     "./packages/*"

packages/vx-axis/test/Axis.test.tsx

@@ -10,7 +10,8 @@ import { GenericScale } from '../src/types';
 const axisProps = {
   orientation: 'left' as const,
   scale: scaleLinear({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }) as GenericScale<number>,
   label: 'test axis',
@@ -199,7 +200,8 @@ describe('<Axis />', () => {
     const overrideAxisProps = {
       orientation: 'bottom' as const,
       scale: scaleBand({
-        rangeRound: [10, 0],
+        range: [10, 0],
+        round: true,
         domain: ['a', 'b'],
       }),
     };

packages/vx-axis/test/AxisBottom.test.tsx

@@ -7,7 +7,8 @@ import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }) as GenericScale<number>,
 };

packages/vx-axis/test/AxisLeft.test.tsx

@@ -7,7 +7,8 @@ import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }) as GenericScale<number>,
 };

packages/vx-axis/test/AxisRight.test.tsx

@@ -7,7 +7,8 @@ import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }) as GenericScale<number>,
 };

packages/vx-axis/test/AxisTop.test.tsx

@@ -7,7 +7,8 @@ import { GenericScale } from '../src/types';
 
 const axisProps = {
   scale: scaleLinear({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }) as GenericScale<number>,
 };

packages/vx-axis/test/scales.test.tsx

@@ -31,7 +31,8 @@ describe('Axis scales', () => {
     expect(
       setup(
         scaleBand({
-          rangeRound: [10, 0],
+          range: [10, 0],
+          round: true,
           domain: ['a', 'b', 'c'],
         }) as GenericScale<string>,
       ),
@@ -42,7 +43,8 @@ describe('Axis scales', () => {
     expect(
       setup(
         scaleLinear<number>({
-          rangeRound: [10, 0],
+          range: [10, 0],
+          round: true,
           domain: [0, 10],
         }) as GenericScale<number>,
       ),
@@ -53,7 +55,8 @@ describe('Axis scales', () => {
     expect(
       setup(
         scaleLog<number>({
-          rangeRound: [10, 0],
+          range: [10, 0],
+          round: true,
           domain: [1, 10, 100, 1000],
         }) as GenericScale<number>,
       ),
@@ -75,7 +78,8 @@ describe('Axis scales', () => {
     expect(
       setup(
         scalePoint<string>({
-          rangeRound: [0, 10],
+          range: [0, 10],
+          round: true,
           domain: ['a', 'b', 'c'],
         }) as GenericScale<string>,
       ),

packages/vx-demo/src/sandboxes/vx-bars/Example.tsx

@@ -27,7 +27,8 @@ export default function Example({ width, height, events = false }: BarsProps) {
   const xScale = useMemo(
     () =>
       scaleBand<string>({
-        rangeRound: [0, xMax],
+        range: [0, xMax],
+        round: true,
         domain: data.map(getLetter),
         padding: 0.4,
       }),
@@ -36,7 +37,8 @@ export default function Example({ width, height, events = false }: BarsProps) {
   const yScale = useMemo(
     () =>
       scaleLinear<number>({
-        rangeRound: [yMax, 0],
+        range: [yMax, 0],
+        round: true,
         domain: [0, Math.max(...data.map(getLetterFrequency))],
       }),
     [yMax],

packages/vx-demo/src/sandboxes/vx-stats/Example.tsx

@@ -50,7 +50,8 @@ export default withTooltip<StatsPlotProps, TooltipData>(
 
     // scales
     const xScale = scaleBand<string>({
-      rangeRound: [0, xMax],
+      range: [0, xMax],
+      round: true,
       domain: data.map(x),
       padding: 0.4,
     });
@@ -63,7 +64,8 @@ export default withTooltip<StatsPlotProps, TooltipData>(
     const maxYValue = Math.max(...values);
 
     const yScale = scaleLinear<number>({
-      rangeRound: [yMax, 0],
+      range: [yMax, 0],
+      round: true,
       domain: [minYValue, maxYValue],
     });
 

packages/vx-legend/test/Legend.test.tsx

@@ -6,7 +6,8 @@ import { Legend, LegendLabel } from '../src';
 
 const defaultProps = {
   scale: scaleLinear<number>({
-    rangeRound: [10, 0],
+    range: [10, 0],
+    round: true,
     domain: [0, 10],
   }),
 };

packages/vx-scale/Readme.md

@@ -33,14 +33,16 @@ const [minY, maxY] = getYMinAndMax();
 
 const xScale = Scale.scaleLinear({
   domain: [minX, maxX], // x-coordinate data values
-  rangeRound: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
+  range: [0, graphWidth], // svg x-coordinates, svg x-coordinates increase left to right
+  round: true,
 });
 
 const yScale = Scale.scaleLinear({
   domain: [minY, maxY], // y-coordinate data values
   // svg y-coordinates, these increase from top to bottom so we reverse the order
   // so that minY in data space maps to graphHeight in svg y-coordinate space
-  rangeRound: [graphHeight, 0],
+  range: [graphHeight, 0],
+  round: true,
 });
 
 // ...
@@ -63,7 +65,7 @@ Example:
 const scale = Scale.scaleBand({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     padding,
     nice = false
@@ -81,7 +83,7 @@ Example:
 const scale = Scale.scaleLinear({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     nice = false,
     clamp = false,
@@ -99,7 +101,7 @@ Example:
 const scale = Scale.scaleLog({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     base,
     nice = false,
@@ -134,7 +136,7 @@ Example:
 const scale = Scale.scalePoint({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     padding,
     align,
@@ -153,7 +155,7 @@ Example:
 const scale = Scale.scalePower({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     exponent,
     nice = false,
@@ -173,7 +175,7 @@ Example:
 const scale = Scale.scaleSqrt({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     nice = false,
     clamp = false,
@@ -191,7 +193,7 @@ Example:
 const scale = Scale.scaleTime({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     nice = false,
     clamp = false,
@@ -207,7 +209,7 @@ Example:
 const scale = Scale.scaleUtc({
   /*
     range,
-    rangeRound,
+    round,
     domain,
     nice = false,
     clamp = false,

packages/vx-scale/package.json

@@ -21,15 +21,19 @@
     "visualizations",
     "charts"
   ],
-  "author": "@hshoff",
+  "authors": ["@hshoff", "@kristw"],
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/hshoff/vx/issues"
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/d3-interpolate": "^1.3.1",
     "@types/d3-scale": "^2.1.1",
-    "d3-scale": "^2.2.2"
+    "@types/d3-time": "^1.0.10",
+    "d3-interpolate": "^1.4.0",
+    "d3-scale": "^3.0.1",
+    "d3-time": "^1.1.0"
   },
   "publishConfig": {
     "access": "public"