initial commit

thinkific · Jan 21, 2019 · e75e775 · e75e775
commit e75e775
Show file tree

Hide file tree

Showing 15 changed files with 18,440 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json*
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+## ChartJS 2 React Example
+How to run the app:
+
+- Clone the repo
+- Run `npm install`
+- Run `npm start`
+
+This project is going to be updated with more complete features from ChartJS 2!
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "react-chart-js-example",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "chart.js": "^2.7.3",
+    "classnames": "^2.2.5",
+    "eslint-plugin-flowtype": "^3.2.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-react": "^7.12.4",
+    "node-sass": "^4.11.0",
+    "react": "^16.7.0",
+    "react-chartjs-2": "^2.7.4",
+    "react-dom": "^16.2.0",
+    "react-scripts": "2.1.3"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "eslint-plugin-import": "^2.14.0"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>ChartJS 2 - React example </title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react'
+import Chart from './components/Chart'
+
+class App extends Component {
+  render() {
+    return (
+      <Chart/>
+    )
+  }
+}
+
+export default App
diff --git a/src/components/Chart/Chart.js b/src/components/Chart/Chart.js
@@ -0,0 +1,57 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classNames from 'classnames/bind'
+import { Bar as BarChart } from 'react-chartjs-2'
+import styles from './Chart.scss'
+
+require ('./RoundedBars.js')
+
+const cx = classNames.bind(styles)
+export const Chart = ({datasets}) => {
+  return (
+    <div className={cx('chart-wrapper')}>
+      <BarChart
+        data={datasets}
+        width={300}
+        height={400}
+        options={{
+          cornerRadius: 8,
+          maintainAspectRatio: false,
+          responsive: true, 
+        }}
+      />
+    </div>
+  )
+}
+
+Chart.propTypes = {
+  datasets: PropTypes.object,
+}
+
+Chart.defaultProps = {
+  datasets: {
+    labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
+    datasets: [
+      {
+        label: '# of Votes - A',
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: '#36404D',
+        borderColor: '#36404D',
+        borderWidth: 2,
+        hoverBackgroundColor: '#75D9FD',
+        hoverBorderColor: '#75D9FD',
+      },
+      {
+        label: '# of Votes - B',
+        data: [5, 30, 3, 8, 14, 2],
+        backgroundColor: '#74B649',
+        borderColor: '#74B649',
+        borderWidth: 2,
+        hoverBackgroundColor: '#75FDB5',
+        hoverBorderColor: '#75FDB5',
+      }
+    ]
+  }
+}
+
+export default Chart
diff --git a/src/components/Chart/Chart.scss b/src/components/Chart/Chart.scss
@@ -0,0 +1,7 @@
+.chart {
+  &-wrapper {
+    width: 800px;
+    height: 500px;
+    margin: auto;
+  }
+}
diff --git a/src/components/Chart/RoundedBars.js b/src/components/Chart/RoundedBars.js
@@ -0,0 +1,139 @@
+//Custom rewrite for radius border on bar draw
+//Code from https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts with a few adjustments
+
+import { Chart as ChartJS } from 'react-chartjs-2'
+
+ChartJS.elements.Rectangle.prototype.draw = function() {
+    const ctx = this._chart.ctx
+    const vm = this._view
+    let left, right, top, bottom, signX, signY, borderSkipped
+    let borderWidth = vm.borderWidth
+
+    // If radius is less than 0 or is large enough to cause drawing errors a max
+    // radius is imposed. If cornerRadius is not defined set it to 0.
+    let cornerRadius = this._chart.config.options.cornerRadius
+    if(cornerRadius < 0){ cornerRadius = 0 }
+    if(typeof cornerRadius == 'undefined'){ cornerRadius = 0 }
+
+    if (!vm.horizontal) {
+      left = vm.x - vm.width / 2
+      right = vm.x + vm.width / 2
+      top = vm.y
+      bottom = vm.base
+      signX = 1
+      signY = bottom > top? 1: -1
+      borderSkipped = vm.borderSkipped || 'bottom'
+    }  
+
+    // Canvas doesn't allow us to stroke inside the width so we can
+    // adjust the sizes to fit if we're setting a stroke on the line
+    if (borderWidth) {
+      // borderWidth shold be less than bar width and bar height.
+      const barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom))
+      borderWidth = borderWidth > barSize? barSize: borderWidth
+      const halfStroke = borderWidth / 2
+      // Adjust borderWidth when bar top position is near vm.base(zero).
+      const borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0)
+      const borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0)
+      const borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0)
+      const borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0)
+      // not become a vertical line?
+      if (borderLeft !== borderRight) {
+        top = borderTop
+        bottom = borderBottom
+      }
+      // not become a horizontal line?
+      if (borderTop !== borderBottom) {
+        left = borderLeft
+        right = borderRight
+      }
+    }
+
+    ctx.beginPath()
+    ctx.fillStyle = vm.backgroundColor
+    ctx.strokeStyle = vm.borderColor
+    ctx.lineWidth = borderWidth
+
+    // Corner points, from bottom-left to bottom-right clockwise
+    // | 1 2 |
+    // | 0 3 |
+    const corners = [
+      [left, bottom],
+      [left, top],
+      [right, top],
+      [right, bottom],
+    ]
+
+    // Find first (starting) corner with fallback to 'bottom'
+    const borders = ['bottom', 'left', 'top', 'right']
+    let startCorner = borders.indexOf(borderSkipped, 0)
+    if (startCorner === -1) {
+      startCorner = 0
+    }
+
+    function cornerAt(index) {
+      return corners[(startCorner + index) % 4]
+    }
+
+    // Draw rectangle from 'startCorner'
+    let corner = cornerAt(0)
+    ctx.moveTo(corner[0], corner[1])
+
+    for (let i = 1; i < 4; i++) {
+      corner = cornerAt(i)
+      let nextCornerId = i+1
+      if(nextCornerId == 4){
+        nextCornerId = 0
+      }
+
+      const width = corners[2][0] - corners[1][0]
+      const height = corners[0][1] - corners[1][1]
+      const x = corners[1][0]
+      const y = corners[1][1]
+
+      let radius = cornerRadius
+
+      // Fix radius being too large
+      if(radius > Math.abs(height)/1.5){
+        radius = Math.floor(Math.abs(height)/1.5)
+      }
+      if(radius > Math.abs(width)/1.5){
+        radius = Math.floor(Math.abs(width)/1.5)
+      }
+
+      if(height < 0){
+        // Negative values in a standard bar chart
+        const x_tl = x;           const x_tr = x+width
+        const y_tl = y+height;    const y_tr = y+height
+
+        const x_bl = x;           const x_br = x+width
+        const y_bl = y;           const y_br = y
+
+        // Draw
+        ctx.moveTo(x_bl+radius, y_bl)
+        ctx.lineTo(x_br-radius, y_br)
+        ctx.quadraticCurveTo(x_br, y_br, x_br, y_br-radius)
+        ctx.lineTo(x_tr, y_tr+radius)
+        ctx.quadraticCurveTo(x_tr, y_tr, x_tr-radius, y_tr)
+        ctx.lineTo(x_tl+radius, y_tl)
+        ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl+radius)
+        ctx.lineTo(x_bl, y_bl-radius)
+        ctx.quadraticCurveTo(x_bl, y_bl, x_bl+radius, y_bl)
+      } else {
+        ctx.moveTo(x + radius, y)
+        ctx.lineTo(x + width - radius, y)
+        ctx.quadraticCurveTo(x + width, y, x + width, y + radius)
+        ctx.lineTo(x + width, y + height - radius)
+        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height)
+        ctx.lineTo(x + radius, y + height)
+        ctx.quadraticCurveTo(x, y + height, x, y + height)
+        ctx.lineTo(x, y + radius)
+        ctx.quadraticCurveTo(x, y, x + radius, y)
+      }
+    }
+
+    ctx.fill()
+    if (borderWidth) {
+      ctx.stroke()
+    }
+  }
diff --git a/src/components/Chart/index.js b/src/components/Chart/index.js
@@ -0,0 +1 @@
+export { default } from './Chart'
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,14 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
+serviceWorker.unregister();