@spider-analyzer/timeline 4.0.3 → 5.0.1

package/src/TimeLineResizer.jsx

@@ -1,16 +1,11 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
-import { makeStyles } from '@material-ui/styles';
 
 import TimeLine from './TimeLine';
+import './timeline.css';
 
 const defaultWidth = 900;
 const defaultHeight = 100;
 
-const useStyles = makeStyles((theme) => ({
-    timelineContainer: {
-        width: '100%', height: '100%'
-    }
-}));
 
 function TimeLineResizer(props){
 
@@ -37,12 +32,11 @@ function TimeLineResizer(props){
         }
     }, [container.current]);
 
-    const classes = useStyles();
 
     return  (
         <div
             ref={container}
-            className={classes.timelineContainer}
+            className="tl-root tl-timelineContainer"
         >
             <TimeLine
                 ref={props.forwardedRef}

package/src/ToolTip.jsx

@@ -5,10 +5,14 @@ import PropTypes from 'prop-types';
 import './tipDark.css';
 import theme from './theme';
 
-export default function ToolTip({overlay, placement, mouseEnterDelay, prefixCls, align, visible, hidden, children}){
+export default function ToolTip({overlay, placement = 'top', mouseEnterDelay = 0.5, prefixCls, align, visible, hidden, children}){
+    // rc-tooltip v6 keeps `visible` as the controlled prop; pass it only
+    // when explicitly controlled so uncontrolled hover behavior still works
+    // (an explicit `visible={false}` would otherwise pin the tooltip shut
+    // and block the mouseEnterDelay-based reveal).
     const extraProps = {};
-    if(visible) extraProps.visible = true;
-    if(hidden) extraProps.visible = false;
+    if (visible) extraProps.visible = true;
+    if (hidden) extraProps.visible = false;
 
     return (
         <ToolTipBase
@@ -31,7 +35,3 @@ ToolTip.propTypes = {
     mouseEnterDelay: PropTypes.number,
 }
 
-ToolTip.defaultProps = {
-    placement: 'top',
-    mouseEnterDelay: 0.5,
-}

package/src/cursorElements/CursorIcon.jsx

@@ -1,37 +1,14 @@
 import React, {useState} from 'react';
 import ToolTip from '../ToolTip';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 
-import theme from '../theme';
 import clsx from 'clsx';
 
-const useStyles = makeStyles({
-    cursorIconRect: {
-        fill: '#00bcd4',
-        fillOpacity: 0.25,
-        stroke: '#00bcd4',
-        strokeWidth: 0.42,
-    },
-    cursorIconCircle:{
-        fill: '#ffffff',
-        stroke: '#00bcd4',
-        strokeWidth: 0.52,
-    },
-    cursorIconRectOver: {
-        fill: theme.colors.itemFillSelected,
-        stroke: theme.colors.itemStrokeSelected,
-    },
-    cursorIconCircleOver:{
-        stroke: theme.colors.itemStrokeSelected,
-    }
-});
 
 export default function CursorIcon({    classes, rcToolTipPrefixCls, origin,
                                         position, gotoCursorLabel, onGotoCursor
               }){
     
-    const defaultClasses = useStyles();
     const [isOver, setIsOver] = useState(false);
 
     return (
@@ -48,9 +25,9 @@ export default function CursorIcon({    classes, rcToolTipPrefixCls, origin,
             >
                 <rect
                     className={clsx(
-                        defaultClasses.cursorIconRect,
+                        "tl-cursorIconRect",
                         classes.cursorIconRect,
-                        isOver && defaultClasses.cursorIconRectOver,
+                        isOver && "tl-cursorIconRectOver",
                         isOver && classes.cursorIconRectOver,
                     )}
                     width="5.5"
@@ -59,9 +36,9 @@ export default function CursorIcon({    classes, rcToolTipPrefixCls, origin,
                     y="4.76" />
                 <circle
                     className={clsx(
-                        defaultClasses.cursorIconCircle,
+                        "tl-cursorIconCircle",
                         classes.cursorIconCircle,
-                        isOver && defaultClasses.cursorIconCircleOver,
+                        isOver && "tl-cursorIconCircleOver",
                         isOver && classes.cursorIconCircleOver,
                     )}
                     cx="9.63"
@@ -69,9 +46,9 @@ export default function CursorIcon({    classes, rcToolTipPrefixCls, origin,
                     r="1.4" />
                 <circle
                     className={clsx(
-                        defaultClasses.cursorIconCircle,
+                        "tl-cursorIconCircle",
                         classes.cursorIconCircle,
-                        isOver && defaultClasses.cursorIconCircleOver,
+                        isOver && "tl-cursorIconCircleOver",
                         isOver && classes.cursorIconCircleOver,
                     )}
                     cx="15"

package/src/cursorElements/CursorSelection.jsx

@@ -1,27 +1,13 @@
+import { cn } from "../styles";
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
 
-import theme from '../theme';
 import clsx from 'clsx';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 
-const useStyles = makeStyles({
-    cursorArea: {
-        fill: theme.colors.cursorFill,
-        fillOpacity: 0.2,
-        stroke: ({maxSize}) => maxSize ? theme.colors.maxSizeStroke : theme.colors.cursorStroke,
-        strokeWidth: '1px',
-        strokeLinecap: 'butt',
-        strokeLinejoin: 'miter',
-        strokeOpacity: 1,
-        cursor: 'move',
-        transition: 'fill stroke 0.5s'
-    },
-});
 
 export function CursorSelection({
   classes, cursor,
@@ -34,8 +20,7 @@ export function CursorSelection({
   dragging, barHovered, marginBottom,
   setDragging, setBarHovered, setToolTipVisible,
 }) {
-    const defaultClasses = useStyles({maxSize});
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     const [timer, setTimer] = useState(null);
 
@@ -91,7 +76,7 @@ export function CursorSelection({
     return (
         <rect
             ref={cursor}
-            className={className('cursorArea')}
+            className={clsx(className('cursorArea'), maxSize && 'tl--maxSize')}
             x={0}
             y={-3}
             width={width}

package/src/cursorElements/DragOverlay.jsx

@@ -1,20 +1,11 @@
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
-import moment from 'moment-timezone';
+import moment from '../moment-shim';
 
 import {handleHistoOver, handleHistoOut} from './handleHistoHovering';
 
-const useStyles = makeStyles({
-    dragOverlay: {
-        fill: 'transparent',
-        fillOpacity : 1,
-        stroke: 'none',
-        cursor: 'crosshair',
-    }
-});
 
 function DragOverlay({
     width, height, marginBottom,
@@ -29,7 +20,6 @@ function DragOverlay({
     const dragOverlayContainer = useRef();
     const [timer, setTimer] = useState(null);
 
-    const classes = useStyles();
     const setOverlayCursor = event => {
         if(event.ctrlKey){
             dragOverlayRef.current.style.cursor = 'move';
@@ -95,7 +85,7 @@ function DragOverlay({
         <g ref={dragOverlayContainer}>
             <rect
                 ref={dragOverlayRef}
-                className={classes.dragOverlay}
+                className="tl-dragOverlay"
                 x={0}
                 y={0}
                 width={width}

package/src/cursorElements/LeftHandle.jsx

@@ -1,26 +1,11 @@
+import { cn } from "../styles";
 import React, {useRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
 
-import theme from '../theme';
 import clsx from 'clsx';
 
-const useStyles = makeStyles({
-    cursorLeftHandle: {
-        fillOpacity: 1,
-        strokeWidth: '1px',
-        transition: 'r 0.5s',
-        r: 4,
-        '&:hover':{
-            r: 8
-        },
-        cursor: ({maxSize}) => maxSize ? 'e-resize' : 'ew-resize',
-        fill: ({startIsOutOfView}) => startIsOutOfView ? theme.colors.outsideViewFill : theme.colors.cursorHandleFill,
-        stroke: ({startIsOutOfView}) => startIsOutOfView ? theme.colors.outsideViewStroke : theme.colors.cursorStroke
-    },
-});
 
 export default function LeftHandle({
     classes, maxSize,
@@ -28,8 +13,7 @@ export default function LeftHandle({
     dragOverlay, showToolTipLeft,
     origin, startIsOutOfView, setDragging
 }) {
-    const defaultClasses = useStyles({maxSize, startIsOutOfView});
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     const cursorLeftHandle = useRef();
 
@@ -55,7 +39,7 @@ export default function LeftHandle({
     return (
         <circle
             ref={cursorLeftHandle}
-            className={className('cursorLeftHandle')}
+            className={clsx(className('cursorLeftHandle'), maxSize && 'tl--maxSize', startIsOutOfView && 'tl--outOfView')}
             r='4'
             cx={origin.x}
             cy={origin.y}

package/src/cursorElements/LeftToolTip.jsx

@@ -1,22 +1,17 @@
+import { cn } from "../styles";
 import React, {useRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 
 import clsx from 'clsx';
 import {hide, show, resizeToolTip, resizeToolTipText} from './utils';
-import {toolTipStyles} from './commonStyles';
 
-const useStyles = makeStyles({
-    ...toolTipStyles,
-});
 
 export default function LeftToolTip({
                                        classes, height, origin,
                                        isVisibleTooltipLeft,
                                        startText,
                                    }) {
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     const toolTipLeft = useRef();
 

package/src/cursorElements/RightHandle.jsx

@@ -1,34 +1,18 @@
+import { cn } from "../styles";
 import React, {useRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import {pointer, select} from 'd3-selection';
 import {drag} from 'd3-drag';
 
-import theme from '../theme';
 import clsx from 'clsx';
 
-const useStyles = makeStyles({
-    cursorRightHandle: {
-        fillOpacity: 1,
-        strokeWidth: '1px',
-        transition: 'r 0.5s',
-        r: 4,
-        '&:hover':{
-            r: 8
-        },
-        cursor: ({maxSize}) => maxSize ? 'w-resize' : 'ew-resize',
-        fill: ({endIsOutOfView}) => endIsOutOfView ? theme.colors.outsideViewFill : theme.colors.cursorHandleFill,
-        stroke: ({endIsOutOfView}) => endIsOutOfView ? theme.colors.outsideViewStroke : theme.colors.cursorStroke
-    },
-});
 
 export default function RightHandle({
     classes, maxSize, origin,
     onResizeRightCursor, onEndResizeCursor,
     dragOverlay, showToolTipRight, endIsOutOfView, setDragging
 }) {
-    const defaultClasses = useStyles({maxSize, endIsOutOfView});
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     const cursorRightHandle = useRef();
 
@@ -54,7 +38,7 @@ export default function RightHandle({
     return (
         <circle
             ref={cursorRightHandle}
-            className={className('cursorRightHandle')}
+            className={clsx(className('cursorRightHandle'), maxSize && 'tl--maxSize', endIsOutOfView && 'tl--outOfView')}
             r='4'
             cx={origin.x}
             cy={origin.y}

package/src/cursorElements/RightToolTip.jsx

@@ -1,26 +1,17 @@
+import { cn } from "../styles";
 import React, {useRef, useEffect} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 
 import clsx from 'clsx';
 import {hide, show, resizeToolTip, resizeToolTipText, resizeToolTipRightDelta} from './utils';
-import {toolTipStyles} from './commonStyles';
 
-const useStyles = makeStyles({
-    ...toolTipStyles,
-    toolTipTextRight: {
-        textAlign: 'end',
-        textAnchor: 'end'
-    }
-});
 
 export default function RightToolTip({
                                        classes, origin,
                                        isVisibleTooltipRight,
                                        stopText, height
                                    }) {
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     const toolTipRight = useRef();
 
@@ -52,9 +43,9 @@ export default function RightToolTip({
             </g>
             <text
                 className={clsx(
-                    defaultClasses.toolTipText,
+                    "tl-toolTipText",
                     classes.toolTipText,
-                    defaultClasses.toolTipTextRight,
+                    "tl-toolTipTextRight",
                     classes.toolTipTextRight,
                 )}
                 style={{

package/src/cursorElements/ZoomIn.jsx

@@ -1,40 +1,20 @@
+import { cn } from "../styles";
 import React, {forwardRef} from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import ToolTip from '../ToolTip';
 
-import theme from '../theme';
 import clsx from 'clsx';
 
 const zoomIcon = 'M 15.5 14 h -0.79 l -0.28 -0.27 C 15.41 12.59 16 11.11 16 9.5 C 16 5.91 13.09 3 9.5 3 S 3 5.91 3 9.5 S 5.91 16 9.5 16 c 1.61 0 3.09 -0.59 4.23 -1.57 l 0.27 0.28 v 0.79 l 5 4.99 L 20.49 19 l -4.99 -5 Z m -6 0 C 7.01 14 5 11.99 5 9.5 S 7.01 5 9.5 5 S 14 7.01 14 9.5 S 11.99 14 9.5 14 Z'
 const plusSign = "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z";
 
-const useStyles = makeStyles({
-    zoomIn: {
-        fill: theme.colors.zoomInIcon,
-        fillOpacity : 1,
-        stroke: 'none'
-    },
-    zoomArea: {
-        fill: 'transparent',
-        fillOpacity : 1,
-        stroke: 'none',
-    },
-    zoomInContainer: {
-        opacity: 0,
-        visibility: 'hidden',
-        transition: 'opacity visibility 0.5s',
-        cursor: 'pointer'
-    }
-});
 
 function ZoomIn({
         classes, origin,
         zoomInLabel, onZoomIn, rcToolTipPrefixCls,
         forwardedRef
 }){
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <ToolTip
@@ -42,13 +22,13 @@ function ZoomIn({
             overlay={zoomInLabel}
         >
             <g
-                className={defaultClasses.zoomInContainer}
+                className={"tl-zoomInContainer"}
                 ref={forwardedRef}
                 transform={`translate(${origin.x}, ${origin.y})`}
                 onClick={onZoomIn}
             >
                 <rect
-                    className={defaultClasses.zoomArea}
+                    className={"tl-zoomArea"}
                     x={0}
                     y={0}
                     width={23}
@@ -63,7 +43,7 @@ function ZoomIn({
                     d={plusSign}
                 />
                 <rect
-                    className={defaultClasses.zoomArea}
+                    className={"tl-zoomArea"}
                     x={0}
                     y={0}
                     width={23}

package/src/cursorElements/ZoomOut.jsx

@@ -1,33 +1,16 @@
+import { cn } from "../styles";
 import React from 'react';
 import PropTypes from 'prop-types';
-import {makeStyles} from '@material-ui/styles';
 import ToolTip from '../ToolTip';
 
-import theme from '../theme';
 import clsx from 'clsx';
 
 const zoomOutIcon = 'M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z';
 
-const useStyles = makeStyles({
-    zoomOut: {
-        fill: theme.colors.zoomOutIcon,
-        fillOpacity : 1,
-        stroke: 'none'
-    },
-    zoomArea: {
-        fill: 'transparent',
-        fillOpacity : 1,
-        stroke: 'none',
-    },
-    zoomOutContainer: {
-        cursor: 'pointer'
-    }
-});
 
 export default function ZoomOut({classes, origin, zoomOutLabel, onZoomOut, rcToolTipPrefixCls}){
 
-    const defaultClasses = useStyles();
-    const className = (className) => clsx(defaultClasses[className], classes[className]);
+    const className = (n) => cn(n, classes);
 
     return (
         <ToolTip
@@ -35,12 +18,12 @@ export default function ZoomOut({classes, origin, zoomOutLabel, onZoomOut, rcToo
             overlay={zoomOutLabel}
         >
             <g
-                className={defaultClasses.zoomOutContainer}
+                className={"tl-zoomOutContainer"}
                 transform={`translate(${origin.x}, ${origin.y})`}
                 onClick={onZoomOut}
             >
                 <rect
-                    className={defaultClasses.zoomArea}
+                    className={"tl-zoomArea"}
                     x={0}
                     y={0}
                     width={23}

package/src/cursorElements/utils.js

@@ -1,4 +1,4 @@
-import _clamp from 'lodash-es/clamp';
+import { clamp as _clamp } from '../utils';
 
 export function hide(element) {
     element.style.opacity = 0;

package/src/index.js

@@ -0,0 +1,6 @@
+import TimeLineResizer from './TimeLineResizer';
+import Cursor from './Cursor';
+import TimeLine from './TimeLine';
+
+export { Cursor, TimeLine };
+export default TimeLineResizer;

package/src/index.ts

@@ -0,0 +1,158 @@
+import type { ComponentType, ReactNode, Ref } from 'react';
+
+import TimeLineResizer from './TimeLineResizer';
+import Cursor from './Cursor';
+import TimeLine from './TimeLine';
+
+// --- Public data shapes ------------------------------------------------------
+
+export interface Domain {
+  min: Date;
+  max: Date;
+}
+
+export interface TimeSpan {
+  start: Date;
+  stop: Date;
+}
+
+export interface HistoItem {
+  time: Date;
+  metrics: number[];
+  total: number;
+}
+
+export interface Histo {
+  items: HistoItem[];
+  intervalMs: number | null;
+}
+
+export interface QualityItem {
+  time: Date;
+  quality: number;
+  tip?: ReactNode;
+}
+
+export interface Quality {
+  items: QualityItem[];
+  intervalMin?: number;
+}
+
+export interface MetricsDefinition {
+  count: number;
+  legends: string[];
+  colors: Array<{ fill: string; stroke: string; text: string }>;
+}
+
+export interface TimeLineTools {
+  slideForward?: boolean;
+  slideBackward?: boolean;
+  resetTimeline?: boolean;
+  gotoNow?: boolean;
+  cursor?: boolean;
+  zoomIn?: boolean;
+  zoomOut?: boolean;
+}
+
+export interface AxisConfig {
+  spaceBetweenTicks?: number;
+  barsBetweenTicks?: number;
+  height?: number;
+  showGrid?: boolean;
+}
+
+export interface MarginConfig {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+// --- Imperative handle -------------------------------------------------------
+
+export interface TimeLineHandle {
+  zoomIn(): void;
+  zoomOut(): void;
+  shiftTimeLine(delta: number): void;
+}
+
+// --- Props -------------------------------------------------------------------
+
+export interface TimeLineProps {
+  className?: string;
+  classes?: Record<string, string>;
+  rcToolTipPrefixCls?: string;
+
+  timeSpan: TimeSpan;
+  histo: Histo;
+  quality?: Quality;
+
+  /**
+   * The currently-visible window, controlled by the host.
+   * Pass `null` on first render if you don't have a default yet — the
+   * component will call `onLoadDefaultDomain()` and wait for its result.
+   *
+   * Zoom-out undo is handled internally; the host only needs to observe
+   * `onDomainChange` and re-render with whatever domain it wants.
+   */
+  domain: Domain | null;
+  maxDomain?: Domain;
+
+  metricsDefinition: MetricsDefinition;
+
+  /** IANA time-zone name (e.g. "UTC", "Europe/Paris"). Required. */
+  timeZone?: string;
+
+  zoomOutFactor?: number;
+  /** Maximum visible duration, in milliseconds. */
+  biggestVisibleDomain?: number;
+  /** Maximum selectable duration, in milliseconds. */
+  biggestTimeSpan?: number;
+  /** Smallest zoom step (15 px == this value), in milliseconds. */
+  smallestResolution?: number;
+
+  tools?: TimeLineTools;
+  fetchWhileSliding?: boolean;
+  selectBarOnClick?: boolean;
+  showHistoToolTip?: boolean;
+
+  xAxis?: AxisConfig;
+  yAxis?: AxisConfig;
+  margin?: MarginConfig;
+
+  labels?: Record<string, unknown>;
+
+  /** Called on mount when `domain` is null. Return (sync or Promise) the
+   *  default domain; the component seeds its internal stack from it and
+   *  fires `onDomainChange` once resolved.
+   */
+  onLoadDefaultDomain(): Domain | Promise<Domain> | void;
+  /** Called whenever the component needs histogram data for a window. */
+  onLoadHisto(args: { intervalMs: number; start: Date; end: Date }): void;
+  /** Called when the cursor selection changes (resize, drag, draw, goto). */
+  onTimeSpanChange(span: TimeSpan): void;
+  onShowMessage(message: ReactNode): void;
+  /** Called when the visible domain changes — zoom in/out, pan, or edge shift. */
+  onDomainChange(domain: Domain): void;
+  onResetTime(): void;
+  onFormatTimeToolTips(time: Date): ReactNode;
+  onFormatTimeLegend(time: Date): string;
+  onFormatMetricLegend(value: number): string;
+}
+
+export interface TimeLineResizerProps extends TimeLineProps {
+  // Resizer measures the container and injects `width`/`height` itself.
+}
+
+// --- Exports -----------------------------------------------------------------
+
+// TimeLine and TimeLineResizer accept a ref forwarding to TimeLineHandle.
+type TimeLineComponent = ComponentType<TimeLineProps & { ref?: Ref<TimeLineHandle> }>;
+type TimeLineResizerComponent = ComponentType<TimeLineResizerProps & { ref?: Ref<TimeLineHandle> }>;
+
+const _TimeLine = TimeLine as unknown as TimeLineComponent;
+const _TimeLineResizer = TimeLineResizer as unknown as TimeLineResizerComponent;
+const _Cursor = Cursor as unknown as ComponentType<Record<string, unknown>>;
+
+export { _TimeLine as TimeLine, _Cursor as Cursor };
+export default _TimeLineResizer;