{"id":17621081,"url":"https://github.com/keen/keen-react-charts","last_synced_at":"2025-04-30T20:08:12.739Z","repository":{"id":57288891,"uuid":"176907288","full_name":"keen/keen-react-charts","owner":"keen","description":"A React Component for Keen-Dataviz.js","archived":false,"fork":false,"pushed_at":"2023-03-01T06:25:55.000Z","size":5061,"stargazers_count":6,"open_issues_count":12,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T20:08:06.494Z","etag":null,"topics":["keen-dataviz","react","react-charts","react-visualizations"],"latest_commit_sha":null,"homepage":"https://keen.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/keen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-21T09:00:01.000Z","updated_at":"2023-01-19T06:11:53.000Z","dependencies_parsed_at":"2024-06-19T16:38:13.868Z","dependency_job_id":"32e246ad-89dd-4a96-bf64-24d16aa1daae","html_url":"https://github.com/keen/keen-react-charts","commit_stats":{"total_commits":22,"total_committers":5,"mean_commits":4.4,"dds":0.5454545454545454,"last_synced_commit":"58f2e7b0354ca1cb851b94f5b3919013a5c7bdec"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keen%2Fkeen-react-charts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keen%2Fkeen-react-charts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keen%2Fkeen-react-charts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/keen%2Fkeen-react-charts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/keen","download_url":"https://codeload.github.com/keen/keen-react-charts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251774896,"owners_count":21641731,"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":["keen-dataviz","react","react-charts","react-visualizations"],"created_at":"2024-10-22T20:10:28.985Z","updated_at":"2025-04-30T20:08:12.717Z","avatar_url":"https://github.com/keen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Keen charts react component\n\n## Install with NPM\n\n```ssh\nnpm install keen-react-charts --save\n```\n\n## Usage\n\nUse this component to create charts from the data received from the Keen's API. Charts expect a results prop of the response from the query or a raw object. All the configuration properties could be passed in props.\n\n## Example\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport Chart from 'keen-react-charts';\nimport KeenAnalysis from 'keen-analysis';\n\nimport 'keen-dataviz/dist/keen-dataviz.css';\nimport './styles/style.css';\n\nclass App extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      type: 'funnel',\n      title: 'Actions and purchases',\n      labelMapping: {\n        pageviews: 'Pageviews',\n        banner_visibility: 'Banner visibility',\n        banner_clicks: 'Banner clicks',\n        signups: 'Signups',\n      },\n      funnel: {\n        lines: false,\n        percents: {\n          show: true,\n        },\n        resultValues: false\n      },\n      renderOnVisible: true\n    };\n  }\n\n  componentDidMount() {\n    const client = new KeenAnalysis({\n      projectId: 'YOUR_PROJECT_ID',\n      readKey: 'YOUR_READ_KEY'\n    })\n      .query({\n        analysis_type: 'funnel',\n        steps: [\n          {\n            event_collection: 'pageviews',\n            actor_property: 'user.uuid',\n            timeframe: {\n              start: '2019-03-13T00:00:00.000Z',\n              end: '2019-08-14T00:00:00.000Z'\n            }\n          },\n          {\n            event_collection: 'banner_visibility',\n            actor_property: 'user.uuid',\n            timeframe: {\n              start: '2019-03-13T00:00:00.000Z',\n              end: '2019-08-14T00:00:00.000Z'\n            }\n          },\n          {\n            event_collection: 'banner_clicks',\n            actor_property: 'user.uuid',\n            timeframe: {\n              start: '2019-03-13T00:00:00.000Z',\n              end: '2019-08-14T00:00:00.000Z'\n            }\n          },\n          {\n            event_collection: 'signups',\n            actor_property: 'user.uuid',\n            timeframe: {\n              start: '2019-03-13T00:00:00.000Z',\n              end: '2019-08-14T00:00:00.000Z'\n            }\n          }\n        ],\n      })\n      .then((results) =\u003e {\n        this.setState({\n          results,\n        });\n      });\n  }\n\n\n  render() {\n    return (\n      \u003cChart {...this.state} /\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('app'));\n```\n\n## Configuration\n\nCharts configurations you can check here: [keen-dataviz.js](https://github.com/keen/keen-dataviz.js/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeen%2Fkeen-react-charts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeen%2Fkeen-react-charts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeen%2Fkeen-react-charts/lists"}