Change slider to text field
This commit is contained in:
parent
26743ee05e
commit
3d380e4dfa
|
@ -7,10 +7,13 @@ let avg = arr => arr.reduce((a,b) => (a+b)) / arr.length
|
|||
let formatLargeOrSmall = num => {
|
||||
if(num > 1){
|
||||
return toLocale(truncateValueForDisplay(num))
|
||||
}else if(num != 0){
|
||||
}else if(num > 0){
|
||||
return num.toFixed(-Math.floor(Math.log(num)/Math.log(10)));
|
||||
}else if(num > -1){
|
||||
return num.toFixed(-Math.floor(Math.log(-num)/Math.log(10)));
|
||||
}else{
|
||||
return num//return "~0"
|
||||
return toLocale(num)//return "~0"
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -118,6 +118,7 @@ function drawGraphInner({nodes, links}){
|
|||
return height-32-(Math.abs(start-end)/2)//height-30
|
||||
})
|
||||
.text(function(d){
|
||||
return Number(d.distance)
|
||||
return(truncateValueForDisplay(Number(d.distance)))
|
||||
//return(Number(d.distance).toPrecision(2).toString())
|
||||
})
|
||||
|
|
|
@ -133,7 +133,11 @@ export function SubmitSliderButton({posList, binaryComparisons, sliderValue, toC
|
|||
//
|
||||
console.log("input@SubmitSliderButton")
|
||||
console.log(obj)
|
||||
nextStepSlider(obj)
|
||||
if(sliderValue >= 0 ){
|
||||
nextStepSlider(obj)
|
||||
}else if(sliderValue < 0){
|
||||
alert("Negative numbers not yet allowed")
|
||||
}
|
||||
}
|
||||
|
||||
return( <button
|
||||
|
|
19
lib/utils.js
19
lib/utils.js
|
@ -1,8 +1,11 @@
|
|||
import crypto from "crypto"
|
||||
|
||||
export const hashString = (string) => crypto.createHash('md5').update(string).digest('hex');
|
||||
const id = x => x
|
||||
export const transformSliderValueToActualValue = id
|
||||
export const transformSliderValueToPracticalValue = id
|
||||
|
||||
export const transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
|
||||
export const _transformSliderValueToActualValue = value => 10 ** value //>= 2 ? Math.round(10 ** value) : Math.round(10 * 10 ** value) / 10
|
||||
export const toLocale = x => Number(x).toLocaleString()
|
||||
export const truncateValueForDisplay = value => {
|
||||
if(value > 10){
|
||||
|
@ -13,4 +16,16 @@ export const truncateValueForDisplay = value => {
|
|||
|
||||
}
|
||||
}
|
||||
export const transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
|
||||
export const _transformSliderValueToPracticalValue = value => truncateValueForDisplay(transformSliderValueToActualValue(value))
|
||||
|
||||
export function numToAlphabeticalString(num){
|
||||
// https://stackoverflow.com/questions/45787459/convert-number-to-alphabet-string-javascript/45787487
|
||||
var s = '', t;
|
||||
|
||||
while (num > 0) {
|
||||
t = (num - 1) % 26;
|
||||
s = String.fromCharCode(65 + t) + s;
|
||||
num = (num - t)/26 | 0;
|
||||
}
|
||||
return s || undefined;
|
||||
}
|
||||
|
|
40
package-lock.json
generated
40
package-lock.json
generated
|
@ -1078,6 +1078,14 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
|
||||
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
}
|
||||
},
|
||||
"node_modules/bail": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
|
||||
|
@ -2171,6 +2179,25 @@
|
|||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.14.5",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
|
||||
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/foreach": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
|
||||
|
@ -5947,6 +5974,14 @@
|
|||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz",
|
||||
"integrity": "sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA=="
|
||||
},
|
||||
"axios": {
|
||||
"version": "0.21.4",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz",
|
||||
"integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==",
|
||||
"requires": {
|
||||
"follow-redirects": "^1.14.0"
|
||||
}
|
||||
},
|
||||
"bail": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/bail/-/bail-1.0.5.tgz",
|
||||
|
@ -6872,6 +6907,11 @@
|
|||
"path-exists": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"follow-redirects": {
|
||||
"version": "1.14.5",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
|
||||
"integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA=="
|
||||
},
|
||||
"foreach": {
|
||||
"version": "2.0.5",
|
||||
"resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
|
||||
|
|
|
@ -14,7 +14,7 @@ import { DisplayAsMarkdown } from '../lib/displayAsMarkdown'
|
|||
import { CreateTableWithDistances } from '../lib/findPaths'
|
||||
import { TextAreaForJson } from "../lib/textAreaForJson"
|
||||
import { pushToMongo } from "../lib/pushToMongo.js"
|
||||
import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue } from "../lib/utils.js"
|
||||
import { toLocale, transformSliderValueToPracticalValue, transformSliderValueToActualValue, numToAlphabeticalString } from "../lib/utils.js"
|
||||
|
||||
/* Helpers */
|
||||
let increasingList = (n) => Array.from(Array(n).keys())
|
||||
|
@ -37,18 +37,23 @@ let checkIfListIsOrdered = (arr, binaryComparisons) => {
|
|||
return isOrdered
|
||||
}
|
||||
|
||||
let displayFunctionSlider = (value) => {
|
||||
let displayFunctionSliderInner = (value) => {
|
||||
let result
|
||||
if (value >= 0) {
|
||||
result = toLocale(transformSliderValueToPracticalValue(value))
|
||||
} else {
|
||||
let inverseresult = toLocale(transformSliderValueToPracticalValue(-value))
|
||||
if(inverseresult == 1){
|
||||
if (inverseresult == 1) {
|
||||
result = '1'
|
||||
}else{
|
||||
} else {
|
||||
result = `1/${inverseresult}`
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
let displayFunctionSlider = (value) => {
|
||||
let result = displayFunctionSliderInner(value)
|
||||
result = `The first option is ${result}x as valuable as the second one`
|
||||
return result
|
||||
|
||||
|
@ -82,7 +87,7 @@ export default function Home({ listOfElementsDefault }) {
|
|||
|
||||
//let initialComparePair = [list[list.length-2], list[list.length-1]]
|
||||
let initialComparePair = [initialPosList[initialPosList.length - 2], initialPosList[initialPosList.length - 1]]
|
||||
let initialSliderValue = 0
|
||||
let initialSliderValue = 1
|
||||
let initialBinaryComparisons = []
|
||||
let initialQuantitativeComparisons = []
|
||||
let initialIsListOdered = false
|
||||
|
@ -216,8 +221,8 @@ export default function Home({ listOfElementsDefault }) {
|
|||
}
|
||||
|
||||
let nextStepSlider = ({ posList, binaryComparisons, sliderValue, element1, element2 }) => {
|
||||
if (sliderValue < 0) {
|
||||
sliderValue = -sliderValue;
|
||||
if (sliderValue < 1) {
|
||||
// sliderValue = -sliderValue;
|
||||
[element1, element2] = [element2, element1]
|
||||
}
|
||||
console.log(`posList@nextStepSlider:`)
|
||||
|
@ -228,7 +233,7 @@ export default function Home({ listOfElementsDefault }) {
|
|||
let newQuantitativeComparisons = [...quantitativeComparisons, newQuantitativeComparison]
|
||||
setQuantitativeComparisons(newQuantitativeComparisons)
|
||||
|
||||
setSliderValue(0)
|
||||
setSliderValue(1)
|
||||
if (successStatus) {
|
||||
let jsObject = nicelyFormatLinks(quantitativeComparisons, listOfElements)
|
||||
pushToMongo(jsObject)
|
||||
|
@ -262,8 +267,42 @@ export default function Home({ listOfElementsDefault }) {
|
|||
</DisplayElement>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex m-auto w-72">
|
||||
<div className="block m-auto text-center">
|
||||
{/*`is ${displayFunctionSliderInner(sliderValue)}x times as valuable as`*/}
|
||||
<br />
|
||||
|
||||
<label>
|
||||
{`... is `}
|
||||
<br />
|
||||
<input
|
||||
type="number"
|
||||
value={sliderValue}
|
||||
onChange={(event) =>{
|
||||
//console.log(event)
|
||||
//console.log(event.target.value)
|
||||
setSliderValue(event.target.value)
|
||||
}}
|
||||
className="text-center"
|
||||
/>
|
||||
<br />
|
||||
{`times as valuable as ...`}
|
||||
</label>
|
||||
<br />
|
||||
|
||||
|
||||
<SubmitSliderButton
|
||||
posList={posList}
|
||||
binaryComparisons={binaryComparisons}
|
||||
sliderValue={sliderValue}
|
||||
toComparePair={toComparePair}
|
||||
nextStepSlider={nextStepSlider}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5"
|
||||
className="flex m-auto border-gray-300 border-4 h-72 w-72 p-5 "
|
||||
//onClick={() => nextStep(binaryComparisons, toComparePair[1], toComparePair[0])}
|
||||
>
|
||||
<div className="block m-auto text-center">
|
||||
|
@ -272,6 +311,10 @@ export default function Home({ listOfElementsDefault }) {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
</div>
|
||||
{/*
|
||||
|
||||
<div className={`flex row-start-3 row-end-3 col-start-1 col-end-4 md:col-start-3 md:col-end-3 md:row-start-1 md:row-end-1 lg:col-start-3 lg:col-end-3 lg:row-start-1 lg:row-end-1 items-center justify-center mb-4 mt-10 ${isListOrdered ? "hidden" : ""}`}>
|
||||
<SliderElement
|
||||
className="flex items-center justify-center"
|
||||
|
@ -281,13 +324,8 @@ export default function Home({ listOfElementsDefault }) {
|
|||
domain={domain}
|
||||
/>
|
||||
</div>
|
||||
<SubmitSliderButton
|
||||
posList={posList}
|
||||
binaryComparisons={binaryComparisons}
|
||||
sliderValue={sliderValue}
|
||||
toComparePair={toComparePair}
|
||||
nextStepSlider={nextStepSlider}
|
||||
/>
|
||||
*/}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
|
Loading…
Reference in New Issue
Block a user