\n \n
\n )\n}\n\nHistoricalBubbleGraph.defaultProps = {\n stroke: \"#56565A\",\n fontColor: \"#56565A\",\n smallVersion: false, // Default to the larger version\n}\n","import React, { useEffect, useState, useMemo } from \"react\"\nimport { createPortal } from \"react-dom\"\nimport classnames from \"classnames\"\nimport \"./styles.scss\"\nimport gradient, { gradientColors } from \"../utils/gradient\"\nimport Map from \"../Map/\"\nimport { getCountryByName } from \"../utils/countryLookup\"\nimport DataLoader, { years } from \"../DataLoader\"\n\nimport arrowDown from \"../images/arrow-down.svg\"\nimport arrowUp from \"../images/arrow-up.svg\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport HistoricalBubbleGraph from \"../HistoricalBubbleGraph/\"\nimport { percentChangeColorScale } from \"../Overview/\"\nimport { useMeasure, useWindowScroll } from \"react-use\"\n\nconst scaleBarWidth = 200\nconst scaleBarWidthSmallMode = 100\nconst scaleBarMargins = {\n top: 10,\n left: 26,\n right: 30,\n bottom: 10,\n}\nconst scaleBarHeight = 7\nconst mapSize = 90\n\nexport default function Tooltip(props) {\n const {\n country,\n x,\n y,\n scoreKey,\n selectedYear,\n colorByPercentDifferenceData,\n } = props\n const windowScroll = useWindowScroll()\n const [wrapperRef, wrapperMeasure] = useMeasure()\n const [isVisible, setIsVisible] = useState(false)\n const [clickInstructionsVisible, setClickInstructionsVisible] =\n useState(false)\n\n const inSmallMode = useSmallWidthMode()\n\n // Memoize tooltip element lookup to prevent unnecessary querying\n const tooltipEle = useMemo(() => document.querySelector(\"#tooltip\"), [])\n\n // Memoize the country data lookup to avoid recalculating every render\n const mapCountryData = useMemo(\n () => getCountryByName(country.Country),\n [country],\n )\n\n // Calculate score and color just once\n const score = useMemo(() => {\n if (colorByPercentDifferenceData) {\n return country.externalPercentChange !== null\n ? country.externalPercentChange\n : null\n }\n return country[scoreKey]\n }, [country, scoreKey, colorByPercentDifferenceData])\n\n const scoreColor = useMemo(\n () =>\n colorByPercentDifferenceData\n ? percentChangeColorScale(score)\n : gradient(score),\n [colorByPercentDifferenceData, score],\n )\n\n // Calculate factorIndexLabel based on scoreKey\n const factorIndexLabel = useMemo(() => {\n const scoreKeyMatch = scoreKey.match(/^[0-9]\\.[0-9]/)\n if (scoreKey.indexOf(\"Factor \") === 0) {\n return scoreKey.split(\":\")[0]\n } else if (scoreKeyMatch) {\n return `Subfactor ${scoreKeyMatch[0]}`\n }\n return \"Index\"\n }, [scoreKey])\n\n useEffect(() => {\n if (props.tooltipMessage === null) return\n\n const showTimeout = setTimeout(() => setIsVisible(true), 100) // Delay show by 0.1s\n const clickInstructionsTimeout = setTimeout(\n () => setClickInstructionsVisible(true),\n 250,\n ) // Show click instructions after 0.25s\n\n return () => {\n clearTimeout(showTimeout)\n clearTimeout(clickInstructionsTimeout)\n setIsVisible(false)\n }\n }, [props.tooltipMessage])\n\n const hideTooltip = () => setIsVisible(false) // Simplified hideTooltip with no fade-out logic, as CSS handles it\n\n // Precompute the position and flip logic\n const _x = x + 12\n const _y = y - 60 + windowScroll.y\n const flipX = _x > window.innerWidth - wrapperMeasure.width\n const flipY = _y > window.innerHeight - wrapperMeasure.height\n\n // Tooltip style\n const tooltipStyle = {\n left: _x + (flipX ? -20 : 0),\n top: _y + (flipY ? -20 : 0),\n transform: `translate(${flipX ? \"-100%\" : \"0\"}, ${flipY ? \"-100%\" : \"0\"})`,\n opacity: isVisible ? 1 : 0, // Controlled by CSS transition for fade-in/out\n transition: \"opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1)\", // Smooth fade with EaseInOutQuart effect\n }\n\n // Precompute ranking icons for optimizations\n const previousYearData = useMemo(() => {\n const selectedYearIndex = years.indexOf(`${selectedYear}`)\n if (selectedYearIndex === 0) return null\n\n const previousYear = years[selectedYearIndex - 1]\n return DataLoader.dataByYear[previousYear].countries.find(\n (c) => c.Country === country.Country,\n )\n }, [selectedYear, country])\n\n const icons = useMemo(() => {\n let overallCOTIcon = null,\n globalRankCOTIcon = null,\n regionalRankCOTIcon = null,\n incomeRankCOTIcon = null\n\n if (previousYearData) {\n const previousYearScore = previousYearData[scoreKey]\n const globalRankIndexedByLastYearsCountriesOnly =\n country[`${scoreKey}_Rank_Global_lastYear`]\n const regionRankIndexedByLastYearsCountriesOnly =\n country[`${scoreKey}_Rank_Region_lastYear`]\n const incomeRankIndexedByLastYearsCountriesOnly =\n country[`${scoreKey}_Rank_Income Group_lastYear`]\n\n if (score > previousYearScore)\n overallCOTIcon = \n \n Click for {country.Country} Insights\n
\n )}\n ,\n tooltipEle,\n )\n : null\n}\n\nTooltip.defaultProps = {\n closeTooltip: () => {},\n gotoDetails: () => {},\n}\n","import React, { useState, useEffect } from \"react\"\n\nimport Tooltip from \"../Tooltip/\"\nimport \"./MapRenderer.scss\"\n\nexport default function MapRenderer(props) {\n const { width, height, translate, scale } = props\n const [hoveredCountry, setHoveredCountry] = useState(null)\n const hoverCountry = (country) => {\n return (event) => {\n if (!props.tooltipEnabled) {\n return\n }\n if (!country) {\n setHoveredCountry(country)\n return\n }\n let x = 0\n let y = 0\n if (\"pageX\" in event) {\n x = event.pageX\n y = event.pageY\n }\n if (event.touches) {\n event.preventDefault()\n event.stopPropagation()\n if (props.tooltipMessage == null) {\n props.gotoCountryPage(country.info.name)()\n return\n }\n }\n if (country.data) {\n const countryData = country.data.originalDatum || country.data\n const scoreKey = country.data.scoreKey || \"overall\"\n setHoveredCountry({ country: countryData, x, y, scoreKey })\n } else {\n }\n }\n }\n\n useEffect(() => {\n const hideTooltip = () => setHoveredCountry(null)\n window.addEventListener(\"scroll\", hideTooltip)\n return function cleanup() {\n window.removeEventListener(\"scroll\", hideTooltip)\n }\n }, [])\n\n return (\n \n
\n {clickInstructionsVisible && (\n {country.Country}
\n \n
\n {props.showHistoricalPlot && (\n \n \n \n \n {gradientColors.map((color) => (\n \n \n \n \n \n \n 0.0\n \n \n 1.0\n \n \n \n
\n \n
\n \n
\n \n Region{\" \"}\n {country.Region}\n
\n \n Income Group{\" \"}\n \n {country[\"Income Group\"]}\n \n
\n \n \n Global ranking\n \n \n {country[`${scoreKey}_Rank_Global`]} /{\" \"}\n {country.Count_Global} {icons.globalRankCOTIcon}\n \n
\n \n \n Regional Ranking\n \n \n {country[`${scoreKey}_Rank_Region`]} /{\" \"}\n {country.Count_Region} {icons.regionalRankCOTIcon}\n \n
\n \n \n Income Ranking\n \n \n {country[`${scoreKey}_Rank_Income Group`]} /{\" \"}\n {country[\"Count_Income Group\"]}{\" \"}\n {icons.incomeRankCOTIcon}\n \n
\n \n
\n \n {colorByPercentDifferenceData ? (\n \n {score.toFixed(2)} {icons.overallCOTIcon}\n \n )}\n
\n {score}%
\n ) : (\n \n {colorByPercentDifferenceData ? (\n \n Overall score\n
\n changes\n \n ) : (\n \n {factorIndexLabel} Score\n
\n {selectedYear}\n \n )}\n
\n \n changes\n
\n {selectedYear}\n
\n
\n )}\n \n
\n \n
\n \n Details\n
\n \n Close\n
\n \n {map}\n {globeButton}\n
\n )\n}\n\nMap.defaultProps = {\n id: \"defaultMap\",\n animate: false,\n width: 1280,\n height: 640,\n stroke: \"white\",\n customStroke: { color: \"#333\", width: 1 },\n defaultFill: \"#f0f0f0\",\n selectedRegion: [],\n visibleCountries: [],\n strokedCountries: [],\n data: [],\n gotoCountryPage: () => {},\n tooltipEnabled: true,\n allowZoomOut: false,\n showPercentDifferenceLabel: false,\n}\n","import React from \"react\"\nimport { format } from \"d3-format\"\nimport { scaleLinear } from \"d3-scale\"\nimport { extent } from \"d3-array\"\n\nimport gradient from \"../utils/gradient\"\n\nimport \"./styles.scss\"\n\nconst formatter = format(\".2f\")\n\nfunction getXScale(ticks, width) {\n const padding = {\n left: width * 0.1875,\n right: width * 0.225,\n }\n const xScale = scaleLinear()\n .domain(extent(ticks))\n .range([padding.left, width - padding.right])\n return { xScale, padding }\n}\n\nfunction SVGGradient() {\n const domain = gradient.domain()\n return (\n \n \n WJP Rule of Law Index \n \n
\n \n \n \n \n \n \n \n {slideData.colorByPercentDifferenceData ? (\n
\n \n
\n\n \n
\n \n \n )\n}\n","import React from \"react\"\nimport classnames from \"classnames\"\n\nimport \"./styles.scss\"\n\nexport default function InlineButtons(props) {\n const options = [...props.options].reverse()\n if (props.instruction) {\n options.unshift({ instruction: props.instruction })\n }\n return (\n \n
\n Explore the data\n The Global Rule of Law Recession Continues
\n\n The 2024 WJP Rule of Law Index\n \n ®\n {\" \"}\n evaluates 142 countries and jurisdictions around the world. For\n the seventh year in a row, the rule of law has declined in most\n countries.\n
\n {suggestion.Country}
\n\nconst startsWith = (word, prefix) => {\n const wordLower = word.toLowerCase()\n const prefixLower = prefix.toLowerCase()\n const prefixLength = prefixLower.length\n return wordLower.substr(0, prefixLength) === prefixLower\n}\n\nconst countrySortWithValue = (value) => {\n return (a, b) => {\n let aCountry = a.Country\n let bCountry = b.Country\n if (startsWith(aCountry, \"The \")) {\n aCountry = aCountry.slice(4)\n }\n if (startsWith(bCountry, \"The \")) {\n bCountry = bCountry.slice(4)\n }\n if (aCountry === unselectedCountryLabel) {\n return -1\n }\n if (bCountry === unselectedCountryLabel) {\n return 1\n }\n if (value !== \"\" && value !== null) {\n const aStartsWith = startsWith(aCountry, value)\n const bStartsWith = startsWith(bCountry, value)\n if (aStartsWith && !bStartsWith) {\n return -1\n }\n if (!aStartsWith && bStartsWith) {\n return 1\n }\n }\n\n if (aCountry > bCountry) {\n return 1\n }\n return -1\n }\n}\nexport default function CountrySelect(props) {\n const { value, selectedYear } = props\n\n const [selectOpen, setSelectOpen] = useState(false)\n const [currentTypedInputValue, setCurrentTypedInputValue] = useState(\"\")\n const [currentSuggestions, setCurrentSuggestions] = useState(null)\n const containerRef = useRef()\n const inputRef = useRef()\n\n useEffect(() => {\n if (selectOpen) {\n inputRef.current && inputRef.current.focus()\n setCurrentTypedInputValue(\"\")\n setCurrentSuggestions(null)\n }\n }, [selectOpen])\n\n const close = () => {\n setSelectOpen(false)\n clear()\n }\n useOnClickOutside(containerRef, close)\n\n const countries = useMemo(\n () => [\n { Country: unselectedCountryLabel },\n ...[...DataLoader.dataByYear[selectedYear].countries].sort(\n countrySortWithValue(\"\"),\n ),\n ],\n [selectedYear],\n )\n\n const onChangeTypeEntry = (event, { newValue }) => {\n setCurrentTypedInputValue(newValue)\n }\n\n const fetchSuggestions = ({ value }) => {\n const input = value.toLowerCase()\n const suggestions = countries\n .filter((country) => country.Country.toLowerCase().includes(input))\n .sort(countrySortWithValue(value))\n setCurrentSuggestions(suggestions)\n }\n\n const pickSelection = (event, { suggestion, suggestionValue }) => {\n close()\n props.onChange(suggestion)\n }\n\n const highlightSelection = ({ suggestion }) => props.onHighlight(suggestion)\n\n const toggleSelectOpen = (event) => {\n if (selectOpen) {\n close()\n } else {\n setSelectOpen(true)\n }\n }\n\n const clear = () => {\n inputRef.current && inputRef.current.focus()\n setCurrentTypedInputValue(\"\")\n setCurrentSuggestions(null)\n inputRef.current && inputRef.current.focus()\n }\n\n const onClearButton = () => {\n props.onClear()\n clear()\n }\n\n const renderInput = (props) => {\n const clearButton =\n props.value === \"\" ? null : (\n \n ×\n \n )\n return (\n \n \n {clearButton}\n
\n )\n }\n const autoselect = selectOpen ? (\n \n {value === \"\" ? \"COUNTRY\" : value}\n
\n {autoselect}\n \n )\n}\n\nCountrySelect.defaultProps = {\n onChange: () => {},\n onHighlight: () => {},\n onClear: () => {},\n}\n","import React, { useState, useMemo, useEffect, useCallback } from \"react\"\nimport { useParams, useHistory, useLocation } from \"react-router-dom\"\nimport getSelectionsFromParams from \"../utils/getSelectionsFromParams\"\nimport classnames from \"classnames\"\n\nimport Map from \"../Map/\"\nimport { getCountryByName } from \"../utils/countryLookup\"\nimport { GradientLegend } from \"../Legends/\"\nimport DataLoader, { years, factors } from \"../DataLoader\"\nimport \"./styles.scss\"\n// import FactorInfoIconTooltip from './FactorInfoIconTooltip'\nimport CountrySelect, { unselectedCountryLabel } from \"../CountrySelect/\"\nimport useDimensions from \"react-use-dimensions\"\nimport { useWindowScroll, useScrollbarWidth } from \"react-use\"\nimport classNames from \"classnames\"\nconst defaultEmptyRegionSelection = []\n\nconst mapStrokeOutline = { color: \"#333\", width: 1.5 }\nconst setOverrideMapVisibility = () => {}\n\nexport default function InsightsView(props) {\n const [mapRef, mapDimensions] = useDimensions()\n const params = useParams()\n const { selectedCountry, selectedYear, selectedFactor, unusedOpts } =\n getSelectionsFromParams(params)\n const history = useHistory()\n const location = useLocation()\n // const [hoveredOverFactor, setHoveredOverFactor] = useState(null)\n const { children, ...otherProps } = props\n const windowScroll = useWindowScroll()\n\n const updateUrlFromEvent = (property) => {\n return (event) => {\n updateUrl(property)(event.target.value)\n }\n }\n const updateUrl = useCallback(\n (property) => {\n return (newValue) => {\n const newUrlParams = {\n country: selectedCountry,\n year: selectedYear,\n factor: selectedFactor,\n }\n newUrlParams[property] = newValue\n if (property === \"country\" && newValue === unselectedCountryLabel) {\n newUrlParams[property] = \"\"\n }\n\n let baseUrl = null\n switch (true) {\n case !!location.pathname.match(\"/global\"):\n baseUrl = \"/global\"\n break\n case !!location.pathname.match(\"/country\"):\n baseUrl = \"/country\"\n break\n case !!location.pathname.match(\"/factors\"):\n baseUrl = \"/factors\"\n break\n default:\n console.warn(\"something went wrong\")\n break\n }\n if (!baseUrl) {\n console.warn(\"something went wrong\")\n return\n }\n let url = `${baseUrl}/${encodeURIComponent(newUrlParams.year)}`\n if (newUrlParams.country !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.country)}`\n }\n if (newUrlParams.factor !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.factor)}`\n }\n if (unusedOpts) {\n url = `${url}/${unusedOpts.join(\"/\")}`\n }\n history.push(url)\n }\n },\n [\n history,\n location,\n selectedCountry,\n selectedYear,\n selectedFactor,\n unusedOpts,\n ],\n )\n\n const gotoCountryPage = useCallback(\n (country) => {\n return () => {\n const newUrlParams = {\n country: country,\n year: selectedYear,\n factor: selectedFactor,\n }\n\n const baseUrl = \"/country\"\n let url = `${baseUrl}/${encodeURIComponent(newUrlParams.year)}`\n if (newUrlParams.country !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.country)}`\n }\n if (newUrlParams.factor !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.factor)}`\n }\n history.push(url)\n }\n },\n [selectedYear, selectedFactor, history],\n )\n\n const selectCountryFromMinimap = useCallback(\n (country) => {\n return () => {\n updateUrl(\"country\")(country)\n }\n },\n [updateUrl],\n )\n\n const updateCountryFromAutocomplete = (country) => {\n updateUrl(\"country\")(\n country.Country === unselectedCountryLabel ? \"\" : country.Country,\n )\n }\n const onGlobalInsights = !!location.pathname.match(\"/global\")\n const onCountryInsights = !!location.pathname.match(\"/country\")\n\n const [showGlobalInsightsInstructions, setShowGlobalInsightsInstructions] =\n useState(false)\n\n const [mainMapInteractable, setMainMapInteractable] = useState(false)\n\n useEffect(() => {\n let timeoutId = null\n if (onGlobalInsights && !showGlobalInsightsInstructions) {\n timeoutId = setTimeout(() => {\n setMainMapInteractable(true)\n }, 500)\n } else if (showGlobalInsightsInstructions) {\n setMainMapInteractable(false)\n }\n return () => {\n clearTimeout(timeoutId)\n }\n }, [onGlobalInsights, showGlobalInsightsInstructions])\n\n const toggleGlobalInsightsInstructions = useCallback(() => {\n setShowGlobalInsightsInstructions(!showGlobalInsightsInstructions)\n }, [showGlobalInsightsInstructions])\n\n const currentYearData = DataLoader.dataByYear[selectedYear]\n const factorKey = useMemo(() => {\n return selectedFactor === \"\"\n ? \"overall\"\n : currentYearData.aggregateFactorKeys.find((k) =>\n k.includes(selectedFactor),\n )\n }, [selectedFactor, currentYearData])\n\n const mapData = useMemo(\n () =>\n currentYearData.countries.map((c) => ({\n code: c[\"Country Code\"],\n value: c[factorKey],\n originalDatum: c,\n scoreKey: factorKey,\n })),\n [currentYearData, factorKey],\n )\n let selectedRegion = useMemo(() => {\n if (selectedCountry) {\n return getCountryByName(selectedCountry)\n ? [getCountryByName(selectedCountry).id]\n : defaultEmptyRegionSelection\n }\n return defaultEmptyRegionSelection\n }, [selectedCountry])\n const miniMapWidth = mapDimensions.width\n const headerHeight = 111\n const miniMapHeight = isNaN(miniMapWidth / 2) ? 0 : miniMapWidth / 2\n\n const sidebarMap = miniMapWidth ? (\n \n
\n \n
\n ×
\n \n {mobile ? \"Interactive\" : \"Country\"} Information\n
\n \n {mobile\n ? \"To view by factor specific rankings select a factor above. To view historical and regional rankings click on any of the areas below.\"\n : \"Hover over any country on the map or the list below to view scores and rankings. To view country profiles, select the countries tab on the menu above.\"}\n
\n \n {/*
\n \n \n )\n return (\n ×
*/}\n \n Interactive Information\n
\n \n
\n - \n
- View rankings by specific factors. \n
- View historical rankings since 2015. \n
- View regional or income-based rankings. \n
\n \n \n {fullscreenMap}\n
\n {globalInsightInstructions}\n \n {showSelectCountryNotice ? (\n \n
\n \n
\n \n \n {factorSelectOptions}\n \n
\n \n
\n \n Please select a country to view insights\n
\n ) : (\n \n \n {factorOptions.map((factor, factorIndex) => {\n const selected = factor === selectedFactor\n const label =\n factorIndex === 0\n ? \"Overall Index Score\"\n : `${factorIndex} | ${factor}`\n const instructions =\n factorIndex === 0 ? (\n \n updateUrl(\"factor\")(factor)}\n >\n {label}\n
\n {arrow}\n {instructions}\n \n )\n })}\n \n \n \n \n {sidebarMap}\n
\n \n Explore by Issue/Factor\n
\n ) : null\n const arrow = selected ? : null\n return (\n \n
\n \n )}\n \n )\n}\n","export default __webpack_public_path__ + \"static/media/Factor1.aca3178a.svg\";","import Factor1 from \"./Factor1.svg\"\nimport Factor2 from \"./Factor2.svg\"\nimport Factor3 from \"./Factor3.svg\"\nimport Factor4 from \"./Factor4.svg\"\nimport Factor5 from \"./Factor5.svg\"\nimport Factor6 from \"./Factor6.svg\"\nimport Factor7 from \"./Factor7.svg\"\nimport Factor8 from \"./Factor8.svg\"\nimport Factor1_grey from \"./Factor1_grey.svg\"\nimport Factor2_grey from \"./Factor2_grey.svg\"\nimport Factor3_grey from \"./Factor3_grey.svg\"\nimport Factor4_grey from \"./Factor4_grey.svg\"\nimport Factor5_grey from \"./Factor5_grey.svg\"\nimport Factor6_grey from \"./Factor6_grey.svg\"\nimport Factor7_grey from \"./Factor7_grey.svg\"\nimport Factor8_grey from \"./Factor8_grey.svg\"\n\nexport const factorImages = {\n 1: Factor1,\n 2: Factor2,\n 3: Factor3,\n 4: Factor4,\n 5: Factor5,\n 6: Factor6,\n 7: Factor7,\n 8: Factor8,\n\n \"1_grey\": Factor1_grey,\n \"2_grey\": Factor2_grey,\n \"3_grey\": Factor3_grey,\n \"4_grey\": Factor4_grey,\n \"5_grey\": Factor5_grey,\n \"6_grey\": Factor6_grey,\n \"7_grey\": Factor7_grey,\n \"8_grey\": Factor8_grey,\n}\n","export default __webpack_public_path__ + \"static/media/Factor2.81da2243.svg\";","export default __webpack_public_path__ + \"static/media/Factor3.f2be0de7.svg\";","export default __webpack_public_path__ + \"static/media/Factor4.075a63c2.svg\";","export default __webpack_public_path__ + \"static/media/Factor5.579905a5.svg\";","export default __webpack_public_path__ + \"static/media/Factor6.82eddd21.svg\";","export default __webpack_public_path__ + \"static/media/Factor7.a7a29298.svg\";","export default __webpack_public_path__ + \"static/media/Factor8.e0d93db7.svg\";","export default __webpack_public_path__ + \"static/media/Factor1_grey.1ee6369d.svg\";","export default __webpack_public_path__ + \"static/media/Factor2_grey.ac8dcf02.svg\";","export default __webpack_public_path__ + \"static/media/Factor3_grey.143b751c.svg\";","export default __webpack_public_path__ + \"static/media/Factor4_grey.68b54ab9.svg\";","export default __webpack_public_path__ + \"static/media/Factor5_grey.96cf0883.svg\";","export default __webpack_public_path__ + \"static/media/Factor6_grey.655db4f5.svg\";","export default __webpack_public_path__ + \"static/media/Factor7_grey.d38b7b5d.svg\";","export default __webpack_public_path__ + \"static/media/Factor8_grey.2f60edc5.svg\";","import React, { useState } from \"react\"\n\nimport useDimensions from \"react-use-dimensions\"\nimport \"./styles.scss\"\nimport DataLoader from \"../DataLoader\"\nimport { scaleLinear } from \"d3-scale\"\nimport gradient from \"../utils/gradient\"\nimport { animated, useTransition } from \"react-spring\"\nimport useIsInViewport from \"use-is-in-viewport\"\nimport Tooltip from \"../Tooltip/\"\nimport useDetectPrint from \"use-detect-print\"\n\nconst printFullWidth = 700\n\nconst minGraphHeight = 140\nfunction CountryFactorBarGraph(props) {\n const [tooltipData, setTooltipData] = useState()\n const { selectedCountry, selectedYear, countryData, scoreKey, title } = props\n const [ref, containerDimensions] = useDimensions()\n const [isInViewPort, wrappedRef] = useIsInViewport({ target: ref })\n const isPrinting = useDetectPrint()\n\n const margins = {\n top: 30,\n left: 60,\n right: 20,\n bottom: 20,\n }\n if (!props.axis) {\n margins.left = 10\n margins.right = margins.left\n margins.bottom = margins.left / 2\n }\n let graphContents = null\n let containerHeight = 0\n\n const hoverCountry = (country) => {\n return (event) => {\n if (!country) {\n return setTooltipData(null)\n }\n let x = 0\n let y = 0\n if (\"clientX\" in event) {\n x = event.clientX\n y = event.clientY\n }\n if (event.touches) {\n event.preventDefault()\n event.stopPropagation()\n }\n setTooltipData({ country, x, y })\n }\n }\n let containerWidth = containerDimensions.width || 400\n\n if (isPrinting) {\n containerWidth = printFullWidth\n }\n let width = containerWidth - margins.left - margins.right\n containerHeight = Math.max(containerWidth / 5, minGraphHeight)\n let height = containerHeight - margins.top - margins.bottom\n\n const countriesSortedByScore = [\n ...DataLoader.dataByYear[selectedYear].countries,\n ]\n const countriesSortedAlpha = [\n ...DataLoader.dataByYear[selectedYear].countries,\n ]\n\n countriesSortedAlpha.sort((a, b) => (a.Country > b.Country ? 1 : -1))\n countriesSortedByScore.sort((a, b) => a[scoreKey] - b[scoreKey])\n\n const yScale = scaleLinear().domain([0, 1]).range([0, height])\n\n const xScale = scaleLinear()\n .domain([0, countriesSortedAlpha.length - 1])\n .range([0, width])\n\n const barWidth = xScale(0.9)\n\n let selectedValues = null\n\n const getBarDimensions = (country) => {\n const countryScoreIndex = countriesSortedByScore.findIndex(\n (d) => d.Country === country.Country,\n )\n const score = country[scoreKey]\n const x = xScale(countryScoreIndex)\n const barHeight = yScale(score.toFixed(2))\n const y = height - barHeight\n let fill = gradient(score)\n const countryIsSelected = country.Country === selectedCountry\n if (countryIsSelected) {\n selectedValues = { x, score, y, transform: `translate(${x}, ${y})` }\n fill = \"black\"\n }\n if (props.rankAttribute !== \"Global\" && !countryIsSelected) {\n fill =\n country[props.rankAttribute] !== countryData[props.rankAttribute]\n ? \"#EBEBEB\"\n : fill\n }\n return { x, y, height: barHeight, fill }\n }\n\n const transitions = useTransition(\n containerDimensions.width ? countriesSortedAlpha : [],\n (d) => d.Country,\n {\n enter: getBarDimensions,\n update: getBarDimensions,\n immediate: !isInViewPort,\n },\n )\n\n const bars = transitions.map((data, countryIndex) => {\n if (data.state === \"leave\") {\n return null\n }\n const country = data.item\n const springProps = data.props\n const { x, y, height, fill } = springProps\n return (\n \n {React.cloneElement(children, {\n headerHeight: naturalMapScale === 0 ? headerHeight : null,\n toggleGlobalInsightsInstructions,\n selectedCountry,\n selectedYear,\n selectedFactor,\n unusedOpts,\n updateUrl,\n setOverrideMapVisibility,\n gotoCountryPage,\n ...otherProps,\n })}\n
\n \n \n {tooltipData ? (\n
\n )\n}\n\nCountryFactorBarGraph.defaultProps = {\n rankAttribute: \"Global\",\n axis: true,\n}\n\nexport default React.memo(CountryFactorBarGraph)\n","import React, { useRef, useEffect } from \"react\"\n\nimport InsightsView from \"../InsightsView/\"\nimport DataLoader, { factors } from \"../DataLoader\"\nimport { factorImages } from \"../images/factor_icons/factorImages\"\nimport CountryFactorBarGraph from \"../CountryFactorBarGraph\"\nimport useDimensions from \"react-use-dimensions\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport classnames from \"classnames\"\nimport ReactMarkdown from \"react-markdown\"\nimport \"./styles.scss\"\nimport { Helmet } from \"react-helmet\"\nexport const factorHeaderLabels = [\n [\"GLOBAL\", \"RANK\"], // hmm should this change if a Region is selected??\n [\"Government\", \"Powers\"],\n [\"Absence of\", \"Corruption\"],\n [\"Open\", \"Government\"],\n [\"Fundamental\", \"Rights\"],\n [\"Order and\", \"Security\"],\n [\"Regulatory\", \"Enforcement\"],\n [\"Civil\", \"Justice\"],\n [\"Criminal\", \"Justice\"],\n [\"OVERALL\", \"SCORE\"],\n]\n\nfunction Factors(props) {\n const [containerRef, , containerNode] = useDimensions()\n const factorGraphRef = useRef()\n const inSmallWidthMode = useSmallWidthMode()\n\n const {\n selectedFactor,\n selectedYear,\n selectedCountry,\n setOverrideMapVisibility,\n } = props\n const factorSelected = selectedFactor !== \"\"\n\n const cardFactorIndex = factors.indexOf(selectedFactor)\n const factorNumber = cardFactorIndex + 1\n const countryData = DataLoader.dataByYear[selectedYear].countries.find(\n (country) => country.Country === selectedCountry,\n )\n\n const { aggregateFactorKeys } = DataLoader.dataByYear[selectedYear]\n\n const factorsToDisplay = factorSelected\n ? DataLoader.dataByYear[selectedYear].questionKeys.filter(\n (questionKey) => questionKey[0] === `${cardFactorIndex + 1}`,\n )\n : DataLoader.dataByYear[selectedYear].aggregateFactorKeys\n\n const factorDisplay = factorsToDisplay.map((subfactor, subfactorIndex) => {\n let subfactorKey = subfactor.split(\" \")[0]\n subfactorKey =\n subfactorKey[subfactorKey.length - 1] === \".\"\n ? subfactorKey.substr(0, subfactorKey.length - 1)\n : subfactorKey\n const textKey = `${\n factorSelected ? `Sub-Factor ${subfactorKey}` : subfactor.split(\":\")[0]\n } Description`\n const subfactorText = DataLoader.getCopy(textKey)\n return (\n \n
\n )\n })\n const nextFactorValue = factors[cardFactorIndex + 1]\n const nextFactorLabel =\n cardFactorIndex === factors.length - 1\n ? null\n : factorHeaderLabels[cardFactorIndex + 2].join(\" \")\n const nextFactorButton = nextFactorLabel ? (\n {subfactor}
\n \n
\n \n \n \n WJP Rule of Law Index | {factorSelected ? factorTitle : \"Factors\"}{\" \"}\n \n \n \n \n
\n \n \n )\n}\n\nexport default function FactorsControls(props) {\n return (\n \n
\n \n {factorTitle}\n
\n \n
\n \n {factorSelected ? (\n \n {factorSelected\n ? factorTitle\n : \"Explore rankings by factor components\"}\n
\n \n {factorDisplay}\n {nextFactorButton}\n
\n \n
\n )\n}\n","import React, { useState, useRef, useEffect } from \"react\"\nimport DataLoader, { factors, years } from \"../DataLoader\"\n\nimport gradient from \"../utils/gradient\"\nimport \"./GlobalInsightsHistorical.scss\"\nimport { globalInsightsConstants } from \"./\"\nimport { scaleSqrt } from \"d3-scale\"\nimport Tooltip from \"../Tooltip/\"\nimport { useTransition, animated } from \"react-spring\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport getShortCountryLabel from \"../utils/getShortCountryLabel\"\n\nexport default function GlobalInsightsHistorical(props) {\n const [tooltipData, setTooltipData] = useState(null)\n\n const {\n selectedYear,\n selectedFactor,\n containerDimensions,\n selectedFilterIncome,\n selectedFilterRegion,\n selectedCountry,\n headerHeight,\n } = props\n const selectedCountryRef = useRef()\n const inSmallWidthMode = useSmallWidthMode()\n useEffect(() => {\n if (\n selectedCountry !== \"\" &&\n selectedCountryRef.current &&\n props.containerRef &&\n headerHeight\n ) {\n const scrollDomNode = inSmallWidthMode\n ? document.documentElement\n : props.containerRef\n const scrollOffset =\n selectedCountryRef.current.getBoundingClientRect().y +\n scrollDomNode.scrollTop -\n 210 // 210 is about the size of the combined headers\n scrollDomNode.scrollTo({\n top: scrollOffset,\n behavior: \"smooth\",\n })\n }\n }, [selectedCountry, props.containerRef, inSmallWidthMode, headerHeight])\n\n let scrollToCountryNeeded = useRef(false)\n useEffect(() => {\n scrollToCountryNeeded.current = true\n }, [selectedFactor, selectedYear])\n\n // always grab the last year, as we want to show all countries\n let countries = [...DataLoader.dataByYear[selectedYear].countries]\n\n // since income & regions vary from year to year, these values might not make sense for the countries selected above\n if (selectedFilterIncome !== \"\") {\n countries = countries.filter(\n (country) => country[\"Income Group\"] === selectedFilterIncome,\n )\n }\n if (selectedFilterRegion !== \"\") {\n countries = countries.filter(\n (country) => country.Region === selectedFilterRegion,\n )\n }\n countries = countries.map((country) => {\n return { Country: country.Country }\n })\n\n const factorSelected = selectedFactor !== \"\"\n const factorIndex = factorSelected ? factors.indexOf(selectedFactor) : -1\n\n const {\n rowHeight,\n labelRankPadding,\n sidePadding,\n barHeight,\n labelRankWidth,\n } = globalInsightsConstants\n\n const sidePaddingToUse = inSmallWidthMode ? labelRankPadding : sidePadding\n\n const svgHeight = countries.length * rowHeight\n const svgWidth =\n (containerDimensions.width ? containerDimensions.width : 300) -\n (inSmallWidthMode ? 0 : 32)\n\n const scoreKey = factorSelected\n ? `Factor ${factorIndex + 1}: ${selectedFactor}`\n : \"overall\"\n const selectedYearIndex = years.indexOf(selectedYear)\n const yearsToUse = years.slice(0, selectedYearIndex + 1)\n countries.forEach((country) => {\n years.forEach((year) => {\n const countryDatum = DataLoader.dataByYear[year].countries.find(\n (d) => d.Country === country.Country,\n )\n if (countryDatum) {\n country[year] = countryDatum\n }\n })\n })\n years.forEach((year) => {\n countries.sort((a, b) => {\n const bValue = b[year] ? b[year][scoreKey] : null\n const aValue = a[year] ? a[year][scoreKey] : null\n\n if (!aValue && !bValue) {\n return 0 //perhaps do an alphabetic comparison? nah we don't really care cause we don't display em anyway\n } else if (!aValue) {\n return 1\n } else if (!bValue) {\n return -1\n }\n return bValue - aValue\n })\n countries.forEach((country, countryIndex) => {\n country[`rank_${year}`] = countryIndex\n })\n })\n\n countries.sort((a, b) => {\n return a[`rank_${selectedYear}`] - b[`rank_${selectedYear}`]\n })\n\n const labelWidth = Math.max(\n svgWidth * globalInsightsConstants.labelWidthPercentage,\n globalInsightsConstants.minLabelWidth,\n )\n const fullBarWidth = svgWidth - labelWidth\n\n const yearWidth = (fullBarWidth - sidePaddingToUse) / yearsToUse.length\n const radiusScale = scaleSqrt().domain([0, 1]).range([2, 10])\n\n const countPerYear = {}\n years.forEach((year) => {\n countPerYear[year] = 0\n countries.forEach((country) => {\n const score = country[year]\n if (!score) {\n return\n }\n countPerYear[year]++\n })\n })\n\n const hoverCountry = (country, year, showTooltip = true) => {\n return (event) => {\n if (!country) {\n return setTooltipData(null)\n }\n\n let x = 0\n let y = 0\n if (\"clientX\" in event) {\n x = event.clientX\n y = event.clientY\n }\n if (event.touches) {\n event.preventDefault()\n event.stopPropagation()\n }\n setTooltipData({\n country: country[year],\n year,\n x,\n y,\n showTooltip,\n showHistoricalPlot: true,\n })\n }\n }\n\n const getTransitionValues = (country) => {\n const countryIndex = countries.findIndex((d) => d === country)\n\n const result = { y: countryIndex * rowHeight }\n const countryPoints = []\n const yearsWithData = {}\n yearsToUse.forEach((year, yearIndex) => {\n if (!country[year]) {\n return null\n }\n const score = country[year][scoreKey]\n if (!score) {\n return null\n }\n const x = yearWidth * yearIndex + yearWidth * 0.5 + sidePaddingToUse\n const yearRank = country[`rank_${year}`]\n\n // we can either position circles relative to the number of countries in that year\n // or always having a fixed height per row. varies if you want to have a large gap at the bottom\n // or have years line up across the entire graph\n\n // fixed row height\n const cy = yearRank * rowHeight + rowHeight * 0.5\n\n // variable row height depending on number of countries in each year\n // const cy = yearRank / countPerYear[year] * svgHeight + rowHeight * 0.5\n result[`cx-${year}`] = x\n result[`cy-${year}`] = cy\n yearsWithData[year] = true\n countryPoints.push([x, cy])\n })\n years.forEach((year, yearIndex) => {\n if (yearsWithData[year]) {\n return\n }\n let tries = 0\n let stop = true\n let xy = null\n let distance = Number.MAX_SAFE_INTEGER\n while (tries < years.length && stop) {\n const yearIndexToTry = tries\n const yearToTry = years[yearIndexToTry]\n let potentialDistance = Math.abs(yearIndexToTry - yearIndex)\n if (yearsWithData[yearToTry] && potentialDistance < distance) {\n potentialDistance = distance\n xy = [result[`cx-${yearToTry}`], result[`cy-${yearToTry}`]]\n }\n tries++\n }\n if (!xy) {\n console.warn(\"something went wrong\")\n debugger\n }\n countryPoints.push(xy)\n result[`cx-${year}`] = xy[0]\n result[`cy-${year}`] = xy[1]\n })\n const countryLine = countryPoints.map((point) => point.join(\",\")).join(\" \")\n result.countryLine = countryLine\n if (countryLine.includes(\"NaN\")) {\n debugger\n }\n // console.log(result)\n return result\n }\n\n const totalTransitions = countries.length\n let numberTransitionsCompleted = 0\n\n const transitions = useTransition(countries, (d) => d.Country, {\n enter: getTransitionValues,\n update: getTransitionValues,\n onRest: () => {\n numberTransitionsCompleted++\n if (numberTransitionsCompleted === totalTransitions) {\n if (scrollToCountryNeeded.current) {\n scrollToCountryNeeded.current = false\n if (\n selectedCountry !== \"\" &&\n selectedCountryRef.current &&\n props.containerRef\n ) {\n const scrollOffset =\n selectedCountryRef.current.getBoundingClientRect().y +\n props.containerRef.scrollTop -\n 210 // 210 is about the size of the combined headers\n props.containerRef.scrollTo({\n top: scrollOffset,\n behavior: \"smooth\",\n })\n }\n }\n }\n },\n })\n\n const countryGroups = transitions.map((transition) => {\n if (transition.state === \"leave\") {\n return null\n }\n const country = transition.item\n const countryIndex = countries.findIndex((d) => d === country)\n\n const { y } = transition.props\n const textY = barHeight * 0.75\n const topMargins = (rowHeight - barHeight) / 2\n const yearsCircles = yearsToUse.map((year, yearIndex) => {\n if (!country[year]) {\n return null\n }\n const score = country[year][scoreKey]\n if (!score) {\n return null\n }\n const x = transition.props[`cx-${year}`]\n const y = transition.props[`cy-${year}`]\n\n const fill = gradient(score)\n const r = radiusScale(score)\n return (\n \n \n
\n \n \n
\n )\n}\n","import React, { useState, useEffect, useRef } from \"react\"\nimport DataLoader, { factors } from \"../DataLoader\"\n\nimport { scaleLinear } from \"d3-scale\"\nimport gradient from \"../utils/gradient\"\n\nimport \"./GlobalInsightsRanking.scss\"\nimport { globalInsightsConstants } from \"./\"\nimport Tooltip from \"../Tooltip/\"\nimport { useTransition, animated } from \"react-spring\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport getShortCountryLabel from \"../utils/getShortCountryLabel\"\n\nexport default function GlobalInsightsTable(props) {\n const {\n selectedYear,\n selectedFactor,\n containerDimensions,\n selectedFilterIncome,\n selectedFilterRegion,\n selectedCountry,\n headerHeight,\n } = props\n const [tooltipData, setTooltipData] = useState()\n const selectedCountryRef = useRef()\n const inSmallWidthMode = useSmallWidthMode()\n useEffect(() => {\n if (\n selectedCountry !== \"\" &&\n selectedCountryRef.current &&\n props.containerRef &&\n headerHeight\n ) {\n const scrollDomNode = inSmallWidthMode\n ? document.documentElement\n : props.containerRef\n const scrollOffset =\n selectedCountryRef.current.getBoundingClientRect().y +\n scrollDomNode.scrollTop -\n 185 // 185 is about the size of the combined headers\n scrollDomNode.scrollTo({\n top: scrollOffset,\n behavior: \"smooth\",\n })\n }\n }, [selectedCountry, props.containerRef, inSmallWidthMode, headerHeight])\n\n let scrollToCountryNeeded = useRef(false)\n useEffect(() => {\n scrollToCountryNeeded.current = true\n }, [selectedFactor, selectedYear])\n\n let countries = [...DataLoader.dataByYear[selectedYear].countries]\n\n if (selectedFilterIncome !== \"\") {\n countries = countries.filter(\n (country) => country[\"Income Group\"] === selectedFilterIncome,\n )\n }\n if (selectedFilterRegion !== \"\") {\n countries = countries.filter(\n (country) => country.Region === selectedFilterRegion,\n )\n }\n\n if (props.overrideRegionFilter) {\n countries = countries.filter(props.overrideRegionFilter)\n }\n\n const factorSelected = selectedFactor !== \"\"\n const factorIndex = factorSelected ? factors.indexOf(selectedFactor) : -1\n\n const {\n rowHeight,\n labelRankPadding,\n labelRankWidth,\n sidePadding,\n barHeight,\n } = globalInsightsConstants\n\n const svgHeight = countries.length * rowHeight\n const sidePaddingToUse = inSmallWidthMode ? labelRankPadding : sidePadding\n const svgWidth =\n (containerDimensions.width ? containerDimensions.width : 300) -\n sidePaddingToUse\n const scoreKey = factorSelected\n ? `Factor ${factorIndex + 1}: ${selectedFactor}`\n : \"overall\"\n const sortedCountries = [...countries]\n sortedCountries.sort((a, b) => {\n // if (selectedSortOrder === 'alphabetical') {\n // if (a.Country > b.Country) {\n // return 1\n // }\n // return -1\n // }\n return b[scoreKey] - a[scoreKey]\n })\n const countryIndicies = {}\n sortedCountries.forEach((country, index) => {\n countryIndicies[country.Country] = index\n })\n\n const maxValue = sortedCountries[0][scoreKey]\n\n const labelWidth = Math.max(\n svgWidth * globalInsightsConstants.labelWidthPercentage,\n globalInsightsConstants.minLabelWidth,\n )\n const valueLabelWidth = 30 + globalInsightsConstants.labelRankPadding * 2\n const fullBarWidth = svgWidth - labelWidth - valueLabelWidth\n\n const xScale = scaleLinear().domain([0, maxValue]).range([0, fullBarWidth])\n const hoverCountry = (country) => {\n return (event) => {\n if (!country) {\n return setTooltipData(null)\n }\n let x = 0\n let y = 0\n if (\"clientX\" in event) {\n x = event.clientX\n y = event.clientY\n }\n if (event.touches) {\n event.preventDefault()\n event.stopPropagation()\n }\n setTooltipData({ country, x, y })\n }\n }\n\n const getSpringValues = (country) => {\n const score = country[scoreKey]\n const fill = gradient(score)\n const width = xScale(score.toFixed(2))\n const y = countryIndicies[country.Country] * rowHeight\n\n return {\n score,\n fill,\n width,\n y,\n }\n }\n const totalTransitions = countries.length\n let numberTransitionsCompleted = 0\n const transitions = useTransition(countries, (d) => d.Country, {\n enter: getSpringValues,\n update: getSpringValues,\n onRest: () => {\n numberTransitionsCompleted++\n if (numberTransitionsCompleted === totalTransitions) {\n if (scrollToCountryNeeded.current) {\n scrollToCountryNeeded.current = false\n if (\n selectedCountry !== \"\" &&\n selectedCountryRef.current &&\n props.containerRef\n ) {\n const scrollOffset =\n selectedCountryRef.current.getBoundingClientRect().y +\n props.containerRef.scrollTop -\n 185 // 185 is about the size of the combined headers\n props.containerRef.scrollTo({\n top: scrollOffset,\n behavior: \"smooth\",\n })\n }\n }\n }\n },\n })\n\n const countryGroups = transitions.map((transition, countryIndex) => {\n if (transition.state === \"leave\") {\n return null\n }\n const country = transition.item\n const { score, fill, width, y } = transition.props\n\n const textY = barHeight * 0.75\n const bgRect =\n countryIndicies[country.Country] % 2 === 0 ? (\n \n Countries Scored by {factorSelected ? selectedFactor : \"Overall Score\"}\n
\n \n \n {headers}\n \n
\n \n {tooltipData && tooltipData.showTooltip ? (\n \n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/lightbulb-icon.612e07cd.svg\";","import React, { useState, useRef, useEffect, useLayoutEffect } from \"react\"\nimport { useHistory } from \"react-router-dom\"\nimport useDimensions from \"react-use-dimensions\"\nimport InlineButtons from \"../InlineButtons/\"\nimport \"./styles.scss\"\nimport DataLoader from \"../DataLoader\"\nimport GlobalInsightsTable from \"./GlobalInsightsTable\"\nimport GlobalInsightsHistorical from \"./GlobalInsightsHistorical\"\nimport GlobalInsightsRanking from \"./GlobalInsightsRanking\"\nimport { Helmet } from \"react-helmet\"\nimport helpIcon from \"../images/lightbulb-icon.svg\"\nimport { useMemo } from \"react\"\n\nexport default function GlobalInsights(props) {\n const {\n selectedCountry,\n selectedYear,\n selectedFactor,\n unusedOpts,\n setOverrideMapVisibility,\n toggleGlobalInsightsInstructions,\n } = props\n const history = useHistory()\n const [selectedFilterRegion, setFilterRegion] = useState(\"\")\n const [selectedFilterIncome, setFilterIncome] = useState(\"\")\n const [selectedSortOrder, setSortOrder] = useState(\"ranking\")\n const [containerRef, containerDimensions, containerNode] = useDimensions()\n const [mouseOverFilter, setMouseOverFilter] = useState(null)\n const controlsRef = useRef()\n\n useLayoutEffect(() => {\n if (selectedCountry) {\n return\n }\n window.scrollTo({ top: 0 })\n setTimeout(() => {\n window.scrollTo({ top: 0 })\n }, 200)\n }, [selectedCountry])\n\n const selectView = (view) => {\n return () => {\n const newUrlParams = {\n country: selectedCountry,\n year: selectedYear,\n factor: selectedFactor,\n }\n\n const baseUrl = \"/global\"\n let url = `${baseUrl}/${encodeURIComponent(newUrlParams.year)}`\n if (newUrlParams.country !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.country)}`\n }\n if (newUrlParams.factor !== \"\") {\n url = `${url}/${encodeURIComponent(newUrlParams.factor)}`\n }\n url = `${url}/${view}`\n history.push(url)\n }\n }\n\n const globalInsightButtons = [\n {\n label: \"Table\",\n onClick: selectView(\"table\"),\n value: \"table\",\n view: GlobalInsightsTable,\n },\n {\n label: \"Historical\",\n onClick: selectView(\"historical\"),\n value: \"historical\",\n view: GlobalInsightsHistorical,\n className: \"overviewInstructionsHistorical\",\n },\n {\n label: \"Ranking\",\n onClick: selectView(\"ranking\"),\n value: \"ranking\",\n view: GlobalInsightsRanking,\n },\n ]\n\n let view = globalInsightButtons[2]\n\n if (unusedOpts[0]) {\n const matchingButton = globalInsightButtons.filter(\n (d) => d.value === unusedOpts[0],\n )\n if (matchingButton.length) {\n view = matchingButton[0]\n }\n }\n\n const updateFromSelect = (setter) => {\n return (event) => {\n if (setter === setFilterIncome) {\n setFilterRegion(\"\")\n }\n if (setter === setFilterRegion) {\n setFilterIncome(\"\")\n }\n setter(event.target.value)\n }\n }\n\n const hoverFilter = (filter) => {\n return () => {\n setMouseOverFilter(filter)\n }\n }\n\n const regionValues = useMemo(() => {\n return DataLoader.dataByYear[selectedYear].groups.Region.map((d) => d[0])\n }, [selectedYear])\n\n const regionOptions = useMemo(() => {\n return regionValues.sort().map((d) => (\n \n ))\n }, [regionValues])\n\n // go with hardcoded income values now that they are consistent, avoids need to sort\n const incomeValues = [\"Low\", \"Lower-middle\", \"Upper-middle\", \"High\"]\n const incomeOptions = incomeValues.map((d) => (\n \n ))\n if (\n selectedFilterRegion !== \"\" &&\n !regionValues.includes(selectedFilterRegion)\n ) {\n setFilterRegion(\"\")\n }\n if (\n selectedFilterIncome !== \"\" &&\n !incomeValues.includes(selectedFilterIncome)\n ) {\n setFilterIncome(\"\")\n }\n\n const scrollHeight = props.headerHeight\n ? window.innerHeight - props.headerHeight\n : null\n\n useEffect(() => {\n const cachedRef = controlsRef.current\n const observer = new IntersectionObserver(\n ([e]) => setOverrideMapVisibility(e.intersectionRatio < 0.99),\n { threshold: [0.99] },\n )\n\n observer.observe(cachedRef)\n\n return function () {\n observer.unobserve(cachedRef)\n }\n }, [setOverrideMapVisibility])\n\n let regionFilterOpacity = null\n let incomeFilterOpacity = null\n if (mouseOverFilter === null) {\n // set solely based on which filter is selected\n regionFilterOpacity = selectedFilterIncome !== \"\" ? 0.5 : null\n incomeFilterOpacity = selectedFilterRegion !== \"\" ? 0.5 : null\n } else {\n // set solely based on which filter mouse is over\n regionFilterOpacity = mouseOverFilter === \"region\" ? null : 0.5\n incomeFilterOpacity = mouseOverFilter === \"income\" ? null : 0.5\n }\n\n const showSortSelect = view.label === \"Table\"\n const sortStyle = {\n opacity: showSortSelect ? 1 : 0,\n pointerEvents: showSortSelect ? null : \"none\",\n display: showSortSelect ? null : \"none\",\n maxWidth: \"11em\",\n }\n\n const toggleHelp = () => {\n toggleGlobalInsightsInstructions()\n }\n return (\n \n Countries Scored by {factorSelected ? selectedFactor : \"Overall Score\"}\n
\n \n {tooltipData ? (\n \n \n WJP Rule of Law Index | Global Insights \n \n \n
\n \n )\n}\n","import React, { useEffect, useState } from \"react\"\nimport GlobalInsights from \"./GlobalInsights\"\nimport InsightsView from \"../InsightsView\"\n\nexport const globalInsightsConstants = {\n rowHeight: 24,\n labelRankPadding: 5,\n labelRankWidth: 28,\n sidePadding: 32,\n labelWidthPercentage: 0.3,\n fullBarWidthPercentage: 0.7,\n barHeight: 24 * 0.8,\n minLabelWidth: 140,\n}\n\nexport default function GlobalInsightsControls(props) {\n\n const [loaded, setLoaded] = useState(false)\n\n useEffect(() => {\n setTimeout(() => {\n setLoaded(true)\n }, 200)\n }, [])\n\n if(!loaded) {\n return null\n }\n\n return (\n \n
\n \n Filter By:\n \n \n {regionOptions}\n \n or\n \n \n {incomeOptions}\n \n \n \n \n \n
\n \n {country.Country} {score.toFixed(2)}\n
,\n tooltipEle,\n )\n}\n","import React, { useState } from \"react\"\n\nimport useDimensions from \"react-use-dimensions\"\nimport \"./styles.scss\"\nimport DataLoader from \"../DataLoader\"\nimport { scaleLinear } from \"d3-scale\"\nimport { gradientColors } from \"../utils/gradient\"\nimport CountryFactorFillGraphTooltip from \"./CountryFactorFillGraphTooltip\"\nimport { useSpring, animated, useTransition } from \"react-spring\"\nimport useDetectPrint from \"use-detect-print\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\n\nconst printFullWidth = 700\nconst printHalfWidth = printFullWidth - 245\n\nexport default function CountryFactorFillGraph(props) {\n const [tooltipData, setTooltipData] = useState(null)\n const { selectedCountry, selectedYear, scoreKey, countryData } = props\n\n const [ref, containerDimensions] = useDimensions()\n const margins = {\n top: 40,\n left: 30,\n right: 30,\n bottom: 10,\n }\n const containerHeight = 80\n const isPrinting = useDetectPrint()\n const inSmallWidthMode = useSmallWidthMode()\n\n let graphContents = null\n //let defs = null\n const [selectedValues, setSelectedValues] = useSpring(() => ({\n from: { x: 0, score: 0 },\n to: { x: 0, score: 0 },\n }))\n const countries = DataLoader.dataByYear[selectedYear].countries\n\n let containerWidth = containerDimensions.width || 400\n if (isPrinting) {\n if (props.printStyle === \"fullWidth\") {\n containerWidth = printFullWidth\n } else if (props.printStyle === \"halfWidth\") {\n containerWidth = printHalfWidth\n }\n }\n let width = containerWidth - margins.left - margins.right\n let height = containerHeight - margins.top - margins.bottom\n\n const xScale = scaleLinear().domain([0, 1]).range([0, width])\n\n const getTrianglePositions = (country) => {\n const score = country[scoreKey]\n const x = xScale(score)\n const selected = country.Country === selectedCountry\n const hovered = tooltipData ? country === tooltipData.country : false\n const opacity = selected || hovered ? 1 : inSmallWidthMode ? 0.05 : 0.1\n const fill = hovered ? \"#482D8B\" : \"#000000\"\n\n if (selected) {\n setSelectedValues({ x, score })\n }\n return { x, opacity, fill }\n }\n const triangleTransitions = useTransition(\n containerDimensions.width ? countries : [],\n (d) => d.Country,\n {\n enter: getTrianglePositions,\n update: getTrianglePositions,\n },\n )\n\n const groups = [\n {\n attribute: \"Region\",\n label: inSmallWidthMode ? \"Reg. Avg\" : \"Regional Avg\",\n value: DataLoader.dataByYear[selectedYear].groupAverages.Region.find(\n (groupValue) => groupValue.group === countryData.Region,\n )[scoreKey],\n },\n {\n attribute: \"Global\",\n label: \"Global Avg\",\n value: DataLoader.dataByYear[selectedYear].groupAverages.global[scoreKey],\n },\n ].sort((a, b) => a.value - b.value)\n\n const getGroupPositions = (group) => {\n const value = group.value\n const x = xScale(value)\n return { x, value }\n }\n const groupTransitions = useTransition(\n containerDimensions.width ? groups : [],\n (d) => d.attribute,\n {\n enter: getGroupPositions,\n update: getGroupPositions,\n },\n )\n\n const hoverCountry = (country, _x, _y) => {\n return (event) => {\n if (inSmallWidthMode) {\n return setTooltipData(null)\n }\n if (!country) {\n return setTooltipData(null)\n }\n\n let x = event.pageX\n const targetPosition = event.target.getBoundingClientRect()\n let y = targetPosition.y - 1\n setTooltipData({ country, x, y })\n }\n }\n\n const barHeight = 20\n const miniBarHeight = barHeight * 0.2\n const triangles = triangleTransitions.map((transition, countryIndex) => {\n if (transition.state === \"leave\") {\n return null\n }\n const country = transition.item\n const { x, fill, opacity } = transition.props\n return (\n \n \n \n \n {gradientColors.map((color) => (\n \n \n {graphContents}\n \n {tooltipData ? (\n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/arrow-down-dark.5e6b6155.svg\";","export default __webpack_public_path__ + \"static/media/arrow-up-dark.27f8bda8.svg\";","import React from \"react\"\n\nimport gradient from \"../utils/gradient\"\n\nimport \"./CountryCardOverall.scss\"\nimport DataLoader, { years } from \"../DataLoader\"\nimport CountryFactorFillGraph from \"../CountryFactorFillGraph/\"\nimport { factorImages } from \"../images/factor_icons/factorImages\"\n//import HistoricalBubbleGraph from \"../HistoricalBubbleGraph/\"\nimport arrowDown from \"../images/arrow-down.svg\"\nimport arrowUp from \"../images/arrow-up.svg\"\nimport arrowDownDark from \"../images/arrow-down-dark.svg\"\nimport arrowUpDark from \"../images/arrow-up-dark.svg\"\nimport { animated, useSpring } from \"react-spring\"\n\nexport default function CountryCardOverall(props) {\n const {\n selectedCountry,\n selectedYear,\n selectedFactor,\n factorIndex,\n factorSelected,\n countryData,\n scoreKey,\n } = props\n const yearIndex = years.indexOf(selectedYear)\n const title = factorSelected ? (\n \n \n
\n )\n}\n","import React, { useState } from \"react\"\nimport ordinal from \"ordinal\"\n\nimport \"./CountryCardRanks.scss\"\nimport InlineButtons from \"../InlineButtons\"\nimport CountryFactorBarGraph from \"../CountryFactorBarGraph/\"\n\nexport default function CountryCardRanks(props) {\n const [selectedRankAttribute, setRankAttribute] = useState(\"Global\")\n const {\n selectedCountry,\n selectedYear,\n selectedFactor,\n factorSelected,\n countryData,\n scoreKey,\n } = props\n\n const rank = ordinal(countryData[`${scoreKey}_Rank_Global`])\n const rankCount = countryData.Count_Global\n const title = `${selectedCountry} Ranked ${rank} Across ${rankCount} Countries, ${selectedYear}`\n const graphTitle = factorSelected ? selectedFactor : \"Overall Score\"\n return (\n \n
\n\n \n
\n \n
\n {overallTitle}
\n \n \n {values.score.interpolate((s) => s.toFixed(2))}\n \n {overallCOTIcon}\n
\n \n
\n Global Rank
\n \n \n {values.globalRank.interpolate(Math.round)}\n \n /\n \n {values.globalDemoninator.interpolate(Math.round)}\n {\" \"}\n {globalRankCOTIcon}\n
\n \n
\n Regional Rank
\n \n \n {values.regionRank.interpolate(Math.round)}\n \n /\n \n {values.regionDemoninator.interpolate(Math.round)}\n {\" \"}\n {\n //regionalRankCOTIcon\n }\n
\n \n
\n Income Rank
\n \n \n {values.incomeRank.interpolate(Math.round)}\n {\" \"}\n /\n \n {values.incomeDenominator.interpolate(Math.round)}\n {\" \"}\n {\n //incomeRankCOTIcon\n }\n
\n \n
\n Rank Change
\n \n \n {values.rankChange.interpolate((c) =>\n hasPreviousYearData\n ? c === 0\n ? \"0\"\n : c > 0\n ? `+${Math.round(c)}`\n : Math.round(c)\n : \"-\",\n )}\n {\" \"}\n {rankChangeIcon}\n
\n \n
\n Score Change
\n \n \n {values.scoreChange.interpolate((c) => {\n const valueSignless = Math.abs(c).toFixed(2)\n const valueWithSign = c > 0 ? `+${c.toFixed(2)}` : c.toFixed(2)\n const value =\n valueSignless === \"0.00\" ? valueSignless : valueWithSign\n return hasPreviousYearData ? (c === 0 ? \"0.00\" : value) : \"-\"\n })}\n {\" \"}\n {scoreChangeIcon}\n
\n \n
\n Arrows signify year-to-year change
\n \n
\n \n \n
\n )\n}\n","import React from \"react\"\n\nimport useDimensions from \"react-use-dimensions\"\nimport \"./styles.scss\"\nimport { scaleLinear } from \"d3-scale\"\nimport { gradientColors } from \"../utils/gradient\"\nimport { useSpring, animated } from \"react-spring\"\n\nimport useDetectPrint from \"use-detect-print\"\nconst printFullWidth = 700\nconst printHalfWidth = printFullWidth - 245\n\nexport default function SingleFillGraph(props) {\n const [ref, containerDimensions] = useDimensions()\n const margins = {\n top: 2,\n left: 30 + props.leftMargin,\n right: 30,\n bottom: 2,\n }\n const containerHeight = 26\n\n let graphContents = null\n let defs = null\n const isPrinting = useDetectPrint()\n const [spring, set] = useSpring(() => ({ value: 0, x: 0 }))\n\n let containerWidth = containerDimensions.width || 400\n if (isPrinting) {\n containerWidth = printHalfWidth\n }\n let width = containerWidth - margins.left - margins.right\n const xScale = scaleLinear().domain([0, 1]).range([0, width])\n\n set({ value: props.value, x: xScale(props.value.toFixed(2)) })\n\n const barHeight = 20\n\n const { x, value } = spring\n const maskId = `singleFillGraphMaskId-${(\n (Math.random() * 0xffffff) <<\n 0\n ).toString(16)}`\n\n graphContents = (\n \n
\n \n Compare {selectedYear} score rankings for {selectedCountry} by\n toggling between global, {countryData.Region} regional peers, and{\" \"}\n {countryData[\"Income Group\"]} income peers.\n
\n \n
\n \n
\n \n \n
\n )\n}\n\nSingleFillGraph.defaultProps = {\n leftMargin: 0,\n}\n","import React, { useState } from \"react\"\n\nimport InlineButtons from \"../InlineButtons/\"\n\nimport \"./CountryCardFactors.scss\"\nimport DataLoader, { years } from \"../DataLoader\"\nimport gradient from \"../utils/gradient\"\nimport CountryFactorFillGraph from \"../CountryFactorFillGraph/\"\nimport isEqual from \"lodash/isEqual\"\nimport SingleFillGraph from \"../SingleFillGraph\"\nimport { factorImages } from \"../images/factor_icons/factorImages\"\nimport classnames from \"classnames\"\n\nimport arrowDown from \"../images/arrow-down.svg\"\nimport arrowUp from \"../images/arrow-up.svg\"\nimport { animated, useSprings } from \"react-spring\"\n\nexport default function CountryCardFactors(props) {\n const [previousFactors, setPreviousFactors] = useState(false)\n const [factorSort, setFactorSort] = useState(\"alphabetical\")\n const [factorsExpanded, setFactorsExpanded] = useState([])\n\n const {\n selectedCountry,\n selectedYear,\n countryData,\n factorSelected,\n selectedFactor,\n factorIndex,\n } = props\n\n const yearIndex = years.indexOf(selectedYear)\n\n const factors = factorSelected\n ? DataLoader.dataByYear[selectedYear].questionKeys.filter(\n (questionKey) => questionKey[0] === `${factorIndex + 1}`,\n )\n : DataLoader.dataByYear[selectedYear].aggregateFactorKeys\n\n if (!isEqual(factors, previousFactors)) {\n setPreviousFactors(factors)\n setFactorsExpanded(factorSelected ? [] : factors.map((d) => false))\n }\n\n const sortOptions = [\n { value: \"value\", label: `${factorSelected ? \"Sub-\" : \"\"}Factor Score` },\n {\n value: \"alphabetical\",\n label: `${factorSelected ? \"Sub-\" : \"\"}Factors 1-${factors.length}`,\n },\n ]\n\n // const collapseAll = () => {\n // setFactorsExpanded(factorsExpanded.map(d => false))\n // }\n // const expandAll = () => {\n // setFactorsExpanded(factorsExpanded.map(d => true))\n // }\n\n // const subfactorOptions = [\n // { label: 'Collapse All', onClick: collapseAll, value: 'allCollapsed' },\n // { label: 'Expand All', onClick: expandAll, value: 'allExpanded' },\n // ]\n\n const title = factorSelected ? (\n \n \n More Info\n
\n )\n }\n\n let subfactors = null\n if (!factorSelected && factorsExpanded[cardFactorIndex]) {\n const subfactorQuestions = DataLoader.dataByYear[\n selectedYear\n ].questionKeys.filter(\n (questionKey) => questionKey[0] === `${cardFactorIndex + 1}`,\n )\n\n subfactors = subfactorQuestions.map((subfactor, subfactorIndex) => {\n const score = countryData[subfactor]\n return (\n \n
\n )\n })\n }\n return (\n {subfactor}
\n \n
\n \n
\n )\n })\n\n // const countNumFactorsExpanded = factorsExpanded.reduce((previous, current) => previous + (current ? 1 : 0) , 0)\n // const subFactorExpansionState = countNumFactorsExpanded === 0 ? 'allCollapsed' : (countNumFactorsExpanded === factorsExpanded.length ? 'allExpanded' : '')\n return (\n \n \n {title}\n \n {expandCollapseButton}\n
\n \n
\n {subfactors}\n \n \n \n
\n
\n \n \n {score.interpolate((n) => n.toFixed(2))}\n \n {scoreCOTIcon}\n
\n | Global Rank | \n\n | \n
| Regional Rank | \n\n | \n
| Income Rank | \n\n | \n
\n
\n \n
\n )\n}\n","import React from \"react\"\nimport \"./CountryCardCOT.scss\"\nimport DataLoader, { years } from \"../DataLoader\"\nimport HistoricalBubbleGraph from \"../HistoricalBubbleGraph/\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport { factorImages } from \"../images/factor_icons/factorImages\"\n\nexport default function CountryCardCOT(props) {\n const {\n selectedCountry,\n selectedFactor,\n factorIndex,\n factorSelected,\n //scoreKey,\n } = props\n const inSmallWidthMode = useSmallWidthMode()\n const historicalData = years\n .map((year) => {\n const countryDatum = DataLoader.dataByYear[year].countries.find(\n (country) => country.Country === selectedCountry,\n )\n return {\n year,\n data: countryDatum,\n }\n })\n .filter((datum) => datum.data)\n\n const minMaxYear = [\n historicalData[0].year,\n historicalData[historicalData.length - 1].year,\n ]\n const yearSpan = minMaxYear.join(\" - \")\n\n const title = factorSelected ? (\n \n \n
\n\n {factorDivs}\n \n
\n \n
\n )\n}\n","import React, { useEffect, useMemo, useRef } from \"react\"\nimport InsightsView from \"../InsightsView/\"\n\nimport \"./styles.scss\"\nimport { factors } from \"../DataLoader\"\nimport CountryCardOverall from \"./CountryCardOverall\"\nimport CountryCardRanks from \"./CountryCardRanks\"\nimport CountryCardFactors from \"./CountryCardFactors\"\nimport CountryCardCOT from \"./CountryCardCOT\"\nimport DataLoader from \"../DataLoader\"\nimport { factorImages } from \"../images/factor_icons/factorImages\"\nimport useDimensions from \"react-use-dimensions\"\nimport Map from \"../Map\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport ReactMarkdown from \"react-markdown\"\nimport { Helmet } from \"react-helmet\"\nconst links = [\"Overall\", \"Change Over Time\", \"Rank\", \"Sub-Factors\"]\nfunction CountryInsights(props) {\n const [scrollyRef, scrollyContainerDimensions, scrollNode] = useDimensions()\n const [defaultMapRef, defaultMapDimensions] = useDimensions()\n const { selectedCountry, selectedYear, selectedFactor } = props\n useEffect(() => {\n window.scrollTo(0, 0)\n }, [])\n const inSmallWidthMode = useSmallWidthMode()\n const factorSelected = selectedFactor !== \"\"\n const factorIndex = factorSelected ? factors.indexOf(selectedFactor) : -1\n\n const selectedFactorScoreKey = factorSelected\n ? `Factor ${factorIndex + 1}: ${selectedFactor}`\n : \"overall\"\n\n const countryData = DataLoader.dataByYear[selectedYear].countries.find(\n (country) => country.Country === selectedCountry,\n )\n\n const currentYearData = DataLoader.dataByYear[selectedYear]\n const mapData = useMemo(\n () =>\n currentYearData.countries.map((c) => ({\n code: c[\"Country Code\"],\n value: c[selectedFactorScoreKey],\n originalDatum: c,\n scoreKey: selectedFactorScoreKey,\n })),\n [currentYearData, selectedFactorScoreKey],\n )\n\n const previousSelectedFactor = useRef()\n useEffect(() => {\n if (previousSelectedFactor.current !== selectedFactor) {\n const scrollDomNode = inSmallWidthMode\n ? document.documentElement\n : scrollNode\n if (scrollDomNode) {\n scrollDomNode.scrollTo({\n top: 0,\n behavior: \"smooth\",\n })\n }\n }\n previousSelectedFactor.current = selectedFactor\n }, [selectedFactor, inSmallWidthMode, scrollNode])\n\n if (!countryData) {\n let message = \"Please select a country to view insights\"\n if (selectedCountry !== \"\") {\n message = `No data exists for ${selectedCountry} in ${selectedYear}, try selecting a different country or year.`\n }\n const selectCountry = (country) => {\n return () => {\n props.updateUrl(\"country\")(country)\n }\n }\n let mapWidth = defaultMapDimensions.width\n let map = null\n if (mapWidth) {\n const mapHeight = inSmallWidthMode ? mapWidth / 2 : 400\n map = (\n \n
\n\n \n
\n {cotText}
\n \n
\n \n \n WJP Rule of Law Index | Country Insights \n \n
\n )\n }\n const scrollHeight =\n window.innerHeight -\n (scrollyContainerDimensions.y ? scrollyContainerDimensions.y : 0)\n if (isNaN(scrollHeight)) {\n debugger\n }\n\n const scrollIntoView = (link) => {\n return (event) => {\n document\n .querySelector(`a[name=${link}]`)\n .scrollIntoView({ behavior: \"smooth\" })\n event.preventDefault()\n }\n }\n\n let factorDescription = null\n if (factorSelected) {\n const textKey = `Factor ${factorIndex + 1} Description`\n factorDescription = DataLoader.getCopy(textKey)\n }\n\n return (\n {message}
\n \n {map}\n
\n \n \n \n WJP Rule of Law Index |{\" \"}\n {selectedCountry ? selectedCountry : \"Country\"} Insights\n \n \n \n {factorSelected ? (\n \n */}\n
\n \n )\n}\n\nexport default function CountryInsightsControls(props) {\n return (\n \n {selectedCountry}\n {/*
\n \n \n Download PDF 
\n \n
*/}\n \n
\n
\n Region
\n {countryData.Region}
\n \n
\n {inSmallWidthMode ? \"Income\" : \"Income Group\"}\n
\n {countryData[\"Income Group\"]}
\n \n {links.map((link) => {\n const linkAnchor = link.toLowerCase().replace(/ /g, \"\")\n return (\n \n {link}\n \n \n \"\n width=\"32\"\n height=\"32\"\n fill=\"none\"\n >\n \n \n )\n })}\n
\n \n
\n ) : null}\n\n \n
\n \n
\n \n {resources.map(resource => {\n return {resource.text}\n })}\n
\n {title}
\n \n {links.map((link) => {\n return (\n \n {link.text}
\n \n )\n}\n","export default __webpack_public_path__ + \"static/media/aboutBackground.ba007c47.png\";","export default __webpack_public_path__ + \"static/media/about_slideshow1_slide1.c2d1af57.png\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-1_02.21fecf9a.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-1_03.9e04f680.jpg\";","export default __webpack_public_path__ + \"static/media/about_slideshow1_slide3.775d659a.png\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-1_05.614c755c.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-1_06.84bff98b.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_01.61aedcbd.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_02.8748ddf2.png\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_03.be42cbc2.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_04.9fa08a0b.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_05.b071341c.png\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_06.bf903882.jpg\";","export default __webpack_public_path__ + \"static/media/21-OCT_Slide-2_07.d3a011b4.png\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide00.89dd736c.jpg\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide01.dd45bace.jpg\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide02.c2fc4e1f.jpg\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide03.6ce045cf.jpg\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide04.c8b440ec.jpg\";","export default __webpack_public_path__ + \"static/media/whoUsesSlide05.88676309.jpg\";","import React, { useState, useLayoutEffect } from \"react\"\n\nimport \"./styles.scss\"\nimport InsightsHeader from \"../Insights/InsightsHeader\"\nimport aboutBackgroundImage from \"../images/aboutBackground.png\"\n\nimport slide0Image from \"../images/slideshow/about_slideshow1_slide1.png\"\nimport slide1Image from \"../images/slideshow/21-OCT_Slide-1_02.jpg\"\nimport slide2Image from \"../images/slideshow/21-OCT_Slide-1_03.jpg\"\nimport slide3Image from \"../images/slideshow/about_slideshow1_slide3.png\"\nimport slide4Image from \"../images/slideshow/21-OCT_Slide-1_05.jpg\"\nimport slide5Image from \"../images/slideshow/21-OCT_Slide-1_06.jpg\"\n\nimport secondSlide0Image from \"../images/slideshow/21-OCT_Slide-2_01.jpg\"\nimport secondSlide1Image from \"../images/slideshow/21-OCT_Slide-2_02.png\"\nimport secondSlide2Image from \"../images/slideshow/21-OCT_Slide-2_03.jpg\"\nimport secondSlide3Image from \"../images/slideshow/21-OCT_Slide-2_04.jpg\"\nimport secondSlide4Image from \"../images/slideshow/21-OCT_Slide-2_05.png\"\nimport secondSlide5Image from \"../images/slideshow/21-OCT_Slide-2_06.jpg\"\nimport secondSlide6Image from \"../images/slideshow/21-OCT_Slide-2_07.png\"\n\n//images for Who Uses WJP\nimport whoUsesSlide0Image from \"../images/slideshow/whoUsesSlide00.jpg\"\nimport whoUsesSlide1Image from \"../images/slideshow/whoUsesSlide01.jpg\"\nimport whoUsesSlide2Image from \"../images/slideshow/whoUsesSlide02.jpg\"\nimport whoUsesSlide3Image from \"../images/slideshow/whoUsesSlide03.jpg\"\nimport whoUsesSlide4Image from \"../images/slideshow/whoUsesSlide04.jpg\"\nimport whoUsesSlide5Image from \"../images/slideshow/whoUsesSlide05.jpg\"\n\nimport DataLoader from \"../DataLoader\"\nimport { group } from \"d3-array\"\nimport { Helmet } from \"react-helmet\"\nimport { Link } from \"react-router-dom\"\nimport classNames from \"classnames\"\nconst factorColors = {\n \"Constraints on Government Powers\": \"#227B3A\",\n \"Absence of Corruption\": \"#6AAD50\",\n \"Open Government\": \"#2AAA9F\",\n \"Fundamental Rights\": \"#1E72BE\",\n \"Regulatory Enforcement\": \"#4B2795\",\n \"Criminal Justice\": \"#FF651F\",\n \"Civil Justice\": \"#A12224\",\n \"Order and Security\": \"#2A268F\",\n}\nconst slides1 = [\n {\n title: \"The WJP Rule of Law Index at a glance\",\n description: (\n <>\n Learn about the{\" \"}\n \n WJP Rule of Law Index\n \n ®\n \n {\" \"}\n and how it measures human rights, access to justice, corruption and\n authoritarianism worldwide.\n \n ),\n image: slide0Image,\n // noStretch: true,\n },\n {\n title: \"The foundation for opportunity and peace.\",\n description: (\n <>\n A positive correlation has been found between rule of law and economic\n development, health, education, and security.\n \n
\n Effective rule of law reduces corruption, combats poverty and disease,\n and protects people from injustices large and small. It is the\n foundation for communities of justice, equality, opportunity, and\n peace—underpinning development, accountability, democracy, and respect\n for fundamental rights.\n \n ),\n image: slide1Image,\n },\n {\n title: \"To improve the rule of law, we first need to measure it. \",\n longestTitle: true,\n longestDescription: true,\n description: (\n <>\n The{\" \"}\n \n WJP Rule of Law Index\n \n ®\n \n {\" \"}\n provides citizens, governments, policymakers, donors, businesses, media,\n academics, and civil society organizations with a uniquely comparative\n analysis of how well countries adhere to universal rule of law\n principles.\n
\n
\n By offering detailed information on an annual basis, the Index has\n become an indispensable tool to identify areas for improvement, develop\n policies for positive social change, and track their subsequent\n progress.\n \n ),\n image: slide2Image,\n },\n {\n title: \"Collecting original data since 2008.\",\n description: (\n <>\n First piloted in Argentina, Australia, Colombia, Spain, Sweden and the\n United States, the WJP Rule of Law Index now includes 142\n countries and jurisdictions.\n \n ),\n image: slide3Image,\n // noStretch: true,\n },\n {\n title: \"Everyone is a stakeholder.\",\n description: (\n <>\n Traditionally, the rule of law has been viewed as the domain of lawyers\n and judges. But everyday issues of safety, rights, access to justice,\n and governance affect us all.\n
\n
\n This is why the Index relies on first-hand accounts from more than\n 214,000 households and 3,500 experts to measure how the rule of law is\n experienced and perceived in practical, everyday situations.\n \n ),\n image: slide4Image,\n },\n {\n title: \"A comprehensive approach.\",\n description: (\n <>\n The Index is the world’s most comprehensive dataset of its kind and the\n only one to rely principally on primary data.\n
\n
\n It evaluates and ranks countries across key rule of law indicators,\n including checks on government powers, corruption and transparency,\n fundamental and equal rights, open government, civic engagement,\n security, business regulation, and the functioning of regulatory,\n criminal, and civil justice systems.\n \n ),\n image: slide5Image,\n },\n]\n\nconst slides2 = [\n {\n title: \"How we measure\",\n description: (\n <>\n The{\" \"}\n \n WJP Rule of Law Index\n \n ®\n \n {\" \"}\n is built upon an original conceptual framework developed by our\n researchers, in consultation with academics, practitioners, and\n community leaders around the world.\n
\n
\n Understand our method and evaluation process.\n \n ),\n image: secondSlide0Image,\n },\n\n {\n title: \"Questionnaires\",\n description:\n \"A set of five questionnaires is administered to experts and the general public. These are translated into several languages and adapted to reflect commonly used terms and expressions.\",\n image: secondSlide1Image,\n },\n {\n title: \"Codification\",\n description: (\n <>\n WJP collects and maps the data onto 44 rule of law indicators. Scores\n for each of these subfactors are globally comparable.\n
\n
\n Final scores are constructed using a five-step process.\n \n ),\n image: secondSlide2Image,\n },\n {\n title: \"Testing\",\n description:\n \"The data is subjected to a series of tests to identify possible biases and errors. For example, all subfactors are cross-checked against more than 60 third-party sources, including quantitative data and qualitative assessments drawn from local and international organizations.\",\n image: secondSlide3Image,\n },\n {\n title: \"External Review\",\n longestTitle: true,\n description:\n \" To assess the statistical reliability of our results, we invited the Econometrics and Applied Statistics Unit of the European Commission’s Joint Research Centre to perform a sensitivity analysis.\",\n image: secondSlide4Image,\n },\n {\n title: \"Proofing\",\n description:\n \"To illustrate whether the rule of law in a country has significantly changed over the course of the past year, a measure of change over time is produced based on the annual difference in the country-level factor scores, the standard errors of these scores (estimated from a set of 100 bootstrap samples), and the results of the corresponding t-tests.\",\n longestDescription: true,\n image: secondSlide5Image,\n },\n {\n title: \"Presentation\",\n description:\n \"Data is organized into country profiles, tables, and figures to facilitate their presentation and interpretation. You can access the full report, key insights, and historical datasets in the download button on the top right.\",\n image: secondSlide6Image,\n },\n]\n\n//Who uses WJP Index slideshow\nconst slidesWhoUsesIndex = [\n {\n title: \"Who uses the WJP Rule of Law Index\",\n description: (\n <>\n As the world's leading source of original, independent rule of law data,\n the{\" \"}\n \n WJP Rule of Law Index\n \n ®\n \n {\" \"}\n is an invaluable tool for advancing rule of law reforms, global\n development, and business investment around the globe.\n
\n
\n Find out who uses our data.\n \n ),\n image: whoUsesSlide0Image,\n },\n\n {\n title: \"Helping governments track progress\",\n description: (\n <>\n Governments around the world use the{\" \"}\n \n WJP Rule of Law Index®\n {\" \"}\n to benchmark and track the progress on critical rule of law reform\n efforts. The Index helps national institutions and policymakers advance\n justice, human rights, open government, and anti-corruption\n strategies—and monitor global goals, including Sustainable Development\n Goal 16.\n
\n
\n Governments that use our Index include the European Union, Honduras,\n India, Kazakhstan, Kosovo, Mexico, Philippines, Thailand, United States,\n and Uzbekistan.\n \n ),\n image: whoUsesSlide1Image,\n },\n {\n title: \"Trustworthy data for policy development\",\n description:\n \"Major international organizations use the Index to inform their global development policies and regional investment strategies, The World Bank, OECD, the IMF, the U.S. State Department, the European Commission, the Millennium Challenge Corporation, and the United Nations Development Programme are among those that leverage WJP data.\",\n image: whoUsesSlide2Image,\n },\n {\n title: \"Inspiring change big or small\",\n longestTitle: true,\n description: (\n <>\n Civil society organizations big and small turn to the Index data to\n identify weaknesses, advocate for change, and monitor rule of law\n performance across 44 subfactors. WJP's original, independent data helps\n shape Transparency International's Corruption Perceptions Index,\n the Chandler Institute of Governance's{\" \"}\n Chandler Good Government Index, the World Bank's{\" \"}\n Worldwide Governance Indicators (WGI), and the Mo Ibrahim\n Foundation's Ibrahim Index of African Governance.\n \n ),\n image: whoUsesSlide3Image,\n },\n {\n title: \"Evaluating risk and business sustainability\",\n description: (\n <>\n Gathering and analyzing original rule of law data since 2008, the{\" \"}\n \n WJP Rule of Law Index®\n {\" \"}\n offers objective business climate benchmarks over time, in 142 countries\n and jurisdictions.\n
\n
\n Private sector users such as Moody's, Standard and Poor's, Microsoft,\n UBS, JP Morgan, Hewlett-Packard Enterprise, Eurasia Group, LexisNexis,\n and the U.S. Chamber of Commerce leverage the Index to evaluate\n investment opportunities, global supply chains, business sustainability,\n legal and political risk, democracy, human rights, and corruption.\n \n ),\n longestDescription: true,\n image: whoUsesSlide4Image,\n },\n {\n title: \"Informing research and reporting\",\n description:\n \"The Index's rigorous methodology and broad reach make it a reliable source for researchers and journalists around the world. Index data has been cited in more than 2,000 academic papers and by media outlets in over 190 countries, elevating understanding of critical rule of law issues and holding leaders to account. In the last two years, the Index was featured in more than 9,000 news articles around the world.\",\n image: whoUsesSlide5Image,\n },\n]\n\nconst pastLinks = {\n 2023: \"https://worldjusticeproject.org/sites/default/files/documents/WJPIndex2023.pdf\",\n 2022: \"https://worldjusticeproject.org/sites/default/files/documents/WJPIndex2022.pdf\",\n 2021: \"https://worldjusticeproject.org/sites/default/files/documents/Index-2021.pdf\",\n 2020: \"https://worldjusticeproject.org/sites/default/files/documents/Index-2020-English.pdf\",\n 2019: \"https://worldjusticeproject.org/sites/default/files/documents/ROLI-2019-Reduced.pdf\",\n \"2017-18\":\n \"https://worldjusticeproject.org/sites/default/files/documents/WJP-ROLI-2018-June-Online-Edition_0.pdf\",\n 2016: \"https://worldjusticeproject.org/sites/default/files/documents/RoLI_Final-Digital_0.pdf\",\n 2015: \"https://worldjusticeproject.org/sites/default/files/documents/roli_2015_0.pdf\",\n 2014: \"https://worldjusticeproject.org/sites/default/files/documents/RuleofLawIndex2014.pdf\",\n\n \"2012-13\":\n \"https://worldjusticeproject.org/sites/default/files/documents/WJP_Index_Report_2012.pdf\",\n 2011: \"https://worldjusticeproject.org/sites/default/files/documents/WJP_Rule_of_Law_Index_2011_Report.pdf\",\n 2010: \"https://worldjusticeproject.org/sites/default/files/documents/WJP_Rule_of_Law_Index_2010_Report.pdf\",\n 2009: \"https://worldjusticeproject.org/sites/default/files/documents/WJP_Rule_of_Law_Index_2009_Report.pdf\",\n 2008: \"https://worldjusticeproject.org/sites/default/files/documents/WJP_Rule_of_Law_Index_2008_Report_.pdf\",\n}\nconst nonCoveredYears = [\"2008\", \"2009\", \"2010\", \"2011\", \"2012-13\", \"2014\"]\n\nconst Next = (props) => {\n const style = {}\n if (props.disabled) {\n style.opacity = 0.2\n style.pointerEvents = \"none\"\n }\n return (\n
\n {\n setCurrentSlide(currentSlide - 1)\n\n e.preventDefault()\n e.stopPropagation()\n }}\n />\n
\n )\n const imageSize = Math.round(\n (window.innerWidth < 900 ? 1 : window.innerWidth > 1090 ? 0.68 : 0.65) *\n maxContentWidth,\n )\n const imageContainerSize = slides.length * imageSize\n const activeSlide = slides[currentSlide]\n const translation = `translateX(-${currentSlide * imageSize}px)`\n const progress = showStartButton ? null : (\n \n
\n )\n const slideContentStyle = {\n // height: props.height,\n }\n const longestDescription = slides.find(\n (d) => d.longestDescription,\n ).description\n const longestTitle = slides.find((d) => d.longestTitle).title\n return (\n <>\n {navlink ? : null}\n \n {`${currentSlide}`.padStart(2, \"0\")} /{\" \"}\n {`${slides.length - 1}`.padStart(2, \"0\")}\n
\n \n \n
\n )\n}\n","export default __webpack_public_path__ + \"static/media/insightsBackground.8e16dfaf.png\";","export default __webpack_public_path__ + \"static/media/graph-global-decline.9763b1fc.png\";","export default __webpack_public_path__ + \"static/media/map-global-decline.dd3b6274.png\";","export default __webpack_public_path__ + \"static/media/legend.c60b1f95.svg\";","export default __webpack_public_path__ + \"static/media/piechart-access-to-justice.dc94f40e.png\";","export default __webpack_public_path__ + \"static/media/map-access-to-justice.3e620a41.png\";","export default __webpack_public_path__ + \"static/media/global-decline-piechart.30026dcc.png\";","export default __webpack_public_path__ + \"static/media/map-global-score-2024.bacf76e2.png\";","export default __webpack_public_path__ + \"static/media/long-term-trend-graph.f49a58c6.png\";","export default __webpack_public_path__ + \"static/media/lineGraphLegend.2897a4b7.svg\";","export default __webpack_public_path__ + \"static/media/electionsChart.1b1fd6f7.png\";","import React, { useLayoutEffect } from \"react\"\n\nimport \"./styles.scss\"\nimport InsightsHeader from \"./InsightsHeader\"\nimport insightsBackground from \"../images/insightsBackground.png\"\nimport { Helmet } from \"react-helmet\"\n\nimport graphGlobalDecline from \"./images/graph-global-decline.png\"\nimport mapGlobalDecline from \"./images/map-global-decline.png\"\nimport legend from \"./images/legend.svg\"\n\nimport pieChartAccessToJustice from \"./images/piechart-access-to-justice.png\"\nimport globalScoreAccess from \"./images/map-access-to-justice.png\"\n\nimport pieChartHumanRightsInTrouble from \"./images/global-decline-piechart.png\"\nimport globalScoreRights from \"./images/map-global-score-2024.png\"\n\nimport longTermTrendGraph from \"./images/long-term-trend-graph.png\"\nimport lineGraphLegend from \"./images/lineGraphLegend.svg\"\n\nimport electionsChart from \"./images/electionsChart.png\"\n\nfunction Insight(props) {\n // const { title, text, image, legend, number, name, imageStyle} = props\n const { url, text, content } = props\n\n return (\n \n {progress}\n
\n \n
\n {activeSlide.title}
\n {longestTitle}
\n \n
\n {buttons}\n {activeSlide.description}
\n {longestDescription}
\n \n {/* \n \n
\n */}\n \n {/*
\n {/* */}\n {slides.map((slide, index) => {\n return (\n 
\n )\n })}\n
\n \n {slides.map((slide, index) => {\n return (\n
\n \n )\n}\n\nexport default function About(props) {\n const years = [...Object.keys(DataLoader.dataByYear), ...nonCoveredYears]\n years.sort().reverse()\n const maxYear = Math.max(\n ...years.map((year) => +year).filter((d) => !isNaN(d)),\n )\n const factors = DataLoader.dataByYear[maxYear].aggregateFactorKeys\n const subfactors = Array.from(\n group(DataLoader.dataByYear[maxYear].questionKeys, (d) => d[0]),\n )\n\n useLayoutEffect(() => {\n let scroller = () => {\n if (window.location.hash) {\n const element = document.querySelector(window.location.hash)\n if (element) {\n element.scrollIntoView({ behavior: \"smooth\" })\n }\n } else {\n window.scrollTo({ top: 0 })\n }\n }\n setTimeout(() => {\n scroller()\n }, 500)\n }, [])\n\n const logDownload = (label) => () => {\n if (window.gtag) {\n window.gtag(\"event\", \"download\", {\n event_category: \"download\",\n event_label: label,\n })\n }\n }\n return (\n setCurrentSlide(index)} />\n )\n })}\n
*/}\n \n \n WJP Rule of Law Index | About \n \n \n The world’s leading source for{\" \"}\n \n original, independent data\n {\" \"}\n on the rule of law.\n \n }\n backgroundImage={aboutBackgroundImage}\n links={[\n { text: \"The Index at a glance\", url: \"#ataglance\" },\n { text: \"What we measure\", url: \"#whatwemeasure\" },\n { text: \"How we measure\", url: \"#howwemeasure\" },\n { text: \"Who uses the Index\", url: \"#whousesindex\" },\n { text: \"Contact\", url: \"#contact\" },\n { text: \"Past reports\", url: \"#reports\" },\n ]}\n color=\"#400099\"\n />\n
\n
\n \n
\n \n
\n \n For more information\n
\n \n \n Watch Video\n \n \n See Our Rule of Law Definition\n \n \n Download Report\n \n \n Read Press Release\n \n
\n \n \n What we measure\n
\n {/* Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac magna ultrices, ultrices urna eu, molestie quam. Aliquam pulvinar egestas cursus.
*/}\n \n {factors.map((factor, factorIndex) => {\n const factorName = factor.split(\": \")[1]\n const factorSubfactors = subfactors.find(\n (group) => group[0] === `${factorIndex + 1}`,\n )\n const color = factorColors[factorName]\n return (\n
\n \n \n {factorName}\n \n\n
\n )\n })}\n \n {factorSubfactors[1].map((subfactor, subfactorIndex) => {\n return (\n
\n \n {subfactor.split(\" \").slice(1).join(\" \")}\n
\n )\n })}\n \n \n Informal Justice*\n
\n \n
\n \n Informal justice is timely and effective\n
\n \n Informal justice is impartial and free of improper influence\n
\n \n Informal justice respects and protects fundamental rights\n
\n \n * Informal Justice is not included in the{\" \"}\n \n WJP Rule of Law Index®\n \n . While WJP has devoted significant effort to collecting data on\n informal justice in a dozen countries, the complexities of these\n systems and the difficulties of measuring their fairness and\n effectiveness in a manner that is both systematic and comparable\n across countries, make assessments extraordinarily challenging.\n
\n \n For more information consult\n
\n \n \n Full Methodology\n \n \n Measuring The Rule of Law Paper\n \n \n Statistical Audit\n \n \n Variable Map\n \n \n Questionnaires\n \n
\n \n
\n
\n \n
\n Contact
\n \n We understand that you might have questions regarding our data and\n methodology. If you are interested in using our data,\n collaborating, or want to speak with one of our experts, please\n feel free to reach out.{\" \"}\n
\n \n
\n \n Media inquiries\n \n press@worldjusticeproject.org\n \n
\n \n Research and collaboration inquiries\n \n wjp@worldjusticeproject.org\n \n
\n \n
\n \n \n
\n Past reports
\n {/* All that are available here */}\n The{\" \"}\n \n WJP Rule of Law Index\n \n ®\n \n {\" \"}\n was first piloted in 2008. Since then it has evolved, expanding to\n include over 142 countries. You can consult our previous editions\n here.\n \n {years\n .filter((d) => +d !== +maxYear)\n .map((year) => {\n const yearLink = pastLinks[year]\n return (\n \n
\n \n \n
\n )\n}\n\nconst insights = [\n {\n text: \"Global Decline in Rule of Law\",\n url: \"#global-decline\",\n content: (\n {text}
\n {content}
\n {}\n \n 
\n 
\n
\n ),\n },\n {\n text: \"Weakening Constraints on Government Powers\",\n url: \"#weak-constraints\",\n content: (\n \n Between 2023 and 2024, rule of law weakened in a majority of\n countries.\n
\n \n The WJP Rule of Law Index overall score fell in 57% of\n countries and improved in 43%. On average, the overall score declined\n by 0.2%.\n
\n \n
\n
\n Percentage Change in Overall Rule of Law Index Scores (2023 - 2024)\n
\n \n
\n Percentage Change in Overall Rule of Law Index Scores (2023 - 2024)\n
\n
\n ),\n },\n {\n text: \"Human Rights in Trouble\",\n url: \"#human-rights-in-trouble\",\n content: (\n \n Limits on government power eroded in a majority of countries in the\n last year.\n
\n \n Global authoritarian trends continue, with checks on government powers\n declining in 59% of countries between 2023 and 2024. Around the world,\n executive power is less likely to be constrained by civil society and\n the media, legislatures, courts, and elections.\n
\n \n Percentage Change in Constraints on Government Powers (Factor 1)\n Scores (2023 - 2024)\n
\n \n
\n ),\n },\n {\n text: \"Long-Term Trend\",\n url: \"#long-term-trend\",\n content: (\n \n Over 5.4 billion people live in countries where human\n
\n rights declined in the last year.\n
\n \n rights declined in the last year.\n
\n Between 2023 and 2024, people lost fundamental rights in 63% of\n countries. Freedom of expression, freedom of assembly, and privacy\n rights have receded, while discrimination has gotten worse.\n
\n \n Percentage Change in Fundamental Rights (Factor 4) Scores (2023 -\n 2024)\n
\n \n
\n ),\n },\n {\n text: \"Elections and the Rule of Law\",\n url: \"#elections-and-the-rule-of-law\",\n content: (\n \n The global rule of law recession continues but is slowing down.\n
\n \n Initially driven by a global rise in authoritarianism, annual rule of\n law declines became more widespread during the COVID-19 pandemic. The\n global downturn continues, but overall scores are falling in a smaller\n majority of countries.\n
\n \n Percentage of Countries that Improved and Declined in Overall Score\n Since 2015\n
\n \n
\n ),\n },\n]\n\nexport default function Insights(props) {\n useLayoutEffect(() => {\n let scroller = () => {\n if (window.location.hash) {\n const element = document.querySelector(window.location.hash)\n if (element) {\n element.scrollIntoView({ behavior: \"smooth\" })\n }\n } else {\n window.scrollTo({ top: 0 })\n }\n }\n setTimeout(() => {\n scroller()\n }, 500)\n }, [])\n const logInsights = () => {\n if (window.gtag) {\n window.gtag(\"event\", \"download\", {\n event_category: \"download\",\n event_label: \"Insights\",\n })\n }\n }\n return (\n \n Where rule of law is stronger, people are often voting for change.\n
\n \n The ruling party stayed in power in most of the 41 countries that held\n national elections between June 2023 and May 2024. But these countries\n also tended to have lower rule of law, less democratic oversight, and\n weaker electoral systems. Among countries with higher rule of law,\n people voted for change more often than not.\n
\n \n Rule of Law Performance in Countries that Held Elections in 2023-2024\n
\n \n \n WJP Rule of Law Index | Insights \n \n \n \n The rule of law has declined globally for\n
the 7th year in a row.\n \n \n }\n backgroundImage={insightsBackground}\n links={insights}\n color=\"#fff\"\n />\n\n
\n \n )\n}\n","import Overview from \"./Overview\"\nimport GlobalInsights from \"./GlobalInsights/\"\nimport CountryInsights from \"./CountryInsights/\"\nimport Factors from \"./Factors/\"\nimport About from \"./About/\"\nimport Insights from \"./Insights/\"\n\nexport const routes = [\n { url: \"/\", route: \"/\", text: \"Overview\", component: Overview, hide: true },\n {\n url: \"/global\",\n route: \"/global/:opt1?/:opt2?/:opt3?/:opt4?\",\n text: \"Rankings\",\n component: GlobalInsights,\n hasInsights: true,\n },\n {\n url: \"/country\",\n route: \"/country/:opt1?/:opt2?/:opt3?\",\n text: \"Countries\",\n component: CountryInsights,\n hasInsights: true,\n },\n {\n url: \"/factors\",\n route: \"/factors/:opt1?/:opt2?/:opt3?\",\n text: \"Factors\",\n component: Factors,\n hasInsights: true,\n },\n {\n url: \"/insights\",\n route: \"/insights\",\n text: \"Insights\",\n component: Insights,\n hasInsights: false,\n },\n {\n url: \"/about\",\n route: \"/about\",\n text: \"About\",\n component: About,\n hasInsights: false,\n },\n]\n\nexport const routesReversed = routes.slice().reverse()\n","export default __webpack_public_path__ + \"static/media/fbShare.035d0ba4.svg\";","export default __webpack_public_path__ + \"static/media/twitterShare.790bfe21.svg\";","export default __webpack_public_path__ + \"static/media/emailShare.7890f2b2.svg\";","export default __webpack_public_path__ + \"static/media/linkedinShare.016dfac8.svg\";","export default __webpack_public_path__ + \"static/media/linkShare.ba545a11.svg\";","import React, { useEffect, useState } from \"react\"\nimport classnames from \"classnames\"\nimport facebook from \"../images/share/fbShare.svg\"\nimport twitter from \"../images/share/twitterShare.svg\"\nimport email from \"../images/share/emailShare.svg\"\nimport linkedin from \"../images/share/linkedinShare.svg\"\nimport linkShare from \"../images/share/linkShare.svg\"\n\nimport \"./styles.scss\"\nimport useOnClickOutside from \"use-onclickoutside\"\nimport { useParams } from \"react-router-dom\"\nimport getSelectionsFromParams from \"../utils/getSelectionsFromParams\"\nimport DataLoader from \"../DataLoader\"\nimport classNames from \"classnames\"\nfunction share(site, selections) {\n return () => {\n let url = null\n if (typeof document !== \"undefined\") {\n url = encodeURIComponent(document.location)\n } else {\n return\n }\n // console.log(url)\n let description = \"WJP Rule of Law Index\"\n if (selections) {\n const years = Object.keys(DataLoader.dataByYear).sort()\n const latestYear = years[years.length - 1]\n const countryData = DataLoader.dataByYear[latestYear].countries\n // console.log(years, latestYear, countryData)\n // console.log('selections', selections)\n if (\n selections.selectedCountry &&\n selections.selectedFactor &&\n url.includes(encodeURIComponent(\"/factors/\"))\n ) {\n // const country = countryData.find(c => c.Country === selections.selectedCountry)\n url = `${document.location.origin}${\n process.env.PUBLIC_URL\n }/s/share/Factor-${encodeURIComponent(\n selections.selectedCountry.replace(/ /g, \"_\"),\n )}-${encodeURIComponent(\n selections.selectedFactor.replace(/ /g, \"_\"),\n )}-2024.html`\n } else if (\n selections.selectedCountry &&\n url.includes(encodeURIComponent(\"/country/\"))\n ) {\n const country = countryData.find(\n (c) => c.Country === selections.selectedCountry,\n )\n url = `${document.location.origin}${\n process.env.PUBLIC_URL\n }/s/share/Ranking-${encodeURIComponent(\n selections.selectedCountry.replace(/ /g, \"_\"),\n )}-2024.html`\n description += ` ${country.Country} ranks ${country[\"overall_Rank_Global\"]} out of ${countryData.length} countries on Rule of Law`\n } else if (\n selections.selectedCountry &&\n url.includes(encodeURIComponent(\"/factors/\")) &&\n !selections.selectedFactor\n ) {\n // const country = countryData.find(c => c.Country === selections.selectedCountry)\n url = `${document.location.origin}${\n process.env.PUBLIC_URL\n }/s/share/FactorOverall-${encodeURIComponent(\n selections.selectedCountry.replace(/ /g, \"_\"),\n )}-2024.html`\n }\n }\n // console.log(DataLoader)\n if (url) {\n let link = null\n switch (site) {\n case \"facebook\":\n link = `https://www.facebook.com/sharer.php?u=${url}`\n\n if (window.gtag) {\n window.gtag(\"event\", \"share\", {\n event_category: \"share\",\n event_label: \"facebook\",\n })\n }\n break\n case \"twitter\":\n link = `https://twitter.com/intent/tweet?url=${url}&text=${description}`\n\n if (window.gtag) {\n window.gtag(\"event\", \"share\", {\n event_category: \"share\",\n event_label: \"twitter\",\n })\n }\n break\n case \"email\":\n link = `mailto:?subject=${description}&body=${url}`\n\n if (window.gtag) {\n window.gtag(\"event\", \"share\", {\n event_category: \"share\",\n event_label: \"email\",\n })\n }\n break\n case \"linkedin\":\n link = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`\n\n if (window.gtag) {\n window.gtag(\"event\", \"share\", {\n event_category: \"share\",\n event_label: \"linkedin\",\n })\n }\n break\n case \"link\":\n // copy link to clipboard\n if (typeof document !== \"undefined\") {\n const el = document.createElement(\"textarea\")\n el.value = decodeURIComponent(url)\n document.body.appendChild(el)\n el.select()\n document.execCommand(\"copy\")\n document.body.removeChild(el)\n }\n\n if (window.gtag) {\n window.gtag(\"event\", \"share\", {\n event_category: \"share\",\n event_label: \"link\",\n })\n }\n break\n default:\n alert(`sharing via ${site} not yet implemented`)\n break\n }\n if (link !== null) {\n window.open(link)\n }\n }\n }\n}\nexport default function ShareButtons(props) {\n const { wrapperRef } = props\n useOnClickOutside(wrapperRef, props.toggle)\n const params = useParams()\n const selections = getSelectionsFromParams(params)\n // console.log(selections)\n const [copiedToClipboard, setCopiedToClipboard] = useState(false)\n const copyToClipboard = () => {\n share(\"link\", selections)()\n setCopiedToClipboard(true)\n }\n useEffect(() => {\n if (copiedToClipboard) {\n setTimeout(() => {\n setCopiedToClipboard(false)\n }, 2000)\n }\n }, [copiedToClipboard])\n return (\n <>\n the 7th year in a row.\n \n \n }\n backgroundImage={insightsBackground}\n links={insights}\n color=\"#fff\"\n />\n
\n {insights.map((item, index) => {\n return
\n \n \n Download Insights\n \n
\n
\n\n Read Press Release\n \n
\n Unlock all the Rule of Law Insights 2024
\n \n
\n
\n
\n \n
\n )\n }\n return (\n {showCountryDownloads} Downloads
\n {[\n {\n name: \"Country Profile\",\n type: \"pdf\",\n link: pdfUrl,\n eventLabel: `${showCountryDownloads} Country Profile`,\n },\n {\n name: \"Country Dataset\",\n type: \"csv\",\n link: \"#\",\n onClick: downloadDataset,\n eventLabel: `${showCountryDownloads} Country Dataset`,\n },\n ].map(linker)}\n\n {globalLinks.map(linker)}\n {countrySpecificContent}\n
\n )\n}\n","import React, { useEffect, useRef, useState } from \"react\"\nimport { Link, useParams } from \"react-router-dom\"\nimport classnames from \"classnames\"\n\nimport getSelectionsFromParams from \"../utils/getSelectionsFromParams\"\nimport { routes } from \"../routes\"\nimport { useSmallWidthMode } from \"../utils/smallWidthMode\"\nimport ShareMenu from \"../ShareButtons/\"\nimport \"./styles.scss\"\nimport classNames from \"classnames\"\nimport DownloadMenu from \"../DownloadMenu\"\n// let firstNavigation = true;\nexport default function Nav(props) {\n const params = useParams()\n const [modalOpen, setModalOpen] = useState(false)\n const [shareMenuOpen, setShareMenuOpen] = useState(false)\n const [downloadMenuOpen, setDownloadMenuOpen] = useState(false)\n const { selectedYear, selectedCountry, selectedFactor } =\n getSelectionsFromParams(params)\n const page = params.page || \"/\"\n const { opt1, opt2, opt3, opt4 } = params\n\n useEffect(() => {\n // if (firstNavigation) {\n // firstNavigation = false\n // return\n // }\n setTimeout(() => {\n // use timeout to ensure title & location are updated\n let page_location = window.location.toString()\n\n if (page_location.charAt(page_location.length - 1) !== \"/\") {\n page_location = page_location + \"/\"\n }\n\n window.gtag(\"event\", \"page_view\", {\n page_title: document.title,\n page_location: page_location,\n })\n }, 300)\n }, [page, opt1, opt2, opt3, opt4])\n\n const activeRoute = routes.find((r) => r.url.includes(page))\n const isSmallWidthMode = useSmallWidthMode()\n const toggleMenuModal = () => {\n setModalOpen(!modalOpen)\n }\n const closeModal = () => {\n setModalOpen(false)\n }\n if (!isSmallWidthMode && modalOpen) {\n closeModal()\n }\n const links = routes.map((link) => {\n if (link.hide) {\n return null\n }\n let url = link.url\n const match = link.url === activeRoute.url\n\n if (link.hasInsights) {\n url = `${url}/${encodeURIComponent(selectedYear)}`\n if (selectedCountry !== \"\") {\n url = `${url}/${encodeURIComponent(selectedCountry)}`\n }\n if (selectedFactor !== \"\") {\n url = `${url}/${encodeURIComponent(selectedFactor)}`\n }\n }\n const noSpace = !link.text.includes(\" \")\n return (\n \n
\n \n \n
\n \n
\n \n \n WJP Rule of Law Index{\" \"}\n \n ®\n \n \n
\n\n {links}
\n {/* WJP Rule of Law Index {'>'} {activeRoute.text}
*/}\n \n \n \n \n \n {downloadButtonLabel}\n \n \n \n \n
\n \n {activeRoute.hide ? \"\" : activeRoute.text}\n
\n \n \n \n
\n \n {links}\n {/* \n \n Learn more about the WJP Rule of Law Index\n 
\n \n */}\n
\n \n \n \n \n \n {isLoading ? (\n \n {routesReversed.map((link) => (\n \n \n ))}\n \n )}\n \n \n
\n )\n}\n\nexport default App\n","import { createRoot } from \"react-dom/client\"\nimport App from \"./App\"\nimport \"./index.scss\"\n\nconst container = document.getElementById(\"root\")\nconst root = createRoot(container)\nroot.render(Loading...
\n ) : (\n