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,
 });
 
 // ...

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"

packages/vx-scale/src/createScale.ts

@@ -0,0 +1,157 @@
+import { ScaleConfig, PickScaleConfigWithoutType, PickScaleConfig } from './types/ScaleConfig';
+import { DefaultThresholdInput, PickD3Scale } from './types/Scale';
+import { StringLike, DefaultOutput } from './types/Base';
+import createLinearScale from './scales/linear';
+import createLogScale from './scales/log';
+import createPowScale from './scales/power';
+import createSqrtScale from './scales/squareRoot';
+import createSymlogScale from './scales/symlog';
+import createTimeScale from './scales/time';
+import createUtcScale from './scales/utc';
+import createQuantileScale from './scales/quantile';
+import createQuantizeScale from './scales/quantize';
+import createThresholdScale from './scales/threshold';
+import createOrdinalScale from './scales/ordinal';
+import createPointScale from './scales/point';
+import createBandScale from './scales/band';
+
+// Overload function for more strict typing, e.g.,
+// If the config is a linear config then a ScaleLinear will be returned
+// instead of a union type of all scales.
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(
+  config?: PickScaleConfig<'linear', Output> | PickScaleConfigWithoutType<'linear', Output>,
+): PickD3Scale<'linear', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'log', Output>): PickD3Scale<'log', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'pow', Output>): PickD3Scale<'pow', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'sqrt', Output>): PickD3Scale<'sqrt', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'symlog', Output>): PickD3Scale<'symlog', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'time', Output>): PickD3Scale<'time', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'utc', Output>): PickD3Scale<'utc', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'quantile', Output>): PickD3Scale<'quantile', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(config: PickScaleConfig<'quantize', Output>): PickD3Scale<'quantize', Output>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(
+  config: PickScaleConfig<'threshold', Output, StringLike, ThresholdInput>,
+): PickD3Scale<'threshold', Output, StringLike, ThresholdInput>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(
+  config: PickScaleConfig<'ordinal', Output, DiscreteInput>,
+): PickD3Scale<'ordinal', Output, DiscreteInput>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(
+  config: PickScaleConfig<'point', Output, DiscreteInput>,
+): PickD3Scale<'point', Output, DiscreteInput>;
+
+function createScale<
+  Output = DefaultOutput,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends DefaultThresholdInput = DefaultThresholdInput
+>(
+  config: PickScaleConfig<'band', Output, DiscreteInput>,
+): PickD3Scale<'band', Output, DiscreteInput>;
+
+// Actual implementation
+
+function createScale<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  config?:
+    | ScaleConfig<Output, DiscreteInput, ThresholdInput>
+    | PickScaleConfigWithoutType<'linear', Output>,
+) {
+  if (typeof config !== 'undefined' && 'type' in config) {
+    switch (config.type) {
+      case 'linear':
+        return createLinearScale(config);
+      case 'log':
+        return createLogScale(config);
+      case 'pow':
+        return createPowScale(config);
+      case 'sqrt':
+        return createSqrtScale(config);
+      case 'symlog':
+        return createSymlogScale(config);
+      case 'time':
+        return createTimeScale(config);
+      case 'utc':
+        return createUtcScale(config);
+      case 'quantile':
+        return createQuantileScale(config);
+      case 'quantize':
+        return createQuantizeScale(config);
+      case 'threshold':
+        return createThresholdScale(config);
+      case 'ordinal':
+        return createOrdinalScale(config);
+      case 'point':
+        return createPointScale(config);
+      case 'band':
+        return createBandScale(config);
+      default:
+    }
+  }
+
+  // If type is not specified, fallback to linear scale
+  return createLinearScale(config);
+}
+
+export default createScale;

packages/vx-scale/src/index.ts

@@ -10,5 +10,15 @@ export { default as scaleQuantize } from './scales/quantize';
 export { default as scaleQuantile } from './scales/quantile';
 export { default as scaleSymlog } from './scales/symlog';
 export { default as scaleThreshold } from './scales/threshold';
-export { default as updateScale } from './util/updateScale';
 export { default as scaleSqrt } from './scales/squareRoot';
+
+export { default as createScale } from './createScale';
+export { default as updateScale } from './updateScale';
+export { default as inferScaleType } from './utils/inferScaleType';
+
+// export types
+export * from './types/Base';
+export * from './types/Nice';
+export * from './types/Scale';
+export * from './types/ScaleConfig';
+export * from './types/ScaleInterpolate';