@esri/solutions-components 0.3.6 → 0.3.7

package/dist/solutions-components/p-74b29d75.entry.js

@@ -0,0 +1,231 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { r as registerInstance, h, g as getElement, f as forceUpdate } from './p-c023e6a1.js';
+import { g as guid } from './p-a80b3880.js';
+import { c as createObserver } from './p-9a9955db.js';
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
+ * v1.0.0-beta.97
+ */
+/**
+ * Calculate slope of the tangents
+ * uses Steffen interpolation as it's monotonic
+ * http://jrwalsh1.github.io/posts/interpolations/
+ *
+ * @param p0
+ * @param p1
+ * @param p2
+ */
+function slope(p0, p1, p2) {
+  const dx = p1[0] - p0[0];
+  const dx1 = p2[0] - p1[0];
+  const dy = p1[1] - p0[1];
+  const dy1 = p2[1] - p1[1];
+  const m = dy / (dx || (dx1 < 0 && 0));
+  const m1 = dy1 / (dx1 || (dx < 0 && 0));
+  const p = (m * dx1 + m1 * dx) / (dx + dx1);
+  return (Math.sign(m) + Math.sign(m1)) * Math.min(Math.abs(m), Math.abs(m1), 0.5 * Math.abs(p)) || 0;
+}
+/**
+ * Calculate slope for just one tangent (single-sided)
+ *
+ * @param p0
+ * @param p1
+ * @param m
+ */
+function slopeSingle(p0, p1, m) {
+  const dx = p1[0] - p0[0];
+  const dy = p1[1] - p0[1];
+  return dx ? ((3 * dy) / dx - m) / 2 : m;
+}
+/**
+ * Given two points and their tangent slopes,
+ * calculate the bezier handle coordinates and return draw command.
+ *
+ * Translates Hermite Spline to Beziér curve:
+ * stackoverflow.com/questions/42574940/
+ *
+ * @param p0
+ * @param p1
+ * @param m0
+ * @param m1
+ * @param t
+ */
+function bezier(p0, p1, m0, m1, t) {
+  const [x0, y0] = p0;
+  const [x1, y1] = p1;
+  const dx = (x1 - x0) / 3;
+  const h1 = t([x0 + dx, y0 + dx * m0]).join(",");
+  const h2 = t([x1 - dx, y1 - dx * m1]).join(",");
+  const p = t([x1, y1]).join(",");
+  return `C ${h1} ${h2} ${p}`;
+}
+/**
+ * Generate a function which will translate a point
+ * from the data coordinate space to svg viewbox oriented pixels
+ *
+ * @param root0
+ * @param root0.width
+ * @param root0.height
+ * @param root0.min
+ * @param root0.max
+ */
+function translate({ width, height, min, max }) {
+  const rangeX = max[0] - min[0];
+  const rangeY = max[1] - min[1];
+  return (point) => {
+    const x = ((point[0] - min[0]) / rangeX) * width;
+    const y = height - (point[1] / rangeY) * height;
+    return [x, y];
+  };
+}
+/**
+ * Get the min and max values from the dataset
+ *
+ * @param data
+ */
+function range(data) {
+  const [startX, startY] = data[0];
+  const min = [startX, startY];
+  const max = [startX, startY];
+  return data.reduce(({ min, max }, [x, y]) => ({
+    min: [Math.min(min[0], x), Math.min(min[1], y)],
+    max: [Math.max(max[0], x), Math.max(max[1], y)]
+  }), { min, max });
+}
+/**
+ * Generate drawing commands for an area graph
+ * returns a string can can be passed directly to a path element's `d` attribute
+ *
+ * @param root0
+ * @param root0.data
+ * @param root0.min
+ * @param root0.max
+ * @param root0.t
+ */
+function area({ data, min, max, t }) {
+  if (data.length === 0) {
+    return "";
+  }
+  // important points for beginning and ending the path
+  const [startX, startY] = t(data[0]);
+  const [minX, minY] = t(min);
+  const [maxX] = t(max);
+  // keep track of previous slope/points
+  let m;
+  let p0;
+  let p1;
+  // iterate over data points, calculating command for each
+  const commands = data.reduce((acc, point, i) => {
+    p0 = data[i - 2];
+    p1 = data[i - 1];
+    if (i > 1) {
+      const m1 = slope(p0, p1, point);
+      const m0 = m === undefined ? slopeSingle(p0, p1, m1) : m;
+      const command = bezier(p0, p1, m0, m1, t);
+      m = m1;
+      return `${acc} ${command}`;
+    }
+    return acc;
+  }, `M ${minX},${minY} L ${minX},${startY} L ${startX},${startY}`);
+  // close the path
+  const last = data[data.length - 1];
+  const end = bezier(p1, last, m, slopeSingle(p1, last, m), t);
+  return `${commands} ${end} L ${maxX},${minY} Z`;
+}
+
+const graphCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;block-size:100%}.svg{fill:currentColor;stroke:transparent;margin:0px;display:block;block-size:100%;inline-size:100%;padding:0px}.svg .graph-path--highlight{fill:var(--calcite-ui-brand);opacity:0.5}";
+
+const Graph = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Array of tuples describing a single data point ([x, y])
+     * These data points should be sorted by x-axis value
+     */
+    this.data = [];
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    this.graphId = `calcite-graph-${guid()}`;
+    this.resizeObserver = createObserver("resize", () => forceUpdate(this));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
+  render() {
+    const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;
+    const id = this.graphId;
+    const { clientHeight: height, clientWidth: width } = el;
+    // if we have no data, return empty svg
+    if (!data || data.length === 0) {
+      return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }));
+    }
+    const { min: rangeMin, max: rangeMax } = range(data);
+    let currentMin = rangeMin;
+    let currentMax = rangeMax;
+    if (min < rangeMin[0] || min > rangeMin[0]) {
+      currentMin = [min, 0];
+    }
+    if (max > rangeMax[0] || max < rangeMax[0]) {
+      currentMax = [max, rangeMax[1]];
+    }
+    const t = translate({ min: currentMin, max: currentMax, width, height });
+    const [hMinX] = t([highlightMin, currentMax[1]]);
+    const [hMaxX] = t([highlightMax, currentMax[1]]);
+    const areaPath = area({ data, min: rangeMin, max: rangeMax, t });
+    const fill = colorStops ? `url(#linear-gradient-${id})` : undefined;
+    return (h("svg", { class: "svg", height: height, preserveAspectRatio: "none", viewBox: `0 0 ${width} ${height}`, width: width }, colorStops ? (h("defs", null, h("linearGradient", { id: `linear-gradient-${id}`, x1: "0", x2: "1", y1: "0", y2: "0" }, colorStops.map(({ offset, color, opacity }) => (h("stop", { offset: `${offset * 100}%`, "stop-color": color, "stop-opacity": opacity })))))) : null, highlightMin !== undefined ? ([
+      h("mask", { height: "100%", id: `${id}1`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+            M 0,0
+            L ${hMinX - 1},0
+            L ${hMinX - 1},${height}
+            L 0,${height}
+            Z
+          `, fill: "white" })),
+      h("mask", { height: "100%", id: `${id}2`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+            M ${hMinX + 1},0
+            L ${hMaxX - 1},0
+            L ${hMaxX - 1},${height}
+            L ${hMinX + 1}, ${height}
+            Z
+          `, fill: "white" })),
+      h("mask", { height: "100%", id: `${id}3`, width: "100%", x: "0%", y: "0%" }, h("path", { d: `
+                M ${hMaxX + 1},0
+                L ${width},0
+                L ${width},${height}
+                L ${hMaxX + 1}, ${height}
+                Z
+              `, fill: "white" })),
+      h("path", { class: "graph-path", d: areaPath, fill: fill, mask: `url(#${id}1)` }),
+      h("path", { class: "graph-path--highlight", d: areaPath, fill: fill, mask: `url(#${id}2)` }),
+      h("path", { class: "graph-path", d: areaPath, fill: fill, mask: `url(#${id}3)` })
+    ]) : (h("path", { class: "graph-path", d: areaPath, fill: fill }))));
+  }
+  get el() { return getElement(this); }
+};
+Graph.style = graphCss;
+
+export { Graph as calcite_graph };