Support custom font sizes

plottable.css

@@ -112,11 +112,84 @@
   fill: #32313F;
 }
 
-.plottable .bar-label-text-area text,
-.plottable .scatter-label-text-area text {
+.plottable .tick-label-container.label-12 text,
+.plottable .bar-label-text-area.label-12 text,
+.plottable .scatter-label-text-area.label-12 text {
   font-size: 12px;
 }
 
+.plottable .tick-label-container.label-13 text,
+.plottable .bar-label-text-area.label-13 text,
+.plottable .scatter-label-text-area.label-13 text {
+  font-size: 13px;
+}
+
+.plottable .tick-label-container.label-14 text,
+.plottable .bar-label-text-area.label-14 text,
+.plottable .scatter-label-text-area.label-14 text {
+  font-size: 14px;
+}
+
+.plottable .tick-label-container.label-15 text,
+.plottable .bar-label-text-area.label-15 text,
+.plottable .scatter-label-text-area.label-15 text {
+  font-size: 15px;
+}
+
+.plottable .tick-label-container.label-16 text,
+.plottable .bar-label-text-area.label-16 text,
+.plottable .scatter-label-text-area.label-16 text {
+  font-size: 16px;
+}
+
+.plottable .tick-label-container.label-17 text,
+.plottable .bar-label-text-area.label-17 text,
+.plottable .scatter-label-text-area.label-17 text {
+  font-size: 17px;
+}
+
+.plottable .tick-label-container.label-18 text,
+.plottable .bar-label-text-area.label-18 text,
+.plottable .scatter-label-text-area.label-18 text {
+  font-size: 18px;
+}
+
+.plottable .tick-label-container.label-19 text,
+.plottable .bar-label-text-area.label-19 text,
+.plottable .scatter-label-text-area.label-19 text {
+  font-size: 19px;
+}
+
+.plottable .tick-label-container.label-20 text,
+.plottable .bar-label-text-area.label-20 text,
+.plottable .scatter-label-text-area.label-20 text {
+  font-size: 20px;
+}
+
+.plottable .tick-label-container.label-21 text,
+.plottable .bar-label-text-area.label-21 text,
+.plottable .scatter-label-text-area.label-21 text {
+  font-size: 21px;
+}
+
+.plottable .tick-label-container.label-22 text,
+.plottable .bar-label-text-area.label-22 text,
+.plottable .scatter-label-text-area.label-22 text {
+  font-size: 22px;
+}
+
+.plottable .tick-label-container.label-23 text,
+.plottable .bar-label-text-area.label-23 text,
+.plottable .scatter-label-text-area.label-23 text {
+  font-size: 23px;
+}
+
+.plottable .tick-label-container.label-24 text,
+.plottable .bar-label-text-area.label-24 text,
+.plottable .scatter-label-text-area.label-24 text {
+  font-size: 24px;
+}
+
 .plottable .label-area text {
   fill: #32313F;
   font-size: 14px;

quicktests/overlaying/tests/functional/bar_plot_label_font_size.js

@@ -0,0 +1,82 @@
+function makeData() {
+  "use strict";
+
+  return [
+    { x: 0, y: 1 },
+    { x: 1, y: 4 },
+    { x: -3, y: 3 },
+    { x: 2, y: 9 },
+    { x: -6, y: 10 },
+    { x: 4, y: -3 },
+    { x: 5, y: -9 },
+    { x: 7, y: -10 },
+  ];
+}
+
+function run(svg, data, Plottable) {
+  "use strict";
+
+  const slider = $('<input type="range" min=12 max=24 value=12 />');
+  const indicator = $("<pre>axis.tickLabelFontSize(12)</pre>");
+  $(svg.node()).parent().prepend(slider);
+  $(svg.node()).parent().prepend(indicator);
+
+  const dataset1 = new Plottable.Dataset(data);
+  const dataset2 = new Plottable.Dataset(data);
+
+  const xScale1 = new Plottable.Scales.Linear();
+  const yScale1 = new Plottable.Scales.Linear();
+  const verticalBarPlot = new Plottable.Plots.Bar("vertical")
+    .addDataset(dataset1)
+    .x((d) => d.x, xScale1)
+    .y((d) => d.y, yScale1)
+    .labelsEnabled(true, "middle")
+    .labelFontSize(12);
+  new Plottable.Interactions.PanZoom(xScale1, yScale1).attachTo(verticalBarPlot);
+
+  const xScale2 = new Plottable.Scales.Linear();
+  const yScale2 = new Plottable.Scales.Linear();
+  const verticalStackedBarPlot = new Plottable.Plots.StackedBar("vertical")
+    .addDataset(dataset1)
+    .addDataset(dataset2)
+    .x((d) => d.x, xScale2)
+    .y((d) => d.y, yScale2)
+    .labelsEnabled(true, "middle")
+    .labelFontSize(12);
+  new Plottable.Interactions.PanZoom(xScale2, yScale2).attachTo(verticalStackedBarPlot);
+
+  const xScale3 = new Plottable.Scales.Linear();
+  const yScale3 = new Plottable.Scales.Linear();
+  const horizontalBarPlot = new Plottable.Plots.Bar("horizontal")
+    .addDataset(dataset1)
+    .x((d) => d.x, xScale3)
+    .y((d) => d.y, yScale3)
+    .labelsEnabled(true, "middle")
+    .labelFontSize(12);
+  new Plottable.Interactions.PanZoom(xScale3, yScale3).attachTo(horizontalBarPlot);
+
+  const xScale4 = new Plottable.Scales.Linear();
+  const yScale4 = new Plottable.Scales.Linear();
+  const horizontalStackedBarPlot = new Plottable.Plots.StackedBar("horizontal")
+    .addDataset(dataset1)
+    .addDataset(dataset2)
+    .x((d) => d.x, xScale4)
+    .y((d) => d.y, yScale4)
+    .labelsEnabled(true, "middle")
+    .labelFontSize(12);
+  new Plottable.Interactions.PanZoom(xScale4, yScale4).attachTo(horizontalStackedBarPlot);
+
+  slider.on("input", function() {
+    indicator.text("axis.tickLabelFontSize(" + this.value + ")");
+    verticalBarPlot.labelFontSize(this.valueAsNumber);
+    verticalStackedBarPlot.labelFontSize(this.valueAsNumber);
+    horizontalBarPlot.labelFontSize(this.valueAsNumber);
+    horizontalStackedBarPlot.labelFontSize(this.valueAsNumber);
+  });
+
+  const table = new Plottable.Components.Table([
+    [verticalBarPlot, verticalStackedBarPlot],
+    [horizontalBarPlot, horizontalStackedBarPlot],
+  ]);
+  table.renderTo(svg);
+}

quicktests/overlaying/tests/functional/category_axis_label_font_size.js

@@ -0,0 +1,49 @@
+function makeData() {
+  "use strict";
+
+  return [
+    {x: "Jan 2015", y: -15},
+    {x: "Jan 2016", y: 10},
+    {x: "Jan 2017", y: 25},
+    {x: "Jan 2018", y: 100},
+  ];
+}
+
+function run(svg, data, Plottable) {
+  "use strict";
+
+  const slider = $('<input type="range" min=12 max=24 value=12 />');
+  const indicator = $("<pre>axis.tickLabelFontSize(12)</pre>");
+  $(svg.node()).parent().prepend(slider);
+  $(svg.node()).parent().prepend(indicator);
+
+  const domain = data.map(function(dataPoint) { return dataPoint.x; });
+  const xScale = new Plottable.Scales.Category().domain(domain);
+  const xAxisTop = new Plottable.Axes.Category(xScale, "top")
+    .tickLabelFontSize(12)
+    .margin(50);
+  const xAxisBottom = new Plottable.Axes.Category(xScale, "bottom")
+    .tickLabelFontSize(12)
+    .margin(50);
+  const yScale = new Plottable.Scales.Linear();
+
+  const dataset = new Plottable.Dataset(data);
+  const plot = new Plottable.Plots.Bar()
+    .addDataset(dataset)
+    .x(function(d) { return d.x; }, xScale)
+    .y(function(d) { return d.y; }, yScale);
+  new Plottable.Interactions.PanZoom(xScale).attachTo(plot);
+
+  slider.on("input", function() {
+    indicator.text("axis.tickLabelFontSize(" + this.value + ")");
+    xAxisTop.tickLabelFontSize(this.valueAsNumber);
+    xAxisBottom.tickLabelFontSize(this.valueAsNumber);
+  });
+
+  const table = new Plottable.Components.Table([
+    [null, xAxisTop],
+    [null, plot],
+    [null, xAxisBottom],
+  ]);
+  table.renderTo(svg);
+}

quicktests/overlaying/tests/functional/numeric_axis_label_font_size.js

@@ -0,0 +1,51 @@
+function makeData() {
+  "use strict";
+
+  return makeRandomData(8);
+}
+
+function run(svg, data, Plottable) {
+  "use strict";
+
+  const slider = $('<input type="range" min=12 max=24 value=12 />');
+  const indicator = $("<pre>axis.tickLabelFontSize(12)</pre>");
+  $(svg.node()).parent().prepend(slider);
+  $(svg.node()).parent().prepend(indicator);
+
+  const xScale = new Plottable.Scales.Linear();
+  const xAxisTop = new Plottable.Axes.Numeric(xScale, "top")
+    .tickLabelFontSize(12)
+    .margin(50);
+  const xAxisBottom = new Plottable.Axes.Numeric(xScale, "bottom")
+    .tickLabelFontSize(12)
+    .margin(50);
+  const yScale = new Plottable.Scales.Linear();
+  const yAxisLeft = new Plottable.Axes.Numeric(yScale, "left")
+    .tickLabelFontSize(12)
+    .margin(50);
+  const yAxisRight = new Plottable.Axes.Numeric(yScale, "right")
+    .tickLabelFontSize(12)
+    .margin(50);
+
+  const dataset = new Plottable.Dataset(data);
+  const plot = new Plottable.Plots.Scatter()
+    .addDataset(dataset)
+    .x(function(d) { return d.x; }, xScale)
+    .y(function(d) { return d.y; }, yScale);
+  new Plottable.Interactions.PanZoom(xScale, yScale).attachTo(plot);
+
+  slider.on("input", function() {
+    indicator.text("axis.tickLabelFontSize(" + this.value + ")");
+    xAxisTop.tickLabelFontSize(this.valueAsNumber);
+    xAxisBottom.tickLabelFontSize(this.valueAsNumber);
+    yAxisLeft.tickLabelFontSize(this.valueAsNumber);
+    yAxisRight.tickLabelFontSize(this.valueAsNumber);
+  });
+
+  const table = new Plottable.Components.Table([
+    [null, xAxisTop, null],
+    [yAxisLeft, plot, yAxisRight],
+    [null, xAxisBottom, null],
+  ]);
+  table.renderTo(svg);
+}

quicktests/overlaying/tests/functional/scatter_plot_label_font_size.js

@@ -0,0 +1,41 @@
+function makeData() {
+  "use strict";
+
+  return [
+    { x: 0, y: 1, label: "Cat" },
+    { x: 1, y: 4, label: "Dog" },
+    { x: -3, y: 3, label: "Rattlesnake" },
+    { x: 2, y: 9, label: "A multi-word label" },
+  ];
+}
+
+function run(svg, data, Plottable) {
+  "use strict";
+
+  const slider = $('<input type="range" min=12 max=24 value=12 />');
+  const indicator = $("<pre>axis.tickLabelFontSize(12)</pre>");
+  $(svg.node()).parent().prepend(slider);
+  $(svg.node()).parent().prepend(indicator);
+
+  const xScale = new Plottable.Scales.Linear();
+  const yScale = new Plottable.Scales.Linear();
+  var dataset = new Plottable.Dataset(data);
+  const plot = new Plottable.Plots.Scatter()
+    .addDataset(dataset)
+    .x((d) => d.x, xScale)
+    .y((d) => d.y, yScale)
+    .size(50)
+    .labelsEnabled(true)
+    .labelFontSize(12);
+  new Plottable.Interactions.PanZoom(xScale, yScale).attachTo(plot);
+
+  slider.on("input", function() {
+    indicator.text("axis.tickLabelFontSize(" + this.value + ")");
+    plot.labelFontSize(this.valueAsNumber);
+  });
+
+  const table = new Plottable.Components.Table([
+    [plot],
+  ]);
+  table.renderTo(svg);
+}