update neat-charts, add sparklines

composer.lock

@@ -135,12 +135,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/seigler/neat-charts.git",
-                "reference": "f43540f78545765f411fb058f5e2fcce2ecde373"
+                "reference": "b04fc0416f826c4979c67328f74ec360235f8876"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/seigler/neat-charts/zipball/f43540f78545765f411fb058f5e2fcce2ecde373",
+                "url": "https://api.github.com/repos/seigler/neat-charts/zipball/b04fc0416f826c4979c67328f74ec360235f8876",
-                "reference": "f43540f78545765f411fb058f5e2fcce2ecde373",
+                "reference": "b04fc0416f826c4979c67328f74ec360235f8876",
                 "shasum": ""
             },
             "require": {
@@ -171,7 +171,7 @@
                 "charts",
                 "svg"
             ],
-            "time": "2016-07-01 21:57:14"
+            "time": "2016-07-02 05:39:52"
         }
     ],
     "packages-dev": [],

index.php

@@ -18,7 +18,7 @@ $router->map('GET', '/', function() {
 });
 
 // map cryptocurrency stuff
-$router->map( 'GET', '/charts/[dark|light:theme]/[a:curA]-[btc:curB]/[a:duration]/[svg|png:format]', function($theme, $curA, $curB, $duration, $format) {
+$router->map( 'GET', '/charts/[dark|light|sparkline:theme]/[a:curA]-[btc:curB]/[a:duration]/[svg|png:format]', function($theme, $curA, $curB, $duration, $format) {
   require __DIR__ . '/views/chart.php';
   return renderChart(
     $theme,

views/chart.php

@@ -25,10 +25,7 @@ function renderChart(
   $currencyA,
   $currencyB,
   $duration,
-  $format = 'svg',
+  $format = 'svg'
-  $width = 800,
-  $height = 200,
-  $fontSize = 12
 ) {
 
   $durations = [
@@ -50,6 +47,37 @@ function renderChart(
     ]
   ];
 
+  $themes = [
+    'light'=>[
+      'lineColor'=>'#fff',
+      'labelColor'=>'#fff',
+      'width'=>800,
+      'height'=>250,
+      'smoothed'=>false,
+      'fontSize'=>12
+    ],
+    'dark'=>[
+      'lineColor'=>'#000',
+      'labelColor'=>'#000',
+      'width'=>800,
+      'height'=>250,
+      'smoothed'=>false,
+      'fontSize'=>12
+    ],
+    'sparkline'=>[
+      'lineColor'=>'#000',
+      'width'=>100,
+      'height'=>20,
+      'fontSize'=>2,
+      'yAxisEnabled'=>false,
+      'xAxisEnabled'=>false
+    ]
+  ];
+
+  if (!array_key_exists($theme, $themes)) {
+    return false;
+  }
+
   if (array_key_exists($duration, $durations)) {
     $dataDuration = $durations[$duration]['duration'];
     $dataResolution = $durations[$duration]['resolution'];
@@ -95,14 +123,7 @@ function renderChart(
       $chartData[$item->date] = $item->weightedAverage;
     }
 
-    $poloniexChart = new NeatCharts\LineChart($chartData, [
+    $poloniexChart = new NeatCharts\LineChart($chartData, $themes[$theme]);
-      'width'=>$width,
-      'height'=>$height,
-      'lineColor'=>($theme == 'dark' ? '#000' : '#fff'),
-      'labelColor'=>($theme == 'dark' ? '#000' : '#fff'),
-      'smoothed'=>false,
-      'fontSize'=>$fontSize
-    ]);
     $result = $poloniexChart->render();
 
     if ($format == 'png') {

views/index.php

@@ -7,27 +7,22 @@
   <style>
     *, *:after, *:before { box-sizing: inherit; }
     html {
-      background-image: linear-gradient(105deg, #403, #107);
+      background-color: #ffd;
-      background-attachment: fixed;
     }
     body {
       font-family: sans-serif;
       line-height: 1.25;
       margin: 0 auto;
       box-sizing: border-box;
-      color: white;
+      color: black;
       max-width: 60em;
       min-height: 100vh;
-      background-color: rgba(0,0,0,0.25);
       position: relative;
     }
     body:before {
       content: '';
       display: table;
     }
-    a {
-      color: white;
-    }
     header {
       padding: 0 2rem;
     }
@@ -48,9 +43,9 @@
     code {
       display: inline-block;
       padding: 0.1em;
-      border: 1px dashed black;
+      border: 1px dashed gray;
       font-size: 1.2em;
-      background-color: rgba(0,0,0,0.75);
+      background-color: rgba(255,255,255,0.75);
       background-clip: padding-box;
     }
     img {
@@ -75,17 +70,20 @@
   </header>
   <main>
     <section>
-      <h2>SVG and PNG charts with your favorite cryptocurrencies</h2>
+      <h2>Transparent SVG and PNG charts with your favorite cryptocurrencies</h2>
       <figure>
-        <img src="/charts/light/dash-btc/30d/svg" alt="Poloniex Dash/BTC price">
+        <img src="/charts/dark/dash-btc/30d/svg" alt="Poloniex Dash/BTC price">
-        <figcaption>30 Day Dash price in BTC <code>http://cryptohistory.org/charts/light/dash-btc/30d/svg</code></figcaption>
+        <figcaption>30 Day Dash price in BTC <code><a href="/charts/dark/dash-btc/30d/svg">http://cryptohistory.org/charts/dark/dash-btc/30d/svg</a></code></figcaption>
       </figure>
+      <p>Sparklines too! ETH 7 days: <img src="/charts/sparkline/eth-btc/7d/svg" alt="ETH 7d chart" style="vertical-align: bottom;">
+        <code>&lt;img src=&quot;http://cryptohistory.org/charts/sparkline/eth-btc/7d/svg&quot; alt=&quot;ETH 7d chart&quot; style=&quot;vertical-align: bottom;&quot;&gt;</code>
+      </p>
     </section>
     <section>
       <h2>Build your own chart:</h2>
       <p>The URL is flexible:<br>
         <code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code></p>
-      <p>Theme: <code>dark</code> or <code>light</code>. (More planned)</p>
+      <p>Theme: <code>dark</code>, <code>light</code>, or <code>sparkline</code>.</p>
       <p>Currency: anything active on Poloniex. Prices are all in bitcoin.</p>
       <p>Timespan: <code>1y</code>, <code>30d</code>, <code>7d</code>, or <code>24h</code>.</p>
       <p>Format: <code>svg</code> (best) or <code>png</code>.</p>