{"_id":"@granite-elements/granite-timeline","_rev":"3-99439e32d7a6fa49f9d062b4c6e4b9d9","name":"@granite-elements/granite-timeline","dist-tags":{"latest":"3.0.0"},"versions":{"2.0.0":{"name":"@granite-elements/granite-timeline","version":"2.0.0","keywords":["web-component","web-components","polymer","lostinbrittany","d3","d3-timelines","timeline"],"author":{"name":"Horacio Gonzalez","email":"horacio.gonzalez@gmail.com"},"license":"MIT","_id":"@granite-elements/granite-timeline@2.0.0","maintainers":[{"name":"lostinbrittany","email":"horacio.gonzalez@gmail.com"}],"homepage":"https://github.com/LostInBrittany/granite-timeline","bugs":{"url":"https://github.com/LostInBrittany/granite-timeline/issues"},"dist":{"shasum":"c3159bc3e8bc680a59aefc8765ec1633ecb003c3","tarball":"https://registry.npmjs.org/@granite-elements/granite-timeline/-/granite-timeline-2.0.0.tgz","fileCount":9,"integrity":"sha512-Oy/X7W6+c9SJJ0ByRhEpJzvJV8N44XzIzV+mcChMuK25IUC3mT9DIObF7CpJydn7yCDrOJKZk9VOYiNIbr2Nig==","signatures":[{"sig":"MEUCIQCqR4pIgXvi9EHv5p8nW23+thWOQi5DTX0wPY2mKjYpWAIgcLRqMB+jizjQHURrv/uTHJZsWG8M6OfUt0IoseXj9BI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":40103,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFWxjCRA9TVsSAnZWagAA72QP/3wxDggoXIf4UM+1Oy9M\nTSRm2fV6i0/ucuq5o6Q9EqYNxHK7ftA4yGUR4MTZwab7LZzIPBx39UHTmuq5\nkXrY5d17WfHqZ9Nrj5SLD3o85Ooo/GQZHAWY6YuhWRt5gwVTTorqrhc6lF4z\n1QpMF8jrreSkEwN6GmBIHdSxs0CHMh8e27mfZkgqCsyZijoMVrJri5kI0I9L\n5E8xlooC5VChxMifJpQVXTSGQRSLCp23SRXs6OEnsNgBjpyP9AqPVLx0F4ZW\nTH8gWTChOKoMt+hq0WrEPC+ZxPFzN9le35dQcwtt7I7kZmmRbZrTaklb4qsA\nL/hOd2KM10+qD3IwV5xjiQpQnF0MvFGFty4ZaE/1ic8NHVxl59pHImMCtLuy\nniaqVyxLJIsf5kujPInNTT3kb/htRgLAIljcb2CzPRpKjIj0vVhRFnQwcZZy\nJno4KmwHIh3VbesTQNrGzL78kdiqsMuJ5tWzZrEgnp/huRU4e31gRp6UD499\nbLcmNwSeIYikFLJv1PZ5KURdHjiuzBXqnV6cIby6BiBmRFpL7XRPIQuOm2g9\nfnJIko0U1bvAP7xYU9FN/LEwSXZLTLGOgLlxjRdILxpm1jHH8MlggV9Npahm\nE2t3B3c5OItuZOrmL/4WQXQbMTs7R+yajZxQK74BncD0JnaqOgL4TI2rURcw\nv50N\r\n=fDfY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"granite-timeline.js","gitHead":"0bf7d233f756e59b28f95712b086aeaed037314c","_npmUser":{"name":"lostinbrittany","email":"horacio.gonzalez@gmail.com"},"repository":{"url":"git+https://github.com/LostInBrittany/granite-timeline.git","type":"git"},"_npmVersion":"6.1.0","description":"A timeline rendering element using d3 and d3-timelines plugin","directories":{},"resolutions":{"samsam":"1.1.3","inherits":"2.0.3","type-detect":"1.0.0","supports-color":"3.1.2","@webcomponents/webcomponentsjs":"2.0.0-beta.2"},"_nodeVersion":"8.9.4","dependencies":{"d3-timelines":"github:lostinbrittany/d3-timeline#8786143466f4fd8a2ebe662a4c51967ff5a18141","@polymer/polymer":"^3.0.0","@granite-elements/granite-js-dependencies-grabber":"^2.0.0"},"_hasShrinkwrap":false,"devDependencies":{"wct-browser-legacy":"^0.0.1-pre.11","@polymer/iron-demo-helpers":"^3.0.0-pre.18","@webcomponents/webcomponentsjs":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/granite-timeline_2.0.0_1528130659027_0.5581523956856065","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@granite-elements/granite-timeline","version":"3.0.0","description":"A timeline rendering web component using Lit and d3","keywords":["web-component","web-components","lit","lostinbrittany","d3","timeline"],"homepage":"https://github.com/LostInBrittany/granite-timeline","repository":{"type":"git","url":"git+https://github.com/LostInBrittany/granite-timeline.git"},"author":{"name":"Horacio Gonzalez","email":"horacio.gonzalez@gmail.com"},"license":"MIT","type":"module","main":"granite-timeline.js","module":"granite-timeline.js","exports":{".":"./granite-timeline.js","./granite-timeline.js":"./granite-timeline.js","./src/timeline-renderer.js":"./src/timeline-renderer.js"},"scripts":{"dev":"vite","build:demo":"vite build","lint":"eslint ."},"dependencies":{"d3-axis":"^3.0.0","d3-scale":"^4.0.2","d3-scale-chromatic":"^3.1.0","d3-selection":"^3.0.0","d3-time":"^3.1.0","d3-time-format":"^4.1.0","d3-zoom":"^3.0.0","lit":"^3.2.0"},"devDependencies":{"@eslint/js":"^9.0.0","eslint":"^9.0.0","globals":"^15.0.0","vite":"^6.0.0"},"gitHead":"02c4c57e74a30135737fe1012420d7e7617db671","_id":"@granite-elements/granite-timeline@3.0.0","bugs":{"url":"https://github.com/LostInBrittany/granite-timeline/issues"},"_nodeVersion":"24.4.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-UGAI0U/FBUpf48Kzh28gcd6OAXZoaCRCjeDZQ0q2YJrWps1nym+Ov3Ac8unjMwyFRSF2UdxdKDs6tftGTGhdbQ==","shasum":"49308ccbc67da8c9e7a04e424edc3f190077577f","tarball":"https://registry.npmjs.org/@granite-elements/granite-timeline/-/granite-timeline-3.0.0.tgz","fileCount":6,"unpackedSize":36467,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD7jmbEnztB+jLhzd1GPzsbmPvF+qrGO2Y+popPfuHJSwIgDF9YjgvD/0aoQThOCy224VzI6m6qiZ3zSvMLw5u+o60="}]},"_npmUser":{"name":"lostinbrittany","email":"horacio.gonzalez@gmail.com"},"directories":{},"maintainers":[{"name":"lostinbrittany","email":"horacio.gonzalez@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/granite-timeline_3.0.0_1780737704289_0.23593979411073973"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-04T16:44:18.850Z","modified":"2026-06-06T09:21:44.576Z","2.0.0":"2018-06-04T16:44:19.091Z","3.0.0":"2026-06-06T09:21:44.426Z"},"bugs":{"url":"https://github.com/LostInBrittany/granite-timeline/issues"},"author":{"name":"Horacio Gonzalez","email":"horacio.gonzalez@gmail.com"},"license":"MIT","homepage":"https://github.com/LostInBrittany/granite-timeline","keywords":["web-component","web-components","lit","lostinbrittany","d3","timeline"],"repository":{"type":"git","url":"git+https://github.com/LostInBrittany/granite-timeline.git"},"description":"A timeline rendering web component using Lit and d3","maintainers":[{"name":"lostinbrittany","email":"horacio.gonzalez@gmail.com"}],"readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/LostInBrittany/granite-timeline)\n\n# granite-timeline\n\nA timeline rendering web component built with [Lit](https://lit.dev) and [d3](https://d3js.org) v7.\n\n> **v3.0.0** is a full rewrite: Lit instead of Polymer, native d3 v7 rendering instead of the\n> abandoned `d3-timelines` plugin, plain ES modules, no polyfills, no runtime script loading.\n> See [Migration from v2](#migration-from-v2).\n\n## Install\n\n```sh\nnpm install @granite-elements/granite-timeline\n```\n\n## Usage\n\n```js\nimport '@granite-elements/granite-timeline';\n```\n\n```html\n<granite-timeline\n    data='[{\"times\":[{\"starting_time\":1355752800000,\"ending_time\":1355759900000}, {\"starting_time\":1355767900000,\"ending_time\":1355774400000}]},{\"times\":[{\"starting_time\":1355759910000,\"ending_time\":1355761900000}]}]'\n    show-time-axis></granite-timeline>\n```\n\nFunction- and object-valued options are set as properties:\n\n```js\nimport { scaleOrdinal } from 'd3-scale';\nimport { timeHour } from 'd3-time';\n\nconst el = document.querySelector('granite-timeline');\nel.data = [\n  { label: 'fruit 1', fruit: 'orange', times: [\n    { starting_time: 1355759910000, ending_time: 1355761900000 }] },\n  { label: 'fruit 2', fruit: 'apple', times: [\n    { starting_time: 1355752800000, ending_time: 1355759900000 }] },\n];\nel.colors = scaleOrdinal().domain(['apple', 'orange']).range(['#6b0000', '#ef9b0f']);\nel.colorsProperty = 'fruit';\nel.tickTime = timeHour;\n```\n\n## Data format\n\n```js\n[\n  {\n    label: 'series label',     // optional, shown on the left when `stack` is set\n    times: [\n      {\n        starting_time: 1355752800000,  // ms epoch\n        ending_time: 1355759900000,    // ms epoch\n        label: 'bar label',            // optional\n        color: '#6b0000',              // optional, overrides the color scale\n      },\n    ],\n  },\n]\n```\n\n## Properties\n\n| Property | Attribute | Type | Default | Description |\n|---|---|---|---|---|\n| `data` | `data` | Array | `[]` | The timeline data (see above) |\n| `width` | `width` | Number | element width | Width of the timeline in pixels |\n| `height` | `height` | Number | computed | Height of the timeline in pixels |\n| `itemHeight` | `item-height` | Number | `20` | Height of a data series row |\n| `itemMargin` | `item-margin` | Number | `5` | Margin between data series rows |\n| `marginTop` | `margin-top` | Number | `30` | Top margin |\n| `marginBottom` | `margin-bottom` | Number | `30` | Bottom margin |\n| `marginLeft` | `margin-left` | Number | `30` | Left margin |\n| `marginRight` | `margin-right` | Number | `30` | Right margin |\n| `tickFormat` | `tick-format` | String\\|Function | `'%I %p'` | d3 time-format specifier, or a `(date) => string` function (property only) |\n| `tickTime` | — | d3-time interval | — | Tick time unit, e.g. `timeHour` from `d3-time` |\n| `tickInterval` | `tick-interval` | Number | `1` | Tick interval, used with `tickTime` |\n| `numTicks` | `num-ticks` | Number | — | Number of ticks, used when `tickTime` is unset |\n| `tickSize` | `tick-size` | Number | `6` | Tick size in pixels |\n| `tickValues` | — | Array | — | Explicit tick values (Date or ms epoch) |\n| `rotateTicks` | `rotate-ticks` | Number | `0` | Rotation of the tick labels in degrees |\n| `axisTop` | `axis-top` | Boolean | `false` | Places the time axis on top |\n| `axisZoom` | `axis-zoom` | Boolean | `false` | Enables zooming (Ctrl/⌘ + wheel, pinch, double-click) and panning (drag) of the time axis |\n| `colors` | — | d3 ordinal scale | `scaleOrdinal(schemeCategory10)` | Color scale for the series |\n| `colorsProperty` | `colors-property` | String | — | Data property mapped to the `colors` scale |\n| `beginning` | `beginning` | Date\\|Number\\|String | computed | Start of the timeline |\n| `ending` | `ending` | Date\\|Number\\|String | computed | End of the timeline |\n| `stack` | `stack` | Boolean | `false` | Stacks each data series on its own row |\n| `showToday` | `show-today` | Boolean | `false` | Shows a vertical line at the current time |\n| `todayMarginTop` | `today-margin-top` | Number | `25` | Top margin of the today line |\n| `todayMarginBottom` | `today-margin-bottom` | Number | `0` | Bottom margin of the today line |\n| `todayWidth` | `today-width` | Number | `2` | Stroke width of the today line |\n| `todayColor` | `today-color` | String | `rgb(245, 157, 0)` | Color of the today line |\n| `showTimeAxis` | `show-time-axis` | Boolean | `false` | Shows the time axis |\n| `background` | `background` | String | — | Background color of the rows |\n| `rowSeparators` | `row-separators` | String | — | Color of the separator lines between rows |\n| `labelFormat` | — | Function | — | Maps a raw `label` value to its display text |\n| `debug` | `debug` | Boolean | `false` | Logs debug information to the console |\n\nColor resolution order for each bar: `time.color` → `colors(time[colorsProperty])` →\n`colors(series[colorsProperty])` → `colors(seriesIndex)`.\n\n## Events\n\nAll events are `CustomEvent`s dispatched from the element, with\n`detail: { d, index, datum, mouse, evt }` where `d` is the time entry, `index` its index\nin the series, `datum` the series object, `mouse` the `[x, y]` pointer position in the\nSVG, and `evt` the originating DOM event.\n\n| Event | Fired on |\n|---|---|\n| `click` | Click on a timeline bar |\n| `mouseover` | Pointer enters a bar |\n| `mouseout` | Pointer leaves a bar |\n| `hover` | Pointer moves over a bar |\n\nNote: a `click` listener also receives native click events from the element; check\n`event.detail?.d` to distinguish bar clicks.\n\nWhen `axisZoom` is enabled, a `zoom` event is fired on every zoom/pan, with\n`detail: { start, end, transform }` where `start`/`end` are the `Date` bounds of the\nvisible domain and `transform` the d3 zoom transform.\n\n## Methods\n\n| Method | Description |\n|---|---|\n| `resetZoom()` | Resets the axis zoom/pan to the initial full-domain view |\n\n## Styling\n\nThe chart renders in shadow DOM. Customization hooks:\n\n| Hook | Description |\n|---|---|\n| `--granite-timeline-label-color` | Color of the series and bar labels |\n| `--granite-timeline-axis-color` | Color of the time axis |\n| `::part(timeline)` | The chart container |\n\n## Demo\n\n```sh\nnpm install\nnpm run dev    # open http://localhost:5173/demo/\n```\n\n## Migration from v2\n\n- **No more script loading**: d3 is now a regular ES-module dependency. Remove any\n  `granite-js-dependencies-grabber` setup; `bower` and the webcomponentsjs polyfills are gone.\n- **Dropped properties**: `displayCircles`, `relativeTime`, `showBorderLine` (+ its\n  `borderLine*` format properties), `showTimeAxisTick` (+ `timeAxisTick*`),\n  `xAxisClass`. Open an issue if you need one of them back.\n- **`axisZoom`** is kept, but zooming with the mouse wheel now requires\n  <kbd>Ctrl</kbd>/<kbd>⌘</kbd> so the chart doesn't hijack page scrolling; drag pans,\n  and a `zoom` event reports the visible domain.\n- **Dropped events**: `scroll`. The `i` field of event details is gone — use `index`.\n- **Tick intervals**: `tickTime` now takes a modern d3-time interval\n  (`import { timeHour } from 'd3-time'`) instead of the old `d3.time.hours`.\n- **`tickFormat`** is now a single value (string specifier or function) instead of the\n  v2 object — the other tick options moved to top-level properties (unchanged names).\n- **Default palette** changed from `d3.scale.category20()` (removed in d3 v7) to\n  `scaleOrdinal(schemeCategory10)`.\n- **Shadow DOM styling**: page CSS no longer reaches the chart internals. Use the CSS\n  custom properties / `part` listed above.\n\n## License\n\n[MIT License](http://opensource.org/licenses/MIT)\n","readmeFilename":"README.md"}