-
Notifications
You must be signed in to change notification settings - Fork 2
/
plot.ts
73 lines (65 loc) · 2.47 KB
/
plot.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import {Dimensions, Margin} from "./margins";
import * as d3 from "d3";
import {GSelection, SvgSelection} from "./d3types";
export type Range = [min: number, max: number]
export type TimeSeries = Array<[number, number]>
/**
* Creates the main SVG for holding the plot.
* @param chartId A unique value identifying the chart.
* @param container The SVG element interface
* @param plotDimensions The dimensions of the plot
* @param color The SVG `color` attribute used for the axis
*/
export function createPlotContainer(
chartId: number,
container: SVGSVGElement,
plotDimensions: Dimensions,
color: string
): GSelection {
const {width, height} = plotDimensions
return d3.select<SVGSVGElement, any>(container)
.attr('width', width)
.attr('height', height)
.attr('color', color)
.append<SVGGElement>('g')
.attr('id', `main-container-${chartId}`)
}
/**
* Adds a clip area for the chart to the specified SVG element. The clip-area is given
* an `id` of `clip-series-<chart_id>`, which because the chart ID should be unique, makes
* this unique as well
* @param chartId The ID of the chart to which the clip area is to be added
* @param svg The SVG element to which the clip area is to be added
* @param plotDimensions The dimensions of the plot
* @param margin The margins around the plot
* @return The ID of the clip-path
*/
export function setClipPath(chartId: number, svg: SvgSelection, plotDimensions: Dimensions, margin: Margin): string {
const clipPathId = `chart-clip-path-${chartId}`
// remove the old clipping region and add a new one with the updated plot dimensions
svg.select('defs').remove();
svg
.append('defs')
.append("clipPath")
.attr("id", clipPathId)
.append("rect")
.attr("width", plotDimensions.width)
.attr("height", Math.max(margin.bottom, plotDimensions.height - margin.bottom))
return clipPathId
}
/**
* Represents the assignment of an x-axis and y-axis to a series. This is used
* by the plots (see, for example, {@link ScatterPlot} and {@link RasterPlot})
* to manage the assignment of axes to series
*/
export interface AxesAssignment {
xAxis: string
yAxis: string
}
/**
* Factory function for the assignment of axes to series
* @param xAxis The ID of the x-axis
* @param yAxis The ID of the y-axis
* @return An {@link AxesAssignment}
*/
export const assignAxes = (xAxis: string, yAxis: string): AxesAssignment => ({xAxis, yAxis})