From 8a81e25e14f4de7bc18de6f973f4c35148fe92ce Mon Sep 17 00:00:00 2001 From: Mina Lee Date: Wed, 31 Dec 2014 14:06:19 +0900 Subject: [PATCH 1/6] Add scatter chart --- zeppelin-web/app/fonts/custom-font.eot | Bin 0 -> 1520 bytes zeppelin-web/app/fonts/custom-font.svg | 25 ++++++++++++++++ zeppelin-web/app/fonts/custom-font.ttf | Bin 0 -> 1340 bytes zeppelin-web/app/fonts/custom-font.woff | Bin 0 -> 1416 bytes zeppelin-web/app/index.html | 1 + .../app/scripts/controllers/paragraph.js | 28 ++++++++++++++---- zeppelin-web/app/styles/custom-font.css | 18 +++++++++++ zeppelin-web/app/views/paragraph.html | 9 ++++++ 8 files changed, 75 insertions(+), 6 deletions(-) create mode 100644 zeppelin-web/app/fonts/custom-font.eot create mode 100644 zeppelin-web/app/fonts/custom-font.svg create mode 100644 zeppelin-web/app/fonts/custom-font.ttf create mode 100644 zeppelin-web/app/fonts/custom-font.woff create mode 100644 zeppelin-web/app/styles/custom-font.css diff --git a/zeppelin-web/app/fonts/custom-font.eot b/zeppelin-web/app/fonts/custom-font.eot new file mode 100644 index 0000000000000000000000000000000000000000..e5de86b4a8f4f403ebc4bc73ff1a1441a2449ffe GIT binary patch literal 1520 zcmb7EJxo(k6#j01o-HU8Erl3Eit^O-2_hg!(kAL)qQPhsba2pTX(^HZNJ|2PhJi#! z0*Q&cVKT%8T@0He2^s@~4uH`xvS7kM>v!LMg+hwPll0y1eCM3+-oAU@*>D44{sbJ@ zYXXx(GCjBV@-kQ1Oz)DuKL!L4#R#&Vi;g_2quQf1aObcFtZ1( ztROC+1+7-(AQcAX0V**LCt7daJ>Pcxv+paJkNiD~Ce2KJ-{O5HouJ<{U}iI1ee@Gt zJp)5y@!6Nd3-rm0H;I_p@10%v1UUVScP2>qyq-$>J@lIr$=v9XCL%bcj(;c}HE|Zd z=ugl;oHR!>{A1(vC+P=MW-{h{GPg|s9rXt@>1>YYq`BpJf^d2uCc!uEZg;Fy2f5%n z3fqMOIo8-%6n@mZ>w#g4Ad_O`k}?XmsDzccjzFY)TXzfF0jwhhA2nhGmTg_WklN>gE_sj$Y{n|7_zEI)Y452~`c z(UEK}ootS$Q@I0X;odn|Rs`4Vxf$fdjB$d>Icai^#?X%-9%GEp>(o#4_-QM*MZRfk J)<{s^{s5Z%+d%*T literal 0 HcmV?d00001 diff --git a/zeppelin-web/app/fonts/custom-font.svg b/zeppelin-web/app/fonts/custom-font.svg new file mode 100644 index 00000000..fb2769ad --- /dev/null +++ b/zeppelin-web/app/fonts/custom-font.svg @@ -0,0 +1,25 @@ + + + + + +{ + "fontFamily": "custom-font", + "majorVersion": 1, + "minorVersion": 0, + "version": "Version 1.0", + "fontId": "custom-font", + "psName": "custom-font", + "subFamily": "Regular", + "fullName": "custom-font", + "description": "Font generated by IcoMoon." +} + + + + + + + + + \ No newline at end of file diff --git a/zeppelin-web/app/fonts/custom-font.ttf b/zeppelin-web/app/fonts/custom-font.ttf new file mode 100644 index 0000000000000000000000000000000000000000..bea0a6cf02d4f413915282a0c385036f500b502a GIT binary patch literal 1340 zcmb7EO-NKx7(I91%xj*Ojy3)eA!9ie^U_RB6C9`(L16@ywP;bV`EjI~d6P4OE{YaH zEkz+{AFV>#SetOyQm}|z)FO?-Wg7z*&UEg(Z}bsE(I?(}&bi-r?#FxI8wddPcmxeS zSFWAxJ@`KKk;+^C-$~@GLfh!dO+XwX9~rZX1@0m84ENwzb~?TAWMY||x_F*RSxIAI z`5mBzc|MS#5Hf=GFAO8d*8>nnoD%9AKi$&#Io8PT)4!8&iW;Hr4 zN~8DSkaOkky?@t&KxNK|>UrpB<&zu2CEP+54}fTMM^j%@hY0V{j~qUB^mPB=Kwocb zOY?z0g@0#6|G&hD{`x!@oZp%;&EdEii<$9Z)BNcrV%m(w<1tgMOU{vLI(g;SYFC&)lG66~onF|Hui#~B4){)@ zpRT{S-8j67dOmo@%Hp}??(V(`eg~Wb6|9l-1Q?w1O2vqJ-nPo%tnP-NP-Z$&$JuJf z2d5%{hjf)ub#{omG+@E?6=E!PDy%#e)>(VmtyP{0OrnSqY~;{|H1|B&4WuwZeca&@oI*Ex*nN%M z#ALB#=ep8%zEnE_S7|oJ(kv{R)-=Hd_u>dMQ*1$AZ?TaSl8E3grnz2ZtExzdqaCB zHa#&imrlk90Czw4JH`Cdb8pim$vvTeNG#y@Ri?AWF>;JWP;3u(GWmq)=IQU&){O7j z_!!T1f2JSOR)zbycs5Dy7tb6LbKja-7|s`p{Jv7N(YcA-KB!0Vl5h7urLxhi?ggY= zd%0geRG{1wd>UAWwYa{tzGN+`MlwohXN2_X;w&cxIm>Pk9-QJ@!C%P5k3wh}rL|It z94m9MDt&G6I1ze-lY*kET4ymFb9Z&?Be%}ond7aLCjDV62MhIRMmNsmIx@Hmgln5> z+H0CraF=!Pz>&izJGwgC+v@9T_x(-$TM_>M5P$gRr%B(`>I2)3#_UMMjzw+zN4cZM z?MN&ZvCTZIw`^PM)?b;`aIQWRZGvBv3&T^^=hfHhF>`OyYIehuQ`f(gdulEwN~wkV zm5nW-*1m1l!irqO<(}yS-bwi5mFG9AqbsPC=K##loMG>8tjelcOic*gX_Esa_>j*FI=@*F2%#KJeRhV}2D%6oN-Qz+P5)O8gKk8r) z@ofitiR&C}@t@ + diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index 54082c51..6f0fba3b 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -671,6 +671,9 @@ angular.module('zeppelinWebApp') else if (type === 'lineChart') { setD3Chart(type, $scope.paragraph.result, refresh); } + else if (type === 'scatterChart') { + setD3Chart(type, $scope.paragraph.result, refresh); + } } }; @@ -795,7 +798,7 @@ angular.module('zeppelinWebApp') var d3g = []; // select yColumns. - if (type==='pieChart') { + if (type === 'pieChart') { var d = pivotDataToD3ChartFormat(p, true).d3g; $scope.chart[type].x(function(d) { return d.label;}) @@ -810,22 +813,35 @@ angular.module('zeppelinWebApp') }); } } - } else if (type==='multiBarChart') { - d3g = pivotDataToD3ChartFormat(p, true).d3g; + } else if (type === 'multiBarChart') { + d3g = pivotDataToD3ChartFormat(p, true, false).d3g; $scope.chart[type].yAxis.axisLabelDistance(50); } else { - var pivotdata = pivotDataToD3ChartFormat(p, false, true); + var fillMissingValues = (type === 'lineChart' || type === 'stackedAreaChart'); + var pivotdata = pivotDataToD3ChartFormat(p, false, fillMissingValues); var xLabels = pivotdata.xLabels; d3g = pivotdata.d3g; + + // handle string type xlabel $scope.chart[type].xAxis.tickFormat(function(d) { - if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { // to handle string type xlabel + if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { return xLabels[d]; } else { return d; } }); + if (type === 'scatterChart'){ + // handle the problem of tooltip not showing when muliple points have same value. (https://github.com/novus/nvd3/issues/330) + $scope.chart[type].scatter.useVoronoi(false); + // configure how the tooltip looks. + $scope.chart[type].tooltipContent(function(key) { + return '

' + key + '

'; + }); + } else { + // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) + $scope.chart[type].useInteractiveGuideline(true); + } $scope.chart[type].yAxis.axisLabelDistance(50); - $scope.chart[type].useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) $scope.chart[type].forceY([0]); // force y-axis minimum to 0 for line chart. } diff --git a/zeppelin-web/app/styles/custom-font.css b/zeppelin-web/app/styles/custom-font.css new file mode 100644 index 00000000..7d219d17 --- /dev/null +++ b/zeppelin-web/app/styles/custom-font.css @@ -0,0 +1,18 @@ +@font-face { + font-family: 'CustomFont'; + src: url('../fonts/custom-font.eot') format('embedded-opentype'), url('../fonts/custom-font.woff') format('woff'), url('../fonts/custom-font.ttf') format('truetype'), url('../fonts/custom-font.svg') format('svg'); + font-weight: normal; + font-style: normal; +} +.cf { + display: inline-block; + font: normal normal normal 14px/1 CustomFont; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.cf-scatter-chart:before { + content: "\e800"; +} \ No newline at end of file diff --git a/zeppelin-web/app/views/paragraph.html b/zeppelin-web/app/views/paragraph.html index b02a78b6..61b8421a 100644 --- a/zeppelin-web/app/views/paragraph.html +++ b/zeppelin-web/app/views/paragraph.html @@ -126,6 +126,10 @@ ng-class="{'active': isGraphMode('lineChart')}" ng-click="setGraphMode('lineChart', true)"> + @@ -252,6 +256,11 @@ id="p{{paragraph.id}}_lineChart"> + +
+ +
Date: Sun, 8 Mar 2015 12:28:29 +0900 Subject: [PATCH 2/6] Revert "Add scatter chart" This reverts commit 8a81e25e14f4de7bc18de6f973f4c35148fe92ce. --- zeppelin-web/app/fonts/custom-font.eot | Bin 1520 -> 0 bytes zeppelin-web/app/fonts/custom-font.svg | 25 ---------------- zeppelin-web/app/fonts/custom-font.ttf | Bin 1340 -> 0 bytes zeppelin-web/app/fonts/custom-font.woff | Bin 1416 -> 0 bytes zeppelin-web/app/index.html | 1 - .../app/scripts/controllers/paragraph.js | 28 ++++-------------- zeppelin-web/app/styles/custom-font.css | 18 ----------- zeppelin-web/app/views/paragraph.html | 9 ------ 8 files changed, 6 insertions(+), 75 deletions(-) delete mode 100644 zeppelin-web/app/fonts/custom-font.eot delete mode 100644 zeppelin-web/app/fonts/custom-font.svg delete mode 100644 zeppelin-web/app/fonts/custom-font.ttf delete mode 100644 zeppelin-web/app/fonts/custom-font.woff delete mode 100644 zeppelin-web/app/styles/custom-font.css diff --git a/zeppelin-web/app/fonts/custom-font.eot b/zeppelin-web/app/fonts/custom-font.eot deleted file mode 100644 index e5de86b4a8f4f403ebc4bc73ff1a1441a2449ffe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1520 zcmb7EJxo(k6#j01o-HU8Erl3Eit^O-2_hg!(kAL)qQPhsba2pTX(^HZNJ|2PhJi#! z0*Q&cVKT%8T@0He2^s@~4uH`xvS7kM>v!LMg+hwPll0y1eCM3+-oAU@*>D44{sbJ@ zYXXx(GCjBV@-kQ1Oz)DuKL!L4#R#&Vi;g_2quQf1aObcFtZ1( ztROC+1+7-(AQcAX0V**LCt7daJ>Pcxv+paJkNiD~Ce2KJ-{O5HouJ<{U}iI1ee@Gt zJp)5y@!6Nd3-rm0H;I_p@10%v1UUVScP2>qyq-$>J@lIr$=v9XCL%bcj(;c}HE|Zd z=ugl;oHR!>{A1(vC+P=MW-{h{GPg|s9rXt@>1>YYq`BpJf^d2uCc!uEZg;Fy2f5%n z3fqMOIo8-%6n@mZ>w#g4Ad_O`k}?XmsDzccjzFY)TXzfF0jwhhA2nhGmTg_WklN>gE_sj$Y{n|7_zEI)Y452~`c z(UEK}ootS$Q@I0X;odn|Rs`4Vxf$fdjB$d>Icai^#?X%-9%GEp>(o#4_-QM*MZRfk J)<{s^{s5Z%+d%*T diff --git a/zeppelin-web/app/fonts/custom-font.svg b/zeppelin-web/app/fonts/custom-font.svg deleted file mode 100644 index fb2769ad..00000000 --- a/zeppelin-web/app/fonts/custom-font.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - -{ - "fontFamily": "custom-font", - "majorVersion": 1, - "minorVersion": 0, - "version": "Version 1.0", - "fontId": "custom-font", - "psName": "custom-font", - "subFamily": "Regular", - "fullName": "custom-font", - "description": "Font generated by IcoMoon." -} - - - - - - - - - \ No newline at end of file diff --git a/zeppelin-web/app/fonts/custom-font.ttf b/zeppelin-web/app/fonts/custom-font.ttf deleted file mode 100644 index bea0a6cf02d4f413915282a0c385036f500b502a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1340 zcmb7EO-NKx7(I91%xj*Ojy3)eA!9ie^U_RB6C9`(L16@ywP;bV`EjI~d6P4OE{YaH zEkz+{AFV>#SetOyQm}|z)FO?-Wg7z*&UEg(Z}bsE(I?(}&bi-r?#FxI8wddPcmxeS zSFWAxJ@`KKk;+^C-$~@GLfh!dO+XwX9~rZX1@0m84ENwzb~?TAWMY||x_F*RSxIAI z`5mBzc|MS#5Hf=GFAO8d*8>nnoD%9AKi$&#Io8PT)4!8&iW;Hr4 zN~8DSkaOkky?@t&KxNK|>UrpB<&zu2CEP+54}fTMM^j%@hY0V{j~qUB^mPB=Kwocb zOY?z0g@0#6|G&hD{`x!@oZp%;&EdEii<$9Z)BNcrV%m(w<1tgMOU{vLI(g;SYFC&)lG66~onF|Hui#~B4){)@ zpRT{S-8j67dOmo@%Hp}??(V(`eg~Wb6|9l-1Q?w1O2vqJ-nPo%tnP-NP-Z$&$JuJf z2d5%{hjf)ub#{omG+@E?6=E!PDy%#e)>(VmtyP{0OrnSqY~;{|H1|B&4WuwZeca&@oI*Ex*nN%M z#ALB#=ep8%zEnE_S7|oJ(kv{R)-=Hd_u>dMQ*1$AZ?TaSl8E3grnz2ZtExzdqaCB zHa#&imrlk90Czw4JH`Cdb8pim$vvTeNG#y@Ri?AWF>;JWP;3u(GWmq)=IQU&){O7j z_!!T1f2JSOR)zbycs5Dy7tb6LbKja-7|s`p{Jv7N(YcA-KB!0Vl5h7urLxhi?ggY= zd%0geRG{1wd>UAWwYa{tzGN+`MlwohXN2_X;w&cxIm>Pk9-QJ@!C%P5k3wh}rL|It z94m9MDt&G6I1ze-lY*kET4ymFb9Z&?Be%}ond7aLCjDV62MhIRMmNsmIx@Hmgln5> z+H0CraF=!Pz>&izJGwgC+v@9T_x(-$TM_>M5P$gRr%B(`>I2)3#_UMMjzw+zN4cZM z?MN&ZvCTZIw`^PM)?b;`aIQWRZGvBv3&T^^=hfHhF>`OyYIehuQ`f(gdulEwN~wkV zm5nW-*1m1l!irqO<(}yS-bwi5mFG9AqbsPC=K##loMG>8tjelcOic*gX_Esa_>j*FI=@*F2%#KJeRhV}2D%6oN-Qz+P5)O8gKk8r) z@ofitiR&C}@t@ - diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index 6f0fba3b..54082c51 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -671,9 +671,6 @@ angular.module('zeppelinWebApp') else if (type === 'lineChart') { setD3Chart(type, $scope.paragraph.result, refresh); } - else if (type === 'scatterChart') { - setD3Chart(type, $scope.paragraph.result, refresh); - } } }; @@ -798,7 +795,7 @@ angular.module('zeppelinWebApp') var d3g = []; // select yColumns. - if (type === 'pieChart') { + if (type==='pieChart') { var d = pivotDataToD3ChartFormat(p, true).d3g; $scope.chart[type].x(function(d) { return d.label;}) @@ -813,35 +810,22 @@ angular.module('zeppelinWebApp') }); } } - } else if (type === 'multiBarChart') { - d3g = pivotDataToD3ChartFormat(p, true, false).d3g; + } else if (type==='multiBarChart') { + d3g = pivotDataToD3ChartFormat(p, true).d3g; $scope.chart[type].yAxis.axisLabelDistance(50); } else { - var fillMissingValues = (type === 'lineChart' || type === 'stackedAreaChart'); - var pivotdata = pivotDataToD3ChartFormat(p, false, fillMissingValues); + var pivotdata = pivotDataToD3ChartFormat(p, false, true); var xLabels = pivotdata.xLabels; d3g = pivotdata.d3g; - - // handle string type xlabel $scope.chart[type].xAxis.tickFormat(function(d) { - if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { + if (xLabels[d] && (isNaN(parseFloat(xLabels[d])) || !isFinite(xLabels[d]))) { // to handle string type xlabel return xLabels[d]; } else { return d; } }); - if (type === 'scatterChart'){ - // handle the problem of tooltip not showing when muliple points have same value. (https://github.com/novus/nvd3/issues/330) - $scope.chart[type].scatter.useVoronoi(false); - // configure how the tooltip looks. - $scope.chart[type].tooltipContent(function(key) { - return '

' + key + '

'; - }); - } else { - // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) - $scope.chart[type].useInteractiveGuideline(true); - } $scope.chart[type].yAxis.axisLabelDistance(50); + $scope.chart[type].useInteractiveGuideline(true); // for better UX and performance issue. (https://github.com/novus/nvd3/issues/691) $scope.chart[type].forceY([0]); // force y-axis minimum to 0 for line chart. } diff --git a/zeppelin-web/app/styles/custom-font.css b/zeppelin-web/app/styles/custom-font.css deleted file mode 100644 index 7d219d17..00000000 --- a/zeppelin-web/app/styles/custom-font.css +++ /dev/null @@ -1,18 +0,0 @@ -@font-face { - font-family: 'CustomFont'; - src: url('../fonts/custom-font.eot') format('embedded-opentype'), url('../fonts/custom-font.woff') format('woff'), url('../fonts/custom-font.ttf') format('truetype'), url('../fonts/custom-font.svg') format('svg'); - font-weight: normal; - font-style: normal; -} -.cf { - display: inline-block; - font: normal normal normal 14px/1 CustomFont; - font-size: inherit; - text-rendering: auto; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.cf-scatter-chart:before { - content: "\e800"; -} \ No newline at end of file diff --git a/zeppelin-web/app/views/paragraph.html b/zeppelin-web/app/views/paragraph.html index 61b8421a..b02a78b6 100644 --- a/zeppelin-web/app/views/paragraph.html +++ b/zeppelin-web/app/views/paragraph.html @@ -126,10 +126,6 @@ ng-class="{'active': isGraphMode('lineChart')}" ng-click="setGraphMode('lineChart', true)"> -
@@ -256,11 +252,6 @@ id="p{{paragraph.id}}_lineChart"> - -
- -
Date: Sun, 8 Mar 2015 12:58:02 +0900 Subject: [PATCH 3/6] Add scatter chart button --- zeppelin-web/app/fonts/custom-font.eot | Bin 0 -> 1520 bytes zeppelin-web/app/fonts/custom-font.svg | 25 ++++++++++++++++++++++++ zeppelin-web/app/fonts/custom-font.ttf | Bin 0 -> 1340 bytes zeppelin-web/app/fonts/custom-font.woff | Bin 0 -> 1416 bytes zeppelin-web/app/index.html | 1 + zeppelin-web/app/styles/custom-font.css | 18 +++++++++++++++++ zeppelin-web/app/views/paragraph.html | 9 +++++++++ 7 files changed, 53 insertions(+) create mode 100644 zeppelin-web/app/fonts/custom-font.eot create mode 100644 zeppelin-web/app/fonts/custom-font.svg create mode 100644 zeppelin-web/app/fonts/custom-font.ttf create mode 100644 zeppelin-web/app/fonts/custom-font.woff create mode 100644 zeppelin-web/app/styles/custom-font.css diff --git a/zeppelin-web/app/fonts/custom-font.eot b/zeppelin-web/app/fonts/custom-font.eot new file mode 100644 index 0000000000000000000000000000000000000000..e5de86b4a8f4f403ebc4bc73ff1a1441a2449ffe GIT binary patch literal 1520 zcmb7EJxo(k6#j01o-HU8Erl3Eit^O-2_hg!(kAL)qQPhsba2pTX(^HZNJ|2PhJi#! z0*Q&cVKT%8T@0He2^s@~4uH`xvS7kM>v!LMg+hwPll0y1eCM3+-oAU@*>D44{sbJ@ zYXXx(GCjBV@-kQ1Oz)DuKL!L4#R#&Vi;g_2quQf1aObcFtZ1( ztROC+1+7-(AQcAX0V**LCt7daJ>Pcxv+paJkNiD~Ce2KJ-{O5HouJ<{U}iI1ee@Gt zJp)5y@!6Nd3-rm0H;I_p@10%v1UUVScP2>qyq-$>J@lIr$=v9XCL%bcj(;c}HE|Zd z=ugl;oHR!>{A1(vC+P=MW-{h{GPg|s9rXt@>1>YYq`BpJf^d2uCc!uEZg;Fy2f5%n z3fqMOIo8-%6n@mZ>w#g4Ad_O`k}?XmsDzccjzFY)TXzfF0jwhhA2nhGmTg_WklN>gE_sj$Y{n|7_zEI)Y452~`c z(UEK}ootS$Q@I0X;odn|Rs`4Vxf$fdjB$d>Icai^#?X%-9%GEp>(o#4_-QM*MZRfk J)<{s^{s5Z%+d%*T literal 0 HcmV?d00001 diff --git a/zeppelin-web/app/fonts/custom-font.svg b/zeppelin-web/app/fonts/custom-font.svg new file mode 100644 index 00000000..fb2769ad --- /dev/null +++ b/zeppelin-web/app/fonts/custom-font.svg @@ -0,0 +1,25 @@ + + + + + +{ + "fontFamily": "custom-font", + "majorVersion": 1, + "minorVersion": 0, + "version": "Version 1.0", + "fontId": "custom-font", + "psName": "custom-font", + "subFamily": "Regular", + "fullName": "custom-font", + "description": "Font generated by IcoMoon." +} + + + + + + + + + \ No newline at end of file diff --git a/zeppelin-web/app/fonts/custom-font.ttf b/zeppelin-web/app/fonts/custom-font.ttf new file mode 100644 index 0000000000000000000000000000000000000000..bea0a6cf02d4f413915282a0c385036f500b502a GIT binary patch literal 1340 zcmb7EO-NKx7(I91%xj*Ojy3)eA!9ie^U_RB6C9`(L16@ywP;bV`EjI~d6P4OE{YaH zEkz+{AFV>#SetOyQm}|z)FO?-Wg7z*&UEg(Z}bsE(I?(}&bi-r?#FxI8wddPcmxeS zSFWAxJ@`KKk;+^C-$~@GLfh!dO+XwX9~rZX1@0m84ENwzb~?TAWMY||x_F*RSxIAI z`5mBzc|MS#5Hf=GFAO8d*8>nnoD%9AKi$&#Io8PT)4!8&iW;Hr4 zN~8DSkaOkky?@t&KxNK|>UrpB<&zu2CEP+54}fTMM^j%@hY0V{j~qUB^mPB=Kwocb zOY?z0g@0#6|G&hD{`x!@oZp%;&EdEii<$9Z)BNcrV%m(w<1tgMOU{vLI(g;SYFC&)lG66~onF|Hui#~B4){)@ zpRT{S-8j67dOmo@%Hp}??(V(`eg~Wb6|9l-1Q?w1O2vqJ-nPo%tnP-NP-Z$&$JuJf z2d5%{hjf)ub#{omG+@E?6=E!PDy%#e)>(VmtyP{0OrnSqY~;{|H1|B&4WuwZeca&@oI*Ex*nN%M z#ALB#=ep8%zEnE_S7|oJ(kv{R)-=Hd_u>dMQ*1$AZ?TaSl8E3grnz2ZtExzdqaCB zHa#&imrlk90Czw4JH`Cdb8pim$vvTeNG#y@Ri?AWF>;JWP;3u(GWmq)=IQU&){O7j z_!!T1f2JSOR)zbycs5Dy7tb6LbKja-7|s`p{Jv7N(YcA-KB!0Vl5h7urLxhi?ggY= zd%0geRG{1wd>UAWwYa{tzGN+`MlwohXN2_X;w&cxIm>Pk9-QJ@!C%P5k3wh}rL|It z94m9MDt&G6I1ze-lY*kET4ymFb9Z&?Be%}ond7aLCjDV62MhIRMmNsmIx@Hmgln5> z+H0CraF=!Pz>&izJGwgC+v@9T_x(-$TM_>M5P$gRr%B(`>I2)3#_UMMjzw+zN4cZM z?MN&ZvCTZIw`^PM)?b;`aIQWRZGvBv3&T^^=hfHhF>`OyYIehuQ`f(gdulEwN~wkV zm5nW-*1m1l!irqO<(}yS-bwi5mFG9AqbsPC=K##loMG>8tjelcOic*gX_Esa_>j*FI=@*F2%#KJeRhV}2D%6oN-Qz+P5)O8gKk8r) z@ofitiR&C}@t@ + diff --git a/zeppelin-web/app/styles/custom-font.css b/zeppelin-web/app/styles/custom-font.css new file mode 100644 index 00000000..040ba23a --- /dev/null +++ b/zeppelin-web/app/styles/custom-font.css @@ -0,0 +1,18 @@ +@font-face { + font-family: 'CustomFont'; + src: url('../fonts/custom-font.eot') format('embedded-opentype'), url('../fonts/custom-font.woff') format('woff'), url('../fonts/custom-font.ttf') format('truetype'), url('../fonts/custom-font.svg') format('svg'); + font-weight: normal; + font-style: normal; +} +.cf { + display: inline-block; + font: normal normal normal 14px/1 CustomFont; + font-size: inherit; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.cf-scatter-chart:before { + content: "\e800"; +} diff --git a/zeppelin-web/app/views/paragraph.html b/zeppelin-web/app/views/paragraph.html index 2f81cc7d..d50ca311 100644 --- a/zeppelin-web/app/views/paragraph.html +++ b/zeppelin-web/app/views/paragraph.html @@ -126,6 +126,10 @@ ng-class="{'active': isGraphMode('lineChart')}" ng-click="setGraphMode('lineChart', true)"> +
@@ -252,6 +256,11 @@ id="p{{paragraph.id}}_lineChart"> + +
+ +
Date: Sun, 8 Mar 2015 13:02:28 +0900 Subject: [PATCH 4/6] Remove useless 'SetPieChart' function --- .../app/scripts/controllers/paragraph.js | 38 ------------------- 1 file changed, 38 deletions(-) diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index 78a10dd8..8cd12b97 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -870,44 +870,6 @@ angular.module('zeppelinWebApp') $timeout(retryRenderer); }; - var setPieChart = function(data, refresh) { - var xColIndex = 0; - var yColIndexes = []; - var d3g = []; - - // select yColumns. - for (var colIndex = 0; colIndex < data.columnNames.length; colIndex++) { - if (colIndex !== xColIndex) { - yColIndexes.push(colIndex); - } - } - - for (var rowIndex = 0; rowIndex < data.rows.length; rowIndex++) { - var row = data.rows[rowIndex]; - var xVar = row[xColIndex]; - var yVar = row[yColIndexes[0]]; - - d3g.push({ - label: isNaN(xVar) ? xVar : parseFloat(xVar), - value: parseFloat(yVar) - }); - } - - if ($scope.d3.pieChart.data === null || !refresh) { - $scope.d3.pieChart.data = d3g; - $scope.d3.pieChart.options.chart.height = $scope.paragraph.config.graph.height; - - if ($scope.d3.pieChart.api) { - $scope.d3.pieChart.api.updateWithOptions($scope.d3.pieChart.options); - } - } else { - if ($scope.d3.pieChart.api) { - $scope.d3.pieChart.api.updateWithData(d3g); - } - } - }; - - $scope.isGraphMode = function(graphName) { if ($scope.getResultType() === 'TABLE' && $scope.getGraphMode()===graphName) { return true; From 5fce509131f25b2e30590a9d60667f428ef53835 Mon Sep 17 00:00:00 2001 From: Mina Lee Date: Sun, 8 Mar 2015 14:11:15 +0900 Subject: [PATCH 5/6] Add scatter chart --- zeppelin-web/app/index.html | 1 + .../app/scripts/controllers/paragraph.js | 385 ++++++++++++++++-- .../scripts/directives/popover-html-unsafe.js | 15 + zeppelin-web/app/styles/notebook.css | 9 +- zeppelin-web/app/views/paragraph.html | 75 +++- .../app/views/popover-html-unsafe-popup.html | 8 + 6 files changed, 459 insertions(+), 34 deletions(-) create mode 100644 zeppelin-web/app/scripts/directives/popover-html-unsafe.js create mode 100644 zeppelin-web/app/views/popover-html-unsafe-popup.html diff --git a/zeppelin-web/app/index.html b/zeppelin-web/app/index.html index 0f862d9b..b4eaf4e0 100644 --- a/zeppelin-web/app/index.html +++ b/zeppelin-web/app/index.html @@ -148,6 +148,7 @@ + diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index 8cd12b97..4991b169 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -110,6 +110,10 @@ angular.module('zeppelinWebApp') if (!config.graph.groups) { config.graph.groups = []; } + + if (!config.graph.scatter) { + config.graph.scatter = {}; + } }; $scope.getIframeDimensions = function () { @@ -786,46 +790,75 @@ angular.module('zeppelinWebApp') $scope.chart[type] = chart; } - var p = pivot(data); - - var xColIndexes = $scope.paragraph.config.graph.keys; - var yColIndexes = $scope.paragraph.config.graph.values; - var d3g = []; - // select yColumns. - if (type==='pieChart') { - var d = pivotDataToD3ChartFormat(p, true).d3g; + if (type === 'scatterChart') { + var scatterData = setScatterChart(data, refresh); - $scope.chart[type].x(function(d) { return d.label;}) - .y(function(d) { return d.value;}); + var xLabels = scatterData.xLabels; + var yLabels = scatterData.yLabels; + d3g = scatterData.d3g; - if ( d.length > 0 ) { - for ( var i=0; i' + key + ''; + }); + + $scope.chart[type].showDistX(true) + .showDistY(true) + //handle the problem of tooltip not showing when muliple points have same value. + .scatter.useVoronoi(false); + } else { + var p = pivot(data); + if (type === 'pieChart') { + var d = pivotDataToD3ChartFormat(p, true).d3g; + + $scope.chart[type].x(function(d) { return d.label;}) + .y(function(d) { return d.value;}); + + if ( d.length > 0 ) { + for ( var i=0; i 0) { + if ($scope.paragraph.config.graph.keys.length === 0 && $scope.paragraph.result.columnNames.length > 0) { $scope.paragraph.config.graph.keys.push($scope.paragraph.result.columnNames[0]); } - if ($scope.paragraph.config.graph.values.length===0 && $scope.paragraph.result.columnNames.length > 1) { + if ($scope.paragraph.config.graph.values.length === 0 && $scope.paragraph.result.columnNames.length > 1) { $scope.paragraph.config.graph.values.push($scope.paragraph.result.columnNames[1]); } + + if (!$scope.paragraph.config.graph.scatter.xAxis && !$scope.paragraph.config.graph.scatter.yAxis) { + if ($scope.paragraph.result.columnNames.length > 1) { + $scope.paragraph.config.graph.scatter.xAxis = $scope.paragraph.result.columnNames[0]; + $scope.paragraph.config.graph.scatter.yAxis = $scope.paragraph.result.columnNames[1]; + } else if ($scope.paragraph.result.columnNames.length === 1) { + $scope.paragraph.config.graph.scatter.xAxis = $scope.paragraph.result.columnNames[0]; + } + } }; var pivot = function(data) { @@ -1241,6 +1328,240 @@ angular.module('zeppelinWebApp') }; }; + + var setDiscreteScatterData = function(data) { + var xAxis = $scope.paragraph.config.graph.scatter.xAxis; + var yAxis = $scope.paragraph.config.graph.scatter.yAxis; + var group = $scope.paragraph.config.graph.scatter.group; + + var xValue; + var yValue; + var grp; + + var rows = {}; + + for (var i = 0; i < data.rows.length; i++) { + var row = data.rows[i]; + if (xAxis) { + xValue = row[xAxis.index]; + } + if (yAxis) { + yValue = row[yAxis.index]; + } + if (group) { + grp = row[group.index]; + } + + var key = xValue + ',' + yValue + ',' + grp; + + if(!rows[key]) { + rows[key] = { + x : xValue, + y : yValue, + group : grp, + size : 1 + }; + } else { + rows[key].size++; + } + } + + // change object into array + var newRows = []; + for(var r in rows){ + var newRow = []; + if (xAxis) { newRow[xAxis.index] = rows[r].x; } + if (yAxis) { newRow[yAxis.index] = rows[r].y; } + if (group) { newRow[group.index] = rows[r].group; } + newRow[data.rows[0].length] = rows[r].size; + newRows.push(newRow); + } + return newRows; + }; + + var setScatterChart = function(data, refresh) { + var xAxis = $scope.paragraph.config.graph.scatter.xAxis; + var yAxis = $scope.paragraph.config.graph.scatter.yAxis; + var group = $scope.paragraph.config.graph.scatter.group; + var size = $scope.paragraph.config.graph.scatter.size; + + var xValues = []; + var yValues = []; + var rows = {}; + var d3g = []; + + var rowNameIndex = {}; + var colNameIndex = {}; + var grpNameIndex = {}; + var rowIndexValue = {}; + var colIndexValue = {}; + var grpIndexValue = {}; + var rowIdx = 0; + var colIdx = 0; + var grpIdx = 0; + var grpName = ''; + + var xValue; + var yValue; + var row; + + if (!xAxis && !yAxis) { + return { + d3g : [] + }; + } + + for (var i = 0; i < data.rows.length; i++) { + row = data.rows[i]; + if (xAxis) { + xValue = row[xAxis.index]; + xValues[i] = xValue; + } + if (yAxis) { + yValue = row[yAxis.index]; + yValues[i] = yValue; + } + } + + var isAllDiscrete = ((xAxis && yAxis && isDiscrete(xValues) && isDiscrete(yValues)) || + (!xAxis && isDiscrete(yValues)) || + (!yAxis && isDiscrete(xValues))); + + if (isAllDiscrete) { + rows = setDiscreteScatterData(data); + } else { + rows = data.rows; + } + + if (!group && isAllDiscrete) { + grpName = 'count'; + } else if (!group && !size) { + if (xAxis && yAxis) { + grpName = '(' + xAxis.name + ', ' + yAxis.name + ')'; + } else if (xAxis && !yAxis) { + grpName = xAxis.name; + } else if (!xAxis && yAxis) { + grpName = yAxis.name; + } + } else if (!group && size) { + grpName = size.name; + } + + for (i = 0; i < rows.length; i++) { + row = rows[i]; + if (xAxis) { + xValue = row[xAxis.index]; + } + if (yAxis) { + yValue = row[yAxis.index]; + } + if (group) { + grpName = row[group.index]; + } + var sz = (isAllDiscrete) ? row[row.length-1] : ((size) ? row[size.index] : 1); + + if (grpNameIndex[grpName] === undefined) { + grpIndexValue[grpIdx] = grpName; + grpNameIndex[grpName] = grpIdx++; + } + + if (xAxis && rowNameIndex[xValue] === undefined) { + rowIndexValue[rowIdx] = xValue; + rowNameIndex[xValue] = rowIdx++; + } + + if (yAxis && colNameIndex[yValue] === undefined) { + colIndexValue[colIdx] = yValue; + colNameIndex[yValue] = colIdx++; + } + + if (!d3g[grpNameIndex[grpName]]) { + d3g[grpNameIndex[grpName]] = { + key : grpName, + values : [] + }; + } + + d3g[grpNameIndex[grpName]].values.push({ + x : xAxis ? (isNaN(xValue) ? rowNameIndex[xValue] : parseFloat(xValue)) : 0, + y : yAxis ? (isNaN(yValue) ? colNameIndex[yValue] : parseFloat(yValue)) : 0, + size : isNaN(parseFloat(sz))? 1 : parseFloat(sz) + }); + } + + return { + xLabels : rowIndexValue, + yLabels : colIndexValue, + d3g : d3g + }; + }; + + var isDiscrete = function(field) { + var getUnique = function(f) { + var uniqObj = {}; + var uniqArr = []; + var j = 0; + for (var i = 0; i < f.length; i++) { + var item = f[i]; + if(uniqObj[item] !== 1) { + uniqObj[item] = 1; + uniqArr[j++] = item; + } + } + return uniqArr; + }; + + for (var i = 0; i < field.length; i++) { + if(isNaN(parseFloat(field[i])) && + (typeof field[i] === 'string' || field[i] instanceof String)) { + return true; + } + } + + var threshold = 0.05; + var unique = getUnique(field); + if (unique.length/field.length < threshold) { + return true; + } else { + return false; + } + }; + + $scope.isValidSizeOption = function (options, rows) { + var xValues = []; + var yValues = []; + + for (var i = 0; i < rows.length; i++) { + var row = rows[i]; + var size = row[options.size.index]; + + //check if the field is numeric + if (isNaN(parseFloat(size)) || !isFinite(size)) { + return false; + } + + if (options.xAxis) { + var x = row[options.xAxis.index]; + xValues[i] = x; + } + if (options.yAxis) { + var y = row[options.yAxis.index]; + yValues[i] = y; + } + } + + //check if all existing fields are discrete + var isAllDiscrete = ((options.xAxis && options.yAxis && isDiscrete(xValues) && isDiscrete(yValues)) || + (!options.xAxis && isDiscrete(yValues)) || + (!options.yAxis && isDiscrete(xValues))); + + if (isAllDiscrete) { + return false; + } + + return true; + }; + $scope.setGraphHeight = function() { var height = $('#p'+$scope.paragraph.id+'_graph').height(); diff --git a/zeppelin-web/app/scripts/directives/popover-html-unsafe.js b/zeppelin-web/app/scripts/directives/popover-html-unsafe.js new file mode 100644 index 00000000..95eeb209 --- /dev/null +++ b/zeppelin-web/app/scripts/directives/popover-html-unsafe.js @@ -0,0 +1,15 @@ +'use strict'; + +angular.module('zeppelinWebApp') + .directive('popoverHtmlUnsafePopup', function() { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, + templateUrl: 'views/popover-html-unsafe-popup.html' + }; + }) + + .directive('popoverHtmlUnsafe', ['$tooltip', function($tooltip) { + return $tooltip('popoverHtmlUnsafe', 'popover', 'click'); + }]); diff --git a/zeppelin-web/app/styles/notebook.css b/zeppelin-web/app/styles/notebook.css index 5e324485..5b08f4b3 100644 --- a/zeppelin-web/app/styles/notebook.css +++ b/zeppelin-web/app/styles/notebook.css @@ -373,7 +373,7 @@ font-size:12px; height:auto; overflow : auto; - min-height: 200px; + /*min-height: 200px;*/ border-top: 1px solid #ecf0f1; } @@ -418,6 +418,13 @@ cursor: pointer; } +.tableDisplay .option .columns a:focus, +.tableDisplay .option .columns a:hover { + text-decoration: none; + outline: 0; + outline-offset: 0px; +} + .graphContainer { position:relative; margin-bottom: 5px; diff --git a/zeppelin-web/app/views/paragraph.html b/zeppelin-web/app/views/paragraph.html index d50ca311..96bf7590 100644 --- a/zeppelin-web/app/views/paragraph.html +++ b/zeppelin-web/app/views/paragraph.html @@ -161,7 +161,7 @@
-
+
Keys @@ -222,6 +222,79 @@
+
+
+ + xAxis +
    +
  • + +
    • +
+ +
+
+ + yAxis +
    +
  • + +
    • +
+ +
+
+ + group +
    +
  • + +
    • +
+ +
+
+ + size + +
    +
  • + +
    • +
+ +
+
+
diff --git a/zeppelin-web/app/views/popover-html-unsafe-popup.html b/zeppelin-web/app/views/popover-html-unsafe-popup.html new file mode 100644 index 00000000..5b7002db --- /dev/null +++ b/zeppelin-web/app/views/popover-html-unsafe-popup.html @@ -0,0 +1,8 @@ +
+
+ +
+

+
+
+
\ No newline at end of file From 0f9a48b781ed743ef2958eb2b006d937309fd5a2 Mon Sep 17 00:00:00 2001 From: Damien Corneau Date: Tue, 10 Mar 2015 17:41:11 +0900 Subject: [PATCH 6/6] Add Size value to scatterchart tooltip --- zeppelin-web/app/scripts/controllers/paragraph.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/zeppelin-web/app/scripts/controllers/paragraph.js b/zeppelin-web/app/scripts/controllers/paragraph.js index 4991b169..ce67f9f0 100644 --- a/zeppelin-web/app/scripts/controllers/paragraph.js +++ b/zeppelin-web/app/scripts/controllers/paragraph.js @@ -816,8 +816,14 @@ angular.module('zeppelinWebApp') }); // configure how the tooltip looks. - $scope.chart[type].tooltipContent(function(key) { - return '

' + key + '

'; + $scope.chart[type].tooltipContent(function(key, x, y, data) { + var tooltipContent = '

' + key + '

'; + if ($scope.paragraph.config.graph.scatter.size && + $scope.isValidSizeOption($scope.paragraph.config.graph.scatter, $scope.paragraph.result.rows)) { + tooltipContent += '

' + data.point.size + '

'; + } + + return tooltipContent; }); $scope.chart[type].showDistX(true)