fix: dtyle conflict with multiple gauges created using the "parentNode" method #367
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
When multiple gauges are created utilizing the "parentNode" method, the obj.config.id is undefined. When the "generateShadow" function is called, the filter is created as "inner-shadow-" for each gauge. This creates a conflict between each gauge on the screen. Attempting to set an "id" didn't work because this took priority and the code looked for the "id" to exist in the dom instead of using the parentNode. I created the classId property to set any arbitrary id to be used as the filter id. This will prevent conflicts and can be used when the parentNode method is used. If a classId is not set, it will default to the previous mechanism.
Bump version #
With some URLS, using window.location.pathname#inner-shadow-id results in an object that cannot be found. This makes the gauge disappear all together. By using a relative anchor, it is always accessible within the scope of the page. Changed it to use url(#inner-shadow-id) which fixes the problem.
|
Also fixed issue where in some instances the gauge will disappear when enabling the shadow. |
Fixed Typo
|
@EliteScientist What about generating a random id when it is undefined? I prefer this approach as it doesn't introduce another option that could cause confusion |
|
@robertsLando That is another option. In my implementation I set classId to the containers id which is randomly generated value. I'll change it to generate a uuid. |
|
@robertsLando I added a uuid generator function and am using that to generate the uuid for each gauge. |
robertsLando
requested changes
Dec 9, 2021
Co-authored-by: Daniel Lando <[email protected]>
robertsLando
approved these changes
Dec 10, 2021
robertsLando
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
When using the "parentNode" method to create gauges, the config.id remains undefined.
The code that generates the styles uses the config.id to define the id of the styles. Because config.id is undefined, this causes a style conflict resulting in every gauge in the screen being affected by the same style.
the config.id method takes precedence over parentNode which means you cannot use it at all.
I created a classId property that can be used to create a unique id for the styles for each instance. If the classId is not defined then the previous mechanism will be the default.