{"version":3,"sources":["webpack:///./src/pages/tutorials/custom-chart/index.js","webpack:///./src/components/container.js"],"names":["__webpack_require__","r","__webpack_exports__","Glamor","gatsby__WEBPACK_IMPORTED_MODULE_0__","prop_types__WEBPACK_IMPORTED_MODULE_1__","prop_types__WEBPACK_IMPORTED_MODULE_1___default","n","react_helmet__WEBPACK_IMPORTED_MODULE_3__","react_helmet__WEBPACK_IMPORTED_MODULE_3___default","_components_container__WEBPACK_IMPORTED_MODULE_4__","_components_layout__WEBPACK_IMPORTED_MODULE_5__","_utils_presets__WEBPACK_IMPORTED_MODULE_6__","_utils_presets__WEBPACK_IMPORTED_MODULE_6___default","TutorialCustomChart","_ref","location","createElement","a","id","css","color","presets","colors","zoomdataGreen","marginTop","role","aria-label","to","propTypes","PropTypes","object","Container","_Object$assign","children","className","_ref$hasSideBar","hasSideBar","_ref$css","Object","assign","maxWidth","margin","padding","rhythm","options","blockMarginBottom","paddingBottom","position","Tablet","maxWidthWithSidebar","node","isRequired","oneOfType","string","bool"],"mappings":"2FAAAA,EAAAC,EAAAC,GAAA,SAAAC,GAAA,IAAAC,EAAAJ,EAAA,IAAAK,EAAAL,EAAA,GAAAM,EAAAN,EAAAO,EAAAF,GAAAG,GAAAR,EAAA,GAAAA,EAAA,MAAAS,EAAAT,EAAAO,EAAAC,GAAAE,EAAAV,EAAA,KAAAW,EAAAX,EAAA,KAAAY,EAAAZ,EAAA,KAAAa,EAAAb,EAAAO,EAAAK,GAQME,EAAsB,SAAAC,GAAA,IAAGC,EAAHD,EAAGC,SAAH,OAC1Bb,EAAAc,cAACN,EAAA,EAAD,CAAQK,SAAUA,GAChBb,EAAAc,cAACP,EAAA,EAAD,KACEP,EAAAc,cAACR,EAAAS,EAAD,KACEf,EAAAc,cAAA,uCAEFd,EAAAc,cAAA,MACEE,GAAG,wBACHC,IAAK,CAAEC,MAAOC,IAAQC,OAAOC,cAAeC,UAAW,IAFzD,yBAMAtB,EAAAc,cAAA,SACEd,EAAAc,cAAA,QAAMS,KAAK,MAAMC,aAAW,QACzB,IADH,MADF,qLASAxB,EAAAc,cAAA,iPAOAd,EAAAc,cAAA,UACEd,EAAAc,cAAA,UACEd,EAAAc,cAACb,EAAA,KAAD,CAAMwB,GAAG,qCAAT,uCADF,qHAOAzB,EAAAc,cAAA,UACEd,EAAAc,cAACb,EAAA,KAAD,CAAMwB,GAAG,qCAAT,0BADF,uFAOAzB,EAAAc,cAAA,UACEd,EAAAc,cAACb,EAAA,KAAD,CAAMwB,GAAG,uCAAT,sCADF,qGAOAzB,EAAAc,cAAA,UACEd,EAAAc,cAACb,EAAA,KAAD,CAAMwB,GAAG,sCAAT,iCADF,+GAYRd,EAAoBe,UAAY,CAC9Bb,SAAUc,IAAUC,QAGPjB,yICpETkB,EAAY,SAAAjB,GAAA,IAAAkB,EAAGC,EAAHnB,EAAGmB,SAAUC,EAAbpB,EAAaoB,UAAbC,EAAArB,EAAwBsB,kBAAxB,IAAAD,KAAAE,EAAAvB,EAA2CK,WAA3C,IAAAkB,EAAiD,GAAjDA,EAAA,OAChBnC,EAAAc,cAAA,OACEG,IAAGmB,OAAAC,QAAAP,EAAA,CACDQ,SAAQ,QACRC,OAAM,SACNC,QAAYC,YAAO,KAAZ,IAAoBA,YAAOC,IAAQC,mBAC1CC,cAAeH,YAAO,KACtBI,SAAQ,YALPf,EAMAX,IAAQ2B,QAAS,CAChBR,SAAUJ,EACNO,YAAOtB,IAAQ4B,qBACfN,YAAOtB,IAAQmB,UACnBM,cAAeH,YAAO,MAVvBX,GAYEb,GAELe,UAAWA,GAEVD,IAILF,EAAUH,UAAY,CACpBK,SAAUJ,IAAUqB,KAAKC,WACzBjB,UAAWL,IAAUuB,UAAU,CAACvB,IAAUwB,OAAQxB,IAAUC,SAC5DM,WAAYP,IAAUyB,KACtBnC,IAAKU,IAAUC,QAGFC","file":"component---src-pages-tutorials-custom-chart-index-js-1aed25c8ae61e62d19e3.js","sourcesContent":["import { Link } from 'gatsby';\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport Helmet from 'react-helmet';\nimport Container from '../../../components/container';\nimport Layout from '../../../components/layout';\nimport presets from '../../../utils/presets';\n\nconst TutorialCustomChart = ({ location }) => (\n  <Layout location={location}>\n    <Container>\n      <Helmet>\n        <title>Custom Chart Tutorial</title>\n      </Helmet>\n      <h1\n        id=\"custom-chart-tutorial\"\n        css={{ color: presets.colors.zoomdataGreen, marginTop: 0 }}\n      >\n        Custom Chart Tutorial\n      </h1>\n      <p>\n        <span role=\"img\" aria-label=\"Wave\">\n          {' '}\n          👋\n        </span>\n        Hello! Welcome to the Zoomdata Custom Chart Tutorial. This tutorial\n        consists of four parts that will guide you through the process of\n        developing a new custom chart from scratch.\n      </p>\n      <p>\n        If you have some experience with JavaScript and you want to learn about\n        connecting your data to charts, you are in the right place. No worries\n        if you are not a Zoomdata expert, we {`'`} ll walk you through things\n        step by step.\n      </p>\n\n      <ol>\n        <li>\n          <Link to=\"/tutorials/custom-chart/part-one/\">\n            Introduction to Custom Chart Basics\n          </Link>\n          — Configuring the chart CLI, creating a chart with sample code,\n          editing the chart code, and previewing the chart.\n        </li>\n        <li>\n          <Link to=\"/tutorials/custom-chart/part-two/\">\n            Modifying Data Queries\n          </Link>\n          — Learn about query variables, chart defaults, previewing data, and\n          data accessors.\n        </li>\n        <li>\n          <Link to=\"/tutorials/custom-chart/part-three/\">\n            Working with Third-Party Libraries\n          </Link>\n          — Explore integrating charting libraries like D3, ECharts, and\n          Highcharts to build dynamic charts\n        </li>\n        <li>\n          <Link to=\"/tutorials/custom-chart/part-four/\">\n            Integrating Zoomdata Controls\n          </Link>\n          — Add controls found in out of the box Zoomdata charts: Axis\n          labels/pickers, tooltips, and radial menu.\n        </li>\n      </ol>\n    </Container>\n  </Layout>\n);\n\nTutorialCustomChart.propTypes = {\n  location: PropTypes.object,\n};\n\nexport default TutorialCustomChart;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport presets from '../utils/presets';\n\nimport { options, rhythm } from '../utils/typography';\n\nconst Container = ({ children, className, hasSideBar = true, css = {} }) => (\n  <div\n    css={{\n      maxWidth: `100vw`,\n      margin: `0 auto`,\n      padding: `${rhythm(1.5)} ${rhythm(options.blockMarginBottom)}`,\n      paddingBottom: rhythm(3.5),\n      position: `relative`,\n      [presets.Tablet]: {\n        maxWidth: hasSideBar\n          ? rhythm(presets.maxWidthWithSidebar)\n          : rhythm(presets.maxWidth),\n        paddingBottom: rhythm(1.5),\n      },\n      ...css,\n    }}\n    className={className}\n  >\n    {children}\n  </div>\n);\n\nContainer.propTypes = {\n  children: PropTypes.node.isRequired,\n  className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),\n  hasSideBar: PropTypes.bool,\n  css: PropTypes.object,\n};\n\nexport default Container;\n"],"sourceRoot":""}