@cnrs/hecate-views-charts 0.2.0 → 0.5.0

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 './scatterchart.js';
+export * from './stackedareachart.js';
+export * from './streamgraph.js';
 
 /**
  * This object is a wrapper for three arrays

package/src/views/linechart.js

@@ -1,234 +1,97 @@
+import { CartesianChart } from './cartesianchart.js';
 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'];
+class LineChart extends CartesianChart {
+
+  get style() { return this.settings.style; }
+  get curve() { return CURVES[this.settings.mark?.curve] ?? d3.curveMonotoneX; }
+
+  prepare() {
+    const map = new Map();
+    if (this.settings.color?.pid) {
+      // mode: multiple path lines
+      this._multiple = true;
+      for (const item of this.db.items) {
+        const key = this.getItemColor(item);
+        const values = map.get(key) || [];
+        values.push(item);
+        map.set(key, values);
+      }
+    } else {
+      // mode: single path line
+      this._multiple = false;
+      const key = this.settings.mark?.tooltip || null;
+      map.set(key, this.db.items);
     }
-
-  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'; }
-  // 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
+    this._items_by_c = map;
   }
 
-  connectedCallback(){
-    var dataset = this.prepareData();
-   
-        const margin = { top : 70, right : 30, bottom: 40, left : 80};
-        var {sceneWidth, sceneHeight, svg} = this.createscene(margin, 600, 1200);
-        
-        var {x_scale, y_scale} = this.createAxisScales(sceneHeight, sceneWidth, dataset)
-        this.addAxises(sceneWidth, sceneHeight, margin, x_scale, y_scale, svg);
 
-        this.displayChart(x_scale, y_scale, dataset, svg);
-  }
+  renderData(svg, plot, parsers) {
+    const line = d3.line()
+      .curve(this.curve)
+      .x(item => this.plotX(item, plot, parsers))
+      .y(item => this.plotY(item, plot, parsers))
+      ;
 
-    /**
-     * 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;
+      for (const [key, items] of this._items_by_c) {
+        const color = this._multiple ?
+              plot.color(parsers.color(key))
+            : this.settings.color?.value || '#7b4c98';
+        this.renderPath(svg, items, line, color, key);
+      }
   }
 
-  /**
-   * 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
-   * @param {Hera} data - Hera-formatted data parameter
-   * @param {Object} settings - Settings parameter
-   * @returns {Object} JS object containing the elements of metadata,
-   * x (resp. y) key contains the value for x (resp. y) axis
-   */
-    prepareData(){
-        var yValues = [];
-        var xValues = [];
-        this.items.forEach(item => {
-            item.metadata.forEach(meta => {
-                if (meta.pid === this.pidy) {
-                    yValues.push(parseInt(meta.value));
-                }
-               if (meta.pid === this.pidx){
-                    xValues.push(parseInt(meta.value));
-                }
-            });
-        });
-        const dataset = xValues.map((x, index) => ({
-            x: x,
-            y: yValues[index]
-        }));
-       return dataset;
-    }
-
-  /**
-   * Creates a svg element that will contain the viewer.
-   * @param {Object} margin - Space for the axes
-   * @param {number} width - Desired int width for the svg
-   * @param {number} height - Desired int height for the svg
-   * @returns The svg and its height, width and the width of each bars
-   */
-    createscene(margin, height, width){
-        const lineWidth = width - margin.left - margin.right;
-        const lineHeight = height - margin.top - margin.bottom;
-
-        // create svg and append it
-        const divElem = this.createShadowDom();
-        const container = d3.select(divElem);
+  renderPath(svg, items, line, color, text=null) {
+    const klass = 'series';
+    //add line path to svg
+    const path = svg.append('path')
+       .datum(items)
+       .attr('class', klass)
+       .attr('fill', 'none')
+       .attr('stroke', color)
+       .attr('stroke-width', this.style?.normal?.strokeWidth || 2)
+       .attr('opacity', this.style?.normal?.opacity || 2)
+       .attr('d', line)
+      ;
+    // add tooltip appearing when line path is hovered, if any
+    if (text) path.append('title').text(text);
+    path  // embiggen hovered line path to make it more visible
+      .on('mouseenter', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('stroke-width', this.style?.nothover?.strokeWidth || 2)
+          .attr('opacity', this.style?.nothover?.opacity || 0.25);
+        d3.select(event.currentTarget)
+          .attr('stroke-width', this.style?.hover?.strokeWidth || 4)
+          .attr('opacity', this.style?.hover?.opacity || 1)
+          .raise();
+      })  // make non-hovered line path less visible
+      .on('mouseleave', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('stroke-width', this.style?.normal?.strokeWidth || 2)
+          .attr('opacity', this.style?.normal?.opacity || 1);
+      });
+  }
 
