chartwerk
/
line-pod
4
0
Fork 0
Code Issues 33 Pull Requests 2 Projects Releases 1 Wiki Activity
Labels Milestones
New Pull Request

segment select #63

Merged
rozetko merged 2 commits from segment-select into main 6 months ago
Conversation 0 Commits 2 Files Changed 5
5 changed files with 99 additions and 15 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. 9
      examples/segments.html
  2. 46
      examples/segments_select.html
  3. 48
      src/components/segments.ts
  4. 2
      src/index.ts
  5. 9
      src/models/segment.ts

9
examples/segments.html
Unescape View File

@ -13,7 +13,7 @@
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]);
const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1000]); const segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1100]);
let options = { let options = {
renderLegend: false, renderLegend: false,
axis: { axis: {
@ -27,9 +27,12 @@
{ datapoints: timeSerieData, color: 'black' }, { datapoints: timeSerieData, color: 'black' },
], ],
options, options,
[], undefined,
[ [
{ data: segmentsData, color:'#FFE545' } {
data: segmentsData,
color:'#FFE545'
}
] ]
); );
pod.render(); pod.render();

46
examples/segments_select.html
Unescape View File

@ -0,0 +1,46 @@
<!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 segmentsData = [3, 6, 9].map(el => [startTime + el * 1000, startTime + (el + 1) * 1100]);
let options = {
renderLegend: false,
axis: {
y: { range: [0, 10] },
x: { format: 'time' }
},
}
var pod = new LinePod(
document.getElementById('chart'),
[
{ datapoints: timeSerieData, color: 'black' },
],
options,
undefined,
[
{
data: segmentsData,
color:'#FFE545',
select: true,
opacity: 0.4,
opacitySelect: 0.8,
onSelect: console.log,
onUnselect: console.log
}
]
);
pod.render();
</script>
</body>
</html>

48
src/components/segments.ts
Unescape View File

@ -1,34 +1,44 @@
import { SegmentSerie } from "../models/segment"; import { SegmentSerie, SegmentElement } from "../models/segment";
import { PodState } from "@chartwerk/core"; import { PodState } from "@chartwerk/core";
import { LineTimeSerie, LineOptions } from "../types"; import { LineTimeSerie, LineOptions } from "../types";
import d3 from "d3"; import * as d3 from "d3";
const OPACITY = 0.3;
const OPACITY_SELECT = 0.3;
export class Segments { export class Segments {
// TODO: more semantic name // TODO: more semantic name
private _d3Holder = null; private _d3Holder = null;
private _metricCon = null;
constructor(private _series: SegmentSerie[], private _state: PodState<LineTimeSerie, LineOptions>) { constructor(
private _series: SegmentSerie[],
private _state: PodState<LineTimeSerie, LineOptions>
) {
} }
render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>) { render(metricContainer: d3.Selection<SVGGElement, unknown, null, undefined>, chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>) {
if(this._d3Holder !== null) { if(this._d3Holder !== null) {
this._d3Holder.remove(); this._d3Holder.remove();
} }
this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer'); this._d3Holder = metricContainer.append('g').attr('class', 'markers-layer');
for (const s of this._series) { for (const s of this._series) {
this.renderSerie(s); this.renderSerie(chartContainer, s);
} }
} }
protected renderSerie(serie: SegmentSerie) { protected renderSerie(chartContainer: d3.Selection<SVGGElement, unknown, null, undefined>, serie: SegmentSerie) {
// TODO: it's hack with core, need to find a better way
const overlay = chartContainer.select('.overlay');
serie.data.forEach((d) => { serie.data.forEach((d) => {
// @ts-ignore // @ts-ignore
const startPositionX = this._state.xScale(d[0]) as number; const startPositionX = this._state.xScale(d[0]) as number;
// @ts-ignore // @ts-ignore
const endPositionX = this._state.xScale(d[1]) as number; const endPositionX = this._state.xScale(d[1]) as number;
const width = endPositionX - startPositionX // Math.max(endPositionX - startPositionX, MIMIMUM_SEGMENT_WIDTH); const width = endPositionX - startPositionX // Math.max(endPositionX - startPositionX, MIMIMUM_SEGMENT_WIDTH);
const opacity = serie.opacity || OPACITY;
const opacitySelect = serie.opacitySelect || OPACITY_SELECT;
this._d3Holder.append('rect') this._d3Holder.append('rect')
.attr('class', 'segment') .attr('class', 'segment')
.attr('x', startPositionX) .attr('x', startPositionX)
@ -36,10 +46,28 @@ export class Segments {
.attr('width', width) .attr('width', width)
// @ts-ignore // TODO: remove ignore but boxParams are protected // @ts-ignore // TODO: remove ignore but boxParams are protected
.attr('height', this._state.boxParams.height) .attr('height', this._state.boxParams.height)
.attr('opacity', 0.3) .attr('opacity', opacity)
.style('fill', serie.color) .style('fill', serie.color)
.style('pointer-events', 'none'); .on('mouseover', function() {
if(serie.select === true) {
d3.select(this).attr('opacity', opacitySelect);
if(serie.onSelect) {
serie.onSelect(d);
}
}
})
.on('mouseout', function(e) {
if(serie.select === true) {
d3.select(this).attr('opacity', opacity);
if(serie.onUnselect) {
serie.onUnselect(d);
}
}
})
.on('mousemove', function(e) {
var event = new MouseEvent('mousemove', d3.event);
overlay.node().dispatchEvent(event)
})
}); });
} }
} }

2
src/index.ts
Unescape View File

@ -56,7 +56,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
} }
this._segmentsLayer = new Segments(this._segmentSeries, this.state); this._segmentsLayer = new Segments(this._segmentSeries, this.state);
this._segmentsLayer.render(this.metricContainer); this._segmentsLayer.render(this.metricContainer, this.chartContainer);
} }
clearAllMetrics(): void { clearAllMetrics(): void {

9
src/models/segment.ts
Unescape View File

@ -1,4 +1,11 @@
export type SegmentElement = [number, number, any?];
export type SegmentSerie = { export type SegmentSerie = {
color: string; color: string;
data: [number, number, any?][] // [from, to, payload?] payload is any data for tooltip data: SegmentElement[] // [from, to, payload?] payload is any data for tooltip,
select?: boolean,
opacity?: number,
opacitySelect?: number,
onSelect?: (SegmentElement) => void
onUnselect?: (SegmentElement) => void
} }
Write Preview
Loading…
Cancel
Save