Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(*): added scale radial #958

Merged
merged 1 commit into from
Dec 9, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/visx-scale/Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
4 changes: 2 additions & 2 deletions packages/visx-scale/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
1 change: 1 addition & 0 deletions packages/visx-scale/src/index.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion packages/visx-scale/src/operators/unknown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@ export default function applyUnknown<
config: ScaleConfigWithoutType<Output, DiscreteInput, ThresholdInput>,
) {
if ('unknown' in scale && 'unknown' in config && typeof config.unknown !== 'undefined') {
scale.unknown(config.unknown);
(scale.unknown as any)(config.unknown);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The latest type definitions for d3-scales are causing issues at here and that's why I have including the type casting in here

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would you mind sharing the specific issue?
Just want to help think if there is a workaround that is more type-safe than casting to any.

Copy link
Contributor Author

@sarathps93 sarathps93 Dec 4, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

 /**
     * Returns the current unknown value, which defaults to undefined.
     */
    unknown(): UnknownReturnType<Unknown, undefined>;
    /**
     * Sets the output value of the scale for undefined (or NaN) input values and returns this scale.
     *
     * @param value The output value of the scale for undefined (or NaN) input values.
     */
    unknown<NewUnknown>(value: NewUnknown): ScaleLinear<Range, Output, NewUnknown>;

Above is the latest type definition from @types/d3-scale. Somehow the scale.unknown is pointing to the function which accepts no arguments.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kristw Please let me if any other workaround can be done to avoid this.

Copy link
Collaborator

@williaster williaster Dec 7, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like TS isn't correctly matching the second overload. is there any way to import NewUnknown and coerce to that?

scale.unknown(config.unknown as NewUnknown)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@williaster I have tried that option as well. They are not exposing the NewUnknown for us to import

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kristw any other thoughts? else we can probably merge this as is

}
}
19 changes: 19 additions & 0 deletions packages/visx-scale/src/scales/radial.ts
Original file line number Diff line number Diff line change
@@ -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<Output = DefaultOutput>(
config?: PickScaleConfigWithoutType<'radial', Output>,
) {
return updateRadialScale(scaleRadial<Output>(), config);
}
2 changes: 2 additions & 0 deletions packages/visx-scale/src/types/Scale.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import {
ScaleLinear,
ScaleLogarithmic,
ScalePower,
ScaleRadial,
ScaleTime,
ScaleQuantile,
ScaleQuantize,
Expand Down Expand Up @@ -33,6 +34,7 @@ export interface ScaleTypeToD3Scale<
pow: ScalePower<Output, Output>;
sqrt: ScalePower<Output, Output>;
symlog: ScaleSymLog<Output, Output>;
radial: ScaleRadial<Output, Output>;
// Input of time scales are `Date | number | { valueOf(): number }`
// and cannot be customized via generic type.
time: ScaleTime<Output, Output>;
Expand Down
17 changes: 16 additions & 1 deletion packages/visx-scale/src/types/ScaleConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,13 @@ export type SymlogScaleConfig<Output = DefaultOutput> = CreateScaleConfig<
'clamp' | 'constant' | 'nice' | 'zero'
>;

export type RadialScaleConfig<Output = DefaultOutput> = CreateScaleConfig<
'radial',
ContinuousDomain,
Output[],
'clamp' | 'nice' | 'round' | 'unknown'
>;

export type QuantileScaleConfig<Output = DefaultOutput> = CreateScaleConfig<
'quantile',
ContinuousDomain,
Expand Down Expand Up @@ -127,6 +134,7 @@ export interface ScaleTypeToScaleConfig<
pow: PowScaleConfig<Output>;
sqrt: SqrtScaleConfig<Output>;
symlog: SymlogScaleConfig<Output>;
radial: RadialScaleConfig<Output>;
time: TimeScaleConfig<Output>;
utc: UtcScaleConfig<Output>;
quantile: QuantileScaleConfig<Output>;
Expand All @@ -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 */
Expand Down
57 changes: 57 additions & 0 deletions packages/visx-scale/test/scaleRadial.test.ts
Original file line number Diff line number Diff line change
@@ -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));
});
});
});
78 changes: 60 additions & 18 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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" "*"

Expand Down Expand Up @@ -3770,6 +3770,19 @@
semver "^7.3.2"
tsutils "^3.17.1"

"@visx/[email protected]":
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/[email protected]":
version "1.9.0"
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -5932,13 +5955,20 @@ [email protected]:
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"

"[email protected] - 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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down