feat: align graph

This commit is contained in:
NunoSempere 2022-02-08 17:44:59 -05:00
parent b52ddbcfdf
commit c8cd6d8ce1
3 changed files with 18 additions and 7 deletions

BIN
lib/.comparisonView.js.swp Normal file

Binary file not shown.

View File

@ -319,9 +319,15 @@ export default function ComparisonView({ listOfElementsForView }) {
}) => {
if (!dontPushSubmitButtonAnyMore) {
if (inputValue < 1 && inputValue > 0) {
inputValue = 1 / inputValue;
let inverse = 1 / inputValue;
if (squiggleString == inputValue) {
inputValue = inverse;
squiggleString = inverse;
} else {
inputValue = inverse;
squiggleString = `(${squiggleString})^(-1)`;
}
[element1, element2] = [element2, element1];
squiggleString = `(${squiggleString})^(-1)`;
}
console.log(`posList@nextStepInput:`);
console.log(posList);
@ -470,7 +476,7 @@ export default function ComparisonView({ listOfElementsForView }) {
{/* Results section */}
<div className={isListOrdered ? "" : "hidden"}>
{/* Graph */}
<div className="flex items-center text-center ">
<div className="flex items-center text-center">
<DrawGraph
isListOrdered={isListOrdered}
orderedList={orderedList}

View File

@ -7,7 +7,7 @@ import {
formatLargeOrSmall,
} from "./utils.js";
const displayWidthPercentage = 0.7; // 0.85; // 0.7
const displayWidthPercentage = 0.85; // 0.85; // 0.7
let getlength = (number) => number.toString().length;
@ -48,7 +48,7 @@ function drawGraphInner({ nodes, links }) {
// Build the d3 graph
removeOldSvg();
var svg = d3
let svg = d3
.select("#graph")
.append("svg")
.attr("width", width + margin.left + margin.right)
@ -147,6 +147,7 @@ function drawGraphInner({ nodes, links }) {
})
.text(function (d) {
let distanceFormatted = formatLargeOrSmall(Number(d.distance));
return distanceFormatted;
if (d.distance == d.squiggleString || !d.squiggleString) {
return distanceFormatted;
} else {
@ -158,6 +159,7 @@ function drawGraphInner({ nodes, links }) {
//return(Number(d.distance).toPrecision(2).toString())
})
.style("text-anchor", "middle");
// background
}
export function DrawGraph({
@ -174,8 +176,11 @@ export function DrawGraph({
drawGraphInner({ nodes, links });
}
return (
<div>
<div id="graph"></div>
<div className="flex w-full items-center ">
<div
id="graph"
className="mx-auto flex justify-center w-full bg-red"
></div>
</div>
);
}