How to make google maps search box with Multiple markers and and with different infowindow/info Popup Open onClick - maps

I am trying to make Google Map with multiple markers and search box with different Infowindow of our locations in only one country on click and I am not able to do further,
I have written this Code:-
<html>
<head>
<title>Medplus Clinic Locator</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- <link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script> -->
<link rel="stylesheet" href="map-style.css">
<script src="mapjs.js"></script>
</head>
<style>
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#description {
font-family: Roboto;
font-size: 15px;
font-weight: 300;
}
#infowindow-content .title {
font-weight: bold;
}
#infowindow-content {
display: none;
}
#map #infowindow-content {
display: inline;
}
.pac-card {
background-color: #fff;
border: 0;
border-radius: 2px;
box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 0 0.5em;
font: 400 18px poppins, Arial, sans-serif;
overflow: hidden;
font-family: Roboto;
padding: 0;
}
#pac-container {
padding: 10px 5px;
margin-right: 12px;
}
.pac-controls {
display: inline-block;
padding: 5px 11px;
}
.pac-controls label {
font-family: Roboto;
font-size: 12px;
font-weight: 300;
}
#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}
#pac-input:focus {
border-color: #1B5EA9;
}
#title {
color: #fff;
background-color: #1B5EA9;
font-size: 25px;
font-weight: 500;
padding: 6px 12px;
}
</style>
<script>
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 52.632469, lng: -1.689423 },
zoom: 7,
mapTypeControl: false,
});
const card = document.getElementById("pac-card");
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
const center = { lat: 53.81078096004558, lng: -1.5359415045562201 }; /* old { lat: 50.064192, lng: -130.605469 }*/
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
north: center.lat + 0.1,
south: center.lat - 0.1,
east: center.lng + 0.1,
west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
bounds: defaultBounds,
componentRestrictions: { country: "uk" },
fields: ["address_components", "geometry", "icon", "name"],
strictBounds: false,
types: ["establishment"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);
// Set initial restriction to the greater list of countries.
autocomplete.setComponentRestrictions({
country: ["uk"],
});
const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);
autocomplete.setBounds(newBounds);
const infowindow = new google.maps.InfoWindow();
const infowindowContent = document.getElementById("infowindow-content");
infowindow.setContent(infowindowContent);
const marker = new google.maps.Marker({
map, anchorPoint: new google.maps.Point(0, -29),
});
autocomplete.addListener("place_changed", () => {
infowindow.close();
marker.setVisible(false);
const place = autocomplete.getPlace();
if (!place.geometry || !place.geometry.location) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No address available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(14); // Why 17? Because it looks good.
}
marker.setPosition(place.geometry.location);
marker.setVisible(true);
let address = "";
ma
if (place.address_components) {
address = [
(place.address_components[0] &&
place.address_components[0].short_name) ||
"",
(place.address_components[1] &&
place.address_components[1].short_name) ||
"",
(place.address_components[2] &&
place.address_components[2].short_name) ||
"",
].join(" ");
}
infowindowContent.children["place-icon"].src = place.icon;
infowindowContent.children["place-name"].textContent = place.name;
infowindowContent.children["place-address"].textContent = address;
infowindow.open(map, marker);
});
// Sets a listener on a given radio button. The radio buttons specify
// the countries used to restrict the autocomplete search.
function setupClickListener(id, uk) {
const radioButton = document.getElementById(id);
radioButton.addEventListener("click", () => {
autocomplete.setComponentRestrictions({ country: uk });
});
}
setupClickListener("changecountry-usa", "uk");
setupClickListener("changecountry-usa-and-uot", ["uk"]);
// Set the map's style to the initial value of the selector.
const styleSelector = document.getElementById("style-selector");
map.setOptions({ styles: styles[styleSelector.value] });
// Apply new JSON when the user selects a different style.
styleSelector.addEventListener("change", () => {
map.setOptions({ styles: styles[styleSelector.value] });
});
}
const styles = {
default: [],
silver: [
{
elementType: "geometry",
stylers: [{ color: "#f5f5f5" }],
},
{
elementType: "labels.icon",
stylers: [{ visibility: "off" }],
},
{
elementType: "labels.text.fill",
stylers: [{ color: "#616161" }],
},
{
elementType: "labels.text.stroke",
stylers: [{ color: "#f5f5f5" }],
},
{
featureType: "administrative.land_parcel",
elementType: "labels.text.fill",
stylers: [{ color: "#bdbdbd" }],
},
{
featureType: "poi",
elementType: "geometry",
stylers: [{ color: "#eeeeee" }],
},
{
featureType: "poi",
elementType: "labels.text.fill",
stylers: [{ color: "#757575" }],
},
{
featureType: "poi.park",
elementType: "geometry",
stylers: [{ color: "#e5e5e5" }],
},
{
featureType: "poi.park",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
{
featureType: "road",
elementType: "geometry",
stylers: [{ color: "#ffffff" }],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{ color: "#757575" }],
},
{
featureType: "road.highway",
elementType: "geometry",
stylers: [{ color: "#dadada" }],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{ color: "#616161" }],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
{
featureType: "transit.line",
elementType: "geometry",
stylers: [{ color: "#e5e5e5" }],
},
{
featureType: "transit.station",
elementType: "geometry",
stylers: [{ color: "#eeeeee" }],
},
{
featureType: "water",
elementType: "geometry",
stylers: [{ color: "#c9c9c9" }],
},
{
featureType: "water",
elementType: "labels.text.fill",
stylers: [{ color: "#9e9e9e" }],
},
],
/* adding multiple markers */
}
window.initMap = initMap;
</script>
<body>
<div class="pac-card" id="pac-card">
<div>
<div id="title">Find the Medplus nearest Clinic</div>
<div id="country-selector" class="pac-controls">
<input type="radio" name="type" id="changecountry-usa" />
<label for="changecountry-usa">Search by Post Code/Region</label>
<input type="radio" name="type" id="changecountry-usa-and-uot" checked="checked"/>
<label for="changecountry-usa-and-uot">Search by Address</label
>
</div>
</div>
<div id="pac-container">
<input id="pac-input" type="text" placeholder="Enter a location" />
</div>
</div>
<div id="map"></div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon" />
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
<!-- map coloring to sliver -->
<div id="style-selector-control" class="map-control">
<select id="style-selector" class="selector-control">
<option value="silver">Silver</option>
</select>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</body>
</html>
I want to make like this as mentioned (screen shot)
enter image description here
anyone please resolve this if possible, thank you!

