FluxTabulate

Developer
Not Important
Size
10,632 Kb
Views
38,456
  1. FluxTabulate Previews
  2. FluxTabulate HTML Codes
  3. FluxTabulate CSS Codes
  4. FluxTabulate JS Codes

How do I make an fluxtabulate?

A flux and react app that tabulates and graphs entries for a data store as it updates. Multiple views generate actions. What is a fluxtabulate? How do you make a fluxtabulate? This script and codes were developed by Not Important on 13 July 2022, Wednesday.

FluxTabulate Previews
IQ Test

FluxTabulate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fluxTabulate</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container" id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/flux/2.1.1/Flux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/4.2.11/EventEmitter.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/classnames/2.1.3/index.min.js'></script>
<script src='js/vnjwqb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.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/jquery/3.0.0-alpha1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

FluxTabulate - Script Codes CSS Codes

body { padding: 20px 0;
}
svg { margin: 20px auto 0; display: block;
}
.container { min-width: 510px;
}
.nav-tabs { margin-top: 20px;
}
.chart__text { letter-spacing: 2px; fill: #fff; font-family: sans-serif; text-shadow: 0 0 3px #000;
}
.table-hover .btn-link { visibility: hidden;
}
.table-hover tr:hover .btn-link { visibility: visible;
}
.arc { stroke: #fff;
}

FluxTabulate - Script Codes JS Codes

