{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr; web-share","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":true,"base_url":"/anon/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjk2MjM2NDk1LCJpYXQiOjE2OTYyMzI4OTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.04dRMFl5aiYlRKvbOV2o0Y05LwBHNzGsS6MmkbyTukqE6LyAZTIYZHyxQUIsF475w_o7vM6HBfLnoXD4Ai9gaKA09B5kXbM-V4WXURrZDjp5jZDZJT4HXacjTIdXgkh1gTODQDtu4VWtyajKHu08nUXbff_twaK25IV-xsQ0keY6ECh9r4Gq88rGXe0tES63U51NCnvwZK_smqBBZyRVio79s6_bGxOKIPhIUGIiaL6wQTX6jFpISX7S6_--xtvMteTCM0bjvQdAuZdN1LTtFK5foaxqdOAAn88dqbNIKO0By23KPud2GYkEKUxFdvNXqdetyghyJWTGphAM8OaPyA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":32289273,\"user_id\":2814973,\"html\":\"<div id=\\\"root\\\"><\\/div>\\n\",\"css\":\".chart-wrapper {\\n padding: 2%;\\n display: inline-block;\\n}\\n\\n.main.chart-wrapper {\\n width: 96%;\\n height: 400px;\\n}\\n\\n.sub.chart-wrapper {\\n width: 29%;\\n height: 300px;\\n}\\n\\n\\/* Simple responsivenss example *\\/\\n@media (max-width: 700px) {\\n .sub.chart-wrapper {\\n width: 96%;\\n }\\n}\\n\",\"js\":\"Chart.defaults.global.defaultFontFamily = \\\"Roboto, sans-serif\\\";\\n\\n\\/\\/ Data generation\\nfunction getRandomArray(numItems) {\\n \\/\\/ Create random array of objects\\n let names = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';\\n let data = [];\\n for(var i = 0; i < numItems; i++) {\\n data.push({\\n label: names[i],\\n value: Math.round(20 + 80 * Math.random())\\n });\\n }\\n return data;\\n}\\n\\nfunction getRandomDateArray(numItems) {\\n \\/\\/ Create random array of objects (with date)\\n let data = [];\\n let baseTime = new Date('2018-05-01T00:00:00').getTime();\\n let dayMs = 24 * 60 * 60 * 1000;\\n for(var i = 0; i < numItems; i++) {\\n data.push({\\n time: new Date(baseTime + i * dayMs),\\n value: Math.round(20 + 80 * Math.random())\\n });\\n }\\n return data;\\n}\\n\\nfunction getData() {\\n let data = [];\\n\\n data.push({\\n title: 'Visits',\\n data: getRandomDateArray(150)\\n });\\n\\n data.push({\\n title: 'Categories',\\n data: getRandomArray(20)\\n });\\n\\n data.push({\\n title: 'Categories',\\n data: getRandomArray(10)\\n });\\n\\n data.push({\\n title: 'Data 4',\\n data: getRandomArray(6)\\n });\\n\\n return data;\\n}\\n\\n\\n\\/\\/ BarChart\\nclass BarChart extends React.Component {\\n constructor(props) {\\n super(props);\\n this.canvasRef = React.createRef();\\n }\\n\\n componentDidUpdate() {\\n this.myChart.data.labels = this.props.data.map(d => d.label);\\n this.myChart.data.datasets[0].data = this.props.data.map(d => d.value);\\n this.myChart.update();\\n }\\n\\n componentDidMount() {\\n this.myChart = new Chart(this.canvasRef.current, {\\n type: 'bar',\\n options: {\\n\\t maintainAspectRatio: false,\\n scales: {\\n yAxes: [\\n {\\n ticks: {\\n min: 0,\\n max: 100\\n }\\n }\\n ]\\n }\\n },\\n data: {\\n labels: this.props.data.map(d => d.label),\\n datasets: [{\\n label: this.props.title,\\n data: this.props.data.map(d => d.value),\\n backgroundColor: this.props.color\\n }]\\n }\\n });\\n }\\n\\n render() {\\n return (\\n <canvas ref={this.canvasRef} \\/>\\n );\\n }\\n}\\n\\n\\n\\/\\/ LineChart\\nclass LineChart extends React.Component {\\n constructor(props) {\\n super(props);\\n this.canvasRef = React.createRef();\\n }\\n\\n componentDidUpdate() {\\n this.myChart.data.labels = this.props.data.map(d => d.time);\\n this.myChart.data.datasets[0].data = this.props.data.map(d => d.value);\\n this.myChart.update();\\n }\\n\\n componentDidMount() {\\n this.myChart = new Chart(this.canvasRef.current, {\\n type: 'line',\\n options: {\\n\\t\\t\\t maintainAspectRatio: false,\\n scales: {\\n xAxes: [\\n {\\n type: 'time',\\n time: {\\n unit: 'week'\\n }\\n }\\n ],\\n yAxes: [\\n {\\n ticks: {\\n min: 0\\n }\\n }\\n ]\\n }\\n },\\n data: {\\n labels: this.props.data.map(d => d.time),\\n datasets: [{\\n label: this.props.title,\\n data: this.props.data.map(d => d.value),\\n fill: 'none',\\n backgroundColor: this.props.color,\\n pointRadius: 2,\\n borderColor: this.props.color,\\n borderWidth: 1,\\n lineTension: 0\\n }]\\n }\\n });\\n }\\n\\n render() {\\n return <canvas ref={this.canvasRef} \\/>;\\n }\\n}\\n\\n\\n\\/\\/ Doughnut\\nclass DoughnutChart extends React.Component {\\n constructor(props) {\\n super(props);\\n this.canvasRef = React.createRef();\\n }\\n\\n componentDidUpdate() {\\n this.myChart.data.labels = this.props.data.map(d => d.label);\\n this.myChart.data.datasets[0].data = this.props.data.map(d => d.value);\\n this.myChart.update();\\n }\\n\\n componentDidMount() {\\n this.myChart = new Chart(this.canvasRef.current, {\\n type: 'doughnut',\\n options: {\\n\\t maintainAspectRatio: false\\n },\\n data: {\\n labels: this.props.data.map(d => d.label),\\n datasets: [{\\n data: this.props.data.map(d => d.value),\\n backgroundColor: this.props.colors\\n }]\\n }\\n });\\n\\n }\\n\\n\\n render() {\\n return <canvas ref={this.canvasRef} \\/>;\\n }\\n}\\n\\n\\n\\/\\/ App\\nclass App extends React.Component {\\n constructor(props) {\\n super(props);\\n\\n this.state = {\\n data: getData()\\n };\\n }\\n\\n componentDidMount() {\\n window.setInterval(() => {\\n this.setState({\\n data: getData()\\n })\\n }, 5000)\\n }\\n\\n render() {\\n return (\\n <div className=\\\"App\\\">\\n <div className=\\\"main chart-wrapper\\\">\\n <LineChart\\n data={this.state.data[0].data}\\n title={this.state.data[0].title}\\n color=\\\"#3E517A\\\"\\n \\/>\\n <\\/div>\\n <div className=\\\"sub chart-wrapper\\\">\\n <BarChart\\n data={this.state.data[1].data}\\n title={this.state.data[1].title}\\n color=\\\"#70CAD1\\\"\\n \\/>\\n <\\/div>\\n <div className=\\\"sub chart-wrapper\\\">\\n <BarChart\\n data={this.state.data[2].data}\\n title={this.state.data[2].title}\\n color=\\\"#B08EA2\\\"\\n \\/>\\n <\\/div>\\n <div className=\\\"sub chart-wrapper\\\">\\n <DoughnutChart\\n data={this.state.data[3].data}\\n title={this.state.data[3].title}\\n colors={['#a8e0ff', '#8ee3f5', '#70cad1', '#3e517a', '#b08ea2', '#BBB6DF']}\\n \\/>\\n <\\/div>\\n <\\/div>\\n );\\n }\\n}\\n\\nReactDOM.render(<App \\/>, document.getElementById('root'));\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"babel\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2019-01-28T16:17:34.000Z\",\"updated_at\":\"2019-01-30T11:58:16.000Z\",\"title\":\"Chart.js \\/ React simple dashboard\",\"description\":\"\",\"slug_hash\":\"aXZVWX\",\"head\":\"<link href=\\\"https:\\/\\/fonts.googleapis.com\\/css?family=Roboto\\\" rel=\\\"stylesheet\\\">\",\"private\":false,\"slug_hash_private\":\"49ef2c6805f2299f74b4508474efe3bf\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01689540-6d30-7359-ba64-b7573fc75414\",\"is_new_editor_pen\":false,\"pen_hash\":null,\"hashid\":\"aXZVWX\"}"}