2.0.0 release (#177)

* 1.12.0-rc.0 * Modularize lodash (#163) * Update build process to modularize lodash * Update src files to import lodash modularly * Fix missing lodash imports and remove partial and use better bind function for tests * Update docs * Update changelog * Replace lodash functions with native JS versions (#164) * Use Array, every and isFinite from JS native * Use some and find from JS native * Fix isFinite to check for null * Replace assign with Object.assign * Replace partial with bind * Remove console * Fix bind on XYPlot * Deprecate moment in favor of d3 time format. Move getDefaultFormats to Label utils and remove from X and YAxisLabels as static functions. Update tests (#166) * Deprecate numeral.js (#169) * replace numeral in Label.jsx with d3 format * remove format prop documentation, update formats prop documentation for X and Y AxisLabels * remove props.format from X and Y Axis Labels * Remove numeral from SankeyDiagram component * removed numeral library and updated docs * add back format prop for both X and Y Axis Label components" * Add format prop back allowing only function type * Clean build with updated props docs * Updated build * Fix typo in docs * Actually fix typo * Clean build with fixed typos in docs * add testing for numeric formats passed to X and Y Axis Labels * fix typo in comment * update format documentation to mirror formats * Update XAxis and YAxis labelFormat PropType * Fix import for identity * Update X and Y axis labels examples with new formats * Update CHANGELOG.md * Namespace xy plot props (#170) * Update prop omission logic in XYPlot and change style -> xyPlotContainerStyle * Fix tests and clean up * Update format examples (#171) * Update component docs and build * Migrate to Spotify web scripts for eslint and prettier (#173) * Added packages from spotify/web-scripts * Run prettier * Eslint clean up * Run eslint on test instead of using eslint.spec.js * Fix componentdocs file * Rebuild docs * Fix tests * Update changelog * Update docs * Fix documentation props sort logic & update docs * 2.0.0-rc.1 * Update changelog for 2.0.0
spotify · Aug 30, 2019 · b77ae0a · b77ae0a
1 parent e4c4bfb
commit b77ae0a
Show file tree

Hide file tree

Showing 153 changed files with 5,768 additions and 4,213 deletions.
diff --git a/.babelrc b/.babelrc
@@ -14,5 +14,10 @@
   plugins: [
     "@babel/plugin-proposal-class-properties",
     "@babel/plugin-proposal-object-rest-spread"
-  ]
+  ],
+  env: {
+    production: {
+      plugins: ["lodash"]
+    }
+  }
 }
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,9 @@
+# Ignore charts that are still experimental
+/src/AreaHeatmap.js
+/src/KernelDensityEstimation.js
+
+# Ignore shallowEqual
+/src/utils/shallowEqual.js
+
+# Ignore lessons
+/docs/src/lessons
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,4 +1,21 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "parser": "babel-eslint",
-  "extends": ["plugin:prettier/recommended"]
+  "extends": [
+    "@spotify/eslint-config-react",
+    "@spotify/eslint-config-base",
+    "prettier"
+  ],
+  "plugins": ["jest"],
+  "rules": {
+    "consistent-return": "off",
+    "no-nested-ternary": "off",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off"
+  }
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
-## 1.11.1 (2019-07-31)
-
-- [#167](https://github.com/spotify/reactochart/pull/167) Integrate cross-env
+## 2.0.0 (2019-08-30)
+
+- [#173](https://github.com/spotify/reactochart/pull/173) Migrate to Spotify web scripts - thanks @arjbholu!
+- [#171](https://github.com/spotify/reactochart/pull/171) Update format examples
+- [#170](https://github.com/spotify/reactochart/pull/170) Namespace XYPlot props
+- [#169](https://github.com/spotify/reactochart/pull/169) Deprecate numeral.js in favor of d3.format - thanks @acmei!
+- [#164](https://github.com/spotify/reactochart/pull/164) Replace lodash functions with native JS versions
+- [#163](https://github.com/spotify/reactochart/pull/163) Modularize lodash
 
 ## 1.11.0 (2019-07-09)
 

diff --git a/docs/build/bundle.4c89163a638cb6f3ce23.js b/docs/build/bundle.4c89163a638cb6f3ce23.js
diff --git a/docs/build/bundle.9f0eba26ff4f5db2f08b.js b/docs/build/bundle.9f0eba26ff4f5db2f08b.js
diff --git a/.../build/bundle.4c89163a638cb6f3ce23.js.map → .../build/bundle.9f0eba26ff4f5db2f08b.js.map b/.../build/bundle.4c89163a638cb6f3ce23.js.map → .../build/bundle.9f0eba26ff4f5db2f08b.js.map
diff --git a/docs/build/index.html b/docs/build/index.html
@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.4c89163a638cb6f3ce23.js"></script></body>
+<script type="text/javascript" src="bundle.9f0eba26ff4f5db2f08b.js"></script></body>
 </html>
diff --git a/docs/src/App.js b/docs/src/App.js
@@ -1,110 +1,110 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import { HashRouter as Router, Link, Route } from "react-router-dom";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HashRouter as Router, Link, Route } from 'react-router-dom';
+import _ from 'lodash';
 
-import * as Docs from "./docs";
-import * as Lessons from "./lessons";
-import Playground from "./Playground";
+import * as Docs from './docs';
+import * as Lessons from './lessons';
 
 const lessons = [
   {
-    name: "Quick Start",
-    path: "/quick-start",
-    Component: Lessons.QuickStartLesson
+    name: 'Quick Start',
+    path: '/quick-start',
+    Component: Lessons.QuickStartLesson,
   },
-  { name: "XY Plots", path: "/xy-plots", Component: Lessons.XYPlotsLesson }
+  { name: 'XY Plots', path: '/xy-plots', Component: Lessons.XYPlotsLesson },
   // {name: "Getters & Accessors", path: '/getters-and-accessors', Component: Lessons.GettersAndAccessorsLesson},
   // {name: "Interaction", path: '/interaction', Component: Lessons.InteractionLesson},
 ];
 
 const mainComponents = [
-  { name: "XYPlot", path: "/xy-plot", Component: Docs.XYPlotDocs },
+  { name: 'XYPlot', path: '/xy-plot', Component: Docs.XYPlotDocs },
   {
-    name: "ZoomContainer",
-    path: "/zoom-container",
-    Component: Docs.ZoomContainerDocs
-  }
+    name: 'ZoomContainer',
+    path: '/zoom-container',
+    Component: Docs.ZoomContainerDocs,
+  },
 ];
 
 const xyChartComponents = [
   {
-    name: "AreaBarChart",
-    path: "/area-bar-chart",
-    Component: Docs.AreaBarChartDocs
+    name: 'AreaBarChart',
+    path: '/area-bar-chart',
+    Component: Docs.AreaBarChartDocs,
   },
-  { name: "AreaChart", path: "/area-chart", Component: Docs.AreaChartDocs },
+  { name: 'AreaChart', path: '/area-chart', Component: Docs.AreaChartDocs },
   {
-    name: "AreaHeatmap",
-    path: "/area-heatmap",
-    Component: Docs.AreaHeatmapDocs
+    name: 'AreaHeatmap',
+    path: '/area-heatmap',
+    Component: Docs.AreaHeatmapDocs,
   },
-  { name: "BarChart", path: "/bar-chart", Component: Docs.BarChartDocs },
+  { name: 'BarChart', path: '/bar-chart', Component: Docs.BarChartDocs },
   {
-    name: "ColorHeatmap",
-    path: "/color-heatmap",
-    Component: Docs.ColorHeatmapDocs
+    name: 'ColorHeatmap',
+    path: '/color-heatmap',
+    Component: Docs.ColorHeatmapDocs,
   },
   {
-    name: "FunnelChart",
-    path: "/funnel-chart",
-    Component: Docs.FunnelChartDocs
+    name: 'FunnelChart',
+    path: '/funnel-chart',
+    Component: Docs.FunnelChartDocs,
   },
-  { name: "Histogram", path: "/histogram", Component: Docs.HistogramDocs },
+  { name: 'Histogram', path: '/histogram', Component: Docs.HistogramDocs },
   {
-    name: "KernelDensityEstimation",
-    path: "/kernel-density-estimation",
-    Component: Docs.KernelDensityEstimationDocs
+    name: 'KernelDensityEstimation',
+    path: '/kernel-density-estimation',
+    Component: Docs.KernelDensityEstimationDocs,
   },
-  { name: "LineChart", path: "/line-chart", Component: Docs.LineChartDocs },
+  { name: 'LineChart', path: '/line-chart', Component: Docs.LineChartDocs },
   {
-    name: "MarkerLineChart",
-    path: "/marker-line-chart",
-    Component: Docs.MarkerLineChartDocs
+    name: 'MarkerLineChart',
+    path: '/marker-line-chart',
+    Component: Docs.MarkerLineChartDocs,
   },
   {
-    name: "RangeBarChart",
-    path: "/range-bar-chart",
-    Component: Docs.RangeBarChartDocs
+    name: 'RangeBarChart',
+    path: '/range-bar-chart',
+    Component: Docs.RangeBarChartDocs,
   },
   {
-    name: "ScatterPlot",
-    path: "/scatter-plot",
-    Component: Docs.ScatterPlotDocs
-  }
+    name: 'ScatterPlot',
+    path: '/scatter-plot',
+    Component: Docs.ScatterPlotDocs,
+  },
 ];
 
 const standaloneChartComponents = [
-  { name: "PieChart", path: "/pie-chart", Component: Docs.PieChartDocs },
-  { name: "SankeyDiagram", path: "/sankey", Component: Docs.SankeyDiagramDocs },
-  { name: "TreeMap", path: "/tree-map", Component: Docs.TreeMapDocs }
+  { name: 'PieChart', path: '/pie-chart', Component: Docs.PieChartDocs },
+  { name: 'SankeyDiagram', path: '/sankey', Component: Docs.SankeyDiagramDocs },
+  { name: 'TreeMap', path: '/tree-map', Component: Docs.TreeMapDocs },
 ];
 
 const dataMarkComponents = [
-  { name: "Bar", path: "/bar", Component: Docs.BarDocs },
-  { name: "RangeRect", path: "/range-rect", Component: Docs.RangeRectDocs },
-  { name: "XLine", path: "/x-line", Component: Docs.XLineDocs },
-  { name: "YLine", path: "/y-line", Component: Docs.YLineDocs }
+  { name: 'Bar', path: '/bar', Component: Docs.BarDocs },
+  { name: 'RangeRect', path: '/range-rect', Component: Docs.RangeRectDocs },
+  { name: 'XLine', path: '/x-line', Component: Docs.XLineDocs },
+  { name: 'YLine', path: '/y-line', Component: Docs.YLineDocs },
 ];
 
 const axisComponents = [
-  { name: "XAxis", path: "/x-axis", Component: Docs.XAxisDocs },
+  { name: 'XAxis', path: '/x-axis', Component: Docs.XAxisDocs },
   {
-    name: "XAxisLabels",
-    path: "/x-axis-labels",
-    Component: Docs.XAxisLabelsDocs
+    name: 'XAxisLabels',
+    path: '/x-axis-labels',
+    Component: Docs.XAxisLabelsDocs,
   },
-  { name: "XAxisTitle", path: "/x-axis-title", Component: Docs.XAxisTitleDocs },
-  { name: "XGrid", path: "/x-grid", Component: Docs.XGridDocs },
-  { name: "XTicks", path: "/x-ticks", Component: Docs.XTicksDocs },
-  { name: "YAxis", path: "/y-axis", Component: Docs.YAxisDocs },
+  { name: 'XAxisTitle', path: '/x-axis-title', Component: Docs.XAxisTitleDocs },
+  { name: 'XGrid', path: '/x-grid', Component: Docs.XGridDocs },
+  { name: 'XTicks', path: '/x-ticks', Component: Docs.XTicksDocs },
+  { name: 'YAxis', path: '/y-axis', Component: Docs.YAxisDocs },
   {
-    name: "YAxisLabels",
-    path: "/y-axis-labels",
-    Component: Docs.YAxisLabelsDocs
+    name: 'YAxisLabels',
+    path: '/y-axis-labels',
+    Component: Docs.YAxisLabelsDocs,
   },
-  { name: "YAxisTitle", path: "/y-axis-title", Component: Docs.YAxisTitleDocs },
-  { name: "YGrid", path: "/y-grid", Component: Docs.YGridDocs },
-  { name: "YTicks", path: "/y-ticks", Component: Docs.YTicksDocs }
+  { name: 'YAxisTitle', path: '/y-axis-title', Component: Docs.YAxisTitleDocs },
+  { name: 'YGrid', path: '/y-grid', Component: Docs.YGridDocs },
+  { name: 'YTicks', path: '/y-ticks', Component: Docs.YTicksDocs },
 ];
 
 const allComponents = lessons
@@ -118,21 +118,26 @@ const NavLink = ({ label, to }) => {
   return (
     <Route
       path={to}
-      exact={true}
+      exact
       children={({ match }) => (
-        <li className={`example-link ${match ? "active" : ""}`}>
+        <li className={`example-link ${match ? 'active' : ''}`}>
           <Link to={to}>{label}</Link>
         </li>
       )}
     />
   );
 };
 
+NavLink.propTypes = {
+  label: PropTypes.string,
+  to: PropTypes.string,
+};
+
 const Nav = () => {
   return (
     <div
       className="sidebar-nav col-md-2"
-      style={{ backgroundColor: "#2E2F33" }}
+      style={{ backgroundColor: '#2E2F33' }}
     >
       <h3>Lessons</h3>
       <ul className="nav-inverse nav-tabs nav-stacked">
@@ -211,7 +216,7 @@ const Nav = () => {
   );
 };
 
-export const Home = props => (
+export const Home = () => (
   <div className="docs-home">
     <p>
       Reactochart is a library of React components for creating charts and
@@ -222,14 +227,12 @@ export const Home = props => (
   </div>
 );
 
-export const App = props => (
+export const App = () => (
   <Router>
     <div className="row docs-home">
       <Nav />
       <div className="col-md-10">
-        <Route exact path={"/"} component={Home} />
-        <Route exact path={"/playground"} component={Playground} />
-
+        <Route exact path={'/'} component={Home} />
         {allComponents.map((c, i) => (
           <Route path={c.path} component={c.Component} key={i} />
         ))}
@@ -238,7 +241,7 @@ export const App = props => (
   </Router>
 );
 
-import * as Reactochart from "../../src";
+import * as Reactochart from '../../src';
 const {
   XYPlot,
   XAxis,
@@ -249,7 +252,7 @@ const {
   BarChart,
   MarkerLineChart,
   ColorHeatmap,
-  AreaHeatmap
+  AreaHeatmap,
 } = Reactochart;
 
 class MultipleXYExample extends React.Component {
@@ -270,7 +273,7 @@ class MultipleXYExample extends React.Component {
             y={d => Math.sin(d * 3) * 0.7 + 1.2}
             yEnd={d => Math.sin(d * 3) * Math.cos(d * 3) * 0.7 + 1.2}
             barThickness={2}
-            barStyle={{ fill: "#3690c0" }}
+            barStyle={{ fill: '#3690c0' }}
           />
 
           <LineChart
@@ -279,10 +282,10 @@ class MultipleXYExample extends React.Component {
             y={d =>
               Math.pow(
                 Math.abs(Math.sin(d * 5)),
-                Math.abs(Math.sin(d * 0.25))
+                Math.abs(Math.sin(d * 0.25)),
               ) * 1.8
             }
-            lineStyle={{ stroke: "#02818a", strokeWidth: 3 }}
+            lineStyle={{ stroke: '#02818a', strokeWidth: 3 }}
           />
 
           <ScatterPlot
@@ -297,39 +300,47 @@ class MultipleXYExample extends React.Component {
             x={d => d}
             y={d => -Math.abs(Math.sin(d * 4) * Math.cos(d * 3))}
             barThickness={3}
-            barStyle={{ fill: "#67a9cf" }}
+            barStyle={{ fill: '#67a9cf' }}
           />
 
           <MarkerLineChart
             data={_.range(0, 1.5, 0.1)}
             x={d => d}
             y={d => Math.cos(d)}
-            lineStyle={{ stroke: "#ec7014", strokeWidth: 3 }}
+            lineStyle={{ stroke: '#ec7014', strokeWidth: 3 }}
           />
 
           <ColorHeatmap
             data={_.flatten(
-              _.range(-2, 0, 0.1).map(i => _.range(-2, 0, 0.1).map(j => [i, j]))
+              _.range(-2, 0, 0.1).map(i =>
+                _.range(-2, 0, 0.1).map(j => [i, j]),
+              ),
             )}
             value={([i, j]) => Math.sin(i * j * 5)}
+            /* eslint-disable */
             x={([i, j]) => i}
             xEnd={([i, j]) => i + 0.1}
             y={([i, j]) => j}
             yEnd={([i, j]) => j + 0.1}
-            colors={["#d0d1e6", "#016450"]}
-            interpolator={"lab"}
+            /* eslint-enable */
+            colors={['#d0d1e6', '#016450']}
+            interpolator={'lab'}
           />
 
           <AreaHeatmap
             data={_.flatten(
-              _.range(0, 2, 0.1).map(i => _.range(-2, -1, 0.1).map(j => [i, j]))
+              _.range(0, 2, 0.1).map(i =>
+                _.range(-2, -1, 0.1).map(j => [i, j]),
+              ),
             )}
             area={([i, j]) => -Math.sin(i * j * 5)}
+            /* eslint-disable no-unused-vars */
             x={([i, j]) => i}
             xEnd={([i, j]) => i + 0.1}
             y={([i, j]) => j}
             yEnd={([i, j]) => j + 0.1}
-            rectStyle={{ fill: "#016450" }}
+            /* eslint-enable no-unused-vars */
+            rectStyle={{ fill: '#016450' }}
           />
         </XYPlot>
       </div>