@decidables/prospectable-elements 0.5.1 → 0.6.0

package/src/components/decision-space.js

@@ -397,6 +397,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -420,6 +421,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -460,6 +462,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -544,7 +547,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
     };
     const startRotationX = (-0.85 * Math.PI) / 8;
     const startRotationY = (3 * Math.PI) / 8;
-    const startRotationZ = 0;
+    const startRotationZ = 0.0000001; // Avoid d3-3d bug
 
     const lineStrips3D = d33d.lineStrips3D()
       .origin(startOrigin)
@@ -648,21 +651,24 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
         lineStrips3D
           .x((datum) => { return datum.x; })
           .y(() => { return yScale.range()[0]; })
-          .z(() => { return zScale.range()[0]; })(xAxis),
+          .z(() => { return zScale.range()[0]; })
+          .data(xAxis),
       );
     const axisYUpdate = svgMerge.selectAll('.axis-y')
       .data(
         lineStrips3D
           .x(() => { return xScale.range()[0]; })
           .y((datum) => { return datum.y; })
-          .z(() => { return zScale.range()[1]; })(yAxis),
+          .z(() => { return zScale.range()[1]; })
+          .data(yAxis),
       );
     const axisZUpdate = svgMerge.selectAll('.axis-z')
       .data(
         lineStrips3D
           .x(() => { return xScale.range()[0]; })
           .y(() => { return yScale.range()[0]; })
-          .z((datum) => { return datum.z; })(zAxis),
+          .z((datum) => { return datum.z; })
+          .data(zAxis),
       );
     //  ENTER
     const axisXEnter = axisXUpdate.enter().append('path')
@@ -692,7 +698,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
             return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
           })
           .y(() => { return yScale.range()[0] + this.rem * 1.75; })
-          .z(() => { return zScale.range()[0] + this.rem * 1.75; })(xAxis),
+          .z(() => { return zScale.range()[0] + this.rem * 1.75; })
+          .data(xAxis),
       );
     const titlePathYUpdate = svgMerge.selectAll('.title-path-y')
       .data(
@@ -701,7 +708,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .y((datum) => {
             return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
           })
-          .z(() => { return zScale.range()[1] - this.rem * 1.75; })(yAxis),
+          .z(() => { return zScale.range()[1] - this.rem * 1.75; })
+          .data(yAxis),
       );
     const titlePathZUpdate = svgMerge.selectAll('.title-path-z')
       .data(
@@ -710,21 +718,40 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .y(() => { return yScale.range()[0] + this.rem * 1.75; })
           .z((datum) => {
             return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
-          })(zAxis),
+          })
+          .data(zAxis),
       );
     const titleXUpdate = svgMerge.selectAll('.title-x')
       .data(
-        xAxis,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
+          })
+          .y(() => { return yScale.range()[0] + this.rem * 1.75; })
+          .z(() => { return zScale.range()[0] + this.rem * 1.75; })
+          .data(xAxis),
         (datum) => { return datum[0].title; },
       );
     const titleYUpdate = svgMerge.selectAll('.title-y')
       .data(
-        yAxis,
+        lineStrips3D
+          .x(() => { return xScale.range()[0] - this.rem * 1.75; })
+          .y((datum) => {
+            return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
+          })
+          .z(() => { return zScale.range()[1] - this.rem * 1.75; })
+          .data(yAxis),
         (datum) => { return datum[0].title; },
       );
     const titleZUpdate = svgMerge.selectAll('.title-z')
       .data(
-        zAxis,
+        lineStrips3D
+          .x(() => { return xScale.range()[0] - this.rem * 1.75; })
+          .y(() => { return yScale.range()[0] + this.rem * 1.75; })
+          .z((datum) => {
+            return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
+          })
+          .data(zAxis),
         (datum) => { return datum[0].title; },
       );
     //  ENTER
@@ -811,7 +838,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           })
           .z((datum) => {
             return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
-          })(xTicks),
+          })
+          .data(xTicks),
       );
     const ticksYUpdate = svgMerge.selectAll('.tick-y')
       .data(
@@ -822,7 +850,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .y((datum) => { return datum.y; })
           .z((datum) => {
             return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
-          })(yTicks),
+          })
+          .data(yTicks),
       );
     const ticksZUpdate = svgMerge.selectAll('.tick-z')
       .data(
@@ -833,7 +862,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .y((datum) => {
             return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
           })
-          .z((datum) => { return datum.z; })(zTicks),
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
       );
     //  ENTER
     const ticksXEnter = ticksXUpdate.enter().append('path')
@@ -869,7 +899,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
             return datum.id === 'min'
               ? zScale.range()[0] + this.rem * 4
               : zScale.range()[0] + this.rem * 0.5;
-          })(xTicks),
+          })
+          .data(xTicks),
         (datum) => { return datum[0].label; },
       );
     const labelPathsYUpdate = svgMerge.selectAll('.label-path-y')
