Merge pull request allegro#140 from implydata/multi-measure

Single measure mode and Bar Chart

package.json

@@ -1,6 +1,6 @@
 {
   "name": "imply-pivot",
-  "version": "0.7.52",
+  "version": "0.8.0",
   "description": "A web-based exploratory visualization UI for Druid.io",
   "keywords": [
     "imply",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "body-parser": "1.15.0",
-    "chronoshift": "0.3.7",
+    "chronoshift": "0.4.2",
     "clipboard": "1.5.9",
     "compression": "1.6.1",
     "d3": "3.5.16",
@@ -38,26 +38,26 @@
     "morgan": "1.7.0",
     "nopt": "3.0.6",
     "numeral": "1.5.3",
-    "plywood": "0.9.19",
+    "plywood": "0.9.23",
     "plywood-druid-requester": "1.4.1",
     "plywood-mysql-requester": "1.2.2",
     "q": "1.4.1",
     "qajax": "1.3.0",
-    "react": "0.14.7",
-    "react-addons-css-transition-group": "0.14.7",
-    "react-dom": "0.14.7"
+    "react": "0.14.8",
+    "react-addons-css-transition-group": "0.14.8",
+    "react-dom": "0.14.8"
   },
   "devDependencies": {
     "chai": "3.5.0",
     "fs-extra": "0.26.7",
     "gulp": "3.9.1",
     "gulp-watch": "4.3.5",
     "istanbul": "0.4.2",
-    "jsdom": "8.1.0",
+    "jsdom": "8.2.0",
     "laborer": "2.4.13",
     "mkdirp": "0.5.1",
     "mocha": "2.4.5",
-    "react-addons-test-utils": "0.14.7",
+    "react-addons-test-utils": "0.14.8",
     "replace": "0.3.0",
     "run-sequence": "1.1.5",
     "sinon": "1.17.3",

src/client/components/about-modal/about-modal.mocha.tsx

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import * as sinon from 'sinon';
+import '../../utils/jsdom-setup';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../../utils/require-extensions';
+import * as TestUtils from 'react-addons-test-utils';
+
+import { $, Expression } from 'plywood';
+import { AboutModal } from './about-modal';
+
+describe('AboutModal', () => {
+  it('adds the correct class', () => {
+    var renderedComponent = TestUtils.renderIntoDocument(
+      <AboutModal
+        onClose={null}
+      />
+    );
+
+    expect(TestUtils.isCompositeComponent(renderedComponent), 'should be composite').to.equal(true);
+    expect((ReactDOM.findDOMNode(renderedComponent) as any).className, 'should contain class').to.contain('about-modal');
+  });
+
+});

src/client/components/about-modal/about-modal.scss

@@ -0,0 +1,24 @@
+@import '../../imports';
+
+.about-modal {
+  p {
+    margin-bottom: $form-spacing-compact;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  a {
+    color: $brand;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .button-bar {
+    padding-top: 6px;
+  }
+}

src/client/components/about-modal/about-modal.tsx

@@ -0,0 +1,46 @@
+require('./about-modal.css');
+
+import * as React from 'react';
+import { Fn } from "../../../common/utils/general/general";
+import { STRINGS } from '../../config/constants';
+import { Modal } from '../modal/modal';
+import { Button } from '../button/button';
+
+export interface AboutModalProps extends React.Props<any> {
+  onClose: Fn;
+}
+
+export interface AboutModalState {
+}
+
+export class AboutModal extends React.Component<AboutModalProps, AboutModalState> {
+
+  constructor() {
+    super();
+    // this.state = {};
+
+  }
+
+  render() {
+    const { onClose } = this.props;
+
+    return <Modal
+      className="about-modal"
+      title="About"
+      onClose={onClose}
+    >
+      <p>
+        For feedback and support please visit the <a href="https://groups.google.com/forum/#!forum/imply-user-group">Imply User Group</a>.
+      </p>
+      <p>
+        For bug reports please create an issue on <a href="https://github.com/implydata/pivot/issues">GitHub</a>.
+      </p>
+      <p>
+        <a href="https://github.com/implydata/pivot">Imply Pivot</a> is released under the <a href="https://github.com/implydata/pivot/blob/master/LICENSE">Apache 2.0</a> license.
+      </p>
+      <div className="button-bar">
+        <Button type="primary" onClick={onClose} title={STRINGS.close}/>
+      </div>
+    </Modal>;
+  }
+}

src/client/components/auto-refresh-menu/auto-refresh-menu.tsx

@@ -2,6 +2,7 @@ require('./auto-refresh-menu.css');
 
 import * as React from 'react';
 import { Duration } from 'chronoshift';
+import { Fn } from "../../../common/utils/general/general";
 import { Stage, DataSource } from '../../../common/models/index';
 import { STRINGS } from '../../config/constants';
 import { BubbleMenu } from '../bubble-menu/bubble-menu';
@@ -29,10 +30,10 @@ const REFRESH_DURATIONS: Duration[] = [
 
 export interface AutoRefreshMenuProps extends React.Props<any> {
   openOn: Element;
-  onClose: Function;
+  onClose: Fn;
   autoRefreshRate: Duration;
-  setAutoRefreshRate: Function;
-  refreshMaxTime: Function;
+  setAutoRefreshRate: Fn;
+  refreshMaxTime: Fn;
   dataSource: DataSource;
 }
 

src/client/components/body-portal/body-portal.tsx

@@ -2,8 +2,6 @@ require('./body-portal.css');
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { $, Expression, Executor, Dataset } from 'plywood';
-import { Essence, Filter, Dimension, Measure } from '../../../common/models/index';
 
 export interface BodyPortalProps extends React.Props<any> {
   left?: number;

src/client/components/bubble-menu/bubble-menu.tsx

@@ -1,10 +1,7 @@
 require('./bubble-menu.css');
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { SvgIcon } from '../svg-icon/svg-icon';
-import { List } from 'immutable';
-import { $, Expression, Executor } from 'plywood';
+import { Fn } from "../../../common/utils/general/general";
 import { Stage } from '../../../common/models/index';
 import { isInside, escapeKey, uniqueId } from '../../utils/dom/dom';
 import { BodyPortal } from '../body-portal/body-portal';
@@ -23,7 +20,7 @@ export interface BubbleMenuProps extends React.Props<any> {
   fixedSize?: boolean;
   containerStage?: Stage;
   openOn: Element;
-  onClose: Function;
+  onClose: Fn;
   inside?: Element;
   layout?: BubbleLayout;
 }

src/client/components/bucket-marks/bucket-marks.mocha.tsx

@@ -0,0 +1,26 @@
+import { expect } from 'chai';
+import * as sinon from 'sinon';
+import '../../utils/jsdom-setup';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../../utils/require-extensions';
+import * as TestUtils from 'react-addons-test-utils';
+
+import { $, Expression } from 'plywood';
+import { BucketMarks } from './bucket-marks';
+
+describe('BucketMarks', () => {
+  it('adds the correct class', () => {
+    var renderedComponent = TestUtils.renderIntoDocument(
+      <BucketMarks
+        stage={null}
+        ticks={null}
+        scale={null}
+      />
+    );
+
+    expect(TestUtils.isCompositeComponent(renderedComponent), 'should be composite').to.equal(true);
+    expect((ReactDOM.findDOMNode(renderedComponent) as any).className, 'should contain class').to.contain('bucket-marks');
+  });
+
+});

src/client/components/bucket-marks/bucket-marks.scss

@@ -0,0 +1,10 @@
+@import '../../imports';
+
+.bucket-marks {
+  pointer-events: none;
+
+  line {
+    pointer-events: none;
+    stroke: $gray;
+  }
+}

src/client/components/bucket-marks/bucket-marks.tsx

@@ -0,0 +1,49 @@
+require('./bucket-marks.css');
+
+import * as React from 'react';
+import { $, Expression, Executor, Dataset } from 'plywood';
+import { Stage } from '../../../common/models/index';
+import { roundToHalfPx } from "../../utils/dom/dom";
+
+const TICK_HEIGHT = 5;
+
+export interface BucketMarksProps extends React.Props<any> {
+  stage: Stage;
+  ticks: string[];
+  scale: any;
+}
+
+export interface BucketMarksState {
+}
+
+export class BucketMarks extends React.Component<BucketMarksProps, BucketMarksState> {
+  constructor() {
+    super();
+    // this.state = {};
+
+  }
+
+  render() {
+    const { stage, ticks, scale } = this.props;
+    var stageWidth = stage.width;
+
+    var lines: JSX.Element[] = [];
+    function addLine(x: number, key: string) {
+      if (stageWidth < x) return;
+      lines.push(<line key={key} x1={x} y1={0} x2={x} y2={TICK_HEIGHT}/>);
+    }
+
+    for (var tick of ticks) {
+      var x = roundToHalfPx(scale(tick));
+      addLine(x, '_' + tick);
+    }
+    if (ticks.length) {
+      var x = roundToHalfPx(scale(ticks[ticks.length - 1]) + scale.rangeBand());
+      addLine(x, 'last');
+    }
+
+    return <g className="bucket-marks" transform={stage.getTransform()}>
+      {lines}
+    </g>;
+  }
+}

src/client/components/button/button.mocha.tsx

@@ -0,0 +1,25 @@
+import { expect } from 'chai';
+import * as sinon from 'sinon';
+import '../../utils/jsdom-setup';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import '../../utils/require-extensions';
+import * as TestUtils from 'react-addons-test-utils';
+
+import { $, Expression } from 'plywood';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('adds the correct class', () => {
+    var renderedComponent = TestUtils.renderIntoDocument(
+      <Button
+        title="Important button"
+        type="primary"
+      />
+    );
+
+    expect(TestUtils.isCompositeComponent(renderedComponent), 'should be composite').to.equal(true);
+    expect((ReactDOM.findDOMNode(renderedComponent) as any).className, 'should contain class').to.contain('button');
+  });
+
+});

src/client/components/button/button.scss

@@ -0,0 +1,11 @@
+@import '../../imports';
+
+.button {
+  &.primary {
+    @extend %button-primary;
+  }
+
+  &.secondary {
+    @extend %button-secondary;
+  }
+}