From 3ba3008526fc888a84aab0d78563ee3c56222c64 Mon Sep 17 00:00:00 2001 From: Sarath P S Date: Fri, 4 Dec 2020 23:05:57 +0530 Subject: [PATCH] feat(*): added scale radial --- packages/visx-scale/Readme.md | 18 +++++ packages/visx-scale/package.json | 4 +- packages/visx-scale/src/index.ts | 1 + packages/visx-scale/src/operators/unknown.ts | 2 +- packages/visx-scale/src/scales/radial.ts | 19 +++++ packages/visx-scale/src/types/Scale.ts | 2 + packages/visx-scale/src/types/ScaleConfig.ts | 17 ++++- packages/visx-scale/test/scaleRadial.test.ts | 57 ++++++++++++++ yarn.lock | 78 +++++++++++++++----- 9 files changed, 176 insertions(+), 22 deletions(-) create mode 100644 packages/visx-scale/src/scales/radial.ts create mode 100644 packages/visx-scale/test/scaleRadial.test.ts diff --git a/packages/visx-scale/Readme.md b/packages/visx-scale/Readme.md index 8d1860e3e..471a2dd91 100644 --- a/packages/visx-scale/Readme.md +++ b/packages/visx-scale/Readme.md @@ -110,6 +110,24 @@ const scale = Scale.scaleLog({ }); ``` +### Radial scale + +[Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleRadial) + +Example: + +```js +const scale = Scale.scaleRadial({ + /* + range, + round, + domain, + nice = false, + clamp = false, + */ +}); +``` + ### Ordinal scale [Original d3 docs](https://github.com/d3/d3-scale/blob/master/README.md#scaleOrdinal) diff --git a/packages/visx-scale/package.json b/packages/visx-scale/package.json index 0cc0f3d9c..82d61d898 100644 --- a/packages/visx-scale/package.json +++ b/packages/visx-scale/package.json @@ -32,10 +32,10 @@ "homepage": "https://github.com/airbnb/visx#readme", "dependencies": { "@types/d3-interpolate": "^1.3.1", - "@types/d3-scale": "^3.1.0", + "@types/d3-scale": "^3.2.1", "@types/d3-time": "^1.0.10", "d3-interpolate": "^1.4.0", - "d3-scale": "^3.0.1", + "d3-scale": "^3.2.3", "d3-time": "^1.1.0" }, "publishConfig": { diff --git a/packages/visx-scale/src/index.ts b/packages/visx-scale/src/index.ts index 2280d37b0..80843c590 100644 --- a/packages/visx-scale/src/index.ts +++ b/packages/visx-scale/src/index.ts @@ -1,6 +1,7 @@ export { default as scaleBand } from './scales/band'; export { default as scalePoint } from './scales/point'; export { default as scaleLinear } from './scales/linear'; +export { default as scaleRadial } from './scales/radial'; export { default as scaleTime } from './scales/time'; export { default as scaleUtc } from './scales/utc'; export { default as scaleLog } from './scales/log'; diff --git a/packages/visx-scale/src/operators/unknown.ts b/packages/visx-scale/src/operators/unknown.ts index df6a467c6..6717910d0 100644 --- a/packages/visx-scale/src/operators/unknown.ts +++ b/packages/visx-scale/src/operators/unknown.ts @@ -11,6 +11,6 @@ export default function applyUnknown< config: ScaleConfigWithoutType, ) { if ('unknown' in scale && 'unknown' in config && typeof config.unknown !== 'undefined') { - scale.unknown(config.unknown); + (scale.unknown as any)(config.unknown); } } diff --git a/packages/visx-scale/src/scales/radial.ts b/packages/visx-scale/src/scales/radial.ts new file mode 100644 index 000000000..944d228be --- /dev/null +++ b/packages/visx-scale/src/scales/radial.ts @@ -0,0 +1,19 @@ +import { scaleRadial } from 'd3-scale'; +import { DefaultOutput } from '../types/Base'; +import { PickScaleConfigWithoutType } from '../types/ScaleConfig'; +import scaleOperator from '../operators/scaleOperator'; + +export const updateRadialScale = scaleOperator<'radial'>( + 'domain', + 'range', + 'clamp', + 'nice', + 'round', + 'unknown', +); + +export default function createRadialScale( + config?: PickScaleConfigWithoutType<'radial', Output>, +) { + return updateRadialScale(scaleRadial(), config); +} diff --git a/packages/visx-scale/src/types/Scale.ts b/packages/visx-scale/src/types/Scale.ts index 1d5632eef..c112de67a 100644 --- a/packages/visx-scale/src/types/Scale.ts +++ b/packages/visx-scale/src/types/Scale.ts @@ -3,6 +3,7 @@ import { ScaleLinear, ScaleLogarithmic, ScalePower, + ScaleRadial, ScaleTime, ScaleQuantile, ScaleQuantize, @@ -33,6 +34,7 @@ export interface ScaleTypeToD3Scale< pow: ScalePower; sqrt: ScalePower; symlog: ScaleSymLog; + radial: ScaleRadial; // Input of time scales are `Date | number | { valueOf(): number }` // and cannot be customized via generic type. time: ScaleTime; diff --git a/packages/visx-scale/src/types/ScaleConfig.ts b/packages/visx-scale/src/types/ScaleConfig.ts index df992006c..100df4e87 100644 --- a/packages/visx-scale/src/types/ScaleConfig.ts +++ b/packages/visx-scale/src/types/ScaleConfig.ts @@ -55,6 +55,13 @@ export type SymlogScaleConfig = CreateScaleConfig< 'clamp' | 'constant' | 'nice' | 'zero' >; +export type RadialScaleConfig = CreateScaleConfig< + 'radial', + ContinuousDomain, + Output[], + 'clamp' | 'nice' | 'round' | 'unknown' +>; + export type QuantileScaleConfig = CreateScaleConfig< 'quantile', ContinuousDomain, @@ -127,6 +134,7 @@ export interface ScaleTypeToScaleConfig< pow: PowScaleConfig; sqrt: SqrtScaleConfig; symlog: SymlogScaleConfig; + radial: RadialScaleConfig; time: TimeScaleConfig; utc: UtcScaleConfig; quantile: QuantileScaleConfig; @@ -144,7 +152,14 @@ export type ScaleType = keyof ScaleTypeToScaleConfig; export type TimeScaleType = 'time' | 'utc'; /** Scales that take continuous domains and return continuous ranges */ -export type ContinuousScaleType = 'linear' | 'log' | 'pow' | 'sqrt' | 'symlog' | TimeScaleType; +export type ContinuousScaleType = + | 'linear' + | 'log' + | 'pow' + | 'sqrt' + | 'symlog' + | 'radial' + | TimeScaleType; /** Scales that convert continuous domains to discrete ranges */ export type DiscretizingScaleType = 'quantile' | 'quantize' | 'threshold'; /** Scales that take discrete domains and return discrete ranges */ diff --git a/packages/visx-scale/test/scaleRadial.test.ts b/packages/visx-scale/test/scaleRadial.test.ts new file mode 100644 index 000000000..6bc957112 --- /dev/null +++ b/packages/visx-scale/test/scaleRadial.test.ts @@ -0,0 +1,57 @@ +import { scaleRadial } from '../src'; + +describe('sclaeRadial()', () => { + it('should be defined', () => { + expect(scaleRadial).toBeDefined(); + }); + + it('set domain', () => { + const domain = [1, 2]; + expect(scaleRadial({ domain: [1, 2] }).domain()).toEqual(domain); + }); + + it('set range', () => { + const range = [1, 2]; + expect(scaleRadial({ range: [1, 2] }).range()).toEqual(range); + }); + + it('set unknown', () => { + const scale = scaleRadial({ domain: [0, 10], unknown: 'green' }); + expect(scale('sandwich' as any)).toEqual('green'); + }); + + describe('set clamp', () => { + it('true', () => { + const scale = scaleRadial({ clamp: true }); + expect(scale(10)).toEqual(1); + }); + it('false', () => { + const scale = scaleRadial({ clamp: false }); + expect(scale(10)).toEqual(Math.sqrt(10)); + }); + }); + + describe('set nice', () => { + it('true', () => { + const scale = scaleRadial({ domain: [0.1, 0.91], nice: true }); + expect(scale.domain()).toEqual([0.1, 1]); + }); + it('false', () => { + const scale = scaleRadial({ domain: [0.1, 0.91], nice: false }); + expect(scale.domain()).toEqual([0.1, 0.91]); + }); + }); + + describe('set round', () => { + it('true', () => { + const scale = scaleRadial({ round: true }); + expect(scale(10)).toEqual(Math.round(Math.sqrt(10))); + expect(scale(2.6)).toEqual(Math.round(Math.sqrt(2.6))); + }); + it('false', () => { + const scale = scaleRadial({ round: false }); + expect(scale(10)).toEqual(Math.sqrt(10)); + expect(scale(2.6)).toEqual(Math.sqrt(2.6)); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 220e6eea6..63ba75e3b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3442,10 +3442,10 @@ resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-1.5.0.tgz#315367557d51b823bec848614fac095325613fc3" integrity sha512-9/D7cOBKdZdTCPc6re0HeSUFBM0aFzdNdmYggUWT9SRRiYSOa6Ys2xdTwHKgc1WS3gGfwTMatBOdWCS863REsg== -"@types/d3-scale@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.1.0.tgz#175bb029d0083c04a3fe5645815e0a230d95951c" - integrity sha512-6dXLb03fKXGQueAV50DSsYojBd2w1cSgBHNV2VQa5ScxhQqUy6yEtlukdbV8qyTORA9KLHHSu7hCNUQquYg5GQ== +"@types/d3-scale@^3.2.1": + version "3.2.1" + resolved "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-3.2.1.tgz#b37578c8c7edb6f040e46e7757783aafd2d50e4e" + integrity sha512-j+FryQSVk3GHLqjOX/RsHwGHg4XByJ0xIO1ASBTgzhE9o1tgeV4kEWLOzMzJRembKalflk5F03lEkM+4V6LDrQ== dependencies: "@types/d3-time" "*" @@ -3770,6 +3770,19 @@ semver "^7.3.2" tsutils "^3.17.1" +"@visx/text@1.0.0": + version "1.0.0" + resolved "https://registry.npmjs.org/@visx/text/-/text-1.0.0.tgz#1a14f2ad4c63d0c8ee14da15f09ce32bb496046a" + integrity sha512-5PCKVmYH6z8++SQpARokJtd9zu/XVi2NxTmNwg18IXtiWBo468Jt2wVUmvvDUHF80Aig+Z1VmmVAMKw5jVYyTg== + dependencies: + "@types/classnames" "^2.2.9" + "@types/lodash" "^4.14.160" + "@types/react" "*" + classnames "^2.2.5" + lodash "^4.17.20" + prop-types "^15.7.2" + reduce-css-calc "^1.3.0" + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -5882,10 +5895,10 @@ d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0: resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.4.tgz#635ce4d5eea759f6f605863dbcfc30edc737f71f" integrity sha512-KHW6M86R+FUPYGb3R5XiYjXPq7VzwxZ22buHhAEVG5ztoEcZZMLov530mmccaqA1GghZArjQV46fuc8kUqhhHw== -"d3-array@1.2.0 - 2": - version "2.4.0" - resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.4.0.tgz#87f8b9ad11088769c82b5ea846bcb1cc9393f242" - integrity sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw== +d3-array@^2.3.0: + version "2.9.0" + resolved "https://registry.npmjs.org/d3-array/-/d3-array-2.9.0.tgz#a3041ab298f57ecc88b7d91610c6bc5297c03fb9" + integrity sha512-yOokB8GozB6GAubW9n7phLdRugC8TgEjF6V1cX/q78L80d2tLirUnc0jvDSSF622JJJTmtnJOe9+WKs+yS5GFQ== d3-array@^2.6.0: version "2.8.0" @@ -5910,11 +5923,21 @@ d3-color@1: resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a" integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q== +"d3-color@1 - 2": + version "2.0.0" + resolved "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e" + integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ== + d3-format@1, d3-format@^1.2.0: version "1.4.4" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.4.4.tgz#356925f28d0fd7c7983bfad593726fce46844030" integrity sha512-TWks25e7t8/cqctxCmxpUuzZN11QxIA7YrMbram94zMQ0PXjE4LVIMe/f6a4+xxL8HQ3OsAFULOINQi1pE62Aw== +"d3-format@1 - 2": + version "2.0.0" + resolved "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767" + integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA== + d3-geo@^1.11.3: version "1.12.1" resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.12.1.tgz#7fc2ab7414b72e59fbcbd603e80d9adc029b035f" @@ -5932,13 +5955,20 @@ d3-interpolate-path@2.2.1: resolved "https://registry.yarnpkg.com/d3-interpolate-path/-/d3-interpolate-path-2.2.1.tgz#fd8ff20a90aff3f380bcd1c15305e7b531e55d07" integrity sha512-6qLLh/KJVzls0XtMsMpcxhqMhgVEN7VIbR/6YGZe2qlS8KDgyyVB20XcmGnDyB051HcefQXM/Tppa9vcANEA4Q== -d3-interpolate@1, d3-interpolate@^1.1.5, d3-interpolate@^1.2.0, d3-interpolate@^1.4.0: +d3-interpolate@1, d3-interpolate@^1.1.5, d3-interpolate@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987" integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA== dependencies: d3-color "1" +"d3-interpolate@1.2.0 - 2": + version "2.0.1" + resolved "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163" + integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ== + dependencies: + d3-color "1 - 2" + d3-path@1, d3-path@^1.0.5: version "1.0.9" resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.9.tgz#48c050bb1fe8c262493a8caf5524e3e9591701cf" @@ -5975,16 +6005,16 @@ d3-scale@^1.0.6: d3-time "1" d3-time-format "2" -d3-scale@^3.0.1: - version "3.2.1" - resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.2.1.tgz#da1684adce7261b4bc7a76fe193d887f0e909e69" - integrity sha512-huz5byJO/6MPpz6Q8d4lg7GgSpTjIZW/l+1MQkzKfu2u8P6hjaXaStOpmyrD6ymKoW87d2QVFCKvSjLwjzx/rA== +d3-scale@^3.2.3: + version "3.2.3" + resolved "https://registry.npmjs.org/d3-scale/-/d3-scale-3.2.3.tgz#be380f57f1f61d4ff2e6cbb65a40593a51649cfd" + integrity sha512-8E37oWEmEzj57bHcnjPVOBS3n4jqakOeuv1EDdQSiSrYnMCBdMd3nc4HtKk7uia8DUHcY/CGuJ42xxgtEYrX0g== dependencies: - d3-array "1.2.0 - 2" - d3-format "1" - d3-interpolate "^1.2.0" - d3-time "1" - d3-time-format "2" + d3-array "^2.3.0" + d3-format "1 - 2" + d3-interpolate "1.2.0 - 2" + d3-time "1 - 2" + d3-time-format "2 - 3" d3-shape@^1.0.6, d3-shape@^1.2.0: version "1.3.7" @@ -6007,11 +6037,23 @@ d3-time-format@2, d3-time-format@^2.0.5: dependencies: d3-time "1" +"d3-time-format@2 - 3": + version "3.0.0" + resolved "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6" + integrity sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag== + dependencies: + d3-time "1 - 2" + d3-time@1, d3-time@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.1.0.tgz#b1e19d307dae9c900b7e5b25ffc5dcc249a8a0f1" integrity sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA== +"d3-time@1 - 2": + version "2.0.0" + resolved "https://registry.npmjs.org/d3-time/-/d3-time-2.0.0.tgz#ad7c127d17c67bd57a4c61f3eaecb81108b1e0ab" + integrity sha512-2mvhstTFcMvwStWd9Tj3e6CEqtOivtD8AUiHT8ido/xmzrI9ijrUUihZ6nHuf/vsScRBonagOdj0Vv+SEL5G3Q== + d3-voronoi@^1.1.2: version "1.1.4" resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.4.tgz#dd3c78d7653d2bb359284ae478645d95944c8297"