Initial Commit!

.editorconfig

@@ -0,0 +1,13 @@
+# EditorConfig is awesome: http://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+
+# 2 space indentation
+[**.*]
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.DS_Store
+npm-debug.log
+dist/
+coverage/

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "a2d3",
+  "version": "1.0.0",
+  "description": "Angular2 + D3 Charting Library",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/swimlane/a2d3.git"
+  },
+  "keywords": [
+    "angular2",
+    "angularjs",
+    "charts",
+    "charting",
+    "d3"
+  ],
+  "author": "Austin McDaniel",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/swimlane/a2d3/issues"
+  },
+  "homepage": "https://github.com/swimlane/a2d3#readme"
+}

src/BaseChart.js

@@ -0,0 +1,19 @@
+export class BaseChart {
+  ngOnChanges(changes){
+    if (changes.scheme){
+      this.setColors();
+    }
+  }
+
+  update(){
+    console.warn('update needs to be implemented in the chart');
+  }
+
+  setColors(){
+    console.warn('setColors needs to be implemented in the chart');
+  }
+
+  click(data){
+    console.warn('click needs to be implemented in the chart');
+  }
+}

src/areachart/Area.js

@@ -0,0 +1,70 @@
+import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
+import { SvgLinearGradient } from '../common/SvgLinearGradient.js';
+
+@Component({
+  selector: 'g[area]',
+  directives: [SvgLinearGradient],
+  template: `
+    <svg:g>
+      <svg:defs>
+        <svg:g svg-linear-gradient
+          [color]="fill"
+          orientation="vertical"
+          [name]="gradientId"
+          [startOpacity]="startOpacity"
+          [endOpacity]="endOpacity"
+        />
+      </svg:defs>
+      <svg:path
+        class="viz area"
+        [attr.d]="path"
+        [attr.fill]="gradientFill"
+        [attr.opacity]="opacity"
+      />
+    </svg:g>
+  `
+})
+export class Area {
+  @Input() data;
+  @Input() path;
+  @Input() startingPath;
+  @Input() fill;
+  @Input() opacity = 1;
+  @Input() startOpacity = 0.5;
+  @Input() endOpacity = 1;
+  @Input() activeLabel;
+
+  @Output() clickHandler = new EventEmitter();
+
+  constructor(element: ElementRef){
+    this.element = element.nativeElement;
+  }
+
+  ngOnInit() {
+    let label = this.data.name;
+
+    let active = label === this.activeLabel;
+
+    let pageUrl = window.location.href;
+    this.gradientId = 'grad' + ObjectId().toString();
+    this.gradientFill = `url(${pageUrl}#${this.gradientId})`;
+
+    this.loadAnimation();
+  }
+
+  loadAnimation() {
+    let node = d3.select(this.element).select('.area');
+
+    node
+      .attr('d', this.startingPath)
+
+    this.animateToCurrentForm();
+  }
+
+  animateToCurrentForm(){
+    let node = d3.select(this.element).select('.area');
+
+    node.transition().duration(750)
+      .attr('d', this.path);
+  }
+}

src/areachart/AreaChart.js

