@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
244 lines (239 loc) • 10.1 kB
JavaScript
/*!
* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
* See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
* v1.5.0-next.4
*/
import { proxyCustomElement, HTMLElement, forceUpdate, h } from '@stencil/core/internal/client';
import { g as guid } from './guid.js';
import { c as createObserver } from './observers.js';
/**
* 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-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 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-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.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);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}: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 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.__attachShadow();
//--------------------------------------------------------------------------
//
// Private State/Props
//
//--------------------------------------------------------------------------
this.graphId = `calcite-graph-${guid()}`;
this.resizeObserver = createObserver("resize", () => forceUpdate(this));
this.data = [];
this.colorStops = undefined;
this.highlightMin = undefined;
this.highlightMax = undefined;
this.min = undefined;
this.max = undefined;
}
//--------------------------------------------------------------------------
//
// Lifecycle
//
//--------------------------------------------------------------------------
connectedCallback() {
this.resizeObserver?.observe(this.el);
}
disconnectedCallback() {
this.resizeObserver?.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", { "aria-hidden": "true", 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", { "aria-hidden": "true", 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 this; }
static get style() { return graphCss; }
}, [1, "calcite-graph", {
"data": [16],
"colorStops": [16],
"highlightMin": [2, "highlight-min"],
"highlightMax": [2, "highlight-max"],
"min": [514],
"max": [514]
}]);
function defineCustomElement() {
if (typeof customElements === "undefined") {
return;
}
const components = ["calcite-graph"];
components.forEach(tagName => { switch (tagName) {
case "calcite-graph":
if (!customElements.get(tagName)) {
customElements.define(tagName, Graph);
}
break;
} });
}
defineCustomElement();
export { Graph as G, defineCustomElement as d };