chartwerk
/
core
4
0
Fork 0
Code Issues 26 Pull Requests Projects Releases Wiki Activity
Browse Source

correct names for models

merge-requests/20/merge
vargburz 3 years ago
parent
9d251abab2
commit
cf9d0e95de
1 changed files with 69 additions and 69 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      src/index.ts

138
src/index.ts
Unescape View File

@ -40,8 +40,8 @@ const MILISECONDS_IN_MINUTE = 60 * 1000;
abstract class ChartwerkPod<T extends Serie, O extends Options> {
protected coreSeries: CoreSeries<T>;
protected coreOptions: CoreOptions<O>;
protected series: CoreSeries<T>;
protected options: CoreOptions<O>;
protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
@ -83,8 +83,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
// TODO: test if it's necessary
styles.use();
this.coreOptions = new CoreOptions(_options);
this.coreSeries = new CoreSeries(_series);
this.options = new CoreOptions(_options);
this.series = new CoreSeries(_series);
this.d3Node = d3.select(this.el);
this.addEventListeners();
@ -103,7 +103,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
public render(): void {
this.coreOptions.callbackRenderStart();
this.options.callbackRenderStart();
this.renderClipPath();
this.addEvents();
@ -119,7 +119,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
this.renderYLabel();
this.renderXLabel();
this.coreOptions.callbackRenderEnd();
this.options.callbackRenderEnd();
}
public updateData(series?: T[], options?: O, shouldRerender = true): void {
@ -143,14 +143,14 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
if(newOptions === undefined) {
return;
}
this.coreOptions.updateOptions(newOptions);
this.options.updateOptions(newOptions);
}
protected updateSeries(newSeries: T[]): void {
if(newSeries === undefined) {
return;
}
this.coreSeries.updateSeries(newSeries);
this.series.updateSeries(newSeries);
}
protected abstract renderMetrics(): void;
@ -165,7 +165,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
height: this.height,
width: this.width,
}
this.state = new PodState(boxPararms, this.coreSeries, this.coreOptions);
this.state = new PodState(boxPararms, this.series, this.options);
}
protected initComponents(): void {
@ -178,7 +178,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
yScale: this.state.yScale,
}
this.grid = new Grid(this.chartContainer, svgElParams, this.coreOptions.grid);
this.grid = new Grid(this.chartContainer, svgElParams, this.options.grid);
}
protected renderMetricsContainer(): void {
@ -221,7 +221,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
protected renderXAxis(): void {
if(this.coreOptions.axis.x.isActive === false) {
if(this.options.axis.x.isActive === false) {
return;
}
this.chartContainer.select('#x-axis-container').remove();
@ -232,14 +232,14 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.style('pointer-events', 'none')
.call(
d3.axisBottom(this.state.xScale)
.ticks(this.coreOptions.axis.x.ticksCount)
.ticks(this.options.axis.x.ticksCount)
.tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.x))
.tickFormat(this.getAxisTicksFormatter(this.options.axis.x))
);
}
protected renderYAxis(): void {
if(this.coreOptions.axis.y.isActive === false) {
if(this.options.axis.y.isActive === false) {
return;
}
this.chartContainer.select('#y-axis-container').remove();
@ -251,9 +251,9 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
// TODO: number of ticks shouldn't be hardcoded
.call(
d3.axisLeft(this.state.yScale)
.ticks(this.coreOptions.axis.y.ticksCount)
.ticks(this.options.axis.y.ticksCount)
.tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.y))
.tickFormat(this.getAxisTicksFormatter(this.options.axis.y))
);
const ticks = this.yAxisElement.selectAll(`.tick`).select('text').nodes();
this.yAxisTicksColors.map((color, index) => {
@ -265,7 +265,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
protected renderY1Axis(): void {
if(this.coreOptions.axis.y1.isActive === false) {
if(this.options.axis.y1.isActive === false) {
return;
}
this.chartContainer.select('#y1-axis-container').remove();
@ -279,7 +279,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
d3.axisRight(this.state.y1Scale)
.ticks(DEFAULT_TICK_COUNT)
.tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.y1))
.tickFormat(this.getAxisTicksFormatter(this.options.axis.y1))
);
}
@ -291,28 +291,28 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.style('display', 'none');
if(
this.coreOptions.crosshair.orientation === CrosshairOrientation.VERTICAL ||
this.coreOptions.crosshair.orientation === CrosshairOrientation.BOTH
this.options.crosshair.orientation === CrosshairOrientation.VERTICAL ||
this.options.crosshair.orientation === CrosshairOrientation.BOTH
) {
this.crosshair.append('line')
.attr('class', 'crosshair-line')
.attr('id', 'crosshair-line-x')
.attr('fill', this.coreOptions.crosshair.color)
.attr('stroke', this.coreOptions.crosshair.color)
.attr('fill', this.options.crosshair.color)
.attr('stroke', this.options.crosshair.color)
.attr('stroke-width', '1px')
.attr('y1', 0)
.attr('y2', this.height)
.style('pointer-events', 'none');
}
if(
this.coreOptions.crosshair.orientation === CrosshairOrientation.HORIZONTAL ||
this.coreOptions.crosshair.orientation === CrosshairOrientation.BOTH
this.options.crosshair.orientation === CrosshairOrientation.HORIZONTAL ||
this.options.crosshair.orientation === CrosshairOrientation.BOTH
) {
this.crosshair.append('line')
.attr('class', 'crosshair-line')
.attr('id', 'crosshair-line-y')
.attr('fill', this.coreOptions.crosshair.color)
.attr('stroke', this.coreOptions.crosshair.color)
.attr('fill', this.options.crosshair.color)
.attr('stroke', this.options.crosshair.color)
.attr('stroke-width', '1px')
.attr('x1', 0)
.attr('x2', this.width)
@ -322,8 +322,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
protected addEvents(): void {
// TODO: refactor for a new mouse/scroll events
const panKeyEvent = this.coreOptions.mousePanEvent.keyEvent;
const isPanActive = this.coreOptions.mousePanEvent.isActive;
const panKeyEvent = this.options.mousePanEvent.keyEvent;
const isPanActive = this.options.mousePanEvent.isActive;
if(isPanActive === true && panKeyEvent === KeyEvent.MAIN) {
this.initPan();
this.initBrush();
@ -340,11 +340,11 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
protected initBrush(): void {
const isBrushActive = this.coreOptions.mouseZoomEvent.isActive;
const isBrushActive = this.options.mouseZoomEvent.isActive;
if(isBrushActive === false) {
return;
}
switch(this.coreOptions.mouseZoomEvent.orientation) {
switch(this.options.mouseZoomEvent.orientation) {
case BrushOrientation.VERTICAL:
this.brush = d3.brushY();
break;
@ -358,7 +358,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
default:
this.brush = d3.brushX();
}
const keyEvent = this.coreOptions.mouseZoomEvent.keyEvent;
const keyEvent = this.options.mouseZoomEvent.keyEvent;
this.brush.extent([
[0, 0],
[this.width, this.height]
@ -396,13 +396,13 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
protected initPan(): void {
if(
this.coreOptions.mousePanEvent.isActive === false &&
this.coreOptions.scrollPanEvent.isActive === false &&
this.coreOptions.scrollZoomEvent.isActive === false
this.options.mousePanEvent.isActive === false &&
this.options.scrollPanEvent.isActive === false &&
this.options.scrollZoomEvent.isActive === false
) {
return;
}
if(this.coreOptions.mouseZoomEvent.isActive === false) {
if(this.options.mouseZoomEvent.isActive === false) {
// init cumstom overlay to handle all events
this.customOverlay = this.chartContainer.append('rect')
.attr('class', 'custom-overlay')
@ -417,7 +417,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
this.initScaleX = this.state.xScale.copy();
this.initScaleY = this.state.yScale.copy();
if(this.coreOptions.axis.y1.isActive) {
if(this.options.axis.y1.isActive) {
this.initScaleY1 = this.state.y1Scale.copy();
}
this.pan = d3.zoom()
@ -438,16 +438,16 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
protected renderLegend(): void {
if(this.coreOptions.allOptions.renderLegend === false) {
if(this.options.allOptions.renderLegend === false) {
return;
}
if(!this.coreSeries.isSeriesAvailable) {
if(!this.series.isSeriesAvailable) {
return;
}
let legendRow = this.chartContainer
.append('g')
.attr('class', 'legend-row');
const series = this.coreSeries.allSeries;
const series = this.series.allSeries;
for(let idx = 0; idx < series.length; idx++) {
let node = legendRow.selectAll('text').node();
let rowWidth = 0;
@ -462,7 +462,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.attr('width', 13)
.attr('height', 15)
.html(`<form><input type=checkbox ${isChecked? 'checked' : ''} /></form>`)
.on('click', () => this.coreOptions.callbackLegendClick(idx));
.on('click', () => this.options.callbackLegendClick(idx));
legendRow.append('text')
.attr('x', rowWidth + 20)
@ -471,12 +471,12 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.style('font-size', '12px')
.style('fill', series[idx].color)
.text(series[idx].target)
.on('click', () => this.coreOptions.callbackLegendLabelClick(idx));
.on('click', () => this.options.callbackLegendLabelClick(idx));
}
}
protected renderYLabel(): void {
if(this.coreOptions.axis.y.label === undefined) {
if(this.options.axis.y.label === undefined) {
return;
}
this.chartContainer.append('text')
@ -488,15 +488,15 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.style('text-anchor', 'middle')
.style('font-size', '14px')
.style('fill', 'currentColor')
.text(this.coreOptions.axis.y.label);
.text(this.options.axis.y.label);
}
protected renderXLabel(): void {
if(this.coreOptions.axis.x.label === undefined) {
if(this.options.axis.x.label === undefined) {
return;
}
let yPosition = this.height + this.margin.top + this.margin.bottom - 35;
if(this.coreSeries.isSeriesAvailable) {
if(this.series.isSeriesAvailable) {
yPosition += 20;
}
this.chartContainer.append('text')
@ -506,7 +506,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
.style('text-anchor', 'middle')
.style('font-size', '14px')
.style('fill', 'currentColor')
.text(this.coreOptions.axis.x.label);
.text(this.options.axis.x.label);
}
protected renderNoDataPointsMessage(): void {
@ -522,12 +522,12 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
private disableScrollForward(event: any): boolean {
return event.sourceEvent.wheelDelta > 0
&& this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.FORWARD;
&& this.options.scrollPanEvent.direction === ScrollPanDirection.FORWARD;
}
private disableScrollBackward(event: any): boolean {
return event.sourceEvent.wheelDelta < 0
&& this.coreOptions.scrollPanEvent.direction === ScrollPanDirection.BACKWARD;
&& this.options.scrollPanEvent.direction === ScrollPanDirection.BACKWARD;
}
protected onPanning(): void {
@ -541,7 +541,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
this.rescaleMetricAndAxis(event);
this.coreOptions.callbackPanning({
this.options.callbackPanning({
ranges: [this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange],
d3Event: event
});
@ -563,8 +563,8 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
protected onPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
// rescale metrics and axis on mouse and scroll panning
const eventType = event.sourceEvent.type; // 'wheel' or 'mousemove'
const scrollPanOptions = this.coreOptions.scrollPanEvent;
const scrollZoomOptions = this.coreOptions.scrollZoomEvent;
const scrollPanOptions = this.options.scrollPanEvent;
const scrollZoomOptions = this.options.scrollZoomEvent;
// TODO: maybe use switch and move it to onPanning
if(eventType === 'wheel') {
if(scrollPanOptions.isActive === true && this.isD3EventKeyEqualOption(event, scrollPanOptions.keyEvent)) {
@ -597,7 +597,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
return;
}
const panOrientation = this.coreOptions.mousePanEvent.orientation;
const panOrientation = this.options.mousePanEvent.orientation;
if(panOrientation === PanOrientation.HORIZONTAL || panOrientation === PanOrientation.BOTH) {
this.rescaleAxisX(event.transform.x);
}
@ -630,7 +630,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
protected onScrollPanningRescale(event: d3.D3ZoomEvent<any, any>): void {
const scrollPanOptions = this.coreOptions.scrollPanEvent;
const scrollPanOptions = this.options.scrollPanEvent;
// TODO: event.transform.y / x depends on mouse position, so we use hardcoded const, which should be removed
const transformStep = scrollPanOptions.panStep;
const scrollPanOrientation = scrollPanOptions.orientation;
@ -647,7 +647,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
case ScrollPanOrientation.VERTICAL:
// @ts-ignore
let signY = Math.sign(event.transform.y);
if(this.coreOptions.axis.y.invert === true) {
if(this.options.axis.y.invert === true) {
signY = -signY;
}
let rangeY = this.state.yValueRange;
@ -671,12 +671,12 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
this.isPanning = false;
this.deltaYTransform = 0;
this.onMouseOut();
this.coreOptions.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
this.options.callbackPanningEnd([this.state.xValueRange, this.state.yValueRange, this.state.y1ValueRange]);
}
protected onBrush(): void {
const selection = d3.event.selection;
if(this.coreOptions.mouseZoomEvent.orientation !== BrushOrientation.SQUARE || selection === null) {
if(this.options.mouseZoomEvent.orientation !== BrushOrientation.SQUARE || selection === null) {
return;
}
const selectionAtts = this.getSelectionAttrs(selection);
@ -732,7 +732,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
let xRange: [number, number];
let yRange: [number, number];
switch(this.coreOptions.mouseZoomEvent.orientation) {
switch(this.options.mouseZoomEvent.orientation) {
case BrushOrientation.HORIZONTAL:
const startTimestamp = this.state.xScale.invert(extent[0]);
const endTimestamp = this.state.xScale.invert(extent[1]);
@ -772,7 +772,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
this.brushStartSelection = null;
}
this.coreOptions.callbackZoomIn([xRange, yRange]);
this.options.callbackZoomIn([xRange, yRange]);
}
protected zoomOut(): void {
@ -782,14 +782,14 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
x: xAxisMiddleValue,
y: yAxisMiddleValue
}
this.coreOptions.callbackZoomOut(centers);
this.options.callbackZoomOut(centers);
}
getd3TimeRangeEvery(count: number): d3.TimeInterval {
if(this.coreOptions.allOptions.timeInterval.timeFormat === undefined) {
if(this.options.allOptions.timeInterval.timeFormat === undefined) {
return d3.timeMinute.every(count);
}
switch(this.coreOptions.allOptions.timeInterval.timeFormat) {
switch(this.options.allOptions.timeInterval.timeFormat) {
case TimeFormat.SECOND:
return d3.utcSecond.every(count);
case TimeFormat.MINUTE:
@ -808,11 +808,11 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
get serieTimestampRange(): number | undefined {
if(!this.coreSeries.isSeriesAvailable) {
if(!this.series.isSeriesAvailable) {
return undefined;
}
const startTimestamp = first(this.coreSeries.visibleSeries[0].datapoints)[0];
const endTimestamp = last(this.coreSeries.visibleSeries[0].datapoints)[0];
const startTimestamp = first(this.series.visibleSeries[0].datapoints)[0];
const endTimestamp = last(this.series.visibleSeries[0].datapoints)[0];
return (endTimestamp - startTimestamp) / 1000;
}
@ -847,13 +847,13 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
get timeInterval(): number {
if(this.coreSeries.isSeriesAvailable && this.coreSeries.visibleSeries[0].datapoints.length > 1) {
const interval = this.coreSeries.visibleSeries[0].datapoints[1][0] - this.coreSeries.visibleSeries[0].datapoints[0][0];
if(this.series.isSeriesAvailable && this.series.visibleSeries[0].datapoints.length > 1) {
const interval = this.series.visibleSeries[0].datapoints[1][0] - this.series.visibleSeries[0].datapoints[0][0];
return interval;
}
if(this.coreOptions.allOptions.timeInterval.count !== undefined) {
if(this.options.allOptions.timeInterval.count !== undefined) {
//TODO: timeFormat to timestamp
return this.coreOptions.allOptions.timeInterval.count * MILISECONDS_IN_MINUTE;
return this.options.allOptions.timeInterval.count * MILISECONDS_IN_MINUTE;
}
return MILISECONDS_IN_MINUTE;
}
@ -871,7 +871,7 @@ abstract class ChartwerkPod<T extends Serie, O extends Options> {
}
get margin(): Margin {
return this.coreOptions.margin;
return this.options.margin;
}
protected clearState(): void {

Write Preview
Loading…
Cancel
Save