Skip to content

C
c3-closed
Commit 4eb2dd13 authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Add title.position/title.padding and remove title.x/title.y - #1025 #1021

parent cf7ea12b
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 55 deletions
c3.css
View file @ 4eb2dd13
......@@ -90,6 +90,10 @@
stroke: lightgray;
stroke-width: 1; }
/*-- Title --*/
.c3-title {
font: 14px sans-serif; }
/*-- Tooltip --*/
.c3-tooltip-container {
z-index: 10; }
......
c3.js
View file @ 4eb2dd13
......@@ -1213,8 +1213,13 @@
tooltip_init_position: {top: '0px', left: '50px'},
// title
title_text: undefined,
title_x: 0,
title_y: 0
title_padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
title_position: 'top-center',
};
Object.keys(this.additionalConfig).forEach(function (key) {
......@@ -2685,11 +2690,6 @@
return Math.max(0, this.xAxis.tickInterval());
};
c3_chart_internal_fn.getTitlePadding = function() {
var $$ = this;
return $$.config.title_y + $$.title.node().getBBox().height;
};
c3_chart_internal_fn.getShapeIndices = function (typeFilter) {
var $$ = this, config = $$.config,
indices = {}, i = 0, j, k;
......@@ -4168,17 +4168,34 @@
var $$ = this;
$$.title = $$.svg.append("text")
.text($$.config.title_text)
.attr("class", "c3-chart-title")
.attr("x", $$.config.title_x)
.attr("y", $$.config.title_y);
.attr("class", $$.CLASS.title);
};
c3_chart_internal_fn.redrawTitle = function () {
var $$ = this;
$$.title
.attr("x", $$.config.title_x)
.attr("y", $$.config.title_y || $$.title.node().getBBox().height);
.attr("x", $$.xForTitle.bind($$))
.attr("y", $$.yForTitle.bind($$));
};
c3_chart_internal_fn.xForTitle = function () {
var $$ = this, config = $$.config, position = config.title_position || 'left', x;
if (position.indexOf('right') >= 0) {
x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right;
} else if (position.indexOf('center') >= 0) {
x = ($$.currentWidth - $$.title.node().getBBox().width) / 2;
} else { // left
x = config.title_padding.left;
}
return x;
};
c3_chart_internal_fn.yForTitle = function () {
var $$ = this;
return $$.config.title_padding.top + $$.title.node().getBBox().height;
};
c3_chart_internal_fn.getTitlePadding = function() {
var $$ = this;
return $$.yForTitle() + $$.config.title_padding.bottom;
};
function Axis(owner) {
API.call(this, owner);
}
......@@ -5667,6 +5684,7 @@
defocused: 'c3-defocused',
region: 'c3-region',
regions: 'c3-regions',
title: 'c3-title',
tooltipContainer: 'c3-tooltip-container',
tooltip: 'c3-tooltip',
tooltipName: 'c3-tooltip-name',
......
c3.min.css
View file @ 4eb2dd13
.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}
\ No newline at end of file
.c3 svg{font:10px sans-serif}.c3 line,.c3 path{fill:none;stroke:#000}.c3 text{-webkit-user-select:none;-moz-user-select:none;user-select:none}.c3-bars path,.c3-event-rect,.c3-legend-item-tile,.c3-xgrid-focus,.c3-ygrid{shape-rendering:crispEdges}.c3-chart-arc path{stroke:#fff}.c3-chart-arc text{fill:#fff;font-size:13px}.c3-grid line{stroke:#aaa}.c3-grid text{fill:#aaa}.c3-xgrid,.c3-ygrid{stroke-dasharray:3 3}.c3-text.c3-empty{fill:gray;font-size:2em}.c3-line{stroke-width:1px}.c3-circle._expanded_{stroke-width:1px;stroke:#fff}.c3-selected-circle{fill:#fff;stroke-width:2px}.c3-bar{stroke-width:0}.c3-bar._expanded_{fill-opacity:.75}.c3-target.c3-focused{opacity:1}.c3-target.c3-focused path.c3-line,.c3-target.c3-focused path.c3-step{stroke-width:2px}.c3-target.c3-defocused{opacity:.3!important}.c3-region{fill:#4682b4;fill-opacity:.1}.c3-brush .extent{fill-opacity:.1}.c3-legend-item{font-size:12px}.c3-legend-item-hidden{opacity:.15}.c3-legend-background{opacity:.75;fill:#fff;stroke:#d3d3d3;stroke-width:1}.c3-title{font:14px sans-serif}.c3-tooltip-container{z-index:10}.c3-tooltip{border-collapse:collapse;border-spacing:0;background-color:#fff;empty-cells:show;-webkit-box-shadow:7px 7px 12px -9px #777;-moz-box-shadow:7px 7px 12px -9px #777;box-shadow:7px 7px 12px -9px #777;opacity:.9}.c3-tooltip tr{border:1px solid #CCC}.c3-tooltip th{background-color:#aaa;font-size:14px;padding:2px 5px;text-align:left;color:#FFF}.c3-tooltip td{font-size:13px;padding:3px 6px;background-color:#fff;border-left:1px dotted #999}.c3-tooltip td>span{display:inline-block;width:10px;height:10px;margin-right:6px}.c3-tooltip td.value{text-align:right}.c3-area{stroke-width:0;opacity:.2}.c3-chart-arcs-title{dominant-baseline:middle;font-size:1.3em}.c3-chart-arcs .c3-chart-arcs-background{fill:#e0e0e0;stroke:none}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max,.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}
\ No newline at end of file
c3.min.js
View file @ 4eb2dd13
This source diff could not be displayed because it is too large. You can view the blob instead.
spec/title-spec.js
View file @ 4eb2dd13
describe('c3 chart title', function () {
'use strict';
var chart, config;
describe('when given a title config option', function () {
describe('with no x or y value', function () {
describe('with no padding and no position', function () {
beforeEach(function(done) {
config = {
data: {
......@@ -18,20 +20,20 @@ describe('c3 chart title', function () {
});
it('renders the title at the default config position', function () {
var titleEl = d3.select(".c3-chart-title");
expect(titleEl.attr("x")).toEqual('0');
expect(titleEl.attr("y")).toEqual(titleEl.node().getBBox().height.toString());
var titleEl = d3.select(".c3-title");
expect(+titleEl.attr("x")).toBeCloseTo(294, -2);
expect(+titleEl.attr("y")).toEqual(titleEl.node().getBBox().height);
});
it('renders the title text', function () {
var titleEl = d3.select(".c3-chart-title");
var titleEl = d3.select(".c3-title");
expect(titleEl.node().textContent).toEqual('new title');
});
});
describe('with x and y values', function () {
beforeEach(function(done) {
config = {
describe('with padding', function () {
var config, getConfig = function (titlePosition) {
return {
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
......@@ -39,29 +41,58 @@ describe('c3 chart title', function () {
},
title: {
text: 'positioned title',
x: 50,
y: 10
padding: {
top: 20,
right: 30,
bottom: 40,
left: 50
},
position: titlePosition
}
};
chart = window.initChart(chart, config, done);
});
};
it('renders the title at the default config position', function () {
var titleEl = d3.select(".c3-chart-title");
expect(titleEl.attr("x")).toEqual('50');
expect(titleEl.attr("y")).toEqual('10');
describe('and position center', function () {
beforeEach(function(done) {
config = getConfig('top-center');
chart = window.initChart(chart, config, done);
});
it('renders the title at the default config position', function () {
var titleEl = d3.select(".c3-title");
expect(+titleEl.attr("x")).toBeCloseTo(275, -2);
expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
});
it('adds the correct amount of padding to fit the title', function() {
expect(chart.internal.getCurrentPaddingTop()).toEqual(
config.title.padding.top + d3.select('.c3-title').node().getBBox().height + config.title.padding.bottom
);
});
});
it('renders the title text', function () {
var titleEl = d3.select(".c3-chart-title");
expect(titleEl.node().textContent).toEqual('positioned title');
describe('and position left', function () {
beforeEach(function(done) {
config = getConfig('top-left');
chart = window.initChart(chart, config, done);
});
it('renders the title at the default config position', function () {
var titleEl = d3.select(".c3-title");
expect(+titleEl.attr("x")).toBeCloseTo(50, -1);
expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
});
});
it('adds the correct amount of padding to fit the title', function() {
expect(chart.internal.getCurrentPaddingTop()).toEqual(
config.title.y + d3.select('.c3-chart-title').node().getBBox().height
);
describe('and position right', function () {
beforeEach(function(done) {
config = getConfig('top-right');
chart = window.initChart(chart, config, done);
});
it('renders the title at the default config position', function () {
var titleEl = d3.select(".c3-title");
expect(+titleEl.attr("x")).toBeCloseTo(520, -2);
expect(+titleEl.attr("y")).toBeCloseTo(34, -1);
});
});
});
});
});
\ No newline at end of file
});
src/class.js
View file @ 4eb2dd13
......@@ -26,6 +26,7 @@ var CLASS = c3_chart_internal_fn.CLASS = {
defocused: 'c3-defocused',
region: 'c3-region',
regions: 'c3-regions',
title: 'c3-title',
tooltipContainer: 'c3-tooltip-container',
tooltip: 'c3-tooltip',
tooltipName: 'c3-tooltip-name',
......
src/config.js
View file @ 4eb2dd13
......@@ -194,8 +194,13 @@ c3_chart_internal_fn.getDefaultConfig = function () {
tooltip_init_position: {top: '0px', left: '50px'},
// title
title_text: undefined,
title_x: 0,
title_y: 0
title_padding: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
title_position: 'top-center',
};
Object.keys(this.additionalConfig).forEach(function (key) {
......
src/scss/main.scss
View file @ 4eb2dd13
......@@ -46,6 +46,10 @@
@import 'legend';
/*-- Title --*/
@import 'title';
/*-- Tooltip --*/
@import 'tooltip';
......
src/scss/title.scss 0 → 100644
View file @ 4eb2dd13
.c3-title {
font: 14px sans-serif;
}
src/size.js
View file @ 4eb2dd13
......@@ -107,8 +107,3 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
c3_chart_internal_fn.getEventRectWidth = function () {
return Math.max(0, this.xAxis.tickInterval());
};
c3_chart_internal_fn.getTitlePadding = function() {
var $$ = this;
return $$.config.title_y + $$.title.node().getBBox().height;
};
src/title.js
View file @ 4eb2dd13
......@@ -2,14 +2,30 @@ c3_chart_internal_fn.initTitle = function () {
var $$ = this;
$$.title = $$.svg.append("text")
.text($$.config.title_text)
.attr("class", "c3-chart-title")
.attr("x", $$.config.title_x)
.attr("y", $$.config.title_y);
.attr("class", $$.CLASS.title);
};
c3_chart_internal_fn.redrawTitle = function () {
var $$ = this;
$$.title
.attr("x", $$.config.title_x)
.attr("y", $$.config.title_y || $$.title.node().getBBox().height);
};
\ No newline at end of file
.attr("x", $$.xForTitle.bind($$))
.attr("y", $$.yForTitle.bind($$));
};
c3_chart_internal_fn.xForTitle = function () {
var $$ = this, config = $$.config, position = config.title_position || 'left', x;
if (position.indexOf('right') >= 0) {
x = $$.currentWidth - $$.title.node().getBBox().width - config.title_padding.right;
} else if (position.indexOf('center') >= 0) {
x = ($$.currentWidth - $$.title.node().getBBox().width) / 2;
} else { // left
x = config.title_padding.left;
}
return x;
};
c3_chart_internal_fn.yForTitle = function () {
var $$ = this;
return $$.config.title_padding.top + $$.title.node().getBBox().height;
};
c3_chart_internal_fn.getTitlePadding = function() {
var $$ = this;
return $$.yForTitle() + $$.config.title_padding.bottom;
};
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment