Skip to content

Commit

Permalink
lenses fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@sepans
sepans committed Mar 30, 2015
1 parent 86b8a39 commit ae14d81
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 79 deletions.
82 changes: 76 additions & 6 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,87 @@
</head>

<style>
body {
font-family: arial;
background-color: #303B49;
color: #FFF;
}
body {
font-family: sans-serif;
font-size: 14px;
}

pre {
border: 1px solid #EEE;
font-size: 12px;
max-width: 300px;
max-height: 300px;
overflow: scroll;

}
#component {
border: 1px solid #BBB;
margin: 10px;
padding: 5px;
display: block;
width: 300px;
height: 250px;
}

.component::before{
content: '\2794';
position: absolute;
top: 50%;
}
.component::before {
left: -15px;
}

.component::after {
right: -15px;
}

section {
display: inline-block;
margin: 8px;
vertical-align: top;
position: relative;
}
html /deep/ input[is=core-input] {
border-bottom: 1px solid #E5E5E5 !important;
}

.count {
float: right;
font-size: 12px;
}
</style>
<body unresolved>

<p>An `lens-viz-g-scatter-bubble` looks like this:</p>
<template id="auto-bind-demo" is="auto-binding">


<script>
// helper function to stringify objects, used below like {{outputs | json}}
PolymerExpressions.prototype.json = function(object) {
return JSON.stringify(object, undefined, 2);
};


</script>

<section>
<label>Input:</label><span class="count">{{myinput.length}} records</span>
<pre id="input">{{myinput | json}}</pre>
</section>
<section class="component">
<label>Component:</label>
<lens-viz-g-scatter-bubble input="{{myinput}}" output="{{myoutput}}"></lens-viz-g-scatter-bubble>
</section>
<!--
<section>
<label>Output:</label><span class="count">{{myoutput.length}} records</span>
<pre>{{myoutput | json}}</pre>
</section>
-->

<lens-viz-g-scatter-bubble style="width: 300px; height: 400px;"></lens-viz-g-scatter-bubble>
</template>

</body>
</html>
172 changes: 99 additions & 73 deletions lens-viz-g-scatter-bubble.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../th-d3-chart/th-d3-chart.html">
<link rel="import" href="../google-chart/google-chart.html">
<link rel="import" href="../th-theme/th-theme.html">
<link rel="import" href="../lens-u-data-selector/lens-u-data-selector.html">


<!--
Element providing a Thelma wrapper for the Google geochart.
Expand All @@ -10,16 +12,14 @@
@status alpha
@homepage http://nishacodes.github.io/lens-viz-g-scatter-bubble
-->
<polymer-element name="lens-viz-g-scatter-bubble" extends="th-d3-chart" attributes="input chartData dataLabel color backgroundColor legend dataLabelX dataLabelY dataLabelSize dataLabelColor">
<polymer-element name="lens-viz-g-scatter-bubble" attributes="input dataLabel color backgroundColor legend dataLabelX dataLabelY dataLabelSize dataLabelColor">
<template>
<core-style ref="theme"></core-style>
<style>
:host {
width: 400px;
height: 400px;
}
</style>
<google-chart id="googleChart" on-google-chart-render="{{chartReady}}" style="width:100%; height: 100%;"

<lens-u-data-utility id="utility"></lens-u-data-utility>

<lens-u-data-selector id="data_selector" input="{{input}}" selections="{{labelValueSelection}}" style="height: 10%;"></lens-u-data-selector>

<google-chart id="googleChart" on-google-chart-render="{{chartReady}}" style="width:100%; height: 90%;"
type='bubble'
options= "{{options}}"
data="{{_data}}">
Expand All @@ -31,7 +31,7 @@
Polymer('lens-viz-g-scatter-bubble', {

/**
** 'chartData' is the data represented by the map.
** 'input' is the data represented by the map.
* @type {Array}
*
** 'region' can be a country, state, or metro
Expand All @@ -40,64 +40,31 @@
** 'value' determines the color of the marker or fill
* @type {Number}
*/
chartData: [
// specify number for valueColor
// {"label": "CAN", "valueX": 80.66, "valueY": 1.67, "valueSize": 33739900, "valueColor": 2.1},
// {"label": "DEU", "valueX": 79.84, "valueY": 1.36, "valueSize": 81902307, "valueColor": 1.1},
// {"label": "DNK", "valueX": 78.6, "valueY": 1.84, "valueSize": 5523095, "valueColor": 3.1},
// {"label": "USA", "valueX": 78.09, "valueY": 2.05, "valueSize": 307007000, "valueColor": 0.1} ,
// {"label": "IRN", "valueX": 72.49, "valueY": 1.7, "valueSize": 73137148, "valueColor": 2.8}

// specify string for valueColor
{"label": "CAN", "valueX": 80.66, "valueY": 1.67, "valueSize": 33739900, "valueColor": "North America"},
{"label": "DEU", "valueX": 79.84, "valueY": 1.36, "valueSize": 81902307, "valueColor": "Europe"},
{"label": "DNK", "valueX": 78.6, "valueY": 1.84, "valueSize": 5523095, "valueColor": "Europe"},
{"label": "USA", "valueX": 78.09, "valueY": 2.05, "valueSize": 307007000, "valueColor": "North America"},
{"label": "IRN", "valueX": 72.49, "valueY": 1.7, "valueSize": 73137148, "valueColor": "Middle East"}
input: [
// specify number for Random Value
{"label": "CAN", "Life Expectancy": 80.66, "Fertility Rate": 1.67, "Population": 33739900, "Random Value": 2.1},
{"label": "DEU", "Life Expectancy": 79.84, "Fertility Rate": 1.36, "Population": 81902307, "Random Value": 1.1},
{"label": "DNK", "Life Expectancy": 78.6, "Fertility Rate": 1.84, "Population": 5523095, "Random Value": 3.1},
{"label": "USA", "Life Expectancy": 78.09, "Fertility Rate": 2.05, "Population": 307007000, "Random Value": 0.1} ,
{"label": "IRN", "Life Expectancy": 72.49, "Fertility Rate": 1.7, "Population": 73137148, "Random Value": 2.8}

// specify string for Random Value
// {"label": "CAN", "Life Expectancy": 80.66, "Fertility Rate": 1.67, "Population": 33739900, "Random Value": "North America"},
// {"label": "DEU", "Life Expectancy": 79.84, "Fertility Rate": 1.36, "Population": 81902307, "Random Value": "Europe"},
// {"label": "DNK", "Life Expectancy": 78.6, "Fertility Rate": 1.84, "Population": 5523095, "Random Value": "Europe"},
// {"label": "USA", "Life Expectancy": 78.09, "Fertility Rate": 2.05, "Population": 307007000, "Random Value": "North America"},
// {"label": "IRN", "Life Expectancy": 72.49, "Fertility Rate": 1.7, "Population": 73137148, "Random Value": "Middle East"}


// no valueColor (all will be the same color)
// {"label": "CAN", "valueX": 80.66, "valueY": 1.67, "valueSize": 33739900},
// {"label": "DEU", "valueX": 79.84, "valueY": 1.36, "valueSize": 81902307},
// {"label": "DNK", "valueX": 78.6, "valueY": 1.84, "valueSize": 5523095},
// {"label": "USA", "valueX": 78.09, "valueY": 2.05, "valueSize": 307007000},
// {"label": "IRN", "valueX": 72.49, "valueY": 1.7, "valueSize": 73137148}
// no Random Value (all will be the same color)
// {"label": "CAN", "Life Expectancy": 80.66, "Fertility Rate": 1.67, "Population": 33739900},
// {"label": "DEU", "Life Expectancy": 79.84, "Fertility Rate": 1.36, "Population": 81902307},
// {"label": "DNK", "Life Expectancy": 78.6, "Fertility Rate": 1.84, "Population": 5523095},
// {"label": "USA", "Life Expectancy": 78.09, "Fertility Rate": 2.05, "Population": 307007000},
// {"label": "IRN", "Life Expectancy": 72.49, "Fertility Rate": 1.7, "Population": 73137148}

],
/**
* Data label for X axis
* @type {String}
*/
dataLabelX: "Life Expectancy",
/**
* Data label for Y axis
* @type {String}
*/
dataLabelY: "Fertility Rate",
/**
* Data label for Size of the bubbles
* @type {String}
*/
dataLabelSize: "Population",
/**
* Data label for Color
* @type {String}
*/
dataLabelColor: "Region",
/**
* 'backgroundcolor' determines the background color of the chart
* @type {String}
*/
backgroundColor: "",
/**
* 'color' determines the range of the fill color of the regions
* @type {String}
*/
color: "",
/**
* 'legend' determines whether or not to display a legend
* @type {Boolean}
*/

legend: false,
/**
* 'numberFormat' refers to the number format of the legend min and max
Expand All @@ -110,16 +77,70 @@

self.reformatData();
self.configureOptions();

this.$.data_selector.addEventListener('th-data-selection-changed', function() {
this.labelValueSelection = this.$.data_selector.selections;
//set published selections for saving the component
this.selectedLabel = this.labelValueSelection[0];
this.selectedValues = this.labelValueSelection[1];
this.reformatData();
}.bind(this));

},
/**
* 'reformatData' converts chartData into the correct data structure for the map
* 'reformatData' converts input into the correct data structure for the map
*/
reformatData: function(){

/*
var self = this;
self._data = self.chartData.map(function(item){
return [item.label, item.valueX, item.valueY, item.valueColor ? item.valueColor : 1, item.valueSize];//item.valueColor];
return [item.label, item.Life Expectancy, item.Fertility Rate, item.Random Value ? item.Random Value : 1, item.Population];//item.Random Value];
});
self._data.unshift(["ID", self.dataLabelX, self.dataLabelY, self.dataLabelColor, self.dataLabelSize]);
*/


var self = this;

self.numberFormats= [];
if(!self.labelValueSelection || !self.labelValueSelection[0] || !self.labelValueSelection[1]) {
return;
}
var firstRow = self.labelValueSelection[1].map(function(item){ return item;}) ;


self._data = self.input.map(function(item, index){
var row = [];
row.push(item[self.labelValueSelection[0]]);
for(var i=0; i<self.labelValueSelection[1].length; i++){

// for only the first row
if (index === 0){
// Extract the number format of the first row of data and apply to tooltips
var format = self.$.utility.extractNumberFormat(item[self.labelValueSelection[1][i]]);
if (format){
self._numberPattern = format.pattern; // Use this pattern to apply to axis numbers
self.numberFormats.push({col: i + 1, prefix: format.prefix, suffix: format.suffix, groupingSymbol:',', fractionDigits: format.decimalPlaces});
}
}
var unformattedValue = self.$.utility.unformatString(item[self.labelValueSelection[1][i]]);
row.push(unformattedValue);
}
return row;
});

firstRow.unshift(self.labelValueSelection[0]);
self._data.unshift(firstRow);

// If a specific number pattern is given, override the default pattern extracted from values
if (self.numberPattern){
self.numberFormats = [];
firstRow.forEach(function(item, index){
self.numberFormats.push({col: index, pattern: self.numberPattern});
})
}
},
/**
* 'configureOptions' sets the appropriate options properties for the map, given the attribute values
Expand All @@ -143,7 +164,7 @@
chartArea:{width:'80%',height:'80%'},
bubble: {
textStyle: {
color: colors.theme.foreground2,
color: colors.theme.foreground1,
}
},
legend: {
Expand All @@ -156,8 +177,8 @@
slices : self._slices
};

var legendSetting = { gridlines : {color : colors.theme.foreground2},
baselineColor: colors.theme.foreground2,
var legendSetting = { gridlines : {color : colors.theme.foreground1},
baselineColor: colors.theme.foreground1,
textStyle: textColorSetting};


Expand All @@ -170,8 +191,8 @@
self.options.legend.position = 'none';
}

//if no valueColor, turn of colorAxis legend
if(self.chartData[0].valueColor===undefined) {
//if no Random Value, turn of colorAxis legend
if(self.input[0]["Random Value"]===undefined) {
self.options.colorAxis.legend.position = 'none';
}

Expand All @@ -181,7 +202,7 @@
* @return {Object}
*/
getColors: function(){
colors = {};
var colors = {};
colors.theme = window.CoreStyle.g.theme;
colors.accents = [];

Expand All @@ -194,8 +215,13 @@
colors.count = colors.accents.length;

return colors;
},

resize: function() {
this.$.googleChart.drawChart();
}


});


Expand Down

0 comments on commit ae14d81

Please sign in to comment.