1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | 1 1 1 27 27 5 5 52 52 52 47 52 52 | 'use strict'; ;require.register("views/common/chart/pie", function (exports, require, module) { /** * Licensed to the Apache Software Foundation (ASF) under one * or more contributor license agreements. See the NOTICE file * distributed with this work for additional information * regarding copyright ownership. The ASF licenses this file * to you under the Apache License, Version 2.0 (the * "License"); you may not use this file except in compliance * with the License. You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ var App = require('app'); App.ChartPieView = Em.View.extend({ w: 100, h: 100, data: [300, 500], id: null, palette: new Rickshaw.Color.Palette({ scheme: 'munin' }), stroke: 'black', strokeWidth: 1, donut: d3.layout.pie().sort(null), existCenterText: false, centerTextColor: 'black', r: function () { return Math.min(this.get('w'), this.get('h')) / 2 - this.get('strokeWidth'); }.property('w', 'h'), outerR: Em.computed.alias('r'), innerR: function () { return 0; // this.get('r') - 20; }.property('r'), arc: function () { return d3.svg.arc().innerRadius(this.get('innerR')).outerRadius(this.get('outerR')); }.property(), didInsertElement: function didInsertElement() { this._super(); this.appendSvg(); }, selector: Em.computed.format('#{0}', 'elementId'), appendSvg: function appendSvg() { var thisChart = this; var svg = d3.select(thisChart.get('selector')).append("svg:svg").attr("id", thisChart.get('id')).attr("width", thisChart.get('w')).attr("height", thisChart.get('h')).attr("stroke", thisChart.get('stroke')).attr("stroke-width", thisChart.get('strokeWidth')); // set percentage data in center if there exist a center text if (thisChart.get('existCenterText')) { this.set('svg', svg.append("svg:g").attr("render-order", 1).append("svg:text").style('fill', thisChart.get('centerTextColor')).attr("stroke", thisChart.get('centerTextColor')).attr("font-size", 24).attr("transform", "translate(" + thisChart.get('w') / 2 + "," + (thisChart.get('h') / 2 + 8) + ")").attr("text-anchor", "middle").text(function (d) { return thisChart.get('data')[0] + '%'; })); } this.set('svg', svg.append("svg:g").attr("transform", "translate(" + thisChart.get('w') / 2 + "," + thisChart.get('h') / 2 + ")")); this.set('arcs', thisChart.get('svg').selectAll(".arc").data(thisChart.donut(thisChart.get('data'))).enter().append("svg:g").attr('class', 'arc').append('svg:path').attr("fill", function (d, i) { return thisChart.palette.color(i); }).attr("d", thisChart.get('arc'))); } }); }); |