feat(shape.line): Add a line_classes option

[julien]

Details

This option allows lines to be customized with an extra css class, and works like the color_pattern option.

Example

var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ]
  },
  line: {
    classes: [
	"line-class-1",
        "line-class-2"
     ]
   },
  bindto: "#chart"
});

[coveralls]

Changes Unknown when pulling b0a3038 on julien:line-classes into ** on naver:master**.

[netil]

The parameter value should be set as [line.classes]. Within square bracket, default value(which is undefined) should be set.

[netil]

Also plz add example code for this option :)

[netil]

Good job! I have some question about it.

Q1

There is already an option to set classes on data.
Is not directly setting class to line, but it can be used with that purposes.

• https://naver.github.io/billboard.js/release/latest/doc/Options.html#.data:classes

Let suppose styling for line with example code below.

bb.generate({
	data: {
		columns: [
			["data1", 30, 200, 100, 400, 150, 250],
			["data2", 50, 20, 10, 0, 15, 25]
		],
        types: {
			data1: "bar"
        },
		classes: {
			data1: "data1-class",
			data2: "data2-class"
		}
	}
});

I can style it with:

.data2-class .bb-chart-line path {
    stroke-width: 2px;
}

Using with the line.classes will looks like:

bb.generate({
	data: {
		columns: [
			["data1", 30, 200, 100, 400, 150, 250],
			["data2", 50, 20, 10, 0, 15, 25]
		],
        types: {
			data1: "bar"
        }
	},
    line: {
        classes: [
			"line-class-1"
		]
    }
});

.line-class-1 {
    stroke-width: 2px;
}

I know that this can be more simpler than the prior example, but what is the necessity or use case of this new option, whereas with data.classes can have same effect?

Q2

Isn't should be more accurate pointing exact line(data)?
Class values are array not indicating exactly which data will have which class.

For example, the applied value will vary depend on the data's type.

bb.generate({
	data: {
		columns: [
			["data1", 30, 200, 100, 400, 150, 250],  // line-class-1
			["data2", 50, 20, 10, 0, 15, 25]  // line-class-2
		]
	},
	line: {
		classes: [
			"line-class-1",
			"line-class-2"
		]
	}
});

If change data1 type to bar, line-class-1 will be set to data2. Maybe it can be confusing.

    data: {
		columns: [
			["data1", 30, 200, 100, 400, 150, 250],
			["data2", 50, 20, 10, 0, 15, 25]  // line-class-1
		],
        types: {
			data1: "bar"
        },
    }

What about indicating exactly?

    data: {
		columns: [
			["data1", 30, 200, 100, 400, 150, 250],
			["data2", 50, 20, 10, 0, 15, 25]  // line-class-1
		]
    },
    line: {
        classes: {
            data2: "line-class-1"
        }
    }

[julien]

Thanks for the feedback @netil!

About your concerns,

Q1

I had seen that the data.classes option lets one style lines as wanted.
To test this, I used this code:

var chart = bb.generate({
  data: {
    columns: [
      ["data1",  30, 200, 100, 400, 150, 250],
      ["data2",  50,  20,  10,  40,  15,  25],
      ["data3", 150,  10,  80,  20, 150, 200],
      ["data4",  10, 100, 240,  60, 210,  40]
    ],
    classes: {
      "data1": "line-dashed-2-2",
      "data2": "line-dashed-2-3",
      "data3": "line-dashed-2-4",
      "data4": "line-dashed-3-2"
    },
  },
  bindto: "#chart"
});

The only slight issue is that if I change data1 to something else, I have to change the corresponding key in the classes object.

I think it would be nice to have the option to assign additional css classes for lines, a bit like how the color_pattern option works. As an example let's consider the following code:

var chart = bb.generate({
  data: {
    columns: [
      ["data1",  30, 200, 100, 400, 150, 250],
      ["data2",  50,  20,  10,  40,  15,  25],
      ["data3", 150,  10,  80,  20, 150, 200],
      ["data4",  10, 100, 240,  60, 210,  40]
    ],
    classes: {
      "data1": "line-dashed-2-2",
      "data2": "line-dashed-2-3",
      "data3": "line-dashed-2-4",
      "data4": "line-dashed-3-2"
    },
  },
  color: {
    pattern: [
      '#cccccc',         // <-- This is what I want to point out
      '#eeeeee',
      '#666666',
      '#ededed'
    ]
  },
  bindto: "#chart"
});

The color.pattern option let's one customize the colors of the lines, regardless of the name of the keys used in the data.columns option so I thought having the same possibility for line css classes would be nice, without breaking any existing funcionality and not adding too much complexity.

As an example use case, let's imagine that you'd want your charts to always look the same regardless of the key names used in the data.columns option, like in this image:

Q2

This is something I had not thought about.
I guess that if the types option is used as well as the line.classes option, as in this example:

var chart = bb.generate({
  data: {
    columns: [
      ["data1", 30, 200, 100, 400, 150, 250],
      ["data2", 50, 20, 10, 40, 15, 25]
    ],
    types: {
      data1: "bar"
    }
  },
  line: {
    classes: [
      "line-class-1"
    ]
  },
  bindto: "#chart"
});

Then, in this case, the line.classes would only be applied the the actual "lines" which correspond to the data2 column.

Tell me if I clarified your concerns and if you think this could be a valid solution.

Thanks!

[netil]

Also plz add example code for this option :)

[netil]

Understood @julien and thanks for the detail explanation.
I requested some doc changes :)

[julien]

@netil I updated the doc comment and added an example for the demos.
Thanks!

[coveralls]

Changes Unknown when pulling 153fe66 on julien:line-classes into ** on naver:master**.

[netil]

Thanks again @julien for the contribution!

[netil]

Una cosita más @julien. No me di cuenta de que eras de España. :)
Estamos archivando los autores que contribuyeron en el siguiente listado:

• https://github.com/naver/billboard.js/blob/master/AUTHORS.txt

Si no te molesta que aparezca en la lista, mandanos tu información(nombre y el correo).

Gracias por tus esfuerzos!

[julien]

@netil de nada, un placer poder contribuir a este proyecto.
Mando otra pull request con mi informacíon.
Saludos.