@domoinc/multiline-chart
Version:
MultiLineChart - Domo Widget
81 lines (79 loc) • 3.14 kB
JavaScript
/*\
|*| DomoIcons is an object of functions that will append icons to svg or g elements handed to them.
|*|
|*| pencil( element ): Draws a light grey pencil icon and returns the element passed in.\n" +
|*| Example:
|*| d3.DomoIcons.pencil( d3.select('g') )\n" +
|*| .attr('transform', 'translate(10,10);')" );
|*|
\*/
d3.domoIcons = {
"pencil": function ( element ) {
element.append("path")
.style("fill", "#CBCBCC")
.attr({
"d": "M10.2,2.9l-8.8,8.8h0l0,0h0l0,0L0,16l4.3-1.4l0,0l0,0l0,0l0,0l8.8-8.8L10.2,2.9z M3.4,12.1l-0.5-0.5l7.2-7.2l0.5,0.5L3.4,12.1z",
});
element.append("rect")
.attr({
"x": 12.2,
"y": 0.4,
"width": 3.3,
"height":4.0,
"transform": "matrix(0.707 -0.7072 0.7072 0.707 2.2664 10.3121)",
})
.style({
"fill" : "#CBCBCC",
"width" : 2.7,
"height" : 4.1
});
element.append("rect")
.attr({
"width" : 17,
"height" : 17,
"opacity" : 0.0,
})
.style({
"fill" : "#ffddff"
})
return element;
},
"funnel": function ( element ) {
// Funnel by Volodin Anton from The Noun Project
element.append("path")
.style({
"fill": "#444",
})
.attr({
"d": "M87.5,27.292c0-6.944-16.789-12.576-37.501-12.576c-20.71,0-37.499,5.632-37.499,12.576c0,0.148,0.018,0.294,0.033,0.441 c-0.006,0.035-0.033,0.046-0.033,0.09c0,0.665,0,1.77,0,2.454c0,0.686,0.324,1.571,0.72,1.968c0.396,0.396,1.441,1.445,2.325,2.331 l27.111,27.188c0,8.948,0,19.865,0,20.237c0,0.634,1.196,3.283,7.345,3.283c6.147,0,7.343-2.489,7.343-3.283 c0-0.467,0-11.375,0-20.294l27.399-27.424c0.883-0.886,1.865-1.868,2.183-2.184c0.314-0.317,0.574-1.043,0.574-1.615 s0-1.678,0-2.455c0-0.069-0.034-0.095-0.046-0.149C87.481,27.685,87.5,27.489,87.5,27.292z M49.999,20.472 c18.605,0,29.207,4.472,31.473,6.82c-2.266,2.349-12.867,6.82-31.473,6.82c-18.604,0-29.205-4.472-31.47-6.82 C20.794,24.943,31.395,20.472,49.999,20.472z",
});
return element;
},
"magnifyingGlass": function ( element ) {
// <path d="M16.6,15.1c1.2-1.6,2-3.5,2-5.6c0-5-4.1-9.1-9.1-9.1 S0.4,4.4,0.4,9.4s4.1,9.1,9.1,9.1c2.1,0,4.1-0.7,5.6-2l5.1,5.1c0.4,0.4,1,0.4,1.4,0l0.1-0.1c0.4-0.4,0.4-1,0-1.4L16.6,15.1z M9.5,16.6c-4,0-7.2-3.2-7.2-7.2s3.2-7.2,7.2-7.2s7.2,3.2,7.2,7.2S13.4,16.6,9.5,16.6z" style="fill: rgb(138, 141, 143);"></path>
element.append("path")
.style({
"fill": "rgb(138, 141, 143)",
})
.attr({
"d": "M16.6,15.1c1.2-1.6,2-3.5,2-5.6c0-5-4.1-9.1-9.1-9.1 S0.4,4.4,0.4,9.4s4.1,9.1,9.1,9.1c2.1,0,4.1-0.7,5.6-2l5.1,5.1c0.4,0.4,1,0.4,1.4,0l0.1-0.1c0.4-0.4,0.4-1,0-1.4L16.6,15.1z M9.5,16.6c-4,0-7.2-3.2-7.2-7.2s3.2-7.2,7.2-7.2s7.2,3.2,7.2,7.2S13.4,16.6,9.5,16.6z",
});
return element;
},
"diamond": function(element, attr) {
element.append('polygon')
.attr('points', '4,0 0,5 4,10 8,5');
if(attr === undefined) {
element.attr('fill', '#CBCBCC');
} else {
element.attr(attr);
}
return element
},
"help": function () {
console.log( "d3.DomoIcons.pencil( element ): Draws a light grey pencil icon and returns the element passed in.\n" +
"Example:\n" +
"\td3.DomoIcons.pencil( d3.select('g') )\n" +
"\t\t.attr('transform', 'translate(10,10)');" );
}
}