skeleton for barplot

a8de0fd1 · Sascha Herzinger · fae3bb1c · a8de0fd1 · a8de0fd1 · a8de0fd1
Commit a8de0fd1 authored Mar 12, 2019 by Sascha Herzinger
--- a/examples/test-barplot.html
+++ b/examples/test-barplot.html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Barplot</title>
+    <script src="http://localhost:8080/ada-charts.js"></script>
+</head>
+<body>
+<div id="barplot-controls">
+    <span>API examples:</span>
+    <button onclick="update()">update()</button>
+</div>
+<div id="barplot-container"></div>
+</body>
+</html>
+
+<script>
+
+  /**
+   * Helper function. Do not copy
+   */
+
+
+  /**
+   * API Documentation below this point
+   */
+  const container = document.querySelector('#barplot-container');
+  const barplot = AdaCharts.chart({ chartType: 'barplot', container });
+
+  function update() {
+    barplot.update({
+      title: "Gender by Site ID",
+      categories: [ "Undefined", "Female", "Male" ],
+      series: [
+        {
+          "name": "CHEM",
+          "data": [
+            { "name": "Undefined", "y": 0 },
+            { "name": "Female", "y": 27, "key": "2" },
+            { "name": "Male", "y": 40, "key": "1"}
+          ],
+          "colorByPoint": false
+        },
+        {
+          "name": "CHL",
+          "data": [
+            { "name": "Undefined", "y": 0 },
+            { "name": "Female", "y": 437, "key": "2" },
+            { "name": "Male", "y": 710, "key": "1" }
+          ],
+          "colorByPoint": false
+        },
+        {
+          "name": "Flying Team",
+          "data": [
+            { "name": "Undefined", "y": 0 },
+            { "name": "Female", "y": 15, "key": "2" },
+            { "name": "Male", "y": 26, "key": "1" }
+          ],
+          "colorByPoint": false
+        },
+        {
+          "name": "La Tulipe",
+          "data": [
+            { "name": "Undefined", "y": 0 },
+            { "name": "Female", "y": 3, "key": "2" },
+            { "name": "Male", "y": 30, "key": "1" }
+          ],
+          "colorByPoint": false
+        },
+        {
+          "name": "CIEC (discontinued; use CHL instead)",
+          "data": [
+            { "name": "Undefined", "y": 0 },
+            { "name": "Female", "y": 435, "key": "2" },
+            { "name": "Male", "y": 394, "key": "1" }
+          ],
+          "colorByPoint": false
+        },
+        {
+          "name": "Undefined",
+          "data": [
+            { "name": "Undefined", "y": 9 },
+            { "name": "Female", "y": 3, "key": "2" },
+            { "name": "Male", "y": 0, "key": "1" }
+          ],
+          "colorByPoint": false
+        }
+      ],
+      inverted: false,
+      xAxisCaption: null,
+      yAxisCaption: "Count",
+      showLabels: true,
+      showLegend: true
+    });
+  }
+
+  function toPNG() {
+    barplot.toPNG();
+  }
+
+  function toSVG() {
+    barplot.toSVG();
+  }
+
+  document.addEventListener('DOMContentLoaded', update, false);
+</script>
+
+<style>
+    body {
+        display: flex;
+        flex-direction: row;
+    }
+
+    #barplot-controls {
+        display: flex;
+        flex-direction: column;
+    }
+
+    #barplot-container {
+        width: 50vw;
+    }
+</style>
--- a/src/assets/css/barplot.css
+++ b/src/assets/css/barplot.css
--- a/src/charts/impl/Barplot.js
+++ b/src/charts/impl/Barplot.js
+import * as d3 from 'd3';
+import Chart from '../Chart';
+import '../../assets/css/barplot.css';
+
+export default class extends Chart {
+  constructor({ container }) {
+    super({ container });
+
+    this.svg = d3.select(container)
+      .append('svg')
+      .attr('class', 'ac-box-svg ada-chart')
+      .append('g');
+  }
+
+  static get name() {
+    return 'barplot';
+  }
+
+  render({
+    title,
+    categories,
+    series
+  }) {
+    const margin = {
+      top: this.containerWidth / 15,
+      right: this.containerWidth / 15,
+      bottom: this.containerWidth / 15,
+      left: this.containerWidth / 15,
+    };
+
+    const width = this.containerWidth - margin.left - margin.right;
+    const height = this.containerWidth - margin.top - margin.bottom;
+
+    d3.select(this.container).select('svg')
+      .attr('width', width + margin.left + margin.right)
+      .attr('height', height + margin.top + margin.bottom);
+
+    const innerPadding = width / 20;
+    const outerPadding = innerPadding;
+    const x = d3.scaleBand()
+      .domain(categories)
+      .range([0, width])
+      .paddingInner(innerPadding)
+      .paddingOuter(outerPadding);
+
+    const ys = series
+      .reduce((prev, curr) => prev.concat(curr.data), [])
+      .map(d => d.y);
+    const y = d3.scaleLinear()
+      .domain(d3.extent(ys))
+      .range([height, 0]);
+
+    const barGroup = this.svg.selectAll('.bar-group')
+      .data(categories);
+
+    barGroup.enter()
+      .append('g')
+      .attr('class', 'bar-group')
+      .x(d => x(d));
+  }
+}