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

Merge branch 'main' of code.corpglory.net:chartwerk/line-pod into types-for-mousemove

pull/66/head
rozetko 2 weeks ago
parent
85ab6ad0aa b3e7f943ad
commit
bebc1bbb86
12 changed files with 358 additions and 126 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. 2
      .gitignore
  2. 42
      examples/area.html
  3. 19
      examples/markers.html
  4. 12
      examples/markers_select.html
  5. 33
      examples/right_click.html
  6. 4
      package.json
  7. 168
      src/components/markers.ts
  8. 152
      src/index.ts
  9. 4
      src/models/line_series.ts
  10. 12
      src/models/marker.ts
  11. 22
      src/types.ts
  12. 10
      yarn.lock

2
.gitignore vendored
Unescape View File

@ -2,7 +2,7 @@ node_modules
dist dist
# yarn # yarn
.yarn/* .yarn
!.yarn/patches !.yarn/patches
!.yarn/plugins !.yarn/plugins
!.yarn/releases !.yarn/releases

42
examples/area.html
Unescape View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
let options = {
renderLegend: false, usePanning: false,
axis: {
x: { format: 'numeric', range: [0, 100] },
y: { invert: true, range: [0, 100] },
y1: { isActive: true, format: 'numeric', range: [0, 1000] },
},
zoomEvents: {
mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
scroll: { zoom: { isActive: false, orientation: 'horizontal' } }
},
}
const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
const data4 = [[0,900], [35, 800], [65, 700], [100, 600]];
var pod = new LinePod(
document.getElementById('chart'),
[
{ target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
{ target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
{ target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
{ target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
],
options
);
pod.render();
</script>
</body>
</html>

19
examples/markers.html
Unescape View File

@ -13,9 +13,18 @@
const startTime = 1701790172908; const startTime = 1701790172908;
const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8] const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
.map((el, idx) => [startTime + idx * 1000, el]); .map((el, idx) => [startTime + idx * 1000, el]);
// TODO: make this one-dimensinal data when implemented const markersData1 = [3, 6, 9].map(el => ({
const markersData1 = [3, 6, 9].map(el => [startTime + el * 1000]); x: startTime + el * 1000,
const markersData2 = [4, 11].map(el => [startTime + el * 1000]); color: 'red',
alwaysDisplay: false,
html: new Date(startTime).toISOString(),
}));
const markersData2 = [4, 11].map(el => ({
x: startTime + el * 1000,
color: 'blue',
alwaysDisplay: true,
html: new Date(startTime).toISOString(),
}));
let options = { let options = {
renderLegend: false, renderLegend: false,
axis: { axis: {
@ -31,8 +40,8 @@
options, options,
{ {
series: [ series: [
{ data: markersData1, color: 'red' }, { data: markersData1 },
{ data: markersData2, color: 'blue' }, { data: markersData2 },
] ]
} }
); );

12
examples/markers_select.html
Unescape View File

@ -13,11 +13,11 @@
const startTime = 1701790172908; const startTime = 1701790172908;
const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8] const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
.map((el, idx) => [startTime + idx * 1000, el]); .map((el, idx) => [startTime + idx * 1000, el]);
// TODO: make this one-dimensinal data when implemented const markersData = [3, 6, 9].map(el => ({
const markersData = [3, 6, 9].map(el => [ x: startTime + el * 1000,
startTime + el * 1000, payload: el,
{ el } color: 'red',
]); }));
let options = { let options = {
renderLegend: false, renderLegend: false,
axis: { axis: {
@ -33,7 +33,7 @@
options, options,
{ {
series: [ series: [
{ data: markersData, color: 'red' }, { data: markersData },
], ],
events: { events: {
onMouseMove: (el) => { console.log(el); }, onMouseMove: (el) => { console.log(el); },

33
examples/right_click.html
Unescape View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="../dist/index.dev.js" type="text/javascript"></script>
</head>
<body>
<div id="chart" style="width: 50%; height: 500px;"></div>
<script type="text/javascript">
const startTime = 1590590148;
const data = Array.from(
{ length: 20 },
(el, idx) => [startTime + idx * 10000, Math.floor(Math.random() * 30)]
);
let options = {
renderLegend: false, usePanning: false,
axis: { y: { range: [0, 50] } },
zoomEvents: { mouse: {
zoom: { isActive: false },
pan: { isActive: false },
} },
eventsCallbacks: { contextMenu: (position) => console.log('contextMenu', position) }
}
var pod = new LinePod(
document.getElementById('chart'),
[{ datapoints: data }],
options
);
pod.render();
</script>
</body>
</html>

4
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "@chartwerk/line-pod", "name": "@chartwerk/line-pod",
"version": "0.6.19", "version": "0.7.8",
"description": "Chartwerk line chart", "description": "Chartwerk line chart",
"main": "dist/index.js", "main": "dist/index.js",
"files": [ "files": [
@ -19,7 +19,7 @@
"author": "CorpGlory", "author": "CorpGlory",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@chartwerk/core": "^0.6.23" "@chartwerk/core": "^0.6.26"
}, },
"devDependencies": { "devDependencies": {
"copy-webpack-plugin": "^11.0.0", "copy-webpack-plugin": "^11.0.0",

168
src/components/markers.ts
Unescape View File

@ -1,59 +1,139 @@
import { MarkersConf, MarkerSerie } from "../models/marker"; import { MarkerElem, MarkersConf, MarkerSerie } from '../models/marker';
import { PodState } from "@chartwerk/core"; import { LineTimeSerie, LineOptions } from '../types';
import { LineTimeSerie, LineOptions } from "../types";
import d3 from "d3"; import { Margin, PodState } from '@chartwerk/core';
import d3 from 'd3';
export class Markers { export class Markers {
// TODO: more semantic name private _layerContainer = null;
private _d3Holder = null; private _chartHeight = 0;
constructor(private _markerConf: MarkersConf, private _state: PodState<LineTimeSerie, LineOptions>) { constructor(
private _chartContainer: d3.Selection<HTMLElement, unknown, null, undefined>,
private _markerConf: MarkersConf,
private _state: PodState<LineTimeSerie, LineOptions>,
private _margin: Margin,
) { }
clear() {
if(this._layerContainer !== null) {
this._layerContainer.remove();
}
this._chartContainer.selectAll('.marker-content').remove();
} }
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) { render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartHeight: number) {
if(this._d3Holder !== null) { this._chartHeight = chartHeight;
this._d3Holder.remove(); this._layerContainer = metricContainer
.append('g')
.attr('class', 'markers-layer');
for(const serie of this._markerConf.series) {
this.renderSerie(serie);
} }
this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); }
for (const ms of this._markerConf.series) {
this.renderSerie(ms); private _getLinePosition(marker: MarkerElem): number {
return this._state.xScale(marker.x);
}
private _renderCircle(marker: MarkerElem) {
const linePosition = this._getLinePosition(marker);
let circle = this._layerContainer.append('circle')
.attr('class', 'gap-circle')
.attr('stroke', marker.color)
.attr('stroke-width', '2px')
.attr('r', 4)
.attr('cx', linePosition)
.attr('cy', 5)
circle
.attr('pointer-events', 'all')
.style('cursor', 'pointer')
.on('mousemove', () => {
const onMouseMove = this._markerConf.events?.onMouseMove;
if(onMouseMove) {
onMouseMove(marker);
return
}
if(marker.alwaysDisplay) {
return;
}
this._chartContainer
.selectAll(`.marker-content-${marker.x}`)
.style('visibility', 'visible')
.style('z-index', 9999);
})
.on('mouseout', () => {
const onMouseOut = this._markerConf.events?.onMouseOut;
if(onMouseOut) {
onMouseOut()
return
}
if(marker.alwaysDisplay) {
return;
}
this._chartContainer
.selectAll(`.marker-content-${marker.x}`)
.style('visibility', 'hidden')
.style('z-index', 1);
});
}
private _renderLine(marker: MarkerElem) {
const linePosition = this._getLinePosition(marker);
this._layerContainer.append('line')
.attr('class', 'gap-line')
.attr('stroke', marker.color)
.attr('stroke-width', '1px')
.attr('stroke-opacity', '0.3')
.attr('stroke-dasharray', '4')
.attr('x1', linePosition)
.attr('x2', linePosition)
.attr('y1', 0)
// @ts-ignore // TODO: remove ignore but boxParams are protected
.attr('y2', this._state.boxParams.height)
.attr('pointer-events', 'none');
}
private _renderTooltip(marker: MarkerElem) {
if(marker.html === undefined) {
return;
} }
const linePosition = this._getLinePosition(marker);
const div = this._chartContainer
.append('div')
.attr('class', `marker-content marker-content-${marker.x}`)
// @ts-ignore // TODO: remove ignore but boxParams are protected
.style('top', `${this._state.boxParams.height - this._chartHeight}px`)
.style('visibility', marker.alwaysDisplay ? 'visible' : 'hidden')
.style('position', 'absolute')
.style('border', '1px solid black')
.style('background-color', 'rgb(33, 37, 41)')
.style('color', 'rgb(255, 255, 255)')
.style('line-height', '1.55')
.style('font-size', '0.875rem')
.style('border-radius', '0.5rem')
.style('padding', 'calc(0.3125rem) 0.625rem')
.style('position', 'absolute')
.style('white-space', 'nowrap')
.style('pointer-events', 'none')
.style('z-index', 1)
.html(marker.html);
// align tooltip: center (we need it to be rendered first)
div.style('left', `${linePosition + this._margin.left - div.node().getBoundingClientRect().width / 2}px`)
} }
protected renderSerie(serie: MarkerSerie) { protected renderSerie(serie: MarkerSerie) {
serie.data.forEach((d) => { serie.data.forEach((marker: MarkerElem) => {
let linePosition = this._state.xScale(d[0]) as number; this._renderLine(marker);
this._d3Holder.append('line') this._renderCircle(marker);
.attr('class', 'gap-line') this._renderTooltip(marker);
.attr('stroke', serie.color)
.attr('stroke-width', '1px')
.attr('stroke-opacity', '0.3')
.attr('stroke-dasharray', '4')
.attr('x1', linePosition)
.attr('x2', linePosition)
.attr('y1', 0)
// @ts-ignore // TODO: remove ignore but boxParams are protected
.attr('y2', this._state.boxParams.height)
.attr('pointer-events', 'none');
let circle = this._d3Holder.append('circle')
.attr('class', 'gap-circle')
.attr('stroke', serie.color)
.attr('stroke-width', '2px')
.attr('r', 4)
.attr('cx', linePosition)
.attr('cy', 5)
if(this._markerConf !== undefined) {
circle
.attr('pointer-events', 'all')
.style('cursor', 'pointer')
.on('mousemove', () => this._markerConf.events.onMouseMove(d))
.on('mouseout', () => this._markerConf.events.onMouseOut())
}
}); });
} }
} }

152
src/index.ts
Unescape View File

@ -1,5 +1,5 @@
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions, MouseObj } from './types'; import { LineTimeSerie, LineOptions, MouseObj, AreaType } from './types';
import { Markers } from './components/markers'; import { Markers } from './components/markers';
import { Segments } from './components/segments'; import { Segments } from './components/segments';
@ -14,14 +14,9 @@ const METRIC_CIRCLE_RADIUS = 1.5;
const CROSSHAIR_CIRCLE_RADIUS = 3; const CROSSHAIR_CIRCLE_RADIUS = 3;
const CROSSHAIR_BACKGROUND_RAIDUS = 9; const CROSSHAIR_BACKGROUND_RAIDUS = 9;
const CROSSHAIR_BACKGROUND_OPACITY = 0.3; const CROSSHAIR_BACKGROUND_OPACITY = 0.3;
type Generator = d3.Line<[number, number]> | d3.Area<[number, number]>;
class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> { class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
lineGenerator = null;
areaGenerator = null;
lineGeneratorY1 = null;
areaGeneratorY1 = null;
private _markersLayer: Markers = null; private _markersLayer: Markers = null;
private _segmentsLayer: Segments = null; private _segmentsLayer: Segments = null;
@ -40,55 +35,70 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
this.clearAllMetrics(); this.clearAllMetrics();
this.updateCrosshair(); this.updateCrosshair();
this.initLineGenerator(); this.updateEvents();
this.initAreaGenerator();
if(!this.series.isSeriesAvailable) { if(!this.series.isSeriesAvailable) {
this.renderNoDataPointsMessage(); this.renderNoDataPointsMessage();
return; return;
} }
for(const serie of this.series.visibleSeries) { for(const serie of this.series.visibleSeries) {
this._renderMetric(serie); const generator = this.getRenderGenerator(serie.renderArea, serie.yOrientation);
this._renderMetric(serie, generator);
} }
if(this._markersConf !== undefined) { if(!_.isEmpty(this._markersConf)) {
this._markersLayer = new Markers(this._markersConf, this.state); this._markersLayer = new Markers(this.d3Node, this._markersConf, this.state, this.margin);
this._markersLayer.render(this.metricContainer); this._markersLayer.render(this.metricContainer, this.height);
} }
this._segmentsLayer = new Segments(this._segmentSeries, this.state); if(!_.isEmpty(this._segmentSeries)) {
this._segmentsLayer.render(this.metricContainer, this.chartContainer); this._segmentsLayer = new Segments(this._segmentSeries, this.state);
this._segmentsLayer.render(this.metricContainer, this.chartContainer);
}
} }
clearAllMetrics(): void { clearAllMetrics(): void {
// TODO: temporary hack before it will be implemented in core. // TODO: temporary hack before it will be implemented in core.
this.chartContainer.selectAll('.metric-el').remove(); this.chartContainer.selectAll('.metric-el').remove();
this._markersLayer?.clear();
} }
initLineGenerator(): void { protected updateEvents(): void {
this.lineGenerator = d3.line() // overlay - core component that is used to handle mouse events
.x(d => this.state.xScale(d[0])) if(!this.overlay) {
.y(d => this.state.yScale(d[1])); return;
this.lineGeneratorY1 = d3.line() }
.x(d => this.state.xScale(d[0])) if(this.options._options.events?.contextMenu === undefined) {
.y(d => this.state.y1Scale(d[1])); return;
} }
this.overlay.on('contextmenu', this.onContextMenu.bind(this));
initAreaGenerator(): void { }
this.areaGenerator = d3.area()
.x(d => this.state.xScale(d[0])) getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
.y1(d => this.state.yScale(d[1])) const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
.y0(d => this.height); const yValueRange = yOrientation === yAxisOrientation.LEFT ? this.state.yValueRange : this.state.y1ValueRange;
this.areaGeneratorY1 = d3.area() const yAxisOptions = yOrientation === yAxisOrientation.LEFT ? this.options.axis.y : this.options.axis.y1;
.x(d => this.state.xScale(d[0]))
.y1(d => this.state.y1Scale(d[1])) const topChartBorder = !yAxisOptions.invert ? yScale(yValueRange[1]) : yScale(yValueRange[0]);
.y0(d => this.height); const bottomChartBorder = !yAxisOptions.invert ? yScale(yValueRange[0]) : yScale(yValueRange[1]);
} switch(renderArea) {
case AreaType.NONE:
getRenderGenerator(renderArea: boolean, yOrientation: yAxisOrientation): any { // return line generator
if(renderArea) { return d3.line()
return yOrientation === yAxisOrientation.LEFT ? this.areaGenerator : this.areaGeneratorY1; .x(d => this.state.xScale(d[0]))
.y(d => yScale(d[1]));
case AreaType.ABOVE:
return d3.area()
.x(d => this.state.xScale(d[0]))
.y0(topChartBorder)
.y1(d => yScale(d[1]));
case AreaType.BELOW:
return d3.area()
.x(d => this.state.xScale(d[0]))
.y0(d => yScale(d[1]))
.y1(bottomChartBorder);
default:
throw new Error(`Unknown type of renderArea: ${renderArea}`);
} }
return yOrientation === yAxisOrientation.LEFT ? this.lineGenerator : this.areaGeneratorY1;
} }
_renderDots(serie: LineTimeSerie): void { _renderDots(serie: LineTimeSerie): void {
@ -101,12 +111,12 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('r', METRIC_CIRCLE_RADIUS) .attr('r', METRIC_CIRCLE_RADIUS)
.style('pointer-events', 'none') .style('pointer-events', 'none')
.attr('cx', d => this.state.xScale(d[0])) .attr('cx', d => this.state.xScale(d[0]))
.attr('cy', d => this.state.yScale(d[1])); .attr('cy', d => this.state.getYScaleByOrientation(serie.yOrientation)(d[1]));
} }
_renderLines(serie: LineTimeSerie): void { _renderLines(serie: LineTimeSerie, generator: Generator): void {
const fillColor = serie.renderArea ? serie.color : 'none'; const fillColor = serie.renderArea !== AreaType.NONE ? serie.color : 'none';
const fillOpacity = serie.renderArea ? 0.5 : 'none'; const fillOpacity = serie.renderArea !== AreaType.NONE ? 0.5 : 'none';
this.metricContainer this.metricContainer
.append('path') .append('path')
@ -119,12 +129,12 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
.attr('stroke-opacity', 0.7) .attr('stroke-opacity', 0.7)
.attr('pointer-events', 'none') .attr('pointer-events', 'none')
.style('stroke-dasharray', serie.dashArray) .style('stroke-dasharray', serie.dashArray)
.attr('d', this.getRenderGenerator(serie.renderArea, serie.yOrientation)); .attr('d', generator);
} }
_renderMetric(serie: LineTimeSerie): void { _renderMetric(serie: LineTimeSerie, generator: Generator): void {
if(serie.renderLines === true) { if(serie.renderLines === true) {
this._renderLines(serie); this._renderLines(serie, generator);
} }
if(serie.renderDots === true) { if(serie.renderDots === true) {
@ -455,12 +465,56 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
); );
} }
} }
protected onContextMenu(): void {
d3.event.preventDefault(); // do not open browser's context menu.
const eventX = d3.mouse(this.chartContainer.node())[0];
const eventY = d3.mouse(this.chartContainer.node())[1];
this.options._options.events.contextMenu({
x: this.state.xScale.invert(eventX),
y: this.state.yScale.invert(eventY),
});
}
// override parent updateData method to provide markers and segments
protected updateLineData(
series?: LineTimeSerie[],
options?: LineOptions,
markersConf?: MarkersConf,
segments?: SegmentSerie[],
shouldRerender = true
): void {
this.updateMarkers(markersConf);
this.updateSegments(segments);
this.updateData(series, options, shouldRerender);
}
} }
// TODO: it should be moved to VUE folder // TODO: it should be moved to VUE folder
// it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod) // it is used with Vue.component, e.g.: Vue.component('chartwerk-line-pod', VueChartwerkLinePod)
export const VueChartwerkLinePod = { export const VueChartwerkLinePod = {
// alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'` // alternative to `template: '<div class="chartwerk-line-pod" :id="id" />'`
props: {
markersConf: {
type: Object,
required: false,
default: function() { return {}; }
},
segments: {
type: Array,
required: false,
default: function() { return []; }
},
},
watch: {
markersConf() {
this.renderChart();
},
segments() {
this.renderChart();
},
},
render(createElement) { render(createElement) {
return createElement( return createElement(
'div', 'div',
@ -474,10 +528,10 @@ export const VueChartwerkLinePod = {
methods: { methods: {
render() { render() {
if(this.pod === undefined) { if(this.pod === undefined) {
this.pod = new LinePod(document.getElementById(this.id), this.series, this.options); this.pod = new LinePod(document.getElementById(this.id), this.series, this.options, this.markersConf, this.segments);
this.pod.render(); this.pod.render();
} else { } else {
this.pod.updateData(this.series, this.options); this.pod.updateLineData(this.series, this.options, this.markersConf, this.segments);
} }
}, },
renderSharedCrosshair(values) { renderSharedCrosshair(values) {
@ -489,4 +543,4 @@ export const VueChartwerkLinePod = {
} }
}; };
export { LineTimeSerie, LineOptions, TimeFormat, LinePod }; export { LineTimeSerie, LineOptions, TimeFormat, LinePod, AreaType, MarkersConf, SegmentSerie };

4
src/models/line_series.ts
Unescape View File

@ -1,5 +1,5 @@
import { CoreSeries, yAxisOrientation } from '@chartwerk/core'; import { CoreSeries, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie } from '../types'; import { LineTimeSerie, AreaType } from '../types';
import * as _ from 'lodash'; import * as _ from 'lodash';
@ -10,7 +10,7 @@ const LINE_SERIE_DEFAULTS = {
renderLines: true, renderLines: true,
dashArray: '0', dashArray: '0',
class: '', class: '',
renderArea: false, renderArea: AreaType.NONE,
yOrientation: yAxisOrientation.LEFT, yOrientation: yAxisOrientation.LEFT,
}; };

12
src/models/marker.ts
Unescape View File

@ -1,9 +1,13 @@
export type MarkerElem = [number, any?]; export type MarkerElem = {
x: number;
color: string;
html?: string;
alwaysDisplay?: boolean;
payload?: any;
}
export type MarkerSerie = { export type MarkerSerie = {
color: string; data: MarkerElem[];
// TODO: make one-dimensional array with only x
data: MarkerElem[] // [x, payload] payload is any data for tooltip
} }
export type MarkersConf = { export type MarkersConf = {

22
src/types.ts
Unescape View File

@ -2,12 +2,18 @@ import { Serie, Options } from '@chartwerk/core';
import { AxisRange } from '@chartwerk/core/dist/types'; import { AxisRange } from '@chartwerk/core/dist/types';
type LineTimeSerieParams = { type LineTimeSerieParams = {
maxLength: number, maxLength: number;
renderDots: boolean, renderDots: boolean;
renderLines: boolean, // TODO: refactor same as scatter-pod renderLines: boolean; // TODO: refactor same as scatter-pod
dashArray: string; // dasharray attr, only for lines dashArray: string; // dasharray attr, only for lines
class: string; // option to add custom class to each serie element class: string; // option to add custom class to each serie element
renderArea: boolean; // TODO: move to render type renderArea: AreaType; // default is none
}
export enum AreaType {
NONE = 'None',
ABOVE = 'Above',
BELOW = 'Below',
} }
export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>; export type LineTimeSerie = Serie & Partial<LineTimeSerieParams>;
@ -16,8 +22,12 @@ export type LineOptions = Options & {
zoomOut?: (centers: { zoomOut?: (centers: {
x: number; x: number;
y: number; y: number;
}, range: AxisRange[]) => void, }, range: AxisRange[]) => void;
mouseMove?: (evt: MouseObj) => void mouseMove?: (evt: MouseObj) => void;
contextMenu?: (position: {
x: number;
y: number;
}) => void;
} }
} }

10
yarn.lock
Unescape View File

@ -5,13 +5,13 @@ __metadata:
version: 6 version: 6
cacheKey: 8 cacheKey: 8
"@chartwerk/core@npm:^0.6.23": "@chartwerk/core@npm:^0.6.26":
version: 0.6.23 version: 0.6.26
resolution: "@chartwerk/core@npm:0.6.23" resolution: "@chartwerk/core@npm:0.6.26"
dependencies: dependencies:
d3: ^5.16.0 d3: ^5.16.0
lodash: ^4.17.21 lodash: ^4.17.21
checksum: 629b0438e8cea02914e12956069d318caa98e6b3e2dd2514aab267474fa87e0aa92c190c4ca0fe95ca8091f83be1e1897801f5632c3f11d9cb3be39fa89cca84 checksum: d77ef83701dc13cf2b7fb36dc96448060b6301928bcc0730a7150930f83c51f295e176bcda4e1b8cb8f56d15fef5696edfe6f4e1033adbb5ef5d3487a02c3390
languageName: node languageName: node
linkType: hard linkType: hard
@ -19,7 +19,7 @@ __metadata:
version: 0.0.0-use.local version: 0.0.0-use.local
resolution: "@chartwerk/line-pod@workspace:." resolution: "@chartwerk/line-pod@workspace:."
dependencies: dependencies:
"@chartwerk/core": ^0.6.23 "@chartwerk/core": ^0.6.26
copy-webpack-plugin: ^11.0.0 copy-webpack-plugin: ^11.0.0
css-loader: ^6.8.1 css-loader: ^6.8.1
style-loader: ^3.3.3 style-loader: ^3.3.3

Write Preview
Loading…
Cancel
Save