@decidables/discountable-elements 0.6.2 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/discountable-elements",
-  "version": "0.6.2",
+  "version": "0.6.4",
   "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
   "keywords": [
     "web component",
@@ -23,7 +23,8 @@
     "./components": "./src/components/index.js",
     "./equations": "./src/equations/index.js",
     "./examples": "./src/examples/index.js",
-    "./*": "./src/*.js"
+    "./*": "./src/*.js",
+    "./colors.yml": "./src/colors.yml"
   },
   "repository": {
     "type": "git",
@@ -52,14 +53,13 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.4",
-    "@decidables/discountable-math": "^0.2.4",
+    "@decidables/decidables-elements": "^0.5.6",
+    "@decidables/discountable-math": "^0.2.5",
     "@lit-labs/motion": "^1.0.9",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
     "d3": "^7.9.0",
-    "lit": "^3.3.1",
-    "regenerator-runtime": "^0.14.1"
+    "lit": "^3.3.1"
   },
-  "gitHead": "40a8d99faef87f4616aa28ae5299893a59873f1d"
+  "gitHead": "8c39b095d6cc3cf6a5f49457048bebf53e7158c1"
 }

package/src/components/discountable-control.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 import '@decidables/decidables-elements/slider';

package/src/components/discountable-response.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 

package/src/components/htd-calculation.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import {animate, fadeIn} from '@lit-labs/motion';
 
 import '@decidables/decidables-elements/spinner';

package/src/components/htd-curves.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html, render} from 'lit';
 import * as d3 from 'd3';
 
 import HTDMath from '@decidables/discountable-math';
@@ -256,26 +256,45 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
 
         .option .interactive:hover {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
+          transform: translateX(0);
         }
 
         .option .interactive:active {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
         :host(.keyboard) .option .interactive:focus-within {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateX(0);
         }
 
         .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateY(0);
         }
 
         :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
           filter: url("#shadow-8");
+
+          /* HACK: This gets Safari to correctly apply the filter! */
+          transform: translateZ(0);
         }
 
         .gradient.sooner stop {
@@ -453,11 +472,15 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       }]);
     //  ENTER
     const svgEnter = svgUpdate.enter().append('svg')
-      .classed('main', true);
-    svgEnter.html(DiscountableElement.svgDefs);
+      .classed('main', true)
+      .each((datum, index, nodes) => {
+        // Filters for shadows
+        render(DiscountableElement.svgFilters, nodes[index]);
+      });
     // Gradients for fill animations
-    const svgDefs = svgEnter.append('defs');
-    const soonerGradient = svgDefs.append('linearGradient')
+    const svgGradients = svgEnter.append('defs')
+      .classed('gradients', true);
+    const soonerGradient = svgGradients.append('linearGradient')
       .classed('gradient sooner', true)
       .attr('id', 'sooner-gradient');
     soonerGradient.append('stop')
@@ -472,7 +495,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     soonerGradient.append('stop')
       .classed('stop-100', true)
       .attr('offset', '1');
-    const laterGradient = svgDefs.append('linearGradient')
+    const laterGradient = svgGradients.append('linearGradient')
       .classed('gradient later', true)
       .attr('id', 'later-gradient');
     laterGradient.append('stop')
@@ -1239,6 +1262,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           return `${xScale(element.d)}`;
         };
       })
+      .attr('y1', yScale(0))
       .attrTween('y2', (datum, index, elements) => {
         const element = elements[index];
         const interpolateA = d3.interpolate(

package/src/components/htd-fit-worker.js

@@ -1,8 +1,5 @@
 /* eslint no-restricted-globals: ["off", "self"] */
 
-// Needed for d3 in WebWorker!
-import 'regenerator-runtime/runtime';
-
 import * as BayesDistributions from 'bayes.js/distributions';
 import * as BayesMcmc from 'bayes.js/mcmc';
 import * as d3 from 'd3';

package/src/components/htd-fit.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as Plot from '@observablehq/plot';
 
 import HTDMath from '@decidables/discountable-math';

package/src/components/htd-parameters.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/slider';
 import HTDMath from '@decidables/discountable-math';

package/src/components/itc-choice.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';
 import './itc-option';

package/src/components/itc-option.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';
 

package/src/components/itc-task.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as d3 from 'd3';
 
 import DiscountableElement from '../discountable-element';

package/src/examples/htd-example.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DiscountableElement from '../discountable-element';