@d3plus/core 3.0.16 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +88482 -2998
- package/es/index.js +1 -1
- package/es/src/charts/AreaPlot.js +1 -3
- package/es/src/charts/BarChart.js +1 -3
- package/es/src/charts/BoxWhisker.js +2 -4
- package/es/src/charts/BumpChart.js +4 -5
- package/es/src/charts/Donut.js +1 -3
- package/es/src/charts/Geomap.js +47 -88
- package/es/src/charts/LinePlot.js +1 -3
- package/es/src/charts/Matrix.js +27 -46
- package/es/src/charts/Network.js +87 -81
- package/es/src/charts/Pack.js +21 -34
- package/es/src/charts/Pie.js +12 -24
- package/es/src/charts/Plot.js +226 -321
- package/es/src/charts/Priestley.js +18 -36
- package/es/src/charts/Radar.js +100 -47
- package/es/src/charts/RadialMatrix.js +35 -47
- package/es/src/charts/Rings.js +99 -90
- package/es/src/charts/Sankey.js +85 -75
- package/es/src/charts/StackedArea.js +1 -3
- package/es/src/charts/Tree.js +27 -28
- package/es/src/charts/Treemap.js +117 -71
- package/es/src/charts/Viz.js +296 -492
- package/es/src/charts/drawSteps/drawAttribution.js +1 -1
- package/es/src/charts/drawSteps/drawBack.js +1 -2
- package/es/src/charts/drawSteps/drawColorScale.js +1 -2
- package/es/src/charts/drawSteps/drawLegend.js +8 -10
- package/es/src/charts/drawSteps/drawSubtitle.js +1 -3
- package/es/src/charts/drawSteps/drawTimeline.js +12 -9
- package/es/src/charts/drawSteps/drawTitle.js +1 -3
- package/es/src/charts/drawSteps/drawTotal.js +1 -3
- package/es/src/charts/drawSteps/zoomControls.js +19 -21
- package/es/src/charts/events/click.legend.js +2 -3
- package/es/src/charts/events/click.shape.js +2 -4
- package/es/src/charts/events/mouseenter.js +7 -8
- package/es/src/charts/events/mouseleave.js +1 -3
- package/es/src/charts/events/mousemove.legend.js +3 -4
- package/es/src/charts/events/mousemove.shape.js +2 -4
- package/es/src/charts/events/touchstart.body.js +1 -1
- package/es/src/charts/helpers/matrixData.js +11 -4
- package/es/src/charts/helpers/tileAttributions.js +2 -1
- package/es/src/charts/plotBuffers/Bar.js +55 -12
- package/es/src/charts/plotBuffers/Box.js +55 -12
- package/es/src/charts/plotBuffers/Circle.js +9 -11
- package/es/src/charts/plotBuffers/Line.js +4 -6
- package/es/src/charts/plotBuffers/Rect.js +10 -12
- package/es/src/charts/plotBuffers/discreteBuffer.js +4 -2
- package/es/src/charts/plotBuffers/numericBuffer.js +7 -6
- package/es/src/components/Axis.js +298 -426
- package/es/src/components/AxisBottom.js +1 -3
- package/es/src/components/AxisLeft.js +1 -3
- package/es/src/components/AxisRight.js +1 -3
- package/es/src/components/AxisTop.js +1 -3
- package/es/src/components/ColorScale.js +80 -197
- package/es/src/components/Legend.js +82 -135
- package/es/src/components/Message.js +27 -19
- package/es/src/components/TextBox.js +106 -262
- package/es/src/components/Timeline.js +88 -155
- package/es/src/components/Tooltip.js +301 -330
- package/es/src/shapes/Area.js +95 -74
- package/es/src/shapes/Bar.js +46 -86
- package/es/src/shapes/Box.js +104 -118
- package/es/src/shapes/Circle.js +29 -30
- package/es/src/shapes/Image.js +44 -102
- package/es/src/shapes/Line.js +74 -40
- package/es/src/shapes/Path.js +23 -25
- package/es/src/shapes/Rect.js +29 -41
- package/es/src/shapes/Shape.js +146 -363
- package/es/src/shapes/Whisker.js +89 -90
- package/es/src/utils/AccessorFn.js +4 -0
- package/es/src/utils/BaseClass.js +53 -82
- package/es/src/utils/D3plusConfig.js +1 -0
- package/es/src/utils/RESET.js +2 -4
- package/es/src/utils/accessor.js +4 -5
- package/es/src/utils/configPrep.js +13 -12
- package/es/src/utils/constant.js +2 -3
- package/es/src/utils/getProp.js +4 -4
- package/es/src/utils/index.js +0 -1
- package/package.json +29 -22
- package/types/index.d.ts +5 -0
- package/types/src/charts/AreaPlot.d.ts +16 -0
- package/types/src/charts/BarChart.d.ts +16 -0
- package/types/src/charts/BoxWhisker.d.ts +11 -0
- package/types/src/charts/BumpChart.d.ts +36 -0
- package/types/src/charts/Donut.d.ts +11 -0
- package/types/src/charts/Geomap.d.ts +120 -0
- package/types/src/charts/LinePlot.d.ts +15 -0
- package/types/src/charts/Matrix.d.ts +74 -0
- package/types/src/charts/Network.d.ts +78 -0
- package/types/src/charts/Pack.d.ts +47 -0
- package/types/src/charts/Pie.d.ts +44 -0
- package/types/src/charts/Plot.d.ts +199 -0
- package/types/src/charts/Priestley.d.ts +37 -0
- package/types/src/charts/Radar.d.ts +38 -0
- package/types/src/charts/RadialMatrix.d.ts +78 -0
- package/types/src/charts/Rings.d.ts +74 -0
- package/types/src/charts/Sankey.d.ts +81 -0
- package/types/src/charts/StackedArea.d.ts +14 -0
- package/types/src/charts/Tree.d.ts +33 -0
- package/types/src/charts/Treemap.d.ts +51 -0
- package/types/src/charts/Viz.d.ts +402 -0
- package/types/src/charts/drawSteps/drawAttribution.d.ts +7 -0
- package/types/src/charts/drawSteps/drawBack.d.ts +6 -0
- package/types/src/charts/drawSteps/drawColorScale.d.ts +6 -0
- package/types/src/charts/drawSteps/drawLegend.d.ts +12 -0
- package/types/src/charts/drawSteps/drawSubtitle.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTimeline.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTitle.d.ts +7 -0
- package/types/src/charts/drawSteps/drawTotal.d.ts +7 -0
- package/types/src/charts/drawSteps/zoomControls.d.ts +7 -0
- package/types/src/charts/events/click.legend.d.ts +8 -0
- package/types/src/charts/events/click.shape.d.ts +8 -0
- package/types/src/charts/events/mouseenter.d.ts +8 -0
- package/types/src/charts/events/mouseleave.d.ts +8 -0
- package/types/src/charts/events/mousemove.legend.d.ts +9 -0
- package/types/src/charts/events/mousemove.shape.d.ts +9 -0
- package/types/src/charts/events/touchstart.body.d.ts +7 -0
- package/types/src/charts/helpers/matrixData.d.ts +11 -0
- package/types/src/charts/helpers/tileAttributions.d.ts +6 -0
- package/types/src/charts/index.d.ts +21 -0
- package/types/src/charts/plotBuffers/Bar.d.ts +16 -0
- package/types/src/charts/plotBuffers/Box.d.ts +16 -0
- package/types/src/charts/plotBuffers/Circle.d.ts +20 -0
- package/types/src/charts/plotBuffers/Line.d.ts +16 -0
- package/types/src/charts/plotBuffers/Rect.d.ts +19 -0
- package/types/src/charts/plotBuffers/discreteBuffer.d.ts +7 -0
- package/types/src/charts/plotBuffers/numericBuffer.d.ts +5 -0
- package/types/src/components/Axis.d.ts +309 -0
- package/types/src/components/AxisBottom.d.ts +11 -0
- package/types/src/components/AxisLeft.d.ts +11 -0
- package/types/src/components/AxisRight.d.ts +11 -0
- package/types/src/components/AxisTop.d.ts +11 -0
- package/types/src/components/ColorScale.d.ts +208 -0
- package/types/src/components/Legend.d.ts +157 -0
- package/types/src/components/Message.d.ts +40 -0
- package/types/src/components/TextBox.d.ts +278 -0
- package/types/src/components/Timeline.d.ts +157 -0
- package/types/src/components/Tooltip.d.ts +297 -0
- package/types/src/components/index.d.ts +11 -0
- package/types/src/shapes/Area.d.ts +81 -0
- package/types/src/shapes/Bar.d.ts +104 -0
- package/types/src/shapes/Box.d.ts +121 -0
- package/types/src/shapes/Circle.d.ts +44 -0
- package/types/src/shapes/Image.d.ts +124 -0
- package/types/src/shapes/Line.d.ts +48 -0
- package/types/src/shapes/Path.d.ts +38 -0
- package/types/src/shapes/Rect.d.ts +54 -0
- package/types/src/shapes/Shape.d.ts +378 -0
- package/types/src/shapes/Whisker.d.ts +96 -0
- package/types/src/shapes/index.d.ts +10 -0
- package/types/src/utils/AccessorFn.d.ts +6 -0
- package/types/src/utils/BaseClass.d.ts +76 -0
- package/types/src/utils/D3plusConfig.d.ts +164 -0
- package/types/src/utils/RESET.d.ts +3 -0
- package/types/src/utils/accessor.d.ts +13 -0
- package/types/src/utils/configPrep.d.ts +28 -0
- package/types/src/utils/constant.d.ts +11 -0
- package/types/src/utils/getProp.d.ts +9 -0
- package/types/src/utils/index.d.ts +8 -0
- package/umd/d3plus-core.full.js +20126 -18700
- package/umd/d3plus-core.full.js.map +1 -1
- package/umd/d3plus-core.full.min.js +2919 -5393
- package/umd/d3plus-core.js +1919 -4073
- package/umd/d3plus-core.js.map +1 -1
- package/umd/d3plus-core.min.js +1604 -3936
- package/es/src/utils/uuid.js +0 -13
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type Plot from "../Plot.js";
|
|
2
|
+
/**
|
|
3
|
+
@module lineBuffer
|
|
4
|
+
Adds a buffer to either side of the non-discrete axis.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
@param buffer Defaults to the radius of the largest Circle.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
export default function (this: Plot, { data, x, y, x2, y2, }: {
|
|
11
|
+
data: Record<string, unknown>[];
|
|
12
|
+
x: any;
|
|
13
|
+
y: any;
|
|
14
|
+
x2?: any;
|
|
15
|
+
y2?: any;
|
|
16
|
+
}): [unknown, unknown];
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type Plot from "../Plot.js";
|
|
2
|
+
/**
|
|
3
|
+
@module rectBuffer
|
|
4
|
+
Adds a buffer to either side of the non-discrete axis.
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
@param buffer Defaults to the width/height of the largest Rect.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
export default function (this: Plot, { data, x, y, x2, y2, yScale, xScale, config, }: {
|
|
11
|
+
data: Record<string, unknown>[];
|
|
12
|
+
x: any;
|
|
13
|
+
y: any;
|
|
14
|
+
x2?: any;
|
|
15
|
+
y2?: any;
|
|
16
|
+
yScale?: string;
|
|
17
|
+
xScale?: string;
|
|
18
|
+
config?: Record<string, (...args: unknown[]) => unknown>;
|
|
19
|
+
}): [unknown, unknown];
|
|
@@ -0,0 +1,309 @@
|
|
|
1
|
+
import { transition } from "d3-transition";
|
|
2
|
+
import type { D3Selection } from "@d3plus/dom";
|
|
3
|
+
import { TextBox } from "../components/index.js";
|
|
4
|
+
import { BaseClass } from "../utils/index.js";
|
|
5
|
+
/**
|
|
6
|
+
Creates an SVG scale based on an array of data.
|
|
7
|
+
*/
|
|
8
|
+
export default class Axis extends BaseClass {
|
|
9
|
+
_select: D3Selection;
|
|
10
|
+
_align: string;
|
|
11
|
+
_barConfig: Record<string, unknown>;
|
|
12
|
+
_data: any[];
|
|
13
|
+
_domain: any[];
|
|
14
|
+
_duration: number;
|
|
15
|
+
_gridConfig: Record<string, unknown>;
|
|
16
|
+
_gridLog: boolean;
|
|
17
|
+
_gridSize: number | undefined;
|
|
18
|
+
_grid: unknown[] | undefined;
|
|
19
|
+
_height: number;
|
|
20
|
+
_labelOffset: boolean;
|
|
21
|
+
_labelRotation: boolean | undefined;
|
|
22
|
+
_labels: unknown[] | undefined;
|
|
23
|
+
_locale: any;
|
|
24
|
+
_margin: Record<string, number>;
|
|
25
|
+
_maxSize: number;
|
|
26
|
+
_minSize: number;
|
|
27
|
+
_orient: string;
|
|
28
|
+
_outerBounds: Record<string, number>;
|
|
29
|
+
_padding: number;
|
|
30
|
+
_paddingInner: number;
|
|
31
|
+
_paddingOuter: number;
|
|
32
|
+
_position: {
|
|
33
|
+
horizontal: boolean;
|
|
34
|
+
width: string;
|
|
35
|
+
height: string;
|
|
36
|
+
x: string;
|
|
37
|
+
y: string;
|
|
38
|
+
opposite: string;
|
|
39
|
+
};
|
|
40
|
+
_range: (number | undefined)[] | undefined;
|
|
41
|
+
_rounding: string;
|
|
42
|
+
_roundingInsideMinPrefix: string;
|
|
43
|
+
_roundingInsideMinSuffix: string;
|
|
44
|
+
_roundingInsideMaxPrefix: string;
|
|
45
|
+
_roundingInsideMaxSuffix: string;
|
|
46
|
+
_scale: string;
|
|
47
|
+
_scalePadding: number;
|
|
48
|
+
_shape: string;
|
|
49
|
+
_shapeConfig: Record<string, any>;
|
|
50
|
+
_tickFormat: any;
|
|
51
|
+
_ticks: unknown[] | undefined;
|
|
52
|
+
_tickSize: number;
|
|
53
|
+
_tickSuffix: string;
|
|
54
|
+
_tickUnit: number;
|
|
55
|
+
_timeLocale: Record<string, unknown> | undefined;
|
|
56
|
+
_title: string | undefined;
|
|
57
|
+
_titleClass: TextBox;
|
|
58
|
+
_titleConfig: Record<string, any>;
|
|
59
|
+
_width: number;
|
|
60
|
+
_d3Scale: any;
|
|
61
|
+
_d3ScaleNegative: any;
|
|
62
|
+
_group: D3Selection;
|
|
63
|
+
_lastScale: ((d: unknown) => number) | undefined;
|
|
64
|
+
_availableTicks: unknown[];
|
|
65
|
+
_visibleTicks: unknown[];
|
|
66
|
+
_transition: ReturnType<typeof transition>;
|
|
67
|
+
_userFormat: ((d: unknown) => string) | false | undefined;
|
|
68
|
+
/**
|
|
69
|
+
Invoked when creating a new class instance, and sets any default parameters.
|
|
70
|
+
@private
|
|
71
|
+
*/
|
|
72
|
+
constructor();
|
|
73
|
+
/**
|
|
74
|
+
Sets positioning for the axis bar.
|
|
75
|
+
@param bar @private
|
|
76
|
+
*/
|
|
77
|
+
_barPosition(bar: any): void;
|
|
78
|
+
/**
|
|
79
|
+
Returns the scale's domain, taking into account negative and positive log scales.
|
|
80
|
+
@private
|
|
81
|
+
*/
|
|
82
|
+
_getDomain(): unknown[];
|
|
83
|
+
/**
|
|
84
|
+
Returns a value's scale position, taking into account negative and positive log scales.
|
|
85
|
+
@param d @private
|
|
86
|
+
*/
|
|
87
|
+
_getPosition(d: unknown): number;
|
|
88
|
+
/**
|
|
89
|
+
Returns the scale's range, taking into account negative and positive log scales.
|
|
90
|
+
@private
|
|
91
|
+
*/
|
|
92
|
+
_getRange(): unknown[];
|
|
93
|
+
/**
|
|
94
|
+
Returns the scale's labels, taking into account negative and positive log scales.
|
|
95
|
+
@private
|
|
96
|
+
*/
|
|
97
|
+
_getLabels(): unknown[];
|
|
98
|
+
/**
|
|
99
|
+
Returns the scale's ticks, taking into account negative and positive log scales.
|
|
100
|
+
@private
|
|
101
|
+
*/
|
|
102
|
+
_getTicks(): unknown[];
|
|
103
|
+
/**
|
|
104
|
+
Sets positioning for the grid lines.
|
|
105
|
+
@param lines @private
|
|
106
|
+
*/
|
|
107
|
+
_gridPosition(lines: any, last?: boolean): void;
|
|
108
|
+
/**
|
|
109
|
+
Renders the current Axis to the page.
|
|
110
|
+
@param callback Optional callback invoked after rendering completes.
|
|
111
|
+
*/
|
|
112
|
+
render(callback?: (...args: unknown[]) => unknown): this;
|
|
113
|
+
/**
|
|
114
|
+
The horizontal alignment.
|
|
115
|
+
*/
|
|
116
|
+
align(): string;
|
|
117
|
+
align(_: string): this;
|
|
118
|
+
/**
|
|
119
|
+
Axis line style.
|
|
120
|
+
*/
|
|
121
|
+
barConfig(): Record<string, unknown>;
|
|
122
|
+
barConfig(_: Record<string, unknown>): this;
|
|
123
|
+
/**
|
|
124
|
+
An array of data points, which helps determine which ticks should be shown and which time resolution should be displayed.
|
|
125
|
+
*/
|
|
126
|
+
data(): any[];
|
|
127
|
+
data(_: any[]): this;
|
|
128
|
+
/**
|
|
129
|
+
Scale domain of the axis.
|
|
130
|
+
*/
|
|
131
|
+
domain(): any[];
|
|
132
|
+
domain(_: any[]): this;
|
|
133
|
+
/**
|
|
134
|
+
Transition duration of the axis.
|
|
135
|
+
*/
|
|
136
|
+
duration(): number;
|
|
137
|
+
duration(_: number): this;
|
|
138
|
+
/**
|
|
139
|
+
Grid values of the axis.
|
|
140
|
+
*/
|
|
141
|
+
grid(): unknown[] | undefined;
|
|
142
|
+
grid(_: unknown[]): this;
|
|
143
|
+
/**
|
|
144
|
+
Grid config of the axis.
|
|
145
|
+
*/
|
|
146
|
+
gridConfig(): Record<string, unknown>;
|
|
147
|
+
gridConfig(_: Record<string, unknown>): this;
|
|
148
|
+
/**
|
|
149
|
+
Grid behavior of the axis when scale is logarithmic.
|
|
150
|
+
*/
|
|
151
|
+
gridLog(): boolean;
|
|
152
|
+
gridLog(_: boolean): this;
|
|
153
|
+
/**
|
|
154
|
+
Grid size of the axis.
|
|
155
|
+
*/
|
|
156
|
+
gridSize(): number | undefined;
|
|
157
|
+
gridSize(_: number): this;
|
|
158
|
+
/**
|
|
159
|
+
Overall height of the axis.
|
|
160
|
+
*/
|
|
161
|
+
height(): number;
|
|
162
|
+
height(_: number): this;
|
|
163
|
+
/**
|
|
164
|
+
Visible tick labels of the axis.
|
|
165
|
+
*/
|
|
166
|
+
labels(): unknown[] | undefined;
|
|
167
|
+
labels(_: unknown[]): this;
|
|
168
|
+
/**
|
|
169
|
+
Whether to offset overlapping labels further from the axis to prevent collisions.
|
|
170
|
+
*/
|
|
171
|
+
labelOffset(): boolean;
|
|
172
|
+
labelOffset(_: boolean): this;
|
|
173
|
+
/**
|
|
174
|
+
Whether to rotate horizontal axis labels -90 degrees.
|
|
175
|
+
*/
|
|
176
|
+
labelRotation(): boolean | undefined;
|
|
177
|
+
labelRotation(_: boolean): this;
|
|
178
|
+
/**
|
|
179
|
+
Maximum size allowed for the space that contains the axis tick labels and title.
|
|
180
|
+
*/
|
|
181
|
+
maxSize(): number;
|
|
182
|
+
maxSize(_: number): this;
|
|
183
|
+
/**
|
|
184
|
+
Minimum size alloted for the space that contains the axis tick labels and title.
|
|
185
|
+
*/
|
|
186
|
+
minSize(): number;
|
|
187
|
+
minSize(_: number): this;
|
|
188
|
+
/**
|
|
189
|
+
The orientation of the shape.
|
|
190
|
+
*/
|
|
191
|
+
orient(): string;
|
|
192
|
+
orient(_: string): this;
|
|
193
|
+
/**
|
|
194
|
+
Returns the outer bounds of the axis content. Must be called after rendering.
|
|
195
|
+
@example
|
|
196
|
+
{"width": 180, "height": 24, "x": 10, "y": 20}
|
|
197
|
+
*/
|
|
198
|
+
outerBounds(): Record<string, number>;
|
|
199
|
+
/**
|
|
200
|
+
The padding between each tick label.
|
|
201
|
+
*/
|
|
202
|
+
padding(): number;
|
|
203
|
+
padding(_: number): this;
|
|
204
|
+
/**
|
|
205
|
+
The inner padding of band scale.
|
|
206
|
+
*/
|
|
207
|
+
paddingInner(): number;
|
|
208
|
+
paddingInner(_: number): this;
|
|
209
|
+
/**
|
|
210
|
+
The outer padding of band scales.
|
|
211
|
+
*/
|
|
212
|
+
paddingOuter(): number;
|
|
213
|
+
paddingOuter(_: number): this;
|
|
214
|
+
/**
|
|
215
|
+
Scale range (in pixels) of the axis. The given array must have 2 values, but one may be `undefined` to allow the default behavior for that value.
|
|
216
|
+
*/
|
|
217
|
+
range(): (number | undefined)[] | undefined;
|
|
218
|
+
range(_: (number | undefined)[]): this;
|
|
219
|
+
/**
|
|
220
|
+
The rounding method for more evenly spaced ticks at the extents of the scale. Can be "none" (default), "outside", or "inside".
|
|
221
|
+
*/
|
|
222
|
+
rounding(): string;
|
|
223
|
+
rounding(_: string): this;
|
|
224
|
+
/**
|
|
225
|
+
The prefix for the minimum value of "inside" rounding scales.
|
|
226
|
+
*/
|
|
227
|
+
roundingInsideMinPrefix(): string;
|
|
228
|
+
roundingInsideMinPrefix(_: string): this;
|
|
229
|
+
/**
|
|
230
|
+
The suffix for the minimum value of "inside" rounding scales.
|
|
231
|
+
*/
|
|
232
|
+
roundingInsideMinSuffix(): string;
|
|
233
|
+
roundingInsideMinSuffix(_: string): this;
|
|
234
|
+
/**
|
|
235
|
+
The prefix for the maximum value of "inside" rounding scales.
|
|
236
|
+
*/
|
|
237
|
+
roundingInsideMaxPrefix(): string;
|
|
238
|
+
roundingInsideMaxPrefix(_: string): this;
|
|
239
|
+
/**
|
|
240
|
+
The suffix for the maximum value of "inside" rounding scales.
|
|
241
|
+
*/
|
|
242
|
+
roundingInsideMaxSuffix(): string;
|
|
243
|
+
roundingInsideMaxSuffix(_: string): this;
|
|
244
|
+
/**
|
|
245
|
+
Scale of the axis.
|
|
246
|
+
*/
|
|
247
|
+
scale(): string;
|
|
248
|
+
scale(_: string): this;
|
|
249
|
+
/**
|
|
250
|
+
The "padding" property of the scale, often used in point scales.
|
|
251
|
+
*/
|
|
252
|
+
scalePadding(): number;
|
|
253
|
+
scalePadding(_: number): this;
|
|
254
|
+
/**
|
|
255
|
+
The SVG container element as a d3 selector or DOM element.
|
|
256
|
+
*/
|
|
257
|
+
select(): D3Selection;
|
|
258
|
+
select(_: string | HTMLElement): this;
|
|
259
|
+
/**
|
|
260
|
+
Tick shape constructor.
|
|
261
|
+
*/
|
|
262
|
+
shape(): string;
|
|
263
|
+
shape(_: string): this;
|
|
264
|
+
/**
|
|
265
|
+
Tick style of the axis.
|
|
266
|
+
*/
|
|
267
|
+
shapeConfig(): Record<string, any>;
|
|
268
|
+
shapeConfig(_: Record<string, any>): this;
|
|
269
|
+
/**
|
|
270
|
+
Tick formatter.
|
|
271
|
+
*/
|
|
272
|
+
tickFormat(): any;
|
|
273
|
+
tickFormat(_: any): this;
|
|
274
|
+
/**
|
|
275
|
+
Tick values of the axis.
|
|
276
|
+
*/
|
|
277
|
+
ticks(): unknown[] | undefined;
|
|
278
|
+
ticks(_: unknown[]): this;
|
|
279
|
+
/**
|
|
280
|
+
Tick size of the axis.
|
|
281
|
+
*/
|
|
282
|
+
tickSize(): number;
|
|
283
|
+
tickSize(_: number): this;
|
|
284
|
+
/**
|
|
285
|
+
The tick abbreviation behavior for linear scales. Accepts "normal" (uses formatAbbreviate) or "smallest" (uses the suffix from the smallest tick as reference for every tick).
|
|
286
|
+
*/
|
|
287
|
+
tickSuffix(): string;
|
|
288
|
+
tickSuffix(_: string): this;
|
|
289
|
+
/**
|
|
290
|
+
Defines a custom locale object to be used in time scale. This object must include the following properties: dateTime, date, time, periods, days, shortDays, months, shortMonths. For more information, you can revise [d3p.d3-time-format](https://github.com/d3/d3-time-format/blob/master/README.md#timeFormatLocale).
|
|
291
|
+
*/
|
|
292
|
+
timeLocale(): Record<string, unknown> | undefined;
|
|
293
|
+
timeLocale(_: Record<string, unknown>): this;
|
|
294
|
+
/**
|
|
295
|
+
Title of the axis.
|
|
296
|
+
*/
|
|
297
|
+
title(): string | undefined;
|
|
298
|
+
title(_: string): this;
|
|
299
|
+
/**
|
|
300
|
+
Title configuration of the axis.
|
|
301
|
+
*/
|
|
302
|
+
titleConfig(): Record<string, unknown>;
|
|
303
|
+
titleConfig(_: Record<string, unknown>): this;
|
|
304
|
+
/**
|
|
305
|
+
Overall width of the axis.
|
|
306
|
+
*/
|
|
307
|
+
width(): number;
|
|
308
|
+
width(_: number): this;
|
|
309
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as Axis } from "./Axis.js";
|
|
2
|
+
/**
|
|
3
|
+
Shorthand method for creating an axis where the ticks are drawn below the horizontal domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
4
|
+
*/
|
|
5
|
+
export default class AxisBottom extends Axis {
|
|
6
|
+
/**
|
|
7
|
+
Invoked when creating a new class instance, and overrides any default parameters inherited from Axis.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
constructor();
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as Axis } from "./Axis.js";
|
|
2
|
+
/**
|
|
3
|
+
Shorthand method for creating an axis where the ticks are drawn to the left of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
4
|
+
*/
|
|
5
|
+
export default class AxisLeft extends Axis {
|
|
6
|
+
/**
|
|
7
|
+
Invoked when creating a new class instance, and overrides any default parameters inherited from Axis.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
constructor();
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as Axis } from "./Axis.js";
|
|
2
|
+
/**
|
|
3
|
+
Shorthand method for creating an axis where the ticks are drawn to the right of the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
4
|
+
*/
|
|
5
|
+
export default class AxisRight extends Axis {
|
|
6
|
+
/**
|
|
7
|
+
Invoked when creating a new class instance, and overrides any default parameters inherited from Axis.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
constructor();
|
|
11
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as Axis } from "./Axis.js";
|
|
2
|
+
/**
|
|
3
|
+
Shorthand method for creating an axis where the ticks are drawn above the vertical domain path. Extends all functionality of the base [Axis](#Axis) class.
|
|
4
|
+
*/
|
|
5
|
+
export default class AxisTop extends Axis {
|
|
6
|
+
/**
|
|
7
|
+
Invoked when creating a new class instance, and overrides any default parameters inherited from Axis.
|
|
8
|
+
@private
|
|
9
|
+
*/
|
|
10
|
+
constructor();
|
|
11
|
+
}
|
|
@@ -0,0 +1,208 @@
|
|
|
1
|
+
import type { D3Selection } from "@d3plus/dom";
|
|
2
|
+
import type { DataPoint } from "@d3plus/data";
|
|
3
|
+
import { Axis, TextBox } from "../components/index.js";
|
|
4
|
+
import { Rect } from "../shapes/index.js";
|
|
5
|
+
import { BaseClass } from "../utils/index.js";
|
|
6
|
+
import Legend from "./Legend.js";
|
|
7
|
+
/**
|
|
8
|
+
Creates an SVG color scale based on an array of data.
|
|
9
|
+
*/
|
|
10
|
+
export default class ColorScale extends BaseClass {
|
|
11
|
+
_select: D3Selection;
|
|
12
|
+
_axisClass: Axis;
|
|
13
|
+
_axisConfig: Record<string, unknown>;
|
|
14
|
+
_axisTest: Axis;
|
|
15
|
+
_align: string;
|
|
16
|
+
_buckets: number | number[];
|
|
17
|
+
_bucketAxis: boolean;
|
|
18
|
+
_bucketFormat: (tick: number, i: number, ticks: number[], allValues: number[]) => string;
|
|
19
|
+
_bucketJoiner: (a: string, b: string) => string;
|
|
20
|
+
_centered: boolean;
|
|
21
|
+
_color: string | string[];
|
|
22
|
+
_colorMax: string;
|
|
23
|
+
_colorMid: string;
|
|
24
|
+
_colorMin: string;
|
|
25
|
+
_colorScale: any;
|
|
26
|
+
_data: DataPoint[];
|
|
27
|
+
_domain: number[] | undefined;
|
|
28
|
+
_duration: number;
|
|
29
|
+
_group: D3Selection;
|
|
30
|
+
_height: number;
|
|
31
|
+
_labelClass: TextBox;
|
|
32
|
+
_labelConfig: Record<string, unknown>;
|
|
33
|
+
_labelMin: string | undefined;
|
|
34
|
+
_labelMax: string | undefined;
|
|
35
|
+
_legendClass: Legend;
|
|
36
|
+
_legendConfig: Record<string, unknown>;
|
|
37
|
+
_midpoint: number;
|
|
38
|
+
_orient: string;
|
|
39
|
+
_outerBounds: Record<string, number>;
|
|
40
|
+
_padding: number;
|
|
41
|
+
_rectClass: Rect;
|
|
42
|
+
_rectConfig: Record<string, unknown>;
|
|
43
|
+
_scale: string;
|
|
44
|
+
_size: number;
|
|
45
|
+
_value: (d: DataPoint, i?: number) => unknown;
|
|
46
|
+
_width: number;
|
|
47
|
+
/**
|
|
48
|
+
Invoked when creating a new class instance, and sets any default parameters.
|
|
49
|
+
@private
|
|
50
|
+
*/
|
|
51
|
+
constructor();
|
|
52
|
+
/**
|
|
53
|
+
Renders the current ColorScale to the page.
|
|
54
|
+
@param callback Optional callback invoked after rendering completes.
|
|
55
|
+
*/
|
|
56
|
+
render(callback?: (...args: unknown[]) => unknown): this;
|
|
57
|
+
/**
|
|
58
|
+
The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Axis](http://d3plus.org/docs/#Axis). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
59
|
+
*/
|
|
60
|
+
axisConfig(): Record<string, unknown>;
|
|
61
|
+
axisConfig(_: Record<string, unknown>): this;
|
|
62
|
+
/**
|
|
63
|
+
The horizontal alignment.
|
|
64
|
+
*/
|
|
65
|
+
align(): string;
|
|
66
|
+
align(_: string): this;
|
|
67
|
+
/**
|
|
68
|
+
The number of discrete buckets to create in a bucketed color scale. Will be overridden by any custom Array of colors passed to the `color` method. Optionally, users can supply an Array of values used to separate buckets, such as `[0, 10, 25, 50, 90]` for a percentage scale. This value would create 4 buckets, with each value representing the break point between each bucket (so 5 values makes 4 buckets).
|
|
69
|
+
*/
|
|
70
|
+
buckets(): number | number[];
|
|
71
|
+
buckets(_: number | number[]): this;
|
|
72
|
+
/**
|
|
73
|
+
Determines whether or not to use an Axis to display bucket scales (both "buckets" and "jenks"). When set to `false`, bucketed scales will use the `Legend` class to display squares for each range of data. When set to `true`, bucketed scales will be displayed on an `Axis`, similar to "linear" scales.
|
|
74
|
+
*/
|
|
75
|
+
bucketAxis(): boolean;
|
|
76
|
+
bucketAxis(_: boolean): this;
|
|
77
|
+
/**
|
|
78
|
+
A function for formatting the labels associated to each bucket in a bucket-type scale ("jenks", "quantile", etc). The function is passed four arguments: the start value of the current bucket, it's index in the full Array of buckets, the full Array of buckets, and an Array of every value present in the data used to construct the buckets. Keep in mind that the end value for the bucket is not actually the next bucket in the list, but includes every value up until that next bucket value (less than, but not equal to). By default, d3plus will make the end value slightly less than it's current value, so that it does not overlap with the start label for the next bucket.
|
|
79
|
+
*/
|
|
80
|
+
bucketFormat(): (tick: number, i: number, ticks: number[], allValues: number[]) => string;
|
|
81
|
+
bucketFormat(_: (tick: number, i: number, ticks: number[], allValues: number[]) => string): this;
|
|
82
|
+
/**
|
|
83
|
+
A function that receives the minimum and maximum values of a bucket, and is expected to return the full label.
|
|
84
|
+
*/
|
|
85
|
+
bucketJoiner(): (a: string, b: string) => string;
|
|
86
|
+
bucketJoiner(_: (a: string, b: string) => string): this;
|
|
87
|
+
/**
|
|
88
|
+
Determines whether or not to display a midpoint centered Axis. Does not apply to quantile scales.
|
|
89
|
+
*/
|
|
90
|
+
centered(): boolean;
|
|
91
|
+
centered(_: boolean): this;
|
|
92
|
+
/**
|
|
93
|
+
Overrides the default internal logic of `colorMin`, `colorMid`, and `colorMax` to only use just this specified color. If a single color is given as a String, then the scale is interpolated by lightening that color. Otherwise, the function expects an Array of color values to be used in order for the scale.
|
|
94
|
+
*/
|
|
95
|
+
color(): string | string[];
|
|
96
|
+
color(_: string | string[]): this;
|
|
97
|
+
/**
|
|
98
|
+
Defines the color to be used for numbers greater than the value of the `midpoint` on the scale (defaults to `0`). Colors in between this value and the value of `colorMid` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
99
|
+
*/
|
|
100
|
+
colorMax(): string;
|
|
101
|
+
colorMax(_: string): this;
|
|
102
|
+
/**
|
|
103
|
+
Defines the color to be used for the midpoint of a diverging scale, based on the current value of the `midpoint` method (defaults to `0`). Colors in between this value and the values of `colorMin` and `colorMax` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
104
|
+
*/
|
|
105
|
+
colorMid(): string;
|
|
106
|
+
colorMid(_: string): this;
|
|
107
|
+
/**
|
|
108
|
+
Defines the color to be used for numbers less than the value of the `midpoint` on the scale (defaults to `0`). Colors in between this value and the value of `colorMid` will be interpolated, unless a custom Array of colors has been specified using the `color` method.
|
|
109
|
+
*/
|
|
110
|
+
colorMin(): string;
|
|
111
|
+
colorMin(_: string): this;
|
|
112
|
+
/**
|
|
113
|
+
The data array used to create shapes. A shape key will be drawn for each object in the array.
|
|
114
|
+
*/
|
|
115
|
+
data(): DataPoint[];
|
|
116
|
+
data(_: DataPoint[]): this;
|
|
117
|
+
/**
|
|
118
|
+
In a linear scale, this Array of 2 values defines the min and max values used in the color scale. Any values outside of this range will be mapped to the nearest color value.
|
|
119
|
+
*/
|
|
120
|
+
domain(): number[] | undefined;
|
|
121
|
+
domain(_: number[]): this;
|
|
122
|
+
/**
|
|
123
|
+
Transition duration of the ColorScale.
|
|
124
|
+
*/
|
|
125
|
+
duration(): number;
|
|
126
|
+
duration(_: number): this;
|
|
127
|
+
/**
|
|
128
|
+
Overall height of the ColorScale.
|
|
129
|
+
*/
|
|
130
|
+
height(): number;
|
|
131
|
+
height(_: number): this;
|
|
132
|
+
/**
|
|
133
|
+
A pass-through for the [TextBox](http://d3plus.org/docs/#TextBox) class used to style the labelMin and labelMax text.
|
|
134
|
+
*/
|
|
135
|
+
labelConfig(): Record<string, unknown>;
|
|
136
|
+
labelConfig(_: Record<string, unknown>): this;
|
|
137
|
+
/**
|
|
138
|
+
Defines a text label to be displayed off of the end of the minimum point in the scale (currently only available in horizontal orientation).
|
|
139
|
+
*/
|
|
140
|
+
labelMin(): string | undefined;
|
|
141
|
+
labelMin(_: string): this;
|
|
142
|
+
/**
|
|
143
|
+
Defines a text label to be displayed off of the end of the maximum point in the scale (currently only available in horizontal orientation).
|
|
144
|
+
*/
|
|
145
|
+
labelMax(): string | undefined;
|
|
146
|
+
labelMax(_: string): this;
|
|
147
|
+
/**
|
|
148
|
+
The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Axis](http://d3plus.org/docs/#Axis). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
149
|
+
*/
|
|
150
|
+
legendConfig(): Record<string, unknown>;
|
|
151
|
+
legendConfig(_: Record<string, unknown>): this;
|
|
152
|
+
/**
|
|
153
|
+
The number value to be used as the anchor for `colorMid`, and defines the center point of the diverging color scale.
|
|
154
|
+
*/
|
|
155
|
+
midpoint(): number;
|
|
156
|
+
midpoint(_: number): this;
|
|
157
|
+
/**
|
|
158
|
+
The flow orientation of the ColorScale items.
|
|
159
|
+
*/
|
|
160
|
+
orient(): string;
|
|
161
|
+
orient(_: string): this;
|
|
162
|
+
/**
|
|
163
|
+
Returns the outer bounds of the ColorScale content. Must be called after rendering.
|
|
164
|
+
@example
|
|
165
|
+
{"width": 180, "height": 24, "x": 10, "y": 20}
|
|
166
|
+
*/
|
|
167
|
+
outerBounds(): Record<string, number>;
|
|
168
|
+
/**
|
|
169
|
+
The padding between each key.
|
|
170
|
+
*/
|
|
171
|
+
padding(): number;
|
|
172
|
+
padding(_: number): this;
|
|
173
|
+
/**
|
|
174
|
+
The [ColorScale](http://d3plus.org/docs/#ColorScale) is constructed by combining an [Axis](http://d3plus.org/docs/#Axis) for the ticks/labels and a [Rect](http://d3plus.org/docs/#Rect) for the actual color box (or multiple boxes, as in a jenks scale). Because of this, there are separate configs for the [Axis](http://d3plus.org/docs/#Axis) class used to display the text ([axisConfig](http://d3plus.org/docs/#ColorScale.axisConfig)) and the [Rect](http://d3plus.org/docs/#Rect) class used to draw the color breaks ([rectConfig](http://d3plus.org/docs/#ColorScale.rectConfig)). This method acts as a pass-through to the config method of the [Rect](http://d3plus.org/docs/#Rect). An example usage of this method can be seen [here](http://d3plus.org/examples/d3plus-legend/colorScale-dark/).
|
|
175
|
+
*/
|
|
176
|
+
rectConfig(): Record<string, unknown>;
|
|
177
|
+
rectConfig(_: Record<string, unknown>): this;
|
|
178
|
+
/**
|
|
179
|
+
Scale of the ColorScale.
|
|
180
|
+
*/
|
|
181
|
+
scale(): string;
|
|
182
|
+
scale(_: string): this;
|
|
183
|
+
/**
|
|
184
|
+
The SVG container element for this visualization. 3 selector or DOM element.
|
|
185
|
+
*/
|
|
186
|
+
select(): D3Selection;
|
|
187
|
+
select(_: string | HTMLElement): this;
|
|
188
|
+
/**
|
|
189
|
+
The height of horizontal color scales, and width when positioned vertical.
|
|
190
|
+
*/
|
|
191
|
+
size(): number;
|
|
192
|
+
size(_: number): this;
|
|
193
|
+
/**
|
|
194
|
+
The value accessor used to determine each data point's position on the color scale.
|
|
195
|
+
|
|
196
|
+
@example
|
|
197
|
+
function value(d) {
|
|
198
|
+
return d.value;
|
|
199
|
+
}
|
|
200
|
+
*/
|
|
201
|
+
value(): (d: DataPoint, i?: number) => DataPoint[keyof DataPoint];
|
|
202
|
+
value(_: ((d: DataPoint, i?: number) => DataPoint[keyof DataPoint]) | string): this;
|
|
203
|
+
/**
|
|
204
|
+
Overall width of the ColorScale.
|
|
205
|
+
*/
|
|
206
|
+
width(): number;
|
|
207
|
+
width(_: number): this;
|
|
208
|
+
}
|