@@ -885,7 +916,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
             return datum.id === 'min'
               ? zScale.range()[1] - this.rem * 0.5
               : zScale.range()[1] - this.rem * 4;
-          })(yTicks),
+          })
+          .data(yTicks),
         (datum) => { return datum[0].label; },
       );
     const labelPathsZUpdate = svgMerge.selectAll('.label-path-z')
@@ -901,22 +933,59 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
               ? yScale.range()[0] + this.rem * 4
               : yScale.range()[0] + this.rem * 0.5;
           })
-          .z((datum) => { return datum.z; })(zTicks),
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsXUpdate = svgMerge.selectAll('.label-x')
       .data(
-        xTicks,
+        lineStrips3D
+          .x((datum) => { return datum.x; })
+          .y((datum) => {
+            return datum.id === 'min'
+              ? yScale.range()[0] + this.rem * 4
+              : yScale.range()[0] + this.rem * 0.5;
+          })
+          .z((datum) => {
+            return datum.id === 'min'
+              ? zScale.range()[0] + this.rem * 4
+              : zScale.range()[0] + this.rem * 0.5;
+          })
+          .data(xTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsYUpdate = svgMerge.selectAll('.label-y')
       .data(
-        yTicks,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min'
+              ? xScale.range()[0] - this.rem * 0.5
+              : xScale.range()[0] - this.rem * 4;
+          })
+          .y((datum) => { return datum.y; })
+          .z((datum) => {
+            return datum.id === 'min'
+              ? zScale.range()[1] - this.rem * 0.5
+              : zScale.range()[1] - this.rem * 4;
+          })
+          .data(yTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsZUpdate = svgMerge.selectAll('.label-z')
       .data(
-        zTicks,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min'
+              ? xScale.range()[0] - this.rem * 4
+              : xScale.range()[0] - this.rem * 0.5;
+          })
+          .y((datum) => {
+            return datum.id === 'min'
+              ? yScale.range()[0] + this.rem * 4
+              : yScale.range()[0] + this.rem * 0.5;
+          })
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
         (datum) => { return datum[0].label; },
       );
     //  ENTER
@@ -978,7 +1047,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
         points3d
           .x((datum) => { return xScale(datum.xs); })
           .y((datum) => { return yScale(datum.pw); })
-          .z((datum) => { return zScale(datum.xw); })(
+          .z((datum) => { return zScale(datum.xw); })
+          .data(
             this.choices.slice(
               this.point === 'rest' ? 1 : 0,
               this.point === 'first' ? 1 : undefined,
@@ -1056,7 +1126,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
             )
             .x((datum) => { return xScale(datum.xs); })
             .y((datum) => { return yScale(datum.pw); })
-            .z((datum) => { return zScale(datum.xw); })(this.boundary)
+            .z((datum) => { return zScale(datum.xw); })
+            .data(this.boundary)
             .filter((datum) => {
               return (
                 (datum[0].pw >= this.range.pw.start && datum[0].pw <= this.range.pw.stop)
@@ -1093,7 +1164,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .rows(d3.range(this.range.pw.start, this.range.pw.stop + 0.01, this.range.pw.step).length)
           .x((datum) => { return xScale(datum.xs); })
           .y((datum) => { return yScale(datum.pw); })
-          .z((datum) => { return zScale(datum.xw); })(this.mapXY),
+          .z((datum) => { return zScale(datum.xw); })
+          .data(this.mapXY),
       );
     const mapXZUpdate = svgMerge.selectAll('.map-xz')
       .data(
@@ -1101,7 +1173,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .rows(d3.range(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length)
           .x((datum) => { return xScale(datum.xs); })
           .y((datum) => { return yScale(datum.pw); })
-          .z((datum) => { return zScale(datum.xw); })(this.mapXZ),
+          .z((datum) => { return zScale(datum.xw); })
+          .data(this.mapXZ),
       );
     const mapYZUpdate = svgMerge.selectAll('.map-yz')
       .data(
@@ -1109,7 +1182,8 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
           .rows(d3.range(this.range.xw.start, this.range.xw.stop + 0.01, this.range.xw.step).length)
           .x((datum) => { return xScale(datum.xs); })
           .y((datum) => { return yScale(datum.pw); })
-          .z((datum) => { return zScale(datum.xw); })(this.mapYZ),
+          .z((datum) => { return zScale(datum.xw); })
+          .data(this.mapYZ),
       );
     //  ENTER
     const mapXYEnter = mapXYUpdate.enter().append('path')
@@ -1158,7 +1232,7 @@ export default class DecisionSpace extends DecidablesMixinResizeable(Prospectabl
     mapYZUpdate.exit().remove();
 
     // Depth sorting
-    d3.select(this.renderRoot).selectAll('.d3-3d').sort(points3d.sort);
+    d3.select(this.renderRoot).selectAll('.d3-3d').sort(d33d.sort);
 
     // Color Legend
     //  DATA-JOIN

package/src/components/prospectable-response.js

@@ -265,6 +265,7 @@ export default class ProspectableResponse extends ProspectableElement {
 
           width: 5.25rem;
           height: 3.5rem;
+
           padding: 0.375rem 0.75rem;
           margin: 0.25rem;
 
@@ -292,6 +293,7 @@ export default class ProspectableResponse extends ProspectableElement {
 
         .feedback .outcome {
           font-weight: 600;
+
           line-height: 1.15;
         }
 

package/src/components/risky-option.js

@@ -23,6 +23,8 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
           --decidables-spinner-input-width: 4rem;
           --decidables-spinner-prefix: "$";
 
+          position: relative;
+
           display: inline-block;
 
           width: 10rem;
@@ -32,6 +34,7 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
         .main {
           width: 100%;
           height: 100%;
+
           overflow: visible;
         }
 
@@ -48,9 +51,9 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
 
         .arc.interactive {
           cursor: ns-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .arc.interactive:hover {
@@ -61,7 +64,7 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .arc.interactive:focus {
+        .arc.interactive:focus-visible {
           filter: url("#shadow-8");
         }
 
@@ -80,23 +83,20 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
         .label.static {
           font-size: 1.75rem;
 
+          dominant-baseline: middle;
+
           user-select: none;
 
-          dominant-baseline: middle;
           text-anchor: middle;
         }
 
         .label.interactive {
+          position: absolute;
+
           width: var(--decidables-spinner-input-width);
           height: calc(var(--decidables-spinner-font-size) * 1.5);
-          overflow: visible;
-        }
 
-        /* HACK: Get Safari to work with SVG foreignObject */
-        /* https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari */
-        /* https://bugs.webkit.org/show_bug.cgi?id=23113 */
-        .label.interactive decidables-spinner {
-          position: fixed;
+          overflow: visible;
         }
 
         .label.interactive.win decidables-spinner {
@@ -332,12 +332,12 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
     //  DATA-JOIN
     const labelStaticUpdate = pieMerge.selectAll('.label.static')
       .data(arcsStatic);
-    const labelInteractiveUpdate = pieMerge.selectAll('.label.interactive')
+    const labelInteractiveUpdate = d3.select(this.renderRoot).selectAll('.label.interactive')
       .data(arcsInteractive);
     //  ENTER
     const labelStaticEnter = labelStaticUpdate.enter().append('text');
-    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('foreignObject');
-    labelInteractiveEnter.append('xhtml:decidables-spinner')
+    const labelInteractiveEnter = labelInteractiveUpdate.enter().append('xhtml:div');
+    labelInteractiveEnter.append('decidables-spinner')
       .on('input', (event, datum) => {
         datum.data.x = parseFloat(event.target.value);
 
@@ -364,22 +364,19 @@ export default class RiskyOption extends DecidablesMixinResizeable(ProspectableE
       .text((datum) => { return `$${datum.data.x.toFixed(0)}`; });
     const labelInteractiveMerge = labelInteractiveEnter.merge(labelInteractiveUpdate)
       .attr('class', (datum) => { return `label interactive ${datum.data.name}`; })
-      .attr('transform', (datum) => {
-        // HACK: Center spinner here instead of CSS for Safari SVG foreignObject
-        // x: calc(var(--decidables-spinner-input-width) / -2);
-        // y: calc(var(--decidables-spinner-font-size) * 1.5 / -2);
+      .attr('style', (datum) => {
         const inputWidth = parseFloat(this.getComputedStyleValue('--decidables-spinner-input-width'));
         const fontSize = parseFloat(this.getComputedStyleValue('--decidables-spinner-font-size'));
         const rem = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('font-size'), 10);
-        const x = (inputWidth * rem) / -2;
-        const y = (fontSize * rem * 1.5) / -2;
+        const x = (width / 2) + (inputWidth * rem) / -2;
+        const y = (height / 2) + (fontSize * rem * 1.5) / -2;
 
         if (arcs.length === 1) {
-          return `translate(${x}, ${y})`;
+          return `left: ${x}px; top: ${y}px;`;
         }
         const radius = (Math.min(width, height) / 2) * 0.6;
         const arcLabel = d3.arc().innerRadius(radius).outerRadius(radius);
-        return `translate(${arcLabel.centroid(datum)[0] + x}, ${arcLabel.centroid(datum)[1] + y})`;
+        return `left: ${arcLabel.centroid(datum)[0] + x}px; top: ${arcLabel.centroid(datum)[1] + y}px;`;
       });
     labelInteractiveMerge.select('decidables-spinner')
       .attr('value', (datum) => { return `${datum.data.x.toFixed(0)}`; });

package/src/equations/cpt-equation.js

@@ -87,11 +87,13 @@ export default class CPTEquation extends ProspectableElement {
 
         .addend {
           position: relative;
+
           display: inline-block;
         }
 
         .comparison {
           position: relative;
+
           display: inline-block;
 
           font-size: 125%;