d3-axis strictNullChecks, Fix, Enhancement:

* [Enhancement] Validated, updated and activated for use with `strictNullChecks`. Tests updated
* [Fix] Commented out tick and tickFormat  signatures which have been separated out in to the overloads corresponding to a numeric continuous scale vs a time scale. Consolidated as well as separated out signatures for these two optional methods create compiler errors, the compiler ignores the optionality of each individual overload when checking type compatibility during assingment (Note, they are not mandatory for each specific scale,  but when in existence will be used by d3-axis internally. So commenting out is not ideal, but rather a compromise.)
* [Chore] Added additional test lines for th AxisScale interface when used with Band- and Point Scales
* [Enhancement] Expanded the Axis.tickFormat signature to allow for the second argument passed to the format function internally, i.e. the zero-based index  of the tick label in the array of tick labels (As per suggested use case provided by@gustavderdrache). Updated tests.
* [Chore] Updated  definition header
* [Chore] Linting. Includes adding of a lint rule de-activation for "unified-signatures"
This commit is contained in:
Tom Wanzek
2016-12-13 11:11:05 -05:00
parent 6f031ede9f
commit af02184d59
4 changed files with 45 additions and 24 deletions

View File

@@ -8,16 +8,20 @@
import * as d3Axis from 'd3-axis';
import {
scaleBand,
ScaleBand,
scaleLinear,
ScaleLinear,
scaleOrdinal,
ScaleOrdinal,
scalePoint,
ScalePoint,
scalePow,
ScalePower,
scaleTime,
ScaleTime,
ScaleTime
} from 'd3-scale';
import { Selection } from 'd3-selection';
import { select, Selection } from 'd3-selection';
import { Transition } from 'd3-transition';
import { timeMinute } from 'd3-time';
import { format } from 'd3-format';
@@ -41,15 +45,18 @@ let axisScaleString: d3Axis.AxisScale<string>;
axisScaleNumber = scaleLinear();
axisScaleDate = scaleTime();
axisScaleString = scaleOrdinal<number>();
axisScaleNumber = scaleBand<number>();
axisScaleNumber = scalePoint<number>();
axisScaleString = scaleBand();
axisScaleString = scalePoint();
// --------------------------------------------------------------------------
// Test AxisContainerElement
// --------------------------------------------------------------------------
let containerElement: d3Axis.AxisContainerElement;
let svg: SVGSVGElement,
g: SVGGElement,
canvas: HTMLCanvasElement;
const svg: SVGSVGElement = select<SVGSVGElement, any>('svg').node() !; //mock
const g: SVGGElement = select<SVGGElement, any>('g').node() !; //mock
const canvas: HTMLCanvasElement = select<HTMLCanvasElement, any>('canvas').node() !; //mock
containerElement = svg;
containerElement = g;
@@ -60,7 +67,7 @@ containerElement = g;
// --------------------------------------------------------------------------
let topAxis: d3Axis.Axis<number | { valueOf(): number }> = d3Axis.axisTop(scaleLinear());
let rightAxis: d3Axis.Axis<Date> = d3Axis.axisRight(scaleTime());
let rightAxis: d3Axis.Axis<Date> = d3Axis.axisRight<Date>(scaleTime());
let bottomAxis: d3Axis.Axis<string> = d3Axis.axisBottom(scaleOrdinal<number>());
let leftAxis: d3Axis.Axis<number | { valueOf(): number }> = d3Axis.axisLeft(scaleLinear<number>());
@@ -95,7 +102,7 @@ topAxis = topAxis.tickArguments([20, 's']);
rightAxis = rightAxis.tickArguments([timeMinute.every(5)]);
let tickArguments: Array<any> = leftAxis.tickArguments();
let tickArguments: any[] = leftAxis.tickArguments();
// tickValues(...) ----------------------------------------------------------------
@@ -105,15 +112,17 @@ bottomAxis = bottomAxis.tickValues(['strongly negative', 'strongly positive']);
leftAxis = leftAxis.tickValues(null);
let tickValues: Array<Date> = rightAxis.tickValues();
let tickValues: Date[] | null = rightAxis.tickValues();
// tickFormat(...) ----------------------------------------------------------------
topAxis = topAxis.tickFormat(format(',.0f'));
topAxis = topAxis.tickFormat(null);
let formatFn: (domainValue: string) => string = bottomAxis.tickFormat();
let formatFn: ((domainValue: string, index: number) => string) | null = bottomAxis.tickFormat();
bottomAxis.tickFormat(function (d, i) { return '#' + i; });
bottomAxis.tickFormat(function (d) { return d + '!'; });
// tickSize(...) ----------------------------------------------------------------
rightAxis = rightAxis.tickSize(5);
@@ -138,19 +147,19 @@ num = rightAxis.tickPadding();
// Test Apply Axis
// --------------------------------------------------------------------------
let gSelection: Selection<SVGGElement, any, any, any>;
let gSelection: Selection<SVGGElement, any, any, any> = select<SVGGElement, any>('g');
let gTransition = gSelection.transition();
gSelection.call(topAxis);
gTransition.call(topAxis);
let svgSelection: Selection<SVGSVGElement, any, any, any>;
let svgSelection: Selection<SVGSVGElement, any, any, any> = select<SVGSVGElement, any>('g');
let svgTransition = svgSelection.transition();
svgSelection.call(leftAxis);
svgTransition.call(leftAxis);
let canvasSelection: Selection<HTMLCanvasElement, any, any, any>;
let canvasSelection: Selection<HTMLCanvasElement, any, any, any> = select<HTMLCanvasElement, any>('canvas');
let canvasTransition = canvasSelection.transition();
// canvasSelection.call(rightAxis); // fails, incompatible context container element

