rms-sparklines
Version:
A sparkline collection, written as web components
1,329 lines (1,303 loc) • 71.9 kB
JavaScript
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// Copyright 2018 Rodrigo Silveira
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Object.defineProperty(exports, "__esModule", { value: true });
const lit_html_1 = __webpack_require__(1);
const valid_colors_1 = __webpack_require__(2);
const box_plot_1 = __webpack_require__(3);
class RmsSparklineBoxplot extends HTMLElement {
constructor() {
super();
this.populationArray = [];
this.VALID_CHART_TYPES = ['simple'];
this.VALID_DRAWING_METHODS = ['canvas', 'svg'];
this.cssColorString = new valid_colors_1.CssColorString();
this.debugging = false;
this.nothing = false;
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return [
'axisColor',
'axisLineWidth',
'chartType',
'className',
'drawingMethod',
'height',
'highWhiskerColor',
'highWhiskerLineWidth',
'interQuartileRangeLineColor',
'interQuartileRangeLineWidth',
'interQuartileRangeFillColor',
'lowWhiskerColor',
'lowWhiskerLineWidth',
'medianColor',
'medianLineWidth',
'population',
'width'
];
}
connectedCallback() {
this.upgradeProperties();
this.render();
}
disconnectedCallback() {
}
attributeChangedCallback(_name, _oldValue, _newValue) {
this.render();
}
upgradeProperties() {
// Support lazy properties https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties
this.constructor['observedAttributes'].forEach((prop) => {
if (this.hasOwnProperty(prop)) {
const value = this[prop];
delete this[prop];
this[prop] = value;
}
});
}
get axisColor() {
return this.getAttribute('axisColor');
}
set axisColor(value) {
if (value) {
this.setAttribute('axisColor', value);
}
else {
this.removeAttribute('axisColor');
}
}
get axisLineWidth() {
if (this.hasAttribute('axisLineWidth')) {
return Number(this.getAttribute('axisLineWidth'));
}
else {
return 0;
}
}
set axisLineWidth(value) {
if (value) {
this.setAttribute('axisLineWidth', String(value));
}
else {
this.removeAttribute('axisLineWidth');
}
}
get chartType() {
return this.getAttribute('chartType');
}
set chartType(value) {
if (value) {
this.setAttribute('chartType', value);
}
else {
this.removeAttribute('chartType');
}
}
get className() {
return this.getAttribute('className');
}
set className(value) {
if (value) {
this.setAttribute('className', value);
}
else {
this.removeAttribute('className');
}
}
get drawingMethod() {
return this.getAttribute('drawingMethod');
}
set drawingMethod(value) {
if (value) {
this.setAttribute('drawingMethod', value);
}
else {
this.removeAttribute('drawingMethod');
}
}
get height() {
if (this.hasAttribute('height')) {
return Number(this.getAttribute('height'));
}
else {
return 0;
}
}
set height(value) {
if (value) {
this.setAttribute('height', String(value));
}
else {
this.removeAttribute('height');
}
}
get highWhiskerColor() {
return this.getAttribute('highWhiskerColor');
}
set highWhiskerColor(value) {
if (value) {
this.setAttribute('highWhiskerColor', value);
}
else {
this.removeAttribute('highWhiskerColor');
}
}
get highWhiskerLineWidth() {
if (this.hasAttribute('highWhiskerLineWidth')) {
return Number(this.getAttribute('highWhiskerLineWidth'));
}
else {
return 0;
}
}
set highWhiskerLineWidth(value) {
if (value) {
this.setAttribute('highWhiskerLineWidth', String(value));
}
else {
this.removeAttribute('highWhiskerLineWidth');
}
}
get interQuartileRangeLineColor() {
return this.getAttribute('interQuartileRangeLineColor');
}
set interQuartileRangeLineColor(value) {
if (value) {
this.setAttribute('interQuartileRangeLineColor', value);
}
else {
this.removeAttribute('interQuartileRangeLineColor');
}
}
get interQuartileRangeLineWidth() {
if (this.hasAttribute('interQuartileRangeLineWidth')) {
return Number(this.getAttribute('interQuartileRangeLineWidth'));
}
else {
return 0;
}
}
set interQuartileRangeLineWidth(value) {
if (value) {
this.setAttribute('interQuartileRangeLineWidth', String(value));
}
else {
this.removeAttribute('interQuartileRangeLineWidth');
}
}
get interQuartileRangeFillColor() {
return this.getAttribute('interQuartileRangeFillColor');
}
set interQuartileRangeFillColor(value) {
if (value) {
this.setAttribute('interQuartileRangeFillColor', value);
}
else {
this.removeAttribute('interQuartileRangeFillColor');
}
}
get lowWhiskerColor() {
return this.getAttribute('lowWhiskerColor');
}
set lowWhiskerColor(value) {
if (value) {
this.setAttribute('lowWhiskerColor', value);
}
else {
this.removeAttribute('lowWhiskerColor');
}
}
get lowWhiskerLineWidth() {
if (this.hasAttribute('lowWhiskerLineWidth')) {
return Number(this.getAttribute('lowWhiskerLineWidth'));
}
else {
return 0;
}
}
set lowWhiskerLineWidth(value) {
if (value) {
this.setAttribute('lowWhiskerLineWidth', String(value));
}
else {
this.removeAttribute('lowWhiskerLineWidth');
}
}
get medianColor() {
return this.getAttribute('medianColor');
}
set medianColor(value) {
if (value) {
this.setAttribute('medianColor', value);
}
else {
this.removeAttribute('medianColor');
}
}
get medianLineWidth() {
if (this.hasAttribute('medianLineWidth')) {
return Number(this.getAttribute('medianLineWidth'));
}
else {
return 0;
}
}
set medianLineWidth(value) {
if (value) {
this.setAttribute('medianLineWidth', String(value));
}
else {
this.removeAttribute('medianLineWidth');
}
}
get population() {
return this.getAttribute('population');
}
set population(value) {
if (value) {
this.setAttribute('population', value);
}
else {
this.removeAttribute('population');
}
}
get width() {
if (this.hasAttribute('width')) {
return Number(this.getAttribute('width'));
}
else {
return 0;
}
}
set width(value) {
if (value) {
this.setAttribute('width', String(value));
}
else {
this.removeAttribute('width');
}
}
get styles() {
return lit_html_1.html `
<style>
:host {
display: inline-block;
verticalAlign: top;
}
:host([hidden]) {
display: none;
}
.content {
}
</style>
`;
}
get template() {
this.debugging ? console.log('RmsSparklineBoxplot::template ') : this.nothing = false;
this.boxPlot = new box_plot_1.BoxPlot(this.axisColor, this.axisLineWidth, this.chartType, this.className, this.drawingMethod, this.height, this.highWhiskerColor, this.highWhiskerLineWidth, this.interQuartileRangeLineColor, this.interQuartileRangeFillColor, this.interQuartileRangeLineWidth, this.lowWhiskerColor, this.lowWhiskerLineWidth, this.medianColor, this.medianLineWidth, this.populationArray, this.width);
const drawingElement = this.boxPlot.draw();
return lit_html_1.html `
${this.styles}
${drawingElement}
`;
}
render() {
const __this = this;
this.debugging ? console.log('RmsSparklineBoxplot::render ') : this.nothing = false;
// ensure attribute coherence
//
if (!this.axisColor || !this.cssColorString.isValid(this.axisColor)) {
this.debugging ? console.log('invalid axisColor') : this.nothing = false;
return;
}
if (this.axisLineWidth === 0) {
this.debugging ? console.log('invalid axisLineWidth') : this.nothing = false;
return;
}
if (!this.chartType) {
this.debugging ? console.log('invalid chartType') : this.nothing = false;
return;
}
if (this.VALID_CHART_TYPES.findIndex(checkChartType) === -1) {
this.debugging ? console.log('invalid chart') : this.nothing = false;
return;
}
function checkChartType(_charttype) {
return _charttype === __this.chartType;
}
if (!this.drawingMethod) {
this.debugging ? console.log('invalid drawingMethod') : this.nothing = false;
return;
}
if (this.VALID_DRAWING_METHODS.findIndex(checkDrawingMethod) === -1) {
this.debugging ? console.log('invalid drawingMethod') : this.nothing = false;
return;
}
function checkDrawingMethod(_drawingMethod) {
return _drawingMethod === __this.drawingMethod;
}
if (this.height === 0) {
this.debugging ? console.log('invalid height') : this.nothing = false;
return;
}
if (!this.highWhiskerColor || !this.cssColorString.isValid(this.highWhiskerColor)) {
this.debugging ? console.log('invalid highWhiskerColor') : this.nothing = false;
return;
}
if (this.highWhiskerLineWidth === 0) {
this.debugging ? console.log('invalid highWhiskerLineWidth') : this.nothing = false;
return;
}
if (!this.cssColorString.isValid(this.interQuartileRangeLineColor)) {
this.debugging ? console.log('invalid interQuartileRangeLineWidth') : this.nothing = false;
return;
}
if (!this.interQuartileRangeFillColor || !this.cssColorString.isValid(this.interQuartileRangeFillColor)) {
this.debugging ? console.log('invalid interQuartileRangeFillColor') : this.nothing = false;
return;
}
if (this.interQuartileRangeLineWidth === 0) {
this.debugging ? console.log('invalid interQuartileRangeLineColor') : this.nothing = false;
return;
}
if (!this.lowWhiskerColor || !this.cssColorString.isValid(this.lowWhiskerColor)) {
this.debugging ? console.log('invalid lowWhiskerColor') : this.nothing = false;
return;
}
if (this.lowWhiskerLineWidth === 0) {
this.debugging ? console.log('invalid lowWhiskerLineWidth') : this.nothing = false;
return;
}
if (!this.medianColor || !this.cssColorString.isValid(this.medianColor)) {
this.debugging ? console.log('invalid invalid') : this.nothing = false;
return;
}
if (this.medianLineWidth === 0) {
this.debugging ? console.log('invalid medianLineWidth') : this.nothing = false;
return;
}
if (!this.population) {
this.debugging ? console.log('no population') : this.nothing = false;
return;
}
this.populationArray = JSON.parse(this.population);
if (this.populationArray.length === 0) {
this.debugging ? console.log('zero length population') : this.nothing = false;
return;
}
if (this.width === 0) {
this.debugging ? console.log('invalid width') : this.nothing = false;
return;
}
lit_html_1.render(this.template, this.shadowRoot);
this.addEventListener('mousemove', function (event) {
// console.log(`RmsSparklineInlineNew::addEventListener`);
// Note that when this function is called, this points to the target element!
__this.boxPlot.handleMouseMove(event, this);
});
this.addEventListener('mouseout', function () {
// console.log(`RmsSparklineInlineNew::addEventListener`);
__this.boxPlot.handleMouseOut();
});
}
}
exports.RmsSparklineBoxplot = RmsSparklineBoxplot;
window.customElements.define('rms-sparkline-boxplot', RmsSparklineBoxplot);
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony export (immutable) */ __webpack_exports__["render"] = render;
/**
* @license
* Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
* This code may only be used under the BSD style license found at
* http://polymer.github.io/LICENSE.txt
* The complete set of authors may be found at
* http://polymer.github.io/AUTHORS.txt
* The complete set of contributors may be found at
* http://polymer.github.io/CONTRIBUTORS.txt
* Code distributed by Google as part of the polymer project is also
* subject to an additional IP rights grant found at
* http://polymer.github.io/PATENTS.txt
*/
/**
* TypeScript has a problem with precompiling templates literals
* https://github.com/Microsoft/TypeScript/issues/17956
*
* TODO(justinfagnani): Run tests compiled to ES5 with both Babel and
* TypeScript to verify correctness.
*/
const envCachesTemplates = ((t) => t() === t())(() => ((s) => s) ``);
// The first argument to JS template tags retain identity across multiple
// calls to a tag for the same literal, so we can cache work done per literal
// in a Map.
const templates = new Map();
const svgTemplates = new Map();
/**
* Interprets a template literal as an HTML template that can efficiently
* render to and update a container.
*/
const html = (strings, ...values) => litTag(strings, values, templates, false);
/* harmony export (immutable) */ __webpack_exports__["html"] = html;
/**
* Interprets a template literal as an SVG template that can efficiently
* render to and update a container.
*/
const svg = (strings, ...values) => litTag(strings, values, svgTemplates, true);
/* harmony export (immutable) */ __webpack_exports__["svg"] = svg;
function litTag(strings, values, templates, isSvg) {
const key = envCachesTemplates ?
strings :
strings.join('{{--uniqueness-workaround--}}');
let template = templates.get(key);
if (template === undefined) {
template = new Template(strings, isSvg);
templates.set(key, template);
}
return new TemplateResult(template, values);
}
/**
* The return type of `html`, which holds a Template and the values from
* interpolated expressions.
*/
class TemplateResult {
constructor(template, values) {
this.template = template;
this.values = values;
}
}
/* harmony export (immutable) */ __webpack_exports__["TemplateResult"] = TemplateResult;
/**
* Renders a template to a container.
*
* To update a container with new values, reevaluate the template literal and
* call `render` with the new result.
*/
function render(result, container, partCallback = defaultPartCallback) {
let instance = container.__templateInstance;
// Repeat render, just call update()
if (instance !== undefined && instance.template === result.template &&
instance._partCallback === partCallback) {
instance.update(result.values);
return;
}
// First render, create a new TemplateInstance and append it
instance = new TemplateInstance(result.template, partCallback);
container.__templateInstance = instance;
const fragment = instance._clone();
instance.update(result.values);
let child;
while ((child = container.lastChild)) {
container.removeChild(child);
}
container.appendChild(fragment);
}
/**
* An expression marker with embedded unique key to avoid
* https://github.com/PolymerLabs/lit-html/issues/62
*/
const attributeMarker = `{{lit-${Math.random()}}}`;
/**
* Regex to scan the string preceding an expression to see if we're in a text
* context, and not an attribute context.
*
* This works by seeing if we have a `>` not followed by a `<`. If there is a
* `<` closer to the end of the strings, then we're inside a tag.
*/
const textRegex = />[^<]*$/;
const hasTagsRegex = /[^<]*/;
const textMarkerContent = '_-lit-html-_';
const textMarker = `<!--${textMarkerContent}-->`;
const attrOrTextRegex = new RegExp(`${attributeMarker}|${textMarker}`);
/**
* A placeholder for a dynamic expression in an HTML template.
*
* There are two built-in part types: AttributePart and NodePart. NodeParts
* always represent a single dynamic expression, while AttributeParts may
* represent as many expressions are contained in the attribute.
*
* A Template's parts are mutable, so parts can be replaced or modified
* (possibly to implement different template semantics). The contract is that
* parts can only be replaced, not removed, added or reordered, and parts must
* always consume the correct number of values in their `update()` method.
*
* TODO(justinfagnani): That requirement is a little fragile. A
* TemplateInstance could instead be more careful about which values it gives
* to Part.update().
*/
class TemplatePart {
constructor(type, index, name, rawName, strings) {
this.type = type;
this.index = index;
this.name = name;
this.rawName = rawName;
this.strings = strings;
}
}
/* harmony export (immutable) */ __webpack_exports__["TemplatePart"] = TemplatePart;
class Template {
constructor(strings, svg = false) {
this.parts = [];
this.svg = svg;
this.element = document.createElement('template');
this.element.innerHTML = this._getHtml(strings, svg);
// Edge needs all 4 parameters present; IE11 needs 3rd parameter to be null
const walker = document.createTreeWalker(this.element.content, 133 /* NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT |
NodeFilter.SHOW_TEXT */, null, false);
let index = -1;
let partIndex = 0;
const nodesToRemove = [];
// The actual previous node, accounting for removals: if a node is removed
// it will never be the previousNode.
let previousNode;
// Used to set previousNode at the top of the loop.
let currentNode;
while (walker.nextNode()) {
index++;
previousNode = currentNode;
const node = currentNode = walker.currentNode;
if (node.nodeType === 1 /* Node.ELEMENT_NODE */) {
if (!node.hasAttributes()) {
continue;
}
const attributes = node.attributes;
for (let i = 0; i < attributes.length; i++) {
const attribute = attributes.item(i);
const attributeStrings = attribute.value.split(attrOrTextRegex);
if (attributeStrings.length > 1) {
// Get the template literal section leading up to the first
// expression in this attribute attribute
const attributeString = strings[partIndex];
// Trim the trailing literal value if this is an interpolation
const rawNameString = attributeString.substring(0, attributeString.length - attributeStrings[0].length);
// Find the attribute name
const rawName = rawNameString.match(/((?:\w|[.\-_$])+)=["']?$/)[1];
this.parts.push(new TemplatePart('attribute', index, attribute.name, rawName, attributeStrings));
node.removeAttribute(attribute.name);
partIndex += attributeStrings.length - 1;
i--;
}
}
}
else if (node.nodeType === 3 /* Node.TEXT_NODE */) {
const nodeValue = node.nodeValue;
const strings = nodeValue.split(attributeMarker);
if (strings.length > 1) {
const parent = node.parentNode;
const lastIndex = strings.length - 1;
// We have a part for each match found
partIndex += lastIndex;
// We keep this current node, but reset its content to the last
// literal part. We insert new literal nodes before this so that the
// tree walker keeps its position correctly.
node.textContent = strings[lastIndex];
// Generate a new text node for each literal section
// These nodes are also used as the markers for node parts
for (let i = 0; i < lastIndex; i++) {
parent.insertBefore(document.createTextNode(strings[i]), node);
this.parts.push(new TemplatePart('node', index++));
}
}
else {
// Strip whitespace-only nodes, only between elements, or at the
// beginning or end of elements.
const previousSibling = node.previousSibling;
const nextSibling = node.nextSibling;
if ((previousSibling === null ||
previousSibling.nodeType === 1 /* Node.ELEMENT_NODE */) &&
(nextSibling === null ||
nextSibling.nodeType === 1 /* Node.ELEMENT_NODE */) &&
nodeValue.trim() === '') {
nodesToRemove.push(node);
currentNode = previousNode;
index--;
}
}
}
else if (node.nodeType === 8 /* Node.COMMENT_NODE */ &&
node.nodeValue === textMarkerContent) {
const parent = node.parentNode;
// If we don't have a previous node add a marker node.
// If the previousSibling is removed, because it's another part
// placholder, or empty text, add a marker node.
if (node.previousSibling === null ||
node.previousSibling !== previousNode) {
parent.insertBefore(new Text(), node);
}
else {
index--;
}
this.parts.push(new TemplatePart('node', index++));
nodesToRemove.push(node);
// If we don't have a next node add a marker node.
// We don't have to check if the next node is going to be removed,
// because that node will induce a marker if so.
if (node.nextSibling === null) {
parent.insertBefore(new Text(), node);
}
else {
index--;
}
currentNode = previousNode;
partIndex++;
}
}
// Remove text binding nodes after the walk to not disturb the TreeWalker
for (const n of nodesToRemove) {
n.parentNode.removeChild(n);
}
}
/**
* Returns a string of HTML used to create a <template> element.
*/
_getHtml(strings, svg) {
const l = strings.length;
const a = [];
let isTextBinding = false;
for (let i = 0; i < l - 1; i++) {
const s = strings[i];
a.push(s);
// We're in a text position if the previous string matches the
// textRegex. If it doesn't and the previous string has no tags, then
// we use the previous text position state.
isTextBinding = s.match(textRegex) !== null ||
(s.match(hasTagsRegex) !== null && isTextBinding);
a.push(isTextBinding ? textMarker : attributeMarker);
}
a.push(strings[l - 1]);
const html = a.join('');
return svg ? `<svg>${html}</svg>` : html;
}
}
/* harmony export (immutable) */ __webpack_exports__["Template"] = Template;
const getValue = (part, value) => {
// `null` as the value of a Text node will render the string 'null'
// so we convert it to undefined
if (value != null && value.__litDirective === true) {
value = value(part);
}
return value === null ? undefined : value;
};
/* harmony export (immutable) */ __webpack_exports__["getValue"] = getValue;
const directive = (f) => {
f.__litDirective = true;
return f;
};
/* harmony export (immutable) */ __webpack_exports__["directive"] = directive;
class AttributePart {
constructor(instance, element, name, strings) {
this.instance = instance;
this.element = element;
this.name = name;
this.strings = strings;
this.size = strings.length - 1;
}
setValue(values, startIndex) {
const strings = this.strings;
let text = '';
for (let i = 0; i < strings.length; i++) {
text += strings[i];
if (i < strings.length - 1) {
const v = getValue(this, values[startIndex + i]);
if (v &&
(Array.isArray(v) || typeof v !== 'string' && v[Symbol.iterator])) {
for (const t of v) {
// TODO: we need to recursively call getValue into iterables...
text += t;
}
}
else {
text += v;
}
}
}
this.element.setAttribute(this.name, text);
}
}
/* harmony export (immutable) */ __webpack_exports__["AttributePart"] = AttributePart;
class NodePart {
constructor(instance, startNode, endNode) {
this.instance = instance;
this.startNode = startNode;
this.endNode = endNode;
this._previousValue = undefined;
}
setValue(value) {
value = getValue(this, value);
if (value === null ||
!(typeof value === 'object' || typeof value === 'function')) {
// Handle primitive values
// If the value didn't change, do nothing
if (value === this._previousValue) {
return;
}
this._setText(value);
}
else if (value instanceof TemplateResult) {
this._setTemplateResult(value);
}
else if (Array.isArray(value) || value[Symbol.iterator]) {
this._setIterable(value);
}
else if (value instanceof Node) {
this._setNode(value);
}
else if (value.then !== undefined) {
this._setPromise(value);
}
else {
// Fallback, will render the string representation
this._setText(value);
}
}
_insert(node) {
this.endNode.parentNode.insertBefore(node, this.endNode);
}
_setNode(value) {
this.clear();
this._insert(value);
this._previousValue = value;
}
_setText(value) {
const node = this.startNode.nextSibling;
if (node === this.endNode.previousSibling &&
node.nodeType === Node.TEXT_NODE) {
// If we only have a single text node between the markers, we can just
// set its value, rather than replacing it.
// TODO(justinfagnani): Can we just check if _previousValue is
// primitive?
node.textContent = value;
}
else {
this._setNode(document.createTextNode(value === undefined ? '' : value));
}
this._previousValue = value;
}
_setTemplateResult(value) {
let instance;
if (this._previousValue &&
this._previousValue.template === value.template) {
instance = this._previousValue;
}
else {
instance =
new TemplateInstance(value.template, this.instance._partCallback);
this._setNode(instance._clone());
this._previousValue = instance;
}
instance.update(value.values);
}
_setIterable(value) {
// For an Iterable, we create a new InstancePart per item, then set its
// value to the item. This is a little bit of overhead for every item in
// an Iterable, but it lets us recurse easily and efficiently update Arrays
// of TemplateResults that will be commonly returned from expressions like:
// array.map((i) => html`${i}`), by reusing existing TemplateInstances.
// If _previousValue is an array, then the previous render was of an
// iterable and _previousValue will contain the NodeParts from the previous
// render. If _previousValue is not an array, clear this part and make a new
// array for NodeParts.
if (!Array.isArray(this._previousValue)) {
this.clear();
this._previousValue = [];
}
// Lets us keep track of how many items we stamped so we can clear leftover
// items from a previous render
const itemParts = this._previousValue;
let partIndex = 0;
for (const item of value) {
// Try to reuse an existing part
let itemPart = itemParts[partIndex];
// If no existing part, create a new one
if (itemPart === undefined) {
// If we're creating the first item part, it's startNode should be the
// container's startNode
let itemStart = this.startNode;
// If we're not creating the first part, create a new separator marker
// node, and fix up the previous part's endNode to point to it
if (partIndex > 0) {
const previousPart = itemParts[partIndex - 1];
itemStart = previousPart.endNode = document.createTextNode('');
this._insert(itemStart);
}
itemPart = new NodePart(this.instance, itemStart, this.endNode);
itemParts.push(itemPart);
}
itemPart.setValue(item);
partIndex++;
}
if (partIndex === 0) {
this.clear();
this._previousValue = undefined;
}
else if (partIndex < itemParts.length) {
const lastPart = itemParts[partIndex - 1];
// Truncate the parts array so _previousValue reflects the current state
itemParts.length = partIndex;
this.clear(lastPart.endNode.previousSibling);
lastPart.endNode = this.endNode;
}
}
_setPromise(value) {
value.then((v) => {
if (this._previousValue === value) {
this.setValue(v);
}
});
this._previousValue = value;
}
clear(startNode = this.startNode) {
let node;
while ((node = startNode.nextSibling) !== this.endNode) {
node.parentNode.removeChild(node);
}
}
}
/* harmony export (immutable) */ __webpack_exports__["NodePart"] = NodePart;
const defaultPartCallback = (instance, templatePart, node) => {
if (templatePart.type === 'attribute') {
return new AttributePart(instance, node, templatePart.name, templatePart.strings);
}
else if (templatePart.type === 'node') {
return new NodePart(instance, node, node.nextSibling);
}
throw new Error(`Unknown part type ${templatePart.type}`);
};
/* harmony export (immutable) */ __webpack_exports__["defaultPartCallback"] = defaultPartCallback;
/**
* An instance of a `Template` that can be attached to the DOM and updated
* with new values.
*/
class TemplateInstance {
constructor(template, partCallback = defaultPartCallback) {
this._parts = [];
this.template = template;
this._partCallback = partCallback;
}
update(values) {
let valueIndex = 0;
for (const part of this._parts) {
if (part.size === undefined) {
part.setValue(values[valueIndex]);
valueIndex++;
}
else {
part.setValue(values, valueIndex);
valueIndex += part.size;
}
}
}
_clone() {
const fragment = document.importNode(this.template.element.content, true);
if (this.template.parts.length > 0) {
// Edge needs all 4 parameters present; IE11 needs 3rd parameter to be
// null
const walker = document.createTreeWalker(fragment, 133 /* NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT */, null, false);
const parts = this.template.parts;
let index = 0;
let partIndex = 0;
let templatePart = parts[0];
let node = walker.nextNode();
while (node != null && partIndex < parts.length) {
if (index === templatePart.index) {
this._parts.push(this._partCallback(this, templatePart, node));
templatePart = parts[++partIndex];
}
else {
index++;
node = walker.nextNode();
}
}
}
if (this.template.svg) {
const svgElement = fragment.firstChild;
fragment.removeChild(svgElement);
const nodes = svgElement.childNodes;
for (let i = 0; i < nodes.length; i++) {
fragment.appendChild(nodes.item(i));
}
}
return fragment;
}
}
/* harmony export (immutable) */ __webpack_exports__["TemplateInstance"] = TemplateInstance;
//# sourceMappingURL=lit-html.js.map
/***/ }),
/* 2 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// Copyright2018 Rodrigo Silveira
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Object.defineProperty(exports, "__esModule", { value: true });
/**
* 01234567890123456789012345678901234567890123456789012345678901234567890123456789
* This simple class checks whether a string is a valid CSS color. The validation
* consists of two steps. The first validates whether a string is a valid hex, rgb(a),
* or hsl(a). If not, it validates whether the string is a valid CSS color name.
*/
class CssColorString {
constructor() {
// See here: https://www.w3schools.com/cssref/css_colors_legal.asp, for a discussion on the CSS Legal Color Values
// From here: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
this.VALID_HEX_CSS_COLOR_EXPRESSION = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
// From here: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
this.VALID_RGB_CSS_COLOR_EXPRESSION = /^rgb\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)\)$/;
// From here: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
this.VALID_RGBA_CSS_COLOR_EXPRESSION = /^rgba\((0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0?\.\d|1(\.0)?)\)$/;
// From here: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
this.VALID_HSL_CSS_COLOR_EXPRESSION = /^hsl\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%\)$/;
// From here: https://gist.github.com/sethlopezme/d072b945969a3cc2cc11
this.VALID_HSLA_CSS_COLOR_EXPRESSION = /^hsla\((0|360|35\d|3[0-4]\d|[12]\d\d|0?\d?\d),(0|100|\d{1,2})%,(0|100|\d{1,2})%,(0?\.\d|1(\.0)?)\)$/;
// From here: https://www.w3schools.com/colors/colors_names.asp
this.VALID_CSS_COLOR_NAMES = [
'CLEAR',
'TRANSPARENT',
'ALICEBLUE',
'ANTIQUEWHITE',
'AQUA',
'AQUAMARINE',
'AZURE',
'BEIGE',
'BISQUE',
'BLACK',
'BLANCHEDALMOND',
'BLUE',
'BLUEVIOLET',
'BROWN',
'BURLYWOOD',
'CADETBLUE',
'CHARTREUSE',
'CHOCOLATE',
'CORAL',
'CORNFLOWERBLUE',
'CORNSILK',
'CRIMSON',
'CYAN',
'DARKBLUE',
'DARKCYAN',
'DARKGOLDENROD',
'DARKGRAY',
'DARKGREY',
'DARKGREEN',
'DARKKHAKI',
'DARKMAGENTA',
'DARKOLIVEGREEN',
'DARKORANGE',
'DARKORCHID',
'DARKRED',
'DARKSALMON',
'DARKSEAGREEN',
'DARKSLATEBLUE',
'DARKSLATEGRAY',
'DARKSLATEGREY',
'DARKTURQUOISE',
'DARKVIOLET',
'DEEPPINK',
'DEEPSKYBLUE',
'DIMGRAY',
'DIMGREY',
'DODGERBLUE',
'FIREBRICK',
'FLORALWHITE',
'FORESTGREEN',
'FUCHSIA',
'GAINSBORO',
'GHOSTWHITE',
'GOLD',
'GOLDENROD',
'GRAY',
'GREY',
'GREEN',
'GREENYELLOW',
'HONEYDEW',
'HOTPINK',
'INDIANRED',
'INDIGO',
'IVORY',
'KHAKI',
'LAVENDER',
'LAVENDERBLUSH',
'LAWNGREEN',
'LEMONCHIFFON',
'LIGHTBLUE',
'LIGHTCORAL',
'LIGHTCYAN',
'LIGHTGOLDENRODYELLOW',
'LIGHTGRAY',
'LIGHTGREY',
'LIGHTGREEN',
'LIGHTPINK',
'LIGHTSALMON',
'LIGHTSEAGREEN',
'LIGHTSKYBLUE',
'LIGHTSLATEGRAY',
'LIGHTSLATEGREY',
'LIGHTSTEELBLUE',
'LIGHTYELLOW',
'LIME',
'LIMEGREEN',
'LINEN',
'MAGENTA',
'MAROON',
'MEDIUMAQUAMARINE',
'MEDIUMBLUE',
'MEDIUMORCHID',
'MEDIUMPURPLE',
'MEDIUMSEAGREEN',
'MEDIUMSLATEBLUE',
'MEDIUMSPRINGGREEN',
'MEDIUMTURQUOISE',
'MEDIUMVIOLETRED',
'MIDNIGHTBLUE',
'MINTCREAM',
'MISTYROSE',
'MOCCASIN',
'NAVAJOWHITE',
'NAVY',
'OLDLACE',
'OLIVE',
'OLIVEDRAB',
'ORANGE',
'ORANGERED',
'ORCHID',
'PALEGOLDENROD',
'PALEGREEN',
'PALETURQUOISE',
'PALEVIOLETRED',
'PAPAYAWHIP',
'PEACHPUFF',
'PERU',
'PINK',
'PLUM',
'POWDERBLUE',
'PURPLE',
'rebeccaPurple',
'RED',
'ROSYBROWN',
'ROYALBLUE',
'SADDLEBROWN',
'SALMON',
'SANDYBROWN',
'SEAGREEN',
'SEASHELL',
'SIENNA',
'SILVER',
'SKYBLUE',
'SLATEBLUE',
'SLATEGRAY',
'SLATEGREY',
'SNOW',
'SPRINGGREEN',
'STEELBLUE',
'TAN',
'TEAL',
'THISTLE',
'TOMATO',
'TURQUOISE',
'VIOLET',
'WHEAT',
'WHITE',
'WHITESMOKE',
'YELLOW',
'YELLOWGREEN',
];
// Ensure VALID_CSS_COLOR_NAMES elements are all upper case
const VALID_CSS_COLOR_NAMES = [];
for (const colorName of this.VALID_CSS_COLOR_NAMES) {
VALID_CSS_COLOR_NAMES.push(colorName.toUpperCase());
}
this.VALID_CSS_COLOR_NAMES = VALID_CSS_COLOR_NAMES.slice(0);
}
isValid(color) {
return (this.isValidColorName(color) ||
this.isValidColorExpressionHex(color) ||
this.isValidRgbColorExpression(color) ||
this.isValidRgbaColorExpression(color) ||
this.isValidHslColorExpression(color) ||
this.isValidHslaColorExpression(color));
}
isValidColorExpressionHex(color) {
return (this.VALID_HEX_CSS_COLOR_EXPRESSION.test(color));
}
isValidRgbColorExpression(color) {
// Remove spaces
const _color = color.replace(/\s/g, '');
return (this.VALID_RGB_CSS_COLOR_EXPRESSION.test(_color));
}
isValidRgbaColorExpression(color) {
// Remove spaces
const _color = color.replace(/\s/g, '');
return (this.VALID_RGBA_CSS_COLOR_EXPRESSION.test(_color));
}
isValidHslColorExpression(color) {
// Remove spaces
const _color = color.replace(/\s/g, '');
return (this.VALID_HSL_CSS_COLOR_EXPRESSION.test(_color));
}
isValidHslaColorExpression(color) {
// Remove spaces
const _color = color.replace(/\s/g, '');
return (this.VALID_HSLA_CSS_COLOR_EXPRESSION.test(_color));
}
isValidColorName(color) {
const upperCaseColor = color.toUpperCase();
// console.log(` ::isValidColorName - color: ` + color);
const validColor = this.VALID_CSS_COLOR_NAMES.find(function (arrayElement) {
// console.log(` ::isValidColorName - color: ` + arrayElement.toUpperCase());
// console.log(` ::isValidColorName - arrayElement: ` + arrayElement.toUpperCase());
return arrayElement === upperCaseColor;
});
// console.log(` ::isValidColorName - validColor: ` + validColor);
return validColor !== undefined;
}
}
exports.CssColorString = CssColorString;
/***/ }),
/* 3 */
/***/ (function(module, exports, __webpack_require__) {
"use strict";
// Copyright 2018 Rodrigo Silveira
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of
// this software and associated documentation files (the "Software"), to deal in
// the Software without restriction, including without limitation the rights to
// use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
// the Software, and to permit persons to whom the Software is furnished to do so,
// subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
// FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
// IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
// CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Object.defineProperty(exports, "__esModule", { value: true });
const rectangle_1 = __webpack_require__(4);
class BoxPlot {
constructor(axisColor, axisLineWidth, chartType, className, drawingMethod, height, highWhiskerColor, highWhiskerLineWidth, interQuartileRangeLineColor, interQuartileRangeFillColor, interQuartileRangeLineWidth, lowWhiskerColor, lowWhiskerLineWidth, medianColor, medianLineWidth, population, width) {
this.coordinatesTips = [];
this.tootipBoxMargin = 2;
this.tooltipId = 'rms-sparkline-boxplot-tooltip';
// Save the attributes
this.axisColor = axisColor;
this.axisLineWidth = axisLineWidth;
this.chartType = chartType;
this.className = className;
this.drawingMethod = drawingMethod;
this.height = height;
this.highWhiskerLineWidth = highWhiskerLineWidth;
this.highWhiskerColor = highWhiskerColor;
this.interQuartileRangeLineColor = interQuartileRangeLineColor;
this.interQuartileRangeFillColor = interQuartileRangeFillColor;
this.interQuartileRangeLineWidth = interQuartileRangeLineWidth;
this.lowWhiskerColor = lowWhiskerColor;
this.lowWhiskerLineWidth = lowWhiskerLineWidth;
this.medianColor = medianColor;
this.medianLineWidth = medianLineWidth;
this.