playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

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

pull/1147/head
Masayuki Tanaka 10 years ago
parent
cf7ea12b2d
commit
4eb2dd13ff
11 changed files with 134 additions and 57 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      c3.css
  2. 44
      c3.js
  3. 2
      c3.min.css
  4. 10
      c3.min.js
  5. 79
      spec/title-spec.js
  6. 1
      src/class.js
  7. 9
      src/config.js
  8. 4
      src/scss/main.scss
  9. 3
      src/scss/title.scss
  10. 5
      src/size.js
  11. 30
      src/title.js

4
c3.css
Unescape View File

@ -90,6 +90,10 @@
stroke: lightgray;
stroke-width: 1; }
/*-- Title --*/
.c3-title {
font: 14px sans-serif; }
/*-- Tooltip --*/
.c3-tooltip-container {
z-index: 10; }

44
c3.js
Unescape View File

@ -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',

2
c3.min.css vendored
Unescape View File

@ -1 +1 @@
.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}
.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}

10
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

79
spec/title-spec.js
Unescape View File

@ -1,8 +1,10 @@
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);
});
});
});
});
});
});

1
src/class.js
Unescape View File

@ -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',

9
src/config.js
Unescape View File

@ -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) {

4
src/scss/main.scss
Unescape View File

@ -46,6 +46,10 @@
@import 'legend';
/*-- Title --*/
@import 'title';
/*-- Tooltip --*/
@import 'tooltip';

3
src/scss/title.scss
Unescape View File

@ -0,0 +1,3 @@
.c3-title {
font: 14px sans-serif;
}

5
src/size.js
Unescape View File

@ -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;
};

30
src/title.js
Unescape View File

@ -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);
};
.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;
};

Write Preview
Loading…
Cancel
Save