Browse Source

Fix conflict

pull/2246/head
Masayuki Tanaka 7 years ago
parent
commit
6523615e7d
  1. 2
      .bmp.yml
  2. 33
      MAINTAINANCE.md
  3. 2
      README.md
  4. 6
      c3.css
  5. 2277
      c3.js
  6. 2
      c3.min.css
  7. 3
      c3.min.js
  8. 2
      component.json
  9. 3
      htdocs/index.html
  10. 32
      htdocs/samples/chart_multi_arc_gauge.html
  11. 7784
      package-lock.json
  12. 13
      package.json
  13. 4
      rollup.config.js
  14. 95
      spec/arc-spec.js
  15. 64
      spec/legend-spec.js
  16. 7
      src/api.chart.js
  17. 100
      src/arc.js
  18. 1
      src/class.js
  19. 2
      src/config.js
  20. 19
      src/core.js
  21. 4
      src/legend.js
  22. 2
      src/scss/arc.scss
  23. 5
      src/scss/chart.scss
  24. 2
      src/tooltip.js

2
.bmp.yml

@ -1,5 +1,5 @@
---
version: 0.4.18
version: 0.4.21
commit: 'chore(version): bump to v%.%.%'
files:
src/core.js: 'version: "%.%.%"'

33
MAINTAINANCE.md

@ -0,0 +1,33 @@
# Release process
If you don't have `bmp` command installed, first install `bmp` ruby gem:
gem install bmp
When master is ready for the next release, hit the command:
bmp -p
This automatically updates all the version numbers with a new one in the repository.
Then hit the command:
npm run dist
This builds the scripts and stylesheets. Then hit:
bmp -c
This commits all the changes (including the built assets) and git-tags a new version (like v0.4.16):
Then publish it to the npm registry (you need admin access to c3 module):
npm publish
At this point, the new version is available through npm.
Then push master and the tag to github:
git push origin master vX.Y.Z
That's all.

2
README.md

