-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch from Flourish data script to iframe
This means this component can no longer be reusable for different kind of charts and hence the renaming
- Loading branch information
Showing
10 changed files
with
142 additions
and
175 deletions.
There are no files selected for viewing
38 changes: 0 additions & 38 deletions
38
apps/charterafrica/src/components/EmbeddedChart/EmbeddedChart.js
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
61 changes: 61 additions & 0 deletions
61
apps/charterafrica/src/components/FlourishChart/FlourishChart.js
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| /* eslint-env browser */ | ||
| import { RichTypography, Section } from "@commons-ui/core"; | ||
| import { Box } from "@mui/material"; | ||
| import React, { useEffect, useState } from "react"; | ||
|
|
||
| const FlourishChart = React.forwardRef(function FlourishChart(props, ref) { | ||
| const { backgroundColor, chartId, subtitle, title } = props; | ||
| const [height, setHeight] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| const handleMessageEvent = (event) => { | ||
| const { sender, context, ...message } = JSON.parse(event.data) || {}; | ||
| if (sender === "Flourish" && context === "iframe.resize") { | ||
| setHeight(Math.ceil(message.height)); | ||
| } | ||
| }; | ||
| window.addEventListener("message", handleMessageEvent); | ||
| return () => { | ||
| document.removeEventListener("message", handleMessageEvent); | ||
| }; | ||
| }); | ||
|
|
||
| if (!chartId?.length) { | ||
| return null; | ||
| } | ||
| return ( | ||
| <Box | ||
| sx={{ | ||
| backgroundColor: { backgroundColor }, | ||
| }} | ||
| ref={ref} | ||
| > | ||
| <Section | ||
| sx={{ | ||
| px: { xs: 5, sm: 0 }, | ||
| py: 2.5, | ||
| }} | ||
| > | ||
| <RichTypography html={false} variant="h5SemiBold" color="neutral.dark"> | ||
| {title} | ||
| </RichTypography> | ||
| <RichTypography color="neutral.dark" variant="p1" sx={{ my: 1 }}> | ||
| {subtitle} | ||
| </RichTypography> | ||
| <iframe | ||
| key={chartId} | ||
| title={title || "Flourish Chart "} | ||
| src={`https://flo.uri.sh/${chartId}/embed?auto=1`} | ||
| scrolling="no" | ||
| style={{ | ||
| border: 0, | ||
| height, | ||
| width: "100%", | ||
| }} | ||
| /> | ||
| </Section> | ||
| </Box> | ||
| ); | ||
| }); | ||
|
|
||
| export default FlourishChart; |
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import FlourishChart from "./FlourishChart"; | ||
|
|
||
| export default FlourishChart; |
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
This file was deleted.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import { validateHexColor } from "../utils/colors"; | ||
|
|
||
| const FlourishChart = { | ||
| slug: "flourish-chart", | ||
| labels: { | ||
| singular: { | ||
| en: "Flourish Chart", | ||
| }, | ||
| plural: { | ||
| en: "Flourish Chart", | ||
| }, | ||
| }, | ||
| fields: [ | ||
| { | ||
| name: "title", | ||
| label: { | ||
| en: "Title", | ||
| fr: "Titre", | ||
| pt: "Título", | ||
| }, | ||
| type: "text", | ||
| localized: true, | ||
| }, | ||
| { | ||
| name: "subtitle", | ||
| label: { | ||
| en: "Subtitle", | ||
| fr: "Sous-titre", | ||
| pt: "Subtítulo", | ||
| }, | ||
| type: "text", | ||
| localized: true, | ||
| }, | ||
| { | ||
| name: "chartId", | ||
| label: { | ||
| en: "Chart ID", | ||
| }, | ||
| type: "text", | ||
| required: true, | ||
| localized: true, | ||
| admin: { | ||
| description: | ||
| "This should be in type/number format e.g. visualisation/14834715 or story/1946372", | ||
| }, | ||
| }, | ||
| { | ||
| name: "backgroundColor", | ||
| label: { | ||
| en: "Background color", | ||
| fr: "Couleur de fond", | ||
| pt: "Cor de fundo", | ||
| }, | ||
| type: "text", | ||
| required: true, | ||
| defaultValue: "#ffffff", | ||
| validate: validateHexColor, | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export default FlourishChart; |
Oops, something went wrong.