<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/CudeMonster/pen/oLQpNm?depth=everything&order=popularity&page=19&q=redux&show_forks=false" />
<style class="cp-pen-styles">.title {
background: #f4f4f4;
height: 10vh;
width: 90%;
margin: 5vh auto;
border-radius: 1vh;
line-height: 10vh;
}
#usage {
width: 80%;
}
h2, h3 {
vertical-align: middle;
text-align: center;
}
#nine {
width: 90%;
}
#eight {
width: 80%;
}
#inputFieldChartStatistic {
display: flex;
justify-content: space-around;
}
#flex {
display: flex;
justify-content: center;
}
#piechart_3d {
width: 50%;
}
#js-app {
width: 60%;
}
.dataset-selector {
margin-top: 10px;
color: #337ab7;
padding: 4px 10px;
border-radius: 8px;
}
.dataset-selector:hover {
color: #23527c;
text-decoration: underline;
}
input[type="radio"]:checked + .step-select__label {
color: #fff;
background-color: #337ab7;
}
input[type="radio"]:checked + .step-select__label:hover {
text-decoration: none;
}
.chart__axis-tick, .chart__axis-line {
stroke: darkgray;
}
.chart__axis-text {
font-family: sans-serif;
font-size: 14px;
}
.chart__area-plot {
stroke: steelblue;
stroke-width: 3px;
}
</style></head><body>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['React', 25],
['AngularJS', 25],
['Node.js', 25],
['jQuery', 25],
['Ruby', 20]
]);
var options = {
title: 'Features',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<h2 class="title">Chart Statistic</h2>
<hr id="nine"/>
<div class="container" id="inputFieldChartStatistic">
<div>
<label class="radio-inline"><input type="radio" name="optradio">
<select class="selectpicker" data-style="btn-info" multiple data-max-options="5" data-live-search="true">
<optgroup label="Feature">
<option>PHP</option>
<option>CSS</option>
<option>HTML</option>
<option>CSS 3</option>
<option>Bootstrap</option>
<option>JavaScript</option>
</optgroup>
</select>
</label>
</div>
<div>
<label class="radio-inline"><input type="radio" name="optradio">
<select class="selectpicker" data-style="btn-info" multiple data-max-options="3" data-live-search="true">
<optgroup label="Technology">
<option>Java</option>
<option>C#</option>
<option>Python</option>
</optgroup>
</select>
</label>
</div>
<div>
<button type="button" class="btn btn-primary">New Filter</button>
</div>
</div>
<hr id="eight"/>
<h3 id="usage" class="title">Usage</h3>
<div id="flex">
<div id="piechart_3d"></div>
<div class="container" id="js-app"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script>
<script src="https://fb.me/react-dom-15.0.2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.5.2/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux-thunk/2.0.1/redux-thunk.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.5/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/seedrandom/2.4.2/lib/alea.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.0/d3.min.js"></script>
<script src="https://codepen.io/clindsey/pen/GqXbJL.js"></script> <!-- animated-scale-wrapper-1.0.0 -->
<script src="https://codepen.io/clindsey/pen/OXoYBq.js"></script> <!-- animated-data-wrapper-1.0.0 -->
<script src="https://codepen.io/clindsey/pen/RRYmYY.js"></script> <!-- react-pie-chart-animated-1.0.0 -->
<script src="https://codepen.io/clindsey/pen/pbOXgN.js"></script> <!-- react-bar-chart-animated-1.0.0 -->
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
var _class, _temp, _class2, _temp2, _class3, _temp3, _class4, _temp4;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) {if (window.CP.shouldStopExecution(2)){break;} var source = arguments[i]; for (var key in source) {if (window.CP.shouldStopExecution(1)){break;} if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } }
window.CP.exitedLoop(1);
}
window.CP.exitedLoop(2);
return target; };
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
setTimeout(function () {
var _ReactRedux = ReactRedux;
var Provider = _ReactRedux.Provider;
var store = configureStore();
var datasets = [generateData(100, 20)];
datasets.push(datasets[0].slice(0).concat(generateData(50, 0, true)));
ReactDOM.render(React.createElement(
Provider,
{ store: store },
React.createElement(AppContainer, { datasets: datasets })
), document.getElementById('js-app'));
}, 0);
var random = function () {
var seed = 5625463739;
return function () {
return alea(seed++)();
};
}();
var normalDist = function normalDist() {
var halfRange = 0.5;
var r = function r() {
return random() + random();
};
var v = [r(), r(), r()];
var norm = (v.reduce(function (p, c) {
return p + c;
}, 0) - v.length) / v.length;
return norm * halfRange + halfRange;
};
function generateData(populationSize, controlSize) {
var doNormal = arguments.length <= 2 || arguments[2] === undefined ? false : arguments[2];
var randomFn = doNormal ? normalDist : random;
var groups = ['React', 'JS', 'NodeJS', 'CSS', 'HTML', 'Ajax'];
var baseData = d3.range(populationSize).map(function () {
return groups[Math.floor(randomFn() * groups.length)];
});
return baseData.concat(d3.range(controlSize).map(function () {
return 'Ruby';
}));
}
function countEntries(entries) {
var tally = {};
entries.forEach(function (label) {
tally[label] = (tally[label] || 0) + 1;
});
return tally;
}
function configureStore(initialState) {
var reducers = Redux.combineReducers({
datasetSelect: datasetSelectReducer
});
return Redux.createStore(reducers, initialState, Redux.applyMiddleware(ReduxThunk.default));
};
function datasetSelectReducer() {
var state = arguments.length <= 0 || arguments[0] === undefined ? { activeDatasetIndex: 0 } : arguments[0];
var action = arguments[1];
if (action.type === DatasetConstants.CHANGE_INDEX) {
var activeDatasetIndex = action.index;
return _extends({}, state, { activeDatasetIndex: activeDatasetIndex });
}
return state;
}
var DatasetConstants = {
CHANGE_INDEX: 'DATASET_CHANGE_INDEX'
};
var DatasetActions = {
changeIndex: function changeIndex(index) {
return function (dispatch) {
return dispatch({
type: DatasetConstants.CHANGE_INDEX,
index: index
});
};
}
};
var AppContainer = (_temp = _class = function (_React$Component) {
_inherits(AppContainer, _React$Component);
function AppContainer() {
_classCallCheck(this, AppContainer);
return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
}
AppContainer.prototype.render = function render() {
var _props = this.props;
var datasets = _props.datasets;
var activeDatasetIndex = _props.activeDatasetIndex;
var switchDataset = _props.switchDataset;
var data = datasets[activeDatasetIndex];
return React.createElement(
'div',
null,
React.createElement(
'p',
null,
'Select Dataset'
),
React.createElement(
'div',
{ className: 'row' },
React.createElement(
'div',
{ className: 'col-sm-2' },
React.createElement(DatasetSelectComponent, { datasets: datasets, activeDatasetIndex: activeDatasetIndex, switchDataset: switchDataset })
),
React.createElement(
'div',
{ className: 'col-sm-4' },
React.createElement(PieChartComponent, { data: data, size: [320, 320], margins: [10, 10, 10, 10] })
),
React.createElement(
'div',
{ className: 'col-sm-6' },
React.createElement(BarChartComponent, { data: data, size: [480, 320], margins: [42, 42, 42, 42] })
)
)
);
};
return AppContainer;
}(React.Component), _class.propTypes = {
activeDatasetIndex: React.PropTypes.number.isRequired,
datasets: React.PropTypes.array.isRequired
}, _temp);
AppContainer = ReactRedux.connect(function (state, _ref) {
var datasets = _ref.datasets;
var activeDatasetIndex = state.datasetSelect.activeDatasetIndex;
return {
activeDatasetIndex: activeDatasetIndex,
datasets: datasets
};
}, {
switchDataset: DatasetActions.changeIndex
})(AppContainer);
var DatasetSelectComponent = (_temp2 = _class2 = function (_React$Component2) {
_inherits(DatasetSelectComponent, _React$Component2);
function DatasetSelectComponent() {
_classCallCheck(this, DatasetSelectComponent);
return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments));
}
DatasetSelectComponent.prototype.onClick = function onClick(datasetIndex) {
var _this3 = this;
return function () {
_this3.props.switchDataset(datasetIndex);
};
};
DatasetSelectComponent.prototype.render = function render() {
return React.createElement(
'div',
null,
React.createElement(
'form',
{ className: 'dataset-selector' },
React.createElement(
'div',
{ className: 'radio' },
React.createElement(
'label',
null,
React.createElement('input', {
defaultChecked: true,
name: 'step-select',
onClick: this.onClick(0),
type: 'radio'
}),
' ',
React.createElement(
'span',
{ className: 'step-select__label' },
'Data A'
)
)
),
React.createElement(
'div',
{ className: 'radio' },
React.createElement(
'label',
null,
React.createElement('input', {
name: 'step-select',
onClick: this.onClick(1),
type: 'radio'
}),
' ',
React.createElement(
'span',
{ className: 'step-select__label' },
'Data B'
)
)
)
)
);
};
return DatasetSelectComponent;
}(React.Component), _class2.propTypes = {
activeDatasetIndex: React.PropTypes.number.isRequired,
datasets: React.PropTypes.array.isRequired,
switchDataset: React.PropTypes.func.isRequired
}, _temp2);
var BarChartComponent = (_temp3 = _class3 = function (_React$Component3) {
_inherits(BarChartComponent, _React$Component3);
function BarChartComponent() {
_classCallCheck(this, BarChartComponent);
return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments));
}
BarChartComponent.prototype.render = function render() {
var data = countEntries(this.props.data);
var _props2 = this.props;
var size = _props2.size;
var margins = _props2.margins;
return React.createElement(AnimatedBarChart, { data: data, size: size, margins: margins });
};
return BarChartComponent;
}(React.Component), _class3.propTypes = {
data: React.PropTypes.array.isRequired,
margins: React.PropTypes.array.isRequired,
size: React.PropTypes.array.isRequired
}, _temp3);
var PieChartComponent = (_temp4 = _class4 = function (_React$Component4) {
_inherits(PieChartComponent, _React$Component4);
function PieChartComponent() {
_classCallCheck(this, PieChartComponent);
return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments));
}
PieChartComponent.prototype.render = function render() {
var data = countEntries(this.props.data);
var _props3 = this.props;
var size = _props3.size;
var margins = _props3.margins;
return React.createElement(AnimatedPieChart, { data: data, size: size, margins: margins });
};
return PieChartComponent;
}(React.Component), _class4.propTypes = {
data: React.PropTypes.array.isRequired,
margins: React.PropTypes.array.isRequired,
size: React.PropTypes.array.isRequired
}, _temp4);
//# sourceURL=pen.js
</script>
</body></html>
