chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 2 Projects Releases 1 Wiki Activity
Browse Source

models

merge-requests/24/head
vargburz 3 years ago
parent
88074bc683
commit
e7248806b0
5 changed files with 118 additions and 163 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. 3
      package.json
  2. 242
      src/index.ts
  3. 26
      src/models/line-series.ts
  4. 4
      src/types.ts
  5. 6
      yarn.lock

3
package.json
Unescape View File

@ -6,7 +6,8 @@
"scripts": { "scripts": {
"build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js", "build": "webpack --config build/webpack.prod.conf.js && webpack --config build/webpack.dev.conf.js",
"dev": "webpack --watch --config build/webpack.dev.conf.js", "dev": "webpack --watch --config build/webpack.dev.conf.js",
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1",
"update-core": "yarn up @chartwerk/core && yarn up @chartwerk/core@latest"
}, },
"repository": { "repository": {
"type": "git", "type": "git",

242
src/index.ts
Unescape View File

@ -1,6 +1,8 @@
import { ChartwerkPod, VueChartwerkPodMixin, TickOrientation, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions, Mode } from './types'; import { LineTimeSerie, LineOptions, Mode } from './types';
import { LineSeries } from './models/line-series';
import * as d3 from 'd3'; import * as d3 from 'd3';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -15,6 +17,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) {
super(_el, _series, _options); super(_el, _series, _options);
this.coreSeries = new LineSeries(_series);
} }
renderMetrics(): void { renderMetrics(): void {
@ -24,35 +27,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.initLineGenerator(); this.initLineGenerator();
this.initAreaGenerator(); this.initAreaGenerator();
// TODO: seems that renderMetrics is not correct name if(!this.coreSeries.isSeriesAvailable) {
if(this.series.length === 0) {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
for(let idx = 0; idx < this.series.length; ++idx) { for(const serie of this.coreSeries.visibleSeries) {
if(this.series[idx].visible === false) { this._renderMetric(serie);
continue;
}
// TODO: use _.defaults same as in core
const confidence = this.series[idx].confidence || 0;
const mode = this.series[idx].mode || Mode.STANDARD;
const target = this.series[idx].target;
const renderDots = this.series[idx].renderDots !== undefined ? this.series[idx].renderDots : false;
const renderLines = this.series[idx].renderLines !== undefined ? this.series[idx].renderLines : true;
this._renderMetric(
this.series[idx].datapoints,
{
color: this.getSerieColor(idx),
confidence,
target,
mode,
serieIdx: idx,
renderDots,
renderLines,
}
);
} }
} }
@ -63,19 +44,18 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
initLineGenerator(): void { initLineGenerator(): void {
this.lineGenerator = d3.line() this.lineGenerator = d3.line()
.x(d => this.xScale(d[0])) .x(d => this.state.xScale(d[0]))
.y(d => this.yScale(d[1])); .y(d => this.state.yScale(d[1]));
} }
initAreaGenerator(): void { initAreaGenerator(): void {
this.areaGenerator = d3.area() this.areaGenerator = d3.area()
.x(d => this.xScale(d[0])) .x(d => this.state.xScale(d[0]))
.y1(d => this.yScale(d[1])) .y1(d => this.state.yScale(d[1]))
.y0(d => this.height); .y0(d => this.height);
} }
getRenderGenerator(serieIdx: number): any { getRenderGenerator(renderArea: boolean): any {
const renderArea = this.series[serieIdx].renderArea;
if(renderArea) { if(renderArea) {
return this.areaGenerator; return this.areaGenerator;
} }
@ -83,29 +63,26 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
public appendData(data: [number, number][], shouldRerender = true): void { public appendData(data: [number, number][], shouldRerender = true): void {
for(let idx = 0; idx < this.series.length; ++idx) { for(const serie of this.coreSeries.visibleSeries) {
if(this.series[idx].visible === false) { serie.datapoints.push(data[serie.idx]);
continue; const maxLength = serie.maxLength;
} if(maxLength !== undefined && serie.datapoints.length > maxLength) {
this.series[idx].datapoints.push(data[idx]); serie.datapoints.shift();
const maxLength = this.series[idx].maxLength;
if(maxLength !== undefined && this.series[idx].datapoints.length > maxLength) {
this.series[idx].datapoints.shift();
} }
} }
for(let idx = 0; idx < this.series.length; ++idx) { for(const serie of this.coreSeries.visibleSeries) {
this.metricContainer.select(`.metric-path-${idx}`) this.metricContainer.select(`.metric-path-${serie.idx}`)
.datum(this.series[idx].datapoints) .datum(serie.datapoints)
.attr('d', this.getRenderGenerator(idx)); .attr('d', this.getRenderGenerator(serie.renderArea));
if(this.series[idx].renderDots === true) { if(serie.renderDots === true) {
this.metricContainer.selectAll(`.metric-circle-${idx}`) this.metricContainer.selectAll(`.metric-circle-${serie.idx}`)
.data(this.series[idx].datapoints) .data(serie.datapoints)
.attr('cx', d => this.xScale(d[0])) .attr('cx', d => this.state.xScale(d[0]))
.attr('cy', d => this.yScale(d[1])); .attr('cy', d => this.state.yScale(d[1]));
this._renderDots([data[idx]], idx); this._renderDots(serie);
} }
} }
if(shouldRerender) { if(shouldRerender) {
@ -117,67 +94,48 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
} }
_renderDots(datapoints: number[][], serieIdx: number): void { _renderDots(serie: LineTimeSerie): void {
const customClass = this.series[serieIdx].class || '';
this.metricContainer.selectAll(null) this.metricContainer.selectAll(null)
.data(datapoints) .data(serie.datapoints)
.enter() .enter()
.append('circle') .append('circle')
.attr('class', `metric-circle-${serieIdx} metric-el ${customClass}`) .attr('class', `metric-circle-${serie.idx} metric-el ${serie.class}`)
.attr('fill', this.getSerieColor(serieIdx)) .attr('fill', serie.color)
.attr('r', METRIC_CIRCLE_RADIUS) .attr('r', METRIC_CIRCLE_RADIUS)
.style('pointer-events', 'none') .style('pointer-events', 'none')
.attr('cx', d => this.xScale(d[0])) .attr('cx', d => this.state.xScale(d[0]))
.attr('cy', d => this.yScale(d[1])); .attr('cy', d => this.state.yScale(d[1]));
} }
_renderLines(datapoints: number[][], serieIdx: number): void { _renderLines(serie: LineTimeSerie): void {
const dashArray = this.series[serieIdx].dashArray !== undefined ? this.series[serieIdx].dashArray : '0'; const fillColor = serie.renderArea ? serie.color : 'none';
const customClass = this.series[serieIdx].class || ''; const fillOpacity = serie.renderArea ? 0.5 : 'none';
const fillColor = this.series[serieIdx].renderArea ? this.getSerieColor(serieIdx) : 'none';
const fillOpacity = this.series[serieIdx].renderArea ? 0.5 : 'none';
this.metricContainer this.metricContainer
.append('path') .append('path')
.datum(datapoints) .datum(serie.datapoints)
.attr('class', `metric-path-${serieIdx} metric-el ${customClass}`) .attr('class', `metric-path-${serie.idx} metric-el ${serie.class}`)
.attr('fill', fillColor) .attr('fill', fillColor)
.attr('fill-opacity', fillOpacity) .attr('fill-opacity', fillOpacity)
.attr('stroke', this.getSerieColor(serieIdx)) .attr('stroke', serie.color)
.attr('stroke-width', 1) .attr('stroke-width', 1)
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)
.attr('pointer-events', 'none') .attr('pointer-events', 'none')
.style('stroke-dasharray', dashArray) .style('stroke-dasharray', serie.dashArray)
.attr('d', this.getRenderGenerator(serieIdx)); .attr('d', this.getRenderGenerator(serie.renderArea));
} }
_renderMetric( _renderMetric(serie: LineTimeSerie): void {
datapoints: number[][], if(serie.mode === Mode.CHARGE) {
metricOptions: { const dataPairs = d3.pairs(serie.datapoints);
color: string,
confidence: number,
target: string,
mode: Mode,
serieIdx: number,
renderDots: boolean,
renderLines: boolean,
}
): void {
if(_.includes(this.seriesTargetsWithBounds, metricOptions.target)) {
return;
}
if(metricOptions.mode === Mode.CHARGE) {
const dataPairs = d3.pairs(datapoints);
this.metricContainer.selectAll(null) this.metricContainer.selectAll(null)
.data(dataPairs) .data(dataPairs)
.enter() .enter()
.append('line') .append('line')
.attr('x1', d => this.xScale(d[0][0])) .attr('x1', d => this.state.xScale(d[0][0]))
.attr('x2', d => this.xScale(d[1][0])) .attr('x2', d => this.state.xScale(d[1][0]))
.attr('y1', d => this.yScale(d[0][1])) .attr('y1', d => this.state.yScale(d[0][1]))
.attr('y2', d => this.yScale(d[1][1])) .attr('y2', d => this.state.yScale(d[1][1]))
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)
.style('stroke-width', 1) .style('stroke-width', 1)
.style('stroke', d => { .style('stroke', d => {
@ -192,12 +150,12 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
return; return;
} }
if(metricOptions.renderLines === true) { if(serie.renderLines === true) {
this._renderLines(datapoints, metricOptions.serieIdx); this._renderLines(serie);
} }
if(metricOptions.renderDots === true) { if(serie.renderDots === true) {
this._renderDots(datapoints, metricOptions.serieIdx); this._renderDots(serie);
} }
} }
@ -209,7 +167,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
appendCrosshairCircles(): void { appendCrosshairCircles(): void {
// circle for each serie // circle for each serie
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { this.coreSeries.visibleSeries.forEach((serie: LineTimeSerie, serieIdx: number) => {
this.appendCrosshairCircle(serieIdx); this.appendCrosshairCircle(serieIdx);
}); });
} }
@ -222,7 +180,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS) .attr('cx', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS) .attr('cy', -CROSSHAIR_BACKGROUND_RAIDUS)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.getSerieColor(serieIdx)) .attr('fill', this.coreSeries.visibleSeries[serieIdx].color)
.style('opacity', CROSSHAIR_BACKGROUND_OPACITY) .style('opacity', CROSSHAIR_BACKGROUND_OPACITY)
.style('pointer-events', 'none'); .style('pointer-events', 'none');
@ -232,23 +190,19 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('cy', -CROSSHAIR_CIRCLE_RADIUS) .attr('cy', -CROSSHAIR_CIRCLE_RADIUS)
.attr('class', `crosshair-circle-${serieIdx}`) .attr('class', `crosshair-circle-${serieIdx}`)
.attr('clip-path', `url(#${this.rectClipId})`) .attr('clip-path', `url(#${this.rectClipId})`)
.attr('fill', this.getSerieColor(serieIdx)) .attr('fill', this.coreSeries.visibleSeries[serieIdx].color)
.attr('r', CROSSHAIR_CIRCLE_RADIUS) .attr('r', CROSSHAIR_CIRCLE_RADIUS)
.style('pointer-events', 'none'); .style('pointer-events', 'none');
} }
public renderSharedCrosshair(values: { x?: number, y?: number }): void { public renderSharedCrosshair(values: { x?: number, y?: number }): void {
this.onMouseOver(); // TODO: refactor to use it once this.onMouseOver(); // TODO: refactor to use it once
const eventX = this.xScale(values.x); const eventX = this.state.xScale(values.x);
const eventY = this.yScale(values.y); const eventY = this.state.yScale(values.y);
this.moveCrosshairLine(eventX, eventY); this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(values.x, values.y); const datapoints = this.findAndHighlightDatapoints(values.x, values.y);
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.sharedCrosshairMove === undefined) { this.coreOptions.callbackSharedCrosshairMove({
return;
}
this.options.eventsCallbacks.sharedCrosshairMove({
datapoints: datapoints, datapoints: datapoints,
eventX, eventY eventX, eventY
}); });
@ -259,7 +213,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
moveCrosshairLine(xPosition: number, yPosition: number): void { moveCrosshairLine(xPosition: number, yPosition: number): void {
switch(this.options.crosshair.orientation) { switch(this.coreOptions.crosshair.orientation) {
case CrosshairOrientation.VERTICAL: case CrosshairOrientation.VERTICAL:
this.crosshair.select('#crosshair-line-x') this.crosshair.select('#crosshair-line-x')
.attr('x1', xPosition) .attr('x1', xPosition)
@ -279,7 +233,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('y2', yPosition); .attr('y2', yPosition);
return; return;
default: default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); throw new Error(`Unknown type of crosshair orientaion: ${this.coreOptions.crosshair.orientation}`);
} }
} }
@ -307,7 +261,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number { getClosestIndex(datapoints: [number, number][], xValue: number, yValue: number): number {
let columnIdx; // 0 for x value, 1 for y value, let columnIdx; // 0 for x value, 1 for y value,
let value; // xValue to y Value let value; // xValue to y Value
switch(this.options.crosshair.orientation) { switch(this.coreOptions.crosshair.orientation) {
case CrosshairOrientation.VERTICAL: case CrosshairOrientation.VERTICAL:
columnIdx = 0; columnIdx = 0;
value = xValue; value = xValue;
@ -321,7 +275,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
columnIdx = 1; columnIdx = 1;
value = yValue; value = yValue;
default: default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); throw new Error(`Unknown type of crosshair orientaion: ${this.coreOptions.crosshair.orientation}`);
} }
// TODO: d3.bisect is not the best way. Use binary search // TODO: d3.bisect is not the best way. Use binary search
@ -350,7 +304,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
// columnIdx: 1 for y, 0 for x // columnIdx: 1 for y, 0 for x
// inverval: x/y value interval between data points // inverval: x/y value interval between data points
// TODO: move it to base/state instead of timeInterval // TODO: move it to base/state instead of timeInterval
const intervals = _.map(this.series, serie => { const intervals = _.map(this.coreSeries.visibleSeries, serie => {
if(serie.datapoints.length < 2) { if(serie.datapoints.length < 2) {
return undefined; return undefined;
} }
@ -366,23 +320,15 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
onMouseMove(): void { onMouseMove(): void {
const eventX = d3.mouse(this.chartContainer.node())[0]; const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1]; const eventY = d3.mouse(this.chartContainer.node())[1];
const xValue = this.xScale.invert(eventX); // mouse x position in xScale const xValue = this.state.xScale.invert(eventX); // mouse x position in xScale
const yValue = this.yScale.invert(eventY); const yValue = this.state.yScale.invert(eventY);
// TODO: isOutOfChart is a hack, use clip path correctly
if(this.isOutOfChart() === true) {
this.crosshair.style('display', 'none');
return;
}
this.moveCrosshairLine(eventX, eventY); this.moveCrosshairLine(eventX, eventY);
const datapoints = this.findAndHighlightDatapoints(xValue, yValue); const datapoints = this.findAndHighlightDatapoints(xValue, yValue);
if(this.options.eventsCallbacks === undefined || this.options.eventsCallbacks.mouseMove === undefined) {
return;
}
// TDOO: is shift key pressed // TDOO: is shift key pressed
// TODO: need to refactor this object // TODO: need to refactor this object
this.options.eventsCallbacks.mouseMove({ this.coreOptions.callbackMouseMove({
x: d3.event.pageX, x: d3.event.pageX,
y: d3.event.pageY, y: d3.event.pageY,
xVal: xValue, xVal: xValue,
@ -394,31 +340,24 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] { findAndHighlightDatapoints(xValue: number, yValue: number): { value: [number, number], color: string, label: string }[] {
if(this.series === undefined || this.series.length === 0) { if(!this.coreSeries.isSeriesAvailable) {
return []; return [];
} }
let points = []; // datapoints in each metric that is closest to xValue/yValue position let points = []; // datapoints in each metric that is closest to xValue/yValue position
this.series.forEach((serie: LineTimeSerie, serieIdx: number) => { this.coreSeries.visibleSeries.forEach((serie: LineTimeSerie) => {
if(
serie.visible === false ||
_.includes(this.seriesTargetsWithBounds, serie.target)
) {
this.hideCrosshairCircle(serieIdx);
return;
}
const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue); const closestDatapoint = this.getClosestDatapoint(serie, xValue, yValue);
if(closestDatapoint === undefined || this.isOutOfRange(closestDatapoint, xValue, yValue, serie.useOutOfRange)) { if(closestDatapoint === undefined || this.isOutOfRange(closestDatapoint, xValue, yValue, serie.useOutOfRange)) {
this.hideCrosshairCircle(serieIdx); this.hideCrosshairCircle(serie.idx);
return; return;
} }
const xPosition = this.xScale(closestDatapoint[0]); const xPosition = this.state.xScale(closestDatapoint[0]);
const yPosition = this.yScale(closestDatapoint[1]); const yPosition = this.state.yScale(closestDatapoint[1]);
this.moveCrosshairCircle(xPosition, yPosition, serieIdx); this.moveCrosshairCircle(xPosition, yPosition, serie.idx);
points.push({ points.push({
value: closestDatapoint, value: closestDatapoint,
color: this.getSerieColor(serieIdx), color: serie.color,
label: serie.alias || serie.target label: serie.alias || serie.target
}); });
}); });
@ -433,7 +372,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
let columnIdx; // 1 for y value, 0 for x value let columnIdx; // 1 for y value, 0 for x value
let value; // xValue ot y Value let value; // xValue ot y Value
switch(this.options.crosshair.orientation) { switch(this.coreOptions.crosshair.orientation) {
case CrosshairOrientation.VERTICAL: case CrosshairOrientation.VERTICAL:
columnIdx = 0; columnIdx = 0;
value = xValue; value = xValue;
@ -447,7 +386,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
columnIdx = 1; columnIdx = 1;
value = yValue; value = yValue;
default: default:
throw new Error(`Unknown type of crosshair orientaion: ${this.options.crosshair.orientation}`); throw new Error(`Unknown type of crosshair orientaion: ${this.coreOptions.crosshair.orientation}`);
} }
const range = Math.abs(closestDatapoint[columnIdx] - value); const range = Math.abs(closestDatapoint[columnIdx] - value);
const interval = this.getValueInterval(columnIdx); // interval between points const interval = this.getValueInterval(columnIdx); // interval between points
@ -462,30 +401,21 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
onMouseOut(): void { onMouseOut(): void {
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.mouseOut !== undefined) { this.coreOptions.callbackMouseOut();
this.options.eventsCallbacks.mouseOut();
}
this.crosshair.style('display', 'none'); this.crosshair.style('display', 'none');
} }
isDoubleClickActive(): boolean { isDoubleClickActive(): boolean {
if(this.options.zoomEvents.mouse.doubleClick === undefined) { return this.coreOptions.doubleClickEvent.isActive;
return false;
}
return this.options.zoomEvents.mouse.doubleClick.isActive;
} }
// methods below rewrite cores, (move more methods here) // methods below rewrite cores, (move more methods here)
protected zoomOut(): void { protected zoomOut(): void {
// TODO: test to remove, seems its depricated
if(this.isOutOfChart() === true) {
return;
}
if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) { if(d3.event.type === 'dblclick' && !this.isDoubleClickActive()) {
return; return;
} }
// TODO: its not clear, why we use this orientation here. Mb its better to use separate option // TODO: its not clear, why we use this orientation here. Mb its better to use separate option
const orientation: BrushOrientation = this.options.zoomEvents.mouse.zoom.orientation; const orientation: BrushOrientation = this.coreOptions.mouseZoomEvent.orientation;
const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0]; const xInterval = this.state.xValueRange[1] - this.state.xValueRange[0];
const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0]; const yInterval = this.state.yValueRange[1] - this.state.yValueRange[0];
switch(orientation) { switch(orientation) {
@ -514,15 +444,13 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.renderGrid(); this.renderGrid();
this.onMouseOver(); this.onMouseOver();
if(this.options.eventsCallbacks !== undefined && this.options.eventsCallbacks.zoomOut !== undefined) { let xAxisMiddleValue: number = this.state.xScale.invert(this.width / 2);
let xAxisMiddleValue: number = this.xScale.invert(this.width / 2); let yAxisMiddleValue: number = this.state.yScale.invert(this.height / 2);
let yAxisMiddleValue: number = this.yScale.invert(this.height / 2); const centers = {
const centers = { x: xAxisMiddleValue,
x: xAxisMiddleValue, y: yAxisMiddleValue
y: yAxisMiddleValue
}
this.options.eventsCallbacks.zoomOut(centers);
} }
this.coreOptions.callbackZoomOut(centers);
} }
} }
@ -557,4 +485,4 @@ export const VueChartwerkLinePod = {
} }
}; };
export { LineTimeSerie, LineOptions, Mode, TickOrientation, TimeFormat }; export { LineTimeSerie, LineOptions, Mode, TimeFormat };

26
src/models/line-series.ts
Unescape View File

@ -0,0 +1,26 @@
import { CoreSeries } from '@chartwerk/core';
import { LineTimeSerie, Mode } from 'types';
const LINE_SERIE_DEFAULTS = {
mode: Mode.STANDARD,
maxLength: undefined,
renderDots: false,
renderLines: true,
useOutOfRange: true, //?
dashArray: '0',
class: '',
renderArea: false,
};
export class LineSeries extends CoreSeries<LineTimeSerie> {
_lineDefaults = LINE_SERIE_DEFAULTS;
constructor(series: LineTimeSerie[]) {
super(series);
}
protected get defaults(): LineTimeSerie {
return { ...this._coreDefaults, ...this._lineDefaults };
}
}

4
src/types.ts
Unescape View File

@ -1,4 +1,4 @@
import { TimeSerie, Options } from '@chartwerk/core'; import { Serie, Options } from '@chartwerk/core';
type LineTimeSerieParams = { type LineTimeSerieParams = {
confidence: number, confidence: number,
@ -15,5 +15,5 @@ export enum Mode {
STANDARD = 'Standard', STANDARD = 'Standard',
CHARGE = 'Charge' CHARGE = 'Charge'
} }
export type LineTimeSerie = TimeSerie & Partial<LineTimeSerieParams>; export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
export type LineOptions = Options; export type LineOptions = Options;

6
yarn.lock
Unescape View File

@ -6,12 +6,12 @@ __metadata:
cacheKey: 8 cacheKey: 8
"@chartwerk/core@npm:latest": "@chartwerk/core@npm:latest":
version: 0.5.4 version: 0.5.8
resolution: "@chartwerk/core@npm:0.5.4" resolution: "@chartwerk/core@npm:0.5.8"
dependencies: dependencies:
d3: ^5.7.2 d3: ^5.7.2
lodash: ^4.14.149 lodash: ^4.14.149
checksum: 0d686409377d6880f0012db3d9c1e1910cf3660885ac13196dabe93f57eca53984cf52dcf781b2876373fe9efc7b9d0209117cbcd811c50892b1de4f38a4a37f checksum: 24b403af2703cc99ef3dee4793318ed71f4b02ed50bee6940774ccb392b8fbb53bb5353e91903b2c1ec815a8d2b830f2a2a2925d8e4380c64895ee2002b2baed
languageName: node languageName: node
linkType: hard linkType: hard

Write Preview
Loading…
Cancel
Save