'use strict';
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 TabulateApp = require('components/TabulateApp'); React.render(React.createElement(TabulateApp, null), document.getElementById('app'));
}, 0);
define('colorMaker', function (module) { module.exports = function (seed) { return '#' + Math.floor(alea(seed)() * 16777215).toString(16); };
});
define('dispatchers/app', function (module) { module.exports = new Flux.Dispatcher();
});
define('components/DataInsert', function (module) { var DataActions = require('actions/Data'); var DataInsert = function (_React$Component) { _inherits(DataInsert, _React$Component); function DataInsert(props) { _classCallCheck(this, DataInsert); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { value: '' }; _this._onSubmit = _this._onSubmit.bind(_this); _this._onChange = _this._onChange.bind(_this); return _this; } DataInsert.prototype.render = function render() { return React.createElement( 'form', { onSubmit: this._onSubmit }, React.createElement( 'div', { className: 'form-group' }, React.createElement('input', { type: 'text', className: 'form-control', placeholder: 'Add New Value', onChange: this._onChange, value: this.state.value, autoFocus: true }) ) ); }; DataInsert.prototype._onChange = function _onChange(event) { this.setState({ value: event.target.value }); }; DataInsert.prototype._onSubmit = function _onSubmit(event) { event.preventDefault(); this._save(); }; DataInsert.prototype._save = function _save() { DataActions.add(this.state.value); this.setState({ value: '' }); }; return DataInsert; }(React.Component); module.exports = DataInsert;
});
define('components/TabulateApp', function (module) { var DataInsert = require('components/DataInsert'); var UniqueList = require('components/tables/UniqueList'); var AggregateList = require('components/tables/AggregateList'); var BarChart = require('components/charts/BarChart'); var PieChart = require('components/charts/PieChart'); var DataActions = require('actions/Data'); var dataStore = require('stores/data'); var getDataState = function getDataState() { return { allData: dataStore.getAll(), aggregateData: dataStore.getAggregates() }; }; var TabulateApp = function (_React$Component2) { _inherits(TabulateApp, _React$Component2); function TabulateApp(props) { _classCallCheck(this, TabulateApp); var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this2.state = getDataState(); _this2._onChange = _this2._onChange.bind(_this2); return _this2; } TabulateApp.prototype.componentDidMount = function componentDidMount() { dataStore.addChangeListener(this._onChange); var rng = alea(5625463739); for (var i = 0; i < 20; i++) { DataActions.add(String.fromCharCode(97 + ~ ~(rng() * 6))); } }; TabulateApp.prototype.componentWillUnmount = function componentWillUnmount() { dataStore.removeChangeListener(this._onChange); }; TabulateApp.prototype.render = function render() { var chartWidth = 480; var chartHeight = 120; return React.createElement( 'div', null, React.createElement( 'div', { className: 'row' }, React.createElement( 'div', { className: 'col-md-12' }, React.createElement(DataInsert, null) ) ), React.createElement( 'div', { className: 'row' }, React.createElement( 'div', { className: 'col-md-12' }, React.createElement( 'button', { className: 'btn btn-danger', onClick: this._onClick }, 'Clear All Data' ) ) ), React.createElement( 'div', { className: 'row' }, React.createElement( 'div', { className: 'col-md-12' }, React.createElement( 'ul', { className: 'nav nav-tabs' }, React.createElement( 'li', { className: 'active' }, React.createElement( 'a', { href: '#bar', 'data-toggle': 'tab' }, 'Bar Chart' ) ), React.createElement( 'li', null, React.createElement( 'a', { href: '#pie', 'data-toggle': 'tab' }, 'Pie Chart' ) ) ), React.createElement( 'div', { className: 'tab-content' }, React.createElement( 'div', { className: 'tab-pane active', id: 'bar' }, React.createElement(BarChart, { aggregateData: this.state.aggregateData, width: chartWidth, height: chartHeight }) ), React.createElement( 'div', { className: 'tab-pane', id: 'pie' }, React.createElement(PieChart, { aggregateData: this.state.aggregateData, width: chartWidth, height: chartHeight }) ) ) ) ), React.createElement( 'div', { className: 'row' }, React.createElement( 'div', { className: 'col-xs-6' }, React.createElement(UniqueList, { allData: this.state.allData }) ), React.createElement( 'div', { className: 'col-xs-6' }, React.createElement(AggregateList, { aggregateData: this.state.aggregateData }) ) ) ); }; TabulateApp.prototype._onClick = function _onClick() { DataActions.clear(); }; TabulateApp.prototype._onChange = function _onChange() { this.setState(getDataState); }; return TabulateApp; }(React.Component); module.exports = TabulateApp;
});
// BEGIN DATA
define('constants/Data', function (module) { module.exports = { DATA_INSERT: 'DATA_INSERT', DATA_CLEAR: 'DATA_CLEAR', DATA_REMOVE_VALUE: 'DATA_REMOVE_ITEM', DATA_REMOVE_AGGREGATE: 'DATA_REMOVE_AGGREGATE' };
});
define('stores/data', function (module) { var appDispatcher = require('dispatchers/app'); var DataConstants = require('constants/Data'); var CHANGE_EVENT = 'change'; var _data = {}; var _aggregates = {}; var add = function add(datum) { var id = (+new Date() + ~ ~(Math.random() * 999999)).toString(36); _data[id] = { value: datum }; var count = _aggregates[datum] || 0; _aggregates[datum] = count + 1; }; var clear = function clear() { _data = {}; _aggregates = {}; }; var remove = function remove(id) { var value = _data[id].value; var count = _aggregates[value]; if (count > 1) { _aggregates[value] = count - 1; } else { delete _aggregates[value]; } delete _data[id]; }; var removeAll = function removeAll(value) { for (var id in _data) { if (_data[id].value === value) { remove(id); } } delete _aggregates[value]; }; var DataStore = function (_EventEmitter) { _inherits(DataStore, _EventEmitter); function DataStore() { _classCallCheck(this, DataStore); return _possibleConstructorReturn(this, _EventEmitter.apply(this, arguments)); } DataStore.prototype.getAll = function getAll() { return _data; }; DataStore.prototype.getAggregates = function getAggregates() { return _aggregates; }; DataStore.prototype.emitChange = function emitChange() { this.emit(CHANGE_EVENT); }; DataStore.prototype.addChangeListener = function addChangeListener(callback) { this.on(CHANGE_EVENT, callback); }; DataStore.prototype.removeChangeListener = function removeChangeListener(callback) { this.removeListener(CHANGE_EVENT, callback); }; return DataStore; }(EventEmitter); var dataStore = new DataStore(); appDispatcher.register(function (action) { var value = null; switch (action.actionType) { case DataConstants.DATA_INSERT: value = action.value; add(value); dataStore.emitChange(); break; case DataConstants.DATA_CLEAR: clear(); dataStore.emitChange(); break; case DataConstants.DATA_REMOVE_VALUE: var id = action.id; remove(id); dataStore.emitChange(); break; case DataConstants.DATA_REMOVE_AGGREGATE: value = action.value; removeAll(value); dataStore.emitChange(); break; default: 'no op'; }; }); module.exports = dataStore;
});
define('actions/Data', function (module) { var appDispatcher = require('dispatchers/app'); var DataConstants = require('constants/Data'); var DataActions = { add: function add(datum) { appDispatcher.dispatch({ actionType: DataConstants.DATA_INSERT, value: datum }); }, clear: function clear() { appDispatcher.dispatch({ actionType: DataConstants.DATA_CLEAR }); }, removeValue: function removeValue(id) { appDispatcher.dispatch({ actionType: DataConstants.DATA_REMOVE_VALUE, id: id }); }, removeAggregates: function removeAggregates(value) { appDispatcher.dispatch({ actionType: DataConstants.DATA_REMOVE_AGGREGATE, value: value }); } }; module.exports = DataActions;
});
// END DATA
// BEGIN CHARTS
define('components/charts/Base', function (module) { // http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/ var Base = function (_React$Component3) { _inherits(Base, _React$Component3); function Base() { _classCallCheck(this, Base); return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); } Base.prototype.render = function render() { return React.createElement( 'svg', { width: this.props.width, height: this.props.height }, this.props.children ); }; return Base; }(React.Component); Base.propTypes = { width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired }; module.exports = Base;
});
define('components/charts/Bar', function (module) { var Bar = function (_React$Component4) { _inherits(Bar, _React$Component4); function Bar() { _classCallCheck(this, Bar); return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments)); } Bar.prototype.render = function render() { var x = this.props.offset; var y = this.props.availableHeight - this.props.height; var textX = this.props.width / 2; return React.createElement( 'g', { transform: 'translate(' + x + ', ' + y + ')' }, React.createElement('rect', { fill: this.props.color, width: this.props.width, height: this.props.height }), React.createElement( 'text', { className: 'chart__text', x: textX, y: '0', dy: '1.35em', textAnchor: 'middle' }, this.props.label ) ); }; return Bar; }(React.Component); Bar.propTypes = { color: React.PropTypes.string.isRequired, width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired, availableHeight: React.PropTypes.number.isRequired, offset: React.PropTypes.number.isRequired, label: React.PropTypes.string.isRequired }; module.exports = Bar;
});
define('components/charts/BarChart', function (module) { var Base = require('components/charts/Base'); var BarDataSeries = require('components/charts/BarDataSeries'); var BarChart = function (_React$Component5) { _inherits(BarChart, _React$Component5); function BarChart() { _classCallCheck(this, BarChart); return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments)); } BarChart.prototype.render = function render() { return React.createElement( Base, { width: this.props.width, height: this.props.height }, React.createElement(BarDataSeries, { data: this.props.aggregateData, width: this.props.width, height: this.props.height }) ); }; return BarChart; }(React.Component); BarChart.propTypes = { width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired, aggregateData: React.PropTypes.object.isRequired }; module.exports = BarChart;
});
define('components/charts/BarDataSeries', function (module) { var Bar = require('components/charts/Bar'); var colorMaker = require('colorMaker'); var BarDataSeries = function (_React$Component6) { _inherits(BarDataSeries, _React$Component6); function BarDataSeries() { _classCallCheck(this, BarDataSeries); return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments)); } BarDataSeries.prototype.render = function render() { var keys = Object.keys(this.props.data); var data = []; for (var _iterator = keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) { var _ref; if (_isArray) { if (_i >= _iterator.length) break; _ref = _iterator[_i++]; } else { _i = _iterator.next(); if (_i.done) break; _ref = _i.value; } var key = _ref; data.push(this.props.data[key]); } var yScale = d3.scale.linear().domain([0, d3.max(data)]).range([0, this.props.height]); var xScale = d3.scale.ordinal().domain(d3.range(data.length)).rangeRoundBands([0, this.props.width], 0.05); var props = this.props; var bars = data.map(function (point, index) { var color = colorMaker(keys[index]); return React.createElement(Bar, { height: yScale(point), width: xScale.rangeBand(), offset: xScale(index), availableHeight: props.height, color: color, key: index, label: keys[index] }); }); return React.createElement( 'g', null, bars ); }; return BarDataSeries; }(React.Component); BarDataSeries.propTypes = { data: React.PropTypes.object.isRequired, width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired }; module.exports = BarDataSeries;
});
define(['components/charts/PieSlice'], function (module) { var PieSlice = function (_React$Component7) { _inherits(PieSlice, _React$Component7); function PieSlice() { _classCallCheck(this, PieSlice); return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments)); } PieSlice.prototype.render = function render() { var arc = d3.svg.arc().outerRadius(this.props.outerRadius).innerRadius(this.props.innerRadius); return React.createElement( 'g', { className: 'arc' }, React.createElement('path', { d: arc(this.props.point), fill: this.props.color }), React.createElement( 'text', { className: 'chart__text', transform: 'translate(' + arc.centroid(this.props.point) + ')', dy: '0.35em', textAnchor: 'middle' }, this.props.label ) ); }; return PieSlice; }(React.Component); PieSlice.propTypes = { innerRadius: React.PropTypes.number.isRequired, outerRadius: React.PropTypes.number.isRequired, color: React.PropTypes.string.isRequired, point: React.PropTypes.object.isRequired, label: React.PropTypes.string.isRequired }; module.exports = PieSlice;
});
define(['components/charts/PieDataSeries'], function (module) { var PieSlice = require('components/charts/PieSlice'); var colorMaker = require('colorMaker'); var PieDataSeries = function (_React$Component8) { _inherits(PieDataSeries, _React$Component8); function PieDataSeries() { _classCallCheck(this, PieDataSeries); return _possibleConstructorReturn(this, _React$Component8.apply(this, arguments)); } PieDataSeries.prototype.render = function render() { var width = this.props.width; var height = this.props.height; var innerRadius = 20; var outerRadius = Math.min(width, height) / 2; var pie = d3.layout.pie(); var keys = Object.keys(this.props.data); var data = []; for (var _iterator2 = keys, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) { var _ref2; if (_isArray2) { if (_i2 >= _iterator2.length) break; _ref2 = _iterator2[_i2++]; } else { _i2 = _iterator2.next(); if (_i2.done) break; _ref2 = _i2.value; } var key = _ref2; data.push(this.props.data[key]); } var slices = pie(data).map(function (point, index) { var color = colorMaker(keys[index]); return React.createElement(PieSlice, { point: point, data: point.data, key: index, innerRadius: innerRadius, outerRadius: outerRadius, color: color, label: keys[index] }); }); return React.createElement( 'g', { transform: 'translate(' + width / 2 + ', ' + height / 2 + ')' }, slices ); }; return PieDataSeries; }(React.Component); PieDataSeries.propTypes = { data: React.PropTypes.object.isRequired, width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired }; module.exports = PieDataSeries;
});
define(['components/charts/PieChart'], function (module) { var Base = require('components/charts/Base'); var PieDataSeries = require('components/charts/PieDataSeries'); var PieChart = function (_React$Component9) { _inherits(PieChart, _React$Component9); function PieChart() { _classCallCheck(this, PieChart); return _possibleConstructorReturn(this, _React$Component9.apply(this, arguments)); } PieChart.prototype.render = function render() { return React.createElement( Base, { width: this.props.width, height: this.props.height }, React.createElement(PieDataSeries, { data: this.props.aggregateData, width: this.props.width, height: this.props.height }) ); }; return PieChart; }(React.Component); PieChart.propTypes = { width: React.PropTypes.number.isRequired, height: React.PropTypes.number.isRequired, aggregateData: React.PropTypes.object.isRequired }; module.exports = PieChart;
});
// END CHARTS
// BEGIN TABLES
define('components/tables/DataRow', function (module) { var DataActions = require('actions/Data'); var DataRow = function (_React$Component10) { _inherits(DataRow, _React$Component10); function DataRow(props) { _classCallCheck(this, DataRow); var _this11 = _possibleConstructorReturn(this, _React$Component10.call(this, props)); _this11._onClick = _this11._onClick.bind(_this11); return _this11; } DataRow.prototype.render = function render() { return React.createElement( 'tr', null, React.createElement( 'td', null, this.props.value ), React.createElement( 'td', null, React.createElement( 'button', { className: 'btn btn-link', onClick: this._onClick }, 'remove' ) ) ); }; DataRow.prototype._onClick = function _onClick() { DataActions.removeValue(this.props.id); }; return DataRow; }(React.Component); DataRow.propTypes = { value: React.PropTypes.any.isRequired, id: React.PropTypes.string.isRequired }; module.exports = DataRow;
});
define('components/tables/AggregateRow', function (module) { var DataActions = require('actions/Data'); var AggregateRow = function (_React$Component11) { _inherits(AggregateRow, _React$Component11); function AggregateRow(props) { _classCallCheck(this, AggregateRow); var _this12 = _possibleConstructorReturn(this, _React$Component11.call(this, props)); _this12._onClick = _this12._onClick.bind(_this12); return _this12; } AggregateRow.prototype.render = function render() { return React.createElement( 'tr', null, React.createElement( 'td', null, this.props.value ), React.createElement( 'td', null, this.props.count ), React.createElement( 'td', null, React.createElement( 'button', { className: 'btn btn-link', onClick: this._onClick }, 'remove' ) ) ); }; AggregateRow.prototype._onClick = function _onClick() { DataActions.removeAggregates(this.props.value); }; return AggregateRow; }(React.Component); AggregateRow.propTypes = { value: React.PropTypes.any.isRequired, count: React.PropTypes.number.isRequired }; module.exports = AggregateRow;
});
define('components/tables/AggregateList', function (module) { var AggregateRow = require('components/tables/AggregateRow'); var AggregateList = function (_React$Component12) { _inherits(AggregateList, _React$Component12); function AggregateList() { _classCallCheck(this, AggregateList); return _possibleConstructorReturn(this, _React$Component12.apply(this, arguments)); } AggregateList.prototype.render = function render() { if (Object.keys(this.props.aggregateData).length < 1) { return null; } var aggregateData = this.props.aggregateData; var dataRows = []; for (var value in aggregateData) { dataRows.push(React.createElement(AggregateRow, { key: value, count: aggregateData[value], value: value, id: value })); } return React.createElement( 'table', { className: 'table table-condensed table-hover' }, React.createElement( 'thead', null, React.createElement( 'tr', null, React.createElement( 'th', { colSpan: '3' }, 'Aggregate' ) ) ), React.createElement( 'tbody', null, dataRows ) ); }; return AggregateList; }(React.Component); AggregateList.propTypes = { aggregateData: React.PropTypes.object.isRequired }; module.exports = AggregateList;
});
define('components/tables/UniqueList', function (module) { var DataRow = require('components/tables/DataRow'); var UniqueList = function (_React$Component13) { _inherits(UniqueList, _React$Component13); function UniqueList() { _classCallCheck(this, UniqueList); return _possibleConstructorReturn(this, _React$Component13.apply(this, arguments)); } UniqueList.prototype.render = function render() { if (Object.keys(this.props.allData).length < 1) { return null; } var allData = this.props.allData; var dataRows = []; for (var key in allData) { dataRows.push(React.createElement(DataRow, { key: key, value: allData[key].value, id: key })); } return React.createElement( 'table', { className: 'table table-condensed table-hover' }, React.createElement( 'thead', null, React.createElement( 'tr', null, React.createElement( 'th', { colSpan: '2' }, 'Individual' ) ) ), React.createElement( 'tbody', null, dataRows ) ); }; return UniqueList; }(React.Component); UniqueList.propTypes = { allData: React.PropTypes.object.isRequired }; module.exports = UniqueList;
});
// END TABLES
FluxTabulate - Script Codes
FluxTabulate - Script Codes
Home Page Home
Developer Not Important
Username clindsey
Uploaded July 13, 2022
Rating 3
Size 10,632 Kb
Views 38,456
Do you need developer help for FluxTabulate?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Not Important (clindsey) Script Codes
Name
Learning-shaders-1.0.0
Wave-pendulum
Tunnel-of-madness-1.0.0
Flame-view-1.0.0
FlowField
WorldColors
Uber-vs-zadvorsky-1.0.0
Learning-shader-passes-1.0.0
BubbleCache
SquiggleNav
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!