Related

failed to implement responsive react slick can anyone solve

explain the problem here..,whats is problem here,i want to make my slick responsive
const settings = {
centerMode: true,
centerPadding: '10px',
slidesToShow: 5,
speed: 500,
slidesToScroll: 1,
arrows: true,
dots: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
},
},
],
};
import React from "react";
import Ddata from "./Ddata";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
const DCard = () => {
const settings = {
centerMode: true,
centerPadding: '10px',
slidesToShow: 5,
speed: 500,
slidesToScroll: 1,
arrows: true,
dots: false,
responsive: [
{
breakpoint: 768,
settings: {
arrows: false,
slidesToShow: 3,
},
},
{
breakpoint: 480,
settings: {
arrows: false,
slidesToShow: 1,
},
},
],
};
return (
<>
<Slider {...settings}>
{Ddata.map((val, index) => {
return (
<>
<div className='product' key={index}>
<div className="box">
<div className='img'>
<img src={val.cover} alt='' width='100%'/>
</div>
<h4>{val.name}</h4>
<span>${val.price}</span>
</div>
</div>
</>
)
})}
</Slider>
</>
)
}
export default DCard```
Here is the solution.
I have code your problem.
It might help you just have a look.
Thank You for the consideration :)
App.js
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import "./App.css";
const Ddata = [
{
id: 1,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
{
id: 2,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
{
id: 3,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
{
id: 4,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
{
id: 5,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
{
id: 6,
cover:
"https://images.unsplash.com/photo-1655800030256-a14581f818bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzMnx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60",
name: "car",
price: "10000",
},
];
function App() {
const settings = {
dots: true,
infinite: false,
speed: 500,
slidesToShow: 4,
slidesToScroll: 4,
arrows: false,
responsive: [
{
breakpoint: 320,
settings: { slidesToShow: 1, slidesToScroll: 1, infinite: false },
},
{
breakpoint: 768,
settings: { slidesToShow: 2, slidesToScroll: 2, infinite: false },
},
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: true,
},
},
{
breakpoint: 2080,
settings: {
slidesToShow: 4,
slidesToScroll: 4,
infinite: true,
dots: true,
},
},
],
};
return (
<div className='container'>
<Slider {...settings}>
{Ddata.map((val, i) => (
<div key={val.id}>
<div className='card'>
<img src={val.cover} alt={val.name} />
<h4>{val.name}</h4>
<p>{val.price}</p>
</div>
</div>
))}
</Slider>
</div>
);
}
export default App;
App.css
body {
padding-top: 40px;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.slick-slider {
margin: 30px auto 50px;
width: auto;
}
h3 {
background: #00558b;
color: #fff;
line-height: 100px;
text-align: center;
font-size: 36px;
margin: 10px;
padding: 2%;
position: relative;
}
.card {
padding: 8px;
position: relative;
margin: 15px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.25);
border-top: 6px solid #d8d8d8;
transition: all 0.3s ease-in-out;
z-index: 1;
text-align: center;
}
.card img {
width: 250px;
}
.card:hover {
border-top: 6px solid #0080ad;
cursor: pointer;
transform: translateY(0px);
}
.card h4 {
text-transform: uppercase;
color: #3e4042;
}
.card p {
line-height: 1.5;
}
.slick-prev {
background: black;
}
.slick-next {
background: black;
}
.slick-dots li {
margin: 0 16px;
}
.slick-dots li button:before {
content: " ";
background: #d8d8d8;
opacity: 1;
height: 4px;
width: 40px;
}
.slick-dots li.slick-active button:before {
content: " ";
background: #0080ad;
opacity: 1;
height: 4px;
width: 40px;
}

Google StreetView in extjs 6

I'm new to extjs and cant find a way to put a google StreetView inside a panel. Can someone point me in the right direction?. I have tried from interpreting an html inside a panel to the old GMapPanel but I doesn't work.
Currently I have this function where the panel shows up but doesn't show the street view
function () {
alert("mostrar street view");
new Ext.Panel({
id: "streetView",
xtype: "map",
constrain: true,
floating: true,
resize: true,
width: 600,
height: 400,
closable: true,
style: {
backgroundColor: "#fff",
//backgroundColor: '#000',
border: "1px solid black",
},
listeners: {
click: Ext.Window({
layout: "fit",
closeAction: "hide",
title: "GPanorama Window",
width: 400,
height: 300,
x: 480,
y: 60,
items: {
xtype: "gmappanel",
gmapType: "panorama",
setCenter: {
lat: 42.345573,
long: -71.098326,
},
},
}),
},
draggable: {
delegate: "div",
},
}).show();
I have also tried placing the property html as follows html:'CODE-BELOW'
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<style type="text/css">
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
</style>
<script>
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{ position: fenway, pov: { heading: 34, pitch: 10 } }
);
map.setStreetView(panorama);
}
</script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initialize&libraries=&v=weekly"
async></script>
</body>

React Buttons change color from parent component

I'm learning react and making a simple quiz where the div changes color based on if the solution is correct or not, but I want to reset the color when the "Next" or "Previous" question is selected from the parent component. I tried creating a prop called clearColor and when that is true reset the color from within the component but this isn't quite working. I was wondering how to best go about this? Because I am so new to react I wasn't even quite sure what to google so any help is appreciated!
class Button extends React.Component {
constructor(props) {
super(props);
this.state = this.getInitialState();
}
componentWillMount() {
this.initialState = this.state
}
getInitialState = () => ({
bgColor: ""
})
resetState = () => {
if (this.props.clearColor) {
this.setState(this.initialState)
}
}
boxClick = (e) => {
if (this.props.isCorrect) {
this.setState({
bgColor: "#9ef0bc"
})
} else {
this.setState({
bgColor: "#f56342"
})
}
}
render() {
return (
<div className="boxClickCss"
style={{backgroundColor: this.state.bgColor}}
onClick={this.boxClick}>{this.props.name}</div>
);
}
}
function Quiz() {
const questions = [
{
questionText: 'What is the capital of France?',
answerOptions: [
{ answerText: 'New York', isCorrect: false },
{ answerText: 'London', isCorrect: false },
{ answerText: 'Paris', isCorrect: true },
{ answerText: 'Dublin', isCorrect: false },
],
},
{
questionText: 'Who is CEO of Tesla?',
answerOptions: [
{ answerText: 'Jeff Bezos', isCorrect: false },
{ answerText: 'Elon Musk', isCorrect: true },
{ answerText: 'Bill Gates', isCorrect: false },
{ answerText: 'Tony Stark', isCorrect: false },
],
},
{
questionText: 'The iPhone was created by which company?',
answerOptions: [
{ answerText: 'Apple', isCorrect: true },
{ answerText: 'Intel', isCorrect: false },
{ answerText: 'Amazon', isCorrect: false },
{ answerText: 'Microsoft', isCorrect: false },
],
},
{
questionText: 'How many Harry Potter books are there?',
answerOptions: [
{ answerText: '1', isCorrect: false },
{ answerText: '4', isCorrect: false },
{ answerText: '6', isCorrect: false },
{ answerText: '7', isCorrect: true },
],
},
];
const [currentQuestion, setCurrentQuestion] = React.useState(0);
const [clearColor, setClearColor] = React.useState(false)
const nextClicked = () => {
setClearColor(true);
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
}
};
const previousClicked = () => {
setClearColor(true)
if (currentQuestion <= 0) {
setCurrentQuestion(0);
} else {
const nextQuestion = currentQuestion - 1;
setCurrentQuestion(nextQuestion);
}
}
return (
<div className='quiz'>
<div className='app'>
<div className='question-section'>
<div className='question-count'>
<span>Question {currentQuestion + 1}</span>/{questions.length}
</div>
<div className='question-text'>{questions[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questions[currentQuestion].answerOptions.map((answerOption) => (
<Button name={answerOption.answerText} isCorrect={answerOption.isCorrect} clearColor={clearColor} />
))}
</div>
</div>
<br></br>
<div className='buttons'>
<button className="prev" onClick={() => previousClicked()}>Previous</button>
<button className="next" onClick={() => nextClicked()}>Next</button>
</div>
</div>
);
}
ReactDOM.render(
<Quiz />,
document.getElementById('root')
);
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* {
font-family: "Verdana", cursive, sans-serif;
color: #014650;
}
body {
background-color: #014650;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.app {
display: flex;
justify-content: space-evenly;
}
.score-section {
display: flex;
font-size: 24px;
align-items: center;
}
/* QUESTION/TIMER/LEFT SECTION */
.question-section {
width: 100%;
position: relative;
}
.question-count {
margin-bottom: 20px;
}
.question-count span {
font-size: 28px;
}
.question-text {
margin-bottom: 12px;
}
.timer-text {
background: rgb(230, 153, 12);
padding: 15px;
margin-top: 20px;
margin-right: 20px;
border: 5px solid rgb(255, 189, 67);
border-radius: 15px;
text-align: center;
}
/* ANSWERS/RIGHT SECTION */
.answer-section {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.boxClickCss {
width: 80%;
font-size: 16px;
color: #014650;
background-color: white;
border-radius: 15px;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
border: 5px solid #234668;
cursor: pointer;
margin-top: 15px;
}
.boxClickCss:hover {
background-color: #6A939A;
}
button {
width: 100%;
font-size: 16px;
color: #7BC8C3;
background-color: #252d4a;
border-radius: 15px;
display: flex;
padding: 5px;
justify-content: flex-start;
align-items: center;
border: 5px solid #234668;
cursor: pointer;
margin-top: 15px;
}
.correct {
background-color: #2f922f;
}
.incorrect {
background-color: #ff3333;
}
button:hover {
background-color: #555e7d;
}
button:focus {
outline: none;
}
button svg {
margin-right: 5px;
}
.buttons {
display: flex;
justify-content: space-between;
}
.prev {
width: 30%;
text-align: center;
}
.next {
width: 30%;
text-align: center;
}
.quiz {
background-color: #DEF2F0;
width: 450px;
min-height: 200px;
height: min-content;
border-radius: 15px;
padding: 20px;
box-shadow: 10px 10px 42px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-
dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
<!-- This div's content will be managed by React. -->
</div>
I also have a codepen here if that is easier to work with: https://codepen.io/mayagans/pen/mdOypGG?editors=1111 I tried looking into lifting up state so I can change the bgColor in the parent component but I'm not sure that is react-y? Any help on how to tackle this appreciated!
This is how I would do it. I would just lift all the state up to Quiz component. Also would keep boxClick function in Quiz component and pass it to Button component. And I am colouring the button only which title match currently selected answer using setAnswer hook.
const Button = ({answer, name, bgColor, isCorrect, boxClick, setAnswer}) => {
return (
<div className="boxClickCss"
style={{backgroundColor: (answer === name) && bgColor}}
onClick={(e) => {
boxClick(isCorrect)
setAnswer(name)
}}>
{name}
</div>
)
}
const Quiz = () => {
const questions = [
{
questionText: 'What is the capital of France?',
answerOptions: [
{ answerText: 'New York', isCorrect: false },
{ answerText: 'London', isCorrect: false },
{ answerText: 'Paris', isCorrect: true },
{ answerText: 'Dublin', isCorrect: false },
],
},
{
questionText: 'Who is CEO of Tesla?',
answerOptions: [
{ answerText: 'Jeff Bezos', isCorrect: false },
{ answerText: 'Elon Musk', isCorrect: true },
{ answerText: 'Bill Gates', isCorrect: false },
{ answerText: 'Tony Stark', isCorrect: false },
],
},
{
questionText: 'The iPhone was created by which company?',
answerOptions: [
{ answerText: 'Apple', isCorrect: true },
{ answerText: 'Intel', isCorrect: false },
{ answerText: 'Amazon', isCorrect: false },
{ answerText: 'Microsoft', isCorrect: false },
],
},
{
questionText: 'How many Harry Potter books are there?',
answerOptions: [
{ answerText: '1', isCorrect: false },
{ answerText: '4', isCorrect: false },
{ answerText: '6', isCorrect: false },
{ answerText: '7', isCorrect: true },
],
},
];
const [currentQuestion, setCurrentQuestion] = React.useState(0);
const [bgColor, setbgColor] = React.useState('')
const [answer, setAnswer] = React.useState('')
const boxClick = isCorrect => {
if(isCorrect) {
setbgColor("#9ef0bc")
} else {
setbgColor("#f56342")
}
}
const nextClicked = () => {
const nextQuestion = currentQuestion + 1;
if (nextQuestion < questions.length) {
setCurrentQuestion(nextQuestion);
}
};
const previousClicked = () => {
if (currentQuestion <= 0) {
setCurrentQuestion(0);
} else {
const nextQuestion = currentQuestion - 1;
setCurrentQuestion(nextQuestion);
}
}
return (
<div className='quiz'>
<div className='app'>
<div className='question-section'>
<div className='question-count'>
<span>Question {currentQuestion + 1}</span>/{questions.length}
</div>
<div className='question-text'>{questions[currentQuestion].questionText}</div>
</div>
<div className='answer-section'>
{questions[currentQuestion].answerOptions.map((answerOption) => (
<Button name={answerOption.answerText} isCorrect={answerOption.isCorrect} boxClick={boxClick} bgColor={bgColor} setAnswer={setAnswer} answer={answer} />
))}
</div>
</div>
<br></br>
<div className='buttons'>
<button className="prev" onClick={() => previousClicked()}>Previous</button>
<button className="next" onClick={() => nextClicked()}>Next</button>
</div>
</div>
);
}
ReactDOM.render(
<Quiz />,
document.getElementById('root')
);
You need to lsiten to props changes during componentDidUdpate like this, to check:
componentDidUpdate() {
if (this.props.clearColor && this.state.bgColor) {
this.setState(this.initialState)
}
}
Moving the state up is reacty and you could be using that.
I would recommend that or moving it into a context.
Also maybe look into function components, which will be the main way to write react in the future.

How do I dynamically adjust the size of the React chart 2 pie chart

titles come dynamically. The number is not clear. That's why I can't give a fixed height. The graphic is getting smaller. How can I make the chart size dynamic ?
const options = {
legend: {
"position": "bottom",
align:'start',
display:true,
itemWrap: true,
},
responsive: true,
maintainAspectRatio: false,
animation: false,
};
<div className={styles['department-charts__card__altCard']}>
<Doughnut
data={doughnutData}
options={options}
/>
</div>
If the Legend is too much, the graphic gets smaller. With Legend, the chart does not appear in a separate container. When I check it looks like this
<canvas height="600" width="542" class="chartjs-render-monitor" style="display: block; height: 300px; width: 271px;"></canvas>
I want the cake to be at least 300 pixels. With Legend it will be more comfortable to check whether the pie is in a different container. How can I make this show dynamic? Pie does not appear at all on small screens. If there are 3 or 4 in some values, it is not a problem. If it's too much, it doesn't fit. I don't want to hide the legend
Amme hizmeti,
Ben bu şekilde çözdüm. Özel bir efsane yarattım
import { Doughnut } from 'react-chartjs-2';
const options = {
legend: {
"position": "bottom",
display:false,
},
responsive: true,
maintainAspectRatio: false,
animation: false,
offset:true
};
let chartInstance = null;
const DepartmentCharts = ({
t, departmentDistribution
}) => {
const keys = departmentDistribution.map(it => {
const key = it.key
return t(key)
}) || [t('salesAndMarketing'), t('ik'), t('management')]
const values = departmentDistribution.map(it => it.value) || [0, 0, 0]
const doughnutData = {
labels: keys,
datasets: [{
data: values,
backgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#8bc34a',
'#6c429b',
'#00a860',
'#0154a3',
'#f78f1e',
"#CCCC99",
"#666666",
"#FFCC66",
"#6699CC",
"#663366",
"#9999CC",
"#CCCCCC",
"#669999",
"#CCCC66",
"#CC6600",
"#9999FF",
"#0066CC",
"#99CCCC",
"#999999",
"#FFCC00",
"#009999",
"#99CC33",
"#FF9900",
"#999966",
"#66CCCC",
"#339966",
"#CCCC33",
"#003f5c",
"#665191",
"#a05195",
"#d45087",
"#2f4b7c",
"#f95d6a",
"#ff7c43",
"#ffa600",
"#EF6F6C",
"#465775",
"#56E39F",
"#59C9A5",
"#5B6C5D",
"#0A2342",
"#2CA58D",
"#84BC9C",
"#CBA328",
"#F46197",
"#DBCFB0",
"#545775"
],
hoverBackgroundColor: [
'#FF6384',
'#36A2EB',
'#FFCE56',
'#8bc34a',
'#6c429b',
'#00a860',
'#0154a3',
'#f78f1e',
"#CCCC99",
"#666666",
"#FFCC66",
"#6699CC",
"#663366",
"#9999CC",
"#CCCCCC",
"#669999",
"#CCCC66",
"#CC6600",
"#9999FF",
"#0066CC",
"#99CCCC",
"#999999",
"#FFCC00",
"#009999",
"#99CC33",
"#FF9900",
"#999966",
"#66CCCC",
"#339966",
"#CCCC33",
"#003f5c",
"#665191",
"#a05195",
"#d45087",
"#2f4b7c",
"#f95d6a",
"#ff7c43",
"#ffa600",
"#EF6F6C",
"#465775",
"#56E39F",
"#59C9A5",
"#5B6C5D",
"#0A2342",
"#2CA58D",
"#84BC9C",
"#CBA328",
"#F46197",
"#DBCFB0",
"#545775"
]
}]
};
const handleClick = (e, index) => {
const ctx = chartInstance.chartInstance;
const meta = ctx.getDatasetMeta(0);
// See controller.isDatasetVisible comment
meta.data[index].hidden = !meta.data[index].hidden;
// Toggle strikethrough class
if (e.currentTarget.classList.contains("disable-legend")) {
//console.log("çizgiyi kaldır")
e.currentTarget.classList.remove("disable-legend");
e.currentTarget.style.textDecoration = "inherit";
} else {
//console.log("çizgi çiz")
e.currentTarget.classList.add("disable-legend");
e.currentTarget.style.textDecoration = "line-through";
}
chartInstance.chartInstance.update();
};
useEffect(() => {
const legend = chartInstance.chartInstance.generateLegend();
document.getElementById("legend").innerHTML = legend;
document.querySelectorAll("#legend li").forEach((item, index) => {
item.addEventListener("click", (e) => handleClick(e, index));
});
}, [doughnutData]);
return (
<div className={styles['department-charts']}>
<Card className={styles['department-charts__card']}>
<CardHeader
title={`${t('departmentTitle')}`}
align='center'
/>
<CardContent>
<div className={styles['department-charts__card__altCard']}>
<Doughnut
data={doughnutData}
options={options}
ref={input => {
chartInstance = input;
}}
/>
</div>
<div id="legend" className={styles['department-charts__card__altCard__legend']}/>
</CardContent>
</Card>
</div>
);
};
style.css - efsane kısmı sizin için yeterli olabilir
.department-charts {
height: 100%;
&__card {
height: 100%;
padding: 16px;
&__altCard{
min-height: 235px;
&__legend{
color: #666666;
ul{
list-style: none;
font: 12px Verdana;
white-space: nowrap;
display: inline-block;
padding-top: 20px;
font-family: "Helvetica Neue";
}
li{
cursor: pointer;
float: left;
padding-left: 7px;
span{
width: 36px;
height: 12px;
display: inline-block;
margin: 0 5px 8px 0;
vertical-align: -9.4px;
}
}
}
}
}
}
.disable-legend {
text-decoration: line-through;
}

With React-Select, how can I make the dropdown accessible through a React-Bootstrap-Glyphicon?

I wanted to create a dropdown using React-Select, but instead of the UI looking like this:
I wanted it to look like this:
This is my current code:
dropDown = R.createElement(Select, {
options: options,
valueKey: 'value',
labelKey: 'name',
clearable: false,
placeholder: "Action",
searchable: false,
autosize: false,
onChange: function (opt) {
if (opt.callback === undefined && opt.callback !== "function") { return; }
opt.callback({
importable: importable,
scheduledImportable: sImportable
}, index);
},
optionRenderer: function (ele) {
return R.createElement(
'span',
{ style: { color: ele.color} },
R.createElement('span', { className: ele.icon},null, " "),
ele.name
);
}
});
Any help would be greatly appreciated.
Is it ok to use another element to help?
<div className="select-wrapper">
<span className="glyphicon glyphicon-align-left" aria-hidden="true"></span>
<Select .... />
</div>
Then css
.select-wrapper {
position:relative;
}
.select-wrapper .glyphicon {
position: absolute;
z-index: 5;
display: block;
top: 7px;
left: 10px;
color: #ccc;
pointer-events: none;
}

Resources