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

add series and optioons models and use it

merge-requests/18/head
vargburz 3 years ago
parent
073993d663
commit
d1e4496181
5 changed files with 233 additions and 238 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 244
      src/index.ts
  2. 166
      src/models/options.ts
  3. 4
      src/models/series.ts
  4. 2
      src/state.ts
  5. 55
      src/types.ts

244
src/index.ts
Unescape View File

@ -1,7 +1,9 @@
import VueChartwerkPodMixin from './VueChartwerkPodMixin'; import VueChartwerkPodMixin from './VueChartwerkPodMixin';
import { PodState } from './state'; import { PodState } from './state';
import { Grid } from './components/grid'; import { Grid } from './components/grid';
import { CoreSeries } from 'models/series'; import { CoreSeries } from 'models/series';
import { CoreOptions } from 'models/options';
import styles from './css/style.css'; import styles from './css/style.css';
@ -9,7 +11,6 @@ import {
Margin, Margin,
CoreSerie, CoreSerie,
Options, Options,
TickOrientation,
TimeFormat, TimeFormat,
BrushOrientation, BrushOrientation,
AxisFormat, AxisFormat,
@ -21,6 +22,7 @@ import {
ScrollPanOrientation, ScrollPanOrientation,
ScrollPanDirection, ScrollPanDirection,
AxisOption, AxisOption,
AxesOptions,
} from './types'; } from './types';
import { uid } from './utils'; import { uid } from './utils';
import { palette } from './colors'; import { palette } from './colors';
@ -43,77 +45,11 @@ const DEFAULT_MARGIN: Margin = { top: 30, right: 20, bottom: 20, left: 30 };
const DEFAULT_TICK_COUNT = 4; const DEFAULT_TICK_COUNT = 4;
const DEFAULT_TICK_SIZE = 2; const DEFAULT_TICK_SIZE = 2;
const MILISECONDS_IN_MINUTE = 60 * 1000; const MILISECONDS_IN_MINUTE = 60 * 1000;
const DEFAULT_SCROLL_PAN_STEP = 50;
const DEFAULT_OPTIONS: Options = {
confidence: 0,
timeInterval: {
timeFormat: TimeFormat.MINUTE
},
tickFormat: {
xAxis: '%H:%M',
xTickOrientation: TickOrientation.HORIZONTAL
},
zoomEvents: {
mouse: {
zoom: {
isActive: true,
keyEvent: KeyEvent.MAIN,
orientation: BrushOrientation.HORIZONTAL
},
pan: {
isActive: true,
keyEvent: KeyEvent.SHIFT,
orientation: PanOrientation.HORIZONTAL
},
doubleClick: {
isActive: true,
keyEvent: KeyEvent.MAIN,
},
},
scroll: {
zoom: {
isActive: true,
keyEvent: KeyEvent.MAIN,
orientation: PanOrientation.BOTH,
},
pan: {
isActive: false,
keyEvent: KeyEvent.SHIFT,
panStep: DEFAULT_SCROLL_PAN_STEP,
orientation: ScrollPanOrientation.HORIZONTAL,
direction: ScrollPanDirection.BOTH,
},
},
},
axis: {
x: {
isActive: true,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.TIME
},
y: {
isActive: true,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.NUMERIC
},
y1: {
isActive: false,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.NUMERIC
}
},
crosshair: {
orientation: CrosshairOrientation.VERTICAL,
color: 'red'
},
renderTicksfromTimestamps: false,
renderLegend: true,
}
abstract class ChartwerkPod<T extends CoreSerie, O extends Options> { abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
protected coreSeries: CoreSeries<T>; protected coreSeries: CoreSeries<T>;
protected options: O; protected coreOptions: CoreOptions<O>;
protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>; protected d3Node?: d3.Selection<HTMLElement, unknown, null, undefined>;
protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>; protected customOverlay?: d3.Selection<SVGRectElement, unknown, null, undefined>;
@ -155,10 +91,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
// TODO: test if it's necessary // TODO: test if it's necessary
styles.use(); styles.use();
let options = cloneDeep(_options); this.coreOptions = new CoreOptions(_options);
defaultsDeep(options, DEFAULT_OPTIONS);
this.options = options;
this.coreSeries = new CoreSeries(_series); this.coreSeries = new CoreSeries(_series);
this.d3Node = d3.select(this.el); this.d3Node = d3.select(this.el);
@ -178,9 +111,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
public render(): void { public render(): void {
if(has(this.options.eventsCallbacks, 'renderStart')) { this.coreOptions.callbackRenderStart();
this.options.eventsCallbacks.renderStart();
}
this.renderClipPath(); this.renderClipPath();
this.addEvents(); this.addEvents();
@ -196,9 +127,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
this.renderYLabel(); this.renderYLabel();
this.renderXLabel(); this.renderXLabel();
if(has(this.options.eventsCallbacks, 'renderEnd')) { this.coreOptions.callbackRenderEnd();
this.options.eventsCallbacks.renderEnd();
}
} }
public updateData(series?: T[], options?: O, shouldRerender = true): void { public updateData(series?: T[], options?: O, shouldRerender = true): void {
@ -222,10 +151,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
if(newOptions === undefined) { if(newOptions === undefined) {
return; return;
} }
let options = cloneDeep(newOptions); this.coreOptions.updateOptions(newOptions);
defaultsDeep(options, DEFAULT_OPTIONS);
this.options = options;
// TODO: update state if axis ranges were changed
} }
protected updateSeries(newSeries: T[]): void { protected updateSeries(newSeries: T[]): void {
@ -247,7 +173,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
height: this.height, height: this.height,
width: this.width, width: this.width,
} }
this.state = new PodState(boxPararms, this.coreSeries.visibleSeries, this.options); this.state = new PodState(boxPararms, this.coreSeries.visibleSeries, this.coreOptions.allOptions);
} }
protected initComponents(): void { protected initComponents(): void {
@ -260,7 +186,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
yScale: this.state.yScale, yScale: this.state.yScale,
} }
this.grid = new Grid(this.chartContainer, svgElParams, this.options.grid); this.grid = new Grid(this.chartContainer, svgElParams, this.coreOptions.grid);
} }
protected renderMetricsContainer(): void { protected renderMetricsContainer(): void {
@ -303,7 +229,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected renderXAxis(): void { protected renderXAxis(): void {
if(this.options.axis.x.isActive === false) { if(this.coreOptions.axis.x.isActive === false) {
return; return;
} }
this.chartContainer.select('#x-axis-container').remove(); this.chartContainer.select('#x-axis-container').remove();
@ -314,16 +240,14 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.style('pointer-events', 'none') .style('pointer-events', 'none')
.call( .call(
d3.axisBottom(this.xScale) d3.axisBottom(this.xScale)
.ticks(this.options.axis.x.ticksCount) .ticks(this.coreOptions.axis.x.ticksCount)
.tickSize(DEFAULT_TICK_SIZE) .tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.options.axis.x)) .tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.x))
); );
this.chartContainer.select('#x-axis-container').selectAll('.tick').selectAll('text')
.style('transform', this.xTickTransform);
} }
protected renderYAxis(): void { protected renderYAxis(): void {
if(this.options.axis.y.isActive === false) { if(this.coreOptions.axis.y.isActive === false) {
return; return;
} }
this.chartContainer.select('#y-axis-container').remove(); this.chartContainer.select('#y-axis-container').remove();
@ -335,9 +259,9 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
// TODO: number of ticks shouldn't be hardcoded // TODO: number of ticks shouldn't be hardcoded
.call( .call(
d3.axisLeft(this.yScale) d3.axisLeft(this.yScale)
.ticks(this.options.axis.y.ticksCount) .ticks(this.coreOptions.axis.y.ticksCount)
.tickSize(DEFAULT_TICK_SIZE) .tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.options.axis.y)) .tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.y))
); );
const ticks = this.yAxisElement.selectAll(`.tick`).select('text').nodes(); const ticks = this.yAxisElement.selectAll(`.tick`).select('text').nodes();
this.yAxisTicksColors.map((color, index) => { this.yAxisTicksColors.map((color, index) => {
@ -349,7 +273,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected renderY1Axis(): void { protected renderY1Axis(): void {
if(this.options.axis.y1.isActive === false) { if(this.coreOptions.axis.y1.isActive === false) {
return; return;
} }
this.chartContainer.select('#y1-axis-container').remove(); this.chartContainer.select('#y1-axis-container').remove();
@ -363,7 +287,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
d3.axisRight(this.y1Scale) d3.axisRight(this.y1Scale)
.ticks(DEFAULT_TICK_COUNT) .ticks(DEFAULT_TICK_COUNT)
.tickSize(DEFAULT_TICK_SIZE) .tickSize(DEFAULT_TICK_SIZE)
.tickFormat(this.getAxisTicksFormatter(this.options.axis.y1)) .tickFormat(this.getAxisTicksFormatter(this.coreOptions.axis.y1))
); );
} }
@ -375,28 +299,28 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.style('display', 'none'); .style('display', 'none');
if( if(
this.options.crosshair.orientation === CrosshairOrientation.VERTICAL || this.coreOptions.crosshair.orientation === CrosshairOrientation.VERTICAL ||
this.options.crosshair.orientation === CrosshairOrientation.BOTH this.coreOptions.crosshair.orientation === CrosshairOrientation.BOTH
) { ) {
this.crosshair.append('line') this.crosshair.append('line')
.attr('class', 'crosshair-line') .attr('class', 'crosshair-line')
.attr('id', 'crosshair-line-x') .attr('id', 'crosshair-line-x')
.attr('fill', this.options.crosshair.color) .attr('fill', this.coreOptions.crosshair.color)
.attr('stroke', this.options.crosshair.color) .attr('stroke', this.coreOptions.crosshair.color)
.attr('stroke-width', '1px') .attr('stroke-width', '1px')
.attr('y1', 0) .attr('y1', 0)
.attr('y2', this.height) .attr('y2', this.height)
.style('pointer-events', 'none'); .style('pointer-events', 'none');
} }
if( if(
this.options.crosshair.orientation === CrosshairOrientation.HORIZONTAL || this.coreOptions.crosshair.orientation === CrosshairOrientation.HORIZONTAL ||
this.options.crosshair.orientation === CrosshairOrientation.BOTH this.coreOptions.crosshair.orientation === CrosshairOrientation.BOTH
) { ) {
this.crosshair.append('line') this.crosshair.append('line')
.attr('class', 'crosshair-line') .attr('class', 'crosshair-line')
.attr('id', 'crosshair-line-y') .attr('id', 'crosshair-line-y')
.attr('fill', this.options.crosshair.color) .attr('fill', this.coreOptions.crosshair.color)
.attr('stroke', this.options.crosshair.color) .attr('stroke', this.coreOptions.crosshair.color)
.attr('stroke-width', '1px') .attr('stroke-width', '1px')
.attr('x1', 0) .attr('x1', 0)
.attr('x2', this.width) .attr('x2', this.width)
@ -501,7 +425,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
this.initScaleX = this.xScale.copy(); this.initScaleX = this.xScale.copy();
this.initScaleY = this.yScale.copy(); this.initScaleY = this.yScale.copy();
if(this.options.axis.y1.isActive === true) { if(this.coreOptions.axis.y1.isActive) {
this.initScaleY1 = this.y1Scale.copy(); this.initScaleY1 = this.y1Scale.copy();
} }
this.pan = d3.zoom() this.pan = d3.zoom()
@ -533,9 +457,6 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.attr('class', 'legend-row'); .attr('class', 'legend-row');
const series = this.coreSeries.allSeries; const series = this.coreSeries.allSeries;
for(let idx = 0; idx < series.length; idx++) { for(let idx = 0; idx < series.length; idx++) {
if(includes(this.seriesTargetsWithBounds, series[idx].target)) {
continue;
}
let node = legendRow.selectAll('text').node(); let node = legendRow.selectAll('text').node();
let rowWidth = 0; let rowWidth = 0;
if(node !== null) { if(node !== null) {
@ -549,11 +470,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.attr('width', 13) .attr('width', 13)
.attr('height', 15) .attr('height', 15)
.html(`<form><input type=checkbox ${isChecked? 'checked' : ''} /></form>`) .html(`<form><input type=checkbox ${isChecked? 'checked' : ''} /></form>`)
.on('click', () => { .on('click', () => this.coreOptions.callbackLegendClick(idx));
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.onLegendClick !== undefined) {
this.options.eventsCallbacks.onLegendClick(idx);
}
});
legendRow.append('text') legendRow.append('text')
.attr('x', rowWidth + 20) .attr('x', rowWidth + 20)
@ -562,16 +479,12 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.style('font-size', '12px') .style('font-size', '12px')
.style('fill', series[idx].color) .style('fill', series[idx].color)
.text(series[idx].target) .text(series[idx].target)
.on('click', () => { .on('click', () => this.coreOptions.callbackLegendLabelClick(idx));
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.onLegendLabelClick !== undefined) {
this.options.eventsCallbacks.onLegendLabelClick(idx);
}
});
} }
} }
protected renderYLabel(): void { protected renderYLabel(): void {
if(this.options.labelFormat === undefined || this.options.labelFormat.yAxis === undefined) { if(this.coreOptions.axis.y.label === undefined) {
return; return;
} }
this.chartContainer.append('text') this.chartContainer.append('text')
@ -583,11 +496,11 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.style('font-size', '14px') .style('font-size', '14px')
.style('fill', 'currentColor') .style('fill', 'currentColor')
.text(this.options.labelFormat.yAxis); .text(this.coreOptions.axis.y.label);
} }
protected renderXLabel(): void { protected renderXLabel(): void {
if(this.options.labelFormat === undefined || this.options.labelFormat.xAxis === undefined) { if(this.coreOptions.axis.x.label === undefined) {
return; return;
} }
let yPosition = this.height + this.margin.top + this.margin.bottom - 35; let yPosition = this.height + this.margin.top + this.margin.bottom - 35;
@ -601,7 +514,7 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
.style('text-anchor', 'middle') .style('text-anchor', 'middle')
.style('font-size', '14px') .style('font-size', '14px')
.style('fill', 'currentColor') .style('fill', 'currentColor')
.text(this.options.labelFormat.xAxis); .text(this.coreOptions.axis.x.label);
} }
protected renderNoDataPointsMessage(): void { protected renderNoDataPointsMessage(): void {
@ -883,9 +796,6 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
protected zoomOut(): void { protected zoomOut(): void {
if(this.isOutOfChart() === true) {
return;
}
let xAxisMiddleValue: number = this.xScale.invert(this.width / 2); let xAxisMiddleValue: number = this.xScale.invert(this.width / 2);
let yAxisMiddleValue: number = this.yScale.invert(this.height / 2); let yAxisMiddleValue: number = this.yScale.invert(this.height / 2);
const centers = { const centers = {
@ -999,52 +909,6 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
return MILISECONDS_IN_MINUTE; return MILISECONDS_IN_MINUTE;
} }
get xTickTransform(): string {
if(this.options.tickFormat === undefined || this.options.tickFormat.xTickOrientation === undefined) {
return '';
}
switch (this.options.tickFormat.xTickOrientation) {
case TickOrientation.VERTICAL:
return 'translate(-10px, 50px) rotate(-90deg)';
case TickOrientation.HORIZONTAL:
return '';
case TickOrientation.DIAGONAL:
return 'translate(-30px, 30px) rotate(-45deg)';
default:
return '';
}
}
get extraMargin(): Margin {
let optionalMargin = { top: 0, right: 0, bottom: 0, left: 0 };
if(this.options.tickFormat !== undefined && this.options.tickFormat.xTickOrientation !== undefined) {
switch (this.options.tickFormat.xTickOrientation) {
case TickOrientation.VERTICAL:
optionalMargin.bottom += 80;
break;
case TickOrientation.HORIZONTAL:
break;
case TickOrientation.DIAGONAL:
optionalMargin.left += 15;
optionalMargin.bottom += 50;
optionalMargin.right += 10;
break;
}
}
if(this.options.labelFormat !== undefined) {
if(this.options.labelFormat.xAxis !== undefined && this.options.labelFormat.xAxis.length > 0) {
optionalMargin.bottom += 20;
}
if(this.options.labelFormat.yAxis !== undefined && this.options.labelFormat.yAxis.length > 0) {
optionalMargin.left += 20;
}
}
if(this.coreSeries.isSeriesAvailable) {
optionalMargin.bottom += 25;
}
return optionalMargin;
}
get width(): number { get width(): number {
return this.d3Node.node().clientWidth - this.margin.left - this.margin.right; return this.d3Node.node().clientWidth - this.margin.left - this.margin.right;
} }
@ -1058,61 +922,25 @@ abstract class ChartwerkPod<T extends CoreSerie, O extends Options> {
} }
get margin(): Margin { get margin(): Margin {
if(this.options.margin !== undefined) { return this.coreOptions.margin;
return this.options.margin;
}
return mergeWith({}, DEFAULT_MARGIN, this.extraMargin, add);
}
formattedBound(alias: string, target: string): string {
const confidenceMetric = replace(alias, '$__metric_name', target);
return confidenceMetric;
} }
protected clearState(): void { protected clearState(): void {
this.state.clearState(); this.state.clearState();
} }
protected get seriesTargetsWithBounds(): any[] {
if(
this.options.bounds === undefined ||
this.options.bounds.upper === undefined ||
this.options.bounds.lower === undefined
) {
return [];
}
let series = [];
this.coreSeries.allSeries.forEach(serie => {
series.push(this.formattedBound(this.options.bounds.upper, serie.target));
series.push(this.formattedBound(this.options.bounds.lower, serie.target));
});
return series;
}
protected get rectClipId(): string { protected get rectClipId(): string {
if(this._clipPathUID.length === 0) { if(this._clipPathUID.length === 0) {
this._clipPathUID = uid(); this._clipPathUID = uid();
} }
return this._clipPathUID; return this._clipPathUID;
} }
isOutOfChart(): boolean {
const event = d3.mouse(this.chartContainer.node());
const eventX = event[0];
const eventY = event[1];
if(
eventY > this.height + 1 || eventY < -1 ||
eventX > this.width || eventX < 0
) {
return true;
}
return false;
}
} }
export { export {
ChartwerkPod, VueChartwerkPodMixin, ChartwerkPod, VueChartwerkPodMixin,
Margin, CoreSerie, Options, TickOrientation, TimeFormat, BrushOrientation, PanOrientation, Margin, CoreSerie, Options, TimeFormat, BrushOrientation, PanOrientation,
AxesOptions, AxisOption,
AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent, AxisFormat, yAxisOrientation, CrosshairOrientation, ScrollPanOrientation, ScrollPanDirection, KeyEvent,
palette palette
}; };

166
src/models/options.ts
Unescape View File

@ -0,0 +1,166 @@
import {
Options,
TickOrientation,
TimeFormat,
BrushOrientation,
AxisFormat,
CrosshairOrientation,
KeyEvent,
PanOrientation,
ScrollPanOrientation,
ScrollPanDirection,
GridOptions,
AxesOptions,
CrosshairOptions,
Margin
} from '../types';
import lodashDefaultsDeep from 'lodash/defaultsDeep';
import lodashMap from 'lodash/map';
import lodashCloneDeep from 'lodash/cloneDeep';
import has from 'lodash/has';
const DEFAULT_TICK_COUNT = 4;
const DEFAULT_SCROLL_PAN_STEP = 50;
const DEFAULT_GRID_TICK_COUNT = 5;
const DEFAULT_GRID_OPTIONS: GridOptions = {
x: {
enabled: true,
ticksCount: DEFAULT_GRID_TICK_COUNT,
},
y: {
enabled: true,
ticksCount: DEFAULT_GRID_TICK_COUNT,
},
}
const DEFAULT_AXES_OPTIONS: AxesOptions = {
x: {
isActive: true,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.TIME
},
y: {
isActive: true,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.NUMERIC
},
y1: {
isActive: false,
ticksCount: DEFAULT_TICK_COUNT,
format: AxisFormat.NUMERIC
}
}
const DEFAULT_CROSSHAIR_OPTIONS = {
orientation: CrosshairOrientation.VERTICAL,
color: 'gray',
}
const DEFAULT_OPTIONS: Options = {
zoomEvents: {
mouse: {
zoom: {
isActive: true,
keyEvent: KeyEvent.MAIN,
orientation: BrushOrientation.HORIZONTAL
},
pan: {
isActive: true,
keyEvent: KeyEvent.SHIFT,
orientation: PanOrientation.HORIZONTAL
},
doubleClick: {
isActive: true,
keyEvent: KeyEvent.MAIN,
},
},
scroll: {
zoom: {
isActive: true,
keyEvent: KeyEvent.MAIN,
orientation: PanOrientation.BOTH,
},
pan: {
isActive: false,
keyEvent: KeyEvent.SHIFT,
panStep: DEFAULT_SCROLL_PAN_STEP,
orientation: ScrollPanOrientation.HORIZONTAL,
direction: ScrollPanDirection.BOTH,
},
},
},
axis: DEFAULT_AXES_OPTIONS,
grid: DEFAULT_GRID_OPTIONS,
crosshair: DEFAULT_CROSSHAIR_OPTIONS,
renderLegend: true,
// remove options below
renderTicksfromTimestamps: false,
timeInterval: {
timeFormat: TimeFormat.MINUTE
},
}
export class CoreOptions<O extends Options> {
_options: O;
_defaults: Options = DEFAULT_OPTIONS;
constructor(options: O) {
this.setOptions(options);
}
public updateOptions(options: O): void {
this.setOptions(options);
}
protected setOptions(options: O): void {
this._options = lodashDefaultsDeep(lodashCloneDeep(options), this._defaults);
}
get allOptions(): O {
return this._options;
}
get grid(): GridOptions {
return this._options.grid;
}
get axis(): AxesOptions {
return this._options.axis;
}
get crosshair(): CrosshairOptions {
return this._options.crosshair;
}
get margin(): Margin {
return this._options.margin;
}
// event callbacks
callbackRenderStart(): void {
if(has(this._options.eventsCallbacks, 'renderStart')) {
this._options.eventsCallbacks.renderStart();
}
}
callbackRenderEnd(): void {
if(has(this._options.eventsCallbacks, 'renderEnd')) {
this._options.eventsCallbacks.renderStart();
}
}
callbackLegendClick(idx: number): void {
if(has(this._options.eventsCallbacks, 'onLegendClick')) {
this._options.eventsCallbacks.onLegendClick(idx);
}
}
callbackLegendLabelClick(idx: number): void {
if(has(this._options.eventsCallbacks, 'onLegendLabelClick')) {
this._options.eventsCallbacks.onLegendLabelClick(idx);
}
}
}

4
src/models/series.ts
Unescape View File

@ -9,6 +9,7 @@ import lodashUniq from 'lodash/uniq';
const SERIE_DEFAULTS = { const SERIE_DEFAULTS = {
alias: '', alias: '',
target: '',
visible: true, visible: true,
yOrientation: yAxisOrientation.LEFT, yOrientation: yAxisOrientation.LEFT,
datapoints: [], datapoints: [],
@ -19,6 +20,7 @@ const SERIE_DEFAULTS = {
export class CoreSeries<T extends CoreSerie> { export class CoreSeries<T extends CoreSerie> {
_series: Array<T> = []; _series: Array<T> = [];
_defaults: CoreSerie = SERIE_DEFAULTS;
constructor(series: T[]) { constructor(series: T[]) {
this.setSeries(series); this.setSeries(series);
@ -42,7 +44,7 @@ export class CoreSeries<T extends CoreSerie> {
} }
protected fillDefaults(serie: T, idx: number): T { protected fillDefaults(serie: T, idx: number): T {
let defaults = lodashCloneDeep(SERIE_DEFAULTS); let defaults = lodashCloneDeep(this._defaults);
defaults.color = palette[idx % palette.length]; defaults.color = palette[idx % palette.length];
defaults.idx = idx; defaults.idx = idx;
lodashDefaultsDeep(serie, defaults); lodashDefaultsDeep(serie, defaults);

2
src/state.ts
Unescape View File

@ -245,7 +245,7 @@ export class PodState<T extends CoreSerie, O extends Options> {
} }
protected filterSerieByYAxisOrientation(serie: T, orientation: yAxisOrientation): boolean { protected filterSerieByYAxisOrientation(serie: T, orientation: yAxisOrientation): boolean {
if(serie.yOrientation === undefined || serie.yOrientation === yAxisOrientation.BOTH) { if(serie.yOrientation === undefined) {
return true; return true;
} }
return serie.yOrientation === orientation; return serie.yOrientation === orientation;

55
src/types.ts
Unescape View File

@ -16,7 +16,6 @@ export type CoreSerie = {
// TODO: move some options to line-chart // TODO: move some options to line-chart
export type Options = { export type Options = {
margin?: Margin; margin?: Margin;
confidence?: number;
eventsCallbacks?: { eventsCallbacks?: {
zoomIn?: (range: AxisRange[]) => void, zoomIn?: (range: AxisRange[]) => void,
panning?: (event: { ranges: AxisRange[], d3Event: any }) => void, panning?: (event: { ranges: AxisRange[], d3Event: any }) => void,
@ -31,32 +30,13 @@ export type Options = {
renderStart?: () => void, renderStart?: () => void,
renderEnd?: () => void, renderEnd?: () => void,
}; };
axis?: { axis?: AxesOptions;
x?: AxisOption,
y?: AxisOption,
y1?: AxisOption
};
grid?: GridOptions; grid?: GridOptions;
crosshair?: { crosshair?: CrosshairOptions;
orientation?: CrosshairOrientation;
color?: string;
}
timeInterval?: { timeInterval?: {
timeFormat?: TimeFormat; timeFormat?: TimeFormat;
count?: number; count?: number;
}; };
tickFormat?: {
xAxis?: string;
xTickOrientation?: TickOrientation;
};
labelFormat?: {
xAxis?: string;
yAxis?: string;
};
bounds?: {
upper: string;
lower: string;
};
timeRange?: { timeRange?: {
from: number, from: number,
to: number to: number
@ -96,6 +76,7 @@ export type Options = {
renderTicksfromTimestamps?: boolean; renderTicksfromTimestamps?: boolean;
renderLegend?: boolean; renderLegend?: boolean;
}; };
export type GridOptions = { export type GridOptions = {
x?: { x?: {
enabled?: boolean; enabled?: boolean;
@ -106,22 +87,32 @@ export type GridOptions = {
ticksCount?: number; ticksCount?: number;
}, },
} }
export type AxesOptions = {
x?: AxisOption,
y?: AxisOption,
y1?: AxisOption
}
export type AxisOption = { export type AxisOption = {
isActive?: boolean; isActive?: boolean;
ticksCount?: number; ticksCount?: number;
format?: AxisFormat; format?: AxisFormat;
range?: [number, number]; range?: [number, number];
invert?: boolean; invert?: boolean;
label?: string;
valueFormatter?: (value: number, i: number) => string; valueFormatter?: (value: number, i: number) => string;
colorFormatter?: (value: number, i: number) => string; colorFormatter?: (value: number, i: number) => string;
} }
export type CrosshairOptions = {
orientation?: CrosshairOrientation;
color?: string;
}
export type AxisRange = [number, number] | undefined; export type AxisRange = [number, number] | undefined;
export type VueOptions = Omit<Options, 'eventsCallbacks'>; export type VueOptions = Omit<Options, 'eventsCallbacks'>;
export enum TickOrientation {
VERTICAL = 'vertical',
HORIZONTAL = 'horizontal',
DIAGONAL = 'diagonal'
}
export enum TimeFormat { export enum TimeFormat {
SECOND = 'second', SECOND = 'second',
MINUTE = 'minute', MINUTE = 'minute',
@ -130,47 +121,56 @@ export enum TimeFormat {
MONTH = 'month', MONTH = 'month',
YEAR = 'year' YEAR = 'year'
} }
export enum BrushOrientation { export enum BrushOrientation {
VERTICAL = 'vertical', VERTICAL = 'vertical',
HORIZONTAL = 'horizontal', HORIZONTAL = 'horizontal',
RECTANGLE = 'rectangle', RECTANGLE = 'rectangle',
SQUARE = 'square' SQUARE = 'square'
} }
export enum PanOrientation { export enum PanOrientation {
VERTICAL = 'vertical', VERTICAL = 'vertical',
HORIZONTAL = 'horizontal', HORIZONTAL = 'horizontal',
BOTH = 'both', BOTH = 'both',
} }
export enum ScrollPanOrientation { export enum ScrollPanOrientation {
VERTICAL = 'vertical', VERTICAL = 'vertical',
HORIZONTAL = 'horizontal', HORIZONTAL = 'horizontal',
} }
export enum ScrollPanDirection { export enum ScrollPanDirection {
FORWARD = 'forward', FORWARD = 'forward',
BACKWARD = 'backward', BACKWARD = 'backward',
BOTH = 'both', BOTH = 'both',
} }
export enum AxisFormat { export enum AxisFormat {
TIME = 'time', TIME = 'time',
NUMERIC = 'numeric', NUMERIC = 'numeric',
STRING = 'string', STRING = 'string',
CUSTOM = 'custom' CUSTOM = 'custom'
} }
export enum CrosshairOrientation { export enum CrosshairOrientation {
VERTICAL = 'vertical', VERTICAL = 'vertical',
HORIZONTAL = 'horizontal', HORIZONTAL = 'horizontal',
BOTH = 'both' BOTH = 'both'
} }
export type SvgElementAttributes = { export type SvgElementAttributes = {
x: number, x: number,
y: number, y: number,
width: number, width: number,
height: number height: number
} }
export enum KeyEvent { export enum KeyEvent {
MAIN = 'main', MAIN = 'main',
SHIFT = 'shift' SHIFT = 'shift'
} }
// allow series values to affect a specific axis // allow series values to affect a specific axis
export enum xAxisOrientation { export enum xAxisOrientation {
TOP = 'top', TOP = 'top',
@ -180,7 +180,6 @@ export enum xAxisOrientation {
export enum yAxisOrientation { export enum yAxisOrientation {
LEFT = 'left', LEFT = 'left',
RIGHT = 'right', RIGHT = 'right',
BOTH = 'both'
} }
export type SvgElParams = { export type SvgElParams = {
height: number, height: number,

Write Preview
Loading…
Cancel
Save