From 2b45ff9a39af78b448517c406dd81c0277643441 Mon Sep 17 00:00:00 2001 From: John Hall Date: Tue, 6 Aug 2024 21:54:41 -0400 Subject: [PATCH] update hover info --- inst/dist/@cori-risi/components/HoverInfo.d.ts | 1 + inst/dist/@cori-risi/components/HoverInfo.d.ts.map | 2 +- inst/dist/@cori-risi/components/HoverInfo.js | 2 +- inst/dist/@cori-risi/components/HoverInfo.js.map | 2 +- lib/@cori-risi/components/HoverInfo.tsx | 6 ++++-- 5 files changed, 8 insertions(+), 5 deletions(-) diff --git a/inst/dist/@cori-risi/components/HoverInfo.d.ts b/inst/dist/@cori-risi/components/HoverInfo.d.ts index 1e4cf014..29246f8c 100644 --- a/inst/dist/@cori-risi/components/HoverInfo.d.ts +++ b/inst/dist/@cori-risi/components/HoverInfo.d.ts @@ -35,5 +35,6 @@ export default function HoverInfo(props: { hoverInfo: HoverObject; xOffset?: number; yOffset?: number; + zIndex?: number; }): React.JSX.Element; //# sourceMappingURL=HoverInfo.d.ts.map \ No newline at end of file diff --git a/inst/dist/@cori-risi/components/HoverInfo.d.ts.map b/inst/dist/@cori-risi/components/HoverInfo.d.ts.map index ac9a7ae9..2b171e85 100644 --- a/inst/dist/@cori-risi/components/HoverInfo.d.ts.map +++ b/inst/dist/@cori-risi/components/HoverInfo.d.ts.map @@ -1 +1 @@ -{"version":3,"file":"HoverInfo.d.ts","sourceRoot":"","sources":["../../../../lib/@cori-risi/components/HoverInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAOrC,MAAM,WAAW,WAAW;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,KAAK,EAAE;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7D,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CACrC,qBA4BA"} \ No newline at end of file +{"version":3,"file":"HoverInfo.d.ts","sourceRoot":"","sources":["../../../../lib/@cori-risi/components/HoverInfo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAOrC,MAAM,WAAW,WAAW;IACxB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAE,KAAK,EAAE;IACtC,QAAQ,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,YAAY,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC;IAC7D,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;CAClB,qBA4BA"} \ No newline at end of file diff --git a/inst/dist/@cori-risi/components/HoverInfo.js b/inst/dist/@cori-risi/components/HoverInfo.js index 9e2a71dd..ad632ad5 100644 --- a/inst/dist/@cori-risi/components/HoverInfo.js +++ b/inst/dist/@cori-risi/components/HoverInfo.js @@ -40,7 +40,7 @@ function HoverInfo(props) { position: "fixed", minWidth: "320px", minHeight: "240px", - zIndex: 1 + zIndex: props.zIndex || 3 } }, props.children)) : React.createElement(React.Fragment, null); } diff --git a/inst/dist/@cori-risi/components/HoverInfo.js.map b/inst/dist/@cori-risi/components/HoverInfo.js.map index b36b74a5..be76006e 100644 --- a/inst/dist/@cori-risi/components/HoverInfo.js.map +++ b/inst/dist/@cori-risi/components/HoverInfo.js.map @@ -1 +1 @@ -{"version":3,"file":"HoverInfo.js","sources":["../../../../lib/@cori-risi/components/HoverInfo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactElement } from \"react\";\n// import { format } from 'd3-format';\n\n// import\"./styles/HoverInfo.module.css\"; // <= DO THIS FIRST...\nimport style from \"./styles/HoverInfo.module.css\"; // <= THEN THIS..\n\n\nexport interface HoverObject {\n x: number;\n y: number;\n [key: number | string]: any;\n}\n\n/**\n * This is a prototype generalization of the HoverInfo component used in the\n * [Who Wins B2S app](https://github.com/ruralinnovation/who-wins-b2s/tree/main/src/components){target=_blank}\n *\n * ```ts\n * import { HoverInfo } from '@cori-risi/cori.data.api';\n *\n * import \"@cori-risi/cori.data.api/inst/dist/cori.data.api.css\";\n *\n * // ...\n *\n * const [ hoverInfo, setHoverInfo ] = useState(null);\n *\n * // ...\n *\n * \n *

{ hoverInfo.name }

\n *

...

\n * \n * ```\n *\n * @param props.hoverInfo - an object that should, at minimum, contain x and y values (screen coordinates in pixels); \"name\" is also a userful prop\n * @param props.xOffset - the HoverInfo box will be rendered at this offset from the event's x coordinate\n * @param props.yOffset - the HoverInfo box will be rendered at this offset from the event's y coordinate\n */\nexport default function HoverInfo (props: {\n children?: ReactElement | ReactElement[],\n hoverInfo: HoverObject,\n xOffset?: number, yOffset?: number\n}) {\n const { hoverInfo, xOffset, yOffset } = props;\n\n return (!!hoverInfo) ? (\n
\n {props.children}\n {/*

{ hoverInfo.name }

*/}\n {/*

*/}\n {/* Propensity score: {hoverInfo.prop_score*100 < 1? \"<1\": format(\".2\")(hoverInfo.prop_score * 100)} | Matching: {hoverInfo.prop_score_knearest_match? \"Yes\": \"No\"}
*/}\n {/*

*/}\n {/*
*/}\n {/*

*/}\n {/* B2S winner: {hoverInfo.b2s_flag? \"Yes\": \"No\"}
*/}\n {/* Population: {format(\",\")(hoverInfo.pop)}
*/}\n {/* Percent employed: {format(\".0%\")(hoverInfo.pct_prime_emp)}
*/}\n {/* Tech share: {format(\".0%\")(hoverInfo.tech_share)}*/}\n {/*

*/}\n
\n ) : <>;\n}"],"names":[],"mappings":";;;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACqB,SAAA,SAAS,CAAE,KAIlC,EAAA;IACG,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;AAE9C,IAAA,OAAO,CAAC,CAAC,CAAC,SAAS,KACf,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAC3B,KAAK,EAAE;YACH,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC;YAClC,GAAG,EAAE,SAAS,CAAC,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC;AACjC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,SAAS,EAAE,OAAO;AAClB,YAAA,MAAM,EAAE,CAAC;SAEZ,EACD,EAAA,KAAK,CAAC,QAAQ,CAYb,IACN,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAK,CAAC;AACd;;;;"} \ No newline at end of file +{"version":3,"file":"HoverInfo.js","sources":["../../../../lib/@cori-risi/components/HoverInfo.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactElement } from \"react\";\n// import { format } from 'd3-format';\n\n// import\"./styles/HoverInfo.module.css\"; // <= DO THIS FIRST...\nimport style from \"./styles/HoverInfo.module.css\"; // <= THEN THIS..\n\n\nexport interface HoverObject {\n x: number;\n y: number;\n [key: number | string]: any;\n}\n\n/**\n * This is a prototype generalization of the HoverInfo component used in the\n * [Who Wins B2S app](https://github.com/ruralinnovation/who-wins-b2s/tree/main/src/components){target=_blank}\n *\n * ```ts\n * import { HoverInfo } from '@cori-risi/cori.data.api';\n *\n * import \"@cori-risi/cori.data.api/inst/dist/cori.data.api.css\";\n *\n * // ...\n *\n * const [ hoverInfo, setHoverInfo ] = useState(null);\n *\n * // ...\n *\n * \n *

{ hoverInfo.name }

\n *

...

\n * \n * ```\n *\n * @param props.hoverInfo - an object that should, at minimum, contain x and y values (screen coordinates in pixels); \"name\" is also a userful prop\n * @param props.xOffset - the HoverInfo box will be rendered at this offset from the event's x coordinate\n * @param props.yOffset - the HoverInfo box will be rendered at this offset from the event's y coordinate\n */\nexport default function HoverInfo (props: {\n children?: ReactElement | ReactElement[],\n hoverInfo: HoverObject,\n xOffset?: number,\n yOffset?: number,\n zIndex?: number\n}) {\n const { hoverInfo, xOffset, yOffset } = props;\n\n return (!!hoverInfo) ? (\n
\n {props.children}\n {/*

{ hoverInfo.name }

*/}\n {/*

*/}\n {/* Propensity score: {hoverInfo.prop_score*100 < 1? \"<1\": format(\".2\")(hoverInfo.prop_score * 100)} | Matching: {hoverInfo.prop_score_knearest_match? \"Yes\": \"No\"}
*/}\n {/*

*/}\n {/*
*/}\n {/*

*/}\n {/* B2S winner: {hoverInfo.b2s_flag? \"Yes\": \"No\"}
*/}\n {/* Population: {format(\",\")(hoverInfo.pop)}
*/}\n {/* Percent employed: {format(\".0%\")(hoverInfo.pct_prime_emp)}
*/}\n {/* Tech share: {format(\".0%\")(hoverInfo.tech_share)}*/}\n {/*

*/}\n
\n ) : <>;\n}"],"names":[],"mappings":";;;;;;;;;AAcA;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACqB,SAAA,SAAS,CAAE,KAMlC,EAAA;IACG,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;AAE9C,IAAA,OAAO,CAAC,CAAC,CAAC,SAAS,KACf,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,EAC3B,KAAK,EAAE;YACH,IAAI,EAAE,SAAS,CAAC,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC;YAClC,GAAG,EAAE,SAAS,CAAC,CAAC,IAAI,OAAO,IAAI,CAAC,CAAC;AACjC,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,SAAS,EAAE,OAAO;AAClB,YAAA,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,CAAC;SAE5B,EACD,EAAA,KAAK,CAAC,QAAQ,CAYb,IACN,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAK,CAAC;AACd;;;;"} \ No newline at end of file diff --git a/lib/@cori-risi/components/HoverInfo.tsx b/lib/@cori-risi/components/HoverInfo.tsx index e4cfe83a..64253cee 100644 --- a/lib/@cori-risi/components/HoverInfo.tsx +++ b/lib/@cori-risi/components/HoverInfo.tsx @@ -40,7 +40,9 @@ export interface HoverObject { export default function HoverInfo (props: { children?: ReactElement | ReactElement[], hoverInfo: HoverObject, - xOffset?: number, yOffset?: number + xOffset?: number, + yOffset?: number, + zIndex?: number }) { const { hoverInfo, xOffset, yOffset } = props; @@ -52,7 +54,7 @@ export default function HoverInfo (props: { position: "fixed", minWidth: "320px", minHeight: "240px", - zIndex: 1 + zIndex: props.zIndex || 3 }}> {props.children}