{"id":21969567,"url":"https://github.com/cinderblock/react-smoothie","last_synced_at":"2025-08-07T20:09:12.727Z","repository":{"id":2183765,"uuid":"45890888","full_name":"cinderblock/react-smoothie","owner":"cinderblock","description":"React wrapper for Smoothie Charts","archived":false,"fork":false,"pushed_at":"2023-03-06T06:39:55.000Z","size":952,"stargazers_count":43,"open_issues_count":14,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-17T09:06:37.981Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cinderblock.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2015-11-10T05:58:19.000Z","updated_at":"2024-09-17T09:35:45.000Z","dependencies_parsed_at":"2023-07-06T10:16:33.447Z","dependency_job_id":null,"html_url":"https://github.com/cinderblock/react-smoothie","commit_stats":{"total_commits":210,"total_committers":2,"mean_commits":105.0,"dds":"0.023809523809523836","last_synced_commit":"621eced4d81191817312d6001f23fe3e9f508646"},"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinderblock%2Freact-smoothie","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinderblock%2Freact-smoothie/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinderblock%2Freact-smoothie/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cinderblock%2Freact-smoothie/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cinderblock","download_url":"https://codeload.github.com/cinderblock/react-smoothie/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227141230,"owners_count":17736775,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-29T14:22:21.185Z","updated_at":"2024-11-29T14:22:21.758Z","avatar_url":"https://github.com/cinderblock.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-smoothie\n\nReact wrapper for [Smoothie Charts](http://smoothiecharts.org/).\n\n## Install\n\nWith Yarn:\n\n```bash\nyarn add react-smoothie\n```\n\nWith NPM:\n\n```bash\nnpm install react-smoothie --save\n```\n\n### Install from GitHub\n\n```bash\nnpm i cinderblock/react-smoothie\n```\n\n## Usage\n\nThere are 2 main ways to populate data.\n\n- Original `ref` based `addTimeSeries()`\n- New _(added in `0.4.0`)_ props based with reference to TimeSeries\n\n### Import / Require\n\nBoth import or require work\n\n```javascript\nconst { default: SmoothieComponent, TimeSeries } = require('react-smoothie');\nimport SmoothieComponent, { TimeSeries } from 'react-smoothie';\n```\n\n### New prop based API\n\n```tsx\nconst ts1 = new TimeSeries({});\nconst ts2 = new TimeSeries({\n  resetBounds: true,\n  resetBoundsInterval: 3000,\n});\n\nsetInterval(() =\u003e {\n  var time = new Date().getTime();\n\n  ts1.append(time, Math.random());\n  ts2.append(time, Math.random());\n}, 500);\n\nvar TestComponent = React.createClass({\n  render() {\n    return (\n      \u003cSmoothieComponent\n        responsive\n        height={300}\n        series={[\n          {\n            data: ts1,\n            strokeStyle: { g: 255 },\n            fillStyle: { g: 255 },\n            lineWidth: 4,\n          },\n          {\n            data: ts2,\n            strokeStyle: { r: 255 },\n            fillStyle: { r: 255 },\n            lineWidth: 4,\n          },\n        ]}\n      /\u003e\n    );\n  },\n});\n```\n\n### Old reference based API\n\n```tsx\nvar TestComponent = React.createClass({\n  render() {\n    return \u003cSmoothieComponent ref=\"chart\" responsive height={300} /\u003e;\n  },\n\n  componentDidMount() {\n    // Initialize TimeSeries yourself\n    var ts1 = new TimeSeries({});\n\n    this.refs.chart.addTimeSeries(ts1, {\n      strokeStyle: 'rgba(0, 255, 0, 1)',\n      fillStyle: 'rgba(0, 255, 0, 0.2)',\n      lineWidth: 4,\n    });\n\n    // Or let addTimeSeries create a new instance of TimeSeries for us\n    var ts2 = this.refs.chart.addTimeSeries(\n      {\n        resetBounds: true,\n        resetBoundsInterval: 3000,\n      },\n      {\n        strokeStyle: { r: 255 },\n        fillStyle: { r: 255 },\n        lineWidth: 4,\n      }\n    );\n\n    this.dataGenerator = setInterval(() =\u003e {\n      var time = new Date().getTime();\n\n      ts1.append(time, Math.random());\n      ts2.append(time, Math.random());\n    }, 500);\n  },\n\n  componentWillUnmount() {\n    clearInterval(this.dataGenerator);\n  },\n});\n```\n\n### More Examples\n\nSee [`example.tsx`](example.tsx) for a relatively standalone and complete example.\n\n## Props\n\n`SmoothieComponent`'s props are all passed as the options object to the _Smoothie Charts_ constructor.\n\n```tsx\n\u003cSmoothieComponent ref=\"chart\" width={1000} height={300} interpolation=\"step\" /\u003e\n```\n\n### Extra props\n\nThere are some extra props that control other behaviors.\n\n#### `tooltip`\n\nGenerate a tooltip on mouseover\n\n- `false` does not enable tooltip\n- `true` enables a default tooltip (generated by `react-smoothie`)\n- `function` that returns a stateless React component\n\n_default: `false`_\n\n#### `responsive`\n\nEnabling responsive mode automatically sets the width to `100%`.\n\n_default: `false`_\n\n#### `width`\n\nControl the width of the `\u003ccanvas\u003e` used.\n\n_default: `800`_\n\n#### `height`\n\nControl the height of the `\u003ccanvas\u003e` used.\n\n_default: `200`_\n\n#### `streamDelay`\n\n_default: `0` (ms)_\n\nDelay the displayed chart. This value is passed after the component mounts as the second argument to `SmoothieChart.streamTo`.\n\n### Responsive charts\n\nExperimental support for responsive charts was added in 0.3.0.\nSimply set the `responsive` prop to `true` and canvas will use the full width of the parent container.\nHeight is still a controlled prop.\n\n### TimeSeries\n\n`TimeSeries` is the main class that _Smoothie Charts_ uses internally for each series of data.\nThere are two ways to access and use these objects, corresponding to the two API versions.\n\n#### New API\n\n`TimeSeries` is available as an import.\n\n```tsx\nconst ts1 = new TimeSeries();\nts1.append(time, Math.random());\n```\n\n#### Old API\n\n`TimeSeries` is exposed via the `addTimeSeries()` function.\n\nThe optional first argument of `addTimeSeries()` gets passed as the options to the `TimeSeries` constructor.\nThe last argument of `addTimeSeries()` gets passed as the options argument of `SmoothieChart.addTimeSeries()`.\n\nAs of `0.4.0`, an instance of `TimeSeries` can be passed as an argument to `addTimeSeries()`.\n\n```tsx\nvar ts = this.refs.chart.addTimeSeries(\n  {\n    /* Optional TimeSeries opts */\n  },\n  {\n    /* Chart.addTimeSeries opts */\n  }\n);\n\nts.append(new Date().getTime(), Math.random());\n```\n\n## Test / Example\n\nRun `yarn dev` or `npm run dev` to start the Webpack Dev Server and open the page on your browser.\nDon't forget to run `yarn` or `npm install` first to install dependencies.\n\n## Change Log\n\n### v0.14.0\n\n- Improve Types for Canvas drawing (setting gradients)\n- Rewrite of options processing\n- New modern React (with hooks) example\n- Switch to Npm\n\n### v0.13.0\n\n- Remove Yarn restrictions\n\n### v0.12.x\n\n- Update dep to latest\n- Publish to GitHub Packages\n\n### v0.11.0\n\n- Use [`prepare`](https://docs.npmjs.com/misc/scripts#prepublish-and-prepare) script to allow installing from GitHub\n\n### v0.10.0\n\n- Export prop type\n\n### v0.9.0\n\n- TypeScript\n\n### v0.8.0\n\n- Fix tooltip positioning relative\n- Allow setting class via `classNameCanvas`\n\n### v0.7.0\n\n- Allow setting canvas css class\n\n### v0.6.0\n\n- Tooltip support\n\n### v0.5.0\n\n- Single option to set both style colors to be the same\n\n### v0.4.0\n\n- `TimeSeries` can be passed as an argument to `addTimeSeries()`\n- Use object to set style colors\n\n### v0.3.0\n\n- Export as Module\n\n### v0.2.0\n\n- Allow setting `streamDelay` option\n\n### v0.1.0\n\n- Fix passing args to Smoothie Charts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcinderblock%2Freact-smoothie","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcinderblock%2Freact-smoothie","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcinderblock%2Freact-smoothie/lists"}