Browse Source

markers begin

pull/23/head
glitch4347 1 year ago
parent
commit
1d1a34f9bf
  1. 14
      examples/markers.html
  2. 72
      src/components/markers.ts
  3. 13
      src/index.ts
  4. 9
      src/models/marker.ts

14
examples/markers.html

@ -11,8 +11,9 @@
<script type="text/javascript">
const startTime = 1701790172908;
const data = [5, 6, 3, 7, 5, 6, 8, 4, 5, 6, 4, 3, 5, 7, 8]
.map((el, idx) => [startTime + idx * 100, el]);
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 markersData = [3, 6, 8].map(el => startTime + el * 1000);
let options = {
renderLegend: false,
@ -24,11 +25,14 @@
var pod = new LinePod(
document.getElementById('chart'),
[
{ datapoints: data, color: 'black' },
{ datapoints: timeSerieData, color: 'black' },
],
options
options,
[
{ data: markersData, color: 'red' },
]
);
pod.render();
pod.render();
</script>
</body>
</html>

72
src/components/markers.ts

@ -0,0 +1,72 @@
import { Marker } from "../models/marker";
import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types";
import d3 from "d3";
export class Markers {
private _markers: Marker[] = [];
private _d3Holder = null;
constructor() {
}
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, state: PodState<LineTimeSerie, LineOptions>) {
if(this._d3Holder !== null) {
this._d3Holder.remove();
}
this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
let linePosition = state.xScale(1701790172908 + 3 * 1000) as number;
this._d3Holder.append('line')
.attr('class', 'gap-line')
.attr('stroke', 'red')
.attr('stroke-width', '1px')
.attr('stroke-opacity', '0.3')
.attr('stroke-dasharray', '4')
.attr('x1', linePosition)
.attr('x2', linePosition)
.attr('y1', 0)
// @ts-ignore
.attr('y2', state.boxParams.height);
// for (const marker of markers) {
// // @ts-ignore
// const linePosition = pod.state.xScale(marker.time) as number;
// yAxisContainer.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
// .attr('y2', pod.state.boxParams.height);
this._d3Holder.append('circle')
.attr('class', 'gap-circle')
.attr('stroke', 'red')
.attr('stroke-width', '2px')
.attr('r', 4)
.attr('cx', linePosition)
.attr('cy', 5)
.attr('pointer-events', 'all')
.style('cursor', 'pointer')
// .on('mousemove', () => {
// setTooltipContent({ type: TooltipType.FUNCTION, ...marker.data });
// return null;
// })
// .on('mouseout', () => {
// setTooltipContent({ type: TooltipType.HIDDEN });
// return null;
// });
// }
}
pushMarker(marker: Marker) {
this._markers.push(marker);
}
}

13
src/index.ts

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

9
src/models/marker.ts

@ -0,0 +1,9 @@
export type Marker = {
time: number; // unixTime ms
color: string;
data: {
startTime: string,
endTime: string,
name: string,
}
}
Loading…
Cancel
Save