Construct Chart Label

docs/axes.md

@@ -31,6 +31,7 @@ Which is produced via
 </XYPlot>
 ```
 
+For greater control over the specific styling and placement of the axis label, please see [ChartLabel](chart-label.md).
 
 ## API Reference
 

docs/chart-label.md

@@ -0,0 +1,83 @@
+## ChartLabel
+
+When you are styling your chart sometimes you just want to take complete control of label placements. Maybe you want to annotate something, or maybe you just want to place your axis labels in a very specific place, ChartLabel allos you to do just that. Let's look at an example:
+
+```jsx
+<XYPlot width={300} height={300}>
+  <HorizontalGridLines />
+  <VerticalGridLines />
+  <XAxis />
+  <YAxis />
+  <ChartLabel
+    text="X Axis"
+    className="alt-x-label"
+    includeMargin={false}
+    xPercent={0.025}
+    yPercent={1.01}
+    />
+
+  <ChartLabel
+    text="Y Axis"
+    className="alt-y-label"
+    includeMargin={false}
+    xPercent={0.06}
+    yPercent={0.06}
+    style={{
+      transform: 'rotate(-90)',
+      textAnchor: 'end'
+    }}
+    />
+  <Line data={[{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}]} />
+</XYPlot>
+```
+
+This usage is the same as using title on the XAxis or YAxis, however it allows us greatly flexibility in terms of styles and placement. It is significantly more verbose than using the basic methods on Axis, but the it allows you to do whatever you want. You could place your axis label in the center! You could make them diagonal or a really big. The world is your oyster.
+
+This element is different then the [LabelSeries](label-series.md) because the elements that it describes ARE NOT data carrying. This element will not affect the computed domain or range. It'll just go where you place it and it won't affect anything else.
+
+
+## API Reference
+
+
+#### text
+
+Type: `string`
+
+The content of the label
+
+
+#### className (optional)
+
+Type: `string`
+
+Provide an additional class name the label.
+
+
+#### includeMargin (optional)
+
+Type: `Boolean`
+
+Defaults to true
+
+Whether or not to use compute the percentage placement with the margins or not.
+
+
+#### xPercent
+
+Type: `Number` (between 0 and 1)
+
+Where to place the label on the charts width, expressed as percentage (of the width). If the includeMargin flag is included, then this percentage is of the total width, if not then it is of just the inner chart area.
+
+
+#### yPercent
+
+Type: `Number` (between 0 and 1)
+
+Where to place the label on the charts height, expressed as percentage (of the height). If the includeMargin flag is included, then this percentage is of the total height, if not then it is of just the inner chart area.
+
+
+#### style
+
+Type: `object`
+
+The specific styles to apply to the text element of the label. These styles are applied directly to the dom object and are interpreted as SVG styles (as opposed to CSS styles).

showcase/plot/hexbin-size-example.js

@@ -22,7 +22,7 @@ import React, {Component} from 'react';
 
 import ShowcaseButton from '../showcase-components/showcase-button';
 
-import {XYPlot, XAxis, YAxis, HexbinSeries} from 'index';
+import {XYPlot, XAxis, YAxis, HexbinSeries, ChartLabel} from 'index';
 
 import DATA from '../datasets/car-data.json';
 
@@ -89,6 +89,7 @@ export default class HexbinSizeExample extends Component {
           width={500}
           onMouseLeave={() => this.setState({hoveredNode: null})}
           height={300}
+          margin={50}
         >
           <HexbinSeries
             animation
@@ -97,8 +98,28 @@ export default class HexbinSizeExample extends Component {
             radius={15}
             data={data}
           />
-          <XAxis title={DIMENSIONS[xAxis]} />
-          <YAxis title={DIMENSIONS[yAxis]} />
+          <XAxis />
+          <YAxis />
+          <ChartLabel 
+            text={DIMENSIONS[xAxis]}
+            className="alt-x-label"
+            xPercent={0.9}
+            yPercent={0.65}
+            style={{
+              transform: 'rotate(90)',
+              textAnchor: 'end'
+            }}
+            />
+
+          <ChartLabel 
+            text={DIMENSIONS[yAxis]}
+            className="alt-y-label"
+            xPercent={0.1}
+            yPercent={0.0}
+            style={{
+              textAnchor: 'start'
+            }}
+            />
         </XYPlot>
       </div>
     );

showcase/plot/line-chart.js

@@ -26,6 +26,7 @@ import {
   XYPlot,
   XAxis,
   YAxis,
+  ChartLabel,
   HorizontalGridLines,
   VerticalGridLines,
   LineSeries,
@@ -50,8 +51,27 @@ export default class Example extends React.Component {
         <XYPlot width={300} height={300}>
           <HorizontalGridLines />
           <VerticalGridLines />
-          <XAxis title="X Axis" position="start" />
-          <YAxis title="Y Axis" />
+          <XAxis />
+          <YAxis />
+          <ChartLabel 
+            text="X Axis"
+            className="alt-x-label"
+            includeMargin={false}
+            xPercent={0.025}
+            yPercent={1.01}
+            />
+
+          <ChartLabel 
+            text="Y Axis"
+            className="alt-y-label"
+            includeMargin={false}
+            xPercent={0.06}
+            yPercent={0.06}
+            style={{
+              transform: 'rotate(-90)',
+              textAnchor: 'end'
+            }}
+            />
           <Line
             className="first-series"
             data={[{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}]}

src/index.js

@@ -18,6 +18,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
+// TODO alphabetize
 export AbstractSeries from 'plot/series/abstract-series';
 export LineSeries from 'plot/series/line-series';
 export LineSeriesCanvas from 'plot/series/line-series-canvas';
@@ -52,18 +53,21 @@ export DecorativeAxis from 'plot/axis/decorative-axis';
 export XAxis from 'plot/axis/x-axis';
 export YAxis from 'plot/axis/y-axis';
 export CircularGridLines from 'plot/circular-grid-lines';
+export ChartLabel from 'plot/chart-label';
 export GridLines from 'plot/grid-lines';
 export GradientDefs from 'plot/gradient-defs';
 export VerticalGridLines from 'plot/vertical-grid-lines';
 export HorizontalGridLines from 'plot/horizontal-grid-lines';
 export Voronoi from 'plot/voronoi';
 export Highlight from 'plot/highlight';
 
+// TODO alphabetize
 export DiscreteColorLegend from 'legends/discrete-color-legend';
 export SearchableDiscreteColorLegend from 'legends/searchable-discrete-color-legend';
 export ContinuousColorLegend from 'legends/continuous-color-legend';
 export ContinuousSizeLegend from 'legends/continuous-size-legend';
 
+// TODO alphabetize
 export Treemap from 'treemap';
 export RadialChart from 'radial-chart';
 export RadarChart from 'radar-chart';

src/plot/chart-label.js

@@ -0,0 +1,78 @@
+// Copyright (c) 2018 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+
+import PropTypes from 'prop-types';
+
+class ChartLabel extends React.PureComponent {
+  static get requiresSVG() {
+    return true;
+  }
+
+  render() {
+    const {
+      // rv defined
+      innerHeight,
+      innerWidth,
+      marginBottom,
+      marginLeft,
+      marginRight,
+      marginTop,
+      // user defined
+      className,
+      includeMargin,
+      style,
+      text,
+      xPercent,
+      yPercent
+    } = this.props;
+    const width = innerWidth + (includeMargin ? marginLeft + marginRight : 0);
+    const height = innerHeight + (includeMargin ? marginTop + marginBottom : 0);
+    const xPos = width * xPercent + (includeMargin ? 0 : marginLeft);
+    const yPos = height * yPercent + (includeMargin ? marginLeft : 0);
+    return (
+      <g
+        transform={`translate(${xPos}, ${yPos})`}
+        className={`rv-xy-plot__axis__title ${className}`}>
+        <text {...style}>{text}</text>
+      </g>
+    );
+  }
+}
+
+ChartLabel.displayName = 'ChartLabel';
+ChartLabel.propTypes = {
+  className: PropTypes.string,
+  includeMargin: PropTypes.bool,
+  style: PropTypes.object,
+  text: PropTypes.string.isRequired,
+  xPercent: PropTypes.number.isRequired,
+  yPercent: PropTypes.number.isRequired
+};
+ChartLabel.defaultProps = {
+  className: '',
+  includeMargin: true,
+  text: '',
+  xPercent: 0,
+  yPercent: 0,
+  style: {}
+};
+export default ChartLabel;

tests/components/hexbin-series-tests.js

@@ -45,35 +45,37 @@ test('HexbinSeries: Showcase Example - HexHeatmap', t => {
 
 test('HexbinSeries: Showcase Example - HexbinSizeExample', t => {
   const $ = mount(<HexbinSizeExample />);
+  t.equal($.find('.alt-x-label').length, 1, 'should find custom x class on chart label correctly');
+  t.equal($.find('.alt-y-label').length, 1, 'should find custom y class on chart label correctly');
   [
     {
-      numHexes: 66,
+      numHexes: 56,
       text:
-        'PREV X X AXIS economy (mpg) NEXT XPREV Y Y AXIS power (hp) NEXT Y051015202530354045economy (mpg)050100150200power (hp)',
+        'PREV X X AXIS economy (mpg) NEXT XPREV Y Y AXIS power (hp) NEXT Y051015202530354045050100150200economy (mpg)power (hp)',
       buttonToPress: null
     },
 
     // click next x
     {
-      numHexes: 66,
+      numHexes: 56,
       text:
-        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS power (hp) NEXT Y3.03.54.04.55.05.56.06.57.07.58.0cylinders050100150200power (hp)',
+        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS power (hp) NEXT Y3.03.54.04.55.05.56.06.57.07.58.0050100150200cylinderspower (hp)',
       buttonToPress: 1
     },
 
     // click next y
     {
-      numHexes: 25,
+      numHexes: 20,
       text:
-        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS weight (lb) NEXT Y3.03.54.04.55.05.56.06.57.07.58.0cylinders2,0002,5003,0003,5004,0004,5005,000weight (lb)',
+        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS weight (lb) NEXT Y3.03.54.04.55.05.56.06.57.07.58.02,0002,5003,0003,5004,0004,5005,000cylindersweight (lb)',
       buttonToPress: 3
     },
 
     // click prev y
     {
-      numHexes: 25,
+      numHexes: 20,
       text:
-        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS weight (lb) NEXT Y3.03.54.04.55.05.56.06.57.07.58.0cylinders2,0002,5003,0003,5004,0004,5005,000weight (lb)',
+        'PREV X X AXIS cylinders NEXT XPREV Y Y AXIS weight (lb) NEXT Y3.03.54.04.55.05.56.06.57.07.58.02,0002,5003,0003,5004,0004,5005,000cylindersweight (lb)',
       buttonToPress: 0
     }
   ].forEach(({numHexes, text, buttonToPress}) => {

tests/components/line-series-tests.js

@@ -85,9 +85,11 @@ test('LineSeries: basic rendering', t => {
 
 test('LineSeries: Showcase Example - LineChart', t => {
   const $ = mount(<LineChart />);
+  t.equal($.find('.alt-x-label').length, 1, 'should find custom x class on chart label correctly');
+  t.equal($.find('.alt-y-label').length, 1, 'should find custom y class on chart label correctly');
   t.equal(
     $.text(),
-    'TOGGLE TO CANVAS1.01.52.02.53.03.54.0X Axis2468101214Y Axis',
+    'TOGGLE TO CANVAS1.01.52.02.53.03.54.02468101214X AxisY Axis',
     'should find the right text content'
   );
   t.equal(

website/src/mdRoutes.js

@@ -25,6 +25,7 @@ import areaSeries from "../../docs/area-series.md";
 import axes from "../../docs/axes.md";
 import barSeries from "../../docs/bar-series.md";
 import borders from "../../docs/borders.md";
+import chartLabel from "../../docs/chart-label.md";
 import colors from "../../docs/colors.md";
 import contourSeries from "../../docs/contour-series.md";
 import crosshair from "../../docs/crosshair.md";
@@ -221,6 +222,10 @@ const mdRoutes = [
             name: 'Axes',
             markdown: axes
           },
+          {
+            name: 'ChartLabel',
+            markdown: chartLabel
+          },
           {
             name: 'DecorativeAxis',
             markdown: decorativeAxis