Add axis.x.tick.fit option - #88

11 years ago · fc47508cf8
3 changed files with 50 additions and 3 deletions
--- a/c3.js
+++ b/c3.js
@ -163,6 +163,7 @@
            __axis_x_tick_format = getConfig(['axis', 'x', 'tick', 'format']),
            __axis_x_tick_culling = getConfig(['axis', 'x', 'tick', 'culling'], __axis_x_type === 'categorized' ? false : true),
            __axis_x_tick_count = getConfig(['axis', 'x', 'tick', 'count'], 10),
            __axis_x_tick_fit = getConfig(['axis', 'x', 'tick', 'fit'], false),
            __axis_x_max = getConfig(['axis', 'x', 'max']),
            __axis_x_min = getConfig(['axis', 'x', 'min']),
            __axis_x_default = getConfig(['axis', 'x', 'default']),
@ -1453,6 +1454,10 @@
        function filterTargetsToShow(targets) {
            return targets.filter(function (t) { return isTargetToShow(t.id); });
        }
        function mapTargetsToUniqueXs(targets) {
            var xs = d3.set(d3.merge(targets.map(function (t) { return t.values.map(function (v) { return v.x; }); }))).values();
            return isTimeSeries ? xs.map(function (x) { return new Date(x); }) : xs.map(function (x) { return +x; });
        }
        function addHiddenTargetIds(targetIds) {
            hiddenTargetIds = hiddenTargetIds.concat(targetIds);
        }
@ -2832,7 +2837,7 @@
            var hideAxis = hasArcType(c3.data.targets);
            var drawBar, drawBarOnSub, xForText, yForText;
            var duration, durationForExit, durationForAxis;
-            var targetsToShow = filterTargetsToShow(c3.data.targets);
+            var targetsToShow = filterTargetsToShow(c3.data.targets), uniqueXs;
            // abort if no targets to show
            if (targetsToShow.length === 0) {
@ -2873,6 +2878,13 @@
            y.domain(getYDomain(targetsToShow, 'y'));
            y2.domain(getYDomain(targetsToShow, 'y2'));
            // Fix tick position to data
            if (__axis_x_tick_fit) {
                uniqueXs = mapTargetsToUniqueXs(targetsToShow);
                xAxis.tickValues(uniqueXs);
                subXAxis.tickValues(uniqueXs);
            }
            // axis
            main.select('.' + CLASS.axisX).style("opacity", hideAxis ? 0 : 1).transition().duration(durationForAxis).call(xAxis);
            main.select('.' + CLASS.axisY).style("opacity", hideAxis ? 0 : 1).transition().duration(durationForAxis).call(yAxis);
--- a/c3.min.js
+++ b/c3.min.js
--- a/htdocs/samples/axes_x_tick_fit.html
+++ b/htdocs/samples/axes_x_tick_fit.html
@ -0,0 +1,35 @@
 <html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
    <div id="chart"></div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script>
      var chart = c3.generate({
        data: {
          x: 'x',
          columns: [
            ['x', '2013-10-31', '2013-11-30', '2013-12-31', '2014-01-31', '2014-02-28'],
 //            ['x', 30, 70, 150, 200, 350],
            ['sample', 30, 200, 100, 400, 150],
            ['sample2', 130, 300, 200, 500, 250]
          ]
        },
        axis : {
          x : {
            type : 'timeseries',
            tick: {
              fit: true
            }
          }
        },
        subchart: {
 //          show: true
        }
      });
    </script>
  </body>
 </html>