-        const svg = container.append("svg")
-            .attr("width", lineWidth + margin.left + margin.right)
-            .attr("height", lineHeight + margin.top + margin.left)
-            .append("g")
-            .attr("transform", `translate(${margin.left},${margin.top})`);
-        return {
-            sceneWidth : lineWidth,
-            sceneHeight : lineHeight,
-            svg : svg
-        }
-    }
-    
-    /**
-     * creates and sets x and y linear scales
-     * @param {*} sceneHeight 
-     * @param {*} sceneWidth 
-     * @param {*} dataset 
-     * @return x and y linear scales
-     */
-    createAxisScales(sceneHeight, sceneWidth, dataset){
-        //set x and y scales
-        var x_scale = d3.scaleLinear()
-            .range([0,sceneWidth])
-            .domain([0,d3.max(dataset, d => d.x)]);
-        var y_scale = d3.scaleLinear()
-            .range([sceneHeight,0])
-            .domain([0,d3.max(dataset, d => d.y)]);
+}
 
-        return{
-            x_scale : x_scale,
-            y_scale : y_scale 
-        }
-        
-    }
 
 
-  /**
-   * add the left and bottom axises, with their Label
-   * @param sceneWidth - Scene width
-   * @param x_scale - Linear scale for the X axis
-   * @param y_scale - Linear scale for the Y axis
-   * @param {*} sceneHeight
-   * @param {*} sceneWidth
-   * @param {*} margin
-   * @param {*} svg
-   */
-    addAxises(sceneWidth, sceneHeight, margin, x_scale, y_scale, svg)
-    {
-            //add axises
-            var x_axis = d3.axisBottom(x_scale);
-            var y_axis = d3.axisLeft(y_scale);
-        const labels = this.getAxesLabels();
-    
-            //x axis
-            svg.append("g")
-                .attr("transform", `translate(0,${sceneHeight})`)
-                .call(x_axis)
-                .call((g) => g.append("text")
-                .attr("x", sceneWidth)
-                .attr("y", margin.bottom - 4)
-                .attr("fill", "currentColor")
-                .attr("text-anchor", "end")
-                .text(labels.x));
-    
-    
-            //y axis    
-            svg.append("g")
-                .call(y_axis)
-                .call((g) => g.append("text")
-                .attr("x", -margin.left)
-                .attr("y",-10)
-                .attr("fill", "currentColor")
-                .attr("text-anchor", "start")
-                .text(labels.y));
+const CURVES = {
+  'basis': d3.curveBasis,
+  'cardinal': d3.curveCardinal,
+  'catmullrom': d3.curveCatmullRom,
+  'monotoneX': d3.curveMonotoneX,
+  'linear': d3.curveLinear,
+  'step': d3.curveStep,
+};
 
-    }
-    /**
-     * display the line chart
-     * @param {*} x_scale 
-     * @param {*} y_scale 
-     * @param {*} dataset 
-     * @param {*} svg 
-     */
-    displayChart(x_scale, y_scale, dataset, svg){
-            //draw lines
-            const line = d3.line()
-                .x(d => x_scale(d.x))
-                .y(d => y_scale(d.y));
-    
-            //add line path to svg
-            svg.append("path")
-                .datum(dataset)
-                .attr("fill", "none")
-                .attr("stroke", this.color)
-                .attr("stroke-width", 1)
-                .attr("d", line);
-    }
+customElements.define('hecate-linechart', LineChart);
 
