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

Merge pull request 'markers-feature-#18' (#23) from markers-feature-#18 into main 

Reviewed-on: #23
pull/27/head
rozetko 12 months ago
parent
c451df6e3b bf679019fc
commit
af9aaf6d82
5 changed files with 105 additions and 3 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. 39
      examples/markers.html
  2. 51
      src/components/markers.ts
  3. 13
      src/index.ts
  4. 1
      src/models/line_series.ts
  5. 4
      src/models/marker.ts

39
examples/markers.html
Unescape View File

@ -0,0 +1,39 @@
<!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: 100%; height: 500px;"></div>
<script type="text/javascript">
const startTime = 1701790172908;
const timeSerieData = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
.map((el, idx) => [startTime + idx * 1000, el]);
const markersData1 = [3, 6, 9].map(el => startTime + el * 1000);
const markersData2 = [4, 11].map(el => startTime + el * 1000);
let options = {
renderLegend: false,
axis: {
y: { range: [0, 10] },
x: { format: 'time' }
},
}
var pod = new LinePod(
document.getElementById('chart'),
[
{ datapoints: timeSerieData, color: 'black' },
],
options,
[
{ data: markersData1, color: 'red' },
{ data: markersData2, color: 'blue' },
]
);
pod.render();
</script>
</body>
</html>

51
src/components/markers.ts
Unescape View File

@ -0,0 +1,51 @@
import { MarkerSerie } from "../models/marker";
import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types";
import d3 from "d3";
export class Markers {
// TODO: more sentic name
private _d3Holder = null;
constructor(private _markers: MarkerSerie[], private _state: PodState<LineTimeSerie, LineOptions>) {
}
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
if(this._d3Holder !== null) {
this._d3Holder.remove();
}
this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
for (const ms of this._markers) {
this.renderMarkerSerie(ms);
}
}
protected renderMarkerSerie(serie: MarkerSerie) {
serie.data.forEach((d) => {
let linePosition = this._state.xScale(d) as number;
this._d3Holder.append('line')
.attr('class', 'gap-line')
.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');
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)
.attr('pointer-events', 'none') // TODO: make all on implementation of Events
.style('cursor', 'pointer')
});
}
}

13
src/index.ts
Unescape View File

@ -1,5 +1,6 @@
import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core'; import { ChartwerkPod, VueChartwerkPodMixin, TimeFormat, CrosshairOrientation, BrushOrientation, yAxisOrientation } from '@chartwerk/core';
import { LineTimeSerie, LineOptions } from './types'; import { LineTimeSerie, LineOptions } from './types';
import { Markers } from './components/markers';
import { LineSeries } from './models/line_series'; import { LineSeries } from './models/line_series';
@ -17,12 +18,17 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
lineGeneratorY1 = null; lineGeneratorY1 = null;
areaGeneratorY1 = null; areaGeneratorY1 = null;
constructor(_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {}) { private _markersLayer: Markers = null;
constructor(
_el: HTMLElement, _series: LineTimeSerie[] = [], _options: LineOptions = {},
private _markerSeries = []
) {
super(_el, _series, _options); super(_el, _series, _options);
this.series = new LineSeries(_series); this.series = new LineSeries(_series);
} }
renderMetrics(): void { override renderMetrics(): void {
this.clearAllMetrics(); this.clearAllMetrics();
this.updateCrosshair(); this.updateCrosshair();
@ -36,6 +42,8 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
for(const serie of this.series.visibleSeries) { for(const serie of this.series.visibleSeries) {
this._renderMetric(serie); this._renderMetric(serie);
} }
this._markersLayer = new Markers(this._markerSeries, this.state);
this._markersLayer.render(this.metricContainer);
} }
clearAllMetrics(): void { clearAllMetrics(): void {
@ -387,6 +395,7 @@ export class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
} }
// 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" />'`

1
src/models/line_series.ts
Unescape View File

@ -15,7 +15,6 @@ const LINE_SERIE_DEFAULTS = {
}; };
export class LineSeries extends CoreSeries<LineTimeSerie> { export class LineSeries extends CoreSeries<LineTimeSerie> {
constructor(series: LineTimeSerie[]) { constructor(series: LineTimeSerie[]) {
super(series, _.clone(LINE_SERIE_DEFAULTS)); super(series, _.clone(LINE_SERIE_DEFAULTS));
} }

4
src/models/marker.ts
Unescape View File

@ -0,0 +1,4 @@
export type MarkerSerie = {
color: string;
data: [number, number, any][] // [x, y, payload] payload is any data for tooltip
}
Write Preview
Loading…
Cancel
Save