diff --git a/web/js/components/charting/chart-component.js b/web/js/components/charting/chart-component.js index 88cc8e041e..8de119a6fd 100644 --- a/web/js/components/charting/chart-component.js +++ b/web/js/components/charting/chart-component.js @@ -9,7 +9,14 @@ function ChartComponent (props) { liveData, } = props; - const { data, unit } = liveData; + const { + data, + unit, + startDate, + endDate, + numRangeDays, + isTruncated, + } = liveData; // Arbitrary array of colors to use const lineColors = ['#A3905D', '#82CA9D', 'orange', 'pink', 'green', 'red', 'yellow', 'aqua', 'maroon']; @@ -156,12 +163,6 @@ function ChartComponent (props) { -
- Note: -
- {' '} - Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. -
); } @@ -170,33 +171,63 @@ function ChartComponent (props) { return (
-
- - [value, `${name}${formattedUnit}`]} /> - {' '} - {getLineChart(data)} - - - `${value}${formattedUnit}`} /> - +
+
+ + [value, `${name}${formattedUnit}`]} /> + {' '} + {getLineChart(data)} + + + `${value}${formattedUnit}`} /> + +
+
+

+ Average Statistics + {formattedUnit} +

+
+ {getQuickStatistics(data)} +
-
-

- Average Statistics - {formattedUnit} -

