problems timeline: calculate elements size from base height

src/panel-triggers/components/ProblemTimeline.tsx

@@ -4,13 +4,18 @@ import { GFTimeRange, ZBXEvent } from 'panel-triggers/types';
 
 const DEFAULT_OK_COLOR = 'rgb(56, 189, 113)';
 const DEFAULT_PROBLEM_COLOR = 'rgb(215, 0, 0)';
-const EVENT_ITEM_SIZE = 16;
+const EVENT_POINT_SIZE = 20;
+const INNER_POINT_SIZE = 0.6;
+const HIGHLIGHTED_POINT_SIZE = 1.2;
+const EVENT_REGION_HEIGHT = Math.round(EVENT_POINT_SIZE * 0.6);
 
 export interface ProblemTimelineProps {
   events: ZBXEvent[];
   timeRange: GFTimeRange;
   okColor?: string;
   problemColor?: string;
+  eventRegionHeight?: number;
+  eventPointSize?: number;
 }
 
 interface ProblemTimelineState {
@@ -25,6 +30,8 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
   static defaultProps = {
     okColor: DEFAULT_OK_COLOR,
     problemColor: DEFAULT_PROBLEM_COLOR,
+    eventRegionHeight: EVENT_REGION_HEIGHT,
+    eventPointSize: EVENT_POINT_SIZE,
   };
 
   constructor(props) {
@@ -62,16 +69,22 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
       return <div className="event-timeline" ref={this.setRootRef} />;
     }
 
-    const { events, timeRange, problemColor, okColor } = this.props;
-    const width = this.state.width;
+    const { events, timeRange, eventPointSize, eventRegionHeight, problemColor, okColor } = this.props;
+    const boxWidth = this.state.width;
+    const boxHeight = eventPointSize * 2;
+    const width = boxWidth - eventPointSize;
+    const padding = Math.round(eventPointSize / 2);
+    const pointsYpos = Math.round(eventRegionHeight / 2);
+    const timelineYpos = Math.round(boxHeight / 2);
 
     return (
       <div className="event-timeline" ref={this.setRootRef}>
         <TimelineInfoContainer className="timeline-info-container"
           event={this.state.highlightedEvent}
           show={this.state.showEventInfo}
+          left={padding}
       />
-        <svg className="event-timeline-canvas" viewBox={`0 0 ${width} 40`}>
+        <svg className="event-timeline-canvas" viewBox={`0 0 ${boxWidth} ${boxHeight}`}>
           <defs>
             <filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
               <feGaussianBlur in="SourceAlpha" stdDeviation="2" />
@@ -103,21 +116,23 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
               <feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blurOut" />
             </filter>
           </defs>
-          <g className="event-timeline-group">
+          <g className="event-timeline-group" transform={`translate(${padding}, ${timelineYpos})`}>
             <g className="event-timeline-regions" filter="url(#boxShadow)">
               <TimelineRegions
                 events={events}
                 timeRange={timeRange}
                 width={width}
+                height={eventRegionHeight}
                 okColor={okColor}
                 problemColor={problemColor}
               />
             </g>
-            <g className="timeline-points" transform={`translate(0, 6)`}>
+            <g className="timeline-points" transform={`translate(0, ${pointsYpos})`}>
               <TimelinePoints
                 events={events}
                 timeRange={timeRange}
                 width={width}
+                pointSize={eventPointSize}
                 okColor={okColor}
                 problemColor={problemColor}
                 onPointHighlight={this.showEventInfo}
@@ -134,12 +149,19 @@ export default class ProblemTimeline extends PureComponent<ProblemTimelineProps,
 interface TimelineInfoContainerProps {
   event?: ZBXEvent | null;
   show?: boolean;
+  left?: number;
   className?: string;
 }
 
 class TimelineInfoContainer extends PureComponent<TimelineInfoContainerProps> {
+  static defaultProps = {
+    left: 0,
+    className: '',
+    show: false,
+  };
+
   render() {
-    const { show, className } = this.props;
+    const { show, className, left } = this.props;
     const event = this.props.event;
     let infoItems;
     if (event) {
@@ -152,6 +174,7 @@ class TimelineInfoContainer extends PureComponent<TimelineInfoContainerProps> {
     }
     const containerStyle: React.CSSProperties = {
       opacity: show ? 1 : 0,
+      left,
     };
     return (
       <div className={className} style={containerStyle}>
@@ -165,26 +188,28 @@ interface TimelineRegionsProps {
   events: ZBXEvent[];
   timeRange: GFTimeRange;
   width: number;
+  height: number;
   okColor: string;
   problemColor: string;
 }
 
 class TimelineRegions extends PureComponent<TimelineRegionsProps> {
   render() {
-    const { events, timeRange, width, okColor, problemColor } = this.props;
+    const { events, timeRange, width, height, okColor, problemColor } = this.props;
     const { timeFrom, timeTo } = timeRange;
     const range = timeTo - timeFrom;
 
-    let firstItem;
+    let firstItem: React.ReactNode;
     if (events.length) {
       const firstTs = events.length ? Number(events[0].clock) : timeTo;
       const duration = (firstTs - timeFrom) / range;
+      const regionWidth = Math.round(duration * width);
       const firstEventColor = events[0].value !== '1' ? problemColor : okColor;
       const firstEventAttributes = {
         x: 0,
         y: 0,
-        width: duration * width,
-        height: 12,
+        width: regionWidth,
+        height: height,
         fill: firstEventColor,
       };
       firstItem = (
@@ -196,13 +221,14 @@ class TimelineRegions extends PureComponent<TimelineRegionsProps> {
       const ts = Number(event.clock);
       const nextTs = index < events.length - 1 ? Number(events[index + 1].clock) : timeTo;
       const duration = (nextTs - ts) / range;
-      const posLeft = (ts - timeFrom) / range * width;
+      const regionWidth = Math.round(duration * width);
+      const posLeft = Math.round((ts - timeFrom) / range * width);
       const eventColor = event.value === '1' ? problemColor : okColor;
       const attributes = {
         x: posLeft,
         y: 0,
-        width: duration * width,
-        height: 12,
+        width: regionWidth,
+        height: height,
         fill: eventColor,
       };
 
@@ -222,6 +248,7 @@ interface TimelinePointsProps {
   events: ZBXEvent[];
   timeRange: GFTimeRange;
   width: number;
+  pointSize: number;
   okColor: string;
   problemColor: string;
   onPointHighlight?: (event: ZBXEvent) => void;
@@ -264,12 +291,13 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
   }
 
   render() {
-    const { events, timeRange, width, okColor, problemColor } = this.props;
+    const { events, timeRange, width, pointSize, okColor, problemColor } = this.props;
     const { timeFrom, timeTo } = timeRange;
     const range = timeTo - timeFrom;
+    const pointR = pointSize / 2;
     const eventsItems = events.map((event, index) => {
       const ts = Number(event.clock);
-      const posLeft = (ts - timeFrom) / range * width - EVENT_ITEM_SIZE / 2;
+      const posLeft = Math.round((ts - timeFrom) / range * width - pointR);
       const eventColor = event.value === '1' ? problemColor : okColor;
 
       return (
@@ -277,7 +305,7 @@ class TimelinePoints extends PureComponent<TimelinePointsProps, TimelinePointsSt
           key={event.eventid}
           className="problem-event-item"
           x={posLeft}
-          r={10}
+          r={pointR}
           color={eventColor}
           onPointHighlight={this.highlightPoint(index)}
           onPointUnHighlight={this.unHighlightPoint(index)}
@@ -326,9 +354,9 @@ class TimelinePoint extends PureComponent<TimelinePointProps, TimelinePointState
 
   render() {
     const { x, color, className } = this.props;
-    const r = this.state.highlighted ? this.props.r * 1.2 : this.props.r;
+    const r = this.state.highlighted ? Math.round(this.props.r * HIGHLIGHTED_POINT_SIZE) : this.props.r;
     const cx = x + this.props.r;
-    const rInner = Math.floor(r * 0.6);
+    const rInner = Math.round(r * INNER_POINT_SIZE);
     return (
       <g className={className}
         transform={`translate(${cx}, 0)`}

src/sass/_panel-problems.scss

@@ -357,14 +357,14 @@
           }
         }
 
-        svg.event-timeline-canvas {
-          // height: 40px;
+        // svg.event-timeline-canvas {
+        //   // height: 40px;
 
-          g.event-timeline-group {
-            // height: 40px;
-            transform: translate(0px, 14px);
-          }
-        }
+        //   g.event-timeline-group {
+        //     // height: 40px;
+        //     // transform: translate(0px, 14px);
+        //   }
+        // }
 
         .problem-event-region {
           // transition: all 0.2s ease-out;