feat: re-type vx/scale with new functionalities

packages/vx-scale/package.json

@@ -21,15 +21,17 @@
     "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-scale": "^2.1.1",
-    "d3-scale": "^2.2.2"
+    "@types/d3-interpolate": "^1.3.1",
+    "d3-scale": "^3.0.1",
+    "d3-interpolate": "^1.4.0"
   },
   "publishConfig": {
     "access": "public"

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';
+
+// Will change
+export { default as updateScale } from './util/updateScale';

packages/vx-scale/src/mixins/applyInterpolate.ts

@@ -0,0 +1,15 @@
+import { InterpolatorFactory } from 'd3-scale';
+import { Value } from '../types/Base';
+import { D3Scale } from '../types/Scale';
+import { ScaleInterpolate, ScaleInterpolateParams } from '../types/ScaleInterpolate';
+import createColorInterpolator from '../util/createColorInterpolator';
+
+export default function applyInterpolate<Output extends Value>(
+  scale: D3Scale<Output>,
+  config: { interpolate?: ScaleInterpolate | ScaleInterpolateParams },
+) {
+  if (config.interpolate && 'interpolate' in scale) {
+    const interpolator = createColorInterpolator(config.interpolate);
+    scale.interpolate((interpolator as unknown) as InterpolatorFactory<Output, Output>);
+  }
+}

packages/vx-scale/src/mixins/applyRound.ts

@@ -0,0 +1,18 @@
+import { interpolateRound } from 'd3-interpolate';
+import { InterpolatorFactory } from 'd3-scale';
+import { Value, StringLike } from '../types/Base';
+import { D3Scale } from '../types/Scale';
+
+export default function applyRound<
+  Output extends Value,
+  DiscreteInput extends StringLike = StringLike,
+  ThresholdInput extends number | string | Date = number | string | Date
+>(scale: D3Scale<Output, DiscreteInput, ThresholdInput>, config: { round?: boolean }) {
+  if (typeof config.round !== 'undefined') {
+    if ('round' in scale) {
+      scale.round(config.round);
+    } else if ('interpolate' in scale && config.round) {
+      scale.interpolate((interpolateRound as unknown) as InterpolatorFactory<Output, Output>);
+    }
+  }
+}

packages/vx-scale/src/mixins/applyZero.ts

@@ -0,0 +1,16 @@
+import { Value } from '../types/Base';
+import { PickD3Scale } from '../types/Scale';
+
+export default function applyZero<Output extends Value>(
+  scale: PickD3Scale<'linear' | 'pow' | 'sqrt' | 'symlog' | 'quantize', Output>,
+  config: { zero?: boolean },
+) {
+  if (config.zero === true) {
+    const domain = scale.domain() as number[];
+    const [a, b] = domain;
+    const isDescending = b < a;
+    const [min, max] = isDescending ? [b, a] : [a, b];
+    const domainWithZero = [Math.min(0, min), Math.max(0, max)];
+    scale.domain(isDescending ? domainWithZero.reverse() : domainWithZero);
+  }
+}

packages/vx-scale/src/scales/band.ts

@@ -1,51 +1,36 @@
 import { scaleBand } from 'd3-scale';
+import { Value, StringLike } from '../types/Base';
+import { PickScaleConfigWithoutType } from '../types/ScaleConfig';
+import { PickD3Scale } from '../types/Scale';
+import applyRound from '../mixins/applyRound';
 
-type StringLike = string | { toString(): string };
-type Numeric = number | { valueOf(): number };
+export function updateBandScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(
+  scale: PickD3Scale<'band', Output, DiscreteInput>,
+  config: PickScaleConfigWithoutType<'band', Output, DiscreteInput>,
+) {
+  const { align, domain, padding, paddingInner, paddingOuter, range } = config;
 
-export type BandConfig<Datum extends StringLike> = {
-  /** Sets the output values of the scale, which are numbers for band scales. */
-  range?: [Numeric, Numeric];
-  /** Sets the output values of the scale while setting its interpolator to round. If the elements are not numbers, they will be coerced to numbers. */
-  rangeRound?: [Numeric, Numeric];
-  /** Sets the input values of the scale, which are strings for band scales. */
-  domain?: Datum[];
-  /** 0-1, determines how any leftover unused space in the range is distributed. 0.5 distributes it equally left and right. */
-  align?: number;
-  /** 0-1, determines the ratio of the range that is reserved for blank space before the first point and after the last. */
-  padding?: number;
-  /** 0-1, determines the ratio of the range that is reserved for blank space _between_ bands. */
-  paddingInner?: number;
-  /** 0-1, determines the ratio of the range that is reserved for blank space before the first band and after the last band. */
-  paddingOuter?: number;
-  tickFormat?: unknown;
-};
-
-export default function bandScale<Datum extends StringLike = StringLike>({
-  range,
-  rangeRound,
-  domain,
-  padding,
-  paddingInner,
-  paddingOuter,
-  align,
-  tickFormat,
-}: BandConfig<Datum>) {
-  const scale = scaleBand<Datum>();
-
-  if (range) scale.range(range);
-  if (rangeRound) scale.rangeRound(rangeRound);
   if (domain) scale.domain(domain);
-  if (padding) scale.padding(padding);
-  if (paddingInner) scale.paddingInner(paddingInner);
-  if (paddingOuter) scale.paddingOuter(paddingOuter);
-  if (align) scale.align(align);
+  if (range) scale.range(range);
+  if (typeof padding !== 'undefined') scale.padding(padding);
+  if (typeof paddingInner !== 'undefined') scale.paddingInner(paddingInner);
+  if (typeof paddingOuter !== 'undefined') scale.paddingOuter(paddingOuter);
+  if (typeof align !== 'undefined') scale.align(align);
+  applyRound(scale, config);
 
-  // @TODO should likely get rid of these.
-  // @ts-ignore
-  if (tickFormat) scale.tickFormat = tickFormat;
+  // TODO: Remove?
   // @ts-ignore
   scale.type = 'band';
 
   return scale;
 }
+
+export default function createBandScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(config: PickScaleConfigWithoutType<'band', Output, DiscreteInput>) {
+  return updateBandScale(scaleBand<DiscreteInput>(), config);
+}

packages/vx-scale/src/scales/linear.ts

@@ -1,35 +1,35 @@
 import { scaleLinear } from 'd3-scale';
+import { Value } from '../types/Base';
+import { PickScaleConfigWithoutType } from '../types/ScaleConfig';
+import { PickD3Scale } from '../types/Scale';
+import applyInterpolate from '../mixins/applyInterpolate';
+import applyRound from '../mixins/applyRound';
+import applyZero from '../mixins/applyZero';
 
-export type LinearConfig<Output> = {
-  /** Sets the input values of the scale, which are numbers for a linear scale. */
-  domain?: number[];
-  /** Sets the output values of the scale. */
-  range?: Output[];
-  /** Sets the output values of the scale while setting its interpolator to round. If the elements are not numbers, they will be coerced to numbers. */
-  rangeRound?: number[];
-  /** Extends the domain so that it starts and ends on nice round values. */
-  nice?: boolean;
-  /** Whether the scale should clamp values to within the range. */
-  clamp?: boolean;
-};
+export function updateLinearScale<Output extends Value = Value>(
+  scale: PickD3Scale<'linear', Output>,
+  config: PickScaleConfigWithoutType<'linear', Output>,
+) {
+  const { domain, range, clamp = true, nice = true } = config;
 
-export default function linearScale<Output>({
-  range,
-  rangeRound,
-  domain,
-  nice = false,
-  clamp = false,
-}: LinearConfig<Output>) {
-  const scale = scaleLinear<Output>();
-
-  if (range) scale.range(range);
-  if (rangeRound) scale.rangeRound(rangeRound);
   if (domain) scale.domain(domain);
   if (nice) scale.nice();
-  if (clamp) scale.clamp(true);
+  if (range) scale.range(range);
 
+  scale.clamp(clamp);
+  applyInterpolate(scale, config);
+  applyRound(scale, config);
+  applyZero(scale, config);
+
+  // TODO: Remove?
   // @ts-ignore
   scale.type = 'linear';
 
   return scale;
 }
+
+export default function createLinearScale<Output extends Value = Value>(
+  config: PickScaleConfigWithoutType<'linear', Output>,
+) {
+  return updateLinearScale(scaleLinear<Output>(), config);
+}

packages/vx-scale/src/scales/log.ts

@@ -1,39 +1,33 @@
 import { scaleLog } from 'd3-scale';
+import { Value } from '../types/Base';
+import { PickD3Scale } from '../types/Scale';
+import { PickScaleConfigWithoutType } from '../types/ScaleConfig';
+import applyInterpolate from '../mixins/applyInterpolate';
+import applyRound from '../mixins/applyRound';
 
-export type LogConfig<Output> = {
-  /** Sets the input values of the scale, which are numbers for a log scale. */
-  domain?: number[];
-  /** Sets the output values of the scale. */
-  range?: Output[];
-  /** Sets the output values of the scale while setting its interpolator to round. If the elements are not numbers, they will be coerced to numbers. */
-  rangeRound?: number[];
-  /** Sets the base for this logarithmic scale (defaults to 10). */
-  base?: number;
-  /** Extends the domain so that it starts and ends on nice round values. */
-  nice?: boolean;
-  /** Whether the scale should clamp values to within the range. */
-  clamp?: boolean;
-};
+export function updateLogScale<Output extends Value = Value>(
+  scale: PickD3Scale<'log', Output>,
+  config: PickScaleConfigWithoutType<'log', Output>,
+) {
+  const { domain, range, base, clamp = true, nice = true } = config;
 
-export default function logScale<Output>({
-  range,
-  rangeRound,
-  domain,
-  base,
-  nice = false,
-  clamp = false,
-}: LogConfig<Output>) {
-  const scale = scaleLog<Output>();
-
-  if (range) scale.range(range);
-  if (rangeRound) scale.rangeRound(rangeRound);
+  if (base) scale.base(base);
   if (domain) scale.domain(domain);
   if (nice) scale.nice();
-  if (clamp) scale.clamp(true);
-  if (base) scale.base(base);
+  if (range) scale.range(range);
+
+  scale.clamp(clamp);
+  applyInterpolate(scale, config);
+  applyRound(scale, config);
 
   // @ts-ignore
   scale.type = 'log';
 
   return scale;
 }
+
+export default function createLogScale<Output extends Value = Value>(
+  config: PickScaleConfigWithoutType<'log', Output>,
+) {
+  return updateLogScale(scaleLog<Output>(), config);
+}

packages/vx-scale/src/scales/ordinal.ts

@@ -1,27 +1,31 @@
 import { scaleOrdinal } from 'd3-scale';
+import { Value, StringLike } from '../types/Base';
+import { PickScaleConfigWithoutType } from '../types/ScaleConfig';
+import { PickD3Scale } from '../types/Scale';
 
-export type OrdinalConfig<Input, Output> = {
-  /** Sets the input values of the scale, which are strings for an ordinal scale. */
-  domain?: Input[];
-  /** Sets the output values of the scale. */
-  range?: Output[];
-  /** Sets the output value of the scale for unknown input values. */
-  unknown?: Output | { name: 'implicit' };
-};
+export function updateOrdinalScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(
+  scale: PickD3Scale<'ordinal', Output, DiscreteInput>,
+  config: PickScaleConfigWithoutType<'ordinal', Output, DiscreteInput>,
+) {
+  const { domain, range, unknown } = config;
 
-export default function ordinalScale<Input extends { toString(): string }, Output>({
-  range,
-  domain,
-  unknown,
-}: OrdinalConfig<Input, Output>) {
-  const scale = scaleOrdinal<Input, Output>();
-
-  if (range) scale.range(range);
   if (domain) scale.domain(domain);
+  if (range) scale.range(range);
   if (unknown) scale.unknown(unknown);
 
+  // TODO: Remove?
   // @ts-ignore
   scale.type = 'ordinal';
 
   return scale;
 }
+
+export default function createOrdinalScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(config: PickScaleConfigWithoutType<'ordinal', Output, DiscreteInput>) {
+  return updateOrdinalScale(scaleOrdinal<DiscreteInput, Output>(), config);
+}

packages/vx-scale/src/scales/point.ts

@@ -1,35 +1,34 @@
 import { scalePoint } from 'd3-scale';
+import { Value, StringLike } from '../types/Base';
+import { PickScaleConfigWithoutType } from '../types/ScaleConfig';
+import { PickD3Scale } from '../types/Scale';
+import applyRound from '../mixins/applyRound';
 
-export type PointConfig<Input> = {
-  /** Sets the output values of the scale, which are numbers for point scales. */
-  range?: [number, number];
-  /** Sets the output values of the scale while setting its interpolator to round. */
-  rangeRound?: [number, number];
-  /** Sets the input values of the scale. */
-  domain?: Input[];
-  /** 0-1, determines the ratio of the range that is reserved for blank space before the first point and after the last. */
-  padding?: number;
-  /** 0-1, determines how any leftover unused space in the range is distributed. 0.5 distributes it equally left and right. */
-  align?: number;
-};
+export function updatePointScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(
+  scale: PickD3Scale<'point', Output, DiscreteInput>,
+  config: PickScaleConfigWithoutType<'point', Output, DiscreteInput>,
+) {
+  const { align, domain, padding, range } = config;
 
-export default function pointScale<Input>({
-  range,
-  rangeRound,
-  domain,
-  padding,
-  align,
-}: PointConfig<Input>) {
-  const scale = scalePoint<Input>();
-
-  if (range) scale.range(range);
-  if (rangeRound) scale.rangeRound(rangeRound);
   if (domain) scale.domain(domain);
-  if (padding) scale.padding(padding);
-  if (align) scale.align(align);
+  if (range) scale.range(range);
+  if (typeof padding !== 'undefined') scale.padding(padding);
+  if (typeof align !== 'undefined') scale.align(align);
+  applyRound(scale, config);
 
+  // TODO: Remove?
   // @ts-ignore
   scale.type = 'point';
 
   return scale;
 }
+
+export default function createPointScale<
+  DiscreteInput extends StringLike = StringLike,
+  Output extends Value = Value
+>(config: PickScaleConfigWithoutType<'point', Output, DiscreteInput>) {
+  return updatePointScale(scalePoint<DiscreteInput>(), config);
+}