-
- {getQuickStatistics(data)} +
+ Note: + Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. + {isTruncated + && ( + <> +
+
+
+ Note: As part of this beta feature release, the number of data points plotted between + + {` ${startDate} `} + + and + + {` ${endDate} `} + + has been reduced from + + {` ${numRangeDays} `} + + to + 20 + . +
+ + )}
); diff --git a/web/js/components/charting/charting-info.js b/web/js/components/charting/charting-info.js index 8dc3ac0e06..32decc591b 100644 --- a/web/js/components/charting/charting-info.js +++ b/web/js/components/charting/charting-info.js @@ -23,13 +23,11 @@ function ChartingInfo(props) {

The default area of interest is the entire screen, click on the “Entire Screen” button to change to a bounding box area of interest selection. Click on any box at the edge or corner of the selection box to change the size and shape.

-

The default date selection is a date range of the past 7 days. Click on the dates to change the date range in the Charting Mode Date Selection box. Click on the red “Generate Chart” button to generate a chart of change over time.

+

The default date selection is a date range of the past 7 days. Click on the dates to change the date range in the Charting Mode Date Selection box. Click on the red “Generate Chart” button to generate a chart of change over time. (As part of this beta feature release, the number of plotted data points may be reduced if it exceeds 20 points).

To select a single date, select “One Date”. Click on the date to change the date in date selection box. Click on the red “Generate Statistics” button to generate a list of statistics including min, max, mean, and standard deviation.

-

NOTE:

- -

Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. Results from these analyses should not be used for formal scientific study since the imagery is generally of lower precision than the original data and has often had additional processing steps applied to it, e.g. projection into a different coordinate system.

+

NOTE: Numerical analyses performed on imagery should only be used for initial basic exploratory purposes. Results from these analyses should not be used for formal scientific study since the imagery is generally of lower precision than the original data and has often had additional processing steps applied to it, e.g. projection into a different coordinate system.

diff --git a/web/js/components/sidebar/charting-mode-options.js b/web/js/components/sidebar/charting-mode-options.js index ad06e133c0..dfb5a373d2 100644 --- a/web/js/components/sidebar/charting-mode-options.js +++ b/web/js/components/sidebar/charting-mode-options.js @@ -38,6 +38,7 @@ const AOIFeatureObj = {}; const vectorLayers = {}; const sources = {}; let init = false; +const STEP_NUM = 20; function ChartingModeOptions(props) { const { @@ -201,7 +202,7 @@ function ChartingModeOptions(props) { timestamp: startDateForImageStat, // start date endTimestamp: endDateForImageStat, // end date type: timeSpan === 'range' ? 'series' : 'date', - steps: 20, // the number of days selected within a given range/series. Use '1' for just the start and end date, '2' for start date, end date and middle date, etc. + steps: STEP_NUM, // the number of days selected within a given range/series. Use '1' for just the start and end date, '2' for start date, end date and middle date, etc. layer: layerInfo.id, // Layer to be pulled from gibs api. e.g. 'GHRSST_L4_MUR_Sea_Surface_Temperature' colormap: `${layerInfo.palette.id}.xml`, // Colormap to use to decipher layer. e.g. 'GHRSST_Sea_Surface_Temperature.xml' areaOfInterestCoords: AOIForImageStat, // Bounding box of latitude and longitude. @@ -305,7 +306,9 @@ function ChartingModeOptions(props) { const uriParameters = getImageStatRequestParameters(layerInfo, timeSpanSelection); const requestURI = getImageStatStatsRequestURL(uriParameters); const data = await getImageStatData(requestURI); - // TEMP + // SMALL DATA + // const data = {"ok":true,"body":{"mean":{"2025-01-16T00:00:00Z":97.07191011235955,"2025-01-17T00:00:00Z":83.35759876543207,"2025-01-18T00:00:00Z":116.82821219135805,"2025-01-19T00:00:00Z":123.08370340999208,"2025-01-20T00:00:00Z":94.90760416666666,"2025-01-21T00:00:00Z":107.88121683763708,"2025-01-22T00:00:00Z":107.39176388888889,"2025-01-23T00:00:00Z":103.96806712962965,"2025-01-24T00:00:00Z":100.8427979799023,"2025-01-25T00:00:00Z":96.70689583333335,"2025-01-26T00:00:00Z":95.49105417891643,"2025-01-27T00:00:00Z":96.38790972222222,"2025-01-28T00:00:00Z":92.7621311728395,"2025-01-29T00:00:00Z":93.29744975716811,"2025-01-30T00:00:00Z":88.83217669753087,"2025-01-31T00:00:00Z":96.12559726962458},"median":{"2025-01-16T00:00:00Z":"96.6","2025-01-17T00:00:00Z":"84.0","2025-01-18T00:00:00Z":"112.0","2025-01-19T00:00:00Z":"120.4","2025-01-20T00:00:00Z":"96.6","2025-01-21T00:00:00Z":"106.4","2025-01-22T00:00:00Z":"107.8","2025-01-23T00:00:00Z":"105.0","2025-01-24T00:00:00Z":"98.0","2025-01-25T00:00:00Z":"96.6","2025-01-26T00:00:00Z":"96.6","2025-01-27T00:00:00Z":"92.4","2025-01-28T00:00:00Z":"92.4","2025-01-29T00:00:00Z":"92.4","2025-01-30T00:00:00Z":"86.8","2025-01-31T00:00:00Z":"95.2"},"max":{"2025-01-16T00:00:00Z":98,"2025-01-17T00:00:00Z":93.8,"2025-01-18T00:00:00Z":264.6,"2025-01-19T00:00:00Z":158.2,"2025-01-20T00:00:00Z":100.8,"2025-01-21T00:00:00Z":117.6,"2025-01-22T00:00:00Z":121.8,"2025-01-23T00:00:00Z":117.6,"2025-01-24T00:00:00Z":113.4,"2025-01-25T00:00:00Z":105,"2025-01-26T00:00:00Z":96.6,"2025-01-27T00:00:00Z":126,"2025-01-28T00:00:00Z":102.2,"2025-01-29T00:00:00Z":102.2,"2025-01-30T00:00:00Z":102.2,"2025-01-31T00:00:00Z":106.4},"min":{"2025-01-16T00:00:00Z":0,"2025-01-17T00:00:00Z":0,"2025-01-18T00:00:00Z":0,"2025-01-19T00:00:00Z":0,"2025-01-20T00:00:00Z":0,"2025-01-21T00:00:00Z":0,"2025-01-22T00:00:00Z":0,"2025-01-23T00:00:00Z":0,"2025-01-24T00:00:00Z":0,"2025-01-25T00:00:00Z":0,"2025-01-26T00:00:00Z":0,"2025-01-27T00:00:00Z":0,"2025-01-28T00:00:00Z":0,"2025-01-29T00:00:00Z":0,"2025-01-30T00:00:00Z":0,"2025-01-31T00:00:00Z":0},"stdev":{"2025-01-16T00:00:00Z":0.6617967989920854,"2025-01-17T00:00:00Z":3.220849128819256,"2025-01-18T00:00:00Z":29.675523832283183,"2025-01-19T00:00:00Z":14.310925522070042,"2025-01-20T00:00:00Z":3.5598765259981993,"2025-01-21T00:00:00Z":4.926791702701727,"2025-01-22T00:00:00Z":5.19726866834092,"2025-01-23T00:00:00Z":6.330286539196557,"2025-01-24T00:00:00Z":5.311816187987275,"2025-01-25T00:00:00Z":3.4549860163839394,"2025-01-26T00:00:00Z":1.7003223073187046,"2025-01-27T00:00:00Z":9.102476055312035,"2025-01-28T00:00:00Z":3.6813294651446005,"2025-01-29T00:00:00Z":3.0254224490129413,"2025-01-30T00:00:00Z":5.538322354812423,"2025-01-31T00:00:00Z":4.696937503618028},"stderr":"0.008995753703555322","hist":[["77.0","1281972"],["95.76","1129490"],["114.52000000000001","153827"],["133.28","34408"],["152.04000000000002","15515"],["170.8","4840"],["189.56","1650"],["208.32000000000002","0"],["227.08","1650"],["245.84","3300"]]}}; + // LARGE DATA // const data = {"ok": true, "body": {"mean": {"2024-12-26T00:00:00Z": 93.63675308641973, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 98.82166280864197, "2024-12-29T00:00:00Z": 112.49727376827762, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 100.86907306242412, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 87.06832793209877, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 92.68513657407406, "2025-01-08T00:00:00Z": 94.09509044982106, "2025-01-09T00:00:00Z": 95.70309233791751, "2025-01-10T00:00:00Z": 90.53262577160493, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 106.26332069255311, "2025-01-29T00:00:00Z": 94.04687768958594}, "median": {"2024-12-26T00:00:00Z": "92.4", "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": "92.4", "2024-12-29T00:00:00Z": "107.8", "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": "100.8", "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": "85.4", "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": "92.4", "2025-01-08T00:00:00Z": "93.8", "2025-01-09T00:00:00Z": "95.2", "2025-01-10T00:00:00Z": "88.2", "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": "107.8", "2025-01-29T00:00:00Z": "93.8"}, "max": {"2024-12-26T00:00:00Z": 109.2, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 337.4, "2024-12-29T00:00:00Z": 161.0, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 116.2, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 102.2, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 105.0, "2025-01-08T00:00:00Z": 116.2, "2025-01-09T00:00:00Z": 103.6, "2025-01-10T00:00:00Z": 119.0, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 126.0, "2025-01-29T00:00:00Z": 105.0}, "min": {"2024-12-26T00:00:00Z": 0, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 0, "2024-12-29T00:00:00Z": 0, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 0, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 0, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 0, "2025-01-08T00:00:00Z": 0, "2025-01-09T00:00:00Z": 0, "2025-01-10T00:00:00Z": 0, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 0, "2025-01-29T00:00:00Z": 0}, "stdev": {"2024-12-26T00:00:00Z": 5.573183295940014, "2024-12-27T00:00:00Z": 0, "2024-12-28T00:00:00Z": 29.669696188643815, "2024-12-29T00:00:00Z": 14.394170942103589, "2024-12-30T00:00:00Z": 0, "2024-12-31T00:00:00Z": 0, "2025-01-01T00:00:00Z": 0, "2025-01-02T00:00:00Z": 0, "2025-01-03T00:00:00Z": 3.511249891935887, "2025-01-04T00:00:00Z": 0, "2025-01-05T00:00:00Z": 4.900565849526661, "2025-01-06T00:00:00Z": 0, "2025-01-07T00:00:00Z": 3.7435652287331145, "2025-01-08T00:00:00Z": 4.800023185115589, "2025-01-09T00:00:00Z": 3.44325727950279, "2025-01-10T00:00:00Z": 7.34434947432395, "2025-01-11T00:00:00Z": 0, "2025-01-12T00:00:00Z": 0, "2025-01-13T00:00:00Z": 9.15082906276502, "2025-01-29T00:00:00Z": 3.82158766280483}, "stderr": "0.00798107110201455", "hist": [["78.4", "2275025"], ["104.30000000000001", "285651"], ["130.2", "16565"], ["156.1", "4885"], ["182.0", "1026"], ["207.9", "1044"], ["233.79999999999998", "3920"], ["259.7", "986"], ["285.6", "0"], ["311.5", "969"]]}}; if (!data.ok) { @@ -328,11 +331,16 @@ function ChartingModeOptions(props) { if (timeSpanSelection === 'range') { const rechartsData = formatGIBSDataForRecharts(dataToRender); + const numRangeDays = Math.floor((Date.parse(initialEndDate) - Date.parse(initialStartDate)) / 86400000); displayChart({ title: dataToRender.title, subtitle: dataToRender.subtitle, unit: dataToRender.unit, data: rechartsData, + startDate: primaryDate, + endDate: secondaryDate, + numRangeDays, + isTruncated: numRangeDays > STEP_NUM, }); updateChartRequestStatus(false); } else { diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss index 15a7d19540..d86b69974e 100644 --- a/web/scss/features/sidebar.scss +++ b/web/scss/features/sidebar.scss @@ -697,7 +697,7 @@ button#charting-simple-stats-button { text-decoration: underline !important; } -.charting-chart-container { +.charting-chart-inner { display: flex; justify-content: space-between; }