Option ifOverflow='extendDomain' not working anymore for ReferenceLine and ReferenceArea #3438
Closed
1 task done
Assignees
Labels
bug
General bug label
Comments
|
Aren't these the same? |
|
@ckifer #3379 also occurs in earlier versions, so they are different bugs. I had a quick look into the code and found out that the problem here is that the It looks like this was introduced in version 2.4.0 when the default props of the |
|
I haven't checked yet but I certainly don't remember removing anything from ReferenceLine. Weird |
|
I think that was the PR: #3283 |
|
Got it thank you, I'll take a look when I have time |
|
As a workaround you can set |
|
Basically this is the culprit recharts/src/util/DetectReferenceElementsDomain.ts Lines 39 to 53 in 4ee4124 A fatal flaw of Recharts is that it takes advantage of defaultProps in the fact that it reaches into element props from a reference to that element. Line 43 tries to get recharts/src/util/ReactUtils.ts Line 100 in 4ee4124
All that said I'm going to revert the commit to fix this |
ckifer
added a commit
that referenced
this issue
Mar 14, 2023
…nd ReferenceLine since default props is deprecated (#3455) …(#3283)" This reverts commit ea13805. <!--- Provide a general summary of your changes in the Title above --> ## Description <!--- Describe your changes in detail --> See comment here #3438 (comment) Basically recharts breaks down without defaultProps because it references props set by defaultProps _outside_ of said component (antipattern alert 🚫) before the components are initialized/invoked. Default parameters do not get set until the component is run - before that function components only have reference to the props sent by the user. This will be a huge undertaking to fix. For now revert the change. Two other small changes with this revert: * fixed annoying eslint issue * added storybook test ## Related Issue <!--- This project only accepts pull requests related to open issues --> <!--- If suggesting a new feature or change, please discuss it in an issue first --> <!--- If fixing a bug, there should be an issue describing it with steps to reproduce --> <!--- Please link to the issue here: --> #3438 ## Motivation and Context <!--- Why is this change required? What problem does it solve? --> bug introduced in 2.4.x ## How Has This Been Tested? <!--- Please describe in detail how you tested your changes. --> <!--- Include details of your testing environment, and the tests you ran to --> <!--- see how your change affects other areas of the code, etc. --> * existing tests pass * run on storybook * settings are now set correctly * add storybook test ## Screenshots (if appropriate):  ## Types of changes <!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: --> - [x] Bug fix (non-breaking change which fixes an issue) - [ ] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change) ## Checklist: <!--- Go over all the following points, and put an `x` in all the boxes that apply. --> <!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! --> - [x] My code follows the code style of this project. - [ ] My change requires a change to the documentation. - [ ] I have updated the documentation accordingly. - [ ] I have added tests to cover my changes. - [x] All new and existing tests passed. Co-authored-by: Coltin Kifer <ckifer@amazon.com>
|
Merged in #3455 This will be released next minor version |
|
Released in 2.5! |
This was referenced Jun 9, 2023
Closed
import React from 'react';
import { Icon } from 'react-icons-kit';
import { eyeOff } from 'react-icons-kit/feather/eyeOff';
import { eye } from 'react-icons-kit/feather/eye';
const CustomIcon = ({ icon = eyeOff, size = 20, ...props }) => {
return <Icon icon={icon} size={size} {...props} />;
};
export default CustomIcon;
"use client";
import { useState } from "react";
import axios from 'axios';
import CustomIcon from "./Icon";
import { eyeOff } from 'react-icons-kit/feather/eyeOff';
import { eye } from 'react-icons-kit/feather/eye';
import { useRouter } from 'next/navigation'
import { toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { signIn } from "next-auth/react";
const LoginForm = ({ switchToSignupTab }: { switchToSignupTab: any }) => {
const [showPassword, setShowPassword] = useState(false);
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [result, setresult] = useState("");
const type = showPassword ? "text" : "password";
const icon = showPassword ? eye : eyeOff;
const router = useRouter()
const handleSignupClick = () => {
switchToSignupTab();
console.log("signup clicked");
};
const togglePasswordVisibility = () => {
setShowPassword(!showPassword);
};
const handleLogin = async (e: { preventDefault: () => void; }) => {
e.preventDefault();
const result = await signIn("credentials", { username: email, password: password, redirect: true, callbackUrl: '/' })
};
return (
<section className="shadow-none border-none outline-none">
{/* {result} */}
<div className="flex flex-col items-center justify-center h-full ">
<div className="w-full bg-secondary rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700 ">
<div className="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Melden Sie sich bei Ihrem Konto an
</h1>
<form className="space-y-4 md:space-y-6" onSubmit={handleLogin}>
<div>
<label
htmlFor="email"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Deine E-Mail
</label>
<input
type="email"
name="email"
id="email"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@firma.ch"
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div>
<label
htmlFor="username"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Nutzername
</label>
<input
type="username"
name="username"
id="username"
className="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Nike"
/>
</div>
<div>
<label
htmlFor="password"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Passwort
</label>
<div className="flex bg-white rounded-lg border-2 border-gray-300">
<input
type={type}
name="password"
id="password"
placeholder="••••••••"
className="bg-gray-50 border border-gray-300 border-none text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required
onChange={(e) => setPassword(e.target.value)}
/>
<button
type="button"
onClick={togglePasswordVisibility}
className="relative transform -translate-y-1/2 text-gray-400 focus:outline-none m-1"
>
<CustomIcon icon={icon} size={20} />
</button>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-start">
<div className="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
className="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
/>
</div>
<div className="ml-3 text-sm">
<label
htmlFor="remember"
className="text-gray-500 dark:text-gray-300"
>
Erinnere dich an mich
</label>
</div>
</div>
<a
href="#"
className="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Passwort vergessen?
</a>
</div>
<button
type="submit"
className="w-full text-secondary bg-primary hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
anmelden
</button>
<p className="text-sm font-light text-gray-500 dark:text-gray-400">
Sie haben noch kein Konto?{" "}
<button
type="button"
onClick={handleSignupClick}
className="font-medium text-primary-600 hover:underline dark:text-primary-500"
>
Registrieren
</button>
</p>
</form>
</div>
</div>
</div>
</section>
);
};
export default LoginForm;sorry for format asking help first time |
can you help me in this code |
|
@idealistraj9 please see #3615 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Reproduction link
Steps to reproduce
Add a
ReferenceLineorReferenceAreathat falls outside of the legend domains and set the propifOverflowto'extendDomain'.What is expected?
The domains are extended to fit the reference object.
What is actually happening?
The reference object is drawn, but the domains are not extended. This basically behaves as the option
'visible'.This only happens since version 2.4.0
By changing the version in the code sandbox you can easily verify that it works correctly for version 3.3.2
The text was updated successfully, but these errors were encountered: