\n\n\n**Additionally, the HTML template listens to the following message events that you can trigger from the main page where you are rendering the template**\n\n- `onDegreeChanged`: You can change the selected warming scenario from outside the tempalte code. Example, if you are rendering the template inside an iframe:\n\n ```js\n // Simple map\n const newDegree = 3;\n const data = {\n action: \"onDegreeChanged\",\n degree: newDegree,\n };\n iframe.contentWindow?.postMessage(data, \"*\");\n ```\n\n ```js\n // Compare map\n const newDegreeBefore = 1.5;\n const newDegreeAfter = 3;\n const data = {\n action: \"onDegreeChanged\",\n degreeBefore: newDegreeBefore,\n degreeAfter: newDegreeAfter,\n };\n iframe.contentWindow?.postMessage(data, \"*\");\n ```\n\n### `getLatestMaps`\n\nUse this function to get the latest Maps. Each Map object is of type Map.\n\n### `getMapObject`\n\nGet the full object of a spcific Map. eg. `getMapObject(40104)`\n\n### `getDatasetIds`\n\nGet all the available dataset Ids. Find each map and its associated datasetId [here](https://docs.probablefutures.org/maps-inventory/#maps-inventory)\n\n### `getDataDescriptionAtPlaceGenerator`\n\nYou can generate a magic sentence that describes the data of a specific map at a specific location. Currenly, only maps whose names start with \"Days above\" have an associated magic sentence. Usage example:\n\nExample:\n\n```js\nimport {\n getDataDescriptionAtPlaceGenerator,\n getMapObject,\n DataDescriptionAtPlaceFuncType,\n} from \"@probable-futures/probable-futures-maps\";\n\nconst generator = getDataDescriptionAtPlaceGenerator();\nconst func: DataDescriptionAtPlaceFuncType = generator[40104];\n// call the function by passing the required params:\nconst sentence = func({\n place: \"Arizona, United States\",\n valueLow: 6,\n valueMid: 32,\n valueHigh: 74,\n degree: 0.5,\n datasetId: 40104,\n});\n\nconsole.log(sentence);\n\n// The result:\n// Between 1970 and 2000, people in Arizona, United States could expect about 32 Days above 32°C (90°F) in an average year, 6 days in a cooler year and 74 days in a warmer year. In a 1.5°C warming scenario, people in Arizona, United States can expect about 57 Days above 32°C (90°F) in an average year, 26 days in a cooler year and 106 days in a warmer year.\n```\n\n## Components\n\nThis library provides react components that you can use to easily and quickly integrate some of the tools and functionalities that Probable Futures provides into your own app.\n\n### `Chart`\n\nRather than calling the API and creating your own charts, we've provided a Chart component that you can easily integrate into your React app.\n\n**Props:**\n\n- **width** (number, required)\n- **height** (number, required)\n- **datasetStats** (StatisticsData[], required): the stats that you receive after calling the PF API to get the climate data of a specific location ([learn more about calling the api](https://docs.probablefutures.org/data-api-calls/)).\n Note that you can import that StatisticsData from `@probable-futures/lib`\n- **datasetId** (number, required)\n- **warmingScenario** (number, required) - supported values: `0.5 | 1 | 1.5 | 2 | 2.5 | 3`\n- **hideTitle** (boolean, optional): show or hide the title of the chart\n- **onLineClicked** (Function): this event will fire whenever one of the chart lines is clicked\n\nExample:\n\n```jsx\nimport { Chart } from \"@probable-futures/probable-futures-maps\";\n\nconst [selectedChartDegree, setSelectedChartDegree] = useState(0.5);\n\nNote Pass \"compare\" parameter to genereate an embeddable comparison map instead of a simple map. Check the Config section for more info about how to use this param.
\n