From 0135a3aa363bf16e60ae926c36f778a37555d0ed Mon Sep 17 00:00:00 2001 From: Frencil Date: Fri, 14 Aug 2020 13:35:52 -0600 Subject: [PATCH] Time Series Viewer CENTERED as default axis mode --- .../TimeSeriesViewer/TimeSeriesViewerAxes.js | 6 +- .../TimeSeriesViewerContext.d.ts | 10 +-- .../TimeSeriesViewerContext.js | 12 +-- .../TimeSeriesViewer/TimeSeriesViewerSites.js | 66 +++++++++----- package.json | 2 +- .../TimeSeriesViewer/TimeSeriesViewerAxes.jsx | 6 +- .../TimeSeriesViewerContext.jsx | 12 +-- .../TimeSeriesViewerSites.jsx | 86 ++++++++++++------- 8 files changed, 125 insertions(+), 75 deletions(-) diff --git a/lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js b/lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js index fce92d30..2ea54376 100644 --- a/lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js +++ b/lib/components/TimeSeriesViewer/TimeSeriesViewerAxes.js @@ -700,13 +700,13 @@ function TimeSeriesViewerAxes() { }, /*#__PURE__*/_react.default.createElement("div", { style: { marginBottom: _Theme.default.spacing(3), - marginRight: _Theme.default.spacing(3) + marginRight: _Theme.default.spacing(4) } }, renderOption('Y_AXIS_SCALE')), /*#__PURE__*/_react.default.createElement("div", { className: classes.yAxesRangesContainer }, /*#__PURE__*/_react.default.createElement("div", { style: !hasY2Axis ? null : { - marginRight: _Theme.default.spacing(3) + marginRight: _Theme.default.spacing(4) } }, renderOption('Y1_AXIS_RANGE')), !hasY2Axis ? null : renderOption('Y2_AXIS_RANGE')))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, { variant: "h6", @@ -717,7 +717,7 @@ function TimeSeriesViewerAxes() { className: classes.optionsContainer }, state.availableTimeSteps.size < 3 ? null : /*#__PURE__*/_react.default.createElement("div", { style: { - marginRight: _Theme.default.spacing(3) + marginRight: _Theme.default.spacing(4) } }, renderOption('TIME_STEP')), renderOption('ROLL_PERIOD')))); } \ No newline at end of file diff --git a/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts b/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts index 44e13b43..eb8951c6 100644 --- a/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts +++ b/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.d.ts @@ -24,23 +24,23 @@ export namespace TIME_SERIES_VIEWER_STATUS_TITLES { export { READY_1 as READY }; } export namespace Y_AXIS_RANGE_MODES { - export const FROM_ZERO: string; export const CENTERED: string; + export const FROM_ZERO: string; export const CUSTOM: string; } export namespace Y_AXIS_RANGE_MODE_DETAILS { - export namespace FROM_ZERO_1 { + export namespace CENTERED_1 { export const name: string; export const description: string; } - export { FROM_ZERO_1 as FROM_ZERO }; - export namespace CENTERED_1 { + export { CENTERED_1 as CENTERED }; + export namespace FROM_ZERO_1 { const name_1: string; export { name_1 as name }; const description_1: string; export { description_1 as description }; } - export { CENTERED_1 as CENTERED }; + export { FROM_ZERO_1 as FROM_ZERO }; export namespace CUSTOM_1 { const name_2: string; export { name_2 as name }; diff --git a/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js b/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js index b454d228..00454520 100644 --- a/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js +++ b/lib/components/TimeSeriesViewer/TimeSeriesViewerContext.js @@ -103,20 +103,20 @@ var TIME_SERIES_VIEWER_STATUS_TITLES = { exports.TIME_SERIES_VIEWER_STATUS_TITLES = TIME_SERIES_VIEWER_STATUS_TITLES; var Y_AXIS_RANGE_MODES = { - FROM_ZERO: 'FROM_ZERO', CENTERED: 'CENTERED', + FROM_ZERO: 'FROM_ZERO', CUSTOM: 'CUSTOM' }; exports.Y_AXIS_RANGE_MODES = Y_AXIS_RANGE_MODES; var Y_AXIS_RANGE_MODE_DETAILS = { - FROM_ZERO: { - name: 'From Zero', - description: 'Range from zero to one standard deviation above data' - }, CENTERED: { name: 'Centered', description: 'Center data by one standard deviation above and below' }, + FROM_ZERO: { + name: 'From Zero', + description: 'Range from zero to one standard deviation above data' + }, CUSTOM: { name: 'Custom', description: 'Manually define a minimum and maximum axis range' @@ -190,7 +190,7 @@ var DEFAULT_AXIS_STATE = { dataRange: [null, null], precision: 0, standardDeviation: 0, - rangeMode: Y_AXIS_RANGE_MODES.FROM_ZERO, + rangeMode: Y_AXIS_RANGE_MODES.CENTERED, axisRange: [0, 0] }; var DEFAULT_STATE = { diff --git a/lib/components/TimeSeriesViewer/TimeSeriesViewerSites.js b/lib/components/TimeSeriesViewer/TimeSeriesViewerSites.js index cc2db57a..a90b54d1 100644 --- a/lib/components/TimeSeriesViewer/TimeSeriesViewerSites.js +++ b/lib/components/TimeSeriesViewer/TimeSeriesViewerSites.js @@ -77,6 +77,8 @@ var _Terrain = _interopRequireDefault(require("@material-ui/icons/Terrain")); var _History = _interopRequireDefault(require("@material-ui/icons/History")); +var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined")); + var _MyLocation = _interopRequireDefault(require("@material-ui/icons/MyLocation")); var _NotInterested = _interopRequireDefault(require("@material-ui/icons/NotInterested")); @@ -131,8 +133,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - var ucWord = function ucWord(word) { return "".concat(word.slice(0, 1)).concat(word.slice(1).toLowerCase()); }; @@ -152,8 +152,6 @@ var ICON_SVGS = { */ var useStyles = (0, _styles.makeStyles)(function (theme) { - var _siteCard; - return { root: { flexGrow: 1, @@ -199,15 +197,12 @@ var useStyles = (0, _styles.makeStyles)(function (theme) { alignContent: 'flex-start', flexFlow: 'row wrap' }, - siteCard: (_siteCard = { + siteCard: { + width: '100%', padding: theme.spacing(1.5, 2, 1.5, 2), backgroundColor: theme.palette.grey[50], marginTop: theme.spacing(3) - }, _defineProperty(_siteCard, theme.breakpoints.up('lg'), { - marginRight: theme.spacing(3) - }), _defineProperty(_siteCard, theme.breakpoints.down('md'), { - width: '100%' - }), _siteCard), + }, siteTitleContainer: { display: 'flex', justifyContent: 'space-between', @@ -240,17 +235,24 @@ var useStyles = (0, _styles.makeStyles)(function (theme) { }, positionsTitleContainer: { display: 'flex', - justifyContent: 'space-between', - alignItems: 'center' + justifyContent: 'flex-start', + alignItems: 'center', + marginTop: theme.spacing(2) + }, + positionsCardContainer: { + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'flex-start', + flexWrap: 'wrap' }, positionCard: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: theme.spacing(0.5, 2, 0.5, 0.5), - width: '100%', backgroundColor: theme.palette.grey[100], - marginTop: theme.spacing(1.5) + marginTop: theme.spacing(1.5), + marginRight: theme.spacing(3) }, startFlex: { display: 'flex', @@ -378,6 +380,8 @@ var OptionDefaultProps = { innerRef: null, isDisabled: false }; +var positionsDescription = "\n Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates\n describe where the sensor is located relative to the ground-level reference point for the site.\n Positions may change over time.\n"; +var positionsSeriesDescription = "\n Each position selected will become a distinct series in the chart for each variable (example: 2\n positions \xD7 3 variables = 6 distinct series).\n"; /** PositionHistoryButton - button that opens a dialog to show all history for a given position */ @@ -432,7 +436,7 @@ function PositionHistoryButton(props) { id: "position-history-dialog-description", tabIndex: -1, variant: "body2" - }, "Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates describe where the sensor is located relative to the ground-level reference point for the site. Positions may change over time. The table below shows changes to the physical location of this position since its creation."), /*#__PURE__*/_react.default.createElement(_TableContainer.default, null, /*#__PURE__*/_react.default.createElement(_Table.default, { + }, "".concat(positionsDescription, " The table below shows changes to the physical location of this position since its creation.")), /*#__PURE__*/_react.default.createElement(_TableContainer.default, null, /*#__PURE__*/_react.default.createElement(_Table.default, { className: classes.table, "aria-label": "simple table" }, /*#__PURE__*/_react.default.createElement(_TableHead.default, null, /*#__PURE__*/_react.default.createElement(_TableRow.default, { @@ -615,7 +619,11 @@ function PositionDetail(props) { }), /*#__PURE__*/_react.default.createElement(_Typography.default, { variant: "body2", style: _extends({}, fadeStyle) - }, "".concat(elevation, "m")))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, { + }, "".concat(elevation, "m")))), /*#__PURE__*/_react.default.createElement("div", { + style: { + marginRight: _Theme.default.spacing(3) + } + }, /*#__PURE__*/_react.default.createElement(_Typography.default, { variant: "body2" }, /*#__PURE__*/_react.default.createElement("span", { style: _extends({}, axisStyle) @@ -625,7 +633,6 @@ function PositionDetail(props) { style: _extends({}, axisStyle) }, "z:"), "".concat(zOffset, "m"))), /*#__PURE__*/_react.default.createElement("div", { style: { - flexGrow: 1, textAlign: 'right' } }, /*#__PURE__*/_react.default.createElement(PositionHistoryButton, { @@ -666,6 +673,7 @@ function SelectedPosition(props) { "aria-label": "remove position ".concat(position, " from ").concat(siteCode), disabled: disabled, style: { + marginLeft: _Theme.default.spacing(1), marginRight: _Theme.default.spacing(1) }, onClick: function onClick() { @@ -759,6 +767,9 @@ function SelectPositionsButton(props) { size: "small", variant: "outlined", startIcon: /*#__PURE__*/_react.default.createElement(_TouchApp.default, null), + style: { + marginLeft: _Theme.default.spacing(4) + }, onClick: function onClick() { setLocalSelectedPositions(selectedPositions); setSelectDialogOpen(true); @@ -801,7 +812,7 @@ function SelectPositionsButton(props) { id: "add-positions-dialog-description", tabIndex: -1, variant: "body2" - }, "Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates describe where the sensor is located relative to the ground-level reference point for the site. Each position selected will become a distinct series in the chart for each variable (example: 2 positions \xD7 3 variables = 6 distinct series)."), /*#__PURE__*/_react.default.createElement(_List.default, null, availablePositions.map(function (position) { + }, positionsDescription, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), positionsSeriesDescription), /*#__PURE__*/_react.default.createElement(_List.default, null, availablePositions.map(function (position) { var labelId = "position-list-label-".concat(position); return /*#__PURE__*/_react.default.createElement(_ListItem.default, { key: position, @@ -1121,17 +1132,28 @@ function SelectedSite(props) { }, selectedSiteContent, positions.length ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", { className: classes.positionsTitleContainer }, /*#__PURE__*/_react.default.createElement(_Typography.default, { - variant: "h6" - }, "Position(s):"), /*#__PURE__*/_react.default.createElement(SelectPositionsButton, { + variant: "subtitle2" + }, "Position(s)"), /*#__PURE__*/_react.default.createElement(_Tooltip.default, { + title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, positionsDescription, /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), positionsSeriesDescription) + }, /*#__PURE__*/_react.default.createElement(_IconButton.default, { + size: "small", + style: { + marginLeft: _Theme.default.spacing(1) + } + }, /*#__PURE__*/_react.default.createElement(_InfoOutlined.default, { + fontSize: "small" + }))), /*#__PURE__*/_react.default.createElement(SelectPositionsButton, { selectedSite: site - })), positions.map(function (position) { + })), /*#__PURE__*/_react.default.createElement("div", { + className: classes.positionsCardContainer + }, positions.map(function (position) { return /*#__PURE__*/_react.default.createElement(SelectedPosition, { key: position, siteCode: siteCode, position: position, disabled: positions.length < 2 }); - })) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", { + }))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", { className: classes.startFlex, style: { alignItems: 'center' diff --git a/package.json b/package.json index f2c2e54f..0262b241 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "portal-core-components", - "version": "1.4.3", + "version": "1.4.4", "main": "./lib/index.js", "private": true, "homepage": "http://localhost:3010/core-components", diff --git a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerAxes.jsx b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerAxes.jsx index 52f56bb4..e3bd4111 100644 --- a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerAxes.jsx +++ b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerAxes.jsx @@ -557,11 +557,11 @@ export default function TimeSeriesViewerAxes() {
y Axes
-
+
{renderOption('Y_AXIS_SCALE')}
-
+
{renderOption('Y1_AXIS_RANGE')}
{!hasY2Axis ? null : renderOption('Y2_AXIS_RANGE')} @@ -572,7 +572,7 @@ export default function TimeSeriesViewerAxes() { x Axis (Time)
{state.availableTimeSteps.size < 3 ? null : ( -
{renderOption('TIME_STEP')}
+
{renderOption('TIME_STEP')}
)} {renderOption('ROLL_PERIOD')}
diff --git a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerContext.jsx b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerContext.jsx index d81c7219..11d3a5b1 100644 --- a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerContext.jsx +++ b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerContext.jsx @@ -62,19 +62,19 @@ export const TIME_SERIES_VIEWER_STATUS_TITLES = { // Keys, details, and supporting functions for all possible Y-axis range modes export const Y_AXIS_RANGE_MODES = { - FROM_ZERO: 'FROM_ZERO', CENTERED: 'CENTERED', + FROM_ZERO: 'FROM_ZERO', CUSTOM: 'CUSTOM', }; export const Y_AXIS_RANGE_MODE_DETAILS = { - FROM_ZERO: { - name: 'From Zero', - description: 'Range from zero to one standard deviation above data', - }, CENTERED: { name: 'Centered', description: 'Center data by one standard deviation above and below', }, + FROM_ZERO: { + name: 'From Zero', + description: 'Range from zero to one standard deviation above data', + }, CUSTOM: { name: 'Custom', description: 'Manually define a minimum and maximum axis range', @@ -132,7 +132,7 @@ const DEFAULT_AXIS_STATE = { dataRange: [null, null], precision: 0, standardDeviation: 0, - rangeMode: Y_AXIS_RANGE_MODES.FROM_ZERO, + rangeMode: Y_AXIS_RANGE_MODES.CENTERED, axisRange: [0, 0], }; const DEFAULT_STATE = { diff --git a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerSites.jsx b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerSites.jsx index 3094e597..99fb9249 100644 --- a/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerSites.jsx +++ b/src/lib_components/components/TimeSeriesViewer/TimeSeriesViewerSites.jsx @@ -39,6 +39,7 @@ import Skeleton from '@material-ui/lab/Skeleton'; import ClearIcon from '@material-ui/icons/Clear'; import ElevationIcon from '@material-ui/icons/Terrain'; import HistoryIcon from '@material-ui/icons/History'; +import InfoIcon from '@material-ui/icons/InfoOutlined'; import LocationIcon from '@material-ui/icons/MyLocation'; import NoneIcon from '@material-ui/icons/NotInterested'; import SearchIcon from '@material-ui/icons/Search'; @@ -117,15 +118,10 @@ const useStyles = makeStyles(theme => ({ flexFlow: 'row wrap', }, siteCard: { + width: '100%', padding: theme.spacing(1.5, 2, 1.5, 2), backgroundColor: theme.palette.grey[50], marginTop: theme.spacing(3), - [theme.breakpoints.up('lg')]: { - marginRight: theme.spacing(3), - }, - [theme.breakpoints.down('md')]: { - width: '100%', - }, }, siteTitleContainer: { display: 'flex', @@ -159,17 +155,24 @@ const useStyles = makeStyles(theme => ({ }, positionsTitleContainer: { display: 'flex', - justifyContent: 'space-between', + justifyContent: 'flex-start', alignItems: 'center', + marginTop: theme.spacing(2), + }, + positionsCardContainer: { + display: 'flex', + justifyContent: 'flex-start', + alignItems: 'flex-start', + flexWrap: 'wrap', }, positionCard: { display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: theme.spacing(0.5, 2, 0.5, 0.5), - width: '100%', backgroundColor: theme.palette.grey[100], marginTop: theme.spacing(1.5), + marginRight: theme.spacing(3), }, startFlex: { display: 'flex', @@ -288,6 +291,17 @@ const OptionDefaultProps = { isDisabled: false, }; +const positionsDescription = ` + Positions are distinct physical sensor locations at a given site. The x, y, and z coordinates + describe where the sensor is located relative to the ground-level reference point for the site. + Positions may change over time. +`; + +const positionsSeriesDescription = ` + Each position selected will become a distinct series in the chart for each variable (example: 2 + positions × 3 variables = 6 distinct series). +`; + /** PositionHistoryButton - button that opens a dialog to show all history for a given position */ @@ -334,10 +348,7 @@ function PositionHistoryButton(props) { - Positions are distinct physical sensor locations at a given site. The x, y, and z - coordinates describe where the sensor is located relative to the ground-level - reference point for the site. Positions may change over time. The table below shows - changes to the physical location of this position since its creation. + {`${positionsDescription} The table below shows changes to the physical location of this position since its creation.`} @@ -473,7 +484,7 @@ function PositionDetail(props) { -
+
x: {`${xOffset}m`} @@ -485,7 +496,7 @@ function PositionDetail(props) { {`${zOffset}m`}
-
+
@@ -512,7 +523,7 @@ function SelectedPosition(props) { { if (disabled) { return; } const selectedSiteIdx = state.selection.sites @@ -573,6 +584,7 @@ function SelectPositionsButton(props) { size="small" variant="outlined" startIcon={} + style={{ marginLeft: Theme.spacing(4) }} onClick={() => { setLocalSelectedPositions(selectedPositions); setSelectDialogOpen(true); @@ -607,10 +619,10 @@ function SelectPositionsButton(props) { - Positions are distinct physical sensor locations at a given site. The x, y, and z - coordinates describe where the sensor is located relative to the ground-level - reference point for the site. Each position selected will become a distinct series - in the chart for each variable (example: 2 positions × 3 variables = 6 distinct series). + {positionsDescription} +
+
+ {positionsSeriesDescription} {availablePositions.map((position) => { @@ -927,19 +939,35 @@ function SelectedSite(props) { {positions.length ? (
- - Position(s): + + Position(s) + + {positionsDescription} +
+
+ {positionsSeriesDescription} + + )} + > + + + +
- {positions.map(position => ( - - ))} +
+ {positions.map(position => ( + + ))} +
) : (