diff --git a/client/package-lock.json b/client/package-lock.json index 8da82e5cf1..27e8eb2d20 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -3981,19 +3981,6 @@ "resolved": "https://registry.npmjs.org/check-error/-/check-error-1.0.2.tgz", "integrity": "sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=" }, - "d3": { - "version": "3.5.17", - "resolved": "https://registry.npmjs.org/d3/-/d3-3.5.17.tgz", - "integrity": "sha1-vEZ0gAQ3iyGjYMn8fPUjF5B2L7g=" - }, - "d3-3": { - "version": "0.0.0", - "resolved": "https://registry.npmjs.org/d3-3/-/d3-3-0.0.0.tgz", - "integrity": "sha1-xrj+3d590sqJMiKxJ7n9qY41Aq0=", - "requires": { - "d3": "^3" - } - }, "cheerio": { "version": "1.0.0-rc.3", "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.3.tgz", @@ -4043,7 +4030,8 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true + "bundled": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -4061,11 +4049,13 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true + "bundled": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -4078,15 +4068,18 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "concat-map": { "version": "0.0.1", - "bundled": true + "bundled": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true + "bundled": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -4189,7 +4182,8 @@ }, "inherits": { "version": "2.0.3", - "bundled": true + "bundled": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -4199,6 +4193,7 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -4211,17 +4206,20 @@ "minimatch": { "version": "3.0.4", "bundled": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true + "bundled": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -4238,6 +4236,7 @@ "mkdirp": { "version": "0.5.1", "bundled": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -4310,7 +4309,8 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true + "bundled": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -4320,6 +4320,7 @@ "once": { "version": "1.4.0", "bundled": true, + "optional": true, "requires": { "wrappy": "1" } @@ -4395,7 +4396,8 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true + "bundled": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -4425,6 +4427,7 @@ "string-width": { "version": "1.0.2", "bundled": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -4442,6 +4445,7 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -4480,11 +4484,13 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true + "bundled": true, + "optional": true }, "yallist": { "version": "3.0.3", - "bundled": true + "bundled": true, + "optional": true } } }, @@ -14658,7 +14664,7 @@ "dependencies": { "minimist": { "version": "1.2.0", - "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz", "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=" } } diff --git a/client/package.json b/client/package.json index 18dada10cc..2d07dd5e0b 100644 --- a/client/package.json +++ b/client/package.json @@ -20,7 +20,6 @@ "axios": "^0.19.0", "browser-cookies": "^1.2.0", "chai": "^4.2.0", - "d3-3": "0.0.0", "date-fns": "^1.30.1", "entities": "^1.1.2", "enzyme": "^3.10.0", diff --git a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.css b/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.css deleted file mode 100644 index 5291016152..0000000000 --- a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.css +++ /dev/null @@ -1,39 +0,0 @@ -.article .d3-chart { - position: relative; -} - -.article div.tooltip { - position: absolute; - text-align: center; - width: 80px; - padding: 5px; - font: 12px sans-serif; - background: rgba(0, 0, 0, 0.8); - border: 0px; - border-radius: 8px; - pointer-events: none; - color: #fff; - display: table; -} - -.article div.tooltip > div { - display: table-cell; - vertical-align: middle; -} - -.article div.tooltip:after { - box-sizing: border-box; - font-size: 10px; - width: 100%; - line-height: 1; - color: rgba(0, 0, 0, 0.8); - content: "\25BC"; - position: absolute; - text-align: center; - bottom: -9px; - left: 0; -} - -.select-city { - display: block; -} \ No newline at end of file diff --git a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.js b/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.js deleted file mode 100644 index 5dd44a58c5..0000000000 --- a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.js +++ /dev/null @@ -1,228 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import { graphql } from 'gatsby'; - -import ArticleLayout from '../../ArticleLayout'; - -import CostCalculatorChart from './CostCalculatorChart'; -import './CodingBootcampCostCalculator.css'; - -const propTypes = { - data: PropTypes.object -}; - -class CostCalculator extends React.Component { - state = { - cities: [], - incomes: [], - city: null, - cityLabel: '_______', - lastYearsIncome: null, - lastYearsIncomeLabel: '_______', - bootcamps: null - }; - - initComponent() { - const bootcamps = JSON.parse( - document.getElementById('bootcamps').innerHTML - ); - - document - .getElementById('bootcamps-data-link') - .setAttribute( - 'href', - `data:text/plain;charset=utf-8,${encodeURIComponent( - JSON.stringify(bootcamps, null, 2) - )}` - ); - - this.setState({ - bootcamps: bootcamps, - cities: bootcamps - .reduce((previous, current) => { - return previous.concat(current.cities); - }, []) - .filter((city, idx, me) => { - return me.indexOf(city) === idx; - }) - .sort(), - incomes: [ - '0', - '10000', - '20000', - '30000', - '40000', - '50000', - '60000', - '70000', - '80000', - '90000', - '100000', - '120000', - '140000', - '160000', - '180000', - '200000' - ] - }); - - const selectCityDiv = document.getElementById('select-city'); - const selectIncomeDiv = document.getElementById('select-income'); - const cityLabelSpan = document.getElementById('city-label'); - const lastYearsIncomeLabelSpan = document.getElementById( - 'last-years-income-label' - ); - const chartComponentDiv = document.getElementById('chart-component'); - this.setState({ - init: true, - selectCityDiv, - selectIncomeDiv, - cityLabelSpan, - lastYearsIncomeLabelSpan, - chartComponentDiv - }); - - this.handleCitySelector = this.handleCitySelector.bind(this); - this.handleIncomeSelector = this.handleIncomeSelector.bind(this); - } - - componentDidMount() { - this.initComponent(); - } - - handleCitySelector(event) { - let el = event.target; - this.setState({ - city: event.target.value, - cityLabel: el.options[el.selectedIndex].text - }); - } - - handleIncomeSelector(event) { - let el = event.target; - this.setState({ - lastYearsIncome: parseInt(event.target.value, 10), - lastYearsIncomeLabel: el.options[el.selectedIndex].text - }); - } - - renderSelectCity() { - return ( - - ); - } - - renderSelectIncome() { - return ( - - ); - } - - renderChartComponent() { - return ( - - ); - } - - render() { - if (!this.state.init) { - return null; - } - return ( -
- {ReactDOM.createPortal( - this.renderSelectCity(), - this.state.selectCityDiv - )} - {ReactDOM.createPortal( - this.renderSelectIncome(), - this.state.selectIncomeDiv - )} - {ReactDOM.createPortal(this.state.cityLabel, this.state.cityLabelSpan)} - {ReactDOM.createPortal( - this.state.lastYearsIncomeLabel, - this.state.lastYearsIncomeLabelSpan - )} - {ReactDOM.createPortal( - this.renderChartComponent(), - this.state.chartComponentDiv - )} -
- ); - } -} - -const CodingBootcampCostCalculator = props => { - const { - data: { - markdownRemark: { html } - } - } = props; - return ( - -
- - - ); -}; - -CodingBootcampCostCalculator.displayName = 'CodingBootcampCostCalculator'; -CodingBootcampCostCalculator.propTypes = propTypes; -export default CodingBootcampCostCalculator; - -export const pageQuery = graphql` - query CodingBootcampCostCalculator($id: String!) { - markdownRemark(id: { eq: $id }) { - html - ...ArticleLayout - } - } -`; diff --git a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChart.js b/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChart.js deleted file mode 100644 index e5118c020a..0000000000 --- a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChart.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { updateCalculator } from './CostCalculatorChartD3.js'; - -const propTypes = { - bootcamps: PropTypes.array, - city: PropTypes.string, - lastYearsIncome: PropTypes.number -}; - -class CostCalculatorChart extends React.Component { - constructor(props) { - super(props); - this.rootRef = React.createRef(); - } - - componentDidMount() { - this.updateChart(); - } - - componentDidUpdate() { - this.updateChart(); - } - - updateChart() { - const { bootcamps, city, lastYearsIncome } = this.props; - if (city !== null && lastYearsIncome !== null) { - const node = this.rootRef.current; - updateCalculator(node, bootcamps, city, lastYearsIncome); - } - } - - render() { - return
; - } -} - -CostCalculatorChart.propTypes = propTypes; - -export default CostCalculatorChart; diff --git a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChartD3.js b/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChartD3.js deleted file mode 100644 index bc6b953d29..0000000000 --- a/client/src/templates/Guide/components/calculators/CodingBootcampCostCalculator/CostCalculatorChartD3.js +++ /dev/null @@ -1,240 +0,0 @@ -import d3 from 'd3-3'; - -export function updateCalculator(d3Node, bootcamps, city, lastYearsIncome) { - d3Node.className = 'd3-chart'; - var categoryNames = [ - 'Lost Wages', - 'Financing Cost', - 'Housing Cost', - 'Tuition / Est. Wage Garnishing' - ]; - // Tooltips - var tip = d3.select(d3Node).select('div.tooltip'); - if (tip.empty()) { - tip = d3 - .select(d3Node) - .append('div') - .attr('class', 'tooltip') - .style('opacity', 0); - } - var xAxis = d3.svg.axis().orient('bottom'); - var yAxis = d3.svg.axis().orient('left'); - bootcamps.forEach(function(camp) { - var x0 = 0; - var weeklyHousing; - if (camp.cities.indexOf(city) > -1) { - weeklyHousing = 0; - } else { - weeklyHousing = +camp.housing; - } - camp.mapping = [ - { - name: camp.name, - label: 'Tuition / Est. Wage Garnishing', - value: +camp.cost, - x0: x0, - x1: (x0 += +camp.cost) - }, - { - name: camp.name, - label: 'Financing Cost', - value: camp.finance ? +Math.floor(camp.cost * 0.09519) : 0, - x0: camp.finance ? +camp.cost : 0, - x1: camp.finance ? (x0 += +Math.floor(camp.cost * 0.09519)) : 0 - }, - { - name: camp.name, - label: 'Housing Cost', - value: +weeklyHousing * camp.weeks, - x0: camp.finance ? +Math.floor(camp.cost * 1.09519) : camp.cost, - x1: (x0 += weeklyHousing * camp.weeks) - }, - { - name: camp.name, - label: 'Lost Wages', - value: +Math.floor((camp.weeks * lastYearsIncome) / 50), - x0: camp.finance - ? +(Math.floor(camp.cost * 1.09519) + weeklyHousing * camp.weeks) - : +camp.cost + weeklyHousing * camp.weeks, - x1: (x0 += +(Math.floor(camp.weeks * lastYearsIncome) / 50)) - } - ]; - camp.total = camp.mapping[camp.mapping.length - 1].x1; - }); - bootcamps.sort(function(a, b) { - return a.total - b.total; - }); - var xStackMax = d3.max(bootcamps, function(d) { - return d.total; - }); - var margin = { - top: 30, - right: 60, - bottom: 60, - left: 155 - }, - width = 650 - margin.left - margin.right, - height = 1200 - margin.top - margin.bottom; - var xScale = d3.scale - .linear() - .domain([0, xStackMax]) - .rangeRound([0, width]); - var y0Scale = d3.scale - .ordinal() - .domain( - bootcamps.map(function(d) { - return d.name; - }) - ) - .rangeRoundBands([0, height], 0.1); - var color = d3.scale - .ordinal() - .range(['#215f1e', '#5f5c1e', '#1e215f', '#5c1e5f']) - .domain(categoryNames); - var svg = d3 - .select(d3Node) - .select('svg') - .select('g'); - var selection, rect; - if (svg.empty()) { - svg = d3 - .select(d3Node) - .append('svg') - .attr('width', width + margin.left + margin.right) - .attr('height', height + margin.top + margin.bottom) - .append('g') - .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); - // Legends - var legend = svg - .selectAll('.legend') - .data(categoryNames.slice().reverse()) - .enter() - .append('g') - .attr('class', 'legend') - .attr('transform', function(d, i) { - return 'translate(30,' + i * y0Scale.rangeBand() * 1.1 + ')'; - }); - legend - .append('rect') - .attr('x', width - y0Scale.rangeBand()) - .attr('width', y0Scale.rangeBand()) - .attr('height', y0Scale.rangeBand()) - .style('fill', color) - .style('stroke', 'white'); - legend - .append('text') - .attr('x', width - y0Scale.rangeBand() * 1.2) - .attr('y', 12) - .attr('dy', '.35em') - .style('text-anchor', 'end') - .text(function(d) { - return d; - }); - } - selection = svg.selectAll('.series').data(bootcamps); - if (!selection.empty()) { - selection.exit().remove(); - } - selection - .enter() - .append('g') - .attr('class', 'series') - .attr('transform', function(d) { - return 'translate(0,' + y0Scale(d.name) + ')'; - }); - rect = selection.selectAll('rect').data(function(d) { - return d.mapping; - }); - if (!rect.empty()) { - rect.exit().remove(); - } - rect - .enter() - .append('rect') - .attr('class', 'series-part') - .attr('x', 0) - .attr('width', 0) - .attr('height', y0Scale.rangeBand()) - .style('fill', function(d) { - return color(d.label); - }) - .style('stroke', 'white') - .on('mouseover', function(d) { - var component = d3.select('.d3-chart'); - var componentPos = component[0][0].getBoundingClientRect(); - var box = this.getBoundingClientRect(); - var tooltip = component.select('.tooltip'); - - component - .select('.tooltip') - .transition() - .duration(200) - .style('opacity', 0.9); - component - .select('.tooltip') - .html('
' + d.label + '
$' + d.value + '
') - .style( - 'left', - box.left + - box.width / 2 - - componentPos.left - - tooltip[0][0].offsetWidth / 2 + - 'px' - ) - .style( - 'top', - box.top - componentPos.top - tooltip[0][0].offsetHeight - 10 + 'px' - ); - }) - .on('mouseout', function() { - d3.select('.d3-chart') - .select('.tooltip') - .transition() - .duration(500) - .style('opacity', 0); - }); - rect - .transition() - .delay(function(d, i) { - return i * 10; - }) - .attr('x', function(d) { - return xScale(d.x0); - }) - .attr('width', function(d) { - return xScale(d.x1 - d.x0); - }); - - // Axes - var svgXAxis = svg.select('.x.axis'); - var svgYAxis = svg.select('.y.axis'); - xAxis.scale(xScale); - yAxis.scale(y0Scale); - if (svgXAxis.empty() || svgYAxis.empty()) { - svg - .append('g') - .attr('class', 'y axis') - .call(yAxis); - svg - .append('g') - .attr('class', 'x axis') - .attr('transform', 'translate(0,' + height + ')') - .call(xAxis) - .selectAll('text') - .style('text-anchor', 'end') - .attr('dx', '-.8em') - .attr('dy', '.15em') - .attr('transform', 'rotate(-45)'); - } else { - svgXAxis - .call(xAxis) - .selectAll('text') - .style('text-anchor', 'end') - .attr('dx', '-.8em') - .attr('dy', '.15em') - .attr('transform', 'rotate(-45)'); - svgYAxis.call(yAxis); - } - - return d3Node; -} diff --git a/mock-guide/english/tools/calculators/coding-bootcamp-cost-calculator/index.md b/mock-guide/english/tools/calculators/coding-bootcamp-cost-calculator/index.md deleted file mode 100644 index a656907a24..0000000000 --- a/mock-guide/english/tools/calculators/coding-bootcamp-cost-calculator/index.md +++ /dev/null @@ -1,344 +0,0 @@ ---- -title: Coding Bootcamp Cost Calculator -component: calculators/CodingBootcampCostCalculator/CodingBootcampCostCalculator.js ---- -## Coding Bootcamp Cost Calculator - - -
- - -
- -### Coming from , and making , your true costs will be: -
- -
- - Save Data Source JSON - -
- -### Notes: -
    -
  1. - We assumed an APR of 6% and a term of 3 years. If you happen - to have around $15,000 in cash set aside for a coding - bootcamp, please ignore this cost. -
    2. -
  2. - We assume a cost of living of $500 for cities like San - Francisco and New York City, and $400 per week for - everywhere else. -
    3. -
  3. - The most substantial cost for most people is lost wages. A - 40-hour-per-week job at the US Federal minimum wage would - pay at least $15,000 per year. You can read more about - economic cost - - here - . -
    4. -
- -### Built by Suzanne Atkinson -
- Suzanne Atkinson selfie in front of the pool -
-
-

- Suzanne is an emergency medicine physician, triathlon - coach and web developer from Pittsburgh. You should -   - - follow her on Twitter - . -

-
- - diff --git a/package-lock.json b/package-lock.json index fff26c4c1e..5b1e6e74e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5304,7 +5304,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -5325,12 +5326,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5345,17 +5348,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -5472,7 +5478,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -5484,6 +5491,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5498,6 +5506,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -5505,12 +5514,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5529,6 +5540,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -5609,7 +5621,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -5621,6 +5634,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -5706,7 +5720,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -5742,6 +5757,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -5761,6 +5777,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -5804,12 +5821,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } },