@decidables/accumulable-elements 0.3.3 → 0.3.5

package/lib/accumulableElements.umd.js

@@ -8111,8 +8111,13 @@
           }
         }
 
-        .measure {
-          stroke-width: 2;
+        .measure .line.short {
+          stroke-width: 0;
+        }
+
+        .measure .markers {
+          fill: none;
+          stroke-width: 0;
         }
 
         .measure .label {
@@ -8134,7 +8139,9 @@
           stroke: var(---color-z);
         }
 
-        .measure.z .label {
+        .measure.z .label,
+        /* Hack to avoid Safari weirdness */
+        .measure.z .label tspan {
           dominant-baseline: hanging;
           text-anchor: start;
         }
@@ -8157,6 +8164,43 @@
           text-anchor: middle;
         }
 
+        .measure-arrow {
+          fill: context-stroke;
+          stroke: context-stroke;
+        }
+
+        .measure-arrow .arrow {
+          stroke-width: 1;
+        }
+
+        .measure-arrow.capped .cap {
+          stroke-width: 2;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.a {
+          fill: var(---color-a);
+          stroke: var(---color-a);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.z {
+          fill: var(---color-z);
+          stroke: var(---color-z);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.v {
+          fill: var(---color-v);
+          stroke: var(---color-v);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.t0 {
+          fill: var(---color-t0);
+          stroke: var(---color-t0);
+        }
+
         .sd .indicator,
         .mean .indicator {
           stroke-width: 2;
@@ -8182,6 +8226,20 @@
           stroke: var(---color-error-dark);
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.correct {
+          fill: var(---color-correct-dark);
+          stroke: var(---color-correct-dark);
+          stroke-dasharray: 100%;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.error {
+          fill: var(---color-error-dark);
+          stroke: var(---color-error-dark);
+          stroke-dasharray: 100%;
+        }
+
         .rt-label rect {
           filter: url("#shadow-2");
 
@@ -8401,10 +8459,29 @@
       const svgEnter = svgUpdate.enter().append('svg').classed('main', true).html(AccumulableElement.svgDefs);
       const svgDefs = svgEnter.append('defs');
       // Arrowhead marker for measures
-      svgDefs.append('marker').attr('id', 'measure-arrow').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '2').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('d', 'M -3 -3 l 6 3 l -6 3 z');
+      const measureArrow = parameter => {
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        svgDefs.append('marker').attr('id', `measure-arrow-${parameter}`).attr('class', `measure-arrow ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12').append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+      };
+      const measureCappedArrow = parameter => {
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        const marker = svgDefs.append('marker').attr('id', `measure-capped-arrow-${parameter}`).attr('class', `measure-arrow capped ${parameter}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-10 -6 12 12').attr('refX', '0').attr('refY', '0').attr('markerWidth', '12').attr('markerHeight', '12');
+        marker.append('path').attr('class', 'arrow').attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+        marker.append('path').attr('class', 'cap').attr('d', 'M 0 -4 l 0 8');
+      };
+      measureArrow('a');
+      measureArrow('z');
+      measureCappedArrow('v');
+      measureArrow('t0');
+      measureCappedArrow('t0');
       // Flat markers for SDs
-      svgDefs.append('marker').attr('id', 'model-sd-cap').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
-      svgDefs.append('marker').attr('id', 'data-sd-cap').attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
+      const sdCap = outcome => {
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        svgDefs.append('marker').attr('id', `model-sd-cap-${outcome}`).attr('class', `model-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -4 l 0 8');
+        svgDefs.append('marker').attr('id', `data-sd-cap-${outcome}`).attr('class', `data-sd cap ${outcome}`).attr('orient', 'auto-start-reverse').attr('markerUnits', 'userSpaceOnUse').attr('viewBox', '-5 -5 10 10').attr('refX', '0').attr('refY', '0').attr('markerWidth', '10').attr('markerHeight', '10').append('path').attr('stroke', 'context-stroke').attr('fill', 'context-stroke').attr('stroke-width', '2').attr('d', 'M 0 -3 l 0 6');
+      };
+      sdCap('error');
+      sdCap('correct');
       const gradient = svgDefs.append('linearGradient').attr('id', 'path-animate').attr('gradientUnits', 'userSpaceOnUse').attr('color-interpolation', 'linearRGB').attr('x1', '0').attr('x2', '0').attr('y1', evidenceScale(this.bounds.upper)).attr('y2', evidenceScale(this.bounds.lower));
       gradient.append('stop').classed('stop-0', true).attr('offset', '0%');
       gradient.append('stop').classed('stop-100', true).attr('offset', '100%');
@@ -8992,19 +9069,27 @@
       //  EXIT
       t0zUpdate.exit().remove();
 
+      // Measures
+      const markerCorrection = 2;
+
       // a Measure
       //  DATA-JOIN
       const aUpdate = evidenceOverlayerMerge.selectAll('.measure.a').data(this.measures ? [this.a] : []);
       //  ENTER
       const aEnter = aUpdate.enter().append('g').classed('measure a', true);
-      aEnter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+      aEnter.append('line').classed('line', true);
+      aEnter.append('line').classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-a)').attr('marker-end', 'url(#measure-arrow-a)');
       const aLabel = aEnter.append('text').classed('label', true);
       aLabel.append('tspan').classed('a math-var', true).text('a');
       aLabel.append('tspan').classed('equals', true).text(' = ');
       aLabel.append('tspan').classed('value', true);
       //  MERGE
+      const aLength = Math.abs(evidenceScale(this.bounds.upper) - evidenceScale(this.bounds.lower));
+      const aShort = aLength <= markerCorrection * 2;
       const aMerge = aEnter.merge(aUpdate);
-      aMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper) + 2).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - 2);
+      aMerge.select('.line').classed('short', aShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper) + markerCorrection).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+      aMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y1', evidenceScale(this.bounds.upper)).attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower));
       const aLabelMerge = aMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.scale.time.max)).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
       aLabelMerge.select('.value').text(format('.2f')(this.a));
       //  EXIT
@@ -9015,14 +9100,19 @@
       const zUpdate = evidenceOverlayerMerge.selectAll('.measure.z').data(this.measures ? [this.z] : []);
       //  ENTER
       const zEnter = zUpdate.enter().append('g').classed('measure z', true);
-      zEnter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+      zEnter.append('line').classed('line', true);
+      zEnter.append('line').classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-z)').attr('marker-end', 'url(#measure-arrow-z)');
       const zLabel = zEnter.append('text').classed('label', true);
       zLabel.append('tspan').classed('z math-var', true).text('z');
       zLabel.append('tspan').classed('equals', true).text(' = ');
       zLabel.append('tspan').classed('value', true);
       //  MERGE
+      const zLength = Math.abs(evidenceScale(this.startingPoint) - evidenceScale(this.bounds.lower));
+      const zShort = zLength <= markerCorrection * 2;
       const zMerge = zEnter.merge(zUpdate);
-      zMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint) + 2).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - 2);
+      zMerge.select('.line').classed('short', zShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint) + markerCorrection).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+      zMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y1', evidenceScale(this.startingPoint)).attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75).attr('y2', evidenceScale(this.bounds.lower));
       const zLabelMerge = zMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.scale.time.min)).attr('y', evidenceScale(this.bounds.lower) + this.rem * 0.125);
       zLabelMerge.select('.value').text(format('.0%')(this.z));
       //  EXIT
@@ -9033,20 +9123,37 @@
       const vUpdate = evidenceOverlayerMerge.selectAll('.measure.v').data(this.measures ? [this.v] : []);
       //  ENTER
       const vEnter = vUpdate.enter().append('g').classed('measure v', true);
-      vEnter.append('path').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+      vEnter.append('path').classed('line', true);
+      vEnter.append('path').classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-capped-arrow-v)').attr('marker-end', 'url(#measure-capped-arrow-v)');
       const vLabel = vEnter.append('text').classed('label', true);
       vLabel.append('tspan').classed('v math-var', true).text('v');
       vLabel.append('tspan').classed('equals', true).text(' = ');
       vLabel.append('tspan').classed('value', true);
       //  MERGE
-      const driftAngle = Math.atan(this.v / 1000 * scaleRatio);
+      // Full path
       const driftHypotenuse = timeScale(200) - timeScale(0) + this.rem * 0.75;
+      const driftAngle = Math.atan(this.v / 1000 * scaleRatio);
       const driftX = Math.cos(driftAngle) * driftHypotenuse;
       const driftY = Math.sin(driftAngle) * driftHypotenuse;
+      // Corrected path
+      const driftCorrection = markerCorrection / driftHypotenuse;
+      const driftAngleCorrected = Math.atan(this.v / 1000 * scaleRatio) - driftCorrection;
+      const driftStartX = Math.cos(driftCorrection) * driftHypotenuse;
+      const driftStartY = Math.sin(driftCorrection) * driftHypotenuse;
+      const driftEndX = Math.cos(driftAngleCorrected) * driftHypotenuse;
+      const driftEndY = Math.sin(driftAngleCorrected) * driftHypotenuse;
+      // Short path?
+      const vLength = driftAngleCorrected * driftHypotenuse;
+      const vShort = vLength <= markerCorrection * 2;
       const vMerge = vEnter.merge(vUpdate);
-      vMerge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
+      vMerge.select('.line').classed('short', vShort).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
+        M ${timeScale(this.t0) + driftStartX}, ${evidenceScale(this.startingPoint) - driftStartY}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 0 0 0 ${timeScale(this.t0) + driftEndX} ${evidenceScale(this.startingPoint) - driftEndY}
+      `);
+      vMerge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('d', `
         M ${timeScale(this.t0 + 200) + this.rem * 0.75}, ${evidenceScale(this.startingPoint)}
-        A ${timeScale(200) - timeScale(0)} ${timeScale(200) - timeScale(0)} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
       `);
       const vLabelMerge = vMerge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.t0 + 200) + this.rem * 0.5).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
       vLabelMerge.select('.value').text(format('.2f')(this.v));
@@ -9058,14 +9165,19 @@
       const t0Update = evidenceOverlayerMerge.selectAll('.measure.t0').data(this.measures ? [this.t0] : []);
       //  ENTER
       const t0Enter = t0Update.enter().append('g').classed('measure t0', true);
-      t0Enter.append('line').classed('line', true).attr('marker-start', 'url(#measure-arrow)').attr('marker-end', 'url(#measure-arrow)');
+      t0Enter.append('line').classed('line', true);
+      t0Enter.append('line').classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', 'url(#measure-arrow-t0)').attr('marker-end', 'url(#measure-capped-arrow-t0)');
       const t0Label = t0Enter.append('text').classed('label', true);
       t0Label.append('tspan').classed('t0 math-var', true).text('t₀');
       t0Label.append('tspan').classed('equals', true).text(' = ');
       t0Label.append('tspan').classed('value', true);
       //  MERGE
+      const t0Length = Math.abs(timeScale(0) - timeScale(this.t0));
+      const t0Short = t0Length <= markerCorrection * 2;
       const t0Merge = t0Enter.merge(t0Update);
-      t0Merge.select('.line').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0) + 2).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0) - 2).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
+      t0Merge.select('.line').classed('short', t0Short).transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0) + markerCorrection).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0) - markerCorrection).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
+      t0Merge.select('.markers').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', timeScale(0)).attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75).attr('x2', timeScale(this.t0)).attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
       const t0LabelMerge = t0Merge.select('.label').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x', timeScale(this.t0) + this.rem * 0.25).attr('y', evidenceScale(this.bounds.upper) - this.rem * 0.25);
       t0LabelMerge.select('.value').text(format('d')(this.t0));
       //  EXIT