@@ -0,0 +1,164 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { calculateViewDimensions } from '../common/viewDimensions.js';
+import { colorHelper } from 'common/services/stats/colorSets.js';
+import { Chart } from '../common/charts/Chart.js';
+import { BaseChart } from '../BaseChart.js';
+import { XAxis } from '../common/axes/XAxis.js';
+import { YAxis } from '../common/axes/YAxis.js';
+import { AreaSeries } from './AreaSeries.js';
+import { CircleSeries } from '../common/CircleSeries.js';
+import { Timeline } from '../common/Timeline.js';
+import { showTooltip, updateTooltip, hideTooltip } from '../common/lineAreaHelpers.js';
+
+@Component({
+  selector: 'area-chart',
+  directives: [Chart, XAxis, YAxis, AreaSeries, CircleSeries, Timeline],
+  template: `
+    <chart
+      [legend]="legend"
+      [view]="view"
+      [colors]="colors"
+      [legendData]="results.legend">
+
+      <svg:defs>
+        <svg:clipPath [attr.id]="clipPathId">
+          <svg:rect
+            [attr.width]="dims.width + 10"
+            [attr.height]="dims.height + 10"
+            [attr.transform]="'translate(-5, -5)'"/>
+        </svg:clipPath>
+      </svg:defs>
+
+      <svg:g [attr.transform]="transform" class="viz line chart">
+        <svg:g x-axis
+          *ngIf="xaxis"
+          [xScale]="xScale"
+          [dims]="dims"
+          [showGridLines]="true"
+          [showLabel]="showXAxisLabel"
+          [labelText]="xaxisLabel">
+        </svg:g>
+
+        <svg:g y-axis
+          *ngIf="yaxis"
+          [yScale]="yScale"
+          [dims]="dims"
+          [showGridLines]="true"
+          [showLabel]="showYAxisLabel"
+          [labelText]="yaxisLabel">
+        </svg:g>
+
+        <svg:g [attr.clip-path]="clipPath">
+
+          <svg:g area-series
+            [xScale]="xScale"
+            [yScale]="yScale"
+            [color]="colors('Area')"
+            [data]="results.series[0].array"
+            [scaleType]="scaleType"
+          />
+
+          <svg:rect
+            class="tooltip-area"
+            [attr.width]="dims.width + 10"
+            [attr.height]="dims.height + 10"
+            x="-5"
+            y="-5"
+            style="fill: rgb(255, 0, 0); opacity: 0; cursor: 'auto';"
+          />
+
+          <svg:g circle-series
+            [xScale]="xScale"
+            [yScale]="yScale"
+            [color]="colors('Area')"
+            [data]="results.series[0].array"
+            [scaleType]="scaleType"
+            chartType="area"
+            (clickHandler)="click($event)"
+          />
+
+        </svg:g>
+      </svg:g>
+
+      <svg:g timeline
+        *ngIf="timeline && scaleType === 'time'"
+        [results]="results"
+        [view]="view"
+        [scheme]="scheme"
+        [customColors]="customColors"
+        [legend]="legend">
+      </svg:g>
+    </chart>
+  `
+})
+export class AreaChart extends BaseChart {
+  @Input() view;
+  @Input() results;
+  @Input() margin = [10, 20, 70, 70];
+  @Input() scheme;
+  @Input() customColors;
+  @Input() xaxis;
+  @Input() yaxis;
+  @Input() autoScale;
+  @Input() showXAxisLabel;
+  @Input() showYAxisLabel;
+  @Input() xaxisLabel;
+  @Input() yaxisLabel;
+  @Input() timeline;
+
+  @Output() clickHandler = new EventEmitter();
+
+  ngOnInit() {
+    this.dims = calculateViewDimensions(this.view, this.margin, this.showXAxisLabel, this.showYAxisLabel, this.legend, 9);
+
+    if (this.timeline){
+      this.dims.height -= 150;
+    }
+
+    this.results.series[0] = this.results.series[0].sort((a, b) => {
+      return this.results.d0Domain.indexOf(a.vals[0].label[0][0]) - this.results.d0Domain.indexOf(b.vals[0].label[0][0]);
+    })
+
+    this.yScale = d3.scale.linear()
+      .range([this.dims.height, 0])
+      .domain(this.results.m0Domain);
+
+    if (!this.autoScale) {
+      this.yScale.domain([0, this.results.m0Domain[1]]);
+    }
+
+    if (this.results.query && this.results.query.dimensions.length && this.results.query.dimensions[0].field.fieldType === 'date' && this.results.query.dimensions[0].groupByType.value === 'groupBy'){
+      let domain;
+      if (this.state.xDomain){
+        domain = this.state.xDomain;
+      } else {
+        domain = d3.extent(this.results.d0Domain, function (d) { return moment(d).toDate(); })
+      }
+      this.scaleType = 'time';
+      this.xScale = d3.time.scale()
+        .range([0, this.dims.width])
+        .domain(domain);
+    } else {
+      this.scaleType = 'ordinal'
+      this.xScale = d3.scale.ordinal()
+        .rangePoints([0, this.dims.width], 0.1)
+        .domain(this.results.d0Domain);
+    }
+
+    this.setColors();
+    this.transform = `translate(${ this.dims.xOffset } , ${ this.margin[0] })`;;
+
+    let pageUrl = window.location.href;
+    this.clipPathId = 'clip' + ObjectId().toString();
+    this.clipPath = `url(${pageUrl}#${this.clipPathId})`;
+  }
+
+  click(data){
+    this.clickHandler.emit(data);
+  }
+
+  setColors(){
+    this.colors = colorHelper(this.scheme, 'ordinal', ['Area'], this.customColors);
+  }
+
+}