react-radial/lib/renderObject.js

a radial component built with react and resonance

'use strict';

exports.__esModule = true;
exports.renderObject = undefined;

var _svghelper = require('./util/svghelper');

var _d = require('d3');

var d3 = _interopRequireWildcard(_d);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }

var renderObject = exports.renderObject = function renderObject(data, i) {
    var cx = data.cx,
        cy = data.cy,
        radius = data.radius,
        angleStart = data.angleStart,
        angleEnd = data.angleEnd,
        key = data.key,
        fill = data.fill,
        strokeWidth = data.strokeWidth,
        radiusDiff = data.radiusDiff,
        stroke = data.stroke,
        buttonFunctions = data.buttonFunctions,
        text = data.text;

    return {
        g: {
            // parent svg group
            fillOpacity: .6,
            key: key,
            id: 'arc' + text,
            style: {
                transform: 'translate(' + strokeWidth + 'px,' + strokeWidth + 'px)'
            }
        },
        region: {
            // main pie slice
            d: [(0, _svghelper.describeArcRegion)(cx, cy, radius, radius + radiusDiff, angleStart, angleEnd)],
            style: {
                fill: fill,
                strokeWidth: strokeWidth,
                stroke: stroke
            }
        },
        arc: {
            // smaller outside arc to set path for text
            d: [(0, _svghelper.describeArc)(cx, cy, radius + radiusDiff * .8, angleStart, angleEnd)],
            style: { opacity: 1e-6 },
            id: angleStart
        },
        text: {
            // main text tag
            textAnchor: 'middle',
            fontFamily: 'sans-serif'
        },
        textPath: {
            // each line of text
            fontWeight: 100,
            fill: stroke,
            startOffset: '50%',
            xlinkHref: "#" + angleStart
            // this matches the arc id (above)
        }
    };
};