26
d3-axis/index.d.ts vendored
View File

@@ -1,8 +1,10 @@
// Type definitions for D3JS d3-axis module v1.0.3
// Type definitions for D3JS d3-axis module 1.0
// Project: https://github.com/d3/d3-axis/
// Definitions by: Tom Wanzek <https://github.com/tomwanzek>, Alex Ford <https://github.com/gustavderdrache>, Boris Yankov <https://github.com/borisyankov>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// Last module patch version validated against: 1.0.4
import { Selection, TransitionLike } from 'd3-selection';
// --------------------------------------------------------------------------
@@ -31,13 +33,16 @@ export interface AxisTimeInterval {
* for axis to use the scale without error
*/
export interface AxisScale<Domain> {
(x: Domain): number;
domain(): Array<Domain>;
range(): Array<number>;
copy(): AxisScale<Domain>;
(x: Domain): number | undefined;
domain(): Domain[];
range(): number[];
copy(): this;
bandwidth?(): number;
ticks?(count: number | AxisTimeInterval): Array<number> | Array<Date>;
tickFormat?(count: number | AxisTimeInterval, specifier?: string): ((d: number) => string) | ((d: Date) => string);
// TODO: Reconsider the below, note that the compiler does not differentiate the overloads w.r.t. optionality
// ticks?(count?: number): Domain[];
// ticks?(count?: AxisTimeInterval): Date[];
// tickFormat?(count?: number, specifier?: string): ((d: number) => string);
// tickFormat?(count?: number | AxisTimeInterval, specifier?: string): ((d: Date) => string);
}
/**
@@ -170,15 +175,16 @@ export interface Axis<Domain> {
/**
* Returns the currently set tick format function, which defaults to null.
*/
tickFormat(): ((domainValue: Domain) => string) | null;
tickFormat(): ((domainValue: Domain, index: number) => string) | null;
/**
* Sets the tick format function and returns the axis.
*
* @param format A function mapping a value from the axis Domain to a formatted string
* for display purposes.
* for display purposes. When invoked, the format function is also passed a second argument representing the zero-based index
* of the tick label in the array of generated tick labels.
*/
tickFormat(format: (domainValue: Domain) => string): this;
tickFormat(format: (domainValue: Domain, index: number) => string): this;
/**
* Reset the tick format function. A null format indicates that the scales

View File

@@ -3,7 +3,7 @@
"module": "commonjs",
"target": "es6",
"noImplicitAny": true,
"strictNullChecks": false,
"strictNullChecks": true,
"baseUrl": "../",
"typeRoots": [
"../"

6
d3-axis/tslint.json Normal file
View File

@@ -0,0 +1,6 @@
{
"extends": "../tslint.json",
"rules": {
"unified-signatures": false
}
}