@@ -9134,7 +9246,12 @@
       const sdEnter = sdUpdate.enter().append('g').attr('class', datum => {
         return `model sd ${datum.outcome}`;
       });
-      sdEnter.append('line').classed('indicator', true).attr('marker-start', 'url(#model-sd-cap)').attr('marker-end', 'url(#model-sd-cap)');
+      sdEnter.append('line').classed('indicator', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', datum => {
+        return `url(#model-sd-cap-${datum.outcome})`;
+      }).attr('marker-end', datum => {
+        return `url(#model-sd-cap-${datum.outcome})`;
+      });
       //  MERGE
       const sdMerge = sdEnter.merge(sdUpdate);
       sdMerge.select('.indicator').transition().duration(this.drag ? 0 : transitionDuration).ease(cubicOut).attr('x1', datum => {
@@ -9158,7 +9275,12 @@
       const dataSDEnter = dataSDUpdate.enter().append('g').attr('class', datum => {
         return `data sd ${datum.outcome}`;
       });
-      dataSDEnter.append('line').classed('indicator', true).attr('marker-start', 'url(#data-sd-cap)').attr('marker-end', 'url(#data-sd-cap)').attr('y1', datum => {
+      dataSDEnter.append('line').classed('indicator', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */.attr('marker-start', datum => {
+        return `url(#data-sd-cap-${datum.outcome})`;
+      }).attr('marker-end', datum => {
+        return `url(#data-sd-cap-${datum.outcome})`;
+      }).attr('y1', datum => {
         return datum.densityScale(0) + (datum.outcome === 'correct' ? 0.375 : -0.375) * this.rem;
       }).attr('y2', datum => {
         return datum.densityScale(0) + (datum.outcome === 'correct' ? 0.375 : -0.375) * this.rem;