Fix: Add documentation (box#3)

* Fix: add documentation * Fix: background color and add documentation * Fix: Finish adding documentation
mxiao6 · Jul 11, 2018 · 6ddfc0e · 6ddfc0e
1 parent fa252b1
commit 6ddfc0e
Show file tree

Hide file tree

Showing 7 changed files with 281 additions and 185 deletions.
diff --git a/src/lib/viewers/doc/BoxExcel/charts.js b/src/lib/viewers/doc/BoxExcel/charts.js
@@ -1,28 +1,48 @@
 import React, { Component } from 'react';
 import { Bar, Pie, Doughnut } from 'react-chartjs-2';
 import PropTypes from 'prop-types';
-import { utils } from './utils';
 import { HEADER_WIDTH, HEADER_HEIGHT } from './const';
 
+/**
+ * map chart type to React Component imported from 'react-chartjs-2'
+ *
+ * @type {Object}
+ */
 const chartTypeMap = {
     line: Bar,
     bar: Bar,
     pie: Pie,
     doughnut: Doughnut
 };
 
+/**
+ * map legend to chartjs-recognizable
+ *
+ * @type {Object}
+ */
 const legendMap = {
     b: 'bottom'
 };
 
 class Charts extends Component {
     /* eslint-disable */
+    /**
+     * sheet spreadsheet data
+     * themeColors array of colors
+     *
+     * @type {Object}
+     */
     static propTypes = {
         sheet: PropTypes.object.isRequired,
         themeColors: PropTypes.array.isRequired
     };
     /* eslint-enable */
 
+    /**
+     * [constructor]
+     *
+     * @param {Object} props [description]
+     */
     constructor(props) {
         super(props);
 
@@ -32,15 +52,25 @@ class Charts extends Component {
         };
     }
 
+    /**
+     * Helper function of _parseChart
+     * Re-organize the data of a subplot
+     *
+     * @param  {Object} chart   Chart object parsed from sheetjs
+     * @param  {Array} subPlot  'cat' means chart label, 'val' means chart data
+     * @param  {number} counter counter of the whole chart
+     * @return {Object}         labels and data of a subplot, and updated counter
+     */
     _getRawData = (chart, subPlot, counter) => {
-        const { e } = utils.decode_range(chart['!ref']);
+        /* global XLSX */
+        const { e } = XLSX.utils.decode_range(chart['!ref']);
         const rowCount = e.r + 1;
         let subLabels = [];
         const subData = [];
         let newCounter = counter;
         subPlot.forEach((key) => {
             for (let r = 0; r < rowCount; ++r) {
-                const pos = utils.encode_cell({
+                const pos = XLSX.utils.encode_cell({
                     c: newCounter,
                     r
                 });
@@ -57,10 +87,22 @@ class Charts extends Component {
         return { subLabels, subData, newCounter };
     };
 
+    /**
+     * Whether the chart should display Axes
+     *
+     * @param  {string} type chart type string
+     * @return {boolean}     true for certain types
+     */
     _displayAxes = (type) => {
         return !(type === 'pie' || type === 'doughnut');
     };
 
+    /**
+     * Re-organize sheetjs data to chartjs format
+     *
+     * @param  {Object} chart chart object parsed from sheetjs
+     * @return {Object}       chartjs needed properties
+     */
     _parseChart = (chart) => {
         const chartType = chart['!plot'][0].t;
         const position = chart['!pos'];
@@ -143,6 +185,11 @@ class Charts extends Component {
         };
     };
 
+    /**
+     * Render all the charts on a layer above spreadsheet
+     *
+     * @return {jsx} rendered jsx
+     */
     render() {
         const { charts } = this.state;
         /* eslint-disable */

diff --git a/src/lib/viewers/doc/BoxExcel/colors.js b/src/lib/viewers/doc/BoxExcel/colors.js
@@ -1,3 +1,9 @@
+/**
+ * Excel 2007/2010/2013 Indexed Colors
+ * https://github.com/ClosedXML/ClosedXML/wiki/Excel-Indexed-Colors
+ *
+ * @type {Object}
+ */
 export const specialIndexMap = {
     0: '#000000',
     1: '#FFFFFF',
@@ -66,6 +72,12 @@ export const specialIndexMap = {
     64: '#000000'
 };
 
+/**
+ * Older 56 Excel ColorIndex Colors
+ * http://dmcritchie.mvps.org/excel/colors.htm
+ *
+ * @type {Object}
+ */
 export const specialIndexMapOld = {
     1: '#000000',
     2: '#FFFFFF',
@@ -125,6 +137,11 @@ export const specialIndexMapOld = {
     56: '#333333'
 };
 
+/**
+ * box color scheme and excel color map
+ *
+ * @type {Object}
+ */
 const colors = {
     gridGrey: '#BDC3C7',
     backgroundGrey: '#F9F9F9',

diff --git a/src/lib/viewers/doc/BoxExcel/index.js b/src/lib/viewers/doc/BoxExcel/index.js
@@ -7,8 +7,8 @@ class BoxExcel {
      * [constructor]
      *
      * @param {HTMLElement} excelEl - Excel element
-     * @param {Object} data - CSV data
-     * @return {BoxCSV} Instance
+     * @param {Object} data - Excel data parsed by sheetjs
+     * @return {BoxExcel} Instance
      */
     constructor(excelEl, data) {
         this.excelEl = excelEl;
@@ -30,7 +30,7 @@ class BoxExcel {
     }
 
     /**
-     * Renders CSV into an html table
+     * Renders Excel
      *
      * @return {void}
      * @private