{"version":3,"sources":["webpack:///./src/components/DataExplorerPage/DataExplorerPage.jsx","webpack:///./src/pages/data-explorer.jsx"],"names":["DataExplorerPage","contentfulData","useStaticQuery","query","parsedData","R","headerBanner","extractBanner","descriptionSectionTitle","extractRichText","descriptionSectionSubtitle","ctaBanner","bottomRichText","lineChartTitle","datasetInfo","extractDatasetInfo","trendTableTitle","departmentListingSectionText","lastAnalyzed","formattedFootnotes","footnotes","map","x","footnoteItem","deptList","ChartContentRef","useRef","overrideOverlay","useEffect","AOS","init","offset","duration","once","Page","title","highlightLogo","topHeroBanner","Banner","className","type","onClick","current","scrollToElement","Svg","id","Container100","data-aos","Section","aos","theme","subtitle","containerModifier","ref","ChartContent","chartProps","page","defaultIndicator","indicatorItems","value","defaultBreakdownLabel","DepartmentListing","deptListText","GatsbyDataExplorerPage","props","ChartData"],"mappings":"gWA2JeA,MAlIU,KACvB,MAAMC,EAAiBC,YAAeC,GAChCC,EAAaC,IACjBA,IAAS,CACPC,aAAcC,IACdC,wBAAyBC,IACzBC,2BAA4BD,IAC5BE,UAAWJ,IACXK,eAAgBH,IAChBI,eAAgBJ,IAChBK,YAAaC,IACbC,gBAAiBP,IACjBQ,6BAA8BR,MAEhCJ,IAAY,IACZA,IAAO,8BAbUA,CAcjBJ,IAEI,aACJK,EADI,wBAEJE,EAFI,2BAGJE,EAHI,UAIJC,EAJI,YAKJG,EALI,eAMJF,EANI,aAOJM,EAPI,eAQJL,EARI,gBASJG,EATI,6BAUJC,GACEb,EAEEe,EACJf,EAAWgB,WACXhB,EAAWgB,UAAUC,IAAKC,GAAMb,YAAgBa,EAAEC,eAE9CC,EAAWnB,IACf,GACA,CAAC,8BAA+B,SAChCJ,GAEIwB,EAAkBC,mBAexB,OAZApB,EAAaqB,iBAAkB,EAE/BC,oBAAU,KAGRC,IAAIC,KAAK,CACPC,OAAQ,IACRC,SAAU,IACVC,MAAM,KAEP,IAGD,eAACC,EAAA,EAAD,CACEC,MAAM,gBACNC,eAAe,EACfC,cAAe/B,EAHjB,UAKE,cAACgC,EAAA,EAAD,IAAYhC,EAAciC,UAAU,6BAApC,SACE,qBAAKA,UAAU,wBAAf,SACE,wBACEC,KAAK,SACLL,MAAM,SACNM,QAAS,KACHhB,EAAgBiB,SAClBC,YAAgBlB,EAAgBiB,UALtC,SASE,cAACE,EAAA,EAAD,CAAKC,GAAG,oBAId,eAACC,EAAA,EAAD,CAAcP,UAAU,GAAGQ,WAAS,UAApC,UACE,cAACC,EAAA,EAAD,CACEC,KAAK,EACLV,UAAU,gDACVW,MAAM,QACNf,MAAO3B,EACP2C,SAAUzC,EACV0C,kBAAkB,0BAClBC,IAAK5B,IAGP,cAAC6B,EAAA,EAAD,CACEC,WAAY,CACVC,KAAM,gBACN1C,cACAI,eACAL,iBACAG,kBACAyC,iBAAkB,IAClBtC,qBACAuC,eAAgB,CACd,CAAEb,GAAI,IAAKc,MAAO,uBAClB,CAAEd,GAAI,IAAKc,MAAO,kCAClB,CACEd,GAAI,IACJc,MAAO,gDAET,CAAEd,GAAI,IAAKc,MAAO,0CAGtBC,sBAAuB,YAI3B,cAACC,EAAA,EAAD,CACEC,aAAc7C,EACdO,SAAUA,IAEZ,cAACc,EAAA,EAAD,IAAY3B,IACZ,cAACqC,EAAA,EAAD,CACEC,KAAK,EACLV,UAAU,6DACVW,MAAM,QAHR,SAKGtC,GACC,cAACkC,EAAA,EAAD,CAAcP,UAAU,kCAAxB,SACG3B,UAUb,MAAMT,EAAK,a,gBCpJI4D,UANiBC,GAC9B,cAACC,EAAA,EAAD,UACE,cAAC,EAAD,O","file":"component---src-pages-data-explorer-jsx-e0e7fdc7c8ea1c70db6b.js","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport { useStaticQuery, graphql } from \"gatsby\";\r\nimport * as R from \"ramda\";\r\nimport AOS from \"aos\";\r\n// import { useChartData } from \"../../common/ChartData.jsx\";\r\nimport {\r\n  extractBanner,\r\n  extractRichText,\r\n  extractDatasetInfo,\r\n} from \"../../common/contentful-extract.jsx\";\r\nimport { scrollToElement } from \"../../common/scrollHelpers.js\";\r\nimport Container100 from \"../Container/Container100.jsx\";\r\nimport Banner from \"../Banner/Banner.jsx\";\r\nimport Page from \"../Page/Page.jsx\";\r\nimport Section from \"../Section/Section.jsx\";\r\nimport ChartContent from \"../ChartContent/ChartContent.jsx\";\r\n\r\nimport DepartmentListing from \"../DepartmentListing/DepartmentListing.jsx\";\r\n\r\nimport Svg from \"../Svg/Svg.jsx\";\r\n\r\nimport \"aos/dist/aos.css\";\r\nimport \"./data-explorer-page.scss\";\r\n// import \"../ChartContent/chart-content.scss\";\r\n\r\nconst DataExplorerPage = () => {\r\n  const contentfulData = useStaticQuery(query);\r\n  const parsedData = R.compose(\r\n    R.evolve({\r\n      headerBanner: extractBanner,\r\n      descriptionSectionTitle: extractRichText,\r\n      descriptionSectionSubtitle: extractRichText,\r\n      ctaBanner: extractBanner,\r\n      bottomRichText: extractRichText,\r\n      lineChartTitle: extractRichText,\r\n      datasetInfo: extractDatasetInfo,\r\n      trendTableTitle: extractRichText,\r\n      departmentListingSectionText: extractRichText,\r\n    }),\r\n    R.defaultTo({}),\r\n    R.prop(\"contentfulDataExplorerPage\"),\r\n  )(contentfulData);\r\n\r\n  const {\r\n    headerBanner,\r\n    descriptionSectionTitle,\r\n    descriptionSectionSubtitle,\r\n    ctaBanner,\r\n    datasetInfo,\r\n    bottomRichText,\r\n    lastAnalyzed,\r\n    lineChartTitle,\r\n    trendTableTitle,\r\n    departmentListingSectionText,\r\n  } = parsedData;\r\n\r\n  const formattedFootnotes =\r\n    parsedData.footnotes &&\r\n    parsedData.footnotes.map((x) => extractRichText(x.footnoteItem));\r\n\r\n  const deptList = R.pathOr(\r\n    [],\r\n    [\"allContentfulDepartmentPage\", \"nodes\"],\r\n    contentfulData,\r\n  );\r\n  const ChartContentRef = useRef();\r\n\r\n  //banner currently has an overlay that causes the color to look much to dark\r\n  headerBanner.overrideOverlay = true;\r\n\r\n  useEffect(() => {\r\n    // https://github.com/michalsnik/aos\r\n    // initialize animation on scroll when the page loads\r\n    AOS.init({\r\n      offset: 100,\r\n      duration: 1000,\r\n      once: true,\r\n    });\r\n  }, []);\r\n\r\n  return (\r\n    <Page\r\n      title=\"Data Explorer\"\r\n      highlightLogo={true}\r\n      topHeroBanner={headerBanner}\r\n    >\r\n      <Banner {...headerBanner} className=\"data-explorer__hero-banner\">\r\n        <div className=\"data-explorer__scroll\">\r\n          <button\r\n            type=\"button\"\r\n            title=\"Scroll\"\r\n            onClick={() => {\r\n              if (ChartContentRef.current) {\r\n                scrollToElement(ChartContentRef.current);\r\n              }\r\n            }}\r\n          >\r\n            <Svg id=\"chev-down\" />\r\n          </button>\r\n        </div>\r\n      </Banner>\r\n      <Container100 className=\"\" data-aos=\"fade-up\">\r\n        <Section\r\n          aos={true}\r\n          className=\"data-explorer__section data-explorer__wrapper\"\r\n          theme=\"light\"\r\n          title={descriptionSectionTitle}\r\n          subtitle={descriptionSectionSubtitle}\r\n          containerModifier=\"section__container--b-0\"\r\n          ref={ChartContentRef}\r\n        />\r\n        {/* TODO: Add indicator setup to contentful */}\r\n        <ChartContent\r\n          chartProps={{\r\n            page: \"data-explorer\",\r\n            datasetInfo,\r\n            lastAnalyzed,\r\n            lineChartTitle,\r\n            trendTableTitle,\r\n            defaultIndicator: 300,\r\n            formattedFootnotes,\r\n            indicatorItems: [\r\n              { id: 300, value: \"Number of incidents\" },\r\n              { id: 200, value: \"Number of individuals affected\" },\r\n              {\r\n                id: 100,\r\n                value: \"Individuals affected per 1000 known offenses\",\r\n              },\r\n              { id: 900, value: \"Individuals affected per 1000 capita\" },\r\n            ],\r\n          }}\r\n          defaultBreakdownLabel={\"City\"}\r\n        />\r\n      </Container100>\r\n\r\n      <DepartmentListing\r\n        deptListText={departmentListingSectionText}\r\n        deptList={deptList}\r\n      />\r\n      <Banner {...ctaBanner} />\r\n      <Section\r\n        aos={true}\r\n        className=\"data-explorer__section data-explorer__section--methodology\"\r\n        theme=\"light\"\r\n      >\r\n        {bottomRichText && (\r\n          <Container100 className=\"data-explorer__bottom-rich-text\">\r\n            {bottomRichText}\r\n          </Container100>\r\n        )}\r\n      </Section>\r\n    </Page>\r\n  );\r\n};\r\n\r\nexport default DataExplorerPage;\r\n\r\nconst query = graphql`\r\n  {\r\n    allContentfulDepartmentPage {\r\n      nodes {\r\n        id\r\n        department {\r\n          id\r\n          name\r\n          state\r\n        }\r\n        url\r\n      }\r\n    }\r\n    contentfulDataExplorerPage {\r\n      headerBanner {\r\n        backgroundImage {\r\n          fluid {\r\n            aspectRatio\r\n            base64\r\n            sizes\r\n            src\r\n            srcSet\r\n            srcSetWebp\r\n            srcWebp\r\n          }\r\n          id\r\n        }\r\n        backgroundSize\r\n        title {\r\n          raw\r\n        }\r\n        subtitle {\r\n          raw\r\n        }\r\n        content {\r\n          raw\r\n        }\r\n        link {\r\n          ...Link\r\n        }\r\n      }\r\n      descriptionSectionTitle {\r\n        raw\r\n      }\r\n      descriptionSectionSubtitle {\r\n        raw\r\n        references {\r\n          ...Link\r\n        }\r\n      }\r\n      ctaBanner {\r\n        backgroundImage {\r\n          fluid {\r\n            srcWebp\r\n            srcSetWebp\r\n            srcSet\r\n            src\r\n            sizes\r\n            base64\r\n            aspectRatio\r\n          }\r\n          file {\r\n            url\r\n          }\r\n        }\r\n        backgroundSize\r\n        title {\r\n          raw\r\n        }\r\n        subtitle {\r\n          raw\r\n        }\r\n        link {\r\n          ...Link\r\n        }\r\n      }\r\n      lineChartTitle {\r\n        raw\r\n      }\r\n      footnotes {\r\n        footnoteItem {\r\n          raw\r\n        }\r\n      }\r\n      lastAnalyzed(locale: \"en-US\", formatString: \"MMMM DD, yyyy\")\r\n      trendTableTitle {\r\n        raw\r\n      }\r\n      bottomRichText {\r\n        raw\r\n        references {\r\n          ...Link\r\n          ... on ContentfulAsset {\r\n            contentful_id\r\n            __typename\r\n            title\r\n            description\r\n            fixed {\r\n              src\r\n              srcSet\r\n              width\r\n              height\r\n              srcSetWebp\r\n              srcWebp\r\n              tracedSVG\r\n            }\r\n            fluid {\r\n              base64\r\n              aspectRatio\r\n              src\r\n              srcSet\r\n              srcWebp\r\n              srcSetWebp\r\n              sizes\r\n            }\r\n            file {\r\n              url\r\n              fileName\r\n              details {\r\n                size\r\n                image {\r\n                  height\r\n                  width\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n      departmentListingSectionText {\r\n        raw\r\n      }\r\n      datasetInfo {\r\n        buttonText\r\n        content {\r\n          raw\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n","import DataExplorerPage from \"../components/DataExplorerPage/DataExplorerPage.jsx\";\r\nimport { ChartDataProvider } from \"../common/ChartData.jsx\";\r\n\r\nconst GatsbyDataExplorerPage = (props) => (\r\n  <ChartDataProvider>\r\n    <DataExplorerPage />\r\n  </ChartDataProvider>\r\n);\r\n\r\nexport default GatsbyDataExplorerPage;\r\n"],"sourceRoot":""}