@ -1,6 +1,6 @@
# c3
[![CircleCI](https://circleci.com/gh/c3js/c3.svg?style=svg)](https://circleci.com/gh/c3js/c3)
[![CircleCI](https://circleci.com/gh/c3js/c3.svg?style=shield)](https://circleci.com/gh/c3js/c3)
[![license](http://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/c3js/c3/blob/master/LICENSE)
[![codecov.io](https://codecov.io/github/c3js/c3/coverage.svg?branch=master)](https://codecov.io/github/c3js/c3?branch=master)
[![Greenkeeper badge](https://badges.greenkeeper.io/c3js/c3.svg)](https://greenkeeper.io/)

6
c3.css

@ -22,6 +22,10 @@
.c3-chart-arc path {
stroke: #fff; }
.c3-chart-arc rect {
stroke: white;
stroke-width: 1; }
.c3-chart-arc text {
fill: #fff;
font-size: 13px; }
@ -151,7 +155,7 @@
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none; }
stroke: #FFF; }
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;

2277
c3.js

File diff suppressed because it is too large Load Diff

2
c3.min.css vendored

@ -1 +1 @@
.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.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:grey;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:1;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{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}
.c3 svg{font:10px sans-serif;-webkit-tap-highlight-color:transparent}.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 rect{stroke:#fff;stroke-width:1}.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:grey;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:1;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:#fff}.c3-chart-arcs .c3-chart-arcs-gauge-unit{fill:#000;font-size:16px}.c3-chart-arcs .c3-chart-arcs-gauge-max{fill:#777}.c3-chart-arcs .c3-chart-arcs-gauge-min{fill:#777}.c3-chart-arc .c3-gauge-value{fill:#000}.c3-chart-arc.c3-target g path{opacity:1}.c3-chart-arc.c3-target.c3-focused g path{opacity:1}

3
c3.min.js vendored

File diff suppressed because one or more lines are too long

2
component.json

@ -2,7 +2,7 @@
"name": "c3",
"repo": "masayuki0812/c3",
"description": "A D3-based reusable chart library",
"version": "0.4.18",
"version": "0.4.21",
"keywords": [],
"dependencies": {
"mbostock/d3": "v3.5.6"

3
htdocs/index.html

@ -76,6 +76,9 @@
<a href="./samples/chart_gauge.html">
Gauge chart with ordinary data
</a>
<a href="./samples/chart_multi_arc_gauge.html">
Gauge chart with multiple arcs
</a>
</div>
</div>
<div class="row">

32
htdocs/samples/chart_multi_arc_gauge.html

@ -0,0 +1,32 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['padded1', 100],
['padded2', 90],
['padded3', 50],
['padded4', 20]
],
type: 'gauge',
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
threshold: {
values: [30, 80, 95]
}
},
size: {
height: 320,
}
});
</script>
</body>
</html>

7784
package-lock.json generated

File diff suppressed because it is too large Load Diff

13
package.json

@ -1,6 +1,6 @@
{
"name": "c3",
"version": "0.4.18",
"version": "0.4.21",
"description": "D3-based reusable chart library",
"main": "c3.js",
"scripts": {
@ -9,7 +9,7 @@
"build": "npm run build:js && npm run build:css",
"build:js": "npm run build:js:rollup && npm run build:js:uglify",
"build:js:rollup": "rollup -c > c3.js",
"build:js:uglify": "uglifyjs c3.js --compress --mangle -o c3.min.js",
"build:js:uglify": "uglifyjs c3.js --compress --mangle --comments -o c3.min.js",
"build:css": "npm run build:css:sass && npm run build:css:min",
"build:css:sass": "node-sass src/scss/main.scss > c3.css",
"build:css:min": "cleancss -o c3.min.css c3.css",
@ -42,11 +42,12 @@
"d3": "~4.12.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-istanbul": "^4.1.4",
"babel-preset-es2015": "^6.24.1",
"babelify": "^7.3.0",
"browserify": "^15.0.0",
"babelify": "^8.0.0",
"browserify": "^16.0.0",
"clean-css-cli": "^4.1.3",
"codecov": "^3.0.0",
"jasmine-core": "^2.3.4",
@ -61,8 +62,8 @@
"node-sass": "^4.5.3",
"node-static": "^0.7.9",
"nodemon": "^1.11.0",
"rollup": "^0.54.0",
"rollup-plugin-babel": "^3.0.0",
"rollup": "^0.57.0",
"rollup-plugin-babel": "^3.0.3",
"uglify-js": "^3.0.15",
"watchify": "^3.9.0"
},

4
rollup.config.js

@ -1,10 +1,12 @@
import babel from 'rollup-plugin-babel';
import pkg from './package.json'
export default {
input: 'src/index.js',
output: {
format: 'umd',
name: 'c3',
format: 'umd',
banner: `/* @license C3.js v${pkg.version} | (c) C3 Team and other contributors | http://c3js.org/ */`
},
plugins: [babel({
presets: [['es2015', {

95
spec/arc-spec.js

@ -198,7 +198,7 @@ describe('c3 chart arc', function () {
.select('g.c3-shapes.c3-shapes-data.c3-arcs.c3-arcs-data')
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
expect(data.attr('d')).toMatch(/M-304,-3\..+A304,304,0,0,1,245\..+,-178\..+L237\..+,-172\..+A294,294,0,0,0,-294,-3\..+Z/);
expect(data.attr('d')).toMatch(/-258.4,-3\..+A258.4,258.4,0,0,1,209\..+,-151\..+L200\..+,-146\..+A248.39999999999998,248.39999999999998,0,0,0,-248.39999999999998,-3\..+Z/);
});
});
@ -229,7 +229,7 @@ describe('c3 chart arc', function () {
.select('path.c3-shape.c3-shape.c3-arc.c3-arc-data');
// This test has bee updated to make tests pass. @TODO double-check this test is accurate.
expect(data.attr('d')).toMatch(/M-221.*?,-2\..+A221.*?,221.*?,0,1,1,-68.*?,210.*?L-65.*?,201.*?A211.*?,211.*?,0,1,0,-211.*?,-2.*?Z/);
expect(data.attr('d')).toMatch(/M-180.*?,-2\..+A180.*?,180.*?,0,1,1,-55.*?,171.*?L-52.*?,161.*?A170.*?,170.*?,0,1,0,-170.*?,-2.*?Z/);
});
describe('with labels use custom text', function() {
@ -269,6 +269,97 @@ describe('c3 chart arc', function () {
});
});
});
describe('with more than one data_column ', function () {
beforeAll(function () {
args = {
data: {
columns: [
['padded1', 100],
['padded2', 90],
['padded3', 50],
['padded4', 20]
],
type: 'gauge'
},
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
threshold: {
values: [30, 80, 95]
}
}
};
});
var arcColor = ['rgb(96, 176, 68)', 'rgb(246, 198, 0)', 'rgb(249, 118, 0)', 'rgb(255, 0, 0)'];
describe('should contain arcs ', function () {
it('each data_column should have one arc', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
expect(d3.select(this).classed('c3-arc-' + args.data.columns[i][0])).toBeTruthy();
});
});
it('each arc should have the color from color_pattern if color_treshold is given ', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-arc').each(function (d, i) {
expect(d3.select(this).style('fill')).toBe(arcColor[i]);
});
});
});
describe('should contain backgrounds ', function () {
it('each data_column should have one background', function () {
chart.internal.main.selectAll('.c3-chart-arcs path.c3-chart-arcs-background').each(function (d, i) {
expect(d3.select(this).classed('c3-chart-arcs-background-'+ i)).toBeTruthy();
});
});
it('each background should have tbe same color', function () {
chart.internal.main.selectAll('.c3-chart-arcs path.c3-chart-arcs-background').each(function () {
expect(d3.select(this).style('fill')).toBe('rgb(224, 224, 224)');
});
});
});
describe('should contain labels', function () {
it('each data_column should have a label', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-gauge-value').each(function (d, i) {
expect(d3.select(this).text()).toBe(chart.internal.defaultArcValueFormat(null, args.data.columns[i][1] / 100));
});
});
it('each label should have the same color', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-gauge-value').each(function () {
expect(d3.select(this).style('fill')).toBe('rgb(0, 0, 0)');
});
});
it('if only one data_column is visible the label should have "" for transform', function (done) {
var textBeforeHide = chart.internal.main.select('.c3-chart-arc.c3-target.c3-target-padded4 text');
expect(textBeforeHide.attr('transform')).not.toBe('');
chart.hide(['padded1', 'padded2', 'padded3']);
setTimeout(function () {
var textAfterHide = chart.internal.main.select('.c3-chart-arc.c3-target.c3-target-padded4 text');
expect(textAfterHide.attr('transform')).toBe('');
done();
}, 1000);
});
});
describe('should contain labellines', function () {
it('each data_column should have a labelline', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-arc-label-line').each(function (d, i) {
expect(d3.select(this).classed('c3-target-' + args.data.columns[i][0])).toBeTruthy();
});
});
it('each labelline should have the color from color_pattern if color_treshold is given', function () {
chart.internal.main.selectAll('.c3-chart-arc .c3-arc-label-line').each(function (d, i) {
expect(d3.select(this).style('fill')).toBe(arcColor[i]);
});
});
});
});
});
});

