@spider-analyzer/timeline 4.0.3 → 5.0.0

package/dist/timeline-EX2XZ6IP.css

@@ -0,0 +1,139 @@
+/* @spider-analyzer/timeline — default stylesheet.
+ *
+ * Every rule is keyed on a `tl-<slot>` class. Consumers override by
+ * passing `classes={{ <slot>: 'my-class' }}` — the component emits
+ * `tl-<slot> my-class` together, so any CSS in `.my-class` wins via
+ * normal specificity / source order.
+ */
+
+/* Layout */
+.tl-timelineContainer { width: 100%; height: 100%; }
+
+/* Axes / grid */
+.tl-axis { fill: none; stroke: #b4b4b4; stroke-width: 1; }
+.tl-arrow { fill: #b4b4b4; fill-opacity: 1; stroke: #b4b4b4; stroke-width: 1; }
+.tl-now { fill: #545454; stroke: #545454; stroke-width: 1; }
+.tl-grid { stroke: #ececec; stroke-width: 1; }
+.tl-limitMarker { stroke: #b4b4b4; stroke-width: 1; }
+.tl-timeAxisText {
+    font-size: 10px;
+    font-family: Roboto, sans-serif;
+    fill: #b4b4b4;
+    text-align: center;
+    text-anchor: middle;
+    user-select: none;
+}
+.tl-timeAxisDaysText { fill: #545454; }
+.tl-verticalAxisText {
+    font-size: 10px;
+    font-family: Roboto, sans-serif;
+    fill: #b4b4b4;
+    text-align: end;
+    text-anchor: end;
+    user-select: none;
+}
+
+/* Legend */
+.tl-legend {
+    font-size: 12.5px;
+    line-height: 125%;
+    font-family: Roboto, sans-serif;
+    fill-opacity: 1;
+    stroke: none;
+    text-align: end;
+    text-anchor: end;
+    user-select: none;
+}
+
+/* Histogram */
+.tl-histoItem { fill-opacity: 1; stroke-width: 1; }
+.tl-histoHovered { stroke-width: 0; fill: #000000; fill-opacity: 0.3; }
+
+/* Histo tooltip */
+.tl-innerTipMetrics { margin-top: 4px; }
+.tl-innerTipLeft { margin-right: 4px; display: inline-block; }
+.tl-innerTipRight { display: inline-block; float: right; }
+
+/* Quality line */
+.tl-qualityCell { stroke-width: 0; }
+
+/* Buttons */
+.tl-buttonGroup { cursor: pointer; }
+.tl-buttonGroupInactive { cursor: not-allowed; }
+.tl-buttonOverShape { fill: transparent; }
+.tl-buttonIcon {
+    fill: #b4b4b4; fill-opacity: 1;
+    stroke: #b4b4b4; stroke-width: 1; stroke-opacity: 1;
+}
+.tl-buttonIconOver { fill: #ff8080; stroke: #ff8080; }
+
+/* Cursor selection */
+.tl-cursorArea {
+    fill: #00BCD4;
+    fill-opacity: 0.2;
+    stroke: #00BCD4;
+    stroke-width: 1px;
+    stroke-linecap: butt;
+    stroke-linejoin: miter;
+    stroke-opacity: 1;
+    cursor: move;
+    transition: fill 0.5s, stroke 0.5s;
+}
+.tl-cursorArea.tl--maxSize { stroke: #00899f; }
+
+/* Cursor handles */
+.tl-cursorLeftHandle, .tl-cursorRightHandle {
+    fill-opacity: 1;
+    stroke-width: 1px;
+    transition: r 0.5s;
+    r: 4;
+    fill: #ffffff;
+    stroke: #00BCD4;
+    cursor: ew-resize;
+}
+.tl-cursorLeftHandle:hover, .tl-cursorRightHandle:hover { r: 8; }
+.tl-cursorLeftHandle.tl--maxSize { cursor: e-resize; }
+.tl-cursorRightHandle.tl--maxSize { cursor: w-resize; }
+.tl-cursorLeftHandle.tl--outOfView,
+.tl-cursorRightHandle.tl--outOfView {
+    fill: #ececec;
+    stroke: #b4b4b4;
+}
+
+/* Drag overlay */
+.tl-dragOverlay { fill: transparent; fill-opacity: 1; stroke: none; cursor: crosshair; }
+
+/* Cursor icon (offscreen indicator) */
+.tl-cursorIconRect { fill: #00bcd4; fill-opacity: 0.25; stroke: #00bcd4; stroke-width: 0.42; }
+.tl-cursorIconCircle { fill: #ffffff; stroke: #00bcd4; stroke-width: 0.52; }
+.tl-cursorIconRectOver { fill: #ff8080; stroke: #e7594f; }
+.tl-cursorIconCircleOver { stroke: #e7594f; }
+
+/* Zoom buttons */
+.tl-zoomIn { fill: #00BCD4; fill-opacity: 1; stroke: none; }
+.tl-zoomOut { fill: #ff816b; fill-opacity: 1; stroke: none; }
+.tl-zoomArea { fill: transparent; fill-opacity: 1; stroke: none; }
+.tl-zoomInContainer {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.5s, visibility 0.5s;
+    cursor: pointer;
+}
+.tl-zoomOutContainer { cursor: pointer; }
+
+/* Tooltips (cursor start/stop) */
+.tl-toolTipArea { opacity: 0; visibility: hidden; transition: opacity 0.25s, visibility 0.25s; }
+.tl-toolTip {
+    fill: #1a1a1a;
+    fill-opacity: 0.80;
+    stroke: #ffffff;
+    stroke-opacity: 1;
+    stroke-width: 0.1;
+    stroke-miterlimit: 1.3;
+}
+.tl-toolTipText {
+    font-size: 12.5px;
+    font-family: Roboto, sans-serif;
+    fill: #ffffff;
+}
+.tl-toolTipTextRight { text-align: end; text-anchor: end; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spider-analyzer/timeline",
-  "version": "4.0.3",
+  "version": "5.0.0",
   "description": "React graphical component to display metric over time with a time selection feature.",
   "author": "Thibaut Raballand <spider.analyzer@gmail.com> (https://spider-analyzer.io)",
   "license": "MIT",
@@ -24,21 +24,42 @@
   },
   "homepage": "https://gitlab.com/TincaTibo/timeline",
   "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "clean": "rimraf dist",
-    "build:babel": "babel src -d dist --copy-files",
-    "build": "npm run clean && npm run build:babel"
+    "build": "tsup",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "clsx": "^1.1.1",
     "d3-drag": "^3.0.0",
-    "d3-scale": "^4.0.0",
+    "d3-scale": "^4.0.2",
     "d3-selection": "^3.0.0",
-    "d3-time": "^3.0.0",
-    "lodash-es": "^4.17.21",
-    "moment-timezone": "^0.5.45",
+    "d3-time": "^3.1.0",
+    "luxon": "^3.7.2",
     "prop-types": "^15.7.2",
-    "rc-tooltip": "^5.1.0"
+    "rc-tooltip": "^6.4.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
@@ -48,14 +69,26 @@
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
-    "@material-ui/styles": "^4.11.4",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "rimraf": "^3.0.2"
+    "@babel/preset-typescript": "^7.28.5",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/d3-scale": "^4.0.9",
+    "@types/luxon": "^3.7.1",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react": "^4.7.0",
+    "jsdom": "^25.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^3.0.2",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^2.1.9"
   },
   "peerDependencies": {
-    "@material-ui/styles": "^4.0.0",
-    "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
-    "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   }
 }

package/src/Cursor.jsx

@@ -12,21 +12,21 @@ import RightHandle from './cursorElements/RightHandle';
 import ZoomIn from './cursorElements/ZoomIn';
 import LeftToolTip from './cursorElements/LeftToolTip';
 import RightToolTip from './cursorElements/RightToolTip';
-import moment from 'moment-timezone';
+import moment from './moment-shim';
 
 export default function Cursor({
         overlayWidth, overlayHeight,
-        items, setBarHovered, setToolTipVisible, showHistoToolTip, tooltipVisible, barHovered,
-        dragging, setDragging,
+        items, setBarHovered = identity, setToolTipVisible = identity, showHistoToolTip, tooltipVisible, barHovered,
+        dragging, setDragging = identity,
         origin, height,
         startPos, endPos,
         canZoom, minZoom, maxZoom, maxSize,
         zoomOutLabel, zoomOut,
         cursorIsAfterView, cursorIsBeforeView,
         gotoCursorLabel, onGotoCursor,
-        rcToolTipPrefixCls, classes,
+        rcToolTipPrefixCls, classes = {},
         onStartDrawCursor, onDrawCursor, onEndCursor,
-        onMoveDomain, onMovedDomain, onDragCursor, onEndDragCursor,
+        onMoveDomain = identity, onMovedDomain = identity, onDragCursor, onEndDragCursor,
         startText, stopText,
         zoomInLabel, zoomIn,
         startIsOutOfView, endIsOutOfView, tools,
@@ -268,11 +268,3 @@ Cursor.propTypes = {
 
 const identity = () => {};
 
-Cursor.defaultProps = {
-    classes: {},
-    onMoveDomain: identity,
-    onMovedDomain: identity,
-    setBarHovered: identity,
-    setToolTipVisible: identity,
-    setDragging: identity,
-}