feat(chart): add labels to charts

BREAKING CHANGE: now requires react 15... + removal/renaming of props
colinmeinke · Mar 15, 2016 · a8c1b76 · a8c1b76
1 parent 875029f
commit a8c1b76
Show file tree

Hide file tree

Showing 9 changed files with 462 additions and 150 deletions.
diff --git a/examples/barChart/App.js b/examples/barChart/App.js
@@ -5,31 +5,31 @@ const days = [
   {
     title: 'Thursday, 9th March',
     bars: [
-      { value: 3.50 },
-      { value: 7.45 },
-      { value: 1.27 },
-      { value: 1.15 },
-      { value: 2.93 },
+      { label: 'travel', value: 0.00 },
+      { label: 'accomodation', value: 20.25 },
+      { label: 'food', value: 20.28 },
+      { label: 'drink', value: 7.43 },
+      { label: 'tourism', value: 13.50 },
     ],
   },
   {
     title: 'Wednesday, 8th March',
     bars: [
-      { value: 1.92 },
-      { value: 1.11 },
-      { value: 7.20 },
-      { value: 6.34 },
-      { value: 3.15 },
+      { label: 'travel', value: 13.50 },
+      { label: 'accomodation', value: 17.77 },
+      { label: 'food', value: 14.63 },
+      { label: 'drink', value: 9.47 },
+      { label: 'tourism', value: 0.00 },
     ],
   },
   {
     title: 'Tuesday, 7th March',
     bars: [
-      { value: 5.37 },
-      { value: 7.32 },
-      { value: 0.90 },
-      { value: 4.78 },
-      { value: 2.75 },
+      { label: 'travel', value: 138.88 },
+      { label: 'accomodation', value: 21.50 },
+      { label: 'food', value: 17.42 },
+      { label: 'drink', value: 3.98 },
+      { label: 'tourism', value: 0.00 },
     ],
   },
 ];
@@ -56,9 +56,12 @@ const App = createClass({
           ))}
         </select>
         <BarChart
-          chartClassName="chart"
           bars={ this.state.day.bars }
+          description={ `Amount of money spent on ${ this.state.day.title } broken down by category` }
+          labelWidth={ 135 }
           preserveAspectRatio="xMinYMid meet"
+          title="Travel budget"
+          formatValue={ v => `£${ v.toFixed( 2 )}` }
         />
       </section>
     );

diff --git a/examples/barChart/Page.js b/examples/barChart/Page.js
@@ -8,31 +8,70 @@ const Page = ({ app }) => (
   <html lang="en">
     <head>
       <style>{ `
+        html {
+          line-height: 1.5;
+          font-family: Arial, Helvetica, sans-serif;
+          height: 100%;
+        }
+
+        body {
+          background-color: rgb( 245, 245, 245 );
+          margin: 0;
+        }
+
         html,
         body,
         .app,
         .content {
           height: 100%;
-          margin: 0;
         }
 
         select {
           position: absolute;
-          right: 10px;
-          top: 10px;
-        }
-
-        select {
-          display: block;
+          top: 20px;
+          right: 20px;
         }
 
-        .chart {
-          background-color: rgb(240,240,240);
+        .bar-chart {
+          background-color: rgb( 245, 245, 245 );
+          background-image: radial-gradient(
+            2px 2px at center,
+            rgb( 210, 230, 240 ) 0%,
+            rgb( 210, 230, 240 ) 50%,
+            rgb( 245, 245, 245 ) 50%,
+            rgb( 245, 245, 245 ) 100%
+          );
+          background-size: 30px 30px;
           box-sizing: border-box;
           height: 100%;
-          padding: 40px 10px 10px 0;
+          padding: 58px 20px 20px;
           width: 100%;
         }
+
+        .bar-chart__grid-x line,
+        .bar-chart__grid-y line {
+          stroke: rgb( 200, 80, 55 );
+        }
+
+        .bar-chart__label {
+          fill: rgb( 55, 55, 55 );
+          font-size: 18px;
+        }
+
+        .bar-chart__bar {
+          fill: rgb( 90, 175, 65 );
+        }
+
+        .bar-chart__value {
+          fill: rgb( 55, 55, 55 );
+          font-size: 30px;
+          font-weight: bold;
+        }
+
+        .bar-chart__value[text-anchor=end] {
+          fill: rgb( 255, 255, 255 );
+          text-shadow: 0 -2px 0 rgb( 30, 60, 22 );
+        }
       ` }</style>
     </head>
     <body>

diff --git a/examples/barChart/package.json b/examples/barChart/package.json
@@ -22,8 +22,8 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "express": "^4.13.4",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react": "^15.0.0-rc.1",
+    "react-dom": "^15.0.0-rc.1"
   },
   "description": "SVG charts bar chart example",
   "devDependencies": {

diff --git a/examples/lineChart/App.js b/examples/lineChart/App.js
@@ -1,76 +1,83 @@
 import React, { createClass } from 'react';
 import { LineChart } from '../../src';
 
-const days = [
+const categories = [
   {
-    title: 'Thursday, 9th March',
-    lines: [
-      {
-        points: [
-          { value: 3.50 },
-          { value: 7.45 },
-          { value: 1.27 },
-          { value: 1.15 },
-          { value: 2.93 },
-        ],
-      },
+    title: 'Accomodation',
+    points: [
+      { label: 'Fri 17', value: 7.65 },
+      { label: 'Sat 18', value: 25.50 },
+      { label: 'Sun 19', value: 21.55 },
+      { label: 'Mon 20', value: 21.55 },
+      { label: 'Tue 21', value: 21.55 },
+      { label: 'Wed 22', value: 21.55 },
+      { label: 'Thu 23', value: 39.82 },
+      { label: 'Fri 24', value: 39.82 },
+      { label: 'Sat 25', value: 39.82 },
     ],
   },
   {
-    title: 'Wednesday, 8th March',
-    lines: [
-      {
-        points: [
-          { value: 1.92 },
-          { value: 1.11 },
-          { value: 7.20 },
-          { value: 6.34 },
-          { value: 3.15 },
-        ],
-      },
+    title: 'Food',
+    points: [
+      { label: 'Fri 17', value: 5.46 },
+      { label: 'Sat 18', value: 5.71 },
+      { label: 'Sun 19', value: 9.79 },
+      { label: 'Mon 20', value: 9.03 },
+      { label: 'Tue 21', value: 13.52 },
+      { label: 'Wed 22', value: 12.50 },
+      { label: 'Thu 23', value: 15.56 },
+      { label: 'Fri 24', value: 9.18 },
+      { label: 'Sat 25', value: 9.44 },
     ],
   },
   {
-    title: 'Tuesday, 7th March',
-    lines: [
-      {
-        points: [
-          { value: 5.37 },
-          { value: 7.32 },
-          { value: 0.90 },
-          { value: 4.78 },
-          { value: 2.75 },
-        ],
-      },
+    title: 'Drink',
+    points: [
+      { label: 'Fri 17', value: 2.35 },
+      { label: 'Sat 18', value: 2.55 },
+      { label: 'Sun 19', value: 10.20 },
+      { label: 'Mon 20', value: 10.97 },
+      { label: 'Tue 21', value: 3.83 },
+      { label: 'Wed 22', value: 2.04 },
+      { label: 'Thu 23', value: 4.52 },
+      { label: 'Fri 24', value: 1.28 },
+      { label: 'Sat 25', value: 10.91 },
     ],
   },
 ];
 
 const App = createClass({
   onChange ( e ) {
     this.setState({
-      day: days[ e.target.value ],
+      category: categories[ e.target.value ],
     });
   },
 
   getInitialState () {
     return {
-      day: days[ 0 ],
+      category: categories[ 0 ],
     };
   },
 
   render () {
     return (
       <section className="content">
         <select onChange={ this.onChange }>
-          { days.map(( day, i ) => (
-            <option key={ i } value={ i }>{ day.title }</option>
+          { categories.map(( cat, i ) => (
+            <option key={ i } value={ i }>{ cat.title }</option>
           ))}
         </select>
         <LineChart
-          chartClassName="chart"
-          lines={ this.state.day.lines }
+          description={ `Amount of money spent on ${ this.state.category.title }` }
+          formatValue={ v => `£${ v.toFixed( 2 )}` }
+          lines={[{ points: this.state.category.points }]}
+          pointSize={ 18 }
+          labelSpacing={ 15 }
           preserveAspectRatio="xMinYMid meet"
+          title="Travel budget"
+          valueHeight={ 34 }
+          valueOffset={ 37 }
+          valueWidth={ 65 }
         />
       </section>
     );

diff --git a/examples/lineChart/Page.js b/examples/lineChart/Page.js
@@ -8,31 +8,77 @@ const Page = ({ app }) => (
   <html lang="en">
     <head>
       <style>{ `
+        html {
+          line-height: 1.5;
+          font-family: Arial, Helvetica, sans-serif;
+          height: 100%;
+        }
+
+        body {
+          background-color: rgb( 245, 245, 245 );
+          margin: 0;
+        }
+
         html,
         body,
         .app,
         .content {
           height: 100%;
-          margin: 0;
         }
 
         select {
           position: absolute;
-          right: 10px;
-          top: 10px;
+          top: 20px;
+          right: 20px;
         }
 
-        select {
-          display: block;
-        }
-
-        .chart {
-          background-color: rgb(240,240,240);
+        .line-chart {
+          background-color: rgb( 245, 245, 245 );
+          background-image: radial-gradient(
+            2px 2px at center,
+            rgb( 210, 230, 240 ) 0%,
+            rgb( 210, 230, 240 ) 50%,
+            rgb( 245, 245, 245 ) 50%,
+            rgb( 245, 245, 245 ) 100%
+          );
+          background-size: 30px 30px;
           box-sizing: border-box;
           height: 100%;
-          padding: 40px 10px 10px;
+          padding: 58px 20px 20px;
           width: 100%;
         }
+
+        .line-chart__grid-x line,
+        .line-chart__grid-y line {
+          stroke: rgb( 200, 80, 55 );
+        }
+
+        .line-chart__line {
+          stroke: rgb( 90, 175, 65 );
+          stroke-width: 6px;
+        }
+
+        .line-chart__point {
+          fill: rgb( 120, 210, 85 );
+          stroke: rgb( 90, 175, 65 );
+          stroke-width: 3px;
+        }
+
+        .line-chart__label,
+        .line-chart__value {
+          fill: rgb( 55, 55, 55 );
+          font-size: 18px;
+        }
+
+        .line-chart__value {
+          font-weight: bold;
+        }
+
+        .line-chart__value-bg {
+          fill: rgb( 255, 255, 255 );
+          stroke: rgb( 220, 220, 220 );
+          stroke-width: 1px;
+        }
       ` }</style>
     </head>
     <body>

diff --git a/examples/lineChart/package.json b/examples/lineChart/package.json
@@ -22,8 +22,8 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "express": "^4.13.4",
-    "react": "^0.14.7",
-    "react-dom": "^0.14.7"
+    "react": "^15.0.0-rc.1",
+    "react-dom": "^15.0.0-rc.1"
   },
   "description": "SVG charts line chart example",
   "devDependencies": {

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "babel-preset-react": "^6.5.0",
     "commitizen": "^2.7.2",
     "cz-conventional-changelog": "^1.1.5",
-    "react": "^0.14.7",
+    "react": "^15.0.0-rc.1",
     "semantic-release": "^4.3.5"
   },
   "keywords": [
@@ -53,7 +53,7 @@
   "main": "lib/index.js",
   "name": "react-svg-chart",
   "peerDependencies": {
-    "react": "^0.14.7"
+    "react": "^15.0.0-rc.1"
   },
   "repository": {
     "type": "git",