bitacora/public/c3/spec/shape.bar-spec.ts

import { d3, initChart } from './c3-helper'

describe('c3 chart shape bar', function() {
  'use strict'

  var chart, args

  beforeEach(function(done) {
    chart = initChart(chart, args, done)
  })

  describe('Path boxes', function() {
    beforeAll(function() {
      args = {
        data: {
          columns: [['data1', 30]],
          type: 'bar'
        },
        bar: {
          width: {
            max: 40
          }
        }
      }
    })

    it('bars should have expected Path Box', function() {
      var expected = {
        x: 279,
        y: 40,
        width: 40,
        height: 387
      }

      var shapes = chart.internal.main
        .selectAll('.' + chart.internal.CLASS.shapes)
        .selectAll('.' + chart.internal.CLASS.shape)
      shapes.each(function() {
        var pathBox = chart.internal.getPathBox(this)
        expect(pathBox.x).toBeCloseTo(expected.x, -1)
        expect(pathBox.y).toBeCloseTo(expected.y, -1)
        expect(pathBox.width).toBeCloseTo(expected.width, -1)
        expect(pathBox.height).toBeCloseTo(expected.height, -1)
      })
    })
  })

  describe('with groups', function() {
    describe('with indexed data', function() {
      beforeAll(function() {
        args = {
          data: {
            columns: [
              ['data1', 30, 200, -100, 400, -150, 250],
              ['data2', 50, 20, 10, 40, 15, 25]
            ],
            groups: [['data1', 'data2']],
            type: 'bar'
          }
        }
      })
      it('should be stacked', function() {
        var expectedBottom = [275, 293, 365, 281, 395, 290]
        chart.internal.main
          .selectAll('.c3-bars-data1 .c3-bar')
          .each(function(d, i) {
            var rect = d3
              .select(this)
              .node()
              .getBoundingClientRect()
            expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1)
          })
      })
    })

    describe('with timeseries data', function() {
      beforeAll(function() {
        args = {
          data: {
            x: 'date',
            columns: [
              [
                'date',
                '2012-12-24',
                '2012-12-25',
                '2012-12-26',
                '2012-12-27',
                '2012-12-28',
                '2012-12-29'
              ],
              ['data1', 30, 200, -100, 400, -150, 250],
              ['data2', 50, 20, 10, 40, 15, 25]
            ],
            groups: [['data1', 'data2']],
            type: 'bar'
          },
          axis: {
            x: {
              type: 'timeseries'
            }
          }
        }
      })
      it('should be stacked', function() {
        var expectedBottom = [275, 293, 365, 281, 395, 290]
        chart.internal.main
          .selectAll('.c3-bars-data1 .c3-bar')
          .each(function(d, i) {
            var rect = d3
              .select(this)
              .node()
              .getBoundingClientRect()
            expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1)
          })
      })
    })

    describe('with category data', function() {
      beforeAll(function() {
        args = {
          data: {
            x: 'date',
            columns: [
              [
                'date',
                '2012-12-24',
                '2012-12-25',
                '2012-12-26',
                '2012-12-27',
                '2012-12-28',
                '2012-12-29'
              ],
              ['data1', 30, 200, -100, 400, -150, 250],
              ['data2', 50, 20, 10, 40, 15, 25]
            ],
            groups: [['data1', 'data2']],
            type: 'bar'
          },
          axis: {
            x: {
              type: 'category'
            }
          }
        }
      })

      it('should be stacked', function() {
        var expectedBottom = [275, 293, 365, 281, 395, 290]
        chart.internal.main
          .selectAll('.c3-bars-data1 .c3-bar')
          .each(function(d, i) {
            var rect = d3
              .select(this)
              .node()
              .getBoundingClientRect()
            expect(rect.bottom).toBeCloseTo(expectedBottom[i], -1)
          })
      })
    })
  })

  describe('internal.isWithinBar', function() {
    describe('with normal axis', function() {
      beforeAll(function() {
        args = {
          data: {
            columns: [
              ['data1', 30, 200, 100, 400, -150, 250],
              ['data2', 50, 20, 10, 40, 15, 25],
              ['data3', -150, 120, 110, 140, 115, 125]
            ],
            type: 'bar'
          },
          axis: {
            rotated: false
          }
        }
      })

      it('should not be within bar', function() {
        var bar = d3.select('.c3-target-data1 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy()
      })

      it('should be within bar', function() {
        var bar = d3.select('.c3-target-data1 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([31, 280], bar)).toBeTruthy()
      })

      it('should not be within bar of negative value', function() {
        var bar = d3.select('.c3-target-data3 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([68, 280], bar)).toBeFalsy()
      })

      it('should be within bar of negative value', function() {
        var bar = d3.select('.c3-target-data3 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([68, 350], bar)).toBeTruthy()
      })
    })

    describe('with rotated axis', function() {
      beforeAll(function() {
        args.axis.rotated = true
      })

      it('should not be within bar', function() {
        var bar = d3.select('.c3-target-data1 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([0, 0], bar)).toBeFalsy()
      })

      it('should be within bar', function() {
        var bar = d3.select('.c3-target-data1 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([190, 20], bar)).toBeTruthy()
      })

      it('should be within bar of negative value', function() {
        var bar = d3.select('.c3-target-data3 .c3-bar-0').node()
        expect(chart.internal.isWithinBar([68, 50], bar)).toBeTruthy()
      })
    })
  })

  describe('bar spacing', function() {
    var createArgs = function(spacing) {
      return {
        size: {
          width: 500
        },
        data: {
          columns: [
            ['data1', 30, 200, 100],
            ['data2', 50, 20, 10],
            ['data3', 150, 120, 110],
            ['data4', 12, 24, 20]
          ],
          type: 'bar',
          groups: [['data1', 'data4']]
        },
        bar: {
          space: spacing
        }
      }
    }

    var getBBox = function(selector) {
      return d3
        .select(selector)
        .node()
        .getBBox()
    }

    var getBarContainerWidth = function() {
      return parseInt(getBBox('.c3-chart-bars').width)
    }

    var getBarContainerOffset = function() {
      return parseInt(getBBox('.c3-chart-bars').x)
    }

    var getBarBBox = function(name, idx) {
      return getBBox('.c3-target-' + name + ' .c3-bar-' + (idx || 0))
    }

    var getBarWidth = function(name, idx) {
      return parseInt(getBarBBox(name, idx).width)
    }

    var getBarOffset = function(name1, name2, idx) {
      var bbox1 = getBarBBox(name1, idx)
      var bbox2 = getBarBBox(name2, idx)
      return Math.floor(bbox2.x - (bbox1.x + bbox1.width))
    }

    it('should set bar spacing to 0', function() {
      args = createArgs(0)
      expect(true).toBeTruthy()
    })

    it('should display the bars without any spacing', function() {
      // all bars should have the same width
      expect(getBarWidth('data1', 0)).toEqual(30)
      expect(getBarWidth('data2', 0)).toEqual(30)
      expect(getBarWidth('data3', 0)).toEqual(30)
      expect(getBarWidth('data1', 1)).toEqual(30)
      expect(getBarWidth('data2', 1)).toEqual(30)
      expect(getBarWidth('data3', 1)).toEqual(30)
      expect(getBarWidth('data1', 2)).toEqual(30)
      expect(getBarWidth('data2', 2)).toEqual(30)
      expect(getBarWidth('data3', 2)).toEqual(30)

      // all offsets should be the same
      expect(getBarOffset('data1', 'data2', 0)).toEqual(0)
      expect(getBarOffset('data2', 'data3', 0)).toEqual(0)
      expect(getBarOffset('data1', 'data2', 1)).toEqual(0)
      expect(getBarOffset('data2', 'data3', 1)).toEqual(0)
      expect(getBarOffset('data1', 'data2', 2)).toEqual(0)
      expect(getBarOffset('data2', 'data3', 2)).toEqual(0)

      // default width/offset of the container for this chart
      expect(getBarContainerWidth()).toEqual(396)
      expect(getBarContainerOffset()).toEqual(31)
    })

    it('should set bar spacing to 0.25', function() {
      args = createArgs(0.25)
      expect(true).toBeTruthy()
    })

    it('should display the bars with a spacing ratio of 0.25', function() {
      // with bar_space of 0.25, the space between bars is
      // expected to be 25% of the original bar's width
      // which is ~7

      // expect all bars to be the same width
      expect(getBarWidth('data1', 0)).toEqual(22)
      expect(getBarWidth('data2', 0)).toEqual(22)
      expect(getBarWidth('data3', 0)).toEqual(22)
      expect(getBarWidth('data1', 1)).toEqual(22)
      expect(getBarWidth('data2', 1)).toEqual(22)
      expect(getBarWidth('data3', 1)).toEqual(22)
      expect(getBarWidth('data1', 2)).toEqual(22)
      expect(getBarWidth('data2', 2)).toEqual(22)
      expect(getBarWidth('data3', 2)).toEqual(22)

      // all offsets should be the same
      expect(getBarOffset('data1', 'data2', 0)).toEqual(7)
      expect(getBarOffset('data2', 'data3', 0)).toEqual(7)
      expect(getBarOffset('data1', 'data2', 1)).toEqual(7)
      expect(getBarOffset('data2', 'data3', 1)).toEqual(7)
      expect(getBarOffset('data1', 'data2', 2)).toEqual(7)
      expect(getBarOffset('data2', 'data3', 2)).toEqual(7)

      // expect the container to shrink a little because of
      // the offsets from the first/last chart
      // we add/subtract 1 because of approximation due to rounded values
      expect(getBarContainerWidth()).toEqual(396 - 7 - 1)
      expect(getBarContainerOffset()).toEqual(31 + (Math.floor(7 / 2) + 1))
    })

    it('should set bar spacing to 0.5', function() {
      args = createArgs(0.5)
      expect(true).toBeTruthy()
    })

    it('should display the bars with a spacing ratio of 0.5', function() {
      // with bar_space of 0.5, the space between bars is
      // expected to be 50% of the original bar's width
      // which is ~15

      // expect all bars to be the same width
      expect(getBarWidth('data1', 0)).toEqual(15)
      expect(getBarWidth('data2', 0)).toEqual(15)
      expect(getBarWidth('data3', 0)).toEqual(15)
      expect(getBarWidth('data1', 1)).toEqual(15)
      expect(getBarWidth('data2', 1)).toEqual(15)
      expect(getBarWidth('data3', 1)).toEqual(15)
      expect(getBarWidth('data1', 2)).toEqual(15)
      expect(getBarWidth('data2', 2)).toEqual(15)
      expect(getBarWidth('data3', 2)).toEqual(15)

      // all offsets should be the same
      expect(getBarOffset('data1', 'data2', 0)).toEqual(15)
      expect(getBarOffset('data2', 'data3', 0)).toEqual(15)
      expect(getBarOffset('data1', 'data2', 1)).toEqual(15)
      expect(getBarOffset('data2', 'data3', 1)).toEqual(15)
      expect(getBarOffset('data1', 'data2', 2)).toEqual(15)
      expect(getBarOffset('data2', 'data3', 2)).toEqual(15)

      // expect the container to shrink a little because of
      // the offsets from the first/last chart
      expect(getBarContainerWidth()).toEqual(396 - 15)
      expect(getBarContainerOffset()).toEqual(31 + Math.floor(15 / 2))
    })
  })
})