support specialized area charts

jcarver989 · Jan 13, 2017 · cdacff6 · cdacff6
1 parent 7dec2aa
commit cdacff6
Show file tree

Hide file tree

Showing 6 changed files with 158 additions and 23 deletions.
diff --git a/dist/suave-charts.min.js b/dist/suave-charts.min.js
diff --git a/examples/wealth-chart.html b/examples/wealth-chart.html
@@ -0,0 +1,127 @@
+<!doctype html>
+<html>
+  <head>
+    <link href='https://fonts.googleapis.com/css?family=Lato:400,900,900italic,300,100' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="../dist/suave-charts.css">
+    <link rel="stylesheet" type="text/css" href="vendor/foundation.css">
+    <link rel="stylesheet" type="text/css" href="vendor/prism.css">
+    <style>
+      h1,h2,h3 {
+        font-family: 'Lato', sans-serif;
+        text-align: center;
+      }
+      h1 {
+        font-weight: 900;
+        margin-top: 5rem;
+      }
+
+      h3 { font-weight: 400; }
+
+      code, pre[class*="language"] {
+        border: none;
+        box-shadow: none;
+      }
+
+    </style>
+
+    <style id="css1">
+/* Color line1 blue */
+.line1.line { stroke: #00aadd; }
+.line1.area, .line1.dot { fill: #00aadd; }
+
+/* Color line2 green */
+.line2.line { stroke: #1dd0ad; }
+.line2.area, .line2.dot { fill: #1dd0ad; } 
+
+/* Make the grid lines light gray */
+.tick line { stroke: #eee; }
+.domain { display: none; }
+
+/* Set shared styles for lines, shaded areas and dots */
+.line { stroke-width: 5px; }
+.area { opacity: 0.2; }
+.dot { stroke-width: 3px; transition: fill  0.5s ease-in-out; }
+.dot:hover { fill: #000; stroke: #000; }
+</style>
+
+  </head>
+  <body>
+    <div class="row">
+      <h1>Time Series Chart</h1>
+      <h3>Two lines with smoothing</h3>
+      <div class="large-12 columns">
+        <div id="chart"></div>
+      </div>
+    </div>
+    <div class="row">
+      <div class="large-6 columns">
+        <h3>Javascript</h3>
+        <div id="jsExample1"></div>
+      </div>
+
+      <div class="large-6 columns">
+        <h3>HTML</h3>
+        <pre><code class="language-html">
+&lt;link rel="stylesheet" type="text/css" href="../dist/suave-charts.css"&gt;
+&lt;script src="vendor/d3.min.js"&gt;&lt;/script&gt;
+&lt;script src="../dist/suave-charts.min.js"&gt;&lt;/script&gt;
+&lt;div id="chart"&gt;&lt;/div&gt;
+        </code></pre>
+        <h3>CSS</h3>
+        <div id="cssExample1"></div>
+      </div>
+    </div>
+
+    <script src="vendor/d3.min.js"></script>
+    <script src="../dist/suave-charts.min.js"></script>
+    <script id="js1">
+// Makeup some data:
+var xLabels = [
+  new Date("Jan 1, 2014").getTime(),
+  new Date("Jan 2, 2014").getTime(),
+  new Date("Jan 3, 2014").getTime(),
+  new Date("Jan 4, 2014").getTime(),
+  new Date("Jan 5, 2014").getTime(),
+  new Date("Jan 6, 2014").getTime(),
+  new Date("Jan 7, 2014").getTime(),
+  new Date("Jan 8, 2014").getTime()
+]
+
+var data = [
+  10,
+  200,
+  3000,
+  10,
+  5000,
+  400,
+  2000,
+  10000
+]
+
+// And some more data
+var data2 = data.map(function(d) { return d * 3 })
+
+// Create a line chart
+chart = new Suave.LineChart("#chart", {
+  xScale: "time",
+  xLabelInterval: "days",
+  xLabelFormat: "%d/%m/%Y"
+})
+
+// Draw the chart
+chart.draw({ 
+  labels: xLabels,
+  lines: [
+    { label: "line1", values: data, baselineValues: data2, area: true, smooth: true  },
+  ]
+})
+    </script>
+
+    <script src="vendor/code.js"></script>
+    <script>
+      codify("#css1", "#cssExample1", "language-css")
+      codify("#js1", "#jsExample1", "language-javascript")
+    </script>
+    <script src="vendor/prism.js"></script>
+  </body>
+</html>
diff --git a/src/coffeescript/axes.coffee b/src/coffeescript/axes.coffee
@@ -26,12 +26,15 @@ class Axes
         when "days" then d3.time.days
         when "months" then d3.time.months
         when "years" then d3.time.years
-      @xAxis.ticks(ticks)
+
+      step = if @options.tickStepSize? then @options.tickStepSize else 1
+      @xAxis.ticks(ticks, step)
 
     else if @options.ticks? && @options.ticks > 0
       ticks = filterTicks(@options.ticks, @xScale, @options.xScale)
       @xAxis.tickValues(ticks)
 
+    @yAxis.ticks(@options.yTicks)
     @xAxisSelection.call @xAxis
     @yAxisSelection.call @yAxis
 

diff --git a/src/coffeescript/defaults.coffee b/src/coffeescript/defaults.coffee
@@ -22,10 +22,12 @@ defaultLineOptions = {
   yLabelFormat: null # uses default
   tooltipFormat: (y) -> d3.format(",.0f")(y)
   ticks: 10
+  yTicks: 10
+  legend: false
   margin: {
-    top: 50,
-    bottom: 50,
-    right: 80,
+    top: 50
+    bottom: 50
+    right: 80
     left: 80
   }
 

diff --git a/src/coffeescript/donut_chart.coffee b/src/coffeescript/donut_chart.coffee
@@ -28,7 +28,7 @@ class DonutChart extends AbstractChart
     arcSelection = @svg.chart.selectAll(".arc").data(@pie(data))
     @enter = arcSelection.enter()
       .append("g")
-      .attr("class", (d, i) -> "arc arc-#{i} arc-#{d.data[0]}}")
+      .attr("class", (d, i) -> "arc arc-#{i} arc-#{d.data[0]}")
 
     @arcs = @enter.append("path")
     @labels = @enter.append("text")

diff --git a/src/coffeescript/line_chart.coffee b/src/coffeescript/line_chart.coffee
@@ -70,7 +70,7 @@ class LineChart extends AbstractChart
 
     @dots
       .attr("cx", (point) => @x(point.x))
-      .attr("cy", (point) => @y(point.y + point.baseline))
+      .attr("cy", (point) => @y(point.y + point.yTranslation))
 
   chooseInterpolation: (line) -> if line.smooth then "monotone" else "linear"
 
@@ -92,17 +92,19 @@ class LineChart extends AbstractChart
         lineCopies[i][key] = val
 
     for label, i in labels
-      baseline = 0
+      areaY0 = 0
+      yTranslation = 0
       for line, j in data.lines
         y = line.values[i]
-        yb = y + baseline
+        yb = y + yTranslation
         xMin = label if !xMin? || xMin > label
         xMax = label if !xMax? || xMax < label
         yMin = yb if !yMin? || yMin > yb
         yMax = yb if !yMax? || yMax < yb
         copy = lineCopies[j]
-        copy.values[i] = { x: label, y: y, baseline: baseline, lineKey: line.label }
-        baseline += y if stack
+        areaY0 = line.baselineValues[i] if line.baselineValues?
+        copy.values[i] = { x: label, y: y, yTranslation: yTranslation, areaY0: areaY0, lineKey: line.label }
+        yTranslation += y if stack
 
     yStart = if @options.yScale == "log" then yMin else 0
     {
@@ -125,12 +127,12 @@ class LineChart extends AbstractChart
 
     @line
     .x((d) => @x(d.x))
-    .y((d) => @y(d.y + d.baseline))
+    .y((d) => @y(d.y + d.yTranslation))
 
     @area
     .x((d) => @x(d.x))
-    .y0((d) => @y(d.baseline))
-    .y1((d) => @y(d.y + d.baseline))
+    .y0((d) => @y(d.areaY0 + d.yTranslation))
+    .y1((d) => @y(d.y + d.yTranslation))
 
     # dynamically choose the left margin
     if @options.autoMargins