Merge 56e0a47 into 8ede587

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

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,86 @@
+import { ScaleConfig, ScaleConfigToD3Scale, PickScaleConfigWithoutType } from './types/ScaleConfig';
+import { DefaultThresholdInput, PickD3Scale } from './types/Scale';
+import { StringLike, Value } 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 extends Value,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput,
+  Config extends ScaleConfig<Output, DiscreteInput, ThresholdInput>
+>(config: Config): ScaleConfigToD3Scale<Config, Output, DiscreteInput, ThresholdInput>;
+
+function createScale<
+  Output extends Value,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  config: PickScaleConfigWithoutType<'linear', Output>,
+): PickD3Scale<'linear', Output, DiscreteInput, ThresholdInput>;
+
+// Actual implementation
+
+function createScale<
+  Output extends Value,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  config:
+    | ScaleConfig<Output, DiscreteInput, ThresholdInput>
+    | PickScaleConfigWithoutType<'linear', Output>,
+) {
+  if ('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:
+        // @ts-ignore
+        throw new Error(`Invalid scale type: ${config.type}`);
+    }
+  }
+
+  // If type is not specified, fallback to linear scale
+  return createLinearScale(config);
+}
+
+export default createScale;

packages/vx-scale/src/index.ts

@@ -10,5 +10,7 @@ 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 scale } from './createScale';
+export { default as updateScale } from './updateScale';

packages/vx-scale/src/operators/align.ts

@@ -0,0 +1,16 @@
+import { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import { StringLike } from '../types/Base';
+import { ScaleConfigWithoutType } from '../types/ScaleConfig';
+
+export default function applyAlign<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  scale: D3Scale<Output, DiscreteInput, ThresholdInput>,
+  config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
+) {
+  if ('align' in scale && 'align' in config && typeof config.align !== 'undefined') {
+    scale.align(config.align);
+  }
+}

packages/vx-scale/src/operators/base.ts

@@ -0,0 +1,16 @@
+import { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import { StringLike } from '../types/Base';
+import { ScaleConfigWithoutType } from '../types/ScaleConfig';
+
+export default function applyBase<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  scale: D3Scale<Output, DiscreteInput, ThresholdInput>,
+  config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
+) {
+  if ('base' in scale && 'base' in config && typeof config.base !== 'undefined') {
+    scale.base(config.base);
+  }
+}

packages/vx-scale/src/operators/clamp.ts

@@ -0,0 +1,16 @@
+import { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import { StringLike } from '../types/Base';
+import { ScaleConfigWithoutType } from '../types/ScaleConfig';
+
+export default function applyClamp<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  scale: D3Scale<Output, DiscreteInput, ThresholdInput>,
+  config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
+) {
+  if ('clamp' in scale && 'clamp' in config && typeof config.clamp !== 'undefined') {
+    scale.clamp(config.clamp);
+  }
+}

packages/vx-scale/src/operators/constant.ts

@@ -0,0 +1,16 @@
+import { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import { StringLike } from '../types/Base';
+import { ScaleConfigWithoutType } from '../types/ScaleConfig';
+
+export default function applyConstant<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  scale: D3Scale<Output, DiscreteInput, ThresholdInput>,
+  config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
+) {
+  if ('constant' in scale && 'constant' in config && typeof config.constant !== 'undefined') {
+    scale.constant(config.constant);
+  }
+}

packages/vx-scale/src/operators/domain.ts

@@ -0,0 +1,17 @@
+import { DefaultThresholdInput, D3Scale } from '../types/Scale';
+import { StringLike } from '../types/Base';
+import { ScaleConfigWithoutType } from '../types/ScaleConfig';
+
+export default function applyDomain<
+  Output,
+  DiscreteInput extends StringLike,
+  ThresholdInput extends DefaultThresholdInput
+>(
+  scale: D3Scale<Output, DiscreteInput, ThresholdInput>,
+  config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
+) {
+  if (config.domain) {
+    // @ts-ignore
+    scale.domain(config.domain);
+  }
+}