From 494ea07e13b7ce938e171358f4cc0962b407cc89 Mon Sep 17 00:00:00 2001 From: Peter Murphy Date: Fri, 4 Sep 2015 07:07:22 -0700 Subject: [PATCH] Linting fixes Copyright messages --- .eslintrc | 7 +- .npmignore | 1 - LICENSE | 7 +- README.md | 13 +- docs/areachart.md | 51 ------- docs/barchart.md | 26 ---- docs/baseline.md | 32 ----- docs/brush.md | 8 -- docs/chartcontainer.md | 17 --- docs/chartrow.md | 9 -- docs/charts.md | 12 -- docs/eventchart.md | 9 -- docs/eventrect.md | 8 -- docs/labelaxis.md | 13 -- docs/legend.md | 12 -- docs/linechart.md | 20 --- docs/pointindicator.md | 12 -- docs/resizable.md | 10 -- docs/scatterchart.md | 20 --- docs/timeaxis.md | 8 -- docs/tracker.md | 8 -- docs/valueaxis.md | 14 -- docs/yaxis.md | 66 --------- examples/modules/app.jsx | 13 +- examples/modules/areachart.jsx | 10 ++ examples/modules/barchart.jsx | 10 ++ examples/modules/ddos.jsx | 10 ++ examples/modules/history.jsx | 10 ++ examples/modules/intro.jsx | 10 ++ examples/modules/legend.jsx | 10 ++ examples/modules/linechart.jsx | 10 ++ examples/modules/main.jsx | 10 ++ examples/modules/stacked.jsx | 10 ++ examples/modules/table.jsx | 10 ++ examples/modules/weather.jsx | 10 ++ examples/styles/app.css | 48 ++----- lib/areachart.js | 96 ++++++------- lib/barchart.js | 87 ++++------- lib/baseline.css | 31 +--- lib/baseline.js | 43 ++---- lib/brush.js | 52 +++---- lib/chartcontainer.css | 31 +--- lib/chartcontainer.js | 127 +++++++--------- lib/chartrow.js | 206 +++++++++++++------------- lib/charts.js | 52 +++---- lib/eventchart.css | 31 +--- lib/eventchart.js | 32 +---- lib/eventhandler.js | 114 +++++++-------- lib/labelaxis.js | 44 +++--- lib/legend.js | 53 +++---- lib/linechart.js | 54 +++---- lib/resizable.js | 39 ++--- lib/scatterchart.css | 31 +--- lib/scatterchart.js | 56 +++----- lib/table.js | 72 ++++------ lib/timeaxis.css | 32 +---- lib/timeaxis.js | 34 ++--- lib/timerangemarker.js | 45 ++---- lib/tracker.js | 31 +--- lib/valueaxis.js | 48 +++---- lib/yaxis.css | 31 +--- lib/yaxis.js | 63 +++----- package.json | 4 +- src/areachart.jsx | 148 +++++++++---------- src/barchart.jsx | 106 +++++++------- src/baseline.css | 31 +--- src/baseline.jsx | 52 +++---- src/brush.jsx | 92 +++++------- src/chartcontainer.css | 31 +--- src/chartcontainer.jsx | 156 ++++++++++---------- src/chartrow.jsx | 256 ++++++++++++++++++--------------- src/charts.jsx | 51 +++---- src/eventchart.css | 31 +--- src/eventchart.jsx | 41 ++---- src/eventhandler.jsx | 143 +++++++++--------- src/labelaxis.jsx | 44 ++---- src/legend.jsx | 59 +++----- src/linechart.jsx | 74 ++++------ src/resizable.jsx | 52 +++---- src/scatterchart.css | 31 +--- src/scatterchart.jsx | 97 ++++++------- src/table.jsx | 77 +++++----- src/timeaxis.css | 32 +---- src/timeaxis.jsx | 52 +++---- src/timerangemarker.jsx | 41 ++---- src/tracker.jsx | 37 ++--- src/valueaxis.jsx | 47 +++--- src/yaxis.css | 31 +--- src/yaxis.jsx | 106 ++++++-------- webpack.examples.config.js | 52 ++++--- 90 files changed, 1522 insertions(+), 2541 deletions(-) delete mode 100644 docs/areachart.md delete mode 100644 docs/barchart.md delete mode 100644 docs/baseline.md delete mode 100644 docs/brush.md delete mode 100644 docs/chartcontainer.md delete mode 100644 docs/chartrow.md delete mode 100644 docs/charts.md delete mode 100644 docs/eventchart.md delete mode 100644 docs/eventrect.md delete mode 100644 docs/labelaxis.md delete mode 100644 docs/legend.md delete mode 100644 docs/linechart.md delete mode 100644 docs/pointindicator.md delete mode 100644 docs/resizable.md delete mode 100644 docs/scatterchart.md delete mode 100644 docs/timeaxis.md delete mode 100644 docs/tracker.md delete mode 100644 docs/valueaxis.md delete mode 100644 docs/yaxis.md diff --git a/.eslintrc b/.eslintrc index 67467cf7..ad6183d8 100644 --- a/.eslintrc +++ b/.eslintrc @@ -28,10 +28,9 @@ "no-dupe-keys": 2, "no-duplicate-case": 2, "no-empty": 2, - "no-empty-class": 2, + "no-empty-character-class": 2, "no-ex-assign": 2, "no-extra-boolean-cast": 2, - "no-extra-parens": 0, "no-extra-semi": 2, "no-func-assign": 2, "no-inner-declarations": [ @@ -181,7 +180,7 @@ "no-ternary": 0, "no-trailing-spaces": 2, "no-underscore-dangle": 0, - "no-wrap-func": 2, + "no-extra-parens": 0, "one-var": [ 2, "never" @@ -242,7 +241,7 @@ "nonwords": false } ], - "spaced-line-comment": [ + "spaced-comment": [ 2, "always" ], diff --git a/.npmignore b/.npmignore index 5c632268..ae636f20 100644 --- a/.npmignore +++ b/.npmignore @@ -1,5 +1,4 @@ lib/ -!build/npm/lib examples/ screenshots/ docs/ diff --git a/LICENSE b/LICENSE index 0bd8287d..5abd9280 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,7 @@ -"ESnet React Charts, Copyright (c) 2014, The Regents of the University of California, -through Lawrence Berkeley National Laboratory (subject to receipt of any -required approvals from the U.S. Dept. of Energy). All rights reserved." +"ESnet React Timeseries Charts, Copyright (c) 2015, The Regents of the +University of California, through Lawrence Berkeley National Laboratory +(subject to receipt of any required approvals from the U.S. Dept. of Energy). +All rights reserved." Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: diff --git a/README.md b/README.md index d5c7dda3..d640d9e5 100644 --- a/README.md +++ b/README.md @@ -2,18 +2,21 @@ This library contains a set of modular charting components used for building flexible interactive charts. It was built for React from the ground up, specifically to visualize timeseries data and network traffic data in particular. Low level elements are constructed using d3, while higher level composability is provided by React. Charts can be stacked as rows, overlayed on top of each other, or any combination, all in a highly declarative manner. +The library is used thoughout the public facing [ESnet Portal](http://my.es.net). + Current features of the library include: * Declarative layout of charts using JSX * Interactivity, including pan and zoom * Add new chart types or overlays * Multiple axis, multiple rows - * Line, area and scatter charts + * Line, area, scatter charts * Brushing * Timeseries tables * Legends + * Baseline and TimeRange markers -Please see the examples for a feel for the library, or read on to get started. +Please browse the examples for a feel for the library, or read on to get started. Getting started --------------- @@ -26,7 +29,7 @@ Once installed, you can import the necessary components from the library: import { Charts, ChartContainer, ChartRow, YAxis, LineChart } from "react-timeseries-charts"; -Then we construct our chart in the `render()` function of our component. The code to generate the above chart, specified in JSX, looks like this: +Then we construct our chart in the `render()` function of our component. For a simple example we create a chart with two line charts on it, specified in JSX: @@ -43,14 +46,14 @@ At the outer layer, we add a `ChartContainer` which contains our timerange for t For the next layer of the layout we make a `ChartRow`. We can have multiple charts stacked on top of each other by using more than one row. In this case we just have one row. Each row has a specific height in the layout, so we specify that as 200px high here. -Next up we want to put something in our row. Rows contain a central flexible sized area in which charts can be added. This area is surrounded in the JSX by the `` tag. Each chart in this area is overlaid on top of each other. In this case we are adding two `LineChart`s, one for each of our series and so they will be drawn on top of each other. For scaling each chart will reference an axis that will define the scale and display the y-scale. +Next up we want to put something in our row. Rows contain a central flexible sized area in which charts can be added. This area is surrounded in the JSX by the `` tag. Each chart in this area is overlaid on top of each other. In this case we are adding two `LineChart`s, one for each of our series. As a result they will be drawn on top of each other. For scaling each chart will reference an axis that will define the scale as well as display that scale visually as the y-axis. Finally, we specify the axes that the charts reference. These go either before or after the `Charts` group, depending on if you want the axis before (to the left) or after the charts (to the right). You can specify any number of axes on either side. For each `YAxis` you specify the `id` so that a chart can reference it, the `label` you want displayed alongside the axis and, importantly, the scale using `min` and `max`. You can also specify the `width`, the `type` of the axis (`linear`, `log`, etc) and the `format`. Data format ----------- -This charting library is built on the ESnet timeseries library called Pond. Pond was essentially created to provide a common representation for things like timeseries, timeranges, events and other structures. For the purpose of using the charting library, you need to create a TimeSeries() object as your series, which will be rendered by the chart code. For example: +This charting library is built on the ESnet timeseries library called [Pond](http://software.es.net/pond). Pond was created to provide a common representation for things like timeseries, timeranges, events and other structures. For the purpose of using the charting library, you need to create a TimeSeries() object as your series, which will be rendered by the chart code. For example: import {TimeSeries, TimeRange} from "pond"; diff --git a/docs/areachart.md b/docs/areachart.md deleted file mode 100644 index ee7b8615..00000000 --- a/docs/areachart.md +++ /dev/null @@ -1,51 +0,0 @@ -`areachart` (component) -======================= - -Draws an area chart - -Props ------ - -### `interpolate` - -The d3 interpolation method - -type: `string` -defaultValue: `"step-after"` - - -### `series` - -The series list. This is a 2 element array, with the first element -build stacked up and the second element being stacked down. Each -element is itself an array of TimeSeries. - -type: `arrayOf[object Object]` - - -### `style` - -The style of the area chart, with format: - - "style": { - up: ["#448FDD", "#75ACE6", "#A9CBEF", ...], - down: ["#FD8D0D", "#FDA949", "#FEC686", ...] - } - - Where each color in the array corresponds to each area stacked - either up or down. - -type: `shape[object Object]` -defaultValue: `{ - up: ["#448FDD", "#75ACE6", "#A9CBEF"], - down: ["#FD8D0D", "#FDA949", "#FEC686"] -}` - - -### `transition` - -Time in ms to transition the chart when the axis changes scale - -type: `number` -defaultValue: `0` - diff --git a/docs/barchart.md b/docs/barchart.md deleted file mode 100644 index a589d8b5..00000000 --- a/docs/barchart.md +++ /dev/null @@ -1,26 +0,0 @@ -`barchart` (component) -====================== - -Renders a barchart. This BarChart implementation is a little different -in that it will render onto a time axis, rather than rendering to -specific values. As a result, an Aug 2014 bar will render between the -Aug 2014 tick mark and the Sept 2014 tickmark. - -Props ------ - -### `offset` - -The position of the bar is then offset by this value. - -type: `number` -defaultValue: `0` - - -### `spacing` - -The width of each bar is the width determined by the time range - spacing x 2 - -type: `number` -defaultValue: `1` - diff --git a/docs/baseline.md b/docs/baseline.md deleted file mode 100644 index 1a860719..00000000 --- a/docs/baseline.md +++ /dev/null @@ -1,32 +0,0 @@ -`baseline` (component) -====================== - -Draws a horizontal line across the chart - -Props: - -- value The positon of the horizontal line, which is transformed to - a pixel position using the yscale -- label A label to display along side the line -- position The position of the label, either left or right - -- yscale The scale of the y axis to transform the value - (passed in automatically) - -Props ------ - -### `label` - -defaultValue: `""` - - -### `position` - -defaultValue: `"left"` - - -### `value` - -defaultValue: `0` - diff --git a/docs/brush.md b/docs/brush.md deleted file mode 100644 index 7e6c55e5..00000000 --- a/docs/brush.md +++ /dev/null @@ -1,8 +0,0 @@ -`brush` (component) -=================== - - - -Props ------ - diff --git a/docs/chartcontainer.md b/docs/chartcontainer.md deleted file mode 100644 index 8f0ed76c..00000000 --- a/docs/chartcontainer.md +++ /dev/null @@ -1,17 +0,0 @@ -`chartcontainer` (component) -============================ - - - -Props ------ - -### `children` - -type: `union(arrayOf|element)` - - -### `transition` - -defaultValue: `0` - diff --git a/docs/chartrow.md b/docs/chartrow.md deleted file mode 100644 index 616a714f..00000000 --- a/docs/chartrow.md +++ /dev/null @@ -1,9 +0,0 @@ -`chartrow` (component) -====================== - -A ChartRow has a set of Y axes and multiple charts which are overlayed on each other -in a central canvas. - -Props ------ - diff --git a/docs/charts.md b/docs/charts.md deleted file mode 100644 index 845589f4..00000000 --- a/docs/charts.md +++ /dev/null @@ -1,12 +0,0 @@ -`charts` (component) -==================== - -A Charts component is a grouping of charts which will be composited on top of -each other. It does no actual rendering itself, but instead is used for organizing -ChartRow children. There must be one, and only one, Charts grouping within a ChartRow. -All children of a ChartRow, for which there must be at least one, are considered a -chart. They should return an SVG containing their render. - -Props ------ - diff --git a/docs/eventchart.md b/docs/eventchart.md deleted file mode 100644 index 7b665140..00000000 --- a/docs/eventchart.md +++ /dev/null @@ -1,9 +0,0 @@ -`eventchart` (component) -======================== - -Renders an event view that shows the supplied set of -events along a time axis. - -Props ------ - diff --git a/docs/eventrect.md b/docs/eventrect.md deleted file mode 100644 index a665bf15..00000000 --- a/docs/eventrect.md +++ /dev/null @@ -1,8 +0,0 @@ -`eventrect` (component) -======================= - - - -Props ------ - diff --git a/docs/labelaxis.md b/docs/labelaxis.md deleted file mode 100644 index acab05da..00000000 --- a/docs/labelaxis.md +++ /dev/null @@ -1,13 +0,0 @@ -`labelaxis` (component) -======================= - -Renders a 'axis' that display a label for a data channel and a max and average value - +----------------+-----+------- ... - | Traffic | 120 | - | Max 100 Gbps | | Chart ... - | Avg 26 Gbps | 0 | - +----------------+-----+------- ... - -Props ------ - diff --git a/docs/legend.md b/docs/legend.md deleted file mode 100644 index 7674d999..00000000 --- a/docs/legend.md +++ /dev/null @@ -1,12 +0,0 @@ -`legend` (component) -==================== - - - -Props ------ - -### `style` - -defaultValue: `"swatch"` - diff --git a/docs/linechart.md b/docs/linechart.md deleted file mode 100644 index a8fb3762..00000000 --- a/docs/linechart.md +++ /dev/null @@ -1,20 +0,0 @@ -`linechart` (component) -======================= - - - -Props ------ - -### `interpolate` - -defaultValue: `"basis"` - - -### `style` - -defaultValue: `{ - "color": "#9DA3FF", - "width": 1 -}` - diff --git a/docs/pointindicator.md b/docs/pointindicator.md deleted file mode 100644 index 3edf1c7b..00000000 --- a/docs/pointindicator.md +++ /dev/null @@ -1,12 +0,0 @@ -`pointindicator` (component) -============================ - - - -Props ------ - -### `pointRadius` - -defaultValue: `1.0` - diff --git a/docs/resizable.md b/docs/resizable.md deleted file mode 100644 index 2f3c43d3..00000000 --- a/docs/resizable.md +++ /dev/null @@ -1,10 +0,0 @@ -`resizable` (component) -======================= - -This takes a single child and inserts a prop 'width' on it that is the -current width of the this container. This is handy if you want to surround -a chart or other svg diagram and have this drive the chart width. - -Props ------ - diff --git a/docs/scatterchart.md b/docs/scatterchart.md deleted file mode 100644 index 8aebf88e..00000000 --- a/docs/scatterchart.md +++ /dev/null @@ -1,20 +0,0 @@ -`scatterchart` (component) -========================== - - - -Props ------ - -### `radius` - -defaultValue: `2.0` - - -### `style` - -defaultValue: `{ - color: "steelblue", - opacity: 1 -}` - diff --git a/docs/timeaxis.md b/docs/timeaxis.md deleted file mode 100644 index 270af2cf..00000000 --- a/docs/timeaxis.md +++ /dev/null @@ -1,8 +0,0 @@ -`timeaxis` (component) -====================== - -Renders a horizontal time axis - -Props ------ - diff --git a/docs/tracker.md b/docs/tracker.md deleted file mode 100644 index e0217308..00000000 --- a/docs/tracker.md +++ /dev/null @@ -1,8 +0,0 @@ -`tracker` (component) -===================== - - - -Props ------ - diff --git a/docs/valueaxis.md b/docs/valueaxis.md deleted file mode 100644 index 1bf8caa6..00000000 --- a/docs/valueaxis.md +++ /dev/null @@ -1,14 +0,0 @@ -`valueaxis` (component) -======================= - -Renders a 'axis' that display a label for a current tracker value - - ----+----------------+ - | 56.2G | - | bps | - | | - ----+----------------+ - -Props ------ - diff --git a/docs/yaxis.md b/docs/yaxis.md deleted file mode 100644 index 924d6ee8..00000000 --- a/docs/yaxis.md +++ /dev/null @@ -1,66 +0,0 @@ -`yaxis` (component) -=================== - -Renders a horizontal time axis - -Props: - * align - if the axis should be draw as if it is on the left or right (defaults to left) - * scale - a d3 scale that defines the domain and range of the axis - -Props ------ - -### `absolute` - -defaultValue: `false` - - -### `align` - -type: `string` -defaultValue: `"left"` - - -### `format` - -defaultValue: `".2s"` - - -### `id` - -defaultValue: `"yaxis"` - - -### `labelOffset` - -defaultValue: `0` - - -### `max` - -defaultValue: `1` - - -### `min` - -defaultValue: `0` - - -### `style` - -defaultValue: `{ - labelColor: "#8B7E7E", // Default label color - labelWeight: 100, - labelSize: 12 -}` - - -### `transition` - -defaultValue: `0` - - -### `type` - -defaultValue: `"linear"` - diff --git a/examples/modules/app.jsx b/examples/modules/app.jsx index 00b198f4..92098cab 100644 --- a/examples/modules/app.jsx +++ b/examples/modules/app.jsx @@ -1,9 +1,16 @@ -"use strict"; +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ var React = require("react/addons"); var Router = require("react-router"); -var {RouteHandler, - Link} = Router; +var {RouteHandler, Link} = Router; require("../styles/app.css"); var logo = document.createElement('img'); diff --git a/examples/modules/areachart.jsx b/examples/modules/areachart.jsx index f7c71305..64471692 100644 --- a/examples/modules/areachart.jsx +++ b/examples/modules/areachart.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Markdown from "react-markdown-el"; diff --git a/examples/modules/barchart.jsx b/examples/modules/barchart.jsx index f55b03d1..4a7a4057 100644 --- a/examples/modules/barchart.jsx +++ b/examples/modules/barchart.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Moment from "moment" diff --git a/examples/modules/ddos.jsx b/examples/modules/ddos.jsx index 4c02190c..8ed7cdce 100644 --- a/examples/modules/ddos.jsx +++ b/examples/modules/ddos.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import moment from "moment"; diff --git a/examples/modules/history.jsx b/examples/modules/history.jsx index 8c01edda..03ca8135 100644 --- a/examples/modules/history.jsx +++ b/examples/modules/history.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; diff --git a/examples/modules/intro.jsx b/examples/modules/intro.jsx index 8f387da7..5ca06cc0 100644 --- a/examples/modules/intro.jsx +++ b/examples/modules/intro.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import Markdown from "react-markdown-el"; diff --git a/examples/modules/legend.jsx b/examples/modules/legend.jsx index 33f66da2..a07a35c3 100644 --- a/examples/modules/legend.jsx +++ b/examples/modules/legend.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Markdown from "react-markdown-el"; diff --git a/examples/modules/linechart.jsx b/examples/modules/linechart.jsx index 1213296f..fd69e890 100644 --- a/examples/modules/linechart.jsx +++ b/examples/modules/linechart.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Markdown from "react-markdown-el"; diff --git a/examples/modules/main.jsx b/examples/modules/main.jsx index 1090367d..0a234c44 100644 --- a/examples/modules/main.jsx +++ b/examples/modules/main.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import Router from "react-router"; import {TimeSeries} from "@esnet/pond"; diff --git a/examples/modules/stacked.jsx b/examples/modules/stacked.jsx index c66525e2..3d14097b 100644 --- a/examples/modules/stacked.jsx +++ b/examples/modules/stacked.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Markdown from "react-markdown-el"; diff --git a/examples/modules/table.jsx b/examples/modules/table.jsx index dbf68228..9be39748 100644 --- a/examples/modules/table.jsx +++ b/examples/modules/table.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import d3 from "d3"; diff --git a/examples/modules/weather.jsx b/examples/modules/weather.jsx index a0f30b3c..e536e380 100644 --- a/examples/modules/weather.jsx +++ b/examples/modules/weather.jsx @@ -1,3 +1,13 @@ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ + import React from "react/addons"; import _ from "underscore"; import Moment from "moment"; diff --git a/examples/styles/app.css b/examples/styles/app.css index aecbb1d8..0d1caaee 100644 --- a/examples/styles/app.css +++ b/examples/styles/app.css @@ -1,42 +1,12 @@ - -/* -.horizontal-legend .legend-swatch.oscars{ - background-color: #2064AC; -} - -.horizontal-legend .legend-swatch.total{ - background-color: #448FDD; -} - -.horizontal-legend .legend-line.usa{ - background-color: #ff7f0e; -} - -.horizontal-legend .legend-line.aust{ - background-color: #2ca02c; -} - -.horizontal-legend .legend-line.aud { - background-color: #2ca02c; -} - -.horizontal-legend .legend-line.euro { - background-color: #9467bd; -} - - -.horizontal-legend .legend-dot.site{ - background-color: #FAA; - width: 12px; - height: 12px; - margin-top: 4px; - border-radius: 6px; -} - -.horizontal-legend .legend-dot.router{ - background-color: #CCF; -} -*/ +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. + * + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. + */ .chartcontainer.chartrow { background: none; diff --git a/lib/areachart.js b/lib/areachart.js index ee6655ff..6b49203b 100644 --- a/lib/areachart.js +++ b/lib/areachart.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -58,24 +41,30 @@ function scaleAsString(scale) { * direction, layer, we have layer.values = [points] where each point is * in the format {data: .., value, ..} */ -function getLayers(series) { +function getLayers(seriesList) { return { - "upLayers": series[0].map(function (series) { + upLayers: seriesList[0].map(function (series) { var points = []; for (var i = 0; i < series.size(); i++) { var point = series.at(i); - points.push({ "date": point.timestamp(), "value": point.get() }); + points.push({ + date: point.timestamp(), + value: point.get() + }); } - return { "values": points }; + return { values: points }; }), - "downLayers": series[1].map(function (series) { + downLayers: seriesList[1].map(function (series) { var points = []; for (var i = 0; i < series.size(); i++) { var point = series.at(i); - points.push({ "date": point.timestamp(), "value": point.get() }); + points.push({ + date: point.timestamp(), + value: point.get() + }); } - return { "values": points }; + return { values: points }; }) }; } @@ -108,17 +97,17 @@ function getAreaGenerators(interpolate, timeScale, yScale) { return yScale(d.y0 - d.value); }).interpolate(interpolate); - return { "upArea": upArea, "downArea": downArea }; + return { upArea: upArea, downArea: downArea }; } /** * Our D3 stack. When this is evoked with data (an array of layers) it builds up - * the stack of graphs on top of each other (i.e propogates a baseline y position - * up through the stack). + * the stack of graphs on top of each other (i.e propogates a baseline y + * position up through the stack). */ function getAreaStackers() { return { - "stackUp": _d32["default"].layout.stack().values(function (d) { + stackUp: _d32["default"].layout.stack().values(function (d) { return d.values; }).x(function (d) { return d.date; @@ -126,7 +115,7 @@ function getAreaStackers() { return d.value; }), - "stackDown": _d32["default"].layout.stack().values(function (d) { + stackDown: _d32["default"].layout.stack().values(function (d) { return d.values; }).x(function (d) { return d.date; @@ -179,8 +168,8 @@ exports["default"] = _reactAddons2["default"].createClass({ * either up or down. */ style: _reactAddons2["default"].PropTypes.shape({ - "up": _reactAddons2["default"].PropTypes.arrayOf(_reactAddons2["default"].PropTypes.string), - "down": _reactAddons2["default"].PropTypes.arrayOf(_reactAddons2["default"].PropTypes.string) + up: _reactAddons2["default"].PropTypes.arrayOf(_reactAddons2["default"].PropTypes.string), + down: _reactAddons2["default"].PropTypes.arrayOf(_reactAddons2["default"].PropTypes.string) }), /** @@ -193,9 +182,9 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "transition": 0, - "interpolate": "step-after", - "style": { + transition: 0, + interpolate: "step-after", + style: { up: ["#448FDD", "#75ACE6", "#A9CBEF"], down: ["#FD8D0D", "#FDA949", "#FEC686"] } @@ -216,11 +205,6 @@ exports["default"] = _reactAddons2["default"].createClass({ return null; } - var style = { - "fill": this.props.style.color, - "stroke": "none" - }; - _d32["default"].select(this.getDOMNode()).selectAll("*").remove(); var croppedSeries = getCroppedSeries(timeScale, this.props.width, series); @@ -240,20 +224,20 @@ exports["default"] = _reactAddons2["default"].createClass({ var stackUp = _getAreaStackers.stackUp; var stackDown = _getAreaStackers.stackDown; - //Stack our layers + // Stack our layers stackUp(upLayers); if (downLayers.length) { stackDown(downLayers); } - //Cursor + // Cursor var cursor = isPanning ? "-webkit-grabbing" : "default"; // // Stacked area drawing up // - //Make a group 'areachart-up-group' for each stacked area + // Make a group 'areachart-up-group' for each stacked area var upChart = _d32["default"].select(this.getDOMNode()).selectAll(".areachart-up-group").data(upLayers).enter().append("g").attr("id", function () { return _underscore2["default"].uniqueId("areachart-up-"); }); @@ -269,7 +253,7 @@ exports["default"] = _reactAddons2["default"].createClass({ // Stacked area drawing down // - //Make a group 'areachart-down-group' for each stacked area + // Make a group 'areachart-down-group' for each stacked area var downChart = _d32["default"].select(this.getDOMNode()).selectAll(".areachart-down-group").data(downLayers).enter().append("g").attr("id", function () { return _underscore2["default"].uniqueId("areachart-down-"); }); @@ -283,7 +267,7 @@ exports["default"] = _reactAddons2["default"].createClass({ }, updateAreaChart: function updateAreaChart(series, timeScale, yScale, interpolate) { - var croppedSeries = getCroppedSeries(timeScale, width, series); + var croppedSeries = getCroppedSeries(timeScale, this.props.width, series); var _getAreaGenerators2 = getAreaGenerators(interpolate, timeScale, yScale); @@ -300,7 +284,7 @@ exports["default"] = _reactAddons2["default"].createClass({ var stackUp = _getAreaStackers2.stackUp; var stackDown = _getAreaStackers2.stackDown; - //Stack our layers + // Stack our layers stackUp(upLayers); if (downLayers.length) { stackDown(downLayers); @@ -329,7 +313,7 @@ exports["default"] = _reactAddons2["default"].createClass({ var isPanning = nextProps.isPanning; - //What changed + // What changed var timeScaleChanged = scaleAsString(this.props.timeScale) !== scaleAsString(timeScale); var yAxisScaleChanged = scaleAsString(this.props.yScale) !== scaleAsString(yScale); var interpolateChanged = this.props.interpolate !== interpolate; @@ -351,9 +335,9 @@ exports["default"] = _reactAddons2["default"].createClass({ } // - // Currently if the series changes we completely rerender it. If the y axis scale - // changes then we just update the existing paths using a transition so that we - // can get smooth axis transitions. + // Currently if the series changes we completely rerender it. If the + // y axis scale changes then we just update the existing paths using a + // transition so that we can get smooth axis transitions. // if (seriesChanged || timeScaleChanged || interpolateChanged || isPanningChanged) { diff --git a/lib/barchart.js b/lib/barchart.js index 2dd87244..30cad62f 100644 --- a/lib/barchart.js +++ b/lib/barchart.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -41,31 +24,21 @@ var _reactAddons = require("react/addons"); var _reactAddons2 = _interopRequireDefault(_reactAddons); -var _d3 = require("d3"); - -var _d32 = _interopRequireDefault(_d3); - -var _underscore = require("underscore"); - -var _underscore2 = _interopRequireDefault(_underscore); - var _esnetPond = require("@esnet/pond"); /** * Renders a barchart based on IndexedEvents within a TimeSeries. * - * This BarChart implementation is a little different in that it will render onto a time axis, - * rather than rendering to specific values. As a result, an Aug 2014 bar will render between the - * Aug 2014 tick mark and the Sept 2014 tickmark. + * This BarChart implementation is a little different in that it will render + * onto a time axis, rather than rendering to specific values. As a result, + * an Aug 2014 bar will render between the Aug 2014 tick mark and the Sept 2014 + * tickmark. */ exports["default"] = _reactAddons2["default"].createClass({ displayName: "barchart", propTypes: { series: _reactAddons2["default"].PropTypes.instanceOf(_esnetPond.TimeSeries).isRequired, - clipPathURL: _reactAddons2["default"].PropTypes.string.isRequired, - timeScale: _reactAddons2["default"].PropTypes.object.isRequired, - yScale: _reactAddons2["default"].PropTypes.object.isRequired, spacing: _reactAddons2["default"].PropTypes.number, offset: _reactAddons2["default"].PropTypes.number, columns: _reactAddons2["default"].PropTypes.array, @@ -77,7 +50,7 @@ exports["default"] = _reactAddons2["default"].createClass({ return { spacing: 1, offset: 0, - style: { "value": { fill: "#619F3A" } } + style: { value: { fill: "#619F3A" } } }; }, @@ -98,15 +71,18 @@ exports["default"] = _reactAddons2["default"].createClass({ }, /** - * Handle click will call the onSelectionChange callback if one is provided as a prop. - * It will be called with the key, which is $series.name-$index-$column, the value of - * that event, along with the context. The context provides the series (a TimeSeries), the - * column (a string) and the index (an Index). + * Handle click will call the onSelectionChange callback if one is provided + * as a prop. It will be called with the key, which is + * $series.name-$index-$column, the value of that event, along with the + * context. The context provides the series (a TimeSeries), the column (a + * string) and the index (an Index). */ handleClick: function handleClick(e, key, value, series, column, index) { e.stopPropagation(); var context = { series: series, column: column, index: index }; - this.props.onSelectionChange && this.props.onSelectionChange(key, value, context); + if (this.props.onSelectionChange) { + this.props.onSelectionChange(key, value, context); + } }, renderBars: function renderBars() { @@ -126,10 +102,10 @@ exports["default"] = _reactAddons2["default"].createClass({ try { for (var _iterator = _getIterator(series.events()), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) { - event = _step.value; + var _event = _step.value; - var begin = event.begin(); - var end = event.end(); + var begin = _event.begin(); + var end = _event.end(); var beginPos = timeScale(begin) + spacing; var endPos = timeScale(end) - spacing; @@ -161,9 +137,9 @@ exports["default"] = _reactAddons2["default"].createClass({ var _loop = function () { var column = _step2.value; - var index = event.index(); + var index = _event.index(); var key = "" + series.name() + "-" + index + "-" + column; - var value = event.get(column); + var value = _event.get(column); var height = yScale(0) - yScale(value); if (height < 1) { @@ -185,16 +161,13 @@ exports["default"] = _reactAddons2["default"].createClass({ } else { barStyle = { fill: "rgb(78, 144, 199)" }; } + } else if (_this.props.style && _this.props.style[column].normal) { + barStyle = _this.props.style[column].normal; } else { - if (_this.props.style && _this.props.style[column].normal) { - barStyle = _this.props.style[column].normal; - } else { - barStyle = { fill: "steelblue" }; - } + barStyle = { fill: "steelblue" }; } rects.push(_reactAddons2["default"].createElement("rect", { key: key, - "data-tip": key === _this.state.hover ? "React-tooltip" : "", x: x, y: y, width: width, height: height, pointerEvents: "none", style: barStyle, @@ -202,11 +175,11 @@ exports["default"] = _reactAddons2["default"].createClass({ onClick: function (e) { _this.handleClick(e, key, value, series, column, index); }, - onMouseLeave: function (e) { + onMouseLeave: function () { _this.setState({ hover: null }); }, onMouseMove: function (e) { - return _this.handleMouseMove(e, key); + _this.handleMouseMove(e, key); } })); ypos -= height; diff --git a/lib/baseline.css b/lib/baseline.css index 6cbaedf9..07d90072 100644 --- a/lib/baseline.css +++ b/lib/baseline.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .baseline { diff --git a/lib/baseline.js b/lib/baseline.js index 9200ec30..881966b5 100644 --- a/lib/baseline.js +++ b/lib/baseline.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014-2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -59,9 +42,9 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "value": 0, - "label": "", - "position": "left" //or right + value: 0, + label: "", + position: "left" }; }, @@ -99,10 +82,12 @@ exports["default"] = _reactAddons2["default"].createClass({ return _reactAddons2["default"].createElement( "g", { className: "baseline", transform: transform }, - _reactAddons2["default"].createElement("polyline", { points: points, style: { "pointerEvents": "none" } }), + _reactAddons2["default"].createElement("polyline", { points: points, style: { pointerEvents: "none" } }), _reactAddons2["default"].createElement( "text", - { className: "baseline-label", x: textPositionX, y: textPositionY, textAnchor: textAnchor }, + { className: "baseline-label", + x: textPositionX, + y: textPositionY, textAnchor: textAnchor }, this.props.label ) ); diff --git a/lib/brush.js b/lib/brush.js index b92093bb..68364fb7 100644 --- a/lib/brush.js +++ b/lib/brush.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -53,7 +36,7 @@ exports["default"] = _reactAddons2["default"].createClass({ getInitialState: function getInitialState() { return { - "d3brush": null + d3brush: null }; }, @@ -65,21 +48,23 @@ exports["default"] = _reactAddons2["default"].createClass({ }, renderBrush: function renderBrush(timeScale, beginTime, endTime) { + var _this = this; + var d3brush = this.state.d3brush; - var self = this; + if (!d3brush) { d3brush = _d32["default"].svg.brush().x(timeScale).on("brush", function () { - self.handleBrushed(d3brush); + _this.handleBrushed(d3brush); }); - this.setState({ "d3brush": d3brush }); + this.setState({ d3brush: d3brush }); d3brush.extent([beginTime, endTime]); } else { var currentExtent = d3brush.extent(); var curBegin = currentExtent[0]; var curEnd = currentExtent[1]; - /* This check is critical to break feedback cycles that will cause the brush - * to get very confused. - */ + + // This check is critical to break feedback cycles that + // will cause the brush to get very confused. if (curBegin.getTime() !== beginTime.getTime() || curEnd.getTime() !== endTime.getTime()) { d3brush.extent([beginTime, endTime]); } else { @@ -100,7 +85,7 @@ exports["default"] = _reactAddons2["default"].createClass({ var beginTime = nextProps.beginTime; var endTime = nextProps.endTime; - if (scaleAsString(this.props.timeScale) != scaleAsString(timeScale) || this.props.beginTime.getTime() != beginTime.getTime() || this.props.endTime.getTime() != endTime.getTime()) { + if (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale) || this.props.beginTime.getTime() !== beginTime.getTime() || this.props.endTime.getTime() !== endTime.getTime()) { this.renderBrush(timeScale, beginTime, endTime); } }, @@ -111,5 +96,6 @@ exports["default"] = _reactAddons2["default"].createClass({ render: function render() { return _reactAddons2["default"].createElement("g", null); - } }); + } +}); module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/chartcontainer.css b/lib/chartcontainer.css index ffe1d7e8..4cad0a39 100644 --- a/lib/chartcontainer.css +++ b/lib/chartcontainer.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .chartcontainer.timeaxis { diff --git a/lib/chartcontainer.js b/lib/chartcontainer.js index 8342f141..9869b843 100644 --- a/lib/chartcontainer.js +++ b/lib/chartcontainer.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -49,15 +32,15 @@ var _underscore = require("underscore"); var _underscore2 = _interopRequireDefault(_underscore); -var _moment = require("moment"); - -var _moment2 = _interopRequireDefault(_moment); - var _reactLibInvariant = require("react/lib/invariant"); var _reactLibInvariant2 = _interopRequireDefault(_reactLibInvariant); -var _esnetPond = require("@esnet/pond"); +var _timeaxis = require("./timeaxis"); + +var _timeaxis2 = _interopRequireDefault(_timeaxis); + +//eslint-disable-line var _chartrow = require("./chartrow"); @@ -67,14 +50,6 @@ var _charts = require("./charts"); var _charts2 = _interopRequireDefault(_charts); -var _timeaxis = require("./timeaxis"); - -var _timeaxis2 = _interopRequireDefault(_timeaxis); - -var _yaxis = require("./yaxis"); - -var _yaxis2 = _interopRequireDefault(_yaxis); - var _brush = require("./brush"); var _brush2 = _interopRequireDefault(_brush); @@ -86,8 +61,8 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "transition": 0, - "enablePanZoom": false }; + transition: 0, + enablePanZoom: false }; }, propTypes: { @@ -100,9 +75,11 @@ exports["default"] = _reactAddons2["default"].createClass({ } }, - //Within the charts library the time range of the x axis is kept as a begin and - //end time (Javascript Date objects). But the interface is Pond based, so - //this callback returns a Pond TimeRange. + /** + * Within the charts library the time range of the x axis is kept as a begin + * and end time (Javascript Date objects). But the interface is Pond based, + * so this callback returns a Pond TimeRange. + */ handleTimeRangeChanged: function handleTimeRangeChanged(timerange) { if (this.props.onTimeRangeChanged) { this.props.onTimeRangeChanged(timerange); @@ -116,13 +93,14 @@ exports["default"] = _reactAddons2["default"].createClass({ var padding = this.props.padding || 0; // - // How much room does the axes of all the charts take up on the right and left. - // The result is an array for left and right axis which contain the min column width - // needed to hold the axes widths at the pos for all rows. + // How much room does the axes of all the charts take up on the right + // and left. The result is an array for left and right axis which + // contain the min column width needed to hold the axes widths at the + // pos for all rows. // // pos 1 0 0 1 2 - // | Axis | Axis | CHARTS | Axis | Row 1 - // | Axis | CHARTS | Axis | Axis | Axis | Row 2 + // | Axis | Axis | CHARTS | Axis | Row 1 + // | Axis | CHARTS | Axis | Axis | Axis | Row 2 // ............... .......................... // left cols right cols // @@ -131,14 +109,13 @@ exports["default"] = _reactAddons2["default"].createClass({ var rightAxisWidths = []; _reactAddons2["default"].Children.forEach(this.props.children, function (childRow) { - if (childRow.type === _chartrow2["default"]) { (function () { // - // Within this row, count the number of columns that will be left - // and right of the Charts tag, as well as the total number of - // Charts tags for error handling + // Within this row, count the number of columns that will be + // left and right of the Charts tag, as well as the total number + // of Charts tags for error handling // var countLeft = 0; @@ -160,7 +137,9 @@ exports["default"] = _reactAddons2["default"].createClass({ }); if (countCharts !== 1) { - (0, _reactLibInvariant2["default"])(false, "ChartRow should have one and only one tag within it", childRow.constructor.name); + var msg = "ChartRow should have one and only one "; + msg += " tag within it"; + (0, _reactLibInvariant2["default"])(false, msg, childRow.constructor.name); } align = "left"; @@ -185,11 +164,11 @@ exports["default"] = _reactAddons2["default"].createClass({ } }); - //Extra space used by padding between columns + // Extra space used by padding between columns var leftExtra = (leftAxisWidths.length - 1) * padding; var rightExtra = (rightAxisWidths.length - 1) * padding; - //Space used by columns on left and right of charts + // Space used by columns on left and right of charts var leftWidth = _underscore2["default"].reduce(leftAxisWidths, function (a, b) { return a + b; }, 0) + leftExtra; @@ -215,12 +194,14 @@ exports["default"] = _reactAddons2["default"].createClass({ var timeScale = _d32["default"].time.scale().domain([beginTime, endTime]).range([0, timeAxisWidth]); + var timeaxis = _reactAddons2["default"].createElement(_timeaxis2["default"], { scale: timeScale, format: this.props.format }); + var timeAxis = _reactAddons2["default"].createElement( "div", { className: "row" }, _reactAddons2["default"].createElement( "div", - { className: "col-md-12", style: { "height": X_AXIS_HEIGHT } }, + { className: "col-md-12", style: { height: X_AXIS_HEIGHT } }, _reactAddons2["default"].createElement( "div", { className: "chartcontainer timeaxis" }, @@ -230,7 +211,7 @@ exports["default"] = _reactAddons2["default"].createClass({ _reactAddons2["default"].createElement( "g", { transform: transform }, - _reactAddons2["default"].createElement(_timeaxis2["default"], { scale: timeScale, format: this.props.format }) + timeaxis ) ) ) @@ -238,9 +219,9 @@ exports["default"] = _reactAddons2["default"].createClass({ ); // - // For valid children (those children which are ChartRows), we actually build - // a Bootstrap row wrapper around those and then create cloned ChartRows that - // are passed the sizes of the determined axis columns. + // For valid children (those children which are ChartRows), we actually + // build a Bootstrap row wrapper around those and then create cloned + // ChartRows that are passed the sizes of the determined axis columns. // var i = 0; @@ -248,22 +229,21 @@ exports["default"] = _reactAddons2["default"].createClass({ if (child.type === _chartrow2["default"]) { var chartRow = child; var rowKey = child.props.key ? child.props.key : "chart-row-row-" + i; - var props = { key: rowKey, - width: _this.props.width, // same as container width - timeScale: timeScale, // x axis d3 scale - leftAxisWidths: leftAxisWidths, // array with column sizes for axes + width: _this.props.width, + timeScale: timeScale, + leftAxisWidths: leftAxisWidths, rightAxisWidths: rightAxisWidths, - padding: _this.props.padding, // container padding setting - minTime: _this.props.minTime, // zoomable min/max times + padding: _this.props.padding, + minTime: _this.props.minTime, maxTime: _this.props.maxTime, - transition: _this.props.transition, // time to make scale transitions - enablePanZoom: _this.props.enablePanZoom, // hook up pan/zoom events + transition: _this.props.transition, + enablePanZoom: _this.props.enablePanZoom, minDuration: _this.props.minDuration, - trackerPosition: _this.props.trackerPosition, // tracker position - onTimeRangeChanged: _this.handleTimeRangeChanged, // zoom/pan callback - onTrackerChanged: _this.handleTrackerChanged // tracker change callback + trackerPosition: _this.props.trackerPosition, + onTimeRangeChanged: _this.handleTimeRangeChanged, + onTrackerChanged: _this.handleTrackerChanged }; var row = _reactAddons2["default"].addons.cloneWithProps(chartRow, props); @@ -286,10 +266,11 @@ exports["default"] = _reactAddons2["default"].createClass({ }); // - // Final render of the ChartContainer is composed of a number of chartRows and a timeAxis + // Final render of the ChartContainer is composed of a number of + // chartRows and a timeAxis // - // TODO: We might want to consider rendering this whole thing in a single SVG rather than - // depending on Bootstrap for layout. + // TODO: We might want to consider rendering this whole thing in a + // single SVG rather than depending on Bootstrap for layout. // return _reactAddons2["default"].createElement( diff --git a/lib/chartrow.js b/lib/chartrow.js index 9c67a782..75dadaac 100644 --- a/lib/chartrow.js +++ b/lib/chartrow.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -47,9 +30,9 @@ var _underscore = require("underscore"); var _underscore2 = _interopRequireDefault(_underscore); -var _yaxis2 = require("./yaxis"); +var _yaxis = require("./yaxis"); -var _yaxis3 = _interopRequireDefault(_yaxis2); +var _yaxis2 = _interopRequireDefault(_yaxis); var _charts2 = require("./charts"); @@ -63,13 +46,17 @@ var _tracker = require("./tracker"); var _tracker2 = _interopRequireDefault(_tracker); +//eslint-disable-line + var _eventhandler = require("./eventhandler"); var _eventhandler2 = _interopRequireDefault(_eventhandler); +//eslint-disable-line + /** - * A ChartRow has a set of Y axes and multiple charts which are overlayed on each other - * in a central canvas. + * A ChartRow has a set of Y axes and multiple charts which are overlayed + * on each other in a central canvas. */ exports["default"] = _reactAddons2["default"].createClass({ @@ -77,7 +64,7 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "enablePanZoom": false + enablePanZoom: false }; }, @@ -86,9 +73,10 @@ exports["default"] = _reactAddons2["default"].createClass({ }, getInitialState: function getInitialState() { - // id of clipping rectangle we will generate and use for each child chart - // Lives in state to ensure just one clipping rectangle and id per chart row instance; we don't - // want a fresh id generated on each render. + // id of clipping rectangle we will generate and use for each child + // chart. Lives in state to ensure just one clipping rectangle and + // id per chart row instance; we don't want a fresh id generated on + // each render. var clipId = _underscore2["default"].uniqueId("clip_"); var clipPathURL = "url(#" + clipId + ")"; @@ -120,7 +108,7 @@ exports["default"] = _reactAddons2["default"].createClass({ } }, - createScale: function createScale(type, min, max, y0, y1) { + createScale: function createScale(yaxis, type, min, max, y0, y1) { var scale = undefined; if (_underscore2["default"].isUndefined(min) || min !== min || _underscore2["default"].isUndefined(max) || max !== max) { scale = null; @@ -140,27 +128,32 @@ exports["default"] = _reactAddons2["default"].createClass({ var _this = this; var axes = []; // Contains all the yAxis elements used in the render - var chartList = []; // Contains all the chart elements used in the render + var chartList = []; // Contains all the chart elements used + // in the render var margin = this.props.margin !== undefined ? Number(this.props.margin) : 5; var padding = this.props.padding !== undefined ? Number(this.props.padding) : 2; - // Extra padding above and below the axis since numbers need to be displayed there + // Extra padding above and below the axis since numbers need to be + // displayed there var AXIS_MARGIN = 5; + var innerHeight = Number(this.props.height) - AXIS_MARGIN * 2; var rangeTop = AXIS_MARGIN; var rangeBottom = innerHeight - AXIS_MARGIN; // - // Build a map of elements that occupy left or right slots next to the chart. + // Build a map of elements that occupy left or right slots next to the + // chart. // - // If an element has both and id and a min/max range, then we consider it to be a y axis. - // For those we calculate a d3 scale that can be reference by a chart. That scale will - // also be available to the axis when it renders. + // If an element has both and id and a min/max range, then we consider + // it to be a y axis. For those we calculate a d3 scale that can be + // reference by a chart. That scale will also be available to the axis + // when it renders. // - // For this row, we will need to know how many axis slots we are using and the - // scales associated with them. We store the scales in a map from attr name to - // the d3 scale. + // For this row, we will need to know how many axis slots we are using + // and the scales associated with them. We store the scales in a map + // from attr name to the d3 scale. // var yAxisMap = {}; // Maps axis id -> axis element @@ -173,9 +166,9 @@ exports["default"] = _reactAddons2["default"].createClass({ // // TODO: - // This code currently assumes each child (except in Charts) has an id, but - // this is just because leftAxisList and rightAxisList below pushes an id. - // Perhaps it could put the element itself? + // This code currently assumes each child (except in Charts) has an + // id, but this is just because leftAxisList and rightAxisList + // below pushes an id. Perhaps it could put the element itself? // if (child.type === _charts3["default"]) { @@ -183,24 +176,26 @@ exports["default"] = _reactAddons2["default"].createClass({ } else { var _id = child.props.id; - //Check to see if we think this 'axis' is actually an axis - if (child.type === _yaxis3["default"] || _underscore2["default"].has(child.props, "min") && _underscore2["default"].has(child.props, "max")) { - var _yaxis = child; - var _yaxis$props = _yaxis.props; + // Check to see if we think this 'axis' is actually an axis + if (child.type === _yaxis2["default"] || _underscore2["default"].has(child.props, "min") && _underscore2["default"].has(child.props, "max")) { + var yaxis = child; + var _yaxis$props = yaxis.props; var max = _yaxis$props.max; var min = _yaxis$props.min; - var type = _yaxis.props.type || "linear"; + var type = yaxis.props.type || "linear"; - if (_yaxis.props.id) { - yAxisMap[_yaxis.props.id] = _yaxis; //Relate id to the axis + if (yaxis.props.id) { + // Relate id to the axis + yAxisMap[yaxis.props.id] = yaxis; } - //Relate id to a d3 scale generated from the max, min and scaleType props - yAxisScaleMap[_id] = _this.createScale(type, min, max, rangeBottom, rangeTop); + // Relate id to a d3 scale generated from the max, min + // and scaleType props + yAxisScaleMap[_id] = _this.createScale(yaxis, type, min, max, rangeBottom, rangeTop); } - //Columns counts + // Columns counts if (align === "left") { leftAxisList.push(_id); } else if (align === "right") { @@ -209,25 +204,26 @@ exports["default"] = _reactAddons2["default"].createClass({ } }); - //Since we'll be building the left axis items from the inside to the outside + // Since we'll be building the left axis items from the + // inside to the outside leftAxisList.reverse(); // - // Push each axis onto the axes, transforming each into its column location + // Push each axis onto the axes, transforming each into its + // column location // var transform = undefined; var id = undefined; var props = undefined; var axis = undefined; - var i = 0; var posx = 0; - //Extra space used by padding between columns + // Extra space used by padding between columns var leftExtra = (this.props.leftAxisWidths.length - 1) * padding; var rightExtra = (this.props.rightAxisWidths.length - 1) * padding; - //Space used by columns on left and right of charts + // Space used by columns on left and right of charts var leftWidth = _underscore2["default"].reduce(this.props.leftAxisWidths, function (a, b) { return a + b; }, 0) + leftExtra; @@ -239,39 +235,44 @@ exports["default"] = _reactAddons2["default"].createClass({ posx = leftWidth; for (var leftColumnIndex = 0; leftColumnIndex < this.props.leftAxisWidths.length; leftColumnIndex++) { + var colWidth = this.props.leftAxisWidths[leftColumnIndex]; - posx = posx - colWidth; + posx -= colWidth; if (leftColumnIndex > 0) { - posx = posx - padding; + posx -= padding; } if (leftColumnIndex < leftAxisList.length) { id = leftAxisList[leftColumnIndex]; transform = "translate(" + posx + "," + margin + ")"; - //Additional props for left aligned axes - props = { "width": colWidth, - "height": innerHeight, - "align": "left", - "transition": this.props.transition }; + // Additional props for left aligned axes + props = { width: colWidth, + height: innerHeight, + align: "left", + transition: this.props.transition }; if (_underscore2["default"].has(yAxisScaleMap, id)) { props.scale = yAxisScaleMap[id]; } - //Cloned left axis + // Cloned left axis axis = _reactAddons2["default"].addons.cloneWithProps(yAxisMap[id], props); - //Debug rect + // Debug rect if (this.props.debug) { - debug = _reactAddons2["default"].createElement("rect", { className: "yaxis-debug", x: "0", y: "0", width: colWidth, height: innerHeight }); + debug = _reactAddons2["default"].createElement("rect", { className: "yaxis-debug", + x: "0", y: "0", + width: colWidth, + height: innerHeight }); } else { debug = null; } axes.push(_reactAddons2["default"].createElement( "g", - { key: "y-axis-left-" + leftColumnIndex, transform: transform }, + { key: "y-axis-left-" + leftColumnIndex, + transform: transform }, debug, axis )); @@ -280,34 +281,39 @@ exports["default"] = _reactAddons2["default"].createClass({ posx = this.props.width - rightWidth; for (var rightColumnIndex = 0; rightColumnIndex < this.props.rightAxisWidths.length; rightColumnIndex++) { + var colWidth = this.props.rightAxisWidths[rightColumnIndex]; if (rightColumnIndex < rightAxisList.length) { id = rightAxisList[rightColumnIndex]; transform = "translate(" + posx + "," + margin + ")"; - //Additional props for right aligned axes - props = { "width": colWidth, - "height": innerHeight, - "align": "right", - "transition": this.props.transition }; + // Additional props for right aligned axes + props = { width: colWidth, + height: innerHeight, + align: "right", + transition: this.props.transition }; if (_underscore2["default"].has(yAxisScaleMap, id)) { props.scale = yAxisScaleMap[id]; } - //Cloned right axis + // Cloned right axis axis = _reactAddons2["default"].addons.cloneWithProps(yAxisMap[id], props); - //Debug rect + // Debug rect if (this.props.debug) { - debug = _reactAddons2["default"].createElement("rect", { className: "yaxis-debug", x: "0", y: "0", width: colWidth, height: innerHeight }); + debug = _reactAddons2["default"].createElement("rect", { className: "yaxis-debug", + x: "0", y: "0", + width: colWidth, + height: innerHeight }); } else { debug = null; } axes.push(_reactAddons2["default"].createElement( "g", - { key: "y-axis-right-" + rightColumnIndex, transform: transform }, + { key: "y-axis-right-" + rightColumnIndex, + transform: transform }, debug, axis )); @@ -317,9 +323,9 @@ exports["default"] = _reactAddons2["default"].createClass({ } // - // Push each chart onto the chartList, transforming each to the right of the left axis slots - // and specifying its width. Each chart is passed its time and y scale. The yscale is looked - // up in yAxisScaleMap. + // Push each chart onto the chartList, transforming each to the right + // of the left axis slots and specifying its width. Each chart is passed + // its time and y scale. The yscale is looked up in yAxisScaleMap. // var chartWidth = this.props.width - leftWidth - rightWidth; @@ -331,8 +337,8 @@ exports["default"] = _reactAddons2["default"].createClass({ if (child.type === _charts3["default"]) { var _charts = child; _reactAddons2["default"].Children.forEach(_charts.props.children, function (chart) { - //Additional props for charts - var props = { + // Additional props for charts + var chartProps = { key: chart.props.key ? chart.props.key : "chart-" + keyCount, width: chartWidth, height: innerHeight, @@ -342,7 +348,7 @@ exports["default"] = _reactAddons2["default"].createClass({ transition: _this.props.transition }; - chartList.push(_reactAddons2["default"].addons.cloneWithProps(chart, props)); + chartList.push(_reactAddons2["default"].addons.cloneWithProps(chart, chartProps)); keyCount++; }); @@ -350,28 +356,29 @@ exports["default"] = _reactAddons2["default"].createClass({ }); // - // Push each child Brush on to the brush list. We need brushed to be rendered last (on top) of - // everything else in the Z order, both for visual correctness and to ensure that the brush gets - // mouse events before anything underneath + // Push each child Brush on to the brush list. We need brushed to be + // rendered last (on top) of everything else in the Z order, both for + // visual correctness and to ensure that the brush gets mouse events + // before anything underneath // var brushList = []; keyCount = 0; _reactAddons2["default"].Children.forEach(this.props.children, function (child) { if (child.type === _brush2["default"]) { - var _props = { + var brushProps = { key: "brush-" + keyCount, width: chartWidth, height: innerHeight, timeScale: _this.props.timeScale, yScale: yAxisScaleMap[child.props.axis] }; - brushList.push(_reactAddons2["default"].addons.cloneWithProps(child, _props)); + brushList.push(_reactAddons2["default"].addons.cloneWithProps(child, brushProps)); } keyCount++; }); - //Hover tracker line + // Hover tracker line var tracker = _reactAddons2["default"].createElement( "g", { key: "tracker-group", style: { pointerEvents: "none" } }, @@ -380,7 +387,7 @@ exports["default"] = _reactAddons2["default"].createClass({ position: this.props.trackerPosition }) ); - //Charts with or without pan and zoom event handling + // Charts with or without pan and zoom event handling var charts = undefined; if (this.props.enablePanZoom || this.props.onTrackerChanged) { charts = _reactAddons2["default"].createElement( @@ -420,13 +427,15 @@ exports["default"] = _reactAddons2["default"].createClass({ ); } - //Debug outlining + // Debug outlining var chartDebug = null; if (this.props.debug) { - chartDebug = _reactAddons2["default"].createElement("rect", { className: "chart-debug", x: leftWidth, y: margin, width: chartWidth, height: innerHeight }); + chartDebug = _reactAddons2["default"].createElement("rect", { className: "chart-debug", + x: leftWidth, y: margin, + width: chartWidth, height: innerHeight }); } - //Clipping + // Clipping var clipDefs = _reactAddons2["default"].createElement( "defs", null, @@ -437,7 +446,7 @@ exports["default"] = _reactAddons2["default"].createClass({ ) ); - //Pan and zoom brushes + // Pan and zoom brushes var brushes = _reactAddons2["default"].createElement( "g", { transform: chartTransform, key: "brush-group" }, @@ -449,7 +458,8 @@ exports["default"] = _reactAddons2["default"].createClass({ null, _reactAddons2["default"].createElement( "svg", - { width: this.props.width, height: Number(this.props.height) }, + { width: this.props.width, + height: Number(this.props.height) }, clipDefs, axes, charts, diff --git a/lib/charts.js b/lib/charts.js index a7f73cd2..985387d0 100644 --- a/lib/charts.js +++ b/lib/charts.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -32,7 +15,7 @@ var _Object$defineProperty = require("babel-runtime/core-js/object/define-proper var _interopRequireDefault = require("babel-runtime/helpers/interop-require-default")["default"]; _Object$defineProperty(exports, "__esModule", { - value: true + value: true }); var _reactAddons = require("react/addons"); @@ -45,15 +28,18 @@ var _reactLibInvariant2 = _interopRequireDefault(_reactLibInvariant); /** * A Charts component is a grouping of charts which will be composited on top of - * each other. It does no actual rendering itself, but instead is used for organizing - * ChartRow children. There must be one, and only one, Charts grouping within a ChartRow. - * All children of a ChartRow, for which there must be at least one, are considered a - * chart. They should return an SVG containing their render. + * each other. It does no actual rendering itself, but instead is used for + * organizing ChartRow children. There must be one, and only one, Charts + * grouping within a ChartRow. All children of a ChartRow, for which there must + * be at least one, are considered a chart. They should return an SVG + * containing their render. */ exports["default"] = _reactAddons2["default"].createClass({ - displayName: "Charts", - render: function render() { - (0, _reactLibInvariant2["default"])(false, "%s elements are for schema configuration only and should not be rendered", this.constructor.name); - } + + displayName: "Charts", + + render: function render() { + (0, _reactLibInvariant2["default"])(false, "" + this.constructor.name + " elements are for schema configuration only\nand should not be rendered"); + } }); module.exports = exports["default"]; \ No newline at end of file diff --git a/lib/eventchart.css b/lib/eventchart.css index 44edb063..a7b7f8d4 100644 --- a/lib/eventchart.css +++ b/lib/eventchart.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .eventchart-marker { diff --git a/lib/eventchart.js b/lib/eventchart.js index 4c27598f..421227ec 100644 --- a/lib/eventchart.js +++ b/lib/eventchart.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -49,7 +32,6 @@ require("./eventchart.css"); * Renders an event view that shows the supplied set of * events along a time axis. */ - exports["default"] = _reactAddons2["default"].createClass({ displayName: "EventChart", diff --git a/lib/eventhandler.js b/lib/eventhandler.js index 6d70ea36..d6656e2d 100644 --- a/lib/eventhandler.js +++ b/lib/eventhandler.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -41,23 +24,27 @@ var _reactAddons2 = _interopRequireDefault(_reactAddons); var _esnetPond = require("@esnet/pond"); +var _jquery = require("jquery"); + +var _jquery2 = _interopRequireDefault(_jquery); + exports["default"] = _reactAddons2["default"].createClass({ displayName: "EventHandler", getInitialState: function getInitialState() { return { - "isPanning": false, - "initialPanBegin": null, - "initialPanEnd": null, - "initialPanPosition": null + isPanning: false, + initialPanBegin: null, + initialPanEnd: null, + initialPanPosition: null }; }, getOffsetMousePosition: function getOffsetMousePosition(e) { var target = e.currentTarget; - var x = e.pageX - $(target).offset().left; - var y = e.pageY - $(target).offset().top; + var x = e.pageX - (0, _jquery2["default"])(target).offset().left; + var y = e.pageY - (0, _jquery2["default"])(target).offset().top; return [Math.round(x), Math.round(y)]; }, @@ -66,8 +53,12 @@ exports["default"] = _reactAddons2["default"].createClass({ var SCALE_FACTOR = 0.001; var scale = 1 + e.deltaY * SCALE_FACTOR; - if (scale > 3) scale = 3; - if (scale < 0.1) scale = 0.1; + if (scale > 3) { + scale = 3; + } + if (scale < 0.1) { + scale = 0.1; + } var xy = this.getOffsetMousePosition(e); @@ -76,14 +67,14 @@ exports["default"] = _reactAddons2["default"].createClass({ var center = this.props.scale.invert(xy[0]).getTime(); - var beginScaled = center - parseInt((center - begin) * scale); - var endScaled = center + parseInt((end - center) * scale); + var beginScaled = center - parseInt((center - begin) * scale, 10); + var endScaled = center + parseInt((end - center) * scale, 10); - //Duration constraint + // Duration constraint var duration = (end - begin) * scale; if (this.props.minDuration) { - var minDuration = parseInt(this.props.minDuration); + var minDuration = parseInt(this.props.minDuration, 10); if (duration < this.props.minDuration) { beginScaled = center - (center - begin) / (end - begin) * minDuration; endScaled = center + (end - center) / (end - begin) * minDuration; @@ -97,7 +88,7 @@ exports["default"] = _reactAddons2["default"].createClass({ } } - //Range constraint + // Range constraint if (this.props.minTime && beginScaled < this.props.minTime.getTime()) { beginScaled = this.props.minTime.getTime(); endScaled = beginScaled + duration; @@ -127,31 +118,26 @@ exports["default"] = _reactAddons2["default"].createClass({ var begin = this.props.scale.domain()[0].getTime(); var end = this.props.scale.domain()[1].getTime(); - this.setState({ "isPanning": true, - "initialPanBegin": begin, - "initialPanEnd": end, - "initialPanPosition": xy0 }); + this.setState({ isPanning: true, + initialPanBegin: begin, + initialPanEnd: end, + initialPanPosition: xy0 }); }, handleMouseUp: function handleMouseUp(e) { e.preventDefault(); - this.setState({ "isPanning": false, - "initialPanBegin": null, - "initialPanEnd": null, - "initialPanPosition": null }); + this.setState({ isPanning: false, + initialPanBegin: null, + initialPanEnd: null, + initialPanPosition: null }); }, handleMouseOut: function handleMouseOut(e) { - + e.preventDefault(); if (this.props.onMouseOut) { this.props.onMouseOut(); } - - // this.setState({"isPanning": false, - // "initialPanBegin": null, - // "initialPanEnd": null, - // "initialPanPosition": null}); }, handleMouseMove: function handleMouseMove(e) { @@ -165,11 +151,11 @@ exports["default"] = _reactAddons2["default"].createClass({ var xy0 = this.state.initialPanPosition; var timeOffset = this.props.scale.invert(xy[0]).getTime() - this.props.scale.invert(xy0[0]).getTime(); - var newBegin = parseInt(this.state.initialPanBegin - timeOffset); - var newEnd = parseInt(this.state.initialPanEnd - timeOffset); - var duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin); + var newBegin = parseInt(this.state.initialPanBegin - timeOffset, 10); + var newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10); + var duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin, 10); - //Range constraint + // Range constraint if (this.props.minTime && newBegin < this.props.minTime.getTime()) { newBegin = this.props.minTime.getTime(); newEnd = newBegin + duration; @@ -186,16 +172,14 @@ exports["default"] = _reactAddons2["default"].createClass({ if (this.props.onZoom) { this.props.onZoom(newTimeRange); } - } else { + } else if (this.props.onMouseMove) { + var target = e.currentTarget; + var xx = e.pageX - (0, _jquery2["default"])(target).offset().left; + var time = this.props.scale.invert(xx); + + // onMouseMove callback if (this.props.onMouseMove) { - var target = e.currentTarget; - var _x = e.pageX - $(target).offset().left; - var time = this.props.scale.invert(_x); - - //onMouseMove callback - if (this.props.onMouseMove) { - this.props.onMouseMove(time); - } + this.props.onMouseMove(time); } } }, @@ -216,7 +200,7 @@ exports["default"] = _reactAddons2["default"].createClass({ onMouseOut: this.handleMouseOut, onMouseUp: this.handleMouseUp }, _reactAddons2["default"].createElement("rect", { key: "handler-hit-rect", - style: { "opacity": 0, "cursor": cursor }, + style: { opacity: 0, cursor: cursor }, x: 0, y: 0, width: this.props.width, height: this.props.height }), children diff --git a/lib/labelaxis.js b/lib/labelaxis.js index c38ce9d3..46e42413 100644 --- a/lib/labelaxis.js +++ b/lib/labelaxis.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -43,8 +26,13 @@ var _d3 = require("d3"); var _d32 = _interopRequireDefault(_d3); +var _underscore = require("underscore"); + +var _underscore2 = _interopRequireDefault(_underscore); + /** - * Renders a 'axis' that display a label for a data channel and a max and average value + * Renders a 'axis' that display a label for a data channel and a + * max and average value * +----------------+-----+------- ... * | Traffic | 120 | * | Max 100 Gbps | | Chart ... @@ -63,7 +51,7 @@ exports["default"] = _reactAddons2["default"].createClass({ var rectWidth = this.props.width - VALWIDTH; var valXPos = rectWidth + 3; // padding - var format = _.has(this.props, "format") ? this.props.format : ".2f"; + var format = _underscore2["default"].has(this.props, "format") ? this.props.format : ".2f"; var maxStr = _d32["default"].format(format)(this.props.max); var minStr = _d32["default"].format(format)(this.props.min); return _reactAddons2["default"].createElement( @@ -73,7 +61,9 @@ exports["default"] = _reactAddons2["default"].createClass({ style: { fill: "#E4E4E4", fillOpacity: 0.65 } }), _reactAddons2["default"].createElement( "text", - { x: parseInt(rectWidth / 2), y: this.props.height / 2, style: labelStyle }, + { x: parseInt(rectWidth / 2, 10), + y: this.props.height / 2, + style: labelStyle }, this.props.label ), _reactAddons2["default"].createElement( diff --git a/lib/legend.js b/lib/legend.js index fc2c61e8..0f6db8b1 100644 --- a/lib/legend.js +++ b/lib/legend.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -43,7 +26,9 @@ var _underscore = require("underscore"); var _underscore2 = _interopRequireDefault(_underscore); -var merge = require("merge"); +var _merge = require("merge"); + +var _merge2 = _interopRequireDefault(_merge); exports["default"] = _reactAddons2["default"].createClass({ @@ -51,9 +36,9 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "style": {}, - "labelStyle": {}, - "type": "swatch" }; + style: {}, + labelStyle: {}, + type: "swatch" }; }, render: function render() { @@ -97,22 +82,20 @@ exports["default"] = _reactAddons2["default"].createClass({ backgroundColor: "#CCC" }; - var labelStyle = {}; - var items = []; _underscore2["default"].each(this.props.categories, function (category) { var style = undefined; var categoryStyle = category.style || {}; var categoryLabelStyle = category.labelStyle || {}; if (_this.props.type === "swatch") { - style = merge(true, swatchStyle, categoryStyle); + style = (0, _merge2["default"])(true, swatchStyle, categoryStyle); } else if (_this.props.type === "line") { - style = merge(true, lineStyle, categoryStyle); + style = (0, _merge2["default"])(true, lineStyle, categoryStyle); } else if (_this.props.type === "dot") { - style = merge(true, dotStyle, categoryStyle); + style = (0, _merge2["default"])(true, dotStyle, categoryStyle); } - var labelStyle = merge(true, labelStyle, categoryLabelStyle); + var labelStyle = (0, _merge2["default"])(true, labelStyle, categoryLabelStyle); items.push(_reactAddons2["default"].createElement( "li", @@ -136,4 +119,4 @@ exports["default"] = _reactAddons2["default"].createClass({ } }); module.exports = exports["default"]; -//or "line" or "dot" \ No newline at end of file +// or "line" or "dot" \ No newline at end of file diff --git a/lib/linechart.js b/lib/linechart.js index c405a305..bf8f96e4 100644 --- a/lib/linechart.js +++ b/lib/linechart.js @@ -1,28 +1,11 @@ -/* - * ESnet react-timeseries-charts, Copyright (c) 2015, The Regents of - * the University of California, through Lawrence Berkeley National - * Laboratory (subject to receipt of any required approvals from the - * U.S. Dept. of Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -56,12 +39,12 @@ exports["default"] = _react2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "smooth": true, - "showPoints": false, - "pointRadius": 1, - "style": { - "color": "#9DA3FF", - "width": 1 + smooth: true, + showPoints: false, + pointRadius: 1, + style: { + color: "#9DA3FF", + width: 1 } }; }, @@ -88,10 +71,10 @@ exports["default"] = _react2["default"].createClass({ */ pathStyle: function pathStyle() { return { - "fill": "none", - "pointerEvents": "none", - "stroke": this.props.style.color || "#9DA3FF", - "strokeWidth": "" + this.props.style.width + "px" || "1px" + fill: "none", + pointerEvents: "none", + stroke: this.props.style.color || "#9DA3FF", + strokeWidth: "" + this.props.style.width + "px" || "1px" }; }, @@ -105,7 +88,8 @@ exports["default"] = _react2["default"].createClass({ return _this.inBounds(p); }); - return _react2["default"].createElement("path", { style: this.pathStyle(), onMouseMove: this.handleMouseMove, + return _react2["default"].createElement("path", { style: this.pathStyle(), + onMouseMove: this.handleMouseMove, d: this.generatePath(points), clipPath: this.props.clipPathURL }); }, diff --git a/lib/resizable.js b/lib/resizable.js index ab90cc43..00da5846 100644 --- a/lib/resizable.js +++ b/lib/resizable.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ 'use strict'; @@ -51,21 +34,21 @@ exports['default'] = _reactAddons2['default'].createClass({ return { width: 0 }; }, - handleResize: function handleResize(e) { + handleResize: function handleResize() { this.setState({ width: this.refs.container.getDOMNode().offsetWidth }); }, componentDidMount: function componentDidMount() { - window.addEventListener('resize', this.handleResize); + window.addEventListener('resize', this.handleResize); //eslint-disable-line this.handleResize(); }, componentWillUnmount: function componentWillUnmount() { - window.removeEventListener('resize', this.handleResize); + window.removeEventListener('resize', this.handleResize); //eslint-disable-line }, render: function render() { - var props = { 'width': this.state.width }; + var props = { width: this.state.width }; var child = _reactAddons2['default'].Children.only(this.props.children); var childElement = this.state.width ? _reactAddons2['default'].addons.cloneWithProps(child, props) : null; return _reactAddons2['default'].createElement( diff --git a/lib/scatterchart.css b/lib/scatterchart.css index f826a00b..3e8bc779 100644 --- a/lib/scatterchart.css +++ b/lib/scatterchart.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .scatterchart-point { diff --git a/lib/scatterchart.js b/lib/scatterchart.js index ebed2639..7a136c5b 100644 --- a/lib/scatterchart.js +++ b/lib/scatterchart.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -60,8 +43,8 @@ exports["default"] = _reactAddons2["default"].createClass({ getDefaultProps: function getDefaultProps() { return { - "radius": 2, - "style": { + radius: 2, + style: { color: "steelblue", opacity: 1 } @@ -69,7 +52,6 @@ exports["default"] = _reactAddons2["default"].createClass({ }, renderScatterChart: function renderScatterChart(series, timeScale, yScale, radius) { - var _this = this; var data = series.toJSON().points; @@ -84,14 +66,14 @@ exports["default"] = _reactAddons2["default"].createClass({ } var style = { - "fill": this.props.style.color || "steelblue", - "fill-opacity": this.props.style.opacity || 1, - "stroke": "none" }; + fill: this.props.style.color || "steelblue", + fillOpacity: this.props.style.opacity || 1, + stroke: "none" }; _d32["default"].select(this.getDOMNode()).selectAll("*").remove(); this.scatter = _d32["default"].select(this.getDOMNode()).selectAll("dot").data(data).enter().append("circle").style(style).attr("r", function (d) { - return d[2] ? d[2] : _this.props.radius; + return d[2] ? d[2] : radius; }).attr("cx", function (d) { return timeScale(d[0]); }).attr("cy", function (d) { @@ -100,11 +82,9 @@ exports["default"] = _reactAddons2["default"].createClass({ }, updateScatterChart: function updateScatterChart(series, timeScale, yScale, radius) { - var _this2 = this; - var data = series.toJSON().points; this.scatter.data(data).transition().duration(this.props.transiton).ease("sin-in-out").attr("r", function (d) { - return d[2] ? d[2] : _this2.props.radius; + return d[2] ? d[2] : radius; }).attr("cx", function (d) { return timeScale(d[0]); }).attr("cy", function (d) { @@ -122,16 +102,16 @@ exports["default"] = _reactAddons2["default"].createClass({ var yScale = nextProps.yScale; var radius = nextProps.radius; - //What changed + // What changed var timeScaleChanged = scaleAsString(this.props.timeScale) !== scaleAsString(timeScale); var yAxisScaleChanged = scaleAsString(this.props.yScale) !== scaleAsString(yScale); var defaultRadiusChanged = this.props.radius !== radius; var seriesChanged = _esnetPond.TimeSeries.is(this.props.series, series); // - // Currently if the series changes we completely rerender it. If the y axis scale - // changes then we just update the existing paths using a transition so that we - // can get smooth axis transitions. + // Currently if the series changes we completely rerender it. + // If the y axis scale changes then we just update the existing + // paths using a transition so that we can get smooth axis transitions. // if (seriesChanged || timeScaleChanged || defaultRadiusChanged) { diff --git a/lib/table.js b/lib/table.js index c966f6c9..629564c9 100644 --- a/lib/table.js +++ b/lib/table.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -87,7 +70,7 @@ exports["default"] = _reactAddons2["default"].createClass({ if (cell) { cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: column.key }, cell )); } else { @@ -102,16 +85,18 @@ exports["default"] = _reactAddons2["default"].createClass({ if (column.key === "time") { if (event instanceof _esnetPond.IndexedEvent) { + var format = _this.props.timeFormat; + var eventIndex = event.index().toNiceString(format); cells.push(_reactAddons2["default"].createElement( "td", - null, - event.index().toNiceString(_this.props.timeFormat) + { key: event.index().asString() }, + eventIndex )); } else { var ts = (0, _moment2["default"])(event.timestamp()); cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: ts.valueOf() }, ts.format(_this.props.timeFormat) )); } @@ -122,7 +107,7 @@ exports["default"] = _reactAddons2["default"].createClass({ } cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: column.key }, value )); } @@ -132,14 +117,14 @@ exports["default"] = _reactAddons2["default"].createClass({ if (event instanceof _esnetPond.IndexedEvent) { cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: event.index().asString() }, event.index().toNiceString(this.props.timeFormat) )); } else { var ts = (0, _moment2["default"])(event.timestamp()); cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: ts.valueOf() }, ts.format(this.props.timeFormat) )); } @@ -153,13 +138,13 @@ exports["default"] = _reactAddons2["default"].createClass({ if (cell) { cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: i }, cell )); } else { cells.push(_reactAddons2["default"].createElement( "td", - null, + { key: i }, d.toString() )); } @@ -171,6 +156,7 @@ exports["default"] = _reactAddons2["default"].createClass({ renderRows: function renderRows() { var rows = []; + var i = 0; var _iteratorNormalCompletion = true; var _didIteratorError = false; var _iteratorError = undefined; @@ -181,9 +167,10 @@ exports["default"] = _reactAddons2["default"].createClass({ rows.push(_reactAddons2["default"].createElement( "tr", - null, + { key: i }, this.renderCells(_event) )); + i++; } } catch (err) { _didIteratorError = true; @@ -211,7 +198,7 @@ exports["default"] = _reactAddons2["default"].createClass({ var cells = _underscore2["default"].map(this.props.summary, function (value, key) { return _reactAddons2["default"].createElement( "td", - null, + { key: key }, _reactAddons2["default"].createElement( "b", null, @@ -221,7 +208,7 @@ exports["default"] = _reactAddons2["default"].createClass({ }); rows.push(_reactAddons2["default"].createElement( "tr", - { style: summaryStyle }, + { key: "summary", style: summaryStyle }, cells )); } @@ -236,20 +223,21 @@ exports["default"] = _reactAddons2["default"].createClass({ _underscore2["default"].each(this.props.columns, function (column) { headerCells.push(_reactAddons2["default"].createElement( "th", - { style: headerStyle }, + { key: column.label, + style: headerStyle }, column.label )); }); } else { headerCells.push(_reactAddons2["default"].createElement( "th", - null, + { key: "time" }, "time" )); this.props.series._columns.forEach(function (column) { headerCells.push(_reactAddons2["default"].createElement( "th", - { style: headerStyle }, + { key: column.label, style: headerStyle }, column )); }); @@ -257,7 +245,7 @@ exports["default"] = _reactAddons2["default"].createClass({ return _reactAddons2["default"].createElement( "tr", - null, + { key: "header" }, headerCells ); }, @@ -267,7 +255,9 @@ exports["default"] = _reactAddons2["default"].createClass({ return _reactAddons2["default"].createElement( "table", - { className: "table table-condensed table-striped", width: this.props.width, style: style }, + { className: "table table-condensed table-striped", + width: this.props.width, + style: style }, _reactAddons2["default"].createElement( "tbody", null, diff --git a/lib/timeaxis.css b/lib/timeaxis.css index 1fc47247..9dce1bf0 100644 --- a/lib/timeaxis.css +++ b/lib/timeaxis.css @@ -1,29 +1,11 @@ - -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ /** diff --git a/lib/timeaxis.js b/lib/timeaxis.js index 2b242546..81efa0e3 100644 --- a/lib/timeaxis.js +++ b/lib/timeaxis.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -52,7 +35,6 @@ function scaleAsString(scale) { /** * Renders a horizontal time axis */ - exports["default"] = _reactAddons2["default"].createClass({ displayName: "TimeAxis", @@ -70,7 +52,7 @@ exports["default"] = _reactAddons2["default"].createClass({ axis = _d32["default"].svg.axis().scale(scale).orient("bottom"); } - //Remove the old axis from under this DOM node + // Remove the old axis from under this DOM node _d32["default"].select(this.getDOMNode()).selectAll("*").remove(); var axisGroup = _d32["default"].select(this.getDOMNode()).append("g").attr("class", "x axis").call(axis.tickSize(10)); diff --git a/lib/timerangemarker.js b/lib/timerangemarker.js index 9c2ed121..2eff4724 100644 --- a/lib/timerangemarker.js +++ b/lib/timerangemarker.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -39,14 +22,6 @@ var _reactAddons = require("react/addons"); var _reactAddons2 = _interopRequireDefault(_reactAddons); -var _d3 = require("d3"); - -var _d32 = _interopRequireDefault(_d3); - -var _underscore = require("underscore"); - -var _underscore2 = _interopRequireDefault(_underscore); - var _esnetPond = require("@esnet/pond"); /** @@ -71,9 +46,8 @@ exports["default"] = _reactAddons2["default"].createClass({ renderBand: function renderBand() { var timerange = this.props.timerange; var timeScale = this.props.timeScale; - var yScale = this.props.yScale; - //Viewport bounds + // Viewport bounds var viewBeginTime = timeScale.invert(0); var viewEndTime = timeScale.invert(this.props.width); var viewport = new _esnetPond.TimeRange(viewBeginTime, viewEndTime); @@ -99,7 +73,8 @@ exports["default"] = _reactAddons2["default"].createClass({ if (width < 1) { width = 1; } - return _reactAddons2["default"].createElement("rect", { x: beginPos, y: 0, width: width, height: this.props.height, + return _reactAddons2["default"].createElement("rect", { x: beginPos, y: 0, + width: width, height: this.props.height, style: bandStyle, clipPath: this.props.clipPathURL }); } diff --git a/lib/tracker.js b/lib/tracker.js index 73cb3ad8..044d9f05 100644 --- a/lib/tracker.js +++ b/lib/tracker.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; diff --git a/lib/valueaxis.js b/lib/valueaxis.js index 9e318a60..1a9b48f6 100644 --- a/lib/valueaxis.js +++ b/lib/valueaxis.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -39,10 +22,6 @@ var _reactAddons = require("react/addons"); var _reactAddons2 = _interopRequireDefault(_reactAddons); -var _d3 = require("d3"); - -var _d32 = _interopRequireDefault(_d3); - /** * Renders a 'axis' that display a label for a current tracker value * @@ -52,7 +31,6 @@ var _d32 = _interopRequireDefault(_d3); * | | * ----+----------------+ */ - exports["default"] = _reactAddons2["default"].createClass({ displayName: "ValueAxis", @@ -63,16 +41,22 @@ exports["default"] = _reactAddons2["default"].createClass({ return _reactAddons2["default"].createElement( "g", null, - _reactAddons2["default"].createElement("rect", { x: "0", y: "0", width: this.props.width, height: this.props.height, + _reactAddons2["default"].createElement("rect", { x: "0", y: "0", + width: this.props.width, + height: this.props.height, style: { fill: "#E4E4E4", fillOpacity: 0.65 } }), _reactAddons2["default"].createElement( "text", - { x: parseInt(this.props.width / 2), y: this.props.height / 2, style: labelStyle }, + { x: parseInt(this.props.width / 2, 10), + y: this.props.height / 2, + style: labelStyle }, this.props.value ), _reactAddons2["default"].createElement( "text", - { x: parseInt(this.props.width / 2), y: this.props.height / 2, dy: "1.2em", style: detailStyle }, + { x: parseInt(this.props.width / 2, 10), + y: this.props.height / 2, dy: "1.2em", + style: detailStyle }, this.props.detail ) ); diff --git a/lib/yaxis.css b/lib/yaxis.css index eb1103ee..acf2448d 100644 --- a/lib/yaxis.css +++ b/lib/yaxis.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .yaxis > line, diff --git a/lib/yaxis.js b/lib/yaxis.js index 57755e69..c6f34c10 100644 --- a/lib/yaxis.js +++ b/lib/yaxis.js @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ "use strict"; @@ -55,29 +38,29 @@ function scaleAsString(scale) { * Renders a horizontal time axis * * Props: - * * align - if the axis should be draw as if it is on the left or right (defaults to left) + * * align - if the axis should be draw as if it is on the + * left or right (defaults to left) * * scale - a d3 scale that defines the domain and range of the axis */ - exports["default"] = _reactAddons2["default"].createClass({ displayName: "YAxis", propTypes: { - "align": _reactAddons2["default"].PropTypes.string }, + align: _reactAddons2["default"].PropTypes.string }, getDefaultProps: function getDefaultProps() { return { - "id": "yaxis", // id referred to by the chart - "align": "left", // left or right of the chart - "min": 0, // range - "max": 1, - "type": "linear", // linear, log, or power - "absolute": false, // Display scale always positive - "format": ".2s", // Format string for d3.format - "labelOffset": 0, // Allows the user to tweak the position of the label - "transition": 0, // Axis transition time - "style": { + id: "yaxis", // id referred to by the chart + align: "left", // left or right of the chart + min: 0, // range + max: 1, + type: "linear", // linear, log, or power + absolute: false, // Display scale always positive + format: ".2s", // Format string for d3.format + labelOffset: 0, // Offset the label position + transition: 0, // Axis transition time + style: { labelColor: "#8B7E7E", // Default label color labelWeight: 100, labelSize: 12 @@ -112,15 +95,15 @@ exports["default"] = _reactAddons2["default"].createClass({ } var style = { - "fill": this.props.style.labelColor || "#8B7E7E", + fill: this.props.style.labelColor || "#8B7E7E", "font-weight": this.props.style.labelWeight || 100, "font-size": this.props.style.labelSize ? "" + this.props.style.width + "px" : "12px" }; - //Remove the old axis from under this DOM node + // Remove the old axis from under this DOM node _d32["default"].select(this.getDOMNode()).selectAll("*").remove(); - //Add the new axis + // Add the new axis var x = align === "left" ? width - MARGIN : 0; var labelOffset = align === "left" ? this.props.labelOffset - 50 : 40 + this.props.labelOffset; var classed = this.props.classed ? this.props.classed : ""; diff --git a/package.json b/package.json index aab5779f..ca1d4a9d 100644 --- a/package.json +++ b/package.json @@ -13,16 +13,18 @@ "url": "https://github.com/esnet/react-timeseries-charts/issues" }, "scripts": { - "lint": "eslint src", + "lint": "eslint src/*.jsx", "test": "npm run lint", "test-only": "echo \"Error: no test specified\" && exit 1", "build": "rm -rf lib/* && cp src/*.css lib/ && babel src --optional runtime --stage 0 --out-dir lib", "start-website": "webpack-dev-server --config webpack.examples.config.js" }, + "license": "BSD-3-Clause-LBNL", "dependencies": { "@esnet/pond": "^0.1.3", "babel-runtime": "~5.8.3", "d3": "^3.5.5", + "jquery": "^2.1.4", "merge": "^1.2.0", "moment": "^2.8.4", "paths-js": "^0.3.4", diff --git a/src/areachart.jsx b/src/areachart.jsx index 1883faa3..279cfb4a 100644 --- a/src/areachart.jsx +++ b/src/areachart.jsx @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; @@ -39,26 +22,32 @@ function scaleAsString(scale) { * direction, layer, we have layer.values = [points] where each point is * in the format {data: .., value, ..} */ -function getLayers(series) { +function getLayers(seriesList) { return { - "upLayers": series[0].map(function(series) { + upLayers: seriesList[0].map(series => { let points = []; - for (let i=0; i < series.size(); i++) { + for (let i = 0; i < series.size(); i++) { let point = series.at(i); - points.push({"date": point.timestamp(), "value": point.get()}); + points.push({ + date: point.timestamp(), + value: point.get() + }); } - return {"values": points }; + return {values: points}; }), - "downLayers": series[1].map(function(series) { + downLayers: seriesList[1].map(series => { let points = []; - for (let i=0; i < series.size(); i++) { + for (let i = 0; i < series.size(); i++) { let point = series.at(i); - points.push({"date": point.timestamp(), "value": point.get()}); + points.push({ + date: point.timestamp(), + value: point.get() + }); } - return {"values": points }; + return {values: points}; }) - } + }; } /** @@ -85,26 +74,26 @@ function getAreaGenerators(interpolate, timeScale, yScale) { .y1(d => yScale(d.y0 - d.value)) .interpolate(interpolate); - return {"upArea": upArea, "downArea": downArea}; + return {upArea: upArea, downArea: downArea}; } /** * Our D3 stack. When this is evoked with data (an array of layers) it builds up - * the stack of graphs on top of each other (i.e propogates a baseline y position - * up through the stack). + * the stack of graphs on top of each other (i.e propogates a baseline y + * position up through the stack). */ function getAreaStackers() { return { - "stackUp": d3.layout.stack() + stackUp: d3.layout.stack() .values(d => d.values) .x(d => d.date) .y(d => d.value), - "stackDown": d3.layout.stack() + stackDown: d3.layout.stack() .values(d => d.values) .x(d => d.date) .y(d => -d.value) - } + }; } function getCroppedSeries(scale, width, seriesList) { @@ -114,7 +103,8 @@ function getCroppedSeries(scale, width, seriesList) { return _.map(direction, series => { const beginIndex = series.bisect(beginTime); const endIndex = series.bisect(endTime); - const cropped = series.slice(beginIndex, endIndex === series.size() - 1 ? + const cropped = series.slice(beginIndex, + endIndex === series.size() - 1 ? endIndex : endIndex + 1); return cropped; }); @@ -151,8 +141,8 @@ export default React.createClass({ * either up or down. */ style: React.PropTypes.shape({ - "up": React.PropTypes.arrayOf(React.PropTypes.string), - "down": React.PropTypes.arrayOf(React.PropTypes.string) + up: React.PropTypes.arrayOf(React.PropTypes.string), + down: React.PropTypes.arrayOf(React.PropTypes.string) }), /** @@ -160,14 +150,15 @@ export default React.createClass({ * build stacked up and the second element being stacked down. Each * element is itself an array of TimeSeries. */ - series: React.PropTypes.arrayOf(React.PropTypes.arrayOf(React.PropTypes.instanceOf(TimeSeries))) + series: React.PropTypes.arrayOf( + React.PropTypes.arrayOf(React.PropTypes.instanceOf(TimeSeries))) }, getDefaultProps() { return { - "transition": 0, - "interpolate": "step-after", - "style": { + transition: 0, + interpolate: "step-after", + style: { up: ["#448FDD", "#75ACE6", "#A9CBEF"], down: ["#FD8D0D", "#FDA949", "#FEC686"] } @@ -186,38 +177,37 @@ export default React.createClass({ return null; } - let style = { - "fill": this.props.style.color, - "stroke": "none" - } - d3.select(this.getDOMNode()).selectAll("*").remove(); - const croppedSeries = getCroppedSeries(timeScale, this.props.width, series); + const croppedSeries = getCroppedSeries(timeScale, + this.props.width, + series); - let {upArea, downArea} = getAreaGenerators(interpolate, timeScale, yScale); + let {upArea, downArea} = getAreaGenerators(interpolate, + timeScale, + yScale); let {upLayers, downLayers} = getLayers(croppedSeries); let {stackUp, stackDown} = getAreaStackers(); - //Stack our layers + // Stack our layers stackUp(upLayers); if (downLayers.length) { stackDown(downLayers); } - //Cursor + // Cursor const cursor = isPanning ? "-webkit-grabbing" : "default"; // // Stacked area drawing up // - //Make a group 'areachart-up-group' for each stacked area + // Make a group 'areachart-up-group' for each stacked area let upChart = d3.select(this.getDOMNode()) .selectAll(".areachart-up-group") .data(upLayers) .enter().append("g") - .attr("id", () => _.uniqueId("areachart-up-")) + .attr("id", () => _.uniqueId("areachart-up-")); // Append the area chart path onto the areachart-up-group group this.upChart = upChart @@ -232,11 +222,12 @@ export default React.createClass({ // Stacked area drawing down // - //Make a group 'areachart-down-group' for each stacked area - let downChart = d3.select(this.getDOMNode()).selectAll(".areachart-down-group") + // Make a group 'areachart-down-group' for each stacked area + let downChart = d3.select(this.getDOMNode()) + .selectAll(".areachart-down-group") .data(downLayers) .enter().append("g") - .attr("id", () => _.uniqueId("areachart-down-")) + .attr("id", () => _.uniqueId("areachart-down-")); // Append the area chart path onto the areachart-down-group group this.downChart = downChart @@ -249,12 +240,16 @@ export default React.createClass({ }, updateAreaChart(series, timeScale, yScale, interpolate) { - const croppedSeries = getCroppedSeries(timeScale, width, series); - let {upArea, downArea} = getAreaGenerators(interpolate, timeScale, yScale); + const croppedSeries = getCroppedSeries(timeScale, + this.props.width, + series); + let {upArea, downArea} = getAreaGenerators(interpolate, + timeScale, + yScale); let {upLayers, downLayers} = getLayers(croppedSeries); let {stackUp, stackDown} = getAreaStackers(); - //Stack our layers + // Stack our layers stackUp(upLayers); if (downLayers.length) { stackDown(downLayers); @@ -289,9 +284,11 @@ export default React.createClass({ let isPanning = nextProps.isPanning; - //What changed - let timeScaleChanged = (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale)); - let yAxisScaleChanged = (scaleAsString(this.props.yScale) !== scaleAsString(yScale)); + // What changed + let timeScaleChanged = + (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale)); + let yAxisScaleChanged = + (scaleAsString(this.props.yScale) !== scaleAsString(yScale)); let interpolateChanged = (this.props.interpolate !== interpolate); let isPanningChanged = (this.props.isPanning !== isPanning); @@ -300,8 +297,8 @@ export default React.createClass({ oldSeries[0].length !== newSeries[0].length) { seriesChanged = true; } else { - for (let d=0; d < 2; d++) { - for (let a=0; a < oldSeries[d].length; a++) { + for (let d = 0; d < 2; d++) { + for (let a = 0; a < oldSeries[d].length; a++) { let o = oldSeries[d][a]; let n = newSeries[d][a]; if (!TimeSeries.is(o, n)) { @@ -312,13 +309,16 @@ export default React.createClass({ } // - // Currently if the series changes we completely rerender it. If the y axis scale - // changes then we just update the existing paths using a transition so that we - // can get smooth axis transitions. + // Currently if the series changes we completely rerender it. If the + // y axis scale changes then we just update the existing paths using a + // transition so that we can get smooth axis transitions. // - if (seriesChanged || timeScaleChanged || interpolateChanged || isPanningChanged) { - this.renderAreaChart(newSeries, timeScale, yScale, interpolate, isPanning); + if (seriesChanged || timeScaleChanged || + interpolateChanged || isPanningChanged) { + this.renderAreaChart(newSeries, timeScale, + yScale, interpolate, + isPanning); } else if (yAxisScaleChanged) { this.updateAreaChart(newSeries, timeScale, yScale, interpolate); } diff --git a/src/barchart.jsx b/src/barchart.jsx index 7f2d2144..50ed1194 100644 --- a/src/barchart.jsx +++ b/src/barchart.jsx @@ -1,41 +1,23 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; -import d3 from "d3"; -import _ from "underscore"; import {TimeSeries} from "@esnet/pond"; /** * Renders a barchart based on IndexedEvents within a TimeSeries. * - * This BarChart implementation is a little different in that it will render onto a time axis, - * rather than rendering to specific values. As a result, an Aug 2014 bar will render between the - * Aug 2014 tick mark and the Sept 2014 tickmark. + * This BarChart implementation is a little different in that it will render + * onto a time axis, rather than rendering to specific values. As a result, + * an Aug 2014 bar will render between the Aug 2014 tick mark and the Sept 2014 + * tickmark. */ export default React.createClass({ @@ -49,18 +31,18 @@ export default React.createClass({ onSelectionChange: React.PropTypes.func, }, - getDefaultProps: function() { + getDefaultProps() { return { spacing: 1, offset: 0, - style: {"value": {fill: "#619F3A"}} + style: {value: {fill: "#619F3A"}} }; }, /** * hover state is tracked internally and a highlight shown as a result */ - getInitialState: function() { + getInitialState() { return { hover: null }; @@ -69,23 +51,26 @@ export default React.createClass({ /** * Continues a hover event on a specific bar of the bar chart. */ - handleMouseMove: function(e, key) { + handleMouseMove(e, key) { this.setState({hover: key}); }, /** - * Handle click will call the onSelectionChange callback if one is provided as a prop. - * It will be called with the key, which is $series.name-$index-$column, the value of - * that event, along with the context. The context provides the series (a TimeSeries), the - * column (a string) and the index (an Index). + * Handle click will call the onSelectionChange callback if one is provided + * as a prop. It will be called with the key, which is + * $series.name-$index-$column, the value of that event, along with the + * context. The context provides the series (a TimeSeries), the column (a + * string) and the index (an Index). */ - handleClick: function(e, key, value, series, column, index) { + handleClick(e, key, value, series, column, index) { e.stopPropagation(); const context = {series: series, column: column, index: index}; - this.props.onSelectionChange && this.props.onSelectionChange(key, value, context); + if (this.props.onSelectionChange) { + this.props.onSelectionChange(key, value, context); + } }, - renderBars: function() { + renderBars() { const spacing = Number(this.props.spacing); const offset = Number(this.props.offset); const series = this.props.series; @@ -94,7 +79,7 @@ export default React.createClass({ const columns = this.props.columns || series._columns; let rects = []; - for (event of series.events()) { + for (let event of series.events()) { const begin = event.begin(); const end = event.end(); const beginPos = timeScale(begin) + spacing; @@ -113,12 +98,13 @@ export default React.createClass({ let x; if (this.props.size) { - const center = timeScale(begin) + (timeScale(end) - timeScale(begin))/2; - x = center - this.props.size/2 + offset; + const center = timeScale(begin) + + (timeScale(end) - timeScale(begin)) / 2; + x = center - this.props.size / 2 + offset; } else { x = timeScale(begin) + spacing + offset; } - + let ypos = yScale(0); for (let column of columns) { @@ -141,29 +127,35 @@ export default React.createClass({ barStyle = {fill: "rgb(0, 144, 199)"}; } } else if (key === this.state.hover) { - if (this.props.style && this.props.style[column].highlight) { + if (this.props.style && + this.props.style[column].highlight) { barStyle = this.props.style[column].highlight; } else { barStyle = {fill: "rgb(78, 144, 199)"}; } - } else { - if (this.props.style && this.props.style[column].normal) { - barStyle = this.props.style[column].normal; - } else { - barStyle = {fill: "steelblue"}; - } + } else if (this.props.style && + this.props.style[column].normal) { + barStyle = this.props.style[column].normal; + } else { + barStyle = {fill: "steelblue"}; } - + rects.push( {this.handleClick(e, key, value, series, column, index)}} - onMouseLeave={e => {this.setState({hover: null})}} - onMouseMove={e => this.handleMouseMove(e, key)}/> + onClick={e => { + this.handleClick(e, key, value, series, + column, index); + }} + onMouseLeave={() => { + this.setState({hover: null}); + }} + onMouseMove={e => { + this.handleMouseMove(e, key); + }}/> ); ypos -= height; @@ -172,7 +164,7 @@ export default React.createClass({ return rects; }, - render: function() { + render() { return ( {this.renderBars()} diff --git a/src/baseline.css b/src/baseline.css index 6cbaedf9..07d90072 100644 --- a/src/baseline.css +++ b/src/baseline.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .baseline { diff --git a/src/baseline.jsx b/src/baseline.jsx index f12391ad..beb676fe 100644 --- a/src/baseline.jsx +++ b/src/baseline.jsx @@ -1,30 +1,13 @@ -/* - * ESnet React Charts, Copyright (c) 2014-2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import "./baseline.css"; @@ -43,20 +26,21 @@ import "./baseline.css"; */ export default React.createClass({ - getDefaultProps: function() { + getDefaultProps() { return { - "value": 0, - "label": "", - "position": "left" //or right + value: 0, + label: "", + position: "left" }; }, - render: function() { + render() { if (!this.props.yScale || !this.props.value) { return null; } - let ymin = Math.min(this.props.yScale.range()[0], this.props.yScale.range()[1]); + let ymin = Math.min(this.props.yScale.range()[0], + this.props.yScale.range()[1]); let y = this.props.yScale(this.props.value); let transform = `translate(0 ${y})`; let textAnchor; @@ -84,8 +68,10 @@ export default React.createClass({ return ( - - + + {this.props.label} diff --git a/src/brush.jsx b/src/brush.jsx index 16ebfce4..6e3149c7 100644 --- a/src/brush.jsx +++ b/src/brush.jsx @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; @@ -36,38 +19,39 @@ export default React.createClass({ displayName: "Brush", - getInitialState: function() { + getInitialState() { return { - "d3brush": null + d3brush: null }; }, - handleBrushed: function(brush) { + handleBrushed(brush) { var extent = brush.extent(); if (this.props.onBrushed) { this.props.onBrushed(brush,extent[0],extent[1]); } }, - renderBrush: function(timeScale,beginTime,endTime) { - var d3brush = this.state.d3brush; - var self = this; + renderBrush(timeScale,beginTime,endTime) { + let d3brush = this.state.d3brush; + if (!d3brush) { d3brush = d3.svg.brush() .x(timeScale) - .on("brush", function() { - self.handleBrushed(d3brush); + .on("brush", () => { + this.handleBrushed(d3brush); }); - this.setState({"d3brush": d3brush}); + this.setState({d3brush: d3brush}); d3brush.extent([beginTime,endTime]); } else { - var currentExtent = d3brush.extent(); - var curBegin = currentExtent[0]; - var curEnd = currentExtent[1]; - /* This check is critical to break feedback cycles that will cause the brush - * to get very confused. - */ - if (curBegin.getTime()!==beginTime.getTime() || curEnd.getTime()!==endTime.getTime()) { + const currentExtent = d3brush.extent(); + const curBegin = currentExtent[0]; + const curEnd = currentExtent[1]; + + // This check is critical to break feedback cycles that + // will cause the brush to get very confused. + if (curBegin.getTime() !== beginTime.getTime() || + curEnd.getTime() !== endTime.getTime()) { d3brush.extent([beginTime,endTime]); } else { return; @@ -84,27 +68,29 @@ export default React.createClass({ .attr("height", this.props.height + 7); }, - componentDidMount: function() { - this.renderBrush(this.props.timeScale,this.props.beginTime,this.props.endTime); + componentDidMount() { + this.renderBrush(this.props.timeScale, + this.props.beginTime, + this.props.endTime); }, - componentWillReceiveProps: function(nextProps) { - var timeScale = nextProps.timeScale; - var beginTime = nextProps.beginTime; - var endTime = nextProps.endTime; + componentWillReceiveProps(nextProps) { + const timeScale = nextProps.timeScale; + const beginTime = nextProps.beginTime; + const endTime = nextProps.endTime; - if (scaleAsString(this.props.timeScale) != scaleAsString(timeScale) || - this.props.beginTime.getTime() != beginTime.getTime() || - this.props.endTime.getTime() != endTime.getTime() ) { - this.renderBrush(timeScale,beginTime,endTime); + if (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale) || + this.props.beginTime.getTime() !== beginTime.getTime() || + this.props.endTime.getTime() !== endTime.getTime() ) { + this.renderBrush(timeScale, beginTime, endTime); } }, - shouldComponentUpdate: function() { + shouldComponentUpdate() { return false; }, - render: function() { + render() { return ; - }, + } }); diff --git a/src/chartcontainer.css b/src/chartcontainer.css index ffe1d7e8..4cad0a39 100644 --- a/src/chartcontainer.css +++ b/src/chartcontainer.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .chartcontainer.timeaxis { diff --git a/src/chartcontainer.jsx b/src/chartcontainer.jsx index 86e16792..cc679282 100644 --- a/src/chartcontainer.jsx +++ b/src/chartcontainer.jsx @@ -1,53 +1,31 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; import d3 from "d3"; import _ from "underscore"; -import moment from "moment"; - import invariant from "react/lib/invariant"; -import {TimeRange} from "@esnet/pond"; - +import TimeAxis from "./timeaxis"; //eslint-disable-line import ChartRow from "./chartrow"; import Charts from "./charts"; -import TimeAxis from "./timeaxis"; -import YAxis from "./yaxis"; import Brush from "./brush"; import "./chartcontainer.css"; export default React.createClass({ - getDefaultProps: function() { + getDefaultProps() { return { - "transition": 0, - "enablePanZoom": false, + transition: 0, + enablePanZoom: false, }; }, @@ -58,33 +36,36 @@ export default React.createClass({ React.PropTypes.element]), }, - handleTrackerChanged: function(t) { + handleTrackerChanged(t) { if (this.props.onTrackerChanged) { this.props.onTrackerChanged(t); } }, - //Within the charts library the time range of the x axis is kept as a begin and - //end time (Javascript Date objects). But the interface is Pond based, so - //this callback returns a Pond TimeRange. - handleTimeRangeChanged: function(timerange) { + /** + * Within the charts library the time range of the x axis is kept as a begin + * and end time (Javascript Date objects). But the interface is Pond based, + * so this callback returns a Pond TimeRange. + */ + handleTimeRangeChanged(timerange) { if (this.props.onTimeRangeChanged) { this.props.onTimeRangeChanged(timerange); } }, - render: function() { + render() { let chartRows = []; let padding = this.props.padding || 0; // - // How much room does the axes of all the charts take up on the right and left. - // The result is an array for left and right axis which contain the min column width - // needed to hold the axes widths at the pos for all rows. + // How much room does the axes of all the charts take up on the right + // and left. The result is an array for left and right axis which + // contain the min column width needed to hold the axes widths at the + // pos for all rows. // // pos 1 0 0 1 2 - // | Axis | Axis | CHARTS | Axis | Row 1 - // | Axis | CHARTS | Axis | Axis | Axis | Row 2 + // | Axis | Axis | CHARTS | Axis | Row 1 + // | Axis | CHARTS | Axis | Axis | Axis | Row 2 // ............... .......................... // left cols right cols // @@ -93,13 +74,12 @@ export default React.createClass({ let rightAxisWidths = []; React.Children.forEach(this.props.children, childRow => { - if (childRow.type === ChartRow) { // - // Within this row, count the number of columns that will be left - // and right of the Charts tag, as well as the total number of - // Charts tags for error handling + // Within this row, count the number of columns that will be + // left and right of the Charts tag, as well as the total number + // of Charts tags for error handling // let countLeft = 0; @@ -121,14 +101,16 @@ export default React.createClass({ }); if (countCharts !== 1) { - invariant(false, 'ChartRow should have one and only one tag within it', + let msg = "ChartRow should have one and only one "; + msg += " tag within it"; + invariant(false, msg, childRow.constructor.name ); } align = "left"; - let pos = countLeft-1; - + let pos = countLeft - 1; + React.Children.forEach(childRow.props.children, child => { if (child.type === Charts) { align = "right"; @@ -136,10 +118,12 @@ export default React.createClass({ } else { let width = Number(child.props.width) || 40; if (align === "left") { - leftAxisWidths[pos] = leftAxisWidths[pos] ? Math.max(width, leftAxisWidths[pos]) : width; + leftAxisWidths[pos] = leftAxisWidths[pos] ? + Math.max(width, leftAxisWidths[pos]) : width; pos--; } else if (align === "right") { - rightAxisWidths[pos] = rightAxisWidths[pos] ? Math.max(width, rightAxisWidths[pos]) : width; + rightAxisWidths[pos] = rightAxisWidths[pos] ? + Math.max(width, rightAxisWidths[pos]) : width; pos++; } } @@ -147,23 +131,27 @@ export default React.createClass({ } }); - - //Extra space used by padding between columns + // Extra space used by padding between columns let leftExtra = (leftAxisWidths.length - 1) * padding; let rightExtra = (rightAxisWidths.length - 1) * padding; - - //Space used by columns on left and right of charts - let leftWidth = _.reduce(leftAxisWidths, (a, b) => { return a + b; }, 0) + leftExtra; - let rightWidth = _.reduce(rightAxisWidths, (a, b) => { return a + b; }, 0) + rightExtra; + + // Space used by columns on left and right of charts + let leftWidth = _.reduce(leftAxisWidths, (a, b) => { + return a + b; + }, 0) + leftExtra; + let rightWidth = _.reduce(rightAxisWidths, (a, b) => { + return a + b; + }, 0) + rightExtra; // // Time scale and time axis elements // - let X_AXIS_HEIGHT = 35; + const X_AXIS_HEIGHT = 35; let transform = `translate(${leftWidth},0)`; - let timeAxisWidth = this.props.width - leftWidth - rightWidth - padding * 2; + let timeAxisWidth = this.props.width - leftWidth - + rightWidth - padding * 2; let [beginTime, endTime] = this.props.timeRange.toJSON(); @@ -171,13 +159,17 @@ export default React.createClass({ .domain([beginTime, endTime]) .range([0, timeAxisWidth]); + let timeaxis = ( + + ); + let timeAxis = (
-
+
- + {timeaxis}
@@ -186,32 +178,32 @@ export default React.createClass({ ); // - // For valid children (those children which are ChartRows), we actually build - // a Bootstrap row wrapper around those and then create cloned ChartRows that - // are passed the sizes of the determined axis columns. + // For valid children (those children which are ChartRows), we actually + // build a Bootstrap row wrapper around those and then create cloned + // ChartRows that are passed the sizes of the determined axis columns. // let i = 0; React.Children.forEach(this.props.children, child => { if (child.type === ChartRow) { let chartRow = child; - let rowKey = child.props.key ? child.props.key : "chart-row-row-" + i; - + let rowKey = child.props.key ? + child.props.key : `chart-row-row-${i}`; let props = { key: rowKey, - width: this.props.width, // same as container width - timeScale: timeScale, // x axis d3 scale - leftAxisWidths: leftAxisWidths, // array with column sizes for axes + width: this.props.width, + timeScale: timeScale, + leftAxisWidths: leftAxisWidths, rightAxisWidths: rightAxisWidths, - padding: this.props.padding, // container padding setting - minTime: this.props.minTime, // zoomable min/max times + padding: this.props.padding, + minTime: this.props.minTime, maxTime: this.props.maxTime, - transition: this.props.transition, // time to make scale transitions - enablePanZoom: this.props.enablePanZoom, // hook up pan/zoom events + transition: this.props.transition, + enablePanZoom: this.props.enablePanZoom, minDuration: this.props.minDuration, - trackerPosition: this.props.trackerPosition, // tracker position - onTimeRangeChanged: this.handleTimeRangeChanged, // zoom/pan callback - onTrackerChanged: this.handleTrackerChanged // tracker change callback + trackerPosition: this.props.trackerPosition, + onTimeRangeChanged: this.handleTimeRangeChanged, + onTrackerChanged: this.handleTrackerChanged }; let row = React.addons.cloneWithProps(chartRow, props); @@ -227,14 +219,14 @@ export default React.createClass({ ); } i++; - }); // - // Final render of the ChartContainer is composed of a number of chartRows and a timeAxis + // Final render of the ChartContainer is composed of a number of + // chartRows and a timeAxis // - // TODO: We might want to consider rendering this whole thing in a single SVG rather than - // depending on Bootstrap for layout. + // TODO: We might want to consider rendering this whole thing in a + // single SVG rather than depending on Bootstrap for layout. // return ( diff --git a/src/chartrow.jsx b/src/chartrow.jsx index ce148bf7..91b497dc 100644 --- a/src/chartrow.jsx +++ b/src/chartrow.jsx @@ -1,30 +1,13 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import d3 from "d3"; import _ from "underscore"; @@ -32,20 +15,20 @@ import _ from "underscore"; import YAxis from "./yaxis"; import Charts from "./charts"; import Brush from "./brush"; -import Tracker from "./tracker"; -import EventHandler from "./eventhandler"; +import Tracker from "./tracker"; //eslint-disable-line +import EventHandler from "./eventhandler"; //eslint-disable-line /** - * A ChartRow has a set of Y axes and multiple charts which are overlayed on each other - * in a central canvas. + * A ChartRow has a set of Y axes and multiple charts which are overlayed + * on each other in a central canvas. */ export default React.createClass({ displayName: "ChartRow", - getDefaultProps: function() { + getDefaultProps() { return { - "enablePanZoom": false + enablePanZoom: false }; }, @@ -53,10 +36,11 @@ export default React.createClass({ enablePanZoom: React.PropTypes.bool }, - getInitialState: function() { - // id of clipping rectangle we will generate and use for each child chart - // Lives in state to ensure just one clipping rectangle and id per chart row instance; we don't - // want a fresh id generated on each render. + getInitialState() { + // id of clipping rectangle we will generate and use for each child + // chart. Lives in state to ensure just one clipping rectangle and + // id per chart row instance; we don't want a fresh id generated on + // each render. let clipId = _.uniqueId("clip_"); let clipPathURL = "url(#" + clipId + ")"; @@ -64,33 +48,34 @@ export default React.createClass({ clipPathURL: clipPathURL}; }, - handleMouseMove: function(t) { + handleMouseMove(t) { if (this.props.onTrackerChanged) { this.props.onTrackerChanged(t); } }, - handleMouseOut: function() { + handleMouseOut() { if (this.props.onTrackerChanged) { this.props.onTrackerChanged(null); } }, - handleZoom: function(timerange) { + handleZoom(timerange) { if (this.props.onTimeRangeChanged) { this.props.onTimeRangeChanged(timerange); } }, - handleResize: function(width, height) { + handleResize(width, height) { if (this.props.onChartResize) { this.props.onChartResize(width, height); } }, - createScale: function(type, min, max, y0, y1) { + createScale(yaxis, type, min, max, y0, y1) { let scale; - if (_.isUndefined(min) || min !== min || _.isUndefined(max) || max !== max) { + if (_.isUndefined(min) || min !== min || + _.isUndefined(max) || max !== max) { scale = null; } else if (type === "linear") { scale = d3.scale.linear() @@ -113,29 +98,36 @@ export default React.createClass({ return scale; }, - render: function() { - let axes = []; // Contains all the yAxis elements used in the render - let chartList = []; // Contains all the chart elements used in the render + render() { + let axes = []; // Contains all the yAxis elements used in the render + let chartList = []; // Contains all the chart elements used + // in the render - let margin = (this.props.margin !== undefined) ? Number(this.props.margin) : 5; - let padding = (this.props.padding !== undefined) ? Number(this.props.padding) : 2; + let margin = this.props.margin !== undefined ? + Number(this.props.margin) : 5; + let padding = this.props.padding !== undefined ? + Number(this.props.padding) : 2; + + // Extra padding above and below the axis since numbers need to be + // displayed there + const AXIS_MARGIN = 5; - // Extra padding above and below the axis since numbers need to be displayed there - let AXIS_MARGIN = 5; let innerHeight = Number(this.props.height) - AXIS_MARGIN * 2; let rangeTop = AXIS_MARGIN; let rangeBottom = innerHeight - AXIS_MARGIN; - + // - // Build a map of elements that occupy left or right slots next to the chart. + // Build a map of elements that occupy left or right slots next to the + // chart. // - // If an element has both and id and a min/max range, then we consider it to be a y axis. - // For those we calculate a d3 scale that can be reference by a chart. That scale will - // also be available to the axis when it renders. + // If an element has both and id and a min/max range, then we consider + // it to be a y axis. For those we calculate a d3 scale that can be + // reference by a chart. That scale will also be available to the axis + // when it renders. // - // For this row, we will need to know how many axis slots we are using and the - // scales associated with them. We store the scales in a map from attr name to - // the d3 scale. + // For this row, we will need to know how many axis slots we are using + // and the scales associated with them. We store the scales in a map + // from attr name to the d3 scale. // let yAxisMap = {}; // Maps axis id -> axis element @@ -148,17 +140,17 @@ export default React.createClass({ // // TODO: - // This code currently assumes each child (except in Charts) has an id, but - // this is just because leftAxisList and rightAxisList below pushes an id. - // Perhaps it could put the element itself? + // This code currently assumes each child (except in Charts) has an + // id, but this is just because leftAxisList and rightAxisList + // below pushes an id. Perhaps it could put the element itself? // - + if (child.type === Charts) { align = "right"; } else { let id = child.props.id; - //Check to see if we think this 'axis' is actually an axis + // Check to see if we think this 'axis' is actually an axis if (child.type === YAxis || (_.has(child.props, "min") && _.has(child.props, "max"))) { let yaxis = child; @@ -166,14 +158,17 @@ export default React.createClass({ let type = yaxis.props.type || "linear"; if (yaxis.props.id) { - yAxisMap[yaxis.props.id] = yaxis; //Relate id to the axis + // Relate id to the axis + yAxisMap[yaxis.props.id] = yaxis; } - //Relate id to a d3 scale generated from the max, min and scaleType props - yAxisScaleMap[id] = this.createScale(type, min, max, rangeBottom, rangeTop); + // Relate id to a d3 scale generated from the max, min + // and scaleType props + yAxisScaleMap[id] = this.createScale(yaxis, type, min, max, + rangeBottom, rangeTop); } - //Columns counts + // Columns counts if (align === "left") { leftAxisList.push(id); } else if (align === "right") { @@ -182,66 +177,78 @@ export default React.createClass({ } }); - //Since we'll be building the left axis items from the inside to the outside + // Since we'll be building the left axis items from the + // inside to the outside leftAxisList.reverse(); // - // Push each axis onto the axes, transforming each into its column location + // Push each axis onto the axes, transforming each into its + // column location // let transform; let id; let props; let axis; - let i = 0; let posx = 0; - //Extra space used by padding between columns + // Extra space used by padding between columns let leftExtra = (this.props.leftAxisWidths.length - 1) * padding; let rightExtra = (this.props.rightAxisWidths.length - 1) * padding; - - //Space used by columns on left and right of charts - let leftWidth = _.reduce(this.props.leftAxisWidths, (a, b) => { return a + b; }, 0) + leftExtra; - let rightWidth = _.reduce(this.props.rightAxisWidths, (a, b) => { return a + b; }, 0) + rightExtra; + + // Space used by columns on left and right of charts + let leftWidth = _.reduce(this.props.leftAxisWidths, (a, b) => { + return a + b; + }, 0) + leftExtra; + let rightWidth = _.reduce(this.props.rightAxisWidths, (a, b) => { + return a + b; + }, 0) + rightExtra; let debug; posx = leftWidth; - for (let leftColumnIndex = 0; leftColumnIndex < this.props.leftAxisWidths.length; leftColumnIndex++) { + for (let leftColumnIndex = 0; + leftColumnIndex < this.props.leftAxisWidths.length; + leftColumnIndex++) { + let colWidth = this.props.leftAxisWidths[leftColumnIndex]; - posx = posx - colWidth; + posx -= colWidth; if (leftColumnIndex > 0) { - posx = posx - padding; + posx -= padding; } if (leftColumnIndex < leftAxisList.length) { id = leftAxisList[leftColumnIndex]; transform = "translate(" + posx + "," + margin + ")"; - //Additional props for left aligned axes - props = {"width": colWidth, - "height": innerHeight, - "align": "left", - "transition": this.props.transition}; + // Additional props for left aligned axes + props = {width: colWidth, + height: innerHeight, + align: "left", + transition: this.props.transition}; if (_.has(yAxisScaleMap, id)) { props.scale = yAxisScaleMap[id]; } - //Cloned left axis + // Cloned left axis axis = React.addons.cloneWithProps(yAxisMap[id], props); - //Debug rect + // Debug rect if (this.props.debug) { debug = ( - + ); } else { debug = null; } axes.push( - + {debug} {axis} @@ -250,36 +257,43 @@ export default React.createClass({ } posx = this.props.width - rightWidth; - for (let rightColumnIndex = 0; rightColumnIndex < this.props.rightAxisWidths.length; rightColumnIndex++) { + for (let rightColumnIndex = 0; + rightColumnIndex < this.props.rightAxisWidths.length; + rightColumnIndex++) { + let colWidth = this.props.rightAxisWidths[rightColumnIndex]; if (rightColumnIndex < rightAxisList.length) { id = rightAxisList[rightColumnIndex]; transform = "translate(" + posx + "," + margin + ")"; - //Additional props for right aligned axes - props = {"width": colWidth, - "height": innerHeight, - "align": "right", - "transition": this.props.transition}; + // Additional props for right aligned axes + props = {width: colWidth, + height: innerHeight, + align: "right", + transition: this.props.transition}; if (_.has(yAxisScaleMap, id)) { props.scale = yAxisScaleMap[id]; } - //Cloned right axis + // Cloned right axis axis = React.addons.cloneWithProps(yAxisMap[id], props); - //Debug rect + // Debug rect if (this.props.debug) { debug = ( - + ); } else { debug = null; } axes.push( - + {debug} {axis} @@ -290,9 +304,9 @@ export default React.createClass({ } // - // Push each chart onto the chartList, transforming each to the right of the left axis slots - // and specifying its width. Each chart is passed its time and y scale. The yscale is looked - // up in yAxisScaleMap. + // Push each chart onto the chartList, transforming each to the right + // of the left axis slots and specifying its width. Each chart is passed + // its time and y scale. The yscale is looked up in yAxisScaleMap. // let chartWidth = this.props.width - leftWidth - rightWidth; @@ -304,9 +318,10 @@ export default React.createClass({ if (child.type === Charts) { let charts = child; React.Children.forEach(charts.props.children, chart => { - //Additional props for charts - let props = { - key: chart.props.key ? chart.props.key : "chart-" + keyCount, + // Additional props for charts + let chartProps = { + key: chart.props.key ? + chart.props.key : `chart-${keyCount}`, width: chartWidth, height: innerHeight, clipPathURL: this.state.clipPathURL, @@ -315,38 +330,40 @@ export default React.createClass({ transition: this.props.transition }; - chartList.push(React.addons.cloneWithProps(chart, props)); + chartList.push( + React.addons.cloneWithProps(chart, chartProps) + ); keyCount++; }); } }); - + // - // Push each child Brush on to the brush list. We need brushed to be rendered last (on top) of - // everything else in the Z order, both for visual correctness and to ensure that the brush gets - // mouse events before anything underneath + // Push each child Brush on to the brush list. We need brushed to be + // rendered last (on top) of everything else in the Z order, both for + // visual correctness and to ensure that the brush gets mouse events + // before anything underneath // - let brushList=[]; - keyCount=0; + let brushList = []; + keyCount = 0; React.Children.forEach(this.props.children, child => { if (child.type === Brush) { - let props = { + let brushProps = { key: "brush-" + keyCount, width: chartWidth, height: innerHeight, timeScale: this.props.timeScale, yScale: yAxisScaleMap[child.props.axis] }; - brushList.push(React.addons.cloneWithProps(child, props)); + brushList.push(React.addons.cloneWithProps(child, brushProps)); } keyCount++; }); - - //Hover tracker line + // Hover tracker line const tracker = ( ); - //Charts with or without pan and zoom event handling + // Charts with or without pan and zoom event handling let charts; if (this.props.enablePanZoom || this.props.onTrackerChanged) { charts = ( @@ -391,15 +408,17 @@ export default React.createClass({ ); } - //Debug outlining + // Debug outlining let chartDebug = null; if (this.props.debug) { chartDebug = ( - + ); } - //Clipping + // Clipping const clipDefs = ( @@ -408,7 +427,7 @@ export default React.createClass({ ); - //Pan and zoom brushes + // Pan and zoom brushes const brushes = ( {brushList} @@ -417,7 +436,8 @@ export default React.createClass({ return (
- + {clipDefs} {axes} {charts} diff --git a/src/charts.jsx b/src/charts.jsx index 40e4d480..74c4308d 100644 --- a/src/charts.jsx +++ b/src/charts.jsx @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; @@ -30,18 +13,20 @@ import invariant from "react/lib/invariant"; /** * A Charts component is a grouping of charts which will be composited on top of - * each other. It does no actual rendering itself, but instead is used for organizing - * ChartRow children. There must be one, and only one, Charts grouping within a ChartRow. - * All children of a ChartRow, for which there must be at least one, are considered a - * chart. They should return an SVG containing their render. + * each other. It does no actual rendering itself, but instead is used for + * organizing ChartRow children. There must be one, and only one, Charts + * grouping within a ChartRow. All children of a ChartRow, for which there must + * be at least one, are considered a chart. They should return an SVG + * containing their render. */ export default React.createClass({ + displayName: "Charts", + render() { - invariant( - false, - '%s elements are for schema configuration only and should not be rendered', - this.constructor.name - ); + invariant(false, + `${this.constructor.name} elements are for schema configuration only +and should not be rendered` + ); } }); diff --git a/src/eventchart.css b/src/eventchart.css index 44edb063..a7b7f8d4 100644 --- a/src/eventchart.css +++ b/src/eventchart.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .eventchart-marker { diff --git a/src/eventchart.jsx b/src/eventchart.jsx index feab3e0a..1395a53b 100644 --- a/src/eventchart.jsx +++ b/src/eventchart.jsx @@ -1,30 +1,13 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import _ from "underscore"; import "./eventchart.css"; @@ -33,17 +16,15 @@ import "./eventchart.css"; * Renders an event view that shows the supplied set of * events along a time axis. */ - - export default React.createClass({ displayName: "EventChart", - render: function() { + render() { var scale = this.props.timeScale; // Create and array of markers, one for each event var markers = []; - markers = _.map(this.props.events, function(event) { + markers = _.map(this.props.events, event => { var posx = scale(new Date(event.time)); var transform = "translate(" + posx + ",0)"; return ( @@ -51,7 +32,7 @@ export default React.createClass({ - {event.label} diff --git a/src/eventhandler.jsx b/src/eventhandler.jsx index e704f786..dce5baa2 100644 --- a/src/eventhandler.jsx +++ b/src/eventhandler.jsx @@ -1,90 +1,81 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import {TimeRange} from "@esnet/pond"; +import $ from "jquery"; export default React.createClass({ displayName: "EventHandler", - getInitialState: function() { + getInitialState() { return { - "isPanning": false, - "initialPanBegin": null, - "initialPanEnd": null, - "initialPanPosition": null - } + isPanning: false, + initialPanBegin: null, + initialPanEnd: null, + initialPanPosition: null + }; }, - getOffsetMousePosition: function(e) { + getOffsetMousePosition(e) { const target = e.currentTarget; const x = e.pageX - $(target).offset().left; const y = e.pageY - $(target).offset().top; return [Math.round(x), Math.round(y)]; }, - handleScrollWheel: function(e) { + handleScrollWheel(e) { e.preventDefault(); const SCALE_FACTOR = 0.001; let scale = 1 + e.deltaY * SCALE_FACTOR; - if (scale > 3) scale = 3; - if (scale < 0.1) scale = 0.1; + if (scale > 3) { + scale = 3; + } + if (scale < 0.1) { + scale = 0.1; + } const xy = this.getOffsetMousePosition(e); const begin = this.props.scale.domain()[0].getTime(); const end = this.props.scale.domain()[1].getTime(); - const center = this.props.scale.invert(xy[0]).getTime() + const center = this.props.scale.invert(xy[0]).getTime(); - let beginScaled = center - parseInt((center - begin) * scale); - let endScaled = center + parseInt((end - center) * scale); + let beginScaled = center - parseInt((center - begin) * scale, 10); + let endScaled = center + parseInt((end - center) * scale, 10); - //Duration constraint + // Duration constraint let duration = (end - begin) * scale; if (this.props.minDuration) { - const minDuration = parseInt(this.props.minDuration); + const minDuration = parseInt(this.props.minDuration, 10); if (duration < this.props.minDuration) { - beginScaled = center - (center - begin)/(end - begin) * minDuration; - endScaled = center + (end - center)/(end - begin) * minDuration; + beginScaled = center - (center - begin) / + (end - begin) * minDuration; + endScaled = center + (end - center) / + (end - begin) * minDuration; } } if (this.props.minTime && this.props.maxTime) { - const maxDuration = this.props.maxTime.getTime() - this.props.minTime.getTime(); + const maxDuration = this.props.maxTime.getTime() - + this.props.minTime.getTime(); if (duration > maxDuration) { duration = maxDuration; } } - //Range constraint + // Range constraint if (this.props.minTime && beginScaled < this.props.minTime.getTime()) { beginScaled = this.props.minTime.getTime(); endScaled = beginScaled + duration; @@ -105,7 +96,7 @@ export default React.createClass({ } }, - handleMouseDown: function(e) { + handleMouseDown(e) { e.preventDefault(); const x = e.pageX; @@ -114,34 +105,29 @@ export default React.createClass({ const begin = this.props.scale.domain()[0].getTime(); const end = this.props.scale.domain()[1].getTime(); - this.setState({"isPanning": true, - "initialPanBegin": begin, - "initialPanEnd": end, - "initialPanPosition": xy0}); + this.setState({isPanning: true, + initialPanBegin: begin, + initialPanEnd: end, + initialPanPosition: xy0}); }, - handleMouseUp: function(e) { + handleMouseUp(e) { e.preventDefault(); - this.setState({"isPanning": false, - "initialPanBegin": null, - "initialPanEnd": null, - "initialPanPosition": null}); + this.setState({isPanning: false, + initialPanBegin: null, + initialPanEnd: null, + initialPanPosition: null}); }, - handleMouseOut: function(e) { - + handleMouseOut(e) { + e.preventDefault(); if (this.props.onMouseOut) { this.props.onMouseOut(); } - - // this.setState({"isPanning": false, - // "initialPanBegin": null, - // "initialPanEnd": null, - // "initialPanPosition": null}); }, - handleMouseMove: function(e) { + handleMouseMove(e) { e.preventDefault(); const x = e.pageX; @@ -153,11 +139,13 @@ export default React.createClass({ const timeOffset = this.props.scale.invert(xy[0]).getTime() - this.props.scale.invert(xy0[0]).getTime(); - let newBegin = parseInt(this.state.initialPanBegin - timeOffset); - let newEnd = parseInt(this.state.initialPanEnd - timeOffset); - let duration = parseInt(this.state.initialPanEnd - this.state.initialPanBegin); + let newBegin = parseInt(this.state.initialPanBegin - + timeOffset, 10); + let newEnd = parseInt(this.state.initialPanEnd - timeOffset, 10); + let duration = parseInt(this.state.initialPanEnd - + this.state.initialPanBegin, 10); - //Range constraint + // Range constraint if (this.props.minTime && newBegin < this.props.minTime.getTime()) { newBegin = this.props.minTime.getTime(); newEnd = newBegin + duration; @@ -174,24 +162,23 @@ export default React.createClass({ if (this.props.onZoom) { this.props.onZoom(newTimeRange); } - } else { + } else if (this.props.onMouseMove) { + const target = e.currentTarget; + const xx = e.pageX - $(target).offset().left; + const time = this.props.scale.invert(xx); + + // onMouseMove callback if (this.props.onMouseMove) { - const target = e.currentTarget; - const x = e.pageX - $(target).offset().left; - const time = this.props.scale.invert(x) - - //onMouseMove callback - if (this.props.onMouseMove) { - this.props.onMouseMove(time); - } + this.props.onMouseMove(time); } } }, - render: function() { + render() { const cursor = this.state.isPanning ? "-webkit-grabbing" : "default"; const children = React.Children.map(this.props.children, (element) => { - return React.addons.cloneWithProps(element, {isPanning: this.state.isPanning}); + return React.addons.cloneWithProps(element, + {isPanning: this.state.isPanning}); }); return ( {children} diff --git a/src/labelaxis.jsx b/src/labelaxis.jsx index ba2fc2c7..af7b76d1 100644 --- a/src/labelaxis.jsx +++ b/src/labelaxis.jsx @@ -1,35 +1,20 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; import d3 from "d3"; +import _ from "underscore"; /** - * Renders a 'axis' that display a label for a data channel and a max and average value + * Renders a 'axis' that display a label for a data channel and a + * max and average value * +----------------+-----+------- ... * | Traffic | 120 | * | Max 100 Gbps | | Chart ... @@ -41,7 +26,7 @@ export default React.createClass({ displayName: "LabelAxis", - render: function() { + render() { var labelStyle = {fontSize: 14, textAnchor: "middle", fill: "#838383"}; var detailStyle = {fontSize: 12, textAnchor: "left", fill: "#bdbdbd"}; var VALWIDTH = (this.props.valWidth) ? this.props.valWidth : 40; @@ -53,9 +38,11 @@ export default React.createClass({ var minStr = d3.format(format)(this.props.min); return ( - - + {this.props.label} @@ -64,7 +51,6 @@ export default React.createClass({ {minStr} - ); }, diff --git a/src/legend.jsx b/src/legend.jsx index 908b95fc..f3ee79e1 100644 --- a/src/legend.jsx +++ b/src/legend.jsx @@ -1,57 +1,40 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import _ from "underscore"; -var merge = require('merge') +import merge from "merge"; export default React.createClass({ displayName: "Legend", - getDefaultProps: function() { + getDefaultProps() { return { - "style": {}, - "labelStyle": {}, - "type": "swatch", //or "line" or "dot" + style: {}, + labelStyle: {}, + type: "swatch", // or "line" or "dot" }; }, - render: function() { + render() { const legendStyle = { listStyle: "none", paddingLeft: 0 - } + }; const legendListStyle = { float: "left", marginRight: 10 - } + }; const swatchStyle = { float: "left", @@ -60,7 +43,7 @@ export default React.createClass({ margin: 2, borderRadius: 2, backgroundColor: "#CCC" - } + }; const lineStyle = { float: "left", @@ -69,7 +52,7 @@ export default React.createClass({ margin: 2, marginTop: 8, backgroundColor: "#CCC" - } + }; const dotStyle = { float: "left", @@ -79,11 +62,7 @@ export default React.createClass({ marginTop: 6, borderRadius: 4, backgroundColor: "#CCC" - } - - const labelStyle = { - } - + }; let items = []; _.each(this.props.categories, (category) => { diff --git a/src/linechart.jsx b/src/linechart.jsx index 7f519830..1d04b900 100644 --- a/src/linechart.jsx +++ b/src/linechart.jsx @@ -1,30 +1,13 @@ -/* - * ESnet react-timeseries-charts, Copyright (c) 2015, The Regents of - * the University of California, through Lawrence Berkeley National - * Laboratory (subject to receipt of any required approvals from the - * U.S. Dept. of Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react"; import _ from "underscore"; import Polygon from "paths-js/polygon"; @@ -32,24 +15,24 @@ import Bezier from "paths-js/bezier"; export default React.createClass({ - getDefaultProps: function() { + getDefaultProps() { return { - "smooth": true, - "showPoints": false, - "pointRadius": 1.0, - "style": { - "color": "#9DA3FF", - "width": 1 + smooth: true, + showPoints: false, + pointRadius: 1.0, + style: { + color: "#9DA3FF", + width: 1 } }; }, - + /** * Uses paths.js to generate an SVG element for a path passing * through the points passed in. May be smoothed or not, depending * on this.props.smooth. */ - generatePath: function(points) { + generatePath(points) { const fn = this.props.smooth ? Bezier : Polygon; return fn({points: points, closed: false}).path.print(); }, @@ -57,37 +40,38 @@ export default React.createClass({ /** * Checks if the passed in point is within the bounds of the drawing area */ - inBounds: function(p) { + inBounds(p) { return p[0] > 0 && p[0] < this.props.width; }, /** * Returns the style used for drawing the path */ - pathStyle: function() { + pathStyle() { return { - "fill": "none", - "pointerEvents": "none", - "stroke": this.props.style.color || "#9DA3FF", - "strokeWidth": `${this.props.style.width}px` || "1px" + fill: "none", + pointerEvents: "none", + stroke: this.props.style.color || "#9DA3FF", + strokeWidth: `${this.props.style.width}px` || "1px" }; }, - renderLine: function() { + renderLine() { // Map series data to scaled points and filter to bounds of drawing area const points = _.filter( _.map(this.props.series.toJSON().points, d => { - return [this.props.timeScale(d[0]), this.props.yScale(d[1])] + return [this.props.timeScale(d[0]), this.props.yScale(d[1])]; }), p => this.inBounds(p)); return ( - - ) + ); }, - render: function() { + render() { return ( {this.renderLine()} diff --git a/src/resizable.jsx b/src/resizable.jsx index ca8d74cf..907a5a2a 100644 --- a/src/resizable.jsx +++ b/src/resizable.jsx @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; @@ -33,27 +16,28 @@ import React from "react/addons"; * a chart or other svg diagram and have this drive the chart width. */ export default React.createClass({ - getInitialState: function() { + getInitialState() { return {width: 0}; }, - handleResize: function(e) { + handleResize() { this.setState({width: this.refs.container.getDOMNode().offsetWidth}); }, - componentDidMount: function() { - window.addEventListener('resize', this.handleResize); + componentDidMount() { + window.addEventListener('resize', this.handleResize); //eslint-disable-line this.handleResize(); }, - componentWillUnmount: function() { - window.removeEventListener('resize', this.handleResize); + componentWillUnmount() { + window.removeEventListener('resize', this.handleResize); //eslint-disable-line }, - render: function() { - var props = {"width": this.state.width}; - var child = React.Children.only(this.props.children); - var childElement = this.state.width ? React.addons.cloneWithProps(child, props) : null; + render() { + const props = {width: this.state.width}; + const child = React.Children.only(this.props.children); + const childElement = this.state.width ? + React.addons.cloneWithProps(child, props) : null; return (
{childElement} diff --git a/src/scatterchart.css b/src/scatterchart.css index f826a00b..3e8bc779 100644 --- a/src/scatterchart.css +++ b/src/scatterchart.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .scatterchart-point { diff --git a/src/scatterchart.jsx b/src/scatterchart.jsx index 6a72194f..be681713 100644 --- a/src/scatterchart.jsx +++ b/src/scatterchart.jsx @@ -1,34 +1,19 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import d3 from "d3"; import _ from "underscore"; + import {TimeSeries} from "@esnet/pond"; + import "./scatterchart.css"; function scaleAsString(scale) { @@ -37,17 +22,17 @@ function scaleAsString(scale) { export default React.createClass({ - getDefaultProps: function() { + getDefaultProps() { return { - "radius": 2.0, - "style": { + radius: 2.0, + style: { color: "steelblue", opacity: 1 } }; }, - renderScatterChart: function(series, timeScale, yScale, radius) { + renderScatterChart(series, timeScale, yScale, radius) { let data = series.toJSON().points; @@ -59,11 +44,11 @@ export default React.createClass({ data = _.filter(data, d => (d.value !== null) ); } - let style = { - "fill": this.props.style.color || "steelblue", - "fill-opacity": this.props.style.opacity || 1.0, - "stroke": "none", - } + const style = { + fill: this.props.style.color || "steelblue", + fillOpacity: this.props.style.opacity || 1.0, + stroke: "none", + }; d3.select(this.getDOMNode()).selectAll("*").remove(); @@ -71,25 +56,25 @@ export default React.createClass({ .data(data) .enter().append("circle") .style(style) - .attr("r", d => d[2] ? d[2] : this.props.radius) + .attr("r", d => d[2] ? d[2] : radius) .attr("cx", d => timeScale(d[0])) .attr("cy", d => yScale(d[1])) .attr("clip-path",this.props.clipPathURL); }, - updateScatterChart: function(series, timeScale, yScale, radius) { - let data = series.toJSON().points; + updateScatterChart(series, timeScale, yScale, radius) { + const data = series.toJSON().points; this.scatter .data(data) .transition() .duration(this.props.transiton) .ease("sin-in-out") - .attr("r", d => d[2] ? d[2] : this.props.radius) + .attr("r", d => d[2] ? d[2] : radius) .attr("cx", d => timeScale(d[0])) - .attr("cy", d => yScale(d[1])) + .attr("cy", d => yScale(d[1])); }, - componentDidMount: function() { + componentDidMount() { this.renderScatterChart(this.props.series, this.props.timeScale, this.props.yScale, @@ -98,22 +83,24 @@ export default React.createClass({ }, - componentWillReceiveProps: function(nextProps) { - var series = nextProps.series; - var timeScale = nextProps.timeScale; - var yScale = nextProps.yScale; - var radius = nextProps.radius; + componentWillReceiveProps(nextProps) { + const series = nextProps.series; + const timeScale = nextProps.timeScale; + const yScale = nextProps.yScale; + const radius = nextProps.radius; - //What changed - let timeScaleChanged = (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale)); - let yAxisScaleChanged = (scaleAsString(this.props.yScale) !== scaleAsString(yScale)); - let defaultRadiusChanged = (this.props.radius !== radius); - let seriesChanged = TimeSeries.is(this.props.series, series); + // What changed + const timeScaleChanged = + (scaleAsString(this.props.timeScale) !== scaleAsString(timeScale)); + const yAxisScaleChanged = + (scaleAsString(this.props.yScale) !== scaleAsString(yScale)); + const defaultRadiusChanged = (this.props.radius !== radius); + const seriesChanged = TimeSeries.is(this.props.series, series); // - // Currently if the series changes we completely rerender it. If the y axis scale - // changes then we just update the existing paths using a transition so that we - // can get smooth axis transitions. + // Currently if the series changes we completely rerender it. + // If the y axis scale changes then we just update the existing + // paths using a transition so that we can get smooth axis transitions. // if (seriesChanged || timeScaleChanged || defaultRadiusChanged) { @@ -124,11 +111,11 @@ export default React.createClass({ }, - shouldComponentUpdate: function() { + shouldComponentUpdate() { return false; }, - render: function() { + render() { return ( ); diff --git a/src/table.jsx b/src/table.jsx index 0b20e115..cc43bb94 100644 --- a/src/table.jsx +++ b/src/table.jsx @@ -1,55 +1,38 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import _ from "underscore"; import d3 from "d3"; import Moment from "moment"; -import {TimeSeries, Event, IndexedEvent} from "@esnet/pond"; +import {TimeSeries, IndexedEvent} from "@esnet/pond"; export default React.createClass({ displayName: "Table", - propTypes: function() { + propTypes() { return { series: React.PropTypes.instanceOf(TimeSeries).isRequired - } + }; }, - getDefaultProps: function() { + getDefaultProps() { return { timeFormat: undefined, width: 300 - } + }; }, - renderCells: function(event) { + renderCells(event) { let cells = []; if (this.props.columns) { @@ -62,7 +45,7 @@ export default React.createClass({ if (cell) { cells.push( {cell} - ) + ); } else { let formatter; if (column.format) { @@ -75,9 +58,12 @@ export default React.createClass({ if (column.key === "time") { if (event instanceof IndexedEvent) { + const format = this.props.timeFormat; + const eventIndex = + event.index().toNiceString(format); cells.push( - {event.index().toNiceString(this.props.timeFormat)} + {eventIndex} ); } else { @@ -93,12 +79,12 @@ export default React.createClass({ if (formatter) { value = formatter(parseFloat(value, 10)); } - cells.push ( + cells.push( {value} ); } } - }) + }); } else { if (event instanceof IndexedEvent) { cells.push( @@ -124,9 +110,9 @@ export default React.createClass({ if (cell) { cells.push( {cell} - ) + ); } else { - cells.push ( + cells.push( {d.toString()} ); } @@ -136,7 +122,7 @@ export default React.createClass({ return cells; }, - renderRows: function() { + renderRows() { let rows = []; let i = 0; for (let event of this.props.series.events()) { @@ -151,7 +137,7 @@ export default React.createClass({ borderTop: "#E0E0E0", borderTopWidth: 1, borderTopStyle: "solid" - } + }; if (this.props.summary) { const cells = _.map(this.props.summary, (value, key) => ( @@ -159,19 +145,20 @@ export default React.createClass({ )); rows.push( {cells} - ) + ); } return rows; }, - renderHeader: function() { + renderHeader() { let headerCells = []; const headerStyle = {borderTop: "none"}; if (this.props.columns) { _.each(this.props.columns, (column) => { headerCells.push( - {column.label} + {column.label} ); }); } else { @@ -192,11 +179,13 @@ export default React.createClass({ ); }, - render: function() { + render() { const style = {marginBottom: 0}; return ( - +
{this.renderHeader()} {this.renderRows()} diff --git a/src/timeaxis.css b/src/timeaxis.css index 1fc47247..9dce1bf0 100644 --- a/src/timeaxis.css +++ b/src/timeaxis.css @@ -1,29 +1,11 @@ - -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ /** diff --git a/src/timeaxis.jsx b/src/timeaxis.jsx index e2ce3b41..c820a1b4 100644 --- a/src/timeaxis.jsx +++ b/src/timeaxis.jsx @@ -1,32 +1,16 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import d3 from "d3"; + import "./timeaxis.css"; function scaleAsString(scale) { @@ -36,12 +20,11 @@ function scaleAsString(scale) { /** * Renders a horizontal time axis */ - export default React.createClass({ - + displayName: "TimeAxis", - renderTimeAxis: function(scale) { + renderTimeAxis(scale) { var axis; if (this.props.format === "day") { @@ -65,10 +48,10 @@ export default React.createClass({ } else { axis = d3.svg.axis() .scale(scale) - .orient("bottom") + .orient("bottom"); } - //Remove the old axis from under this DOM node + // Remove the old axis from under this DOM node d3.select(this.getDOMNode()).selectAll("*").remove(); var axisGroup = d3.select(this.getDOMNode()).append("g") @@ -82,23 +65,22 @@ export default React.createClass({ .attr("y2", this.props.height); }, - componentDidMount: function() { + componentDidMount() { this.renderTimeAxis(this.props.scale); }, - - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps(nextProps) { var scale = nextProps.scale; if (scaleAsString(this.props.scale) !== scaleAsString(scale)) { this.renderTimeAxis(scale); } }, - shouldComponentUpdate: function() { + shouldComponentUpdate() { return false; }, - render: function() { + render() { return ; }, diff --git a/src/timerangemarker.jsx b/src/timerangemarker.jsx index 3a80e519..71f32f9f 100644 --- a/src/timerangemarker.jsx +++ b/src/timerangemarker.jsx @@ -1,33 +1,14 @@ -/* - * ESnet React Charts, Copyright (c) 2015, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; -import d3 from "d3"; -import _ from "underscore"; import {TimeRange} from "@esnet/pond"; /** @@ -53,9 +34,8 @@ export default React.createClass({ renderBand() { const timerange = this.props.timerange; const timeScale = this.props.timeScale; - const yScale = this.props.yScale; - //Viewport bounds + // Viewport bounds const viewBeginTime = timeScale.invert(0); const viewEndTime = timeScale.invert(this.props.width); const viewport = new TimeRange(viewBeginTime, viewEndTime); @@ -68,7 +48,7 @@ export default React.createClass({ } else { bandStyle = {fill: "steelblue"}; } - + bandStyle.cursor = cursor; if (!viewport.disjoint(timerange)) { @@ -82,7 +62,8 @@ export default React.createClass({ width = 1; } return ( - ); diff --git a/src/tracker.jsx b/src/tracker.jsx index 92cad8fe..9f335f46 100644 --- a/src/tracker.jsx +++ b/src/tracker.jsx @@ -1,30 +1,13 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; export default React.createClass({ @@ -38,14 +21,14 @@ export default React.createClass({ timeScale: React.PropTypes.func.isRequired, }, - getDefaultProps: function() { + getDefaultProps() { return { offset: 0, style: {stroke: "#AAA", cursor: "crosshair"} }; }, - render: function() { + render() { const posx = this.props.timeScale(this.props.position); if (posx) { return ( diff --git a/src/valueaxis.jsx b/src/valueaxis.jsx index 4c60bb84..1e93ef51 100644 --- a/src/valueaxis.jsx +++ b/src/valueaxis.jsx @@ -1,32 +1,14 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ import React from "react/addons"; -import d3 from "d3"; /** * Renders a 'axis' that display a label for a current tracker value @@ -37,22 +19,27 @@ import d3 from "d3"; * | | * ----+----------------+ */ - export default React.createClass({ displayName: "ValueAxis", - render: function() { + render() { var labelStyle = {fontSize: 14, textAnchor: "middle", fill: "#838383"}; var detailStyle = {fontSize: 12, textAnchor: "middle", fill: "#9a9a9a"}; return ( - - + {this.props.value} - + {this.props.detail} diff --git a/src/yaxis.css b/src/yaxis.css index eb1103ee..acf2448d 100644 --- a/src/yaxis.css +++ b/src/yaxis.css @@ -1,28 +1,11 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. - * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ .yaxis > line, diff --git a/src/yaxis.jsx b/src/yaxis.jsx index 7cec7416..290f321b 100644 --- a/src/yaxis.jsx +++ b/src/yaxis.jsx @@ -1,30 +1,13 @@ -/* - * ESnet React Charts, Copyright (c) 2014, The Regents of the University of - * California, through Lawrence Berkeley National Laboratory (subject - * to receipt of any required approvals from the U.S. Dept. of - * Energy). All rights reserved. - * - * If you have questions about your rights to use or distribute this - * software, please contact Berkeley Lab's Technology Transfer - * Department at TTD@lbl.gov. - * - * NOTICE. This software is owned by the U.S. Department of Energy. - * As such, the U.S. Government has been granted for itself and others - * acting on its behalf a paid-up, nonexclusive, irrevocable, - * worldwide license in the Software to reproduce, prepare derivative - * works, and perform publicly and display publicly. Beginning five - * (5) years after the date permission to assert copyright is obtained - * from the U.S. Department of Energy, and subject to any subsequent - * five (5) year renewals, the U.S. Government is granted for itself - * and others acting on its behalf a paid-up, nonexclusive, - * irrevocable, worldwide license in the Software to reproduce, - * prepare derivative works, distribute copies to the public, perform - * publicly and display publicly, and to permit others to do so. +/** + * Copyright (c) 2015, The Regents of the University of California, + * through Lawrence Berkeley National Laboratory (subject to receipt + * of any required approvals from the U.S. Dept. of Energy). + * All rights reserved. * - * This code is distributed under a BSD style license, see the LICENSE - * file for complete information. + * This source code is licensed under the BSD-style license found in the + * LICENSE file in the root directory of this source tree. */ - + import React from "react/addons"; import d3 from "d3"; import "./yaxis.css"; @@ -39,30 +22,30 @@ function scaleAsString(scale) { * Renders a horizontal time axis * * Props: - * * align - if the axis should be draw as if it is on the left or right (defaults to left) + * * align - if the axis should be draw as if it is on the + * left or right (defaults to left) * * scale - a d3 scale that defines the domain and range of the axis */ - export default React.createClass({ displayName: "YAxis", propTypes: { - "align": React.PropTypes.string, + align: React.PropTypes.string, }, - getDefaultProps: function() { + getDefaultProps() { return { - "id": "yaxis", // id referred to by the chart - "align": "left", // left or right of the chart - "min": 0, // range - "max": 1, - "type": "linear", // linear, log, or power - "absolute": false, // Display scale always positive - "format": ".2s", // Format string for d3.format - "labelOffset": 0, // Allows the user to tweak the position of the label - "transition": 0, // Axis transition time - "style": { + id: "yaxis", // id referred to by the chart + align: "left", // left or right of the chart + min: 0, // range + max: 1, + type: "linear", // linear, log, or power + absolute: false, // Display scale always positive + format: ".2s", // Format string for d3.format + labelOffset: 0, // Offset the label position + transition: 0, // Axis transition time + style: { labelColor: "#8B7E7E", // Default label color labelWeight: 100, labelSize: 12 @@ -70,7 +53,7 @@ export default React.createClass({ }; }, - renderAxis: function(align, scale, width, absolute, format) { + renderAxis(align, scale, width, absolute, format) { var yformat = d3.format(format); var axisGenerator; @@ -79,7 +62,7 @@ export default React.createClass({ axisGenerator = d3.svg.axis() .scale(scale) .ticks(5) - .tickFormat(function(d) { + .tickFormat(d => { if (absolute) { return yformat(Math.abs(d)); } else { @@ -89,7 +72,7 @@ export default React.createClass({ } else { axisGenerator = d3.svg.axis() .scale(scale) - .tickFormat(function(d) { + .tickFormat(d => { if (absolute) { return yformat(Math.abs(d)); } else { @@ -104,21 +87,24 @@ export default React.createClass({ .orient(align); } - let style = { - "fill": this.props.style.labelColor || "#8B7E7E", + const style = { + fill: this.props.style.labelColor || "#8B7E7E", "font-weight": this.props.style.labelWeight || 100, - "font-size": this.props.style.labelSize ? `${this.props.style.width}px` : "12px" - } + "font-size": this.props.style.labelSize ? + `${this.props.style.width}px` : "12px" + }; - //Remove the old axis from under this DOM node + // Remove the old axis from under this DOM node d3.select(this.getDOMNode()).selectAll("*").remove(); - //Add the new axis - var x = align === "left" ? width - MARGIN : 0; - var labelOffset = align === "left" ? this.props.labelOffset - 50 : 40 + this.props.labelOffset; - var classed = this.props.classed ? this.props.classed : ""; - var axisClass = "yaxis " + classed - var axisLabelClass = "yaxis-label " + classed; + // Add the new axis + const x = align === "left" ? width - MARGIN : 0; + const labelOffset = align === "left" ? + this.props.labelOffset - 50 : 40 + this.props.labelOffset; + const classed = this.props.classed ? + this.props.classed : ""; + const axisClass = `yaxis ${classed}`; + const axisLabelClass = `yaxis-label ${classed}`; this.axis = d3.select(this.getDOMNode()).append("g") .attr("transform", "translate(" + x + ",0)") .attr("class", axisClass) @@ -133,7 +119,7 @@ export default React.createClass({ .text(this.props.label); }, - updateAxis: function(align, scale, width, absolute, format) { + updateAxis(align, scale, width, absolute, format) { var yformat = d3.format(format); var axisGenerator; if (this.props.type === "linear" || this.props.type === "power") { @@ -141,7 +127,7 @@ export default React.createClass({ axisGenerator = d3.svg.axis() .scale(scale) .ticks(5) - .tickFormat(function(d) { + .tickFormat(d => { if (absolute) { return yformat(Math.abs(d)); } else { @@ -151,7 +137,7 @@ export default React.createClass({ } else { axisGenerator = d3.svg.axis() .scale(scale) - .tickFormat(function(d) { + .tickFormat(d => { if (absolute) { return yformat(Math.abs(d)); } else { @@ -173,12 +159,12 @@ export default React.createClass({ .call(axisGenerator); }, - componentDidMount: function() { + componentDidMount() { this.renderAxis(this.props.align, this.props.scale, this.props.width, this.props.absolute, this.props.format); }, - componentWillReceiveProps: function(nextProps) { + componentWillReceiveProps(nextProps) { var scale = nextProps.scale; var align = nextProps.align; var width = nextProps.width; @@ -190,11 +176,11 @@ export default React.createClass({ } }, - shouldComponentUpdate: function() { + shouldComponentUpdate() { return false; }, - render: function() { + render() { return ; }, }); diff --git a/webpack.examples.config.js b/webpack.examples.config.js index 28755930..11051bef 100644 --- a/webpack.examples.config.js +++ b/webpack.examples.config.js @@ -1,30 +1,36 @@ // -// webpack.config.js to build an examples bundle -// for use with the examples site. To use this in -// another project you do not have to build anything. +// webpack.config.js to build an examples/website bundle // module.exports = { - entry: { - app: ['./examples/modules/main.jsx'] - }, + entry: { + app: ["./examples/modules/main.jsx"] + }, - output: { - filename: 'examples-bundle.js' - }, + output: { + filename: "examples-bundle.js" + }, - module: { - loaders: [ - { test: /\.(js|jsx)$/, loader: 'babel?optional=es7.objectRestSpread' }, - { test: /\.css$/, loader: 'style-loader!css-loader' }, - { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}, - { test: /\.json$/, loader: 'json-loader' }, - { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, - { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" } - ] - }, - resolve: { - extensions: ['', '.js', '.jsx', '.json'] - } -}; \ No newline at end of file + module: { + loaders: [ + { test: /\.(js|jsx)$/, + loader: "babel?optional=es7.objectRestSpread" }, + { test: /\.css$/, loader: "style-loader!css-loader" }, + { test: /\.(png|jpg|gif)$/, loader: "url-loader?limit=8192"}, + { test: /\.json$/, loader: "json-loader" }, + { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader?name=[name].[ext]" } + ] + }, + + externals: [ + { + window: "window" + } + ], + + resolve: { + extensions: ["", ".js", ".jsx", ".json"] + } +};