chrismattmann closed pull request #172: Add the tinycolor2 JavaScript color
tooling
URL: https://github.com/apache/drat/pull/172
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
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 92b1e280..22ede8ea 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 c2b99448..6278851b 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 95766ab3..101201b5 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 @@ the License.
<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 @@ the License.
<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 @@ the License.
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 @@ the License.
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 @@ the License.
}
}
-
+
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 @@ the License.
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 7b6f0787..7efeee21 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 @@ the License.
<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 @@ the License.
<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 @@ the License.
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 @@ the License.
console.log(result);
});
}
-
+
});
-
+
}
},
computed: {
@@ -166,7 +175,7 @@ the License.
.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 ea15f771..2f0de093 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 @@ the License.
<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 @@ the License.
<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 @@ the License.
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 @@ the License.
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 @@ the License.
console.log(result);
});
}
-
+
});
-
+
}
},
computed: {
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
With regards,
Apache Git Services