64
spec/legend-spec.js

@ -274,4 +274,68 @@ describe('c3 chart legend', function () {
});
});
describe('legend item tile coloring with color_treshold', function () {
beforeAll(function () {
args = {
data: {
columns: [
['padded1', 100],
['padded2', 90],
['padded3', 50],
['padded4', 20]
]
},
type: 'gauge',
color: {
pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
threshold: {
values: [30, 80, 95]
}
}
};
});
// espacially for gauges with multiple arcs to have the same coloring between legend tiles, tooltip tiles and arc
it('selects the color from color_pattern if color_treshold is given', function () {
var tileColor = [];
d3.selectAll('.c3-legend-item-tile').each(function () {
tileColor.push(d3.select(this).style('stroke'));
});
expect(tileColor[0]).toBe('rgb(96, 176, 68)');
expect(tileColor[1]).toBe('rgb(246, 198, 0)');
expect(tileColor[2]).toBe('rgb(249, 118, 0)');
expect(tileColor[3]).toBe('rgb(255, 0, 0)');
});
});
describe('legend item tile coloring without color_treshold', function () {
beforeAll(function () {
args = {
data: {
columns: [
['padded1', 100],
['padded2', 90],
['padded3', 50],
['padded4', 20]
],
colors: {
'padded1': '#60b044',
'padded4': '#8b008b'
}
},
type: 'gauge'
};
});
it('selects the color from data_colors, data_color or default', function () {
var tileColor = [];
d3.selectAll('.c3-legend-item-tile').each(function () {
tileColor.push(d3.select(this).style('stroke'));
});
expect(tileColor[0]).toBe('rgb(96, 176, 68)');
expect(tileColor[1]).toBe('rgb(31, 119, 180)');
expect(tileColor[2]).toBe('rgb(255, 127, 14)');
expect(tileColor[3]).toBe('rgb(139, 0, 139)');
});
});
});

