inanimatedObjects · calebkress · Jul 21, 2018 · Jul 21, 2018 · Jul 21, 2018 · Jul 21, 2018
diff --git a/lib/ckLib/Perkolator/cardWithSlider.html b/lib/ckLib/Perkolator/cardWithSlider.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<script src="https://d3js.org/d3.v4.min.js"></script>
+<style>
+  #cardContainer {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -100px;
+    margin-left: -200px;
+    width: 400px;
+    height: 200px;
+    border: 1px solid black;
+  }
+
+  #sliderContainer, #bar {
+    width: 400px;
+    height: 100px;
+  }
+
+  #sliderContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  body {
+    font-family: sans-serif;
+    display: flex;
+    justify-content: center;
+  }
+
+  input.sliderMin, input.sliderMax {
+    width: 70px;
+  }
+
+  output.slider {
+    font-size: 18pt;
+    margin: 10px;
+  }
+
+  p {
+    font-size: 11pt;
+    margin: 0 auto;
+  }
+
+  .backgroundRect {
+    fill: none;
+    stroke: black;
+    stroke-width: 3;
+  }
+
+</style>
+</head>
+
+<body>
+  <div id="cardContainer">
+    <div id="bar"></div>
+    <div id="sliderContainer">
+      <output class="slider">$50,000</output>
+      <p>
+        min :
+        <input type="number" value="0" name="sliderMin" class="sliderRange sliderMin" />
+        <input type="range" value="0.5" max="1" step=".01" name="slider" class="slider" />
+        <input type="number" value="100000" name="sliderMax" class="sliderRange sliderMax" />
+        : max
+      </p>
+    </div>
+  </div>
+
+<script>
+var width = 400;
+var height = 100;
+var backBarWidth = 350;
+var sliderByCname = document.getElementsByClassName("slider");
+var min = document.getElementsByClassName('sliderMin');
+var max = document.getElementsByClassName('sliderMax');
+
+var svg = d3.select("div#bar")
+  .append("svg")
+  .attr("height", height)
+  .attr("width", width);
+
+svg.append("text")
+  .text("Sample Card")
+  .attr("class", "title")
+  .attr("x", 153.31)
+  .attr("y", 90);
+
+svg.append("rect")
+  .attr("class", "backgroundRect")
+  .attr("x", 25)
+  .attr("y", 10)
+  .attr("width", backBarWidth)
+  .attr("height", height / 2);
+
+svg.append("g")
+  .append("rect")
+  .attr("class", "barRect")
+  .attr("x", 26)
+  .attr("y", 11)
+  .attr("width", backBarWidth * 0.5)
+  .attr("height", (height / 2) - 2)
+  .attr("fill", "blue");
+
+
+d3.select("input[type=range].slider").on("input", function() {
+  svg.selectAll(".barRect")
+    .attr("width", this.value * backBarWidth);
+
+  var newValue = this.value * (max[0].value - min[0].value);
+
+  d3.select("output.slider")
+    .text(function(d) {
+      return "$" + d3.format(",")(d)
+    }(newValue));
+});
+
+d3.selectAll("input[type=number].sliderRange").on("change", function() {
+  var currDisplayVal = sliderByCname[0].value
+                       .split(",").join("").split("");
+  currDisplayVal.shift("");
+  currDisplayVal = currDisplayVal.join("");
+
+  var newRatio = this.name === "sliderMin" ? currDisplayVal / (max[0].value - this.value)
+                                           : currDisplayVal / (this.value - min[0].value);
+
+  sliderByCname[1].value = newRatio;
+
+})
+
+
+</script>
+</body>
+</html>
+
+
+<!-- COMMENTS -->
+<!--
+
+-->
diff --git a/lib/ckLib/Perkolator/data.js b/lib/ckLib/Perkolator/data.js
@@ -0,0 +1,14 @@
+[
+  { name: "cash1", cardTitle: "Signing Bonus", value: 0.7, min: 0, max: 10000 },
+  { name: "cash2", cardTitle: "Base Salary", value: 0.8, min: 0, max: 100000 },
+  { name: "cash3", cardTitle: "Incentive Comp - Cash", value: 0.15, min: 0, max: 1 },
+  { name: "equity1", cardTitle: "Signing Equity", value: 0.22, min: 0, max: 1 },
+  { name: "equity2", cardTitle: "eqRate", value: 10, min: 0, max: 1 },
+  { name: "equity3", cardTitle: "Incentive Comp - Equity", value: 38, min: 0, max: 100 },
+  { name: "perks1", cardTitle: "timeRate", value: 40, min: 0, max: 100 },
+  { name: "perks2", cardTitle: "timeAllocation", value: 30, min: 0, max: 100 },
+  { name: "perks3", cardTitle: "timeUtilization", value: 15, min: 0, max: 100 },
+  { name: "time1", cardTitle: "Stipends", value: 10, min: 0, max: 100 },
+  { name: "time2", cardTitle: "Benefits", value: 26, min: 0, max: 100 },
+  { name: "time3", cardTitle: "Retirement Savings", value: 9, min: 0, max: 100 }
+];
diff --git a/lib/ckLib/Perkolator/gridLayout.html b/lib/ckLib/Perkolator/gridLayout.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <script src="https://d3js.org/d3.v4.min.js"></script>
+  <link rel="stylesheet" href="./style.css"></style>
+</head>
+
+<body>
+  <script type="text/javascript" src="./scripts/renderCard.js"></script>
+  <div class="grid">
+    <div class="box head">
+      <p class="title">perkolator</p>
+    </div>
+    <div class="box stackedBar">
+      stackedBar
+    </div>
+    <div class="box card cash1">
+      <!-- TODO: look into html templates - use this as a modular piece if it works -->
+      <div id="cardContainer">
+        <div id="cash1" class="bar"></div>
+        <div id="sliderContainer">
+          <output class="cash1 slider">$7,000</output>
+          <p>
+            min :
+            <input type="number" value="0" name="sliderMin" class="cash1 sliderRange sliderMin" />
+            <input type="range" value="0.7" max="1" step=".01" name="Signing Bonus" class="cash1 slider" />
+            <input type="number" value="10000" name="sliderMax" class="cash1 sliderRange sliderMax" />
+            : max
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="box card cash2">
+      <div id="cardContainer">
+        <div id="cash2" class="bar"></div>
+        <div id="sliderContainer">
+          <output class="cash2 slider">$80,000</output>
+          <p>
+            min :
+            <input type="number" value="0" name="sliderMin" class="cash2 sliderRange sliderMin" />
+            <input type="range" value="0.8" max="1" step=".01" name="Base Salary" class="cash2 slider" />
+            <input type="number" value="100000" name="sliderMax" class="cash2 sliderRange sliderMax" />
+            : max
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="box card cash3">
+      cash3
+    </div>
+    <div class="box card equity1">
+      equity1
+    </div>
+    <div class="box card equity2">
+      equity2
+    </div>
+    <div class="box card equity3">
+      equity3
+    </div>
+    <div class="box card perks1">
+      perks1
+    </div>
+    <div class="box card perks2">
+      perks2
+    </div>
+    <div class="box card perks3">
+      perks3
+    </div>
+    <div class="box card time1">
+      time1
+    </div>
+    <div class="box card time2">
+      time2
+    </div>
+    <div class="box card time3">
+      time3
+    </div>
+    <div class="box footer">
+      footer
+    </div>
+  </div>
+
+  <script>
+    let cardsArr = [
+      'cash1', 'cash2', 'cash3',
+      'equity1', 'equity2', 'equity3',
+      'perks1', 'perks2', 'perks3',
+      'time1', 'time2', 'time3'
+    ]
+    const colorScale = d3.scaleLinear()
+      .domain(cardsArr)
+      .range(['green', 'blue'])
+
+    renderCard('cash1', 0);
+    renderCard('cash2', 1);
+    // etc...
+    // once it's modular...
+    // renderCard(data)
+  </script>
+
+</body>
+
+
+<!-- NOTE: things from the grid docs to try out -->
+<!--
+    - stretch (property on justify+align selectors)
+        resizes content to fit exactly within grid square
+        also can be done to individual elements - eg. justify-self: stretch
+
+    - row-gap & column-gap
+        provide "gutters" between columns/rows
+        *
+
+-->
diff --git a/lib/ckLib/Perkolator/scripts/main.js b/lib/ckLib/Perkolator/scripts/main.js
diff --git a/lib/ckLib/Perkolator/scripts/renderCard.js b/lib/ckLib/Perkolator/scripts/renderCard.js
@@ -0,0 +1,60 @@
+var renderCard = (cardName, i) => {
+  var width = 400;
+  var height = 100;
+  var backBarWidth = 350;
+  var sliderByCname = document.querySelector('input.slider.' + cardName);
+  var currDisplayVal = document.querySelector('output.slider.' + cardName).value.split(',').join('').split('');
+    currDisplayVal.shift('');
+    currDisplayVal = currDisplayVal.join('');
+  var min = document.querySelector('input.sliderMin.' + cardName);
+  var max = document.querySelector('input.sliderMax.' + cardName);
+
+  var svg = d3.select('div#'+cardName)
+    .append('svg')
+    .attr('height', height)
+    .attr('width', width);
+
+  svg.append('text')
+    .text(sliderByCname.name)
+    .attr('class', 'title')
+    .attr('x', 153.31)
+    .attr('y', 90);
+
+  svg.append('rect')
+    .attr('class', 'backgroundRect')
+    .attr('x', 25)
+    .attr('y', 10)
+    .attr('width', backBarWidth)
+    .attr('height', height / 2);
+
+  svg.append('g')
+    .append('rect')
+    .attr('class', 'barRect')
+    .attr('class', cardName)
+    .attr('x', 26)
+    .attr('y', 11)
+    .attr('width', backBarWidth * sliderByCname.value)
+    .attr('height', (height / 2) - 2)
+    .attr('fill', 'blue');
+
+
+  d3.select('input[type=range].' + cardName + '.slider').on('input', function() {
+    var newValue = this.value * (max.value - min.value);
+
+    svg.select('.barRect')
+      .attr('width', newValue * backBarWidth);
+
+    d3.select('output.slider.' + cardName)
+      .text(function(d) {
+        return '$' + d3.format(',')(d)
+      }(newValue));
+  });
+
+  d3.selectAll('input[type=number].' + cardName + '.sliderRange').on('change', function() {
+    var newRatio = this.name === 'sliderMin' ? currDisplayVal / (max.value - this.value)
+                                             : currDisplayVal / (this.value - min.value);
+
+    currDisplayVal = newRatio;
+
+  })
+};