-  getAxesLabels() {
-    const px = this.getProperty(this.pidx);
-    const py = this.getProperty(this.pidy);
-    return {
-      x: px ? px.name : `Missing property '${this.pidx}'`,
-      y: py ? py.name : `Missing property '${this.pidy}'`,
-    };
-  }
-
-  getProperty(pid) {
-    const found = this.properties.find((p) => p['@id'] === pid);
-    return found ? found : null;
-  }
-
-}
 export { LineChart };

package/src/views/scatterchart.js

@@ -0,0 +1,87 @@
+import { CartesianChart } from './cartesianchart.js';
+import * as d3 from 'd3';
+
+
+
+/**
+ * Scatterplot web component.
+ * @see https://en.wikipedia.org/wiki/Scatter_plot
+ * @see https://scottmurray.org/tutorials/d3/
+ */
+class ScatterChart extends CartesianChart {
+
+  prepare() {
+    const map = new Map();
+    if (this.settings.color?.pid) {
+      // mode: multiple path lines
+      this._multiple = true;
+      for (const item of this.db.items) {
+        const key = this.getItemColor(item);
+        const values = map.get(key) || [];
+        values.push(item);
+        map.set(key, values);
+      }
+    } else {
+      // mode: single path line
+      this._multiple = false;
+      const key = this.settings.mark?.tooltip || null;
+      map.set(key, this.db.items);
+    }
+    this._items_by_c = map;
+  }
+
+  renderData(svg, plot, parsers) {
+    for (const [key, items] of this._items_by_c) {
+      this.renderGroup(svg, items, key, plot, parsers);
+    }
+  }
+
+  renderGroup(svg, items, key, plot, parsers) {
+    const klass = 'series';
+    const group = svg.append('g').attr('class', klass);//.attr('data-key', key);
+    // create a dot for each item in items
+    const color = this._multiple ?
+            plot.color(parsers.color(key))
+        : this.settings.color?.value || '#7b4c98';
+    const circles = group.selectAll('circle')
+       .data(items)
+         .enter()
+         .append('circle')
+           .attr('cx', item => this.plotX(item, plot, parsers))
+           .attr('cy', item => this.plotY(item, plot, parsers))
+           .attr('r',  item => this.getItemRadius(item))
+           .attr('fill',  item => color)
+      ;
+    circles.append('title').text(item => this.getItemLabel(item));
+
+    group  // embiggen hovered line path to make it more visible
+      .on('mouseenter', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('opacity', this.style?.nothover?.opacity || 0.25);
+        d3.select(event.currentTarget)
+          .attr('opacity', this.style?.hover?.opacity || 1)
+          .raise();
+      })  // make non-hovered line path less visible
+      .on('mouseleave', (event) => {
+        svg.selectAll(`.${klass}`)
+          .attr('opacity', this.style?.normal?.opacity || 1);
+      });
+  }
+
+  getItemRadius(item) {  // eslint-disable-line no-unused-vars
+    return 5;
+  }
+  getItemLabel(item) {
+    const x = this.getItemX(item);
+    const y = this.getItemY(item);
+    const c = this.getItemColor(item);
+    const mc = c ? ` for ${c}` : '';
+    return `${y} for ${x}${mc}`
+  }
+}
+
+
+
+customElements.define('hecate-scatterchart', ScatterChart);
+
+export { ScatterChart };

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:
+    //        c1    c2    c3    …
+    // 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 c = this.getItemColor(item);
+      if (!this._table_pivot.has(x)) this._table_pivot.set(x, new Map());
+      this._table_pivot.get(x).set(c, y);
+    }
+    // (2) compute colors (ie. categories)
+    // [ c1, c2, c3, … ]
+    const cats = new Set();
+    for (const [, values] of this._table_pivot) {
+      for (const c of values.keys()) {
+        cats.add(c);
+      }
+    }
+    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], c) => values.get(c) ?? 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 };