From 04a01b75a148600df8f8483f0742333b60bb2378 Mon Sep 17 00:00:00 2001 From: glitch4347 Date: Fri, 17 May 2024 12:56:42 +0200 Subject: [PATCH] opacity param --- examples/segments.html | 5 +--- examples/segments_select.html | 46 +++++++++++++++++++++++++++++++++++ src/components/segments.ts | 12 ++++++--- src/models/segment.ts | 2 ++ 4 files changed, 57 insertions(+), 8 deletions(-) create mode 100644 examples/segments_select.html diff --git a/examples/segments.html b/examples/segments.html index cf10640..8938eba 100644 --- a/examples/segments.html +++ b/examples/segments.html @@ -31,10 +31,7 @@ [ { data: segmentsData, - color:'#FFE545', - select: true, - onSelect: console.log, - onUnselect: console.log + color:'#FFE545' } ] ); diff --git a/examples/segments_select.html b/examples/segments_select.html new file mode 100644 index 0000000..774704c --- /dev/null +++ b/examples/segments_select.html @@ -0,0 +1,46 @@ + + + + + + + + + +
+ + + + diff --git a/src/components/segments.ts b/src/components/segments.ts index ef76ca1..e8c5298 100644 --- a/src/components/segments.ts +++ b/src/components/segments.ts @@ -4,6 +4,9 @@ import { LineTimeSerie, LineOptions } from "../types"; import * as d3 from "d3"; +const OPACITY = 0.3; +const OPACITY_SELECT = 0.3; + export class Segments { // TODO: more semantic name private _d3Holder = null; @@ -34,7 +37,8 @@ export class Segments { // @ts-ignore const endPositionX = this._state.xScale(d[1]) as number; 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') .attr('class', 'segment') .attr('x', startPositionX) @@ -42,11 +46,11 @@ export class Segments { .attr('width', width) // @ts-ignore // TODO: remove ignore but boxParams are protected .attr('height', this._state.boxParams.height) - .attr('opacity', 0.3) + .attr('opacity', opacity) .style('fill', serie.color) .on('mouseover', function() { if(serie.select === true) { - d3.select(this).attr('opacity', 0.5); + d3.select(this).attr('opacity', opacitySelect); if(serie.onSelect) { serie.onSelect(d); } @@ -54,7 +58,7 @@ export class Segments { }) .on('mouseout', function(e) { if(serie.select === true) { - d3.select(this).attr('opacity', 0.3); + d3.select(this).attr('opacity', opacity); if(serie.onUnselect) { serie.onUnselect(d); } diff --git a/src/models/segment.ts b/src/models/segment.ts index 1a0e086..12557a1 100644 --- a/src/models/segment.ts +++ b/src/models/segment.ts @@ -4,6 +4,8 @@ export type SegmentSerie = { color: string; data: SegmentElement[] // [from, to, payload?] payload is any data for tooltip, select?: boolean, + opacity?: number, + opacitySelect?: number, onSelect?: (SegmentElement) => void onUnselect?: (SegmentElement) => void } \ No newline at end of file