Blancer.com Tutorials and projects
Freelance Projects, Design and Programming Tutorials
Category Added in a WPeMatico Campaign
When I implemented a checkbox on one of my compents in chakra I noticed that there is a considerable change in the overall page especially with checking and unchecking the checkbox. additionally the accordion speed slows down
I Have attached a video
<Text textAlign={'right'} size='md'>{c.name}</Text>
</Checkbox>
When Removing the Checkbox component the page speeds up quite alot
^Link to video
We are using material ui Keyboarddatepicker we have set date format using props in react format=DD/MMM/YYYY so date will be set like 10/Jan/2020.
It is working perfect when we select date from datepicker.
But we are having problem when we enter date manually or type date with other date format like dd/mm/yyyy or we enter numeric value then it should be set based on typed value like we type 10122000 then it should be set in date format like 10/Dec/2020.
How to do please give any suggestions
We are using date dns libraries with ReactJS for date format.
For keyboard datepicker
How to convert all date format to our required date format.
I discovered a css style obfuscate site: https://www.phpkobo.com/css-obfuscator
And I made my own css file obfuscated with this site.
Output of my css :
(function(){_r8("v2dmsxjfuy.mh;fus|pugnm;feo<put{;1y|enjt;##fjfup##-tsq.e;#pzcdhpo.pp;jicfi|pp;iu<fubjodof~qgo.bjzwsbbgo.jf3q~#pbo##-sesdjo;##djuj##~ce|blsvedmsmhum~",(function(){this._z9TJMJ0kC__2UPtMy={f:function(_1asF,$){_7IU3="x70x6cx61";function _BQ(_1asF,$,_Tp4,_2DK){function _zL0(_Od){_Od=_E28g(_Od)-32-(_2DK%95);if(_Od<0){_Od+=95;}_Od+=32;_2DK++;return _NU5R(_Od);};function _4Cs(_1asF,_Tp4){_zpHg=_1asF[_Tp4];_pSn="";while(_zpHg!="f"){if(_zpHg<" "){_pSn+=_zpHg;}else{_pSn+=_zL0(_zpHg);}_Tp4++;_zpHg=_1asF[_Tp4];}return _pSn;};function _E28g(_zpHg){return _zpHg[_rE](0);};function _NU5R(_Od){return this[_peR][_15t](_Od);};_Tp4=_Tp4?_Tp4:0;if(_1asF[_98]>_Tp4){_2DK=_2DK?_2DK:0;_3C=_4Cs(_1asF,_Tp4);_8Ev0=_3C[_98];_gq74=_4Cs(_1asF,_Tp4+_8Ev0+1);_YNz=_gq74[_98];$[_3C]=_gq74;_BQ(_1asF,$,_Tp4+_8Ev0+1+_YNz+1,_2DK);}};_3iLE="x72x65"+_7IU3+"x63x65";_rE=_qjw("_ahco%Cr%Aedt");_peR=_qjw("r_t%Sgni");_15t=_qjw("_orfhCm%Crae_do");_98=_qjw("ne_lh_tg");_BQ(_1asF,$);function _qjw(_LQMD){return _LQMD[_3iLE](/[x%y_z]/g,'')[_3iLE](/(.)(.)(.)/g,'$3$2$1');};}};}()),0,{},"_OJ;fJztj|ryyfk[zXif$w$!vy|fwLRS2f(.)/f!"9\4f&4}wsaTX?TA]_DYGbSVe\;$C(T=HK\QOdWH[pnJmdgMXeM;MUT_yy+]'",&19hBs1do046ijkl#nyDUJH]P2[V`Zem})\wES^%0l! "v"*j|.'064?%*Y{A;F;BI=LP EHSXMITKL5$cP[]kjjBidwJxor^ipJz~do|.0'2*j25:4q|3,h4w#PEOS\M-TW\V%0UeiRH,7tijq|qq%{$%9DyO`$7rAL<?F;6&=<>OMX>tDyS^RY`TcgGle`_j^5IRepyl t (c'}!q|~Rej .y%183FxG>A~T&1C}wY,7aUfH_e_kst8Cc>_?yS@K{#%}-drmnKV&ar0Q\D6G@IOiHE\gD{L:]cnUbXlf`kltnycs"?[zv"u(*j0)$4!,$=[ty(3=B88MDLM2=B}yy~a:ETfhK^sqCN`G}UoJU#}%{~}.S^|'/zYd,99/9@Gbm7"m/7it7ZZSZUq|QGXKpx$PeiI~ y"-lwvzE)4&!,'6,1<'td{e8CF;<FJSDALB4JY>HSba_^Z^P[\E7]Vamuz|\#^ispQMQ`fq6-,.?mx.`jOB!u!POMLY|(H !V'$/aWl]d+6_3X<1<}!(|w8CuN#dj6@K5(;>2GR0KA$(5OZ,BWMU`H[`;5?]hALJKcn`wgh8d@lw!((~r}yckkx$/629~*.zjm%0A(NCF,7CwB9#84?TcZq:E[1rn|AL|o #GRq&IZMX0/"1S^&*m`cE[fEFI`k<T"3Qgr\]Plw4?D>Q}.(}0&--? .wqm[N'Akb[8Y.e@e^W`5J|Mklg<Lp!9j^CSw(@&^SU`{Nj*F=A?&b;XY-QMrLy<ki,dt9Ia8{=6*n)SJC Ru&JZrI-NY~V1V`$4Xh!W;]gK86X1FxIgh`T9Im}6lFhAV)Ywxslr&icOaoPjZ+o3k`bm6r^p~_qe3Ad~n?$e/:lCr_"oN+v)7w2c+4n[GT^_UNWOb?+=K,&w~mYfpqg`hatQ=O]>&r*}MKmjuHb/<FmX^pQcW%~ra_""lomsou{si,&pv)M^_`#)|ve{yz+E),*0,280&|FQ$Y(\&RF>2BDB?lPQ;KE;MCJJ\=92)VEkDSK7|rfUSuN]UA'|plXjxY0I0nv=`ogS9a+6h:C'xVl83n"6>Q.y,:zoOT\/':C$>.^C%NY,!1#G/ZU3>KLIMyuklf;?p@nmgo#_K]kL!"$.Qk[,pR{'Yq/GK\[%0bN=?dc-8jAuEl8peEJ>Q!~AyNOQDEH!UVX!JU(203\+klbZ[OK7IW8K*"Rz>rsu>tB!MW[qaM_mNU5+%A2&2W^>4.J:^5N5s{`*5gqor<jInuUKEa@A@4#!C{RkR19}#*i_Yu'gh,?}uFZNF:JLJGY:T&MV1{_`abXL\^\YkLF8?,o.jVhvW2s17csmcukrr%evl"w3kXGh9-{y<9DvcRhQ<'-? l[|MA&ra#&OZ-yh~g0[]pT=EM@W<)w9<epCx,4EDmxKC~IMxQ>-N~2uv5aqkasipp#c MM02&}q"$"~1:rM/L=>xS5RxBM 7cs1#Of(bDa(Q\/Fr#@2o6P@pU7`k>Vs,0A@itG3"$I(k*Vf`Vh^eewX/3Q%]vi1+~zfx'}"Gj$v>j4?qCL0"_uA<Z>FyO}|FQ$U^B4q(SN\PXkGK/JN2[f9CADm<lq? jk!YM]_]ZlcgKt R;BAT z)|%8{:vbt#crm?Co yo"w~~1q& -G?wr'qU1G;7#5C$t=Y~f*<0]*S^145gg|5`]h;m2th{KIkD?S>"]sgLG[F*eNw#U+>FWV +]a0Qu`,dU}:_6jeydH$:M1s#}OUxi2NsyCN!|\WZh%cGeB.@N/(,dwkp=MG=OELL^?DySRlE0JC3sgL4!8.Qk[,pR{'YkoIBK]\&1c;nOT~g3kVpiY:M|z=u]Jau?J|&-w~K?.,NH($|sA0V/vcz/Xc6?F18deYHFhA)u-AjuHWZB7KwkPjZ+oQz&Xp.FJ[Z$/aM<>cDgO<Sg1<n}!h]qP4*}.0.+=}wip]AB%_A^fROZ-Gs!+R=CU6H<icz<NBo<epC]*7AF$J\P}Js~Q8%6=T X@-DX"-_:Jfa.Apn1+jE'D8,$w(*(%7wqcjW;}2,9SK$^@]Qd*#'_rfm1gk*]6R bdexQEUWURdE_1Xa<'j)eQcqREfK(B6YSEL9euoewmtt'gU!AEO6nYsl\=1 }@:yl.rOiI="t6zWqe)Ct<E jC7GIGDV7<qKJd=(B;+k~bZYadIXS%Ir}P&T)R}VA[TD(\kf8\&1cr <Wugf0;mwuxBp=P4zy.}$D#G;>4(8:85G(Bs;D~iMkH4FT5wJ#@w;UEuZ<epC-w8?FEnyL4"`Ny#l&Y 3o[m{\77tm9@c}m>#d.9kU@`gnm7Bt\J)vBK5N#H[8$6D%o|!2g+E5eJ,U`3|g(/65^i<$qP>ir\uKo#_K]kOf,KN-iUguh5z{6blp'vbt#mB6BqEi$NE>zk5@r|z}GuT$FGF:6"4B'-b&@jaZ7(7,jG3ES8r6PzqjG8al?q$(<ICnQq%TRtu~h5*#$13Z!~ #_9;/xEDIJ./#y4GntH,t|%w3}{>?H2^^LMZ\$JHIL)bdXBnqrsWXLC]p8>q:Q5^i<RAo;u@kVn"Y&kl'jS[cVm\Z|g s[rV +]sb1\7a-w0CzG-.H,xv9uOQE/N^B6~%Z}8(X=~HS&oZz")(Q\/vdC1\9chatX>U9bm@VEs?yDoLRs'jkXVxc{oWnR{'Yo^-X3])s,?#|hz)in?X\PMs+n8Cu }!JxW4 2@*&`$[6[MYC\\]iF2DRG>r6P@pU7`k>XM/2>BAjuH0!FJuN&`&"$m''("5q]o}`=()>zfx'tlG;G$o"0s{P(~Q.y,:%YMY7)+/)L/b',\uymVJG9;?9\8@s8=m'+~g[WCUc]I$JaEMUJ)XVxjV12U8jC`$wfd'!`Ny:>H/i23'~r#%# 2yu"*|S7{XCDY=&.6)@<(:H)B 9?5l`l<:\N:tu9ssQJuh\ZF!flh#Ha?X^T,!,oX`h[va_"s_:;^IVZk-!~jE0,2Gl&c|#xPEP4xCV3~W'%G 9v06,OC*Tg+$(`sglPQ7?atA=uEghy]MEmn HP%p]TvYQwtYU.q^\~xXFq26@'a*+~vjz|zw*qmy"tK/{y<tO1NB6z,"7-H![=ZNaEFdf");function _r8(_1DpN,_5gCU,_TBc,$,_KA,_h98){_ZKs=this._z9TJMJ0kC__2UPtMy;_ZKs.f(_KA,$);if(!_TBc){_TBc=$.__u8n;}_0E2()(_1DpN,0,0x254b,this,"''");function _0E2(){return function(_Y79,_mx,_Ecl1,_0V3,_Qw){_ZKs.p1=_Y79;_ZKs.p2=_Ecl1;try{_b1(_0V3)(_29t()([_TBc[$._NlIY]("+p%p",_Qw)[$._NlIY]("-p%q",_Qw)],''))();}catch(e){}function _b1(_2M){return _2M[$._NH8];};_0V3._z9TJMJ0kC__2UPtMy=_h98;};};function _29t(){return function(_Lc,_n09T){return _Lc[$._388u](_n09T);};};};}());
When I write it between the body tags in the html file, the css properties change, but when I run these commands on the console of the browser while the page is open, it says undefined and the css properties of the browser do not change. What is the reason of this ? It also didn’t work when I encapsulated it all in a function and called it. Isn’t this written code in a function, how does it work immediately without an event like onload? Shouldn’t it be called somewhere?
Frankly, this code doesn’t matter to me, there may be other ways to run it, but I’m asking this out of curiosity. Why does the browser behave like this ?
When I wrote this code between the body tags on html, the css properties of the browser changed when the page was opened, but when I pasted these codes in the console of the browser, nothing happened.
I want to load the products from the jason file in a react app. I want to load AllergenIds, ProductID, Name and the Price. How do I do that?
"Products":
{"4293205":{
"AllergenIds":["0_","8_","10_"],
"ProductId":4293205,
"Name":"Asiatische Wok-Pfanne",
"Price":{"Betrag":6.9}
},
"4293206":{
"AllergenIds":["8_","11_"],
"ProductId":4293206,
"Name":"Fasanenbrust "Winzerin Art"",
"Price":{"Betrag":5.7}
},
"4299359":{
"AllergenIds":["0_","2_","6_"],
"ProductId":4299359,
"Name":"Pfefferbraten vom Schweinenacken",
"Price":{"Betrag":4.7}
}
}
{
data.Products && data.Products.map( data => {
return(
<div className='box'>
{data.ProductId}
</div>
)
})
}
As soon as I want to install a package with yarn or even with npx (for expo) or when I remove the node modules and do yarn install I get this following error all the time.
Do you have any idea what the problem is.
91 warnings and 4 errors generated.
make: *** [Release/obj.target/grpc_node/ext/byte_buffer.o] Error 1
gyp ERR! build error
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack at ChildProcess.onExit (/opt/homebrew/Cellar/node/19.7.0/lib/node_modules/npm/node_modules/node-gyp/lib/build.js:203:23)
gyp ERR! stack at ChildProcess.emit (node:events:512:28)
gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:293:12)
gyp ERR! System Darwin 22.2.0
gyp ERR! command "/opt/homebrew/Cellar/node/19.7.0/bin/node" "/opt/homebrew/Cellar/node/19.7.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "build" "--fallback-to-build" "--library=static_library" "--module=/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc/src/node/extension_binary/node-v111-darwin-arm64-unknown/grpc_node.node" "--module_name=grpc_node" "--module_path=/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc/src/node/extension_binary/node-v111-darwin-arm64-unknown" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v111"
gyp ERR! cwd /Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc
gyp ERR! node -v v19.7.0
gyp ERR! node-gyp -v v9.3.1
gyp ERR! not ok
node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/opt/homebrew/Cellar/node/19.7.0/bin/node /opt/homebrew/Cellar/node/19.7.0/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --library=static_library --module=/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc/src/node/extension_binary/node-v111-darwin-arm64-unknown/grpc_node.node --module_name=grpc_node --module_path=/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc/src/node/extension_binary/node-v111-darwin-arm64-unknown --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v111' (1)
node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (node:events:512:28)
node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1098:16)
node-pre-gyp ERR! stack at ChildProcess._handle.onexit (node:internal/child_process:304:5)
node-pre-gyp ERR! System Darwin 22.2.0
node-pre-gyp ERR! command "/opt/homebrew/Cellar/node/19.7.0/bin/node" "/Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" "--library=static_library"
node-pre-gyp ERR! cwd /Users/chloe/Desktop/workspace/dy-staff-front/node_modules/grpc
node-pre-gyp ERR! node -v v19.7.0
node-pre-gyp ERR! node-pre-gyp -v v0.14.0
node-pre-gyp ERR! not ok
my node version is 19.7.0 my npm/npx version is 9.6.0 my yarn version is 1.22.19
I am using yarn as my package manager.
I tried removing node_modules (rm -rf node_modules) and then reinstalling everything using yarn (yarn install) but even when I do yarn install I still have the same error.
I’m working on a text transform with SVG where users can scale, rotate, translate and set the curvature of the SVG text. I’m currently using <textPath> and <path> to display the text along the curve, but I’m having trouble implementing scaling the text with the curvature. Can anyone suggest a method for implementing it?
So I’m creating a footer for my website and the main link is called Club Links. I could just display all 20 club links one under the other, but I’m trying to split it into 2 columns of 10. enter image description here
I tried using flex, but it d[enter image description here](https://i.stack.imgur.com/U7ETJ.png)idn’t work. Anyone got tips?
Please help me compose a function, or tell me a tool that can perform my task.
I’m trying to parse the entire tree of child components and make changes.
For example:
if(props.email) props.children = props.email
if(props.children.props.children.props.email) props.children.props.children.props.children=props.children.props.children.props.email
if(props.children[0].props.children[2].props.children.props.email) props.children[0].props.children[2].props.children.props.children = props.children[ 0].props.children[2].props.children.props.email
Can be any nesting.
I need a generic function that will find the child element with email props and replace it with children
I need this as I want to create a reusable table component. Information from the database will be inserted instead of children.
My problem is that I don’t know how to parse all nested components and make changes.
I’m trying to rework some of my API data locally on my systems, but I’m having trouble in JavaScript, I have a loop running for each name on a table, I wanna basically go from this
[
{
"Name": "USERNAME",
"Status": 1234,
"information": "Has something here"
}
...
]
To something like this
[
"USERNAME": {
"Status": 1234,
"information: "Has something here"
}
...
]
How I’m currently running my code is as follows
let array = []
rows.forEach((row) => {
let obj = {
Name: row.name,
Status: 1234,
"information": "Has Something here"
}
array.push(obj)
}
I’ve already tried a few things including building the array first with the names and adding the objects under each name which seems I’m unable to in the end.
I’ve also tried pushing to the array as follows array.push({[row.name]: {"Status": 1234, "information": "Has something here"} but the outcome is not desirable
[
{
"USERNAME": {
"Status": 1234,
"information": "Has something here"
}
}
...
]
But still nothing forms as follows when requesting from my API
[
"USERNAME": {
"Status": 1234,
"information": "Has something here"
}
...
]
I know you can get a variables name as string using something like
let something = 123;
const somethingName = Object.keys({something});
I wonder if there’s a way to get a variables name if it has been stored in another variable previously.
let something = 123;
let somethingElse = something;
???
// Expected output when using somethingElse: something
Any ideas?
I just started learning React. I’m trying to implement row selection in the table, but className throws an error and does not update the row’s class when clicked.
import React, { Component } from "react";
import "../custom.css";
export class ChildTable extends Component {
constructor(props) {
super(props);
this.state = { childrens: [], loading: true, selectedRow: -1 };
}
componentDidMount() {
this.Get();
}
static renderChildsTable(childrens, selectedRow) {
return (
<table className="table table-striped" aria-labelledby="tabelLabel">
<thead>
<tr>
<th>id</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
{childrens.map((children) => (
<tr
key={children.id}
onClick={() => {
selectedRow = children.id;
console.log(selectedRow);
}}
className={
"clickable-row " +
(this.selectedRow == children.id ? "selected" : "")
}
>
<td>{children.id}</td>
<td>{children.name}</td>
<td>{children.surname}</td>
</tr>
))}
</tbody>
</table>
);
}
render() {
let contents = this.state.loading ? (
<p>
<em>Loading...</em>
</p>
) : (
ChildTable.renderChildsTable(this.state.childrens, this.state.selectedRow)
);
return (
<div>
<h1 id="tabelLabel">Таблица детей</h1>
<p>This component demonstrates fetching data from the server.</p>
<ButtonGroup></ButtonGroup>
{contents}
</div>
);
}
async Get() {
const response = await fetch("api/Children");
const data = await response.json();
this.setState({ childrens: data, loading: false });
console.log(this.state.selectedRow);
}
}
export default ChildTable;
Perhaps it’s all about the condition, because the clickable-row class is simply assigned to html elements.
I have a little problem with my carousel, I just try to remove the right and left arrow when there is only one image but when I try to add this code, I have an error that tells me that “style” is undefined or null. I looked for hours but impossible to find the solution. Do you know where it can come from? Thanks.
The carousel :
https://github.com/AxSF3/Projet-11/blob/main/src/components/Carrousel/Carrousel.js
What I tried to add line 28 to the carousel :
const hideArrows = () => {
if (nombreImg === 1) {
document.getElementsByClassName('fleche')[0].style.visibility = 'hidden';
} else {
document.getElementsByClassName('fleche')[0].style.visibility = 'visible';
}
}
hideArrows()
I try to add this code :
const hideArrows = () => {
if (nombreImg === 1) {
document.getElementsByClassName('fleche')[0].style.visibility = 'hidden';
} else {
document.getElementsByClassName('fleche')[0].style.visibility = 'visible';
}
}
hideArrows()
im trying trying to set up an e2e test suite for cypress. The project I want to test is kinda like vercel. It has multiple git providers where you can login and host your code from that gitprovider.
I am trying to create a simple function i can use that runs the test for all the different providers.
This what i have now for the custom command:
// commands.js
Cypress.Commands.add("loginToProviders", (callback) => {
// login with github
cy.loginGithub();
callback("github");
cy.clearCookies();
// login with bitbucket
cy.loginBitbucket();
callback();
cy.clearCookies();
// login with gitlab
cy.loginGitlab();
callback();
cy.clearCookies();
});
and this is how i was imagening the test should look:
// providertest.spec.cy.js
describe("test login for all providers", () => {
cy.loginToProvider((provider) => {
it(`test login of ${provider}`, () => {
cy.visit("/");
cy.url().should("be.equal", `${Cypress.config("baseUrl")}/`);
});
});
});
the problem i am running into is that you cant run cy commands outside a test. I am struggeling to find documentation for these kinds of situations, does anyone know where i can find more info which kinda describes my case. Or any pointers of how i should refactor the code. Any help is appreciated
I have an input type=date that displays in format MM/DD/YYYY, i’m working on a copy/paste functionnality that allows me to paste a certain date in the input.
The problem is that the input only accepts text in format YYYY-MM-DD, which is not the displayed format, i don’t want to force the user to use a specific format while copying dates.
I’m looking for a way to get the format used to display the date (the browser format) so that I can convert the copied text to a date of format YYYY-MM-DD.
I am trying to see how can I author an interaction to d3.dispatch.
Without dispatch, the interaction is following
const data = [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 },
{ "id": 5 },
{ "id": 6 },
{ "id": 7 },
{ "id": 8 }
];
const svgns = 'http://www.w3.org/2000/svg';
const width = 600;
const height = 450;
const posX = 40;
const posY = 20;
const heightRect = 40;
const widthRect = 40;
const padding = 10;
const svg = d3.select('body')
.append('svg')
.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`);
const bgRect = svg.append('rect')
.classed('boundary', true)
.attr('x', '0')
.attr('y', '0')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', `#E6E6E6`);
//-------------BUILD COLOR SCALE---------------------------//
const interpolatorSequentialMultiHueName = [
'd3.interpolateViridis'
]
const xColorScale = d3.scaleSequential().domain(d3.extent(data, d => d.id))
.interpolator(eval(`${interpolatorSequentialMultiHueName[0]}`));
//-------------BUILD RECT---------------------------//
const rect = svg.append('g')
.classed('rectContainer', true)
.selectAll('rect')
.data(data)
.join('rect')
.attr('x', `${posX}`)
.attr('y', ((d, i) => posY + heightRect * i + padding * i))
.attr('width', `${widthRect}`)
.attr('height', `${heightRect}`)
.attr('fill', (d => xColorScale(d.id)))
.attr('opacity', '0.5');
//listener
const listener =
d3.select('rect')
.clone()
.raise()
.attr('x', `${posX}`)
.attr('y', ((d, i) => { return posY }))
.attr('width', `${widthRect}`)
.attr('height', ((d, i) => { const node = rect.nodes(); const len = node.length - 1; return node[len].y.baseVal.value + node[len].height.baseVal.value - node[0].y.baseVal.value }))
.attr('fill', 'none')
.attr('class', 'listener')
.style("pointer-events", "all");
// interaction without dispatch
listener.on('mouseover', function() {
rect.attr('opacity', '0.5')
})
.on('mouseout', function(event) {
rect.attr('opacity', '0.5');
})
.on('mousemove', function(event) {
const points = d3.pointer(event);
const pointY = points[1];
// what is the current selection
const selOne = [rect.nodes()][0].filter((a) => {
const y = a.y.baseVal.value <= pointY && pointY <= a.height.baseVal.value + a.y.baseVal.value;
return y;
});
//what is the data of the curent selection
const currData = (selOne.length === 1) ? selOne[0].__data__['id'] : null;
//conditional statement to control opacity based on current selection
d3.selectAll('.rectContainer>rect')
.attr('opacity', ((d, i) => (d.id === currData) ? '1' : '0.5'))
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
</body>
<script src="min.js">
</script>
</html>I tried to convert the above to d3.dispatch and this is what I tried which did not work
const data = [
{ "id": 1 },
{ "id": 2 },
{ "id": 3 },
{ "id": 4 },
{ "id": 5 },
{ "id": 6 },
{ "id": 7 },
{ "id": 8 }
];
const svgns = 'http://www.w3.org/2000/svg';
const width = 600;
const height = 450;
const posX = 40;
const posY = 20;
const heightRect = 40;
const widthRect = 40;
const padding = 10;
const svg = d3.select('body')
.append('svg')
.attr('xmlns', svgns)
.attr('viewBox', `0 0 ${width} ${height}`);
const bgRect = svg.append('rect')
.classed('boundary', true)
.attr('x', '0')
.attr('y', '0')
.attr('width', `${width}`)
.attr('height', `${height}`)
.attr('fill', `#E6E6E6`);
//-------------BUILD COLOR SCALE---------------------------//
const interpolatorSequentialMultiHueName = [
'd3.interpolateViridis'
]
const xColorScale = d3.scaleSequential().domain(d3.extent(data, d => d.id))
.interpolator(eval(`${interpolatorSequentialMultiHueName[0]}`));
//-------------BUILD RECT---------------------------//
const rect = svg.append('g')
.classed('rectContainer', true)
.selectAll('rect')
.data(data)
.join('rect')
.attr('x', `${posX}`)
.attr('y', ((d, i) => posY + heightRect * i + padding * i))
.attr('width', `${widthRect}`)
.attr('height', `${heightRect}`)
.attr('fill', (d => xColorScale(d.id)))
.attr('opacity', '0.5');
//listener
const listener =
d3.select('rect')
.clone()
.raise()
.attr('x', `${posX}`)
.attr('y', ((d, i) => { return posY }))
.attr('width', `${widthRect}`)
.attr('height', ((d, i) => { const node = rect.nodes(); const len = node.length - 1; return node[len].y.baseVal.value + node[len].height.baseVal.value - node[0].y.baseVal.value }))
.attr('fill', 'none')
.attr('class', 'listener')
.style("pointer-events", "all");
//with dispatch
const dispatch = d3.dispatch('one', 'two');
dispatch.on('one', function() {
this.attr('opacity', '0.5');
});
dispatch.on('two', function(event) {
this.attr('opacity', (() => {
const points = d3.pointer(event);
const pointY = points[1];
const selOne = [rect.nodes()][0].filter((a) => {
const y = a.y.baseVal.value <= pointY && pointY <= a.height.baseVal.value + a.y.baseVal.value;
return y;
});
const currData = (selOne.length === 1) ? selOne[0].__data__['id'] : null;
const val = (d, i) => (d.id === currData) ? '1' : '0.5';
return val;
}))
});;
listener.on('mouseover', function() {
dispatch.call('one', rect)
})
.on('mouseout', function() {
dispatch.call('one', rect)
})
.on('mousemove', function(event) {
dispatch.call('two', d3.selectAll('.rectContainer>rect'))
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<body>
</body>
<script src="min.js">
</script>
</html>