archive-gh-me/react-circular-progressbar
1
0
Fork 0
mirror of https://github.com/kevinsqi/react-circular-progressbar.git synced 2025-12-08 20:25:50 +00:00
Code Issues Projects Releases Wiki Activity

Initialize from structure based on react-calendar-heatmap@74eaf47d7a

Browse Source
This commit is contained in:
Kevin Qi 2016-05-29 16:26:52 -04:00
commit dd6dec2ab6
17 changed files with 384 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.babelrc Normal file
View File

@ -0,0 +1,6 @@
{
"presets": [
"react",
"es2015"
]
}

9
.eslintrc Normal file
View File

@ -0,0 +1,9 @@
{
"extends": "airbnb",
"rules": {
"max-len": 0
},
"env": {
"mocha": true
}
}

6
.gitignore vendored Normal file
View File

@ -0,0 +1,6 @@
node_modules
npm-debug.log
.DS_Store
build
demo/index.js
.cache

5
.npmignore Normal file
View File

@ -0,0 +1,5 @@
node_modules
demo
src
assets
test

6
.travis.yml Normal file
View File

@ -0,0 +1,6 @@
language: node_js
node_js:
- "4"
script:
- npm run lint
- npm test

22
CHANGELOG.md Normal file
View File

@ -0,0 +1,22 @@
## 1.0.0
* Improve tooltip support with tooltipDataAttrs prop, allowing usage of e.g. bootstrap tooltips
* titleForValue now sets a square's title attribute instead of setting svg `<title>` element
## 0.4.3
* Build configuration updates
## 0.4.2
* Allow endDate to be string/milliseconds
* Don't show titles by default
## 0.4.1
* Fix broken package issue
* Stop loading CSS through webpack
## 0.4.0
* Add `horizontal` prop, which allows switching between horizontal and vertical orientations

32
README.md Normal file
View File

@ -0,0 +1,32 @@
# React Circular Progressbar
## Installation
Install the npm module:
```bash
npm install react-circular-progressbar
```
Include the default styles into your CSS by copying [src/styles.css](src/styles.css) into your repo.
## Usage
Import the component:
```javascript
import CircularProgressbar from 'react-circular-progressbar';
```
## Development
To run demo locally on localhost:8080:
```bash
npm install
npm start
```
Keep CI tests passing by running `npm test` and `npm run lint` often.
Deploy updates to the demo page with `npm run deploy:demo`.

60
demo/demo.jsx Normal file
View File

@ -0,0 +1,60 @@
import React from 'react';
import ReactDOM from 'react-dom';
import CircularProgressbar from '../src';
console.log(`react-circular-progressbar v${COMPONENT_VERSION}`);
const githubURL = 'https://github.com/iqnivek/react-circular-progressbar';
const DemoItem = (props) => (
<div className="row m-b-3">
<div className="col-xs-12 col-md-6 offset-md-3">
<p><code>{props.name}</code><small className="text-muted m-l-1">{props.example ? `e.g. ${props.example}` : null}</small></p>
<p>{props.description}</p>
<div className="row">
<div className="col-xs-6 offset-xs-3">
{props.children}
</div>
</div>
</div>
</div>
);
class Demo extends React.Component {
render() {
return (
<div className="container">
<div className="row m-y-3">
<div className="col-xs-12">
<div className="text-md-center">
<h1 className="m-b-2">{COMPONENT_NAME}</h1>
<p>{COMPONENT_DESCRIPTION}</p>
</div>
</div>
</div>
<div className="row m-b-3">
<div className="col-xs-12 col-md-6">
<CircularProgressbar />
</div>
</div>
<div className="text-xs-center m-y-3">
<p>Install with npm:</p>
<p className="m-b-3"><code>npm install {COMPONENT_NAME}</code></p>
<a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
</div>
<hr />
<h2 className="text-md-center m-y-3">Configuration</h2>
<hr />
<div className="text-xs-center m-y-3">
<a className="btn btn-info btn-lg" href={githubURL}>View project on Github</a>
</div>
</div>
);
}
}
ReactDOM.render(React.createElement(Demo), document.getElementById('demo'));

27
demo/index.html Normal file
View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>react-circular-progressbar</title>
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles.css" />
<style>
/* bootstrap overrides */
a {
color: #3e98c7;
}
a:hover {
text-decoration: none;
}
</style>
</head>
<body>
<div id="demo"></div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>

1
demo/styles.css Symbolic link
View File

@ -0,0 +1 @@
../src/styles.css

55
package.json Normal file
View File

@ -0,0 +1,55 @@
{
"name": "react-circular-progressbar",
"version": "0.1.0",
"description": "A circular progressbar svg component",
"author": "Kevin Qi <iqnivek@gmail.com>",
"main": "./build/index.js",
"repository": {
"type": "git",
"url": "https://github.com/patientslikeme/react-circular-progressbar.git"
},
"license": "MIT",
"keywords": [
"react",
"react-component",
"svg"
],
"scripts": {
"build": "NODE_ENV=production webpack",
"build:demo": "NODE_ENV=demo webpack",
"deploy:demo": "npm run build:demo && ./scripts/build_ghpages.sh",
"clean": "rimraf build",
"lint": "eslint src test",
"prepublish": "npm run clean && npm run build",
"test": "mocha --compilers js:babel-register --recursive --require ./test/setup.js",
"test:watch": "npm test -- --watch",
"start": "webpack-dev-server --progress --inline"
},
"devDependencies": {
"babel-core": "^6.3.15",
"babel-eslint": "^6.0.4",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-register": "^6.8.0",
"chai": "^3.5.0",
"enzyme": "^2.3.0",
"eslint": "^2.9.0",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-react": "^5.0.1",
"jsdom": "^9.0.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^15.0.2",
"react-dom": "^15.0.1",
"rimraf": "^2.3.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0"
},
"dependencies": {
"lodash.range": "^3.1.4",
"lodash.reduce": "^4.3.0"
}
}

17
scripts/build_ghpages.sh Executable file
View File

@ -0,0 +1,17 @@
#!/bin/sh
cp -R ./demo .cache
rm .cache/demo.jsx
rm .cache/styles.css
cp src/styles.css .cache
git checkout gh-pages
mv ./.cache/* .
rm -rf .cache
# git add .
# git commit -m "Update demo page"
# git push
# git checkout master

28
src/index.jsx Normal file
View File

@ -0,0 +1,28 @@
import React, { PropTypes } from 'react';
class CircularProgressbar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<svg
className="CircularProgressbar"
viewBox="0 0 100 100"
>
<text>Hello</text>
</svg>
);
}
}
CircularProgressbar.propTypes = {
};
CircularProgressbar.defaultProps = {
};
export default CircularProgressbar;

5
src/styles.css Normal file
View File

@ -0,0 +1,5 @@
/*
* react-circular-progressbar styles
*
* All of the styles in this file are optional and configurable!
*/

10
test/components/CircularProgressbar.spec.js Normal file
View File

@ -0,0 +1,10 @@
import React from 'react';
import { assert } from 'chai';
import { shallow } from 'enzyme';
import CircularProgressbar from '../../src';
describe('CircularProgressbar', () => {
it('should not throw exceptions in base case', () => {
assert.doesNotThrow(() => <CircularProgressbar />);
});
});

18
test/setup.js Normal file
View File

@ -0,0 +1,18 @@
// https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md#using-enzyme-with-jsdom
const jsdom = require('jsdom').jsdom;
const exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === 'undefined') {
exposedProperties.push(property);
global[property] = document.defaultView[property];
}
});
global.navigator = {
userAgent: 'node.js',
};

77
webpack.config.js Normal file
View File

@ -0,0 +1,77 @@
const webpack = require('webpack');
const path = require('path');
const pak = require('./package.json');
const nodeEnv = process.env.NODE_ENV || 'development';
const webpackConfig = {
context: __dirname,
entry: {
'react-circular-progressbar': [
path.resolve(__dirname, 'src', 'index.jsx')
]
},
output: {
path: path.resolve(__dirname),
filename: 'index.js',
library: 'CircularProgressbar',
libraryTarget: 'umd'
},
resolve: {
extensions: ['', '.js', '.jsx'],
modulesDirectories: ['node_modules']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
loader: 'babel'
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(nodeEnv)
})
]
};
if (nodeEnv === 'development') {
webpackConfig.devtool = 'source-map';
webpackConfig.debug = true;
webpackConfig.devServer = { contentBase: './demo'};
webpackConfig.entry['react-circular-progressbar'].unshift('webpack-dev-server/client?http://0.0.0.0:8080/');
webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx'));
webpackConfig.output.publicPath = '/';
}
if (nodeEnv === 'demo') {
webpackConfig.entry['react-circular-progressbar'].push(path.resolve(__dirname, 'demo', 'demo.jsx'));
webpackConfig.output.path = path.resolve(__dirname, 'demo');
}
if (nodeEnv === 'development' || nodeEnv === 'demo') {
webpackConfig.plugins.push(new webpack.DefinePlugin({
'COMPONENT_NAME': JSON.stringify(pak.name),
'COMPONENT_VERSION': JSON.stringify(pak.version),
'COMPONENT_DESCRIPTION': JSON.stringify(pak.description)
}));
}
if (nodeEnv === 'production') {
webpackConfig.externals = {
'react': {
root: 'React',
commonjs2: 'react',
commonjs: 'react',
amd: 'react'
}
};
webpackConfig.output.path = path.resolve(__dirname, 'build');
webpackConfig.plugins.push(new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
sourceMap: false
}));
}
module.exports = webpackConfig;