Merge pull request #172 from brenopolanski/master
Add the tinycolor2 JavaScript color tooling
diff --git a/webapps/proteus-new/src/main/webapp/resources/package-lock.json b/webapps/proteus-new/src/main/webapp/resources/package-lock.json
index 92b1e28..22ede8e 100644
--- a/webapps/proteus-new/src/main/webapp/resources/package-lock.json
+++ b/webapps/proteus-new/src/main/webapp/resources/package-lock.json
@@ -5472,12 +5472,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@@ -5492,17 +5494,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"core-util-is": {
"version": "1.0.2",
@@ -5619,7 +5624,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"ini": {
"version": "1.3.5",
@@ -5631,6 +5637,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@@ -5645,6 +5652,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@@ -5652,12 +5660,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"minipass": {
"version": "2.2.4",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"safe-buffer": "^5.1.1",
"yallist": "^3.0.0"
@@ -5676,6 +5686,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"minimist": "0.0.8"
}
@@ -5756,7 +5767,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
- "dev": true
+ "dev": true,
+ "optional": true
},
"object-assign": {
"version": "4.1.1",
@@ -5768,6 +5780,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"wrappy": "1"
}
@@ -5889,6 +5902,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
+ "optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@@ -11530,6 +11544,11 @@
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
"dev": true
},
+ "tinycolor2": {
+ "version": "1.4.1",
+ "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
+ "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g="
+ },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
diff --git a/webapps/proteus-new/src/main/webapp/resources/package.json b/webapps/proteus-new/src/main/webapp/resources/package.json
index c2b9944..6278851 100644
--- a/webapps/proteus-new/src/main/webapp/resources/package.json
+++ b/webapps/proteus-new/src/main/webapp/resources/package.json
@@ -11,6 +11,7 @@
"dependencies": {
"axios": "^0.18.0",
"d3": "^5.6.0",
+ "tinycolor2": "^1.4.1",
"tween.js": "^16.6.0",
"vue": "^2.5.17",
"vue-material-design-icons": "^1.6.0",
diff --git a/webapps/proteus-new/src/main/webapp/resources/src/components/bublechartcomp.vue b/webapps/proteus-new/src/main/webapp/resources/src/components/bublechartcomp.vue
index 95766ab..101201b 100644
--- a/webapps/proteus-new/src/main/webapp/resources/src/components/bublechartcomp.vue
+++ b/webapps/proteus-new/src/main/webapp/resources/src/components/bublechartcomp.vue
@@ -19,10 +19,10 @@
<v-toolbar dark color="primary">
<v-toolbar-title class="white--text">All MIME Types</v-toolbar-title>
</v-toolbar>
-
+
<svg id="bublesvg" width="400" height="300"></svg>
</v-card>
-
+
</section>
</template>
@@ -30,7 +30,9 @@
<script lang="js">
import * as d3 from 'd3';
import axios from 'axios';
+ import tinycolor from 'tinycolor2';
import store from './../store/store';
+
export default {
name: 'bublechartcomp',
store,
@@ -56,14 +58,14 @@
var diameter = 860,
format = d3.format(",d"),
color = d3.scaleOrdinal(d3.schemeBrBG[11]);
-
-
+
+
var bubble = d3.pack()
.size([diameter, diameter])
.padding(1.5);
-
+
var svg = d3.select("#bublesvg")
.attr("width", diameter)
.attr("height", diameter)
@@ -71,11 +73,11 @@
axios.get(this.origin + '/solr/statistics/select?q=type:software&fl=mime_*&wt=json')
- .then(response2=>{
+ .then(response2=>{
if(response2.data.response.numFound!=null){
axios.get(this.origin + '/solr/statistics/select?q=type:software&rows='+response2.data.response.numFound+'&fl=mime_*&wt=json')
.then(response=>{
-
+
var docs = response.data.response.docs;
var resultingData = [];
@@ -95,67 +97,74 @@
}
}
-
+
for(x in mime) {
var obj = {};
var jsonObject = {};
var child = [];
obj["name"] = x;
jsonObject["name"] = x;
-
+
jsonObject["size"] = mime[x];
child.push(jsonObject);
obj["children"] = child;
resultingData.push(obj);
}
-
+
var test = {}
test["name"] = "flare"
test["children"] = resultingData
-
+
var range = d3.schemeBrBG[11];
range = range.concat(d3.schemePRGn[11]);
color = d3.scaleOrdinal(range);
-
+
var root = d3.hierarchy(classes(test))
.sum(function(d){
return d.value;
})
-
+
bubble(root);
var node = svg.selectAll(".node")
.data(root.children)
-
+
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
node.append("title")
- .text(function(d) {
- return d.data.className + ": " + format(d.value);
+ .text(function(d) {
+ return d.data.className + ": " + format(d.value);
});
node.append("circle")
.attr("r", function(d) { return d.r; })
.attr("style",function(d){
-
+
return "fill:"+color(d.data.className);});
node.append("text")
.attr("dy", ".3em")
+ .attr('style', d => {
+ return `fill: ${
+ tinycolor(color(d.data.className)).isLight()
+ ? '#000000'
+ : '#ffffff'
+ }`;
+ })
.style("text-anchor", "middle")
.text(function(d) { return d.data.className.substring(0, d.r / 3); });
});
}
-
- });
-
+ });
+
+
// Returns a flattened hierarchy containing all leaf nodes under the root.
function classes(root) {
@@ -173,12 +182,12 @@
d3.select(self.frameElement).style("height", diameter + "px");
},
-
+
},
-
-
+
+
computed: {
origin(){
return store.state.origin;
diff --git a/webapps/proteus-new/src/main/webapp/resources/src/components/licensepiecomp.vue b/webapps/proteus-new/src/main/webapp/resources/src/components/licensepiecomp.vue
index 7b6f078..7efeee2 100644
--- a/webapps/proteus-new/src/main/webapp/resources/src/components/licensepiecomp.vue
+++ b/webapps/proteus-new/src/main/webapp/resources/src/components/licensepiecomp.vue
@@ -20,7 +20,7 @@
<v-toolbar dark color="primary">
<v-toolbar-title class="white--text">License Types</v-toolbar-title>
</v-toolbar>
-
+
<svg id="pielicensesvg" width="420" height="600"></svg>
</v-card>
</section>
@@ -30,7 +30,9 @@
<script lang="js">
import * as d3 from 'd3';
import axios from 'axios';
- import store from './../store/store'
+ import tinycolor from 'tinycolor2';
+ import store from './../store/store';
+
export default {
name: 'licensepiecomp',
store,
@@ -119,6 +121,13 @@
arc.append("text")
.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
.attr("dy", "0.35em")
+ .attr('style', d => {
+ return `fill: ${
+ tinycolor(color(d.data.key)).isLight()
+ ? '#000000'
+ : '#ffffff'
+ }`;
+ })
.text(function(d) { return d.data.key; });
var legend = d3.select("#pielicensesvg").append("svg")
@@ -144,9 +153,9 @@
console.log(result);
});
}
-
+
});
-
+
}
},
computed: {
@@ -166,7 +175,7 @@
.arc path {
stroke: transparent
-
+
}
#licensecard {
diff --git a/webapps/proteus-new/src/main/webapp/resources/src/components/topmimepiecomp.vue b/webapps/proteus-new/src/main/webapp/resources/src/components/topmimepiecomp.vue
index ea15f77..2f0de09 100644
--- a/webapps/proteus-new/src/main/webapp/resources/src/components/topmimepiecomp.vue
+++ b/webapps/proteus-new/src/main/webapp/resources/src/components/topmimepiecomp.vue
@@ -25,7 +25,7 @@
<v-btn @click="count--;if(count<0)count=0">-</v-btn>
</v-flex>
<v-flex xs3 >
-
+
<v-text-field label="Count" :value="count"></v-text-field>
</v-flex>
<v-flex xs3>
@@ -43,7 +43,9 @@
<script lang="js">
import * as d3 from 'd3';
import axios from 'axios';
- import store from './../store/store'
+ import tinycolor from 'tinycolor2';
+ import store from './../store/store';
+
export default {
name: 'topmimepiecomp',
store,
@@ -68,7 +70,7 @@
if(response2.data.response.numFound!=null){
axios.get(this.origin + '/solr/statistics/select?q=type:software&rows='+response2.data.response.numFound+'&fl=mime_*&wt=json')
.then(function(response) {
-
+
console.log(response.data);
var docs = response.data.response.docs;
var resultingData = [];
@@ -140,6 +142,13 @@
arc.append("text")
.attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
.attr("dy", "0.35em")
+ .attr('style', d => {
+ return `fill: ${
+ tinycolor(color(d.data.key)).isLight()
+ ? '#000000'
+ : '#ffffff'
+ }`;
+ })
.text(function(d) { return d.data.key; });
var legend = d3.select("#pietopmimesvg").append("svg")
@@ -165,9 +174,9 @@
console.log(result);
});
}
-
+
});
-
+
}
},
computed: {
