devcontra v0.0.16
React component that implements d3 for data visualization and is configured via the DevContra Client.
What is it?
A data viz tool that aggregates all of your dev contribution activity into one component that can be easily integrated into your personal website.
Data is currently fetched from Twitter, Github, and StackOverflow, with support for Spectrum coming soon.
Each band in the timeline represents a week of dev activity, with 17 total bands, and the current, or most recent, week/band being the outermost. The type of activity is color coded according to the respective platform's brand.
"Dev Activity"?
Your Github activity is determined by the commits, issues, and pull requests authored by you.
Your StackOverflow activity is determined by your posts, answers, and comments - as well as any badges you recieve.
Your Twitter activity is determined by parsing your tweets for relevant hashtags that match any existing StackOverflow tag. Support for adding tags to match against is coming soon.
Installation
DevContra is available as an npm package.
// with npm
npm i devcontra
// with yarn
yarn add devcontra
Please note that @next
will only point to pre-releases; to get the latest stable release use @latest
instead.
Usage
Here is a quick example to get you started, it's all you need:
import React from 'react';
import DevContra from 'devcontra';
function App() {
return (
// test key
<DevContra profileKey="e380df4d-c9b0-4ac0-be51-6cf8a49d0760" />
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
See it here in this live demo:
Configuration
You can begin configuring your profile here. After you create your account you will be able to set your twitter, stackoverflow, and github profiles, and receive your unique profileKey
.
Customization
Several optional props
are available to customize your component.
determinedMax
sets your domain, or the value you want your results to be relative to. If not set, it defaults to the nearest rounded up tenths place from your most active week. If your most active week has 72 contributions, your timeline will be set relative to a value of 80.
diameter
is responsible for the size of your component. The default value is 350.
padding
can be used to increase padding around the svg. Default padding is 0.
import React from 'react';
import DevContra from 'devcontra';
function App() {
return (
// test key
<DevContra
profileKey="e380df4d-c9b0-4ac0-be51-6cf8a49d0760"
deteminedMax={80}
diameter={350}
padding={0}
/>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
Questions
For how-to questions and other non-issues, please free to use Github issues or contact me directly.
Examples
Contributing
Read the contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to DevContra.
Changelog
Recently Updated? Please read the changelog.
Roadmap
The future plans and high priority features and enhancements can be found here.
Utilizes
GitHub's beta API allows for easy data fatching for repo activity history.
Twitters's API allows for easy data fatching for tweet history.
StackOverflow's API allows for easy data fatching for post history.
dynamoDb, Cognito, Cloudformation, API Gateway, IAM, and CloudWatch make continuous devopment and management of this tool as simple as possible.
BrowserStack allows us to test in real browsers.
Seed.run allows for simple and quick API CI/CD pipeline management.
Serverless Framework allows for building and operating a serverless application.
ZEIT Now offers a great solution for site hosting.
NEXT.js is a React Framework that offers a great server side rendering solution.
Other Repos
d3-layout-timeline-api - I'm in the process of updating this layout with the latest d3 and react conventions. Any help would be appreciated!
License
This project is licensed under the terms of the MIT license.