\n\n \n );\n }\n}","import React from \"react\"\nimport PropTypes from 'prop-types'\n\nimport { withStyles } from '@material-ui/core/styles'\n// import withRoot from '../../../../../utils/withRoot'\nimport Typography from '@material-ui/core/Typography'\nimport Grid from '@material-ui/core/Grid'\n\nimport IN8015RadarIN6012 from \"./in8015-radargraph-6012\"\nimport IN8015RadarIN3011 from \"./in8015-radargraph-3011\"\n\nconst styles = {\n cardmedia: {\n height: 275,\n display: 'flex',\n justifyContent: 'center'\n }\n}\n\nfunction IN8015RadarGrid(props) {\n const { classes } = props;\n\n return (\n \n \n \n IN-8015FHD vs IN-6012HD\n \n
\n \n
\n \n \n \n IN-8015FHD vs IN-3011\n \n
\n \n
\n \n \n );\n}\n\nIN8015RadarGrid.propTypes = {\n classes: PropTypes.object.isRequired,\n}\n\n// export default withRoot(withStyles(styles)(IN8015RadarGrid))\nexport default withStyles(styles)(IN8015RadarGrid)","import React from \"react\"\nimport Helmet from 'react-helmet'\n\nimport { OutboundLink } from 'gatsby-plugin-google-analytics'\n\nimport { graphql } from 'gatsby'\nimport { Link } from 'gatsby'\n\nimport OverviewCard from \"../../../components/Products/Indoor_Cameras/IN-8015/in8015-overview-card\";\nimport IN8015ImageQGallery from \"../../../components/Products/Indoor_Cameras/IN-8015/in8015-imageQ-gallery\";\nimport IN8015CardGrid01 from \"../../../components/Products/Indoor_Cameras/IN-8015/Card_Grid/in8015-imageQ-cards-1\";\nimport IN8015CardGrid02 from \"../../../components/Products/Indoor_Cameras/IN-8015/Card_Grid/in8015-imageQ-cards-2\";\nimport IN8015CardGrid03 from \"../../../components/Products/Indoor_Cameras/IN-8015/Card_Grid/in8015-imageQ-cards-3\";\nimport IN8015RadarGrid from \"../../../components/Products/Indoor_Cameras/IN-8015/Radar_Graphs/in8015-radargraph-grid\";\nimport NightvisionCard from \"../../../components/Products/Usermanuals/CameraNightvision/nightvision-min-max-card\";\nimport IndoorPowerCard from \"../../../components/Products/Usermanuals/CameraPowerConsumption/power-indoor-card\";\nimport AOVCard from \"../../../components/Products/Usermanuals/CameraAngleOfView/aov-card\";\n\nimport SEOHelmet from '../../../components/Layout/SEOHelmet'\nimport Footer from \"../../../components/Layout/footer\"\nimport BreadCrumbs from '../../../components/Layout/breadcrumbs/breadcrumbs'\n\nconst seodata = {\n title: 'INSTAR IN-8015 Full HD',\n description: 'The IN-8015 HD is the first INSTAR camera with the new 1080p chipset. It offers all the advantages of the IN-6014 HD with a revised software and much more.',\n image: '/images/Search/P_SearchThumb_IN-8015HD.png'\n}\n\nexport default ({ data }) => (\n \n \n IN-8015 Full HD\n
\n Product Overview\n
\n\n \n\n \n \n \n
\n \n
\n
WiFi Variant
\n
\n \n PoE Variant\n \n
\n
\n Field of View\n
\n
Pan & Tilt
\n
Zoom
\n
\n \n \n
\n
\n \n White\n {\" \"}\n /{\" \"}\n \n Black\n \n
\n
not yet available
\n
approx. 90°
\n
available
\n
digital
\n
\n \n
\n
\n \n Remark: All images and description on this page correspond to the WiFi\n variant.\n \n
\n \n \n \n \n
\n The IN-8015 Full HD is an all-round solution for 1080p indoor\n surveillance. The camera head is remotely controllable and equipped with\n infrared diodes to utilize night vision in pitch dark environments. The\n integrated IR cut filter on the other hand allows for the capturing of\n native colours, as seen by the human eye. Through the use of an efficient\n h.264 compression codec it is able of recording video files on{\" \"}\n SD Memory Card with\n comparably small size but best picture results. Any device (i.e.\n smartphones) can connect to the cameras web interface and allows you to\n control the pan & tilt feature. With 350 degrees horizontally and 100\n degrees vertically range of movement. Thanks to its compact size and its\n modern design, you won't be just limited to use it as a surveillance\n camera but also for your personal projects. The{\" \"}\n FTP Support allows\n you to use the IN-8015 HD as a multi-functional webcam for{\" \"}\n \n Integration on your Website\n {\" \"}\n .\n
\n \n \n \n
Hardware
\n
\n
Integrated PIR heat detector for advanced motion detection
\n
Remote controlled Pan & Tilt - 350° pan and 100° tilt
\n
\n 2-Way audio via an integrated{\" \"}\n \n Micorphone & Speaker\n \n
\n RJ-45 Ethernet port for an easy integration into your 100Mbit home\n network\n
\n
\n Compatible with{\" \"}\n \n 2.4 GHz WiFi\n {\" \"}\n IEEE 802.11 b/g/n up to 54Mbit networks with WEP, WPA and WPA2 security\n
\n
\n \n DHCP\n {\" \"}\n and{\" \"}\n UPnP{\" \"}\n support for an automatic network integration\n
\n
\n Integrated personal, free{\" \"}\n \n DDNS ("Internet") Address\n {\" \"}\n and{\" \"}\n \n P2P User ID\n {\" \"}\n to access your camera through the Internet\n
\n
\n
Software
\n
\n
\n Free Android,{\" \"}\n iPhone and{\" \"}\n Windows Phone App\n
\n
\n Web user interface{\" \"}\n allows an easy configuration and camera control through your default web\n browser (Chrome, Safari, Firefox, Internet Explorer)\n
\n
\n \n Multi user management\n {\" \"}\n and simultaneous login for 3 users\n
\n Record videos directly to an{\" \"}\n Internal SD Card\n
\n
\n \n \n
Image Quality
\n \n \n \n
\n The 1/3 inch WDR sensor is a Panasonic CMOS chip,\n enabling 1080p HD video at unparalleled low-light sensitivity. Panasonic\n offers a wide variety of image sensors (\n νMaicovicon®\n ) for security and network cameras, which are based on the industry's\n most advanced technology and can be applied to security cameras requiring\n high picture quality with high sensitivity and low noise. The CMOS image\n sensor, νMaicovicon®, features high picture quality equal to high-speed\n CCD technologies, high S/N ratio, low noise, and high dynamic range. Even\n in a dark condition, you can retrieve snapshots with excellent character\n detection, color reproduction, as well as object detection. Even in scenes\n with fast-moving objects, the image sensor ensures clear images without\n motion blur or strain. The frame composite function (WDR) enables\n high-dynamic range - you can simultaneously resolve dark and bright areas\n in your video frame.\n
\n \n \n \n \n
Resolution Comparison
\n \n \n \n \n \n \n \n
\n \n ** The Model IN-6012 HD only offers half the resolution, compared to the\n IN-8015 HD, but - with its reduced angle of view - still offers a very\n detailed image. The camera model IN-6014 HD uses a similar lense as the\n IN-8015 HD, with a slightly a bigger field of view because of its\n slightly bigger sensor and wider lense.\n {\" \"}\n \n \n The IN-8015 Full HD is the first INSTAR HD 1080p pan & tilt camera with an\n integrated infrared motion detector. The camera can easily be controlled\n through your smartphone from inside your network and also over the\n internet. The camera can easily be connected to your network by using its\n 2.4GHz (802.11b/g/n) Wi-Fi module (WPA/WPA2/CCMP) or through the 100MBit\n network interface to ensure a fluid video stream. The camera can also see\n during the night thanks to 10 Infrared LEDs operating at a wavelength of\n 850nm. The max. indoor range for the cameras night vision is around 5-10\n meters. Our new fullHD indoor camera will bring you all the features that\n you are used to from our 720p series, combined with a superior resolution\n of 1920x1080 Pixel and the possibility to record videos on an integrated\n SD card. The IN-8015 HD is the camera that combines the powerful software\n based motion detection with a hardware heat motion detector (PIR). Both\n methods can be used or bundled to increase their effectiveness by\n minimizing their false alarm rate.\n
\n \n \n \n \n \n
The 1/3 inch WDR sensor is built on a 4.3 micron OmniPixel3-HS™ Pixel\n enabling 720p HD at unparalleled low-light sensitivity and a dynamic range\n in colour of 115 dB – compared to the 60 db of a regular VGA IP Camera. WDR\n allows you to capture high detailed colour videos even in high-contrast\n environmental lighting conditions
\n \n \n \n \n)\n\nexport const query = graphql`\n query {\n file(relativePath: { eq: \"Indoor_Cameras/IN-8015_HD/IN-8015_Overview_width1650.png\" }) {\n childImageSharp {\n fluid(maxWidth: 695) {\n ...GatsbyImageSharpFluid_withWebp_tracedSVG\n }\n }\n }\n }\n`;\n","import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nexport var styles = {\n /* Styles applied to the root element. */\n root: {\n display: 'flex',\n alignItems: 'center',\n padding: 8\n },\n\n /* Styles applied to the root element if `disableSpacing={false}`. */\n spacing: {\n '& > :not(:first-child)': {\n marginLeft: 8\n }\n }\n};\nvar CardActions = /*#__PURE__*/React.forwardRef(function CardActions(props, ref) {\n var _props$disableSpacing = props.disableSpacing,\n disableSpacing = _props$disableSpacing === void 0 ? false : _props$disableSpacing,\n classes = props.classes,\n className = props.className,\n other = _objectWithoutProperties(props, [\"disableSpacing\", \"classes\", \"className\"]);\n\n return /*#__PURE__*/React.createElement(\"div\", _extends({\n className: clsx(classes.root, className, !disableSpacing && classes.spacing),\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nexport default withStyles(styles, {\n name: 'MuiCardActions'\n})(CardActions);","module.exports = __webpack_public_path__ + \"static/IN-8015HD-vs-IN-6014HD_2-13e2bea58fb1900e03161a91dcd517fe.png\";","module.exports = __webpack_public_path__ + \"static/IN-8015v6014_resTest2_blur-c2b8b31507acfd7c284f6b3ddc0659a7.jpg\";","import \"core-js/modules/es.array.reduce.js\";\nimport _objectWithoutProperties from \"@babel/runtime/helpers/esm/objectWithoutProperties\";\nimport _extends from \"@babel/runtime/helpers/esm/extends\"; // A grid component using the following libs as inspiration.\n//\n// For the implementation:\n// - https://getbootstrap.com/docs/4.3/layout/grid/\n// - https://github.com/kristoferjoseph/flexboxgrid/blob/master/src/css/flexboxgrid.css\n// - https://github.com/roylee0704/react-flexbox-grid\n// - https://material.angularjs.org/latest/layout/introduction\n//\n// Follow this flexbox Guide to better understand the underlying model:\n// - https://css-tricks.com/snippets/css/a-guide-to-flexbox/\n\nimport * as React from 'react';\nimport clsx from 'clsx';\nimport withStyles from '../styles/withStyles';\nimport requirePropFactory from '../utils/requirePropFactory';\nvar SPACINGS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];\nvar GRID_SIZES = ['auto', true, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];\n\nfunction generateGrid(globalStyles, theme, breakpoint) {\n var styles = {};\n GRID_SIZES.forEach(function (size) {\n var key = \"grid-\".concat(breakpoint, \"-\").concat(size);\n\n if (size === true) {\n // For the auto layouting\n styles[key] = {\n flexBasis: 0,\n flexGrow: 1,\n maxWidth: '100%'\n };\n return;\n }\n\n if (size === 'auto') {\n styles[key] = {\n flexBasis: 'auto',\n flexGrow: 0,\n maxWidth: 'none'\n };\n return;\n } // Keep 7 significant numbers.\n\n\n var width = \"\".concat(Math.round(size / 12 * 10e7) / 10e5, \"%\"); // Close to the bootstrap implementation:\n // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41\n\n styles[key] = {\n flexBasis: width,\n flexGrow: 0,\n maxWidth: width\n };\n }); // No need for a media query for the first size.\n\n if (breakpoint === 'xs') {\n _extends(globalStyles, styles);\n } else {\n globalStyles[theme.breakpoints.up(breakpoint)] = styles;\n }\n}\n\nfunction getOffset(val) {\n var div = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;\n var parse = parseFloat(val);\n return \"\".concat(parse / div).concat(String(val).replace(String(parse), '') || 'px');\n}\n\nfunction generateGutter(theme, breakpoint) {\n var styles = {};\n SPACINGS.forEach(function (spacing) {\n var themeSpacing = theme.spacing(spacing);\n\n if (themeSpacing === 0) {\n return;\n }\n\n styles[\"spacing-\".concat(breakpoint, \"-\").concat(spacing)] = {\n margin: \"-\".concat(getOffset(themeSpacing, 2)),\n width: \"calc(100% + \".concat(getOffset(themeSpacing), \")\"),\n '& > $item': {\n padding: getOffset(themeSpacing, 2)\n }\n };\n });\n return styles;\n} // Default CSS values\n// flex: '0 1 auto',\n// flexDirection: 'row',\n// alignItems: 'flex-start',\n// flexWrap: 'nowrap',\n// justifyContent: 'flex-start',\n\n\nexport var styles = function styles(theme) {\n return _extends({\n /* Styles applied to the root element. */\n root: {},\n\n /* Styles applied to the root element if `container={true}`. */\n container: {\n boxSizing: 'border-box',\n display: 'flex',\n flexWrap: 'wrap',\n width: '100%'\n },\n\n /* Styles applied to the root element if `item={true}`. */\n item: {\n boxSizing: 'border-box',\n margin: '0' // For instance, it's useful when used with a `figure` element.\n\n },\n\n /* Styles applied to the root element if `zeroMinWidth={true}`. */\n zeroMinWidth: {\n minWidth: 0\n },\n\n /* Styles applied to the root element if `direction=\"column\"`. */\n 'direction-xs-column': {\n flexDirection: 'column'\n },\n\n /* Styles applied to the root element if `direction=\"column-reverse\"`. */\n 'direction-xs-column-reverse': {\n flexDirection: 'column-reverse'\n },\n\n /* Styles applied to the root element if `direction=\"row-reverse\"`. */\n 'direction-xs-row-reverse': {\n flexDirection: 'row-reverse'\n },\n\n /* Styles applied to the root element if `wrap=\"nowrap\"`. */\n 'wrap-xs-nowrap': {\n flexWrap: 'nowrap'\n },\n\n /* Styles applied to the root element if `wrap=\"reverse\"`. */\n 'wrap-xs-wrap-reverse': {\n flexWrap: 'wrap-reverse'\n },\n\n /* Styles applied to the root element if `alignItems=\"center\"`. */\n 'align-items-xs-center': {\n alignItems: 'center'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-start\"`. */\n 'align-items-xs-flex-start': {\n alignItems: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignItems=\"flex-end\"`. */\n 'align-items-xs-flex-end': {\n alignItems: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignItems=\"baseline\"`. */\n 'align-items-xs-baseline': {\n alignItems: 'baseline'\n },\n\n /* Styles applied to the root element if `alignContent=\"center\"`. */\n 'align-content-xs-center': {\n alignContent: 'center'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-start\"`. */\n 'align-content-xs-flex-start': {\n alignContent: 'flex-start'\n },\n\n /* Styles applied to the root element if `alignContent=\"flex-end\"`. */\n 'align-content-xs-flex-end': {\n alignContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-between\"`. */\n 'align-content-xs-space-between': {\n alignContent: 'space-between'\n },\n\n /* Styles applied to the root element if `alignContent=\"space-around\"`. */\n 'align-content-xs-space-around': {\n alignContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"center\"`. */\n 'justify-xs-center': {\n justifyContent: 'center'\n },\n\n /* Styles applied to the root element if `justify=\"flex-end\"`. */\n 'justify-xs-flex-end': {\n justifyContent: 'flex-end'\n },\n\n /* Styles applied to the root element if `justify=\"space-between\"`. */\n 'justify-xs-space-between': {\n justifyContent: 'space-between'\n },\n\n /* Styles applied to the root element if `justify=\"space-around\"`. */\n 'justify-xs-space-around': {\n justifyContent: 'space-around'\n },\n\n /* Styles applied to the root element if `justify=\"space-evenly\"`. */\n 'justify-xs-space-evenly': {\n justifyContent: 'space-evenly'\n }\n }, generateGutter(theme, 'xs'), theme.breakpoints.keys.reduce(function (accumulator, key) {\n // Use side effect over immutability for better performance.\n generateGrid(accumulator, theme, key);\n return accumulator;\n }, {}));\n};\nvar Grid = /*#__PURE__*/React.forwardRef(function Grid(props, ref) {\n var _props$alignContent = props.alignContent,\n alignContent = _props$alignContent === void 0 ? 'stretch' : _props$alignContent,\n _props$alignItems = props.alignItems,\n alignItems = _props$alignItems === void 0 ? 'stretch' : _props$alignItems,\n classes = props.classes,\n classNameProp = props.className,\n _props$component = props.component,\n Component = _props$component === void 0 ? 'div' : _props$component,\n _props$container = props.container,\n container = _props$container === void 0 ? false : _props$container,\n _props$direction = props.direction,\n direction = _props$direction === void 0 ? 'row' : _props$direction,\n _props$item = props.item,\n item = _props$item === void 0 ? false : _props$item,\n _props$justify = props.justify,\n justify = _props$justify === void 0 ? 'flex-start' : _props$justify,\n _props$lg = props.lg,\n lg = _props$lg === void 0 ? false : _props$lg,\n _props$md = props.md,\n md = _props$md === void 0 ? false : _props$md,\n _props$sm = props.sm,\n sm = _props$sm === void 0 ? false : _props$sm,\n _props$spacing = props.spacing,\n spacing = _props$spacing === void 0 ? 0 : _props$spacing,\n _props$wrap = props.wrap,\n wrap = _props$wrap === void 0 ? 'wrap' : _props$wrap,\n _props$xl = props.xl,\n xl = _props$xl === void 0 ? false : _props$xl,\n _props$xs = props.xs,\n xs = _props$xs === void 0 ? false : _props$xs,\n _props$zeroMinWidth = props.zeroMinWidth,\n zeroMinWidth = _props$zeroMinWidth === void 0 ? false : _props$zeroMinWidth,\n other = _objectWithoutProperties(props, [\"alignContent\", \"alignItems\", \"classes\", \"className\", \"component\", \"container\", \"direction\", \"item\", \"justify\", \"lg\", \"md\", \"sm\", \"spacing\", \"wrap\", \"xl\", \"xs\", \"zeroMinWidth\"]);\n\n var className = clsx(classes.root, classNameProp, container && [classes.container, spacing !== 0 && classes[\"spacing-xs-\".concat(String(spacing))]], item && classes.item, zeroMinWidth && classes.zeroMinWidth, direction !== 'row' && classes[\"direction-xs-\".concat(String(direction))], wrap !== 'wrap' && classes[\"wrap-xs-\".concat(String(wrap))], alignItems !== 'stretch' && classes[\"align-items-xs-\".concat(String(alignItems))], alignContent !== 'stretch' && classes[\"align-content-xs-\".concat(String(alignContent))], justify !== 'flex-start' && classes[\"justify-xs-\".concat(String(justify))], xs !== false && classes[\"grid-xs-\".concat(String(xs))], sm !== false && classes[\"grid-sm-\".concat(String(sm))], md !== false && classes[\"grid-md-\".concat(String(md))], lg !== false && classes[\"grid-lg-\".concat(String(lg))], xl !== false && classes[\"grid-xl-\".concat(String(xl))]);\n return /*#__PURE__*/React.createElement(Component, _extends({\n className: className,\n ref: ref\n }, other));\n});\nprocess.env.NODE_ENV !== \"production\" ? void 0 : void 0;\nvar StyledGrid = withStyles(styles, {\n name: 'MuiGrid'\n})(Grid);\n\nif (process.env.NODE_ENV !== 'production') {\n var requireProp = requirePropFactory('Grid');\n StyledGrid.propTypes = _extends({}, StyledGrid.propTypes, {\n alignContent: requireProp('container'),\n alignItems: requireProp('container'),\n direction: requireProp('container'),\n justify: requireProp('container'),\n lg: requireProp('item'),\n md: requireProp('item'),\n sm: requireProp('item'),\n spacing: requireProp('container'),\n wrap: requireProp('container'),\n xs: requireProp('item'),\n zeroMinWidth: requireProp('item')\n });\n}\n\nexport default StyledGrid;","module.exports = __webpack_public_path__ + \"static/IN-8015v6014_resTestBig-dc8a55bad937d5bf814a1dc77560007d.png\";","import React from 'react'\nimport '../../../../../node_modules/react-vis/dist/style.css'\nimport {\n FlexibleWidthXYPlot,\n VerticalGridLines,\n HorizontalGridLines,\n AreaSeries,\n DiscreteColorLegend,\n Crosshair,\n XAxis\n} from 'react-vis'\n\nconst DATA = [\n [\n { x: 'Booting min [W]', y: 2.20 },\n { x: 'Booting max [W]', y: 6.80 },\n { x: 'Booting with IR active [W]', y: 7.20 },\n { x: 'Idle [W]', y: 3.30 },\n { x: 'Idle with IR active [W]', y: 3.80 },\n { x: 'Idle with IR & WiFi active [W]', y: 4.50 },\n { x: 'Pan or Tilt [W]', y: 5.10 },\n { x: 'Pan or Tilt with IR active [W]', y: 5.94 },\n { x: 'Video Recording active [W]', y: 4.50 },\n { x: 'Video Recording with IR active [W]', y: 4.00 }\n ],\n [\n { x: 'Booting min [W]', y: 1.94 },\n { x: 'Booting max [W]', y: 6.42 },\n { x: 'Booting with IR active [W]', y: 7.49 },\n { x: 'Idle [W]', y: 2.94 },\n { x: 'Idle with IR active [W]', y: 4.29 },\n { x: 'Idle with IR & WiFi active [W]', y: 5.09 },\n { x: 'Pan or Tilt [W]', y: 4.74 },\n { x: 'Pan or Tilt with IR active [W]', y: 5.67 },\n { x: 'Video Recording active [W]', y: 2.97 },\n { x: 'Video Recording with IR active [W]', y: 4.54 },\n ],\n [\n { x: 'Booting min [W]', y: 2.00 },\n { x: 'Booting max [W]', y: 6.60 },\n { x: 'Booting with IR active [W]', y: 7.50 },\n { x: 'Idle [W]', y: 3.90 },\n { x: 'Idle with IR active [W]', y: 4.60 },\n { x: 'Idle with IR & WiFi active [W]', y: 0 },\n { x: 'Pan or Tilt [W]', y: 0 },\n { x: 'Pan or Tilt with IR active [W]', y: 0 },\n { x: 'Video Recording active [W]', y: 4.00 },\n { x: 'Video Recording with IR active [W]', y: 4.70 }\n ],\n [\n { x: 'Booting min [W]', y: 2.04 },\n { x: 'Booting max [W]', y: 6.80 },\n { x: 'Booting with IR active [W]', y: 7.30 },\n { x: 'Idle [W]', y: 3.52 },\n { x: 'Idle with IR active [W]', y: 4.63 },\n { x: 'Idle with IR & WiFi active [W]', y: 5.32 },\n { x: 'Pan or Tilt [W]', y: 4.32 },\n { x: 'Pan or Tilt with IR active [W]', y: 5.47 },\n { x: 'Video Recording active [W]', y: 3.65 },\n { x: 'Video Recording with IR active [W]', y: 4.70 }\n ]\n];\n\n\nexport default class Example extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n crosshairValues: []\n };\n }\n\n render() {\n return (\n \n\n