update neat-charts, add sparklines

This commit is contained in:
Joshua Seigler 2016-07-02 01:57:22 -04:00
parent 6a23eb790c
commit 25cb66b6e8
4 changed files with 49 additions and 30 deletions

8
composer.lock generated
View file

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

View file

@ -18,7 +18,7 @@ $router->map('GET', '/', function() {
}); });
// map cryptocurrency stuff // 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'; require __DIR__ . '/views/chart.php';
return renderChart( return renderChart(
$theme, $theme,

View file

@ -25,10 +25,7 @@ function renderChart(
$currencyA, $currencyA,
$currencyB, $currencyB,
$duration, $duration,
$format = 'svg', $format = 'svg'
$width = 800,
$height = 200,
$fontSize = 12
) { ) {
$durations = [ $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)) { if (array_key_exists($duration, $durations)) {
$dataDuration = $durations[$duration]['duration']; $dataDuration = $durations[$duration]['duration'];
$dataResolution = $durations[$duration]['resolution']; $dataResolution = $durations[$duration]['resolution'];
@ -95,14 +123,7 @@ function renderChart(
$chartData[$item->date] = $item->weightedAverage; $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(); $result = $poloniexChart->render();
if ($format == 'png') { if ($format == 'png') {

View file

@ -7,27 +7,22 @@
<style> <style>
*, *:after, *:before { box-sizing: inherit; } *, *:after, *:before { box-sizing: inherit; }
html { html {
background-image: linear-gradient(105deg, #403, #107); background-color: #ffd;
background-attachment: fixed;
} }
body { body {
font-family: sans-serif; font-family: sans-serif;
line-height: 1.25; line-height: 1.25;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
color: white; color: black;
max-width: 60em; max-width: 60em;
min-height: 100vh; min-height: 100vh;
background-color: rgba(0,0,0,0.25);
position: relative; position: relative;
} }
body:before { body:before {
content: ''; content: '';
display: table; display: table;
} }
a {
color: white;
}
header { header {
padding: 0 2rem; padding: 0 2rem;
} }
@ -48,9 +43,9 @@
code { code {
display: inline-block; display: inline-block;
padding: 0.1em; padding: 0.1em;
border: 1px dashed black; border: 1px dashed gray;
font-size: 1.2em; font-size: 1.2em;
background-color: rgba(0,0,0,0.75); background-color: rgba(255,255,255,0.75);
background-clip: padding-box; background-clip: padding-box;
} }
img { img {
@ -75,17 +70,20 @@
</header> </header>
<main> <main>
<section> <section>
<h2>SVG and PNG charts with your favorite cryptocurrencies</h2> <h2>Transparent SVG and PNG charts with your favorite cryptocurrencies</h2>
<figure> <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> </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>
<section> <section>
<h2>Build your own chart:</h2> <h2>Build your own chart:</h2>
<p>The URL is flexible:<br> <p>The URL is flexible:<br>
<code>http://cryptohistory.org/charts/{theme}/{currency}-btc/{timespan}/{format}</code></p> <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>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>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> <p>Format: <code>svg</code> (best) or <code>png</code>.</p>