7
src/api.chart.js

@ -22,9 +22,9 @@ c3_chart_fn.destroy = function () {
}
if (window.detachEvent) {
window.detachEvent('onresize', $$.resizeFunction);
window.detachEvent('onresize', $$.resizeIfElementDisplayed);
} else if (window.removeEventListener) {
window.removeEventListener('resize', $$.resizeFunction);
window.removeEventListener('resize', $$.resizeIfElementDisplayed);
} else {
var wrapper = window.onresize;
// check if no one else removed our wrapper and remove our resizeFunction from it
@ -33,6 +33,9 @@ c3_chart_fn.destroy = function () {
}
}
// remove the inner resize functions
$$.resizeFunction.remove();
$$.selectChart.classed('c3', false).html("");
// MEMO: this is needed because the reference of some elements will not be released, then memory leak will happen.

100
src/arc.js

@ -12,11 +12,13 @@ c3_chart_internal_fn.initPie = function () {
c3_chart_internal_fn.updateRadius = function () {
var $$ = this, config = $$.config,
w = config.gauge_width || config.donut_width;
$$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2;
w = config.gauge_width || config.donut_width,
gaugeArcWidth = $$.filterTargetsToShow($$.data.targets).length * $$.config.gauge_arcs_minWidth;
$$.radiusExpanded = Math.min($$.arcWidth, $$.arcHeight) / 2 * ($$.hasType('gauge') ? 0.85 : 1);
$$.radius = $$.radiusExpanded * 0.95;
$$.innerRadiusRatio = w ? ($$.radius - w) / $$.radius : 0.6;
$$.innerRadius = $$.hasType('donut') || $$.hasType('gauge') ? $$.radius * $$.innerRadiusRatio : 0;
$$.gaugeArcWidth = w ? w : (gaugeArcWidth <= $$.radius - $$.innerRadius ? $$.radius - $$.innerRadius : (gaugeArcWidth <= $$.radius ? gaugeArcWidth : $$.radius));
};
c3_chart_internal_fn.updateArc = function () {
@ -61,8 +63,13 @@ c3_chart_internal_fn.updateAngle = function (d) {
};
c3_chart_internal_fn.getSvgArc = function () {
var $$ = this,
arc = $$.d3.arc().outerRadius($$.radius).innerRadius($$.innerRadius),
var $$ = this, hasGaugeType = $$.hasType('gauge'),
singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
arc = $$.d3.arc().outerRadius(function(d) {
return hasGaugeType ? $$.radius - singleArcWidth * d.index : $$.radius;
}).innerRadius(function(d) {
return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
}),
newArc = function (d, withoutUpdate) {
var updated;
if (withoutUpdate) { return arc(d); } // for interpolate
@ -75,8 +82,15 @@ c3_chart_internal_fn.getSvgArc = function () {
};
c3_chart_internal_fn.getSvgArcExpanded = function (rate) {
var $$ = this,
arc = $$.d3.arc().outerRadius($$.radiusExpanded * (rate ? rate : 1)).innerRadius($$.innerRadius);
rate = rate || 1;
var $$ = this, hasGaugeType = $$.hasType('gauge'),
singleArcWidth = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length,
expandWidth = Math.min($$.radiusExpanded * rate - $$.radius, singleArcWidth * 0.8 - (1 - rate) * 100),
arc = $$.d3.arc().outerRadius(function(d){
return hasGaugeType ? $$.radius - singleArcWidth * d.index + expandWidth : $$.radiusExpanded * rate;
}).innerRadius(function(d){
return hasGaugeType ? $$.radius - singleArcWidth * (d.index + 1) : $$.innerRadius;
});
return function (d) {
var updated = $$.updateAngle(d);
return updated ? arc(updated) : "M 0 0";
@ -90,8 +104,8 @@ c3_chart_internal_fn.getArc = function (d, withoutUpdate, force) {
c3_chart_internal_fn.transformForArcLabel = function (d) {
var $$ = this, config = $$.config,
updated = $$.updateAngle(d), c, x, y, h, ratio, translate = "";
if (updated && !$$.hasType('gauge')) {
updated = $$.updateAngle(d), c, x, y, h, ratio, translate = "", hasGauge = $$.hasType('gauge');
if (updated && !hasGauge) {
c = this.svgArc.centroid(updated);
x = isNaN(c[0]) ? 0 : c[0];
y = isNaN(c[1]) ? 0 : c[1];
@ -105,6 +119,12 @@ c3_chart_internal_fn.transformForArcLabel = function (d) {
}
translate = "translate(" + (x * ratio) + ',' + (y * ratio) + ")";
}
else if (updated && hasGauge && $$.filterTargetsToShow($$.data.targets).length > 1) {
var y1 = Math.sin(updated.endAngle - Math.PI / 2);
x = Math.cos(updated.endAngle - Math.PI / 2) * ($$.radiusExpanded + 25);
y = y1 * ($$.radiusExpanded + 15 - Math.abs(y1 * 10)) + 3;
translate = "translate(" + x + ',' + y + ")";
}
return translate;
};
@ -287,7 +307,9 @@ c3_chart_internal_fn.initArc = function () {
c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransform) {
var $$ = this, d3 = $$.d3, config = $$.config, main = $$.main,
arcs, mainArc;
arcs, mainArc, backgroundArc,
arcLabelLines, mainArcLabelLine,
hasGaugeType = $$.hasType('gauge');
arcs = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arc)
.data($$.arcData.bind($$));
mainArc = arcs.enter().append('path')
@ -301,6 +323,43 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
this._current = d;
})
.merge(arcs);
if (hasGaugeType) {
arcLabelLines = main.selectAll('.' + CLASS.arcs).selectAll('.' + CLASS.arcLabelLine)
.data($$.arcData.bind($$));
mainArcLabelLine = arcLabelLines.enter().append('rect')
.attr("class", function (d) { return CLASS.arcLabelLine + ' ' + CLASS.target + ' ' + CLASS.target + '-' + d.data.id; })
.merge(arcLabelLines);
if ($$.filterTargetsToShow($$.data.targets).length === 1) {
mainArcLabelLine.style("display", "none");
}
else {
mainArcLabelLine
.style("fill", function (d) { return config.color_pattern.length > 0 ? $$.levelColor(d.data.values[0].value) : $$.color(d.data); })
.style("display", config.gauge_labelLine_show ? "" : "none")
.each(function (d) {
var lineLength = 0, lineThickness = 2, x = 0, y = 0, transform = "";
if ($$.hiddenTargetIds.indexOf(d.data.id) < 0) {
var updated = $$.updateAngle(d),
innerLineLength = $$.gaugeArcWidth / $$.filterTargetsToShow($$.data.targets).length * (updated.index + 1),
lineAngle = updated.endAngle - Math.PI / 2,
arcInnerRadius = $$.radius - innerLineLength,
linePositioningAngle = lineAngle - (arcInnerRadius === 0 ? 0 : (1 / arcInnerRadius));
lineLength = $$.radiusExpanded - $$.radius + innerLineLength;
x = Math.cos(linePositioningAngle) * arcInnerRadius;
y = Math.sin(linePositioningAngle) * arcInnerRadius;
transform = "rotate(" + (lineAngle * 180 / Math.PI) + ", " + x + ", " + y + ")";
}
d3.select(this)
.attr('x', x)
.attr('y', y)
.attr('width', lineLength)
.attr('height', lineThickness)
.attr('transform', transform)
.style("stroke-dasharray", "0, " + (lineLength + lineThickness) + ", 0");
});
}
}
mainArc
.attr("transform", function (d) { return !$$.isGaugeType(d.data) && withTransform ? "scale(0)" : ""; })
.on('mouseover', config.interaction_enabled ? function (d) {
@ -394,22 +453,31 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
.attr('class', function (d) { return $$.isGaugeType(d.data) ? CLASS.gaugeValue : ''; })
.text($$.textForArcLabel.bind($$))
.attr("transform", $$.transformForArcLabel.bind($$))
.style('font-size', function (d) { return $$.isGaugeType(d.data) ? Math.round($$.radius / 5) + 'px' : ''; })
.style('font-size', function (d) { return $$.isGaugeType(d.data) && $$.filterTargetsToShow($$.data.targets).length === 1 ? Math.round($$.radius / 5) + 'px' : ''; })
.transition().duration(duration)
.style("opacity", function (d) { return $$.isTargetToShow(d.data.id) && $$.isArcType(d.data) ? 1 : 0; });
main.select('.' + CLASS.chartArcsTitle)
.style("opacity", $$.hasType('donut') || $$.hasType('gauge') ? 1 : 0);
.style("opacity", $$.hasType('donut') || hasGaugeType ? 1 : 0);
if (hasGaugeType) {
var index = 0;
backgroundArc = $$.arcs.select('g.' + CLASS.chartArcsBackground).selectAll('path.' + CLASS.chartArcsBackground).data($$.data.targets);
backgroundArc.enter().append("path");
backgroundArc
.attr("class", function (d, i) { return CLASS.chartArcsBackground + ' ' + CLASS.chartArcsBackground +'-'+ i; })
.attr("d", function (d1) {
if ($$.hiddenTargetIds.indexOf(d1.id) >= 0) { return "M 0 0"; }
if ($$.hasType('gauge')) {
$$.arcs.select('.' + CLASS.chartArcsBackground)
.attr("d", function () {
var d = {
data: [{value: config.gauge_max}],
startAngle: config.gauge_startingAngle,
endAngle: -1 * config.gauge_startingAngle
endAngle: -1 * config.gauge_startingAngle * (config.gauge_fullCircle ? Math.PI : 1),
index: index++
};
return $$.getArc(d, true, true);
});
backgroundArc.exit().remove();
$$.arcs.select('.' + CLASS.chartArcsGaugeUnit)
.attr("dy", ".75em")
.text(config.gauge_label_show ? config.gauge_units : '');
@ -426,7 +494,7 @@ c3_chart_internal_fn.redrawArc = function (duration, durationForExit, withTransf
c3_chart_internal_fn.initGauge = function () {
var arcs = this.arcs;
if (this.hasType('gauge')) {
arcs.append('path')
arcs.append('g')
.attr("class", CLASS.chartArcsBackground);
arcs.append("text")
.attr("class", CLASS.chartArcsGaugeUnit)

1
src/class.js

@ -39,6 +39,7 @@ export default {
circle: 'c3-circle',
circles: 'c3-circles',
arc: 'c3-arc',
arcLabelLine: 'c3-arc-label-line',
arcs: 'c3-arcs',
area: 'c3-area',
areas: 'c3-areas',

2
src/config.js

@ -184,6 +184,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
// gauge
gauge_fullCircle: false,
gauge_label_show: true,
gauge_labelLine_show: true,
gauge_label_format: undefined,
gauge_min: 0,
gauge_max: 100,
@ -191,6 +192,7 @@ c3_chart_internal_fn.getDefaultConfig = function () {
gauge_label_extents: undefined,
gauge_units: undefined,
gauge_width: undefined,
gauge_arcs_minWidth: 5,
gauge_expand: {},
gauge_expand_duration: 50,
// donut

19
src/core.js

@ -2,7 +2,7 @@ import Axis from './axis';
import CLASS from './class';
import { isValue, isFunction, isString, isUndefined, isDefined, ceil10, asHalfPixel, diffDomain, isEmpty, notEmpty, getOption, hasValue, sanitise, getPathBox } from './util';
export var c3 = { version: "0.4.18" };
export var c3 = { version: "0.4.21" };
export var c3_chart_fn;
export var c3_chart_internal_fn;
@ -200,11 +200,6 @@ c3_chart_internal_fn.initWithData = function (data) {
$$.addHiddenLegendIds(config.legend_hide === true ? $$.mapToIds($$.data.targets) : config.legend_hide);
}
// when gauge, hide legend // TODO: fix
if ($$.hasType('gauge')) {
config.legend_show = false;
}
// Init sizes and scales
$$.updateSizes();
$$.updateScales();
@ -738,7 +733,7 @@ c3_chart_internal_fn.getTranslate = function (target) {
y = config.axis_rotated ? 0 : $$.height2;
} else if (target === 'arc') {
x = $$.arcWidth / 2;
y = $$.arcHeight / 2;
y = $$.arcHeight / 2 - ($$.hasType('gauge') ? 6 : 0);// to prevent wrong display of min and max label
}
return "translate(" + x + "," + y + ")";
};
@ -892,7 +887,7 @@ c3_chart_internal_fn.observeInserted = function (selection) {
c3_chart_internal_fn.bindResize = function () {
var $$ = this, config = $$.config;
$$.resizeFunction = $$.generateResize();
$$.resizeFunction = $$.generateResize(); // need to call .remove
$$.resizeFunction.add(function () {
config.onresize.call($$);
@ -919,9 +914,9 @@ c3_chart_internal_fn.bindResize = function () {
config.onresized.call($$);
});
var resizeIfElementDisplayed = function() {
$$.resizeIfElementDisplayed = function() {
// if element not displayed skip it
if (!$$.api.element.offsetParent) {
if ($$.api == null || !$$.api.element.offsetParent) {
return;
}
@ -929,9 +924,9 @@ c3_chart_internal_fn.bindResize = function () {
};
if (window.attachEvent) {
window.attachEvent('onresize', resizeIfElementDisplayed);
window.attachEvent('onresize', $$.resizeIfElementDisplayed);
} else if (window.addEventListener) {
window.addEventListener('resize', resizeIfElementDisplayed, false);
window.addEventListener('resize', $$.resizeIfElementDisplayed, false);
} else {
// fallback to this, if this is a very old browser
var wrapper = window.onresize;

4
src/legend.js

@ -311,7 +311,9 @@ c3_chart_internal_fn.updateLegend = function (targetIds, options, transitions) {
tiles = $$.legend.selectAll('line.' + CLASS.legendItemTile)
.data(targetIds);
(withTransition ? tiles.transition() : tiles)
.style('stroke', $$.color)
.style('stroke', $$.levelColor ? function(id) {
return $$.levelColor($$.cache[id].values[0].value);
} : $$.color)
.attr('x1', x1ForLegendTile)
.attr('y1', yForLegendTile)
.attr('x2', x2ForLegendTile)

2
src/scss/arc.scss

@ -5,7 +5,7 @@
.c3-chart-arcs .c3-chart-arcs-background {
fill: #e0e0e0;
stroke: none;
stroke: #FFF;
}
.c3-chart-arcs .c3-chart-arcs-gauge-unit {
fill: #000;

5
src/scss/chart.scss

@ -22,8 +22,13 @@
.c3-chart-arc path {
stroke: #fff;
}
.c3-chart-arc rect {
stroke: white;
stroke-width: 1;
}
.c3-chart-arc text {
fill: #fff;
font-size: 13px;

2
src/tooltip.js

@ -140,7 +140,7 @@ c3_chart_internal_fn.tooltipPosition = function (dataToShow, tWidth, tHeight, el
// Determin tooltip position
if (forArc) {
tooltipLeft = (($$.width - ($$.isLegendRight ? $$.getLegendWidth() : 0)) / 2) + mouse[0];
tooltipTop = ($$.height / 2) + mouse[1] + 20;
tooltipTop = ($$.hasType('gauge') ? $$.height : $$.height / 2) + mouse[1] + 20;
} else {
svgLeft = $$.getSvgLeft(true);
if (config.axis_rotated) {

Loading…
Cancel
Save