import React from 'react';

function Intro() {
	return (
		<div className='layout-block'>
			<h2>De auto in de stad</h2>
			<p>
				Er gebeurt zoveel in de stad met auto's dat ik het soms even
				niet meer kan volgen. Ongeluk hier, brand daar, aanrijding daar,
				nieuwe auto-showroom hier, nieuwe laadpalen daar. Over dat
				laatste kreeg ik tijdens de debriefing al een apart
				onderbuikgevoel. Ik vind dat zo interessant, omdat het een
				actueel onderwerp is dat steeds meer aan bod komt. Maar, al die
				laadpalen, wanneer worden die gebruikt en worden ze wel àllemaal
				gebruikt? Dat zijn vragen die ik in deze datastory zal
				belichten. In deze datastory zal ik omgeving Hilversum als focus
				hebben, omdat mijn dataset op die omgeving gefocust is.
			</p>
		</div>
	);
}

export default Intro;

return (
		// <div className='layout-block'></div>
		<>
			<g className='parent' ref={parent}></g>
			<div className='layout-block'>
			<h3>Moment van de dag</h3>
				<FilterButton value='Overdag' />
				<FilterButton value="'s Avonds" />
			</div>
			<div className='layout-block'>
			<h3>Status laadpalen</h3>
				<FilterButton value='Beschikbaar' />
				<FilterButton value='Bezet' />
			</div>
			<div className='layout-block'>
				<h2>Beschrijving</h2>
				<p>
					Dit is data van een API endpoint dat bijhoudt hoeveel
					laadpalen er per parkeergebied (denk aan parkeerterein) of
					parkeermogelijkheid (denk aan een straat) bezet en
					beschikbaar zijn. Hoewel dit een live API is, heb ik
					handmatig op twee interessante tijdstippen de data
					gekopieerd. Dat zijn de tijdstippen 08:00u 's ochtends en
					20:00u 's avonds. De dag dat deze data is gemeten is op een
					doordeweekse dag (dinsdag). Ik heb voor deze tijdstippen
					gekozen, omdat ik ze vrij interessant vond. Ik wilde een
					goede onderscheid maken tussen ochtend en avond, dus daarom
					heb ik voor 08:00u en twaalf uur later 20:00u gekozen. Dit
					zijn juist de momenten wanneer iedereen ongeveer naar
					zijn/haar werk gaat en wanneer iedereen thuis is. Een
					toekomststreven zou zijn dat ik nog een dag uit het weekend
					pak om deze dag te vergelijken met de doordeweeks dag. Dat
					zou nog behoorlijk interessant kunnen worden. Al met al,
					door deze datavisualisatie komen er interessante inzichten
					uit die ik hieronder bespreek. Beste inzoom transform
					values:
					transform="translate(-5409.990278326705,-2739.821940846097)
					scale(12.357011994069868)"
				</p>
			</div>
		</>
	);

<input value='dag' />

import React from 'react';
import styled from 'styled-components';

// Styling - input
const StyledInput = styled.input`
	cursor: pointer;
`;

// Styling - label
const StyledLabel = styled.label`
	cursor: pointer;
	font-size: 1rem;

    /* Hover - label */
	:hover {
		text-decoration: underline;
		cursor: pointer;
		color: rgb(53, 80, 50);
	}
`;

// Create the Buttons
function FilterButton({ value }) {
	return (
		<>
			<StyledInput type='radio' id={value} name={value} value={value} />
			<StyledLabel for={value}>{value}</StyledLabel>
		</>
	);
}

export default FilterButton;

function Dataviz({ node }) {
	const parent = useRef(node);
	console.log(parent);
	useEffect(() => {
		createMapPlot();
	});

	return (
		<>
			<g className='parent' ref={parent}></g>
			<FilterButton value='Overdag' />
			<FilterButton value="'s Avonds" />
		</>
	);

...code that creates the dataviz...
}

import React from 'react';
import styled from 'styled-components';

const StyledInput = styled.input`
    cursor: pointer;
`

const StyledLabel = styled.label`
    cursor: pointer;
    font-size: 1rem;

    :hover {
        text-decoration: underline;
	cursor: pointer;
        color: rgb(53, 80, 50);
    }
`

function Button({value}) {
	return (
		<>
		   <StyledInput type='radio' value={value} />
                   <StyledLabel htmlFor={value}>{value}</StyledLabel>
		</>
	);
}

export default Button;