Commit 6a5bc3ac authored by alain's avatar alain 🐙
Browse files

improve view toggle & some vis tweaks & some cleanup

parent c337d3eb
......@@ -33,9 +33,8 @@ export default function App() {
<div id="databronnen">
<div id="view-toggle">
weergave:
<span className={view === 'table' ? 'active' : ''} onClick={() => { setView('table') }}>tabel</span>
|
<span className={view === 'vis' ? 'active' : ''} onClick={() => { setView('vis') }}>visualisatie</span>
<span className={view === 'table' ? 'active' : 'inactive'} onClick={() => { setView('table') }}>tabel</span>
<span className={view === 'vis' ? 'active' : 'inactive'} onClick={() => { setView('vis') }}>visualisatie</span>
</div>
{ items && itemsNested ?
<>
......@@ -43,7 +42,7 @@ export default function App() {
{ view === 'vis' && <Vis data={itemsNested} /> }
</>
:
(<div className="loading"><span></span>Bezig met laden...</div>)
(<div className="loading"><span></span>Bronnen laden...</div>)
}
</div>
);
......
......@@ -4,8 +4,8 @@ import * as d3 from 'd3'
export default function Vis(props) {
const width = document.getElementById('databronnen').clientWidth
const height = document.getElementById('databronnen').clientHeight
const margin = 20
const diameter = Math.min(width, height) - 48
const margin = 10
const diameter = Math.min(width, height) - 32
var view, svg, g, circle, text
const focus = useRef(null);
......@@ -34,9 +34,6 @@ export default function Vis(props) {
circle = g.selectAll("circle")
.data(nodes)
.enter().append("circle")
.attr("class", function(d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
.attr("id", function(d){ return d.data.name })
.style("fill", "#00954a")
.on("click", function(event, d) {
if(d.children) {
if (focus.current !== d) zoom(d);
......@@ -49,8 +46,9 @@ export default function Vis(props) {
text = g.selectAll("foreignObject")
.data(nodes)
.enter().append("foreignObject")
.attr("class", function(d) { return d.children ? "theme" : "source"; })
.attr("width", "110")
.attr("height", "100")
.attr("height", "110")
.html(function(d) { return `<div>${d.data.name}</div>`})
.style("display", function(d) { return d.parent === root.current ? "inline" : "none"; })
......@@ -69,7 +67,7 @@ export default function Vis(props) {
transition.selectAll("foreignObject")
.filter(function(d) { return d.parent === focus.current || this.style.display === "inline"; })
.style("fill-opacity", function(d) { return d.parent === focus.current ? 1 : 0; })
.style("opacity", function(d) { return d.parent === focus.current ? 1 : 0; })
.on("start", function(d) { if (d.parent === focus.current) this.style.display = "inline"; })
.on("end", function(d) { if (d.parent !== focus.current) this.style.display = "none"; });
}
......@@ -83,7 +81,7 @@ export default function Vis(props) {
.attr("r", function(d) { return (d.r + 3) * k; })
.attr("transform", function(d) { return `translate(${(d.x - v[0]) * k},${(d.y - v[1]) * k})`; });
text.attr("transform", function(d) { return `translate(${(d.x - v[0]) * k - 55}, ${(d.y - v[1]) * k - 50})`; });
text.attr("transform", function(d) { return `translate(${(d.x - v[0]) * k - 55}, ${(d.y - v[1]) * k - 55})`; });
}
return(
......
$color: #00954a;
#databronnen {
position: relative;
font-family: "Maax", Arial, Helvetica, sans-serif;
......@@ -27,11 +29,63 @@
font-size: 0.9rem;
span {
margin: 0 0.25rem;
position: relative;
padding: 0.25em 0.3em 0.2em;
border-radius: 2px;
cursor: pointer;
user-select: none;
transition: all 200ms ease;
background-color: rgba(0,0,0,0.15);
&:after {
content: "";
position: absolute;
top: 0;
height: 100%;
background-color: $color;
z-index: -1;
transition: all 200ms ease;
border-radius: 3px;
opacity: 0;
}
&:first-of-type {
border-radius: 3px 0 0 3px;
margin-left: 0.5rem;
&:after {
border-radius: 3px 0 0 3px;
right: 0;
left: 100%;
}
&.active:after {
left: 0;
opacity: 1;
}
}
&:last-of-type {
border-radius: 0 3px 3px 0;
&:after {
border-radius: 0 3px 3px 0;
left: 0;
right: 100%;
}
&.active, &:hover {
text-decoration: underline;
&.active:after {
right: 0;
opacity: 1;
}
}
&.active {
color: #FFF;
cursor: default;
}
&.inactive:hover {
background-color: rgba(0,0,0,0.2);
}
}
}
......@@ -49,7 +103,7 @@
height: 2rem;
margin: 1rem 1rem 1rem 0;
vertical-align: middle;
background-color: var(--color-loading, #00954a);
background-color: #00954a;
border-radius: 100%;
animation: pulseScaleOut 1.5s infinite ease-in-out;
animation-delay: 0s;
......@@ -85,16 +139,15 @@
border-right: 1px dashed #ccc;
}
&.thema { min-width: 13rem; max-width: 13rem; }
&.titel { min-width: 13rem; max-width: 13rem; }
&.omschrijving { min-width: 15rem; max-width: 15rem; }
&.url { min-width: 13rem; max-width: 13rem; }
&.scope { min-width: 7rem; max-width: 7rem; }
&.toegang { min-width: 7rem; max-width: 7rem; }
&.type { min-width: 7rem; max-width: 7rem; }
&.formaat { min-width: 7rem; max-width: 7rem; }
&.subthema { min-width: 7rem; max-width: 7rem; }
&.thema { min-width: 13rem; max-width: 15rem; }
&.titel { min-width: 13rem; max-width: 20rem; }
&.omschrijving { min-width: 15rem; max-width: 30rem; }
&.url { min-width: 13rem; max-width: 20rem; }
&.scope { min-width: 7rem; max-width: 9rem; }
&.toegang { min-width: 7rem; max-width: 8rem; }
&.type { min-width: 7rem; max-width: 8rem; }
&.formaat { min-width: 7rem; max-width: 9rem; }
//&.subthema { min-width: 7rem; max-width: 8rem; }
}
thead {
......@@ -242,10 +295,19 @@
width: 100%;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
line-height: 1.25;
text-align: center;
user-select: none;
}
&.theme div {
font-size: 1rem;
font-weight: 500;
}
&.source div {
font-size: 0.75rem;
}
}
}
......
......@@ -69,16 +69,6 @@ export const useSortableData = (items, filter, config = null) => {
return true;
});
// let sortableItems = [...items].map(item => {
// item.disabled = false;
// delete filter.disabled;
// for (var key in filter) {
// //console.log(key, item['titel'])
// if(item[key].toUpperCase().includes(filter[key].toUpperCase()) === false) item.disabled = true;
// }
// return item;
// });
if (sortConfig !== null) {
sortableItems.sort((a, b) => {
if (a[sortConfig.key] < b[sortConfig.key]) {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment