@cnrs/hecate-views-charts 0.2.0 → 0.4.0

package/README.md

@@ -1,15 +1,32 @@
-# hecate-views
+# Hecate ”charts” views
 
 <a href='https://datasphere.readthedocs.io/projects/hecate/'><img src='https://gitlab.huma-num.fr/datasphere/doc/assets/-/raw/main/banners/HECATE.png' width='100%'></a>
 
+[![license](https://img.shields.io/badge/license-AGPL3.0-informational?logo=gnu&color=success)](https://www.gnu.org/licenses/agpl-3.0.html)
+[![repostatus](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)
+[![pipeline](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/badges/main/pipeline.svg)](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/pipelines/latest)
+[![coverage](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/badges/main/coverage.svg)](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/coverage/)
+[![latest](https://img.shields.io/npm/v/@cnrs/hecate-views-charts.svg)](https://www.npmjs.com/package/@cnrs/hecate-views-charts)
+[![documentation](https://img.shields.io/badge/documentation-jsdoc-blue)](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/)
+
 **Hecate** is a free web application for managing scientific databases.
 
-**hecate-views** is a free Javascript library for visualizing scientific data.
-Views are specific glances on subsets of your scientific database : lists, charts, maps, and so on.
+[**@cnrs/hecate-views-charts**](https://www.npmjs.com/package/@cnrs/hecate-views-charts) is a free Javascript library for visualizing scientific data.
+[Views](https://datasphere.readthedocs.io/projects/hecate/en/latest/design/views.html) are specific glances on subsets of your scientific database : lists, charts, maps, timelines, thumbnails, and so on.
 Each view takes HERA-formatted data ([10.5281/zenodo.12795179](http://doi.org/10.5281/zenodo.12795179)) as its input, and can be easily configured to suit your needs.
 
+This package provides the following views:
+
+* [BarChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/BarChart.html), usable as a `hecate-barchart` HTML element;
+* [Histogram](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/Histogram.html), usable as a `hecate-histogram` HTML element;
+* [LineChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/LineChart.html), usable as a `hecate-linechart` HTML element;
+* [ScatterPlot](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/ScatterPlot.html), usable as a `hecate-scatterplot` HTML element;
+* [StackedAreaChart](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/StackedAreaChart.html), usable as a `hecate-stackedareachart` HTML element;
+* [Streamgraph](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/Streamgraph.html), usable as a `hecate-streamgraph` HTML element.
+
 ## Resources
 
 * [Documentation](https://datasphere.readthedocs.io/projects/hecate/)
-* [Releases](https://www.npmjs.com/package/@cnrs/hecate-views?activeTab=versions)
+* [API Documentation](https://datasphere.gitpages.huma-num.fr/hecate/views/charts/doc/)
+* [Releases](https://www.npmjs.com/package/@cnrs/hecate-views-charts?activeTab=versions)
 * [Getting help](https://gitlab.huma-num.fr/datasphere/hecate/views/charts/-/issues/)

package/package.json

@@ -1,4 +1,6 @@
 {
+  "name": "@cnrs/hecate-views-charts",
+  "description": "Views web components available to any web app.",
   "@comment comments": [
     "To track and understand the whys of each part of this package.json, ",
     "in particular dependencies, please explain when you modify this file.",
@@ -9,8 +11,15 @@
     "",
     "package.json documentation: https://docs.npmjs.com/files/package.json"
   ],
-  "name": "@cnrs/hecate-views-charts",
-  "description": "Views web components available to any web app.",
+  "type": "module",
+  "main": "src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "files": [
+    "src/**/*.js"
+  ],
+  "version": "0.4.0",
   "keywords": [
     "dataviz",
     "research",
@@ -21,17 +30,7 @@
     "browser",
     "library"
   ],
-  "type": "module",
-  "module": "src/index.js",
-  "main": "src/index.js",
-  "exports": {
-    ".": "./src/index.js",
-    "default": "./src/index.js"
-  },
-  "files": [
-    "src/**/*.js"
-  ],
-  "version": "0.2.0",
+  "author": "The Hecate contributors",
   "license": "AGPL",
   "homepage": "https://datasphere.readthedocs.io/projects/hecate/",
   "repository": {
@@ -41,8 +40,8 @@
   "bugs": {
     "url": "https://gitlab.huma-num.fr/datasphere/hecate/views/charts/-/issues"
   },
-  "main": "src/index.js",
   "dependencies": {
+    "@cnrs/hecate-views": "^0.3.6",
     "d3": "latest"
   },
   "@comment devDependencies": {
@@ -56,7 +55,7 @@
       "@requires vite ≥ 3.0.0 (and node ≥ 14.18)",
       "- Vitest website: https://vitest.dev/"
     ],
-    "@vitest/coverage-c8": [
+    "@vitest/coverage-v8": [
       "Compute percentage of code covered by tests.",
       "- Vitest coverage documentation: https://vitest.dev/guide/coverage.html"
     ],
@@ -66,9 +65,20 @@
       "- https://www.npmjs.com/package/happy-dom"
     ],
     "eslint": [
-      "To use eslint ECMAScript linter.",
+      "A linter for analysing ECMAScript code (among others).",
       "- ESLint documentation: https://eslint.org/"
     ],
+    "@eslint/js": [
+      "ESLint plugin specialised in the javascript language.",
+      "Needed since javascript-specifics have been separated from the core ESLint.",
+      "Referred in the ESLint config file (eslint.config.mjs).",
+      "- https://www.npmjs.com/package/@eslint/js"
+    ],
+    "globals": [
+      "A collection of identifiers used by ESLint.",
+      "Referred in the ESLint config file (eslint.config.mjs).",
+      "- https://www.npmjs.com/package/globals"
+    ],
     "jsdoc": [
       "Javascript documentation generation tool.",
       "See `gendoc` script in this same file for some usage details.",
@@ -79,8 +89,10 @@
     "vite": "latest",
     "vitest": "latest",
     "@vitest/coverage-v8": "latest",
-    "happy-dom": "<=12.1.5",
+    "happy-dom": "latest",
     "eslint": "latest",
+    "@eslint/js": "latest",
+    "globals": "latest",
     "jsdoc": "latest"
   },
   "@comment scripts": {
@@ -102,13 +114,25 @@
       "@requires vitest @vitest/coverage-v8 (dev dependencies)"
     ],
     "build": [
-      "Bundles project for production in `dist` folder.",
+      "Bundles project in `dist` folder. Please note that:",
+      "- we use vite default settings, so don't need any `vite.config.mjs`.",
+      "- the result of this build is of no use, as this `package.json` file",
+      "  says the NPM package contents are `src/**/*.js`, not `dist/*.js`.",
+      "  We do that because our code is already ESM, Node and modern browsers",
+      "  compatible, with no need for transpiling (no TypeScript here).",
+      "In other words, this command isn't really useful, though I'll keep it",
+      "to differentiate it from `buid:cdn`, which IS used.",
+      "@requires vite (dev dependency)"
+    ],
+    "build:cdn": [
+      "Bundles project for production CDNs in `cdn/dist` folder.",
+      "Delivery to NPM must then be made using `cdn/package.json`.",
       "@requires vite (dev dependency)"
     ],
     "lint": [
       "Checks code style using ESLint. note: Argument pattern is surrounded with ",
       "double quotes, so its resolution doesn't depend on runtime environment.",
-      "@requires eslint (dev dependency)",
+      "@requires eslint and @eslint/js (dev dependencies)",
       "- ESLint configuration file is `eslint.config.mjs`",
       "- ESLint documentation: https://eslint.org/"
     ],
@@ -128,7 +152,8 @@
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --coverage",
     "build": "vite build",
-    "lint": "eslint \"src/**/*.js\"",
+    "build:cdn": "vite build --config cdn/vite.cdn.config.mjs",
+    "lint": "exec eslint \"src/**/*.js\"",
     "doc:html": "./node_modules/jsdoc/jsdoc.js -c .jsdoc.conf.json"
   }
 }

package/src/init.js

@@ -1,8 +1,8 @@
-import { Sample, } from './components/';
-import { BarChart, Histogram, ScatterPlot, LineChart } from './views/';
-
-customElements.define('sample-component', Sample);
-customElements.define('scatter-plot', ScatterPlot);
-customElements.define('bar-chart', BarChart);
-customElements.define('histogram-chart', Histogram);
-customElements.define('line-chart', LineChart);
+import {
+    BarChart,
+    Histogram,
+    ScatterPlot,
+    LineChart,
+    StackedAreaChart,
+    Streamgraph,
+  } from './views/index.js';  // eslint-disable-line no-unused-vars

package/src/views/all.js

@@ -0,0 +1,5 @@
+import './barchart.js';
+import './histogram.js';
+import './linechart.js';
+import './scatterplot.js';
+import './stackedareachart.js';

package/src/views/barchart.js

@@ -1,89 +1,46 @@
+import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
 
 
+
 /**
  * BarChart web component.
  * @see https://en.wikipedia.org/wiki/Bar_chart
  */
-class BarChart extends HTMLElement{
+class BarChart extends View {
 
-  constructor(){
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.hera =  {};
-    this.settings = {};
-  }
+  get pidx() { return this.settings.x || 'x'; }
+  get pidy() { return this.settings.y || 'y'; }
 
-    /** Static property returning an array of attributes observed by the browser
-     */
-    static get observedAttributes() {
-      return ['data-hera', 'data-settings'];
-    }
 
-  get items() { return this.hera.items || []; }
-  get entities() { return this.hera.entities || []; }
-  get properties() { return this.hera.properties || []; }
 
-  get pidx() { return this.settings.x || 'x'; }
-  get pidy() { return this.settings.y || 'y'; }
-  get color() { return this.settings.color || '#7b4c98'; }
-
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   * @param {!string} attribute - Attribute name
-   * @param old - Previous value for `attribute`
-   * @param now - Current value for `attribute`
-   */
-  attributeChangedCallback(attribute, old, now) {
-    if (old === now) return;  // don't bother if there is nothing new
-    this[attribute] = now;
-    // data-* attributes can only be strings, so we cannot deserialize JSON
-    // in them ; so we use plain object fields to store deserialized values
-    // we trim the prefix to get the field name, so 'data-x' becomes 'x'
-    const fieldName = attribute.split('-').slice(1).join('-');
-    this[fieldName] = JSON.parse(now);
-    // note that this does not defeat the purpose of using data-* attributes
-    // in the first place, as if a name clash should happen in the future,
-    // we could edit this class with no impact on the users code
-  }
-    
-    //js method called everytime the component is added to the dom
-  connectedCallback(){
-    var dataset = this.prepareData(this.hera, this.settings);
-  
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
+
+    var dataset = this.prepareData();
         //creation of scene 
         const margin = { top : 70, right : 30, bottom: 40, left : 80};
-        const {sceneWidth, sceneHeight, barWidth, svg} = this.createScene(500, 500, this.items.length, margin);
+        const {sceneWidth, sceneHeight, barWidth, svg} = this.createScene(500, 500, this.db.items.length, margin);
         
         //addition of axises
         var {y_scale, x_scale} = this.createAxisScales(sceneHeight, sceneWidth, dataset);
         this.addAxises(x_scale, y_scale, sceneHeight, sceneWidth, margin, svg)
 
         this.displayChart(sceneHeight, barWidth, dataset, y_scale, x_scale, svg);
-
     }
 
     /**
-     * Sets the shadow dom of the component, currently creates a single div 
-     * @returns the element that was appended to the shadow dom
-     */ 
-  createShadowDom() {
-    const e = document.createElement('div');
-    this.shadowRoot.appendChild(e);
-    return e;
-  }
-
-    /**
-     * Prepare the data by giving it the correct format
-     * @param {object} rawData - the data as it was passed , it's a js object type 
-     * @param {object} rawSettings - the settings as it was passed, it's a js object type
-     * @returns js object that contains the elements of metadata, each key representing a different pid
+     * Prepare the data by giving it the correct format.
+     * @param {object} db HERA-formatted data as it was passed.
+     * @returns {object} Metadata ; each key representing a different pid.
      */
-    prepareData(rawData, rawSettings){
+    prepareData() {
         var barValues = [];
         var barLabels = [];
-        rawData.items.forEach(item => {
+        this.db.items.forEach(item => {
             item.metadata.forEach(meta => {
                 if (meta.pid === this.pidy) {  // Y axis is height of bars
                     barValues.push(parseInt(meta.value));
@@ -114,7 +71,8 @@ class BarChart extends HTMLElement{
         const sceneHeight = height - margin.top - margin.bottom; 
         const barWidth = sceneWidth/dataLength
         
-        const divElem = this.createShadowDom();
+        const divElem = document.createElement('div');
+        this.viewRoot.appendChild(divElem);
         const container =  d3.select(divElem);
         
         //addition of container to the svg 
@@ -236,11 +194,27 @@ class BarChart extends HTMLElement{
   }
 
   getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
+    const found = this.db.properties.find((p) => p['id'] === pid);
     return found ? found : null;
   }
+
 }
 
 
 
+/** Returns if a string is a valid color.
+ *
+ *  @param {string} value Color (or not).
+ *  @returns {boolean} `true` if `value` is a valid color, `false` if not.
+ */
+function isColor(value) {
+  var style = new Option().style;
+  style.color = value;  // if value invalid, it won't be assigned
+  return style.color == value.toLowerCase();
+}
+
+
+
+customElements.define('hecate-barchart', BarChart);
+
 export { BarChart };

package/src/views/cartesianchart.js

@@ -0,0 +1,303 @@
+import { View } from '@cnrs/hecate-views';
+import * as d3 from 'd3';
+
+
+
+class CartesianChart extends View {
+
+  get vertical() { return this.settings.orientation === 'vertical' || false; }
+  get hEncoding() { return this.vertical? this.settings.y : this.settings.x; }
+  get vEncoding() { return this.vertical? this.settings.x : this.settings.y; }
+  get reverseX() { return this.settings.x?.axis?.reverse === true || false; }
+  get reverseY() { return this.settings.y?.axis?.reverse === true || false; }
+  get normalizeX() { return this.settings.x?.normalize === true || false; }
+  get normalizeY() { return this.settings.y?.normalize === true || false; }
+  get normalizeH() { return this.hEncoding?.normalize === true || false; }
+  get normalizeV() { return this.vEncoding?.normalize === true || false; }
+
+  getItemX(item) { return getMetadata(item, this.settings.x?.pid); }
+  getItemY(item) { return getMetadata(item, this.settings.y?.pid); }
+  getItemCategory(item) { return getMetadata(item, this.settings.category?.pid); }
+
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
+
+    const container = document.createElement('div');
+    container.style = 'width: 100%; height: 100%;';
+    this.viewRoot.appendChild(container);
+
+    const xProperty = getProperty(this.db, this.settings.x?.pid);
+    const yProperty = getProperty(this.db, this.settings.y?.pid);
+    const cProperty = getProperty(this.db, this.settings.category?.pid);
+    const xType = xProperty?.type || 'text';
+    const yType = yProperty?.type || 'text';
+    const cType = cProperty?.type || 'text';
+    const parsers = {
+      x: getParser(xType),
+      y: getParser(yType),
+      color: getParser(cType),
+    };
+    const scales = {
+      x: getScale(xType),
+      y: getScale(yType),
+      color: getScale(cType),
+    };
+    const plot = {
+      width: this.clientWidth,
+      height: this.clientHeight,
+    };
+
+    this.prepare(parsers, scales);
+
+    // Prepare the scales for positional and color encodings.
+    // domain = data ; range = render ... cuz a function has:
+    // - a domain (its input values),
+    // - a codomain (theorical output values), and
+    // - a range (effective output values)
+    plot.vx = this.createXScale(plot, parsers, scales.x);
+    plot.vy = this.createYScale(plot, parsers, scales.y);
+    plot.color = this.createColorScale(parsers, scales.color);
+    // if this.vertical is true, X axis becomes vertical and Y axis horizontal
+    // so we swap them, /but/ they stay named as vx,vy (and not eg. vh,vv)
+    // because they really are data scales, and data channels are X,Y
+    if (this.vertical) [plot.vx, plot.vy] = [plot.vy, plot.vx];
+    // plot.padding is the internal space reserved around the
+    // cartesian plotting area, incuding axes, ticks and labels.
+    const { hAxis, vAxis, padding } = this.createAxes(plot);
+    plot.padding = padding;
+
+    // Create the SVG container.
+    const svgWidth = plot.width + plot.padding.left + plot.padding.right;
+    const svgHeight = plot.height + plot.padding.top + plot.padding.bottom;
+    const svg = d3.create('svg')
+        .attr('width', svgWidth)
+        .attr('height', svgHeight)
+        .attr('viewBox', [0, 0, svgWidth, svgHeight])
+        .attr('style', 'max-width: 100%; height: auto;');
+
+    // render data
+    this.renderData(svg, plot, parsers);
+    // render axes
+    this.renderHAxis(svg, plot, hAxis);
+    this.renderVAxis(svg, plot, vAxis);
+
+    container.appendChild(svg.node());
+  }
+
+  prepare(parsers, scales) { }
+
+  renderData(svg, plot, parsers) {
+    //const { x, y, category } = this.settings;
+    const message = //([x, y, c].every(v => v !== undefined)) ?
+        `${this.constructor.name} should implement renderData()`
+    //  : "Missing settings"
+      ;
+    svg.append('text')
+      .attr('x', plot.width / 2 + plot.padding.left)
+      .attr('y', plot.height / 2 + plot.padding.top)
+      .attr('text-anchor', 'middle')
+      .attr('fill', 'currentColor')
+      .text(`${this.constructor.name} should implement renderData()`);
+  }
+
+  renderHAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.height + plot.padding.top;
+    axis.attr('transform', `translate(${xOffset},${yOffset})`);
+    if (this.hEncoding?.axis?.domain === false)
+      axis.call(g => g.select('.domain').remove());
+    svg.append(() => axis.node());
+  }
+
+  renderVAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.padding.top;
+    axis.attr('transform', `translate(${xOffset},${yOffset})`);
+    if (this.vEncoding?.axis?.domain === false)
+      axis.call(g => g.select('.domain').remove());
+    svg.append(() => axis.node());
+  }
+
+  createXScale(plot, parsers, scale) {
+    let domain = this.createXDomain(parsers);
+    if (this.reverseX) domain = [...domain].reverse();
+    const range = this.createXRange(plot);
+    return scale().domain(domain).range(range);
+  }
+  createYScale(plot, parsers, scale) {
+    let domain = this.createYDomain(parsers);
+    if (this.reverseY) domain = [...domain].reverse();
+    const range = this.createYRange(plot);
+    return scale().domain(domain).range(range);
+  }
+  createColorScale(parsers, scale) {
+    const cats = new Set();
+    for (const item of this.db.items) cats.add(this.getItemCategory(item));
+    const categories = [...cats];  // Set -> Array
+    const domain = this.createColorDomain(categories);
+    const range = this.createColorRange();
+    return scale().domain(domain).range(range);
+  }
+
+  createXDomain(parsers) { return [0, 1]; }
+  createYDomain(parsers) { return [0, 1]; }
+  createColorDomain(categories) { return categories; }
+  createXRange(plot) { return this.vertical ? [plot.height, 0] : [0, plot.width]; }
+  createYRange(plot) { return this.vertical ? [0, plot.width] : [plot.height, 0]; }
+  createColorRange() { return d3.schemeTableau10; }
+  // TODO: provide a fallback palette or generated colors
+  // when categories.length > 10 (d3 reuses colors)
+
+  createAxes(plot) {
+    // create a temporary SVG, only for axes bounding box computation
+    // these computations allow to deduce necessary paddings
+    const tmp = d3.select(this.viewRoot).append('svg')
+      .style('position', 'absolute').style('visibility', 'hidden')
+      ;
+    // create horizontal and vertical axes and add them to temporary svg
+    const hAxis = this.createHAxis(tmp, plot);
+    const vAxis = this.createVAxis(tmp, plot);
+
+    const hAxisBBox = hAxis.node().getBBox();
+    const vAxisBBox = vAxis.node().getBBox();
+
+    // space around the cartesian plotting area (inc. axes, ticks and labels).
+    const padding = {
+      top: -vAxisBBox.y, // overflow of first vertical tick label
+      right: hAxisBBox.x + hAxisBBox.width - plot.width, // overflow of last horizontal tick label
+      bottom: hAxisBBox.height, // room for horizontal axis, inc. ticks and labels
+      left: -vAxisBBox.x,  // room for vertical axis, inc. ticks and labels
+    };
+
+    // add axes labels (if any) and update `padding` (if so)
+    if (this.hEncoding?.axis?.name) { // create label for horizontal axis `hAxis`
+      const hLabel = this.createHAxisLabel(hAxis, this.hEncoding.axis.name);
+      const { x,y } = this.createHAxisLabelOffset(plot, padding, hLabel);
+      hLabel.attr('x', x).attr('y', y);
+    }
+    if (this.vEncoding?.axis?.name) { // create label for vertical axis `vAxis`
+      const vLabel = this.createVAxisLabel(vAxis, this.vEncoding.axis.name);
+      const { x,y } = this.createVAxisLabelOffset(plot, padding, vLabel);
+      vLabel.attr('x', x).attr('y', y);
+    }
+
+    // padding computations are done, so delete `tmp` svg ; after that,
+    // hAxis,vAxis elements are orphaned, allowing them to be added to the
+    // real svg `svg`, below
+    tmp.remove();
+
+    return { hAxis, vAxis, padding };
+  }
+
+  /**
+   * Creates the horizontal axis and adds it to the SVG.
+   * @param {d3.Selection} svg SVG element.
+   * @param {Plot} plot Coordinate system for `svg`.
+   * @returns {d3.Selection} X axis SVG element.
+   */
+  createHAxis(svg, plot) {
+    const scale = plot.vx;
+    const axis = d3.axisBottom(scale);
+    if (this.normalizeH) axis.tickFormat(d3.format(".0%"));
+    return svg.append('g').call(axis);
+  }
+
+  createVAxis(svg, plot) {
+    const scale = plot.vy;
+    const axis = d3.axisLeft(scale);
+    if (this.normalizeV) axis.tickFormat(d3.format(".0%"));
+    return svg.append('g').call(axis);
+  }
+
+  /**
+   * Creates the horizontal axis label, and add it to the horizontal axis.
+   * @param {d3.Selection} axis Horizontal axis SVG element (eg. a `<g>`).
+   * @param {string} label Horizontal axis label string.
+   * @returns {d3.Selection} Horizontal axis label SVG element.
+   */
+  createHAxisLabel(axis, label) {
+    return axis.append('text')
+        .attr('dominant-baseline', 'hanging')
+        .attr('fill', 'currentColor')
+        .attr('text-anchor', 'end')
+        .text(label);
+  }
+
+  createVAxisLabel(axis, label) {
+    return axis.append('text')
+        .attr('dominant-baseline', 'hanging')
+        .attr('fill', 'currentColor')
+        .attr('text-anchor', 'start')
+        .text(label);
+  }
+
+  createHAxisLabelOffset(plot, padding, label) {
+    const labelBBox = label.node().getBBox();
+    // increase the bottom padding so the label fits inside svg viewBox
+    padding.bottom += labelBBox.height;
+    // position the label so its top aligns with the ticks labels bottom
+    return {
+      x: plot.width + padding.right,
+      y: padding.bottom -labelBBox.height,
+    };
+  }
+
+  createVAxisLabelOffset(plot, padding, label) {
+    const labelBBox = label.node().getBBox();
+    const yMax = d3.max(plot.vy.domain());
+    const yTop = plot.vy(plot.vy.domain()[1]);
+    // increase the top padding so the label fits inside svg viewBox
+    padding.top = labelBBox.height - yTop;
+    // position the label so its bottom aligns with the upper tick label top
+    return {
+      x: -padding.left,
+      y: yTop - labelBBox.height,
+    };
+  }
+}
+
+
+
+const PARSERS = {
+  'date': d => new Date(d),
+  'number': d => +d,
+  'text': d => d,
+};
+const SCALES = {
+  'date': d3.scaleUtc,
+  'number': d3.scaleLinear,
+  'text': d3.scaleOrdinal,
+};
+
+function getParser(type) { return PARSERS[type]; }
+function getScale(type) { return SCALES[type]; }
+
+function getMetadata(item, pid) {
+  for (const meta of item['metadata']) {
+    if (pid != null && meta['pid'] == pid) return meta['value'];
+  }
+  return null;
+}
+function getProperty(db, pid) {  // TODO why can't I use await db.getProperty?
+  return db.properties.filter(e => e.id == pid)[0];
+}
+
+export { CartesianChart };
+
+/**
+ * Cartesian plotting area.
+ *
+ * This object defines the coordinate system used to render a chart.
+ *
+ * @typedef {Object} Plot
+ * @property {number} width - Width of the drawable plotting area, excluding padding.
+ * @property {number} height - Height of the drawable plotting area, excluding padding.
+ * @property {Function} vx - Maps X values from data space to view space.
+ * @property {Function} vy - Maps Y values from data space to view space.
+ * @property {{top:number,right:number,bottom:number,left:number}} [padding]
+ *   Internal space reserved for axes, ticks and labels.
+ * TODO
+ */

package/src/views/histogram.js

@@ -1,74 +1,40 @@
+import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
 
 
+
 /**
  * Histogram web component.
  * @see https://en.wikipedia.org/wiki/Histogram
  */
-class Histogram extends HTMLElement{
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.hera = {};
-    this.settings = {};
-  }
-  /**
-   * Static property returning the array of attributes
-   * observed by the browser.
-   * @returns {Array<string>} Attribute names
-   */
-  static get observedAttributes() {
-    return ['data-hera', 'data-settings'];
-  }
-
-  get items() { return this.hera.items || []; }
-  get entities() { return this.hera.entities || []; }
-  get properties() { return this.hera.properties || []; }
+class Histogram extends View {
 
   get pidx() { return this.settings.x || 'x'; }
   get pidy() { return this.settings.y || 'y'; }
-  get color() { return this.settings.color || '#7b4c98'; }
 
   get padding() {
     return this.settings.padding
         || { top: 20, right: 20, bottom: 30, left: 40 };
   }
 
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   * @param {!string} attribute - Attribute name
-   * @param old - Previous value for `attribute`
-   * @param now - Current value for `attribute`
+  /** Runs any required rendering.
    */
-  attributeChangedCallback(attribute, old, now) {
-    if (old === now) return;  // don't bother if there is nothing new
-    this[attribute] = now;
-    // data-* attributes can only be strings, so we cannot deserialize JSON
-    // in them ; so we use plain object fields to store deserialized values
-    // we trim the prefix to get the field name, so 'data-x' becomes 'x'
-    const fieldName = attribute.split('-').slice(1).join('-');
-    this[fieldName] = JSON.parse(now);
-    // note that this does not defeat the purpose of using data-* attributes
-    // in the first place, as if a name clash should happen in the future,
-    // we could edit this class with no impact on the users code
-  }
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
 
-  /**
-   * Called when the element is connected to a DOM.
-   * Runs any required rendering.
-   */
-  connectedCallback(){
+    const bins = this.prepareData();
+    // create scene
 
     this.width = this.parentElement.clientWidth;
     this.height = this.parentElement.clientHeight;
 
     const container = document.createElement('div');
-    this.shadowRoot.appendChild(container);
+    this.viewRoot.appendChild(container);
 
     // group items into "bins", so that scene creation is easier
-    const bins = this.prepareData();
     // create viewport, ie. d3 "scale" functions for axes
     const { vx, vy } = this.createViewport(bins);
     // create a SVG container for the whole scene
@@ -110,7 +76,7 @@ class Histogram extends HTMLElement{
   prepareData() {
     var barValues = [];
     var classValues = [];
-    this.items.forEach(item => {
+    this.db.items.forEach(item => {
       item.metadata.forEach(meta => {
         if (meta.pid === this.pidx) {
           barValues.push(parseInt(meta.value));
@@ -139,12 +105,12 @@ class Histogram extends HTMLElement{
   /**
    * Creates callbacks for changing each bar color when hovering onto.
    */
-  createHoverCallbacks(msg) {
+  createHoverCallbacks(msg) {  // eslint-disable-line no-unused-vars
     return {
-      mouseover: function(d) {
+      mouseover: function(d) {  // eslint-disable-line no-unused-vars
         d3.select(this).style('opacity', .5)
       },
-      mouseleave: function(d) {
+      mouseleave: function(d) {  // eslint-disable-line no-unused-vars
         d3.select(this).style('opacity', 1)
       },
     };
@@ -212,11 +178,13 @@ class Histogram extends HTMLElement{
   }
 
   getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
+    const found = this.db.properties.find((p) => p['id'] === pid);
     return found ? found : null;
   }
 }
 
 
 
+customElements.define('hecate-histogram', Histogram);
+
 export { Histogram };

package/src/views/index.js

@@ -1,7 +1,9 @@
-export { BarChart } from './barchart.js';
-export { Histogram } from './histogram.js';
-export { LineChart } from './linechart.js';
-export { ScatterPlot } from './scatterplot.js';
+export * from './barchart.js';
+export * from './histogram.js';
+export * from './linechart.js';
+export * from './scatterplot.js';
+export * from './stackedareachart.js';
+export * from './streamgraph.js';
 
 /**
  * This object is a wrapper for three arrays

package/src/views/linechart.js

@@ -1,80 +1,38 @@
+import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
 
 
+
 /**
  * LineChart web component.
  * @see https://en.wikipedia.org/wiki/Line_chart
  */
-class LineChart extends HTMLElement{
-
-  constructor(){
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.hera =  {};
-    this.settings = {};
-  }
-
-
-    /** Static property returning an array of attributes observed by the browser
-     */
-    static get observedAttributes() {
-      return ['data-hera', 'data-settings'];
-    }
-
-  get items() { return this.hera.items || []; }
-  get entities() { return this.hera.entities || []; }
-  get properties() { return this.hera.properties || []; }
+class LineChart extends View {
 
   get pidx() { return this.settings.x || 'x'; }
   get pidy() { return this.settings.y || 'y'; }
-  // WARNING: settings.color should be a valid color, ie. #xxx or
-  // #xxxxxx or one of the acceptable words for color (purple, blue, ...)
-  // if this value is invalid, line will be drawn, but stroke color
-  // will be transparent, and thus invisible on any background
-  get color() { return this.settings.color || '#7b4c98'; }
 
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   * @param {!string} attribute - Attribute name
-   * @param old - Previous value for `attribute`
-   * @param now - Current value for `attribute`
-   */
-  attributeChangedCallback(attribute, old, now) {
-    if (old === now) return;  // don't bother if there is nothing new
-    this[attribute] = now;
-    // data-* attributes can only be strings, so we cannot deserialize JSON
-    // in them ; so we use plain object fields to store deserialized values
-    // we trim the prefix to get the field name, so 'data-x' becomes 'x'
-    const fieldName = attribute.split('-').slice(1).join('-');
-    this[fieldName] = JSON.parse(now);
-    // note that this does not defeat the purpose of using data-* attributes
-    // in the first place, as if a name clash should happen in the future,
-    // we could edit this class with no impact on the users code
+  get padding() {
+    return this.settings.padding
+        || { top: 70, right: 30, bottom: 40, left: 80};
   }
 
-  connectedCallback(){
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
+
     var dataset = this.prepareData();
    
-        const margin = { top : 70, right : 30, bottom: 40, left : 80};
-        var {sceneWidth, sceneHeight, svg} = this.createscene(margin, 600, 1200);
+        var {sceneWidth, sceneHeight, svg} = this.createscene(this.padding, 600, 1200);
         
         var {x_scale, y_scale} = this.createAxisScales(sceneHeight, sceneWidth, dataset)
-        this.addAxises(sceneWidth, sceneHeight, margin, x_scale, y_scale, svg);
+        this.addAxises(sceneWidth, sceneHeight, this.padding, x_scale, y_scale, svg);
 
         this.displayChart(x_scale, y_scale, dataset, svg);
   }
 
-    /**
-     * Sets the shadow dom of the component, currently creates a single div 
-     * @returns the element that was appended to the shadow dom
-     */ 
-  createShadowDom() {
-    const e = document.createElement('div');
-    this.shadowRoot.appendChild(e);
-    return e;
-  }
-
   /**
    * Prepare the data by giving it the correct format
    * Creates a javascript object that contains the elements of metadata, each key representing a different pid
@@ -83,10 +41,10 @@ class LineChart extends HTMLElement{
    * @returns {Object} JS object containing the elements of metadata,
    * x (resp. y) key contains the value for x (resp. y) axis
    */
-    prepareData(){
+    prepareData() {
         var yValues = [];
         var xValues = [];
-        this.items.forEach(item => {
+        this.db.items.forEach(item => {
             item.metadata.forEach(meta => {
                 if (meta.pid === this.pidy) {
                     yValues.push(parseInt(meta.value));
@@ -115,7 +73,8 @@ class LineChart extends HTMLElement{
         const lineHeight = height - margin.top - margin.bottom;
 
         // create svg and append it
-        const divElem = this.createShadowDom();
+        const divElem = document.createElement('div');
+        this.viewRoot.appendChild(divElem);
         const container = d3.select(divElem);
 
         const svg = container.append("svg")
@@ -226,9 +185,14 @@ class LineChart extends HTMLElement{
   }
 
   getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
+    const found = this.db.properties.find((p) => p['id'] === pid);
     return found ? found : null;
   }
 
 }
+
+
+
+customElements.define('hecate-linechart', LineChart);
+
 export { LineChart };

package/src/views/scatterplot.js

@@ -1,87 +1,61 @@
+import { View } from '@cnrs/hecate-views';
 import * as d3 from 'd3';
 
 
+
 /**
  * Scatterplot web component.
  * @see https://en.wikipedia.org/wiki/Scatter_plot
  * @see https://scottmurray.org/tutorials/d3/
  */
-class ScatterPlot extends HTMLElement {
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.hera = {};
-    this.settings = {};
-  }
-  /**
-   * Static property returning the array of attributes
-   * observed by the browser.
-   * @returns {Array<string>} Attribute names
-   */
-  static get observedAttributes() {
-    return ['data-hera', 'data-settings'];
-  }
-
-  get items() { return this.hera.items || []; }
-  get entities() { return this.hera.entities || []; }
-  get properties() { return this.hera.properties || []; }
+class ScatterPlot extends View {
 
   get pidx() { return this.settings.x || 'x'; }
   get pidy() { return this.settings.y || 'y'; }
-  get label() { return this.settings.label || 'label'; }
-  get color() { return this.settings.color || '#7b4c98'; }
+  get pidlabel() { return this.settings.label || 'label'; }
 
   get padding() {
     return this.settings.padding
         || { top: 3, right: 0, bottom: 10, left: 30 };
   }
 
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   * @param {!string} attribute - Attribute name
-   * @param old - Previous value for `attribute`
-   * @param now - Current value for `attribute`
-   */
-  attributeChangedCallback(attribute, old, now) {
-    if (old === now) return;  // don't bother if there is nothing new
-    this[attribute] = now;
-    // data-* attributes can only be strings, so we cannot deserialize JSON
-    // in them ; so we use plain object fields to store deserialized values
-    // we trim the prefix to get the field name, so 'data-x' becomes 'x'
-    const fieldName = attribute.split('-').slice(1).join('-');
-    this[fieldName] = JSON.parse(now);
-    // note that this does not defeat the purpose of using data-* attributes
-    // in the first place, as if a name clash should happen in the future,
-    // we could edit this class with no impact on the users code
-  }
+  renderView() {
+    // cleanup
+    while (this.viewRoot.lastChild.name !== 'view') { // <slot />
+      this.viewRoot.removeChild(this.viewRoot.lastChild);
+    }
 
-  /**
-   * Called when the element is connected to a DOM.
-   * Runs any required rendering.
-   */
-  connectedCallback() {
     this.width = this.parentElement.clientWidth;
     this.height = this.parentElement.clientHeight;
     const svgWidth = this.width + this.padding.right + this.padding.left;
     const svgHeight = this.height + this.padding.top + this.padding.bottom;
 
+    /* TODO
+      <svg role="img">
+        <title>Weight by age scatter plot</title>
+        <desc>
+          Scatter plot showing weight distribution by age.
+          X axis ranges from 0 to 100 years.
+          Y axis ranges from 0 to 200 kilograms.
+        </desc>
+      </svg>
+    */
+
     const container = document.createElement('div');
-    this.shadowRoot.appendChild(container);
+    this.viewRoot.appendChild(container);
     const svg = d3.select(container)
         .append('svg')
           .attr('viewBox', `0 0 ${svgWidth} ${svgHeight}`)
       ;
-    const {vx, vy} = this.viewport;
+    const viewport = this.viewport;
 
     // create a dot for each item in this.items
     svg.selectAll('circle')
-       .data(this.items)
+       .data(this.db.items)
          .enter()
          .append('circle')
-           .attr('cx', (item) => vx(this.getItemX(item)))
-           .attr('cy', (item) => vy(this.getItemY(item)))
+           .attr('cx', (item) => viewport.vx(this.getItemX(item)))
+           .attr('cy', (item) => viewport.vy(this.getItemY(item)))
            .attr('r',  (item) => this.getItemRadius(item))
            .attr('fill',  (item) => this.getItemColor(item))
            .append('title')
@@ -90,9 +64,17 @@ class ScatterPlot extends HTMLElement {
     svg.selectAll('circle')
       .on('click', (event) => console.log(event));
 
-    var xAxis = d3.axisBottom(vx).ticks(11);
-    var yAxis = d3.axisLeft(vy).ticks(2);
+    this.addAxes(svg, viewport);
+  }
+
+
+  addAxes(svg, viewport) {
     const labels = this.getAxesLabels();
+    this.addXAxis(svg, viewport, labels.y);
+    this.addYAxis(svg, viewport, labels.x);
+  }
+  addXAxis(svg, viewport, label) {
+    var xAxis = d3.axisBottom(viewport.vx).ticks(11);
     svg.append('g')
       .attr('transform', `translate(0,${this.height-this.padding.top})`)
       .call(xAxis)
@@ -101,8 +83,11 @@ class ScatterPlot extends HTMLElement {
         .attr('y', 0)
         .attr('fill', 'black')
         .attr('text-anchor', 'end')
-        .text(labels.y))
+        .text(label))
       ;
+  }
+  addYAxis(svg, viewport, label) {
+    var yAxis = d3.axisLeft(viewport.vy).ticks(2);
     svg.append('g')
       .attr('transform', `translate(${this.padding.left},0)`)
       .call(yAxis)
@@ -111,7 +96,7 @@ class ScatterPlot extends HTMLElement {
         .attr('y', '1em')
         .attr('fill', 'currentColor')
         .attr('text-anchor', 'start')
-        .text(labels.x))
+        .text(label))
       ;
   }
 
@@ -138,8 +123,8 @@ class ScatterPlot extends HTMLElement {
    * @returns {Viewport} This viewer current viewport
    */
   get viewport() {
-    const xMax = d3.max(this.items, (item) => this.getItemX(item));
-    const yMax = d3.max(this.items, (item) => this.getItemY(item));
+    const xMax = d3.max(this.db.items, (item) => this.getItemX(item));
+    const yMax = d3.max(this.db.items, (item) => this.getItemY(item));
     // a scale is a function, domain is its input and range is its output
     const vx = d3.scaleLinear()
           .domain([0, xMax])
@@ -159,15 +144,15 @@ class ScatterPlot extends HTMLElement {
   getItemY(item) {
     return this.getItemMetadata(item, this.pidy);
   }
-  getItemRadius(item) {
+  getItemRadius(item) {  // eslint-disable-line no-unused-vars
     return 5;
   }
-  getItemColor(item) {
+  getItemColor(item) {  // eslint-disable-line no-unused-vars
     return this.color;
   }
   getItemLabel(item) {
-    const name = this.getItemMetadata(item, this.label);
-    return name ? name : `Missing property '${this.label}'`;
+    const name = this.getItemMetadata(item, this.pidlabel);
+    return name ? name : `Missing property '${this.pidlabel}'`;
   }
   getAxesLabels() {
     const px = this.getProperty(this.pidx);
@@ -183,11 +168,13 @@ class ScatterPlot extends HTMLElement {
     return found ? found.value : null;
   }
   getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
+    const found = this.db.properties.find((p) => p['id'] === pid);
     return found ? found : null;
   }
 }
 
 
 
+customElements.define('hecate-scatterplot', ScatterPlot);
+
 export { ScatterPlot };

package/src/views/stackedareachart.js

@@ -0,0 +1,126 @@
+import { CartesianChart } from './cartesianchart.js';
+import * as d3 from 'd3';
+
+
+
+/**
+ * Stacked area chart web component.
+ * @see https://en.wikipedia.org/wiki/Area_chart
+ */
+class StackedAreaChart extends CartesianChart {
+
+  createXDomain(parsers) {
+    return d3.extent(this.db.items, item => parsers.x(this.getItemX(item)));
+  }
+  createYDomain(parsers) {
+    const extent = [0, 1];
+    if (!this.normalizeY) {
+      const totals = new Map();
+      let max = 0;
+      for (const item of this.db.items) {
+        const x = asKey(parsers.x(this.getItemX(item)));
+        const y = parsers.y(this.getItemY(item));
+        const total = (totals.get(x) ?? 0) + y;
+        totals.set(x, total);
+        if (total > max) max = total;
+      }
+      extent[1] = max;
+    }
+    return extent;
+  }
+
+  renderVAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.padding.top;
+    // append the y-axis, while extending 0% & 100% ticks to become top
+    // and bottom ticker "main" lines. Add its label, too.
+    axis.attr('transform', `translate(${xOffset},${yOffset})`)
+        .call(
+          g => g.selectAll('.tick line')
+            .filter(d => d === 0 || d === 1)
+            .clone()
+            .attr('x2', plot.width)
+        );
+    svg.append(() => axis.node());
+  }
+
+  prepare(parsers, scales) {
+    // (1) compute pivot table:
+    //     category1  category2  category3  …
+    // x1     y11        y12        y13     …
+    // x2     y21        y32        y33     …
+    // x3     y31        y32        y33     …
+    //  …      …          …          …      …
+    this._table_pivot = new Map();
+    for (const item of this.db.items) {
+      const x = asKey(parsers.x(this.getItemX(item)));
+      const y = parsers.y(this.getItemY(item));
+      const category = this.getItemCategory(item);
+      if (!this._table_pivot.has(x)) this._table_pivot.set(x, new Map());
+      this._table_pivot.get(x).set(category, y);
+    }
+    // (2) compute categories
+    // [ category1, category2, category 3, … ]
+    const cats = new Set();
+    for (const [, values] of this._table_pivot) {
+      for (const category of values.keys()) {
+        cats.add(category);
+      }
+    }
+    this._categories = [...cats];
+    // (3) "stack" series (ie. categories)
+    const rows = [...this._table_pivot.entries()];
+    this._stacked_series = d3.stack()
+        .offset(this.createStackOffset())
+        .order(this.createStackOrder())
+        .keys(this._categories)
+        .value(([, values], category) => values.get(category) ?? 0)(rows);
+  }
+
+  createStackOffset() {
+    // stack computation only depends on the axis where values are added, and
+    // in this implementation, it's always Y ; thus, only normalizeY matters
+    return this.normalizeY ? d3.stackOffsetExpand : d3.stackOffsetNone;
+  }
+  createStackOrder() {
+    return d3.stackOrderNone;
+  }
+
+  renderData(svg, plot, parsers) {
+    // Construct an area shape.
+    const area = d3.area();
+    if (this.vertical) {
+      area.y(d => plot.vy(d.data[0]))
+          .x0(d => plot.vx(d[0]))
+          .x1(d => plot.vx(d[1]));
+    } else {
+      area.x(d => plot.vx(d.data[0]))
+          .y0(d => plot.vy(d[0]))
+          .y1(d => plot.vy(d[1]));
+    }
+
+    // Append one area path to render per stacked series (ie. per category)
+    svg.append('g')
+      .attr('transform', `translate(${plot.padding.left},${plot.padding.top})`)
+      .selectAll()
+      .data(this._stacked_series)
+      .join('path')
+        .attr('fill', d => plot.color(d.key))
+        .attr('d', area)
+      .append('title')
+        .text(d => d.key);
+  }
+}
+
+/** This function is usefulbecause, in JavaScript, when you do:
+ *  `const x = new Date('1815-12-10'); const y = new Date('1815-12-10');`,
+ *  you DON'T have x === y, and thus Date is kinda meh as a map key type.
+ */
+function  asKey(k) { return k instanceof Date ? k.getTime() : k; }
+
+
+
+
+customElements.define('hecate-stackedareachart', StackedAreaChart);
+
+export { StackedAreaChart };

package/src/views/streamgraph.js

@@ -0,0 +1,39 @@
+import { StackedAreaChart } from './stackedareachart.js';
+import * as d3 from 'd3';
+
+class Streamgraph extends StackedAreaChart {
+
+  createYDomain(parsers) {
+    return d3.extent(this._stacked_series.flat(2))
+  }
+
+  createStackOffset() { return d3.stackOffsetWiggle; }
+  createStackOrder() { return d3.stackOrderInsideOut; }
+
+  renderVAxis(svg, plot, axis) {
+    const xOffset = plot.padding.left;
+    const yOffset = plot.padding.top;
+    // append the y-axis, while extending 0% & 100% ticks to become top
+    // and bottom ticker "main" lines. Add its label, too.
+    axis.attr('transform', `translate(${xOffset},${yOffset})`)
+      .call(
+          d3.axisLeft(plot.vy)
+            .ticks(plot.height / 80)
+            .tickFormat((d) => Math.abs(d).toLocaleString('en-US'))
+      )
+      .call(g => g.select('.domain').remove())
+      .call(
+        g => g.selectAll('.tick line')
+          .clone()
+          .attr('x2', plot.width)
+          .attr('stroke-opacity', 0.1)
+      );
+    svg.append(() => axis.node());
+  }
+}
+
+
+
+customElements.define('hecate-streamgraph', Streamgraph);
+
+export { Streamgraph };

package/src/components/index.js

@@ -1 +0,0 @@
-export { Sample } from './sample.js';

package/src/components/sample.js

@@ -1,37 +0,0 @@
-/**
- * Sample web component.
- * It just displays a string.
- */
-class Sample extends HTMLElement {
-
-  constructor() {
-    super();
-    this.attachShadow({ mode: 'open' });
-    this.data = "placeholder";
-  }
-  /** Static property returning an array of attributes observed by the browser
-   */
-  static get observedAttributes() {
-    return ['data'];
-  }
-  /**
-   * This is called when an observed attribute is
-   * defined in the HTML or changed using Javascript.
-   */
-  attributeChangedCallback(property, old, now) {
-    if (old === now) return;  // don't bother to render if there is nothing new
-    this[property] = now;
-  }
-
-  /**
-   * Called when the element is connected to a DOM.
-   * Runs any required rendering.
-   */
-  connectedCallback() {
-    this.shadowRoot.innerHTML += `<p>${this.data}</p>`;
-  }
-}
-
-
-
-export { Sample };