bitacora/public/c3/spec/grid-spec.ts

import { d3, initChart } from './c3-helper'
describe('c3 chart grid', function() {
  'use strict'

  var chart, args

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

  describe('y grid show', function() {
    beforeAll(function() {
      args = {
        data: {
          columns: [['data1', 30, 200, 100, 400, 150, 250]]
        },
        axis: {
          y: {
            tick: {}
          }
        },
        grid: {
          y: {
            show: false
          }
        }
      }
    })

    it('should not show y grids', function() {
      expect(chart.internal.main.select('.c3-ygrids').size()).toBe(0)
    })

    describe('with y grids', function() {
      beforeAll(function() {
        args.grid.y.show = true
      })

      it('should show y grids', function() {
        var ygrids = chart.internal.main.select('.c3-ygrids')
        expect(ygrids.size()).toBe(1)
        expect(ygrids.selectAll('.c3-ygrid').size()).toBe(9)
      })
    })

    describe('with only 3 y grids', function() {
      beforeAll(function() {
        args.grid.y.ticks = 3
      })

      it('should show only 3 y grids', function() {
        var ygrids = chart.internal.main.select('.c3-ygrids')
        expect(ygrids.size()).toBe(1)
        expect(ygrids.selectAll('.c3-ygrid').size()).toBe(3)
      })
    })

    describe('with y grids depending on y axis ticks', function() {
      beforeAll(function() {
        args.axis.y.tick.count = 5
      })

      it('should show grids depending on y axis ticks', function() {
        var ygrids = chart.internal.main.select('.c3-ygrids'),
          expectedYs = []
        ygrids.selectAll('.c3-ygrid').each(function(d, i) {
          expectedYs[i] = Math.ceil(+d3.select(this).attr('y1'))
        })
        expect(ygrids.size()).toBe(1)
        expect(ygrids.selectAll('.c3-ygrid').size()).toBe(5)
        chart.internal.main
          .select('.c3-axis-y')
          .selectAll('.tick')
          .each(function(d, i) {
            var t = d3.select(this).attr('transform')
            expect(t).toBe('translate(0,' + expectedYs[i] + ')')
          })
      })
    })
  })

  describe('y grid lines', function() {
    describe('position', function() {
      beforeAll(function() {
        args = {
          data: {
            columns: [['data1', 10, 200, 100, 400, 150, 250]]
          },
          grid: {
            y: {
              lines: [
                {
                  value: 30,
                  text: 'Label 30',
                  position: 'start'
                },
                {
                  value: 145,
                  text: 'Label 145',
                  position: 'middle'
                },
                { value: 225, text: 'Label 225' }
              ]
            }
          }
        }
      })

      it('should show 3 grid lines', function() {
        expect(
          chart.internal.main.selectAll('.c3-ygrid-lines .c3-ygrid-line').size()
        ).toBe(3)
      })

      it('should locate grid lines properly', function() {
        var lines = chart.internal.main.selectAll(
            '.c3-ygrid-lines .c3-ygrid-line'
          ),
          expectedY1s = [373, 268, 196]
        lines.each(function(d, i) {
          var y1 = d3
            .select(this)
            .select('line')
            .attr('y1')
          expect(y1).toBeCloseTo(expectedY1s[i], -2)
        })
      })

      it('should locate grid texts properly', function() {
        var lines = chart.internal.main.selectAll(
            '.c3-ygrid-lines .c3-ygrid-line'
          ),
          expectedPositions = ['start', 'middle', 'end'],
          expectedDxs = [4, 0, -4]
        lines.each(function(d, i) {
          var text = d3.select(this).select('text'),
            textAnchor = text.attr('text-anchor'),
            dx = text.attr('dx')
          expect(textAnchor).toBe(expectedPositions[i])
          expect(+dx).toBe(expectedDxs[i])
        })
      })

      describe('three gridlines', function() {
        beforeAll(function() {
          args = {
            data: {
              columns: [['data1', 10, 200, 100, 400, 150, 250]]
            },
            axis: {
              rotated: true
            },
            grid: {
              y: {
                lines: [
                  {
                    value: 30,
                    text: 'Label 30',
                    position: 'start'
                  },
                  {
                    value: 145,
                    text: 'Label 145',
                    position: 'middle'
                  },
                  { value: 225, text: 'Label 225' }
                ]
              }
            }
          }
        })

        it('should show 3 grid lines', function() {
          expect(
            chart.internal.main
              .selectAll('.c3-ygrid-lines .c3-ygrid-line')
              .size()
          ).toBe(3)
        })

        it('should locate grid lines properly', function() {
          var lines = chart.internal.main.selectAll(
              '.c3-ygrid-lines .c3-ygrid-line'
            ),
            expectedX1s = [75, 220, 321]
          lines.each(function(d, i) {
            var x1 = d3
              .select(this)
              .select('line')
              .attr('x1')
            expect(x1).toBeCloseTo(expectedX1s[i], -2)
          })
        })

        it('should locate grid texts properly', function() {
          var lines = chart.internal.main.selectAll(
              '.c3-ygrid-lines .c3-ygrid-line'
            ),
            expectedPositions = ['start', 'middle', 'end'],
            expectedDxs = [4, 0, -4]
          lines.each(function(d, i) {
            var text = d3.select(this).select('text'),
              textAnchor = text.attr('text-anchor'),
              dx = text.attr('dx')
            expect(textAnchor).toBe(expectedPositions[i])
            expect(+dx).toBe(expectedDxs[i])
          })
        })
      })
    })
  })

  describe('x grid lines', function() {
    describe('position', function() {
      beforeAll(function() {
        // 'should have correct height',
        args = {
          data: {
            columns: [['data1', 30, 200, 100, 400]]
          },
          grid: {
            x: {
              lines: [
                {
                  value: 1,
                  text: 'Label 1',
                  position: 'start'
                },
                {
                  value: 2,
                  text: 'Label 2',
                  position: 'middle'
                },
                { value: 3, text: 'Label 3' }
              ]
            }
          }
        }
      })

      it('should show 3 grid lines', function() {
        expect(
          chart.internal.main.selectAll('.c3-xgrid-lines .c3-xgrid-line').size()
        ).toBe(3)
      })

      it('should locate grid lines properly', function() {
        var lines = chart.internal.main.selectAll(
            '.c3-xgrid-lines .c3-xgrid-line'
          ),
          expectedX1s = [202, 397, 593]
        lines.each(function(d, i) {
          var x1 = d3
            .select(this)
            .select('line')
            .attr('x1')
          expect(x1).toBeCloseTo(expectedX1s[i], -2)
        })
      })

      it('should locate grid texts properly', function() {
        var lines = chart.internal.main.selectAll(
            '.c3-xgrid-lines .c3-xgrid-line'
          ),
          expectedPositions = ['start', 'middle', 'end'],
          expectedDxs = [4, 0, -4]
        lines.each(function(d, i) {
          var text = d3.select(this).select('text'),
            textAnchor = text.attr('text-anchor'),
            dx = text.attr('dx')
          expect(textAnchor).toBe(expectedPositions[i])
          expect(+dx).toBe(expectedDxs[i])
        })
      })

      describe('three grid lines', function() {
        beforeAll(function() {
          args = {
            data: {
              columns: [['data1', 30, 200, 100, 400]]
            },
            axis: {
              rotated: true
            },
            grid: {
              x: {
                lines: [
                  {
                    value: 1,
                    text: 'Label 1',
                    position: 'start'
                  },
                  {
                    value: 2,
                    text: 'Label 2',
                    position: 'middle'
                  },
                  { value: 3, text: 'Label 3' }
                ]
              }
            }
          }
        })

        it('should show 3 grid lines', function() {
          expect(
            chart.internal.main
              .selectAll('.c3-xgrid-lines .c3-xgrid-line')
              .size()
          ).toBe(3)
        })

        it('should locate grid lines properly', function() {
          var lines = chart.internal.main.selectAll(
              '.c3-xgrid-lines .c3-xgrid-line'
            ),
            expectedY1s = [144, 283, 421]
          lines.each(function(d, i) {
            var y1 = d3
              .select(this)
              .select('line')
              .attr('y1')
            expect(y1).toBeCloseTo(expectedY1s[i], -2)
          })
        })

        it('should locate grid texts properly', function() {
          var lines = chart.internal.main.selectAll(
              '.c3-xgrid-lines .c3-xgrid-line'
            ),
            expectedPositions = ['start', 'middle', 'end'],
            expectedDxs = [4, 0, -4]
          lines.each(function(d, i) {
            var text = d3.select(this).select('text'),
              textAnchor = text.attr('text-anchor'),
              dx = text.attr('dx')
            expect(textAnchor).toBe(expectedPositions[i])
            expect(+dx).toBe(expectedDxs[i])
          })
        })
      })
    })

    describe('with padding.top', function() {
      describe('should have correct height', function() {
        beforeAll(function() {
          args = {
            data: {
              columns: [['data1', 30, 200, 100, 400]]
            },
            grid: {
              x: {
                lines: [{ value: 3, text: 'Label 3' }]
              }
            },
            padding: {
              top: 50
            }
          }
        })

        it('should show x grid lines', function() {
          var lines = chart.internal.main.select(
              '.c3-xgrid-lines .c3-xgrid-line'
            ),
            expectedX1 = 593,
            expectedText = ['Label 3']
          lines.each(function(id, i) {
            var line = d3.select(this),
              l = line.select('line'),
              t = line.select('text')
            expect(+l.attr('x1')).toBeCloseTo(expectedX1, -2)
            expect(t.text()).toBe(expectedText[i])
          })
        })
      })
    })

    describe('on category axis', function() {
      beforeAll(function() {
        args = {
          data: {
            x: 'x',
            columns: [
              ['x', 'a', 'b', 'c', 'd'],
              ['data1', 30, 200, 100, 400]
            ]
          },
          axis: {
            x: {
              type: 'category'
            }
          },
          grid: {
            x: {
              lines: [
                { value: 3, text: 'Label 3' },
                { value: 'a', text: 'Label a' }
              ]
            }
          }
        }
      })

      it('should show x grid lines', function() {
        var lines = chart.internal.main.selectAll(
            '.c3-xgrid-lines .c3-xgrid-line'
          ),
          expectedX1 = [515, 74],
          expectedText = ['Label 3', 'Label a']
        lines.each(function(id, i) {
          var line = d3.select(this),
            l = line.select('line'),
            t = line.select('text')
          expect(+l.attr('x1')).toBeCloseTo(expectedX1[i], -2)
          expect(t.text()).toBe(expectedText[i])
        })
      })
    })
  })
})