Add "embed this chart" modal to map tiles #4782
Conversation
…to code-modal-map
…to code-modal-map
|
This is looking good, thank you! |
Updated to remove the border on the blue button and modal dialog box. Screenshot also updated. Button impelmentation is already a re-usable component! Styling for the modal is also shared (I inherited a lot from the work @beets did for the "see metadata" modal). Getting the download modal styling to match is a future fix-it friday item. |
| mapChartData && getReplacementStrings(props, mapChartData); | ||
| const header = getChartTitle(props.title, replacementStrings); | ||
|
|
||
| let sourceCode = `<script src="https://datacommons.org/datacommons.js"></script> |
There was a problem hiding this comment.
Use the apiRoot value here for the hostname if set. This way the functionality will work on https://unstats.un.org/UNSDWebsite/undatacommons/sdgs
| return layer.variable; | ||
| }) | ||
| .filter((variable) => { | ||
| return variable?.denom == "Count_Person"; |
There was a problem hiding this comment.
Use DEFAULT_PER_CAPITA_DENOM here
| sourceCode += `\n\tplaceNameProp="${props.placeNameProp}"`; | ||
| } | ||
| if (props.sources) { | ||
| sourceCode += `\n\tplaceNameProp="${props.sources.join(" ")}"`; |
There was a problem hiding this comment.
Should this be \n\tsources=.. ?
| <datacommons-map | ||
| \theader="${header}" | ||
| \tchildPlaceTypes="${enclosedPlaceTypes}" | ||
| \tparentPlaces="${places}" |
There was a problem hiding this comment.
Can you use childPlaceType & parentPlace (singular) if there's only a single parent place? Right now i dont think we actually use multiple parent places anywhere, and using multiple places isn't documented in the web component map api
| readOnly | ||
| value={props.sourceCode} | ||
| > | ||
| {props.sourceCode} |
There was a problem hiding this comment.
Does it work to just set value and not the innerHTML here?
| </ModalHeader> | ||
| <div className="modal-subtitle"> | ||
| Use the following code to embed this chart on your website. For{" "} | ||
| documentation, see our{" "} |
There was a problem hiding this comment.
how about this alternate wording?
"Embed this chart on your website using the code below. For instructions and customization options, see our Web Component Documentation."
| googleSansEl.rel = "stylesheet"; | ||
| const materialIconsEl = document.createElement("link"); | ||
| materialIconsEl.href = | ||
| "https://fonts.googleapis.com/icon?family=Material+Icons&display=block"; |
There was a problem hiding this comment.
Does dropping &display=block here & in the sheet below have any side effects?
| . | ||
| </div> | ||
| <ModalBody> | ||
| <textarea |
There was a problem hiding this comment.
Can you combine this with the textarea in chart_embed.tsx to a reusable component?
| border: $border; | ||
| display: flex; | ||
| font-family: monospace; | ||
| font-family: "Google Sans Text", sans-serif; |
There was a problem hiding this comment.
Use css variable here - might need to verify which one, but maybe font-family: var(--dc-font-family, base.$font-family-sans-serif);
This PR adds an "embed this chart" modal to the footer of the map tile that gives users HTML they can use to embed that chart as a web component.
Screenshots:
More concretely, this PR:
codeicon can be used, and DRYs the logic used