{"_id":"@cristovao-trevisan/patternfly-timeline","_rev":"1-e7a791d3dbd4d4cc71cc0daa1cc91af9","name":"@cristovao-trevisan/patternfly-timeline","dist-tags":{"latest":"0.0.17"},"versions":{"0.0.17":{"name":"@cristovao-trevisan/patternfly-timeline","version":"0.0.17","description":"A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.","main":"src/timeline.js","scripts":{"start":"webpack-dev-server --colors --inline --devtool source-map --host=0.0.0.0"},"dependencies":{"d3":"~3.5.17"},"devDependencies":{"configurable.js":"0.1.0","css-loader":"0.19.0","eslint":"1.6.0","eslint-config-airbnb":"0.1.0"},"repository":{"type":"git","url":"git+https://github.com/cristovao-trevisan/patternfly-timeline.git"},"bugs":{"url":"https://github.com/cristovao-trevisan/patternfly-timeline/issues"},"homepage":"https://github.com/cristovao-trevisan/patternfly-timeline","license":"MIT","gitHead":"7400c2ce27864d07c3f04e1f437e18c612c1012b","_id":"@cristovao-trevisan/patternfly-timeline@0.0.17","_nodeVersion":"14.15.0","_npmVersion":"7.5.2","dist":{"integrity":"sha512-0PmxbYvQU53HRWPLWmW8XpBKbxe6RVSAKU3mJWgdKpsKwCjVdM5qGKnDWGno/SraGlnoJjMj5xysp/jjEVVMbA==","shasum":"7da6464f92569d4ad62aed291281055ba09f81f3","tarball":"https://registry.npmjs.org/@cristovao-trevisan/patternfly-timeline/-/patternfly-timeline-0.0.17.tgz","fileCount":32,"unpackedSize":138498,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVLkCRA9TVsSAnZWagAApLcQAIReKwh0xlvvkF2yFX7Y\nX4RfiGfkjMNmgIGhhsCqh80NuG3E7zw7LES3aO0Ze/SpfUm5p2xN2BzEpI4y\nM88IxBwHvTZnX/XAgn3O6/OozqOIbvH7PO3syxEsPV1vVpeOThe2LL4sy9Lv\nEi/gCOVChsZRMe9hTVpViYtuCWQaFKz1nh4qoBf5BOkrOriO9l9A3UzG1oLP\nPyJErSdRk9ryDbAys0xml+aaoCi195Y3r/MFfeY2zLru23kqMqa+Pyuvbmu3\nbt2JZWC+H/egZWN9Kf2KXAGjry49Fi5NJzErlb1+5VL4f17onBOgQ9AkCq7U\n8jsTanx2elgUAb63M5L51CeAlM8rAE6h2SEKssjN+HLqQTlDcUH80B889n67\nHmyyb1/Bcn3bM1abzv1v8kNb1hUFpRdys8bc7Gf97n+3YFauC9+UtM8+Nksc\nhdgqTeLSDJpsx3TFKmmrXWfKkFpTPabK/muqi1tj5crtbLOQbg4QDsJkU4V3\nWNc3FSMaJ7mwxpNyHu8ziqBBIIqMjmqgFbLCTRhQR4RR2N1xciQNvw33jdqA\npi1S6B5ZaA50xGRG4Gm/geMUy9dNVAyuzDICkru5jA2wLOmmkURwLrTuiWyz\n8Z7heqX+Vo5MJLrNLkOt+k5GxNV4qw0sZTZ66vgaI8KcBA8af/ff6ThbOJmU\nyYQs\r\n=wL95\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsAmMLpP2kRe8XPdJLzc65k5dOrRj66LWrOSvkHo1BcAiB96AOZhUaDj3e1iNhxG57dRnRk4yuMD8oWyDhED5Ldzw=="}]},"_npmUser":{"name":"cristovao-trevisan","email":"cristovao.trevisan@gmail.com"},"directories":{},"maintainers":[{"name":"cristovao-trevisan","email":"cristovao.trevisan@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/patternfly-timeline_0.0.17_1612796643869_0.6363907601604966"},"_hasShrinkwrap":false}},"time":{"created":"2021-02-08T15:04:03.837Z","0.0.17":"2021-02-08T15:04:04.009Z","modified":"2022-04-05T01:50:08.559Z"},"maintainers":[{"name":"cristovao-trevisan","email":"cristovao.trevisan@gmail.com"}],"description":"A time based / event series interactive visualization using d3.js. Use drag and zoom to navigate in time.","homepage":"https://github.com/cristovao-trevisan/patternfly-timeline","repository":{"type":"git","url":"git+https://github.com/cristovao-trevisan/patternfly-timeline.git"},"bugs":{"url":"https://github.com/cristovao-trevisan/patternfly-timeline/issues"},"license":"MIT","readme":"patternfly-timeline\n==========\n\nA time based/event series interactive visualization using d3.js. Use drag and zoom to navigate in time. [View the demo here.](https://rawgit.com/patternfly/patternfly-timeline/master-dist/demo/)\n\nBased on the [EventDrops](https://github.com/marmelab/EventDrops) timeline.\n## Usage\n\nInclude the `src/timeline.js` script in your page after d3:\n\n```html\n<script src=\"path/to/d3.js\"></script>\n<script src=\"src/timeline.js\"></script>\n```\n\n\n\nIn the HTML source, create a new timeline chart, bind data to a DOM element, then call the chart on the element. **Important:** In order for the zoom slider to work correctly, the placeholder element must have `position: relative` or `position: absolute` styling.\n\n```js\nvar timelineChart = d3.chart.timeline();\nd3.select('#chart_placeholder')\n  .datum(data)\n  .call(timelineChart);\n```\n\nThe data must be an array of named time series with an optional details payload. For instance:\n\n```js\nvar json = [\n  {\n    \"name\":\"Power Activity\",\n    \"data\":[\n      {\"date\": \"2016-04-08T15:07:37.374Z\", \"details\": {\"event\": \"vmPowerOn\", \"object\": \"vmName\"}},\n      {\"date\": \"2016-04-08T15:07:37.374Z\", \"details\": {\"event\": \"vmPowerOn\", \"object\": \"vmName\"}},\n      {\"date\": \"2016-04-15T21:04:16.247Z\", \"details\": {\"event\": \"vmPowerOn\", \"object\": \"vmName\"}}\n    ]\n  },\n  {\n    \"name\":\"Alarm/Error\",\n    \"data\":[\n      {\"date\": \"2016-04-21T01:06:19.126Z\", \"details\": {\"event\": \"vmPowerOn\", \"object\": \"vmName\"}},\n      {\"date\": \"2016-04-16T13:07:15.205Z\", \"details\": {\"event\": \"vmPowerOff\", \"object\": \"hostName\"}},\n      {\"date\": \"2016-04-07T22:35:41.145Z\", \"details\": {\"event\": \"vmPowerOff\", \"object\": \"hostName\"}}\n    ]\n  }\n];\n```\n\n## Configuration\n\nPatternfly-timeline follows the [d3.js reusable charts pattern](http://bost.ocks.org/mike/chart/) to let you customize the chart at will:\n\n```js\nvar timelineChart = d3.chart.timeline()\n  .width(1200)\n  .context(false)\n```\n\nConfigurable values:\n\n  - `start`: start date of the scale. Defaults to `new Date(0)`.\n  - `end`: end date of the scale. Defaults to `new Date()`\n  - `minScale`: The minimum scaling (zoom out), default to `0`.\n  - `maxScale`: The maximum scaling (zoom in), default to `Infinity`.\n  - `width`: width of the chart in pixels. Responsive by default.\n  - `padding`: paddings of the graph in pixels. Defaults to `{ top: 30, left: 40, bottom: 40, right: 40 }`\n  - `lineHeight`: The height of each row in the chart, default to `40`.\n  - `contextHeight`: The height of the context viewport below the char, default to `50`.\n  - `locale`: locale used for the X axis labels. See [d3.locale](https://github.com/mbostock/d3/wiki/Localization#locale) for the expected format. Defaults to `null` (i.e. d3 default locale).\n  - `axisFormat`: function receiving the d3 axis object, to customize tick number and size.\n  - `tickFormat`: tickFormat for the X axis. See [d3.timeFormat.multi()](https://github.com/mbostock/d3/wiki/Time-Formatting#format_multi) for expected format.\n  - `eventHover`: function to be called when hovering an event in the chart. Receives the DOM element hovered (uses event delegation).\n  - `eventZoom`: function to be called when done zooming on the chart. Receives the d3 scale at the end of the zoom.\n  - `eventClick`: function to be called on click event of data-point (circle). Receives the DOM element hovered (uses event delegation).\n  - `eventLineColor`: The color of the event line. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color.\n  - `eventColor`: The color of the event. Accepts a color (color name or `#ffffff` notation), or a function receiving the eventData and returning a color. Defaults to null. EventLineColor will be ignored if this is used.\n  - `eventShape`: The shape of the event. Accepts unicode characters, including icon fonts.\n  - `eventPopover`: The contents of the event's popover.\n  - `marker`: `true` by default. Enable current time/date marker under mouse pointer.\n  - `context`: `true` by default. Enable context viewport beneath chart.\n  - `slider`: `true` by default. Enable zoom slider and buttons to right of chart.\n  - `eventGrouping`: `60000`(one minute) by default. The number of milliseconds within which events will be considered to have happened at the same time.\n\n## Styling\n\nYou can style all elements of the chart in CSS. Check the source to see the available selectors.\n\n## Extending / Development\n\nFirst, install the dependencies:\n\n```sh\nnpm install\n```\n\nFor development purpose, you can use the following command:\n\n``` sh\nnpm start\n```\n\nIt serves the demo at http://localhost:8080.\n\nWhen your changes are done, ensure that all tests pass with:\n\n``` sh\nnpm test\n```\n\nFinally, if everything is fine, you can rebuild the library using:\n\n``` sh\nnpm run build\n```\n\n## License\n\nPatternfly Timeline is released under the MIT License\n","readmeFilename":"README.md"}