From 0b513f66f5a486eb03cfe68367463da7d8de2a22 Mon Sep 17 00:00:00 2001 From: Sarath P S Date: Sat, 9 Jan 2021 01:15:15 +0530 Subject: [PATCH 1/4] feat(*): GridRadial, GridAngle & GridPolar --- packages/visx-demo/src/pages/docs/grid.tsx | 8 +- .../visx-shape-line-radial/Example.tsx | 75 ++++--- .../visx-shape-line-radial/package.json | 2 + packages/visx-grid/package.json | 1 + packages/visx-grid/src/grids/GridAngle.tsx | 76 +++++++ packages/visx-grid/src/grids/GridPolar.tsx | 188 ++++++++++++++++++ packages/visx-grid/src/grids/GridRadial.tsx | 96 +++++++++ packages/visx-grid/src/index.ts | 3 + .../visx-grid/src/utils/polarToCartesian.ts | 16 ++ packages/visx-grid/test/GridAngle.test.tsx | 59 ++++++ packages/visx-grid/test/GridPolar.test.tsx | 29 +++ packages/visx-grid/test/GridRadial.test.tsx | 42 ++++ packages/visx-grid/test/utils.test.ts | 17 ++ 13 files changed, 580 insertions(+), 32 deletions(-) create mode 100644 packages/visx-grid/src/grids/GridAngle.tsx create mode 100644 packages/visx-grid/src/grids/GridPolar.tsx create mode 100644 packages/visx-grid/src/grids/GridRadial.tsx create mode 100644 packages/visx-grid/src/utils/polarToCartesian.ts create mode 100644 packages/visx-grid/test/GridAngle.test.tsx create mode 100644 packages/visx-grid/test/GridPolar.test.tsx create mode 100644 packages/visx-grid/test/GridRadial.test.tsx create mode 100644 packages/visx-grid/test/utils.test.ts diff --git a/packages/visx-demo/src/pages/docs/grid.tsx b/packages/visx-demo/src/pages/docs/grid.tsx index 4f4916f89..fe87e3543 100644 --- a/packages/visx-demo/src/pages/docs/grid.tsx +++ b/packages/visx-demo/src/pages/docs/grid.tsx @@ -3,14 +3,18 @@ import GridReadme from '!!raw-loader!../../../../visx-grid/Readme.md'; import Grid from '../../../../visx-grid/src/grids/Grid'; import GridRows from '../../../../visx-grid/src/grids/GridRows'; import GridColumns from '../../../../visx-grid/src/grids/GridColumns'; +import GridRadial from '../../../../visx-grid/src/grids/GridRadial'; +import GridAngle from '../../../../visx-grid/src/grids/GridAngle'; +import GridPolar from '../../../../visx-grid/src/grids/GridPolar'; import DocPage from '../../components/DocPage'; import AxisTile from '../../components/Gallery/AxisTile'; import BarStackTile from '../../components/Gallery/BarStackTile'; import ThresholdTile from '../../components/Gallery/ThresholdTile'; +import LineRadialTile from '../../components/Gallery/LineRadialTile'; -const components = [GridRows, GridColumns, Grid]; +const components = [GridRows, GridColumns, Grid, GridRadial, GridAngle, GridPolar]; -const examples = [AxisTile, BarStackTile, ThresholdTile]; +const examples = [AxisTile, BarStackTile, ThresholdTile, LineRadialTile]; const GridDocs = () => ( diff --git a/packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx index a870a073a..27631d144 100644 --- a/packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx +++ b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/Example.tsx @@ -5,10 +5,12 @@ import React, { useRef, useState, useEffect } from 'react'; import { Group } from '@visx/group'; import { LineRadial } from '@visx/shape'; -import { scaleTime, scaleLog } from '@visx/scale'; +import { scaleTime, scaleLog, NumberLike } from '@visx/scale'; import { curveBasisOpen } from '@visx/curve'; import appleStock, { AppleStock } from '@visx/mock-data/lib/mocks/appleStock'; import { LinearGradient } from '@visx/gradient'; +import { AxisLeft } from '@visx/axis'; +import { GridRadial, GridAngle } from '@visx/grid'; import { animated, useSpring } from 'react-spring'; const green = '#e5fd3d'; @@ -16,6 +18,7 @@ export const blue = '#aeeef8'; const darkgreen = '#dff84d'; export const background = '#744cca'; const darkbackground = '#603FA8'; +const strokeColor = '#744cca'; const springConfig = { tension: 20, }; @@ -29,6 +32,7 @@ function extent(data: Datum[], value: (d: Datum) => number) { // accessors const date = (d: AppleStock) => new Date(d.date).valueOf(); const close = (d: AppleStock) => d.close; +const formatTicks = (val: NumberLike) => String(val); // scales const xScale = scaleTime({ @@ -41,6 +45,7 @@ const yScale = scaleLog({ const angle = (d: AppleStock) => xScale(date(d)) ?? 0; const radius = (d: AppleStock) => yScale(close(d)) ?? 0; +const padding = 20; const firstPoint = appleStock[0]; const lastPoint = appleStock[appleStock.length - 1]; @@ -73,9 +78,8 @@ const Example = ({ width, height, animate = true }: LineRadialProps) => { if (width < 10) return null; // Update scale output to match component dimensions - yScale.range([0, height / 2 - 20]); - - const yScaleTicks = yScale.ticks(); + yScale.range([0, height / 2 - padding]); + const reverseYScale = yScale.copy().range(yScale.range().reverse()); const handlePress = () => setShouldAnimate(true); return ( @@ -92,32 +96,43 @@ const Example = ({ width, height, animate = true }: LineRadialProps) => { - {/** Radial circles */} - {yScaleTicks.map((tick, i) => ( - - ))} - {/** Labels on top */} - {yScaleTicks.map((tick, i) => ( - - {tick} - - ))} - + + + ({ + fontSize: 8, + fill: blue, + fillOpacity: 1, + textAnchor: 'middle', + dx: '1em', + dy: '-0.5em', + stroke: strokeColor, + strokeWidth: 0.5, + paintOrder: 'stroke', + })} + tickFormat={formatTicks} + hideAxisLine + /> {({ path }) => { const d = path(appleStock) || ''; diff --git a/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json index f2cb2acde..9778681bb 100644 --- a/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json +++ b/packages/visx-demo/src/sandboxes/visx-shape-line-radial/package.json @@ -7,9 +7,11 @@ "@babel/runtime": "^7.8.4", "@types/react": "^16", "@types/react-dom": "^16", + "@visx/axis": "latest", "@visx/curve": "latest", "@visx/gradient": "latest", "@visx/group": "latest", + "@visx/grid": "latest", "@visx/mock-data": "latest", "@visx/responsive": "latest", "@visx/scale": "latest", diff --git a/packages/visx-grid/package.json b/packages/visx-grid/package.json index 7dc4d171c..127d21ea4 100644 --- a/packages/visx-grid/package.json +++ b/packages/visx-grid/package.json @@ -33,6 +33,7 @@ "dependencies": { "@types/classnames": "^2.2.9", "@types/react": "*", + "@visx/curve": "1.0.0", "@visx/group": "1.0.0", "@visx/point": "1.0.0", "@visx/scale": "1.3.0", diff --git a/packages/visx-grid/src/grids/GridAngle.tsx b/packages/visx-grid/src/grids/GridAngle.tsx new file mode 100644 index 000000000..d360cf16d --- /dev/null +++ b/packages/visx-grid/src/grids/GridAngle.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import cx from 'classnames'; +import Line, { LineProps } from '@visx/shape/lib/shapes/Line'; +import { Group } from '@visx/group'; +import { ScaleInput, getTicks, coerceNumber } from '@visx/scale'; +import { Point } from '@visx/point'; + +import { CommonGridProps, GridScale } from '../types'; +import polarToCartesian from '../utils/polarToCartesian'; + +export type GridAngleProps = CommonGridProps & { + /** `@visx/scale` or `d3-scale` object used to convert value to position. */ + scale: Scale; + /** + * Exact values used to generate grid lines using `scale`. + * Overrides `numTicks` if specified. + */ + tickValues?: ScaleInput[]; + /** + * Radius which determines the start position of polar lines. + */ + innerRadius?: number; + /** + * Radius which determines the end position of polar lines. + */ + outerRadius: number; + /** + * The class name applied to all polar lines. + */ + lineClassName?: string; +}; + +export type AllGridAngleProps = GridAngleProps & + Omit< + LineProps & Omit, keyof LineProps>, + keyof GridAngleProps + >; + +export default function GridAngle({ + className, + innerRadius = 0, + left = 0, + lineClassName, + lineStyle, + numTicks = 10, + outerRadius = 0, + scale, + stroke = '#eaf0f6', + strokeDasharray, + strokeWidth = 1, + tickValues, + top = 0, + ...restProps +}: AllGridAngleProps) { + const ticks = tickValues ?? getTicks(scale, numTicks); + return ( + + {ticks.map((tick, i) => { + const angle = (coerceNumber(scale(tick)) ?? Math.PI / 2) - Math.PI / 2; + return ( + + ); + })} + + ); +} diff --git a/packages/visx-grid/src/grids/GridPolar.tsx b/packages/visx-grid/src/grids/GridPolar.tsx new file mode 100644 index 000000000..6152a8614 --- /dev/null +++ b/packages/visx-grid/src/grids/GridPolar.tsx @@ -0,0 +1,188 @@ +import React, { CSSProperties } from 'react'; +import cx from 'classnames'; +import { Group } from '@visx/group'; +import { ScaleInput } from '@visx/scale'; +import { LineProps } from '@visx/shape/lib/shapes/Line'; +import GridAngle from './GridAngle'; +import GridRadial from './GridRadial'; + +import { CommonGridProps, GridScale } from '../types'; + +export type GridPolarProps< + AngleScale extends GridScale, + RadialScale extends GridScale +> = CommonGridProps & { + /** + * If specified, the arc of each radial grid line will have this thickness, useful for fills. + */ + arcThickness?: number; + /** + * The class name applied to the angle grid group. + */ + classNameAngle?: string; + /** + * The class name applied to all radial lines. + */ + classNameRadial?: string; + /** + * The end angle of the arc of radial grid lines in radians. + */ + endAngle?: number; + /** + * The color applied to the fill of the radial lines. + */ + fillRadial?: string; + /** + * Radius which determines the start position of polar lines. + */ + innerRadius?: number; + /** + * Classname applied to angle line path. + */ + lineClassNameAngle?: string; + /** + * Classname applied to radial line path. + */ + lineClassNameRadial?: string; + /** + * Style object set as the angle line path style attribute. + */ + lineStyleAngle?: CSSProperties & + LineProps & + Omit, keyof LineProps>; + /** + * Style object set as the radius line path style attribute. + */ + lineStyleRadial?: CSSProperties & + LineProps & + Omit, keyof LineProps>; + /** + * The number of angle ticks wanted for the grid. Note this is approximate due to d3's algorithm, + * you can use tickValues for greater control + */ + numTicksAngle?: number; + /** + * The number of radial ticks wanted for the grid. Note this is approximate due to d3's algorithm, + * you can use tickValues for greater control + */ + numTicksRadial?: number; + /** + * Radius which determines the end position of polar lines. + */ + outerRadius: number; + /** + * A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) + * scale function used to generate the angle of polar lines. + */ + scaleAngle: AngleScale; + /** + * A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) + * scale function used to generate the radius of radial lines. + */ + scaleRadial: RadialScale; + /** + * The start angle of the arc of radial grid lines in radians. + */ + startAngle?: number; + /** + * The color applied to the stroke of the angle lines. + */ + strokeAngle?: string; + /** + * The color applied to the stroke of the radial lines. + */ + strokeRadial?: string; + /** + * The pattern of dashes for angle line stroke. + */ + strokeDasharrayAngle?: string; + /** + * The pattern of dashes for angle radial stroke. + */ + strokeDasharrayRadial?: string; + /** + * The pixel value for the width of the angle lines. + */ + strokeWidthAngle?: string | number; + /** + * The pixel value for the width of the radial lines. + */ + strokeWidthRadial?: string | number; + /** + * An array of values that determine the number and values of the angle ticks. Falls + * back to `scale.ticks()` or `.domain()`. + */ + tickValuesAngle?: ScaleInput[]; + /** + * An array of values that determine the number and values of the radial ticks. Falls + * back to `scale.ticks()` or `.domain()`. + */ + tickValuesRadial?: ScaleInput[]; + /** + * A top pixel offset applied to the entire grid group. + */ + top?: number; +}; + +export default function GridPolar({ + arcThickness, + className, + classNameAngle, + classNameRadial, + endAngle, + fillRadial, + innerRadius, + left, + lineClassNameAngle, + lineClassNameRadial, + lineStyleAngle, + lineStyleRadial, + numTicksAngle, + numTicksRadial, + outerRadius, + scaleAngle, + scaleRadial, + startAngle, + strokeAngle, + strokeRadial, + strokeWidthAngle, + strokeWidthRadial, + strokeDasharrayAngle, + strokeDasharrayRadial, + tickValuesAngle, + tickValuesRadial, + top, +}: GridPolarProps) { + return ( + + + + + ); +} diff --git a/packages/visx-grid/src/grids/GridRadial.tsx b/packages/visx-grid/src/grids/GridRadial.tsx new file mode 100644 index 000000000..6b61da65d --- /dev/null +++ b/packages/visx-grid/src/grids/GridRadial.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import cx from 'classnames'; +import Arc, { ArcProps } from '@visx/shape/lib/shapes/Arc'; +import { Group } from '@visx/group'; +import { ScaleInput, getTicks } from '@visx/scale'; + +import { CommonGridProps, GridScale } from '../types'; + +export type GridRadialProps = CommonGridProps & { + /** `@visx/scale` or `d3-scale` object used to convert value to position. */ + scale: Scale; + /** + * Exact values used to generate grid lines using `scale`. + * Overrides `numTicks` if specified. + */ + tickValues?: ScaleInput[]; + /** + * If specified, the arc of each radial grid line will have this thickness, useful for fills. + */ + arcThickness?: number; + /** + * The end angle of the arc of radial grid lines in radians. + */ + endAngle?: number; + /** + * The class name applied to all radial lines. + */ + lineClassName?: string; + /** + * The color applied to the fill of the radial lines. + */ + fill?: string; + /** + * The fill opacity applied to the fill of the radial lines. + */ + fillOpacity?: number; + /** + * The start angle of the arc of radial grid lines in radians. + */ + startAngle?: number; + /** + * Child components to the Arc + */ + children?: () => React.ReactNode; +}; + +export type AllGridRadialProps = GridRadialProps & + Omit< + ArcProps & Omit, keyof ArcProps>, + keyof GridRadialProps + >; + +export default function GridRadial({ + arcThickness, + className, + endAngle = 2 * Math.PI, + fill = 'transparent', + fillOpacity = 1, + left = 0, + lineClassName, + lineStyle, + numTicks = 10, + scale, + startAngle = 0, + stroke = '#eaf0f6', + strokeWidth = 1, + strokeDasharray, + tickValues, + top = 0, + ...restProps +}: AllGridRadialProps) { + const radii = tickValues ?? getTicks(scale, numTicks); + const innerRadius = Math.min(...scale.domain()); + + return ( + + {radii.map((radius, i) => ( + + ))} + + ); +} diff --git a/packages/visx-grid/src/index.ts b/packages/visx-grid/src/index.ts index b4b330d1f..69b3794ab 100644 --- a/packages/visx-grid/src/index.ts +++ b/packages/visx-grid/src/index.ts @@ -1,3 +1,6 @@ export { default as GridRows } from './grids/GridRows'; export { default as GridColumns } from './grids/GridColumns'; export { default as Grid } from './grids/Grid'; +export { default as GridAngle } from './grids/GridAngle'; +export { default as GridRadial } from './grids/GridRadial'; +export { default as GridPolar } from './grids/GridPolar'; diff --git a/packages/visx-grid/src/utils/polarToCartesian.ts b/packages/visx-grid/src/utils/polarToCartesian.ts new file mode 100644 index 000000000..192668a53 --- /dev/null +++ b/packages/visx-grid/src/utils/polarToCartesian.ts @@ -0,0 +1,16 @@ +export type PolarCoordinate = { + radius: number; + angle: number; +}; + +export type CartesianCoordinate = { + x: number; + y: number; +}; + +export default function polarToCartesian({ radius, angle }: PolarCoordinate): CartesianCoordinate { + return { + x: radius * Math.cos(angle), + y: radius * Math.sin(angle), + }; +} diff --git a/packages/visx-grid/test/GridAngle.test.tsx b/packages/visx-grid/test/GridAngle.test.tsx new file mode 100644 index 000000000..bddc53a7e --- /dev/null +++ b/packages/visx-grid/test/GridAngle.test.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { Line } from '@visx/shape'; +import { scaleLinear } from '@visx/scale'; +import { GridAngle } from '../src'; +import * as polarToCartesian from '../src/utils/polarToCartesian'; + +const gridProps = { + innerRadius: 0, + outerRadius: 10, + scale: scaleLinear({ + range: [0, 2 * Math.PI], + domain: [1, 10], + }), +}; + +describe('', () => { + it('should render with class .vx-grid-angle', () => { + const wrapper = shallow(); + expect(wrapper.find('.visx-grid-angle')).toHaveLength(1); + }); + + it('should set user-specified lineClassName', () => { + const wrapper = shallow(); + expect(wrapper.find('.test-class').length).toBeGreaterThan(0); + }); + + it('should render `numTicks` grid lines', () => { + const fiveTickWrapper = shallow(); + const tenTickWrapper = shallow(); + + expect(fiveTickWrapper.find(Line)).toHaveLength(5); + expect(tenTickWrapper.find(Line)).toHaveLength(10); + }); + + it('should render grid lines according to tickValues', () => { + const wrapper = shallow(); + + expect(wrapper.find(Line)).toHaveLength(3); + }); + + it('should compute radial lines using innerRadius and outerRadius', () => { + const polarToCartesianSpy = jest.spyOn(polarToCartesian, 'default'); + const innerRadius = 4; + const outerRadius = 7; + shallow(); + + expect(polarToCartesianSpy.mock.calls.length).toBeGreaterThanOrEqual(2); + + const fromPointCall = polarToCartesianSpy.mock.calls[0][0]; + const toPointCall = polarToCartesianSpy.mock.calls[1][0]; + + expect(fromPointCall.radius).toBe(innerRadius); + expect(toPointCall.radius).toBe(outerRadius); + + polarToCartesianSpy.mockRestore(); + }); +}); diff --git a/packages/visx-grid/test/GridPolar.test.tsx b/packages/visx-grid/test/GridPolar.test.tsx new file mode 100644 index 000000000..130e4d166 --- /dev/null +++ b/packages/visx-grid/test/GridPolar.test.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { GridPolar, GridAngle, GridRadial } from '../src'; +import { scaleLinear } from '../../visx-scale'; + +const gridProps = { + innerRadius: 0, + outerRadius: 10, + scaleAngle: scaleLinear({ range: [1, 100], domain: [1, 10] }), + scaleRadial: scaleLinear({ range: [1, 100], domain: [1, 10] }), +}; + +describe('', () => { + it('should be defined', () => { + expect(GridPolar).toBeDefined(); + }); + + it('should render with class .visx-grid-polar', () => { + const wrapper = shallow(); + expect(wrapper.find('.visx-grid-polar')).toHaveLength(1); + }); + + it('should render both GridAngle & GridRadial', () => { + const wrapper = shallow(); + expect(wrapper.find(GridAngle)).toHaveLength(1); + expect(wrapper.find(GridRadial)).toHaveLength(1); + }); +}); diff --git a/packages/visx-grid/test/GridRadial.test.tsx b/packages/visx-grid/test/GridRadial.test.tsx new file mode 100644 index 000000000..7f08545d8 --- /dev/null +++ b/packages/visx-grid/test/GridRadial.test.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { shallow } from 'enzyme'; + +import { Arc } from '@visx/shape'; +import { GridRadial } from '../src'; +import { scaleLinear } from '../../visx-scale'; + +const gridProps = { + innerRadius: 0, + outerRadius: 10, + scale: scaleLinear({ range: [1, 100], domain: [1, 10] }), +}; + +describe('', () => { + it('should be defined', () => { + expect(GridRadial).toBeDefined(); + }); + + it('should render with class .visx-grid-radial', () => { + const wrapper = shallow(); + expect(wrapper.find('.visx-grid-radial')).toHaveLength(1); + }); + + it('should set user-specified lineClassName', () => { + const wrapper = shallow(); + expect(wrapper.find('.test-class').length).toBeGreaterThan(0); + }); + + it('should render `numTicks` grid line arcs', () => { + const fiveTickWrapper = shallow(); + const tenTickWrapper = shallow(); + + expect(fiveTickWrapper.find(Arc)).toHaveLength(5); + expect(tenTickWrapper.find(Arc)).toHaveLength(10); + }); + + it('should render grid line arcs according to tickValues', () => { + const wrapper = shallow(); + + expect(wrapper.find(Arc)).toHaveLength(3); + }); +}); diff --git a/packages/visx-grid/test/utils.test.ts b/packages/visx-grid/test/utils.test.ts new file mode 100644 index 000000000..a265b1036 --- /dev/null +++ b/packages/visx-grid/test/utils.test.ts @@ -0,0 +1,17 @@ +import polarToCartesian from '../src/utils/polarToCartesian'; + +describe('GridUtils', () => { + describe('polarToCartesian', () => { + const config = { + radius: 20, + angle: 20, + }; + it('should return cartesian output for the given polar input config', () => { + const expected = { + x: config.radius * Math.cos(config.angle), + y: config.radius * Math.sin(config.angle), + }; + expect(polarToCartesian(config)).toEqual(expected); + }); + }); +}); From 251729bfe9054b524866363300ed33c7cd2d3f45 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Tue, 9 Feb 2021 16:17:46 -0800 Subject: [PATCH 2/4] copy(scale): tweak PolarGrid prop annotations --- packages/visx-grid/src/grids/GridAngle.tsx | 6 +++--- packages/visx-grid/src/grids/GridPolar.tsx | 12 ++++++------ packages/visx-grid/src/grids/GridRadial.tsx | 2 +- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/visx-grid/src/grids/GridAngle.tsx b/packages/visx-grid/src/grids/GridAngle.tsx index d360cf16d..47af22eba 100644 --- a/packages/visx-grid/src/grids/GridAngle.tsx +++ b/packages/visx-grid/src/grids/GridAngle.tsx @@ -17,15 +17,15 @@ export type GridAngleProps = CommonGridProps & { */ tickValues?: ScaleInput[]; /** - * Radius which determines the start position of polar lines. + * Radius which determines the start position of angle lines. */ innerRadius?: number; /** - * Radius which determines the end position of polar lines. + * Radius which determines the end position of angle lines. */ outerRadius: number; /** - * The class name applied to all polar lines. + * The class name applied to all angle lines. */ lineClassName?: string; }; diff --git a/packages/visx-grid/src/grids/GridPolar.tsx b/packages/visx-grid/src/grids/GridPolar.tsx index 6152a8614..5555a777c 100644 --- a/packages/visx-grid/src/grids/GridPolar.tsx +++ b/packages/visx-grid/src/grids/GridPolar.tsx @@ -21,7 +21,7 @@ export type GridPolarProps< */ classNameAngle?: string; /** - * The class name applied to all radial lines. + * The class name applied to the radial grid group. */ classNameRadial?: string; /** @@ -33,15 +33,15 @@ export type GridPolarProps< */ fillRadial?: string; /** - * Radius which determines the start position of polar lines. + * Radius which determines the start position of angle lines. */ innerRadius?: number; /** - * Classname applied to angle line path. + * Classname applied to all angle line paths. */ lineClassNameAngle?: string; /** - * Classname applied to radial line path. + * Classname applied to all radial line paths. */ lineClassNameRadial?: string; /** @@ -67,12 +67,12 @@ export type GridPolarProps< */ numTicksRadial?: number; /** - * Radius which determines the end position of polar lines. + * Radius which determines the end position of angle lines. */ outerRadius: number; /** * A [d3](https://github.com/d3/d3-scale) or [visx](https://github.com/airbnb/visx/tree/master/packages/visx-scale) - * scale function used to generate the angle of polar lines. + * scale function used to generate the angle of angle lines. */ scaleAngle: AngleScale; /** diff --git a/packages/visx-grid/src/grids/GridRadial.tsx b/packages/visx-grid/src/grids/GridRadial.tsx index 6b61da65d..70874d564 100644 --- a/packages/visx-grid/src/grids/GridRadial.tsx +++ b/packages/visx-grid/src/grids/GridRadial.tsx @@ -39,7 +39,7 @@ export type GridRadialProps = CommonGridProps & { */ startAngle?: number; /** - * Child components to the Arc + * Child components to the Arc. */ children?: () => React.ReactNode; }; From 9c4855547ef4b5e35b7cb0bc75d8208cfd7d48d8 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 10 Feb 2021 13:06:12 -0800 Subject: [PATCH 3/4] commit to trigger CI --- packages/visx-grid/src/grids/GridAngle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-grid/src/grids/GridAngle.tsx b/packages/visx-grid/src/grids/GridAngle.tsx index 47af22eba..402c465e8 100644 --- a/packages/visx-grid/src/grids/GridAngle.tsx +++ b/packages/visx-grid/src/grids/GridAngle.tsx @@ -9,7 +9,7 @@ import { CommonGridProps, GridScale } from '../types'; import polarToCartesian from '../utils/polarToCartesian'; export type GridAngleProps = CommonGridProps & { - /** `@visx/scale` or `d3-scale` object used to convert value to position. */ + /** `@visx/scale` or `d3-scale` object used to convert value to angle. */ scale: Scale; /** * Exact values used to generate grid lines using `scale`. From ab60952badfaea4331109c26f53fc1045aea7d8f Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 10 Feb 2021 13:50:06 -0800 Subject: [PATCH 4/4] kick CI again --- packages/visx-grid/src/grids/GridAngle.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-grid/src/grids/GridAngle.tsx b/packages/visx-grid/src/grids/GridAngle.tsx index 402c465e8..c034b48f3 100644 --- a/packages/visx-grid/src/grids/GridAngle.tsx +++ b/packages/visx-grid/src/grids/GridAngle.tsx @@ -12,7 +12,7 @@ export type GridAngleProps = CommonGridProps & { /** `@visx/scale` or `d3-scale` object used to convert value to angle. */ scale: Scale; /** - * Exact values used to generate grid lines using `scale`. + * Exact values used to generate angle grid lines using `scale`. * Overrides `numTicks` if specified. */ tickValues